/* 개념 우주 메인 화면 */
body { background: radial-gradient(ellipse at 50% 0%, #15123055, transparent 60%), var(--bg); }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--panel); padding: 8px 12px; }
.skip-link:focus { left: 8px; top: 8px; }

/* 검색 */
.search-zone { padding: 16px 22px 12px; display: flex; gap: 18px; align-items: center; }
.search-area { position: relative; flex: 1; min-width: 0; z-index: 30; max-width: 860px; }
.search-form { display: flex; align-items: center; gap: 10px; border: 1px solid #465077; border-radius: 12px; background: var(--panel-2); padding: 8px 8px 8px 14px; }
.search-form:focus-within { border-color: var(--accent); }
.search-form svg { width: 19px; height: 19px; flex: none; color: #b6accd; }
.search-form input { background: transparent; border: 0; outline: none; min-width: 0; width: 100%; padding: 4px 0; font-size: 15px; }
.search-form input::placeholder { color: var(--faint); }
.search-submit { background: #d2c7fa; border: 0; border-radius: 8px; padding: 6px 16px; color: #1a1530; white-space: nowrap; font-weight: 600; cursor: pointer; }
.search-note { font-size: 12px; color: var(--muted); margin: 0; max-width: 220px; }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); border: 1px solid #4b5577; background: var(--panel); border-radius: 12px; padding: 6px; box-shadow: 0 16px 50px #0009; max-height: min(70vh, 560px); overflow: auto; }
.result-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px 7px; color: var(--muted); font-size: 12px; gap: 8px; }
.result-head button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.result { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.result:hover, .result[aria-selected="true"] { background: var(--panel-2); outline: 1px solid var(--border); }
.result strong { font-weight: 600; }
.result small { display: block; color: var(--muted); font-size: 12px; }
.result .why { font-size: 11px; color: var(--accent); white-space: nowrap; }
.result mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.results .empty { margin: 0; padding: 10px; font-size: 13px; color: var(--muted); }
.results .more { width: 100%; margin-top: 4px; }

/* 본문 2단 */
.atlas { display: grid; grid-template-columns: minmax(0, 1fr) 380px; border-top: 1px solid var(--border-soft); min-height: calc(100vh - 150px); }
.map-wrap { min-width: 0; position: relative; display: flex; flex-direction: column;
  /* 지도는 밝은 모드에서도 항상 어두운 우주 */
  --bg: #070c1b; --bg-2: #0b1124; --panel: #10172a; --panel-2: #151d34; --border: #27314c; --border-soft: #1c2540;
  --text: #edf1ff; --muted: #a4b0cf; --faint: #6f7a99; --accent: #c2b4ff; --link: #a9c8ff; color-scheme: dark; color: var(--text); background: var(--bg); }
.map-bar { position: absolute; left: 16px; right: 16px; top: 12px; z-index: 6; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; }
.map-bar > * { pointer-events: auto; }
.crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--bg) 75%, transparent); border-radius: 9px; padding: 3px; backdrop-filter: blur(4px); }
.crumbs a, .crumbs span { padding: 4px 8px; border-radius: 7px; text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--text); background: var(--panel-2); }
.crumbs a:first-child { border: 1px solid var(--border); background: var(--panel); color: var(--text); }
.crumbs [aria-current] { color: var(--accent); }
.crumbs .sep { padding: 0; color: var(--faint); }
.map-tools { display: flex; gap: 8px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--panel); }
.seg button { border: 0; background: transparent; padding: 5px 11px; font-size: 12px; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; }
.icon-btn:hover { border-color: var(--accent); }
.zoom-tools { display: inline-flex; gap: 4px; }
.list-mode .zoom-tools { display: none; }

.map { position: relative; flex: 1; min-height: 560px; overflow: hidden; touch-action: none; cursor: grab;
  background: radial-gradient(ellipse at 48% 48%, #29204444, transparent 55%), radial-gradient(ellipse at 78% 15%, #143a482a, transparent 35%), #080d1c; }
.map.dragging { cursor: grabbing; }
.starfield, .links, .objects { position: absolute; inset: 0; width: 100%; height: 100%; }
.starfield { pointer-events: none; overflow: hidden; }
.spark { position: absolute; width: 2px; height: 2px; background: #d3def6; border-radius: 50%; opacity: .2; }
.spark.big { width: 3px; height: 3px; opacity: .55; box-shadow: 0 0 8px #d9e3ff66; }
.links { pointer-events: none; overflow: visible; }
.objects { pointer-events: none; }
.objects > * { pointer-events: auto; left: 0; top: 0; will-change: transform; }
.dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.list-mode .map { display: none; }

/* 은하 */
.galaxy { position: absolute; transform: translate(-50%, -18px); width: 190px; border: 0; background: transparent; padding: 38px 6px 6px; text-align: center; cursor: pointer; z-index: 3; color: var(--text); border-radius: 14px; }
.galaxy::before { content: ""; position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--glow) 33%, #222741 90%);
  box-shadow: 0 0 20px 6px color-mix(in srgb, var(--glow) 55%, transparent), 0 0 70px 28px color-mix(in srgb, var(--glow) 16%, transparent); }
.galaxy::after { content: ""; position: absolute; top: -2px; left: 50%; width: 92px; height: 36px; border: 1px solid color-mix(in srgb, var(--glow) 40%, transparent); border-radius: 50%; transform: translateX(-50%) rotate(-24deg); pointer-events: none; }
.galaxy:hover::before, .galaxy:focus-visible::before { box-shadow: 0 0 26px 9px color-mix(in srgb, var(--glow) 70%, transparent), 0 0 80px 30px color-mix(in srgb, var(--glow) 22%, transparent); }
.galaxy .g-name { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.4px; text-shadow: 0 2px 6px #070c1b; }
.galaxy .g-sub { display: block; font-size: 11.5px; color: #bbc4dc; margin-top: 1px; }
.galaxy .g-count { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }

/* 은하 중심(현재 은하 표시) */
.focus-title { position: absolute; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 1; width: 220px; }
.focus-title .planet { display: block; width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%;
  background: radial-gradient(circle at 28% 23%, #fff, var(--glow) 30%, #28274b 72%, #11162b); box-shadow: 0 0 60px 18px color-mix(in srgb, var(--glow) 18%, transparent); }
.focus-title strong { display: block; font-weight: 600; font-size: 17px; }
.focus-title small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* 별자리(절) */
.cluster { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--glow) 45%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 12%, transparent), transparent 70%); cursor: pointer; display: grid; place-items: center; text-align: center; padding: 10px; color: var(--text); z-index: 2; }
.cluster:hover, .cluster:focus-visible { border-style: solid; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 22%, transparent), transparent 72%); }
.cluster .c-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 4px #000; }
.cluster .c-sub { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }
.cluster .c-count { font-size: 11px; color: var(--faint); display: block; }
.item-label { position: absolute; transform: translate(-50%, 0); font-size: 11.5px; color: color-mix(in srgb, var(--glow) 70%, var(--muted)); white-space: nowrap; pointer-events: auto; z-index: 1; background: none; border: 0; cursor: default; letter-spacing: -.2px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* 별(용어) */
.star { position: absolute; transform: translate(-50%, -6px); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 4px; border: 0; background: transparent; white-space: nowrap; z-index: 4; min-width: 24px; min-height: 24px; cursor: pointer; color: var(--text); }
.star .dot { display: block; width: 7px; height: 7px; background: var(--glow); border-radius: 50%; box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 65%, transparent); position: relative; flex: none; }
.star.person .dot { border-radius: 2px; transform: rotate(45deg); }
.star .nm { font-size: 12px; color: #c8d0e4; background: #090f21c9; border-radius: 5px; padding: 0 5px; text-shadow: 0 1px 4px #000; }
.star.hide-label .nm { display: none; }
.star.hide-label:hover .nm, .star.hide-label:focus-visible .nm { display: block; position: absolute; top: 14px; z-index: 10; }
.star:hover .nm { color: #fff; }
.star.dim { opacity: .35; }
.star.nb .nm { color: #f0eaff; background: #241f3d; }
.star.nb .dot { box-shadow: 0 0 12px 3px color-mix(in srgb, var(--glow) 70%, transparent); }
.star.selected { z-index: 8; }
.star.selected .dot { width: 12px; height: 12px; background: #fff; box-shadow: 0 0 16px 6px var(--glow); }
.star.selected .dot::after { content: ""; position: absolute; inset: -8px; border: 1px solid var(--glow); border-radius: 50%; }
.star.selected .nm { color: #f7f3ff; background: #332c4d; padding: 2px 9px; font-size: 13.5px; font-weight: 600; display: block; position: static; }
.star.on-path .dot { background: #ffe9a8; box-shadow: 0 0 14px 5px #ffd46b88; }
.star.on-path .nm { display: block; position: static; background: #3a321c; color: #fff4d6; }
.star.mini .nm { font-size: 11px; }
.portal { position: absolute; transform: translate(-50%, -50%); border: 1px dashed var(--border); border-radius: 99px; background: var(--panel); padding: 3px 10px; font-size: 11.5px; color: var(--text); cursor: pointer; white-space: nowrap; z-index: 6; }
.portal small { color: var(--muted); margin-left: 4px; }
.portal:hover { border-color: var(--accent); }

/* 선 */
.links path { fill: none; stroke: #4b4e6c; stroke-width: 1; opacity: .5; }
.links path.t-precedes { stroke: #7c86b8; }
.links path.t-contrasts_with { stroke-dasharray: 4 4; stroke: #b88; }
.links path.t-part_of { stroke: #6a7aa0; }
.links path.draft { opacity: .32; }
.links path.hi { stroke: #bfa1f5; stroke-width: 1.6; opacity: .95; }
.links path.hi.t-contrasts_with { stroke: #ff9e9e; }
.links path.path-hi { stroke: #ffd46b; stroke-width: 2.2; opacity: 1; }
.links path.bridge { stroke: #8d86c2; opacity: .22; }
.links text { font-size: 11px; fill: #d6c8f5; paint-order: stroke; stroke: #0b1020; stroke-width: 5px; stroke-linejoin: round; text-anchor: middle; }

/* 아래 막대 */
.map-bottom { padding: 9px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bg-2); border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.legend span { display: flex; gap: 6px; align-items: center; }
.lg-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #d7c5ff; box-shadow: 0 0 5px #ae9de877; }
.lg-planet { width: 11px; height: 11px; display: inline-block; border: 1px solid #c6b4f2; border-radius: 50%; background: #736499; }
.lg-cluster { width: 13px; height: 13px; display: inline-block; border: 1px dashed #c6b4f2; border-radius: 50%; }
.lg-line { display: inline-block; width: 18px; height: 1px; background: #b7a0f2; }
.lg-arrow { display: inline-block; width: 16px; height: 1px; background: #b7a0f2; position: relative; }
.lg-arrow::after { content: ""; position: absolute; right: -2px; top: -3px; border: 3.5px solid transparent; border-left: 5px solid #b7a0f2; }
.lg-dash { display: inline-block; width: 18px; border-top: 1px dashed #d99; }
.trail { display: flex; gap: 6px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--muted); flex-wrap: wrap; min-height: 40px; }
.trail .chip { border: 1px solid var(--border); background: var(--panel); border-radius: 99px; padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--text); text-decoration: none; }
.trail .chip:hover { border-color: var(--accent); }
.trail .clear { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 11px; }

/* 목록 보기 */
.listview { flex: 1; padding: 60px 22px 22px; overflow: auto; max-height: calc(100vh - 160px); min-height: 560px; }
.listview h2 { font-size: 18px; margin: 0 0 4px; }
.listview h3 { font-size: 14px; margin: 18px 0 6px; color: var(--accent); font-weight: 600; }
.listview .lv-tabs { margin-bottom: 14px; }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lv-card { display: block; text-decoration: none; color: var(--text); border: 1px solid var(--border-soft); background: var(--panel); border-radius: 11px; padding: 10px 13px; border-left: 3px solid var(--glow, var(--accent)); }
.lv-card:hover { border-color: var(--accent); }
.lv-card small { color: var(--muted); display: block; }
.lv-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-terms a { text-decoration: none; color: var(--text); border: 1px solid var(--border-soft); background: var(--panel); padding: 2px 9px; border-radius: 99px; font-size: 12.5px; }
.lv-terms a:hover, .lv-terms a[aria-current] { border-color: var(--accent); color: var(--accent); }
.lv-index-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.lv-index-nav a { padding: 2px 8px; border: 1px solid var(--border-soft); border-radius: 6px; text-decoration: none; color: var(--muted); font-size: 12px; }

/* 설명 패널 */
.detail { background: var(--panel); border-left: 1px solid var(--border); padding: 22px 20px 30px; min-width: 0; overflow: auto; max-height: calc(100vh - 120px); position: sticky; top: 59px; }
.detail:focus { outline: none; }
.kicker { font-size: 11px; color: #c4b3ee; letter-spacing: 1px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--glow, #c3aafa); box-shadow: 0 0 8px var(--glow, #bca3fa); }
.d-path { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.d-path a { color: var(--muted); }
.detail h2 { font-size: 23px; line-height: 1.35; letter-spacing: -.6px; font-weight: 600; margin: 0 0 6px; word-break: keep-all; }
.detail h2 .badge { font-size: 11px; font-weight: 400; margin-left: 6px; letter-spacing: 0; }
.d-alias { font-size: 12px; color: var(--muted); }
.d-sec { margin-top: 22px; }
.detail h3 { font-size: 11.5px; font-weight: 600; letter-spacing: .6px; color: #b9a5ed; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
:root[data-theme="light"] .detail h3 { color: var(--accent); }
.detail p { font-size: 13.5px; line-height: 1.8; margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
.d-none { color: var(--faint); font-size: 13px; }
.quote { border-left: 2px solid #61527e; padding-left: 12px; }
.quote mark, .snip mark { background: color-mix(in srgb, var(--accent) 25%, transparent); color: inherit; border-radius: 3px; }
.cite { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.cite a { color: var(--link); }
.example { padding-left: 12px; border-left: 2px solid #4f7a6a; }
.rel-group + .rel-group { margin-top: 12px; }
.rel-group h4 { font-size: 11.5px; color: var(--muted); font-weight: 500; margin: 0 0 6px; }
.neighbors { display: flex; flex-direction: column; gap: 6px; }
.neighbor { border: 1px solid var(--border); background: var(--panel-2); border-radius: 9px; padding: 8px 11px; text-align: left; display: block; width: 100%; cursor: pointer; color: var(--text); text-decoration: none; }
.neighbor:hover { border-color: #8877b2; }
.neighbor .n-name { display: flex; justify-content: space-between; gap: 6px; font-size: 13.5px; }
.neighbor small { display: block; font-size: 11.5px; line-height: 1.55; color: var(--muted); margin-top: 2px; }
.neighbor .dir { color: var(--accent); font-size: 12px; }
.sources { display: flex; flex-direction: column; gap: 8px; }
.source { font-size: 12.5px; border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 10px; background: var(--bg-2); }
.source .s-head { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11.5px; }
.source .s-path { color: var(--faint); font-size: 11px; }
.source .snip { margin-top: 4px; line-height: 1.65; }
.d-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 22px; }
.d-actions .btn { justify-content: center; }
.d-actions .wide { grid-column: span 2; }
.more-btn { border: 0; background: none; color: var(--link); cursor: pointer; font-size: 12px; padding: 4px 0; }
.intro h2 { font-size: 20px; }
.intro ol { padding-left: 18px; margin: 8px 0; font-size: 13px; line-height: 1.8; }
.galaxy-list { display: flex; flex-direction: column; gap: 6px; }
.galaxy-list a { display: flex; justify-content: space-between; gap: 8px; text-decoration: none; color: var(--text); border: 1px solid var(--border-soft); background: var(--panel-2); border-radius: 9px; padding: 7px 11px; border-left: 3px solid var(--glow); }
.galaxy-list a small { color: var(--muted); display: block; font-size: 11.5px; }
.galaxy-list a .cnt { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.galaxy-list a:hover { border-color: var(--accent); }

/* 경로 찾기·비교 */
.picker { position: relative; margin-bottom: 10px; }
.picker label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 3px; }
.picker .results { top: calc(100% + 2px); }
.path-steps { list-style: none; padding: 0; margin: 12px 0 0; }
.path-steps li { position: relative; padding-left: 20px; }
.path-steps li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ffd46b; }
.path-steps li + li { margin-top: 2px; }
.path-steps .edge { font-size: 12px; color: var(--muted); padding: 4px 0 6px 0; border-left: 1px dashed #ffd46b66; margin-left: -12px; padding-left: 16px; }
.compare-dialog { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 40px); border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 16px; padding: 0; }
.compare-dialog::backdrop { background: #000a; }
.cmp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); gap: 10px; }
.cmp-head h2 { font-size: 17px; margin: 0; }
.cmp-bridge { padding: 12px 18px; background: var(--bg-2); border-bottom: 1px solid var(--border-soft); font-size: 13.5px; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; }
.cmp-col { padding: 16px 18px 22px; min-width: 0; }
.cmp-col + .cmp-col { border-left: 1px solid var(--border-soft); }
.cmp-col h3 { font-size: 12px; color: #b9a5ed; margin: 16px 0 6px; }
.cmp-col h2 { margin: 2px 0; font-size: 20px; }

.site-footer { padding: 10px 22px; background: var(--bg-2); border-top: 1px solid var(--border-soft); font-size: 11.5px; color: var(--faint); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .atlas { grid-template-columns: minmax(0, 1fr) 330px; }
}
@media (max-width: 820px) {
  .atlas { grid-template-columns: 1fr; }
  .detail { border-left: 0; border-top: 1px solid var(--border); position: static; max-height: none; }
  .map { min-height: 62vh; }
  .listview { min-height: 0; max-height: none; }
  .search-note { display: none; }
  .search-zone { padding: 12px 14px 10px; }
  .map-bar { left: 8px; right: 8px; flex-direction: column; align-items: stretch; }
  .map-tools { justify-content: space-between; }
  .legend span:nth-child(n+5) { display: none; }
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-col + .cmp-col { border-left: 0; border-top: 1px solid var(--border-soft); }
}
@media (max-width: 480px) {
  .galaxy { width: 140px; }
  .galaxy .g-sub { display: none; }
  .search-form input { font-size: 14px; }
  .search-submit { padding: 6px 10px; }
}

/* 연속 확대: 펼쳐진 은하 제목, 펼쳐진 절 제목, 작은 절 원 */
.galaxy-title { position: absolute; text-align: center; pointer-events: none; z-index: 1; white-space: nowrap; }
.galaxy-title strong { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.5px; color: color-mix(in srgb, var(--glow) 55%, #fff); opacity: .85; text-shadow: 0 2px 10px #000; }
.galaxy-title small { display: block; font-size: 12px; color: var(--muted); }
.sec-title { position: absolute; transform-origin: 50% 100%; font-size: 13px; font-weight: 600; white-space: nowrap; color: color-mix(in srgb, var(--glow) 70%, #fff); text-decoration: none; background: #0a1022cc; padding: 1px 9px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--glow) 35%, transparent); z-index: 5; }
.sec-title:hover { border-color: var(--glow); }
.cluster { transform: none; }
.cluster .c-body { display: block; padding: 6px; }
.cluster.tiny .c-body { display: none; }
.cluster.tiny { border-style: dotted; }

/* 은하·절을 넘나드는 연결 */
.links path.bundle { stroke: #8d86c2; opacity: .28; stroke-linecap: round; }
.links path.bundle.cross { stroke: #b7a8ff; opacity: .38; }
.links path.cross:not(.bundle):not(.hi) { stroke-dasharray: 5 3; opacity: .6; }
.links path.stub { stroke-width: 1.6; opacity: .75; stroke-linecap: round; stroke-dasharray: 2 3; }
.links path.hi.cross { stroke-dasharray: 6 3; }
.edge-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 99px; font-size: 11.5px; white-space: nowrap; cursor: pointer; z-index: 7;
  color: var(--text); background: #0d1428e6; border: 1px solid color-mix(in srgb, var(--glow) 55%, transparent); box-shadow: 0 2px 10px #0008; }
.edge-chip:hover, .edge-chip:focus-visible { border-color: var(--glow); background: #161f3a; }
.edge-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 6px var(--glow); flex: none; }
.edge-chip b { font-weight: 600; color: var(--glow); }
.edge-chip small { color: var(--muted); }
.edge-chip.named { border-style: solid; }
.edge-chip.inside { opacity: .85; }
.lg-cross { display: inline-block; width: 18px; border-top: 1.5px dotted #b7a8ff; }
.legend span:has(.lg-cross)::after { content: "→ 가장자리 표지"; color: var(--faint); }

.keep-sel { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: -6px 0 16px; padding: 8px 11px; border-radius: 10px; font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--glow) 50%, transparent); background: color-mix(in srgb, var(--glow) 10%, var(--panel)); }
.keep-sel i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--glow); margin-right: 6px; box-shadow: 0 0 6px var(--glow); }
.keep-sel button { border: 1px solid var(--border); background: var(--panel); border-radius: 7px; padding: 2px 8px; cursor: pointer; font-size: 12px; margin-left: 6px; }
.edge-chip.selected-chip { border-width: 2px; font-weight: 600; }
.map * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (max-width: 600px) {
  .edge-chip { font-size: 11px; padding: 2px 8px 2px 6px; gap: 4px; }
  .sec-title { font-size: 12px; }
}

/* 회원 전용·문제 */
.locked { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--muted); background: var(--bg-2); }
.question { border: 1px solid var(--border-soft); border-radius: 11px; padding: 12px; background: var(--bg-2); margin-top: 8px; }
.q-prompt { font-weight: 600; font-size: 13.5px; margin: 0 0 6px; }
.q-quote { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.7; }
.q-choices { display: flex; flex-direction: column; gap: 6px; }
.q-choices.ox { flex-direction: row; }
.q-choices.ox .q-choice { flex: 1; justify-content: center; font-size: 18px; font-weight: 700; }
.q-choice { display: flex; gap: 8px; align-items: flex-start; text-align: left; border: 1px solid var(--border); background: var(--panel); border-radius: 9px; padding: 8px 10px; cursor: pointer; font-size: 13px; line-height: 1.55; color: var(--text); }
.q-choice:hover:not(:disabled) { border-color: var(--accent); }
.q-choice:disabled { cursor: default; }
.q-choice.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--panel)); }
.q-choice.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }
.q-no { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.q-result { margin-top: 8px; font-size: 13px; line-height: 1.6; }
.q-result .ok { color: var(--ok); }
.q-result .no { color: var(--danger); }
.qz-progress { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.qz-done { text-align: center; padding: 18px 0; }
.qz-done b { display: block; font-size: 32px; }
.qz-done span { color: var(--muted); }