/* decodeK — 화면 전부.
 *
 * 읽는 순서
 *   §토큰      색·간격·글꼴을 한자리에. **색을 여기 밖에서 쓰지 않는다.**
 *   §테마      밤이 기본, 낮은 [data-theme="light"]. 토큰만 갈아 끼운다.
 *   §바탕 §상단 §본문 §탭 §줄 §카드 §그래프 §첫화면
 *   §한 단     ≤1100px — 추천이 본문 위로 온다(가장 조심스러운 곳)
 *   §폰        ≤820px — 폰에서만 달라지는 것
 *
 * ⚠️ **색을 하드코딩하지 말 것.** 낮 모드를 켰을 때 그 자리만 검게 남는다.
 *    새 색이 필요하면 §토큰에 이름을 만들고 두 테마 모두에 값을 준다
 *    (`test_both_themes_define_every_colour` 가 그 어긋남을 잡는다).
 *
 * ── 2026-09-27 전면 개편 ──────────────────────────────────────────────
 * 전에는 **차가운 청회색 바탕(#0b0c10) + 리아코에서 가져온 형광 분홍(#ff4d6d)** 이었다.
 * 리아코와는 도메인도 손님도 다른 서비스인데 색만 물려받아, 어느 AI 대시보드에나
 * 있는 얼굴이 됐다. 그래서 둘 다 갈았다:
 *
 *   ① 바탕을 **따뜻한 먹빛/한지색** 으로. 파란 회색은 기계의 색이고 이 서비스가
 *      다루는 것은 사람과 문화다. 낮 모드는 흰색이 아니라 **한지색(#faf7f1)** 이다.
 *   ② 강조색을 **청자(celadon)** 로. 한국에서 온 색이면서 형광 분홍처럼 소리치지
 *      않아, 종류 색 여덟과 싸우지 않는다.
 *   ③ 강조색을 **아끼는 것**이 이 개편의 절반이다. 전에는 Ask·활성 탭·발자국·
 *      핀바·답 테두리·인용칩·타일 hover 까지 전부 분홍이라 위계가 없었다.
 *      지금 강조색이 칠해지는 곳은 **주요 행동 하나(Ask)와 '지금 여기'** 뿐이다.
 *   ④ 글꼴은 Pretendard 한 벌 — 한글·라틴·가나가 같은 리듬으로 선다.
 */

/* ── 토큰 · 밤(기본) ─────────────────────────────────────────────────── */
:root{
  /* 바탕은 네 겹이다: 판(bg) → 상자(panel) → 도드라진 것(raise) → 파인 것(sink) */
  --bg:#100f0e; --panel:#1a1816; --raise:#232020; --sink:#0a0a09;
  --line:#2a2624; --line2:#3b3633;
  --tx:#f4f1eb; --mut:#a79f97; --dim:#756d66;

  /* 강조 — 청자. ⚠️ 여기서만 쓴다: 주요 행동(Ask)·'지금 여기'·고른 것. */
  --accent:#2ec4a6; --accent-tx:#04231d; --accent-soft:#122c27; --accent-line:#215048;
  --accent2:#ffd35c;                        /* 별·경고처럼 아주 가끔 */
  --shadow:0 18px 44px rgba(0,0,0,.50);
  --shadow-sm:0 1px 2px rgba(0,0,0,.30),0 6px 18px rgba(0,0,0,.22);
  --ring:0 0 0 3px rgba(46,196,166,.30);
  --tint:rgba(255,255,255,.04);             /* 유리판 위의 아주 옅은 밝힘 */

  /* 그래프 — 판 바탕, 점격자, 글자와 그 테두리 */
  --graph-bg1:#191716; --graph-bg2:#0d0c0b; --graph-dot:rgba(255,255,255,.055);
  --graph-halo:#100f0e; --node-tx:#f4f1eb; --node-fill:#1a1816;

  /* 노드 종류 — 여덟 색이 서로도, 강조색(청자)과도 구별돼야 한다 */
  --Person:#7ba7ff; --Group:#b78bff; --Work:#ff9f45; --Song:#ff7ea8;
  --Event:#ff6259; --Term:#ffd35c; --Org:#98a2b3; --Place:#86d06a;
  /* 관계 묶음(선 색) — 종류 색보다 한 단 낮춘다. 선은 배경이지 주인공이 아니다. */
  --belong:#8a93a5; --work:#e0894a; --event:#e0584f; --tie:#a98be0;
  --lexicon:#d7b24a; --place:#79b564;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --fs:15px;
  /* 글꼴 — Pretendard 가 막히면 기기 글꼴로 조용히 떨어진다(index.html §글꼴). */
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo","Hiragino Sans",system-ui,Segoe UI,Roboto,sans-serif;
}

/* ── 토큰 · 낮 ──────────────────────────────────────────────────────────
 * ⚠️ 낮은 **밝기를 뒤집는 것으로 끝나지 않는다.** 밤에는 테두리로 층을 나누지만
 *    낮에는 그림자로 나눈다(흰 바탕에 회색 선만 그으면 표처럼 보인다).
 * ⚠️ 낮의 바탕은 흰색이 아니라 **한지색**이다. 순백은 눈이 아프고, 이 서비스의
 *    사진(인물·무대)이 흰 바탕에서는 오려 붙인 것처럼 뜬다. */
:root[data-theme="light"]{
  --bg:#faf7f1; --panel:#ffffff; --raise:#f3efe7; --sink:#efeae0;
  --line:#e7e0d4; --line2:#d3cabb;
  --tx:#1b1917; --mut:#6b635a; --dim:#9a9187;

  --accent:#0e9382; --accent-tx:#ffffff; --accent-soft:#e2f4f0; --accent-line:#a9ddd4;
  --accent2:#b07d0a;
  --shadow:0 20px 48px rgba(60,48,32,.13);
  --shadow-sm:0 1px 2px rgba(60,48,32,.06),0 6px 16px rgba(60,48,32,.07);
  --ring:0 0 0 3px rgba(14,147,130,.22);
  --tint:rgba(27,25,23,.03);

  --graph-bg1:#f4efe5; --graph-bg2:#fcfaf6; --graph-dot:rgba(27,25,23,.06);
  --graph-halo:#faf7f1; --node-tx:#1b1917; --node-fill:#ffffff;

  --Person:#2f6fe0; --Group:#7c4dd8; --Work:#c96a18; --Song:#d4477f;
  --Event:#d63a31; --Term:#a8790a; --Org:#667085; --Place:#4e8f3a;
  --belong:#6b7280; --work:#c0741f; --event:#c6392f; --tie:#7a55c4;
  --lexicon:#9c7412; --place:#4e8f3a;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --fs:15px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo","Hiragino Sans",system-ui,Segoe UI,Roboto,sans-serif;
}

/* ── 바탕 ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--tx);
  font:var(--fs)/1.65 var(--font);
  font-feature-settings:"ss03","cv01";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .2s,color .2s;
}
/* ⚠️ **`hidden` 이 클래스 규칙에 지고 있었다.** `.pinbar{display:flex}` 같은 한 줄이
 * UA 의 `[hidden]{display:none}` 보다 우선순위가 높아서, 숨긴 칸이 **빈 띠로 그대로
 * 떠 있었다** — 운영 화면 맨 위의 그 붉은 줄이 그것이다(2026-09-27 발견).
 * 칸마다 `display` 를 조심하는 것보다 여기서 한 번에 못 박는 편이 안전하다. */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;letter-spacing:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
img{max-width:100%}
h1,h2,h3{letter-spacing:-.022em}

/* 무슨 일이 나도 빈 화면으로 끝내지 않는다 — 흰 종이는 고장인지 텅 빈 것인지 모른다.
 * ⚠️ **이것은 화면이 통째로 못 선 경우에만 뜬다**(app.js §fatal). 그래서 페이지
 *    맨 위의 빨간 띠가 아니라 **한가운데의 조용한 카드**다 — 이미 잘 떠 있는 화면
 *    위에 고장 딱지를 붙이던 것이 옛 버전의 문제였다(2026-09-27). */
.oops{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  padding:32px;background:var(--bg);
}
.oops b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.oops span{color:var(--mut);font-size:14px;max-width:34ch;line-height:1.6}
.oops .btn{margin-top:8px}

/* ── 상단 ─────────────────────────────────────────────────────────────
 * 눈이 가야 하는 순서: 로고 → 검색창 → Ask. 나머지(파도타기·로그인·테마·언어)는
 * **테두리 없이 물러나 있다가** 손이 닿을 때만 드러난다. 전에는 전부 테두리를
 * 두른 단추라 여덟 개가 같은 목소리로 떠들었다. */
.top{
  display:flex;align-items:center;gap:12px;padding:12px 22px;
  /* ⚠️ color-mix 를 모르는 브라우저는 그 한 줄을 버린다 — 앞에 확실한 값을 둔다. */
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding-right:4px}
/* ⚠️ 전에는 `◍` 글리프였다. 폰트마다 모양이 다르고 없는 기기에서는 두부(□)가 떴다 —
 * 이제 브랜드 로고 그림이다(`/mark.png`). 원 바깥이 투명이라 밤·낮 둘 다에 얹힌다. */
.brand .knot{width:29px;height:29px;display:block;flex:0 0 auto;border-radius:9px}
.brand .name{font-weight:800;letter-spacing:-.02em;font-size:19px}
.brand .tagline{
  color:var(--dim);font-size:12.5px;max-width:240px;line-height:1.35;
  padding-left:11px;margin-left:3px;border-left:1px solid var(--line);
}

/* 검색창 — 이 화면에서 가장 큰 칸이다. 이 서비스는 여기서 시작한다. */
.searchwrap{position:relative;flex:1 1 520px;display:flex;align-items:center;min-width:0;
  max-width:720px;margin:0 auto}
.sicon{
  position:absolute;left:16px;width:18px;height:18px;pointer-events:none;
  fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;transition:stroke .16s;
}
.searchwrap:focus-within .sicon{stroke:var(--accent)}
.search{
  width:100%;min-width:0;padding:13px 112px 13px 44px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--sink);color:var(--tx);outline:none;
  /* ⚠️ 16px 미만이면 iOS 사파리가 입력할 때 화면을 제멋대로 확대한다. */
  font-size:16px;font-family:var(--font);
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.search::placeholder{color:var(--dim)}
.search:focus{border-color:var(--accent-line);background:var(--panel);box-shadow:var(--ring)}
.searchwrap .btn{position:absolute;right:5px;padding:9px 20px}

.btn{
  padding:10px 17px;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--accent);color:var(--accent-tx);font-weight:700;white-space:nowrap;
  font-size:14px;letter-spacing:-.01em;
  transition:filter .16s,transform .08s,background .16s,color .16s;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--mut);font-weight:600}
.btn.ghost:hover{color:var(--tx);background:var(--raise)}

.tools{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin-left:auto}
.iconbtn{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  color:var(--mut);font-size:15px;line-height:1;transition:.16s;
}
.iconbtn:hover{color:var(--tx);background:var(--raise)}
.langs{display:flex;gap:1px;background:var(--sink);border-radius:var(--r-pill);
  padding:3px;margin-left:4px}
.lang{background:transparent;border:0;color:var(--dim);padding:5px 10px;font-size:12px;
  font-weight:600;border-radius:var(--r-pill);transition:.16s;min-width:32px}
.lang:hover{color:var(--tx)}
.lang.on{background:var(--panel);color:var(--tx);box-shadow:var(--shadow-sm)}

/* 검색 자동완성 */
.sugg{
  position:absolute;top:calc(100% + 9px);left:0;right:0;z-index:50;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  max-height:64vh;overflow:auto;box-shadow:var(--shadow);padding:6px;
}
.sugg .row{display:flex;gap:9px;align-items:center;padding:10px 12px;cursor:pointer;
  border-radius:var(--r);transition:background .12s}
.sugg .row:hover,.sugg .row.on{background:var(--raise)}
.sugg .row .nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg .row .sub{color:var(--dim);font-size:12px;margin-left:auto;flex:0 0 auto}
.sugg .row.ask{background:var(--accent-soft);margin-bottom:4px}
.sugg .row.ask .nm{color:var(--accent);font-weight:700}
.sugg .row.ask .sub{color:var(--accent);opacity:.75}
.sugg .head{padding:10px 12px 5px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:700}

/* ── 발자국 · 핀 ──────────────────────────────────────────────────────
 * 발자국은 '어디까지 왔나'를 보여 주는 조용한 줄이다 — 배경도 테두리도 없다. */
.trail{
  display:flex;gap:7px;align-items:center;padding:10px 22px 0;overflow-x:auto;
  font-size:12.5px;scrollbar-width:none;
}
.trail::-webkit-scrollbar{display:none}
.trail .step{color:var(--dim);white-space:nowrap;cursor:pointer;transition:color .14s}
.trail .step:hover{color:var(--tx)}
.trail .sep{color:var(--line2)}
.trail .step.cur{color:var(--tx);font-weight:700}

.pinbar{
  display:flex;gap:10px;align-items:center;margin:10px 22px 0;padding:10px 14px;
  font-size:13px;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--mut);
}
.pinbar b{color:var(--accent);font-weight:700}
.pinbar .go{margin-left:auto;background:var(--accent);color:var(--accent-tx);border:0;
  border-radius:var(--r-pill);padding:7px 14px;font-weight:700;font-size:12.5px}
.pinbar .x{background:transparent;border:0;color:var(--mut);
  border-radius:var(--r-sm);padding:5px 9px}
.pinbar .x:hover{background:var(--tint);color:var(--tx)}
.btn.pin{background:var(--raise);border:1px solid var(--line);color:var(--mut);
  padding:8px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;margin-top:12px}
.btn.pin:hover{border-color:var(--line2);color:var(--tx)}
.btn.pin.on{border-color:var(--accent-line);color:var(--accent);background:var(--accent-soft)}
/* 노드 머리의 단추 줄 — '집어 두기'와 '즐겨찾기'. ⚠️ 세로로 쌓지 않는다:
 * 폰에서 제목 아래가 두 줄이 되면 요약이 첫 화면에서 통째로 밀려 내려간다. */
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.acts .btn.pin{margin-top:12px}

/* 경로(둘 사이) */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 2px}
.chain .n{padding:7px 13px;border-radius:var(--r-pill);background:var(--raise);
  border:1px solid var(--line);cursor:pointer;font-weight:600;font-size:13px;transition:.14s}
.chain .n:hover{border-color:var(--accent-line);color:var(--accent)}
.chain .r{font-size:11.5px;color:var(--dim);white-space:nowrap}
.chain .r b{display:block;color:var(--mut);font-weight:400;max-width:190px;white-space:normal}

/* ── 레이아웃 ───────────────────────────────────────────────────────── */
.layout{display:flex;gap:28px;padding:22px 22px 64px;align-items:flex-start;
  max-width:1560px;margin:0 auto}
.stage{flex:1 1 auto;min-width:0}
.rail{flex:0 0 352px;position:sticky;top:82px}

/* ── 그래프 ───────────────────────────────────────────────────────────
 * ⚠️ **이 칸이 이 서비스의 얼굴이다.** 전에는 힘기반(cose)이 던져 놓은 털뭉치에
 *    잘린 이름이 원 안에 박히고 관계 이름표가 선 위에 전부 깔려 있어서, 무엇이
 *    가운데인지도 한눈에 안 보였다. 지금은 app.js 가 **자리를 직접 계산해서**
 *    가운데 하나 + 고리 두 겹으로 세운다(app.js §그래프). 여기서 하는 일은
 *    그 그림이 놓일 **조용한 판**을 만드는 것뿐이다. */
.graphbox{
  position:relative;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:
    radial-gradient(1100px 380px at 50% -20%,var(--graph-bg1),transparent 70%),
    radial-gradient(var(--graph-dot) 1px,transparent 1px) 0 0/22px 22px,
    var(--graph-bg2);
  box-shadow:var(--shadow-sm);
}
#cy{height:472px;width:100%}
/* ⚠️ **범례를 캔버스 위에 띄우지 않는다(2026-09-27).** 겹쳐 두면 아래쪽 노드와
 * 그 이름표가 범례 뒤로 들어가 통째로 안 보인다(실측: 'Hanni' 가 반쯤 잘렸다).
 * 그림 아래 제 칸에 앉힌다 — 가려지는 것도 없고 줄도 하나 덜 어지럽다. */
.legend{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  padding:10px 16px;border-top:1px solid var(--line);background:var(--sink);
  font-size:11px;color:var(--mut);
}
.legend .hint{color:var(--dim);margin-right:auto;font-size:11.5px}
.legend .lg{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--line);font-weight:600;
}
.legend .lg i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.legend .lg b{font-weight:700;color:var(--dim);font-size:10px}
/* 가리킨 노드의 이름과 종류가 여기 뜬다 — 그림 위에는 글자를 최소한만 둔다 */
.gtip{
  position:absolute;top:14px;left:14px;max-width:70%;padding:8px 14px;
  border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);font-size:13px;font-weight:700;pointer-events:none;
  opacity:0;transform:translateY(-6px);transition:.16s;backdrop-filter:blur(8px);
}
.gtip.on{opacity:1;transform:none}

/* 확대·축소 단추 — 휠은 Ctrl/⌘ 을 눌렀을 때만 듣는다(app.js §휠 문지기).
 * 그 사실을 아는 사람이 없으니 누를 것을 내놓는다. */
.zoom{
  position:absolute;top:12px;right:12px;display:flex;gap:1px;padding:3px;
  border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.zb{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--r-pill);color:var(--mut);
  font-size:15px;line-height:1;transition:.14s;
}
.zb:hover{background:var(--raise);color:var(--tx)}
.zb:active{transform:scale(.94)}
.gtip i{font-style:normal;color:var(--dim);font-weight:500;margin-left:8px;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.08em}

/* ── 본문 ───────────────────────────────────────────────────────────── */
.entity{margin-top:26px}
.ehead{display:flex;gap:22px;align-items:flex-start}
/* ⚠️ **인물 사진이 눌려 나오던 자리다.** 정사각형 상자에 위키의 세로 인물 사진을
 *    넣으면 얼굴이 잘리고, flex 항목이라 제목이 길면 상자 자체가 좁아진다.
 *    ① 3:4 세로 비율 고정 ② flex 로 줄어들지 않게 못 박기 ③ 얼굴은 위쪽이므로
 *    object-position 을 올린다. 비율을 px 로 되돌리면 검사가 실패한다. */
.ehead img{
  flex:0 0 auto;width:132px;aspect-ratio:3/4;height:auto;
  object-fit:cover;object-position:center 22%;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--raise);
  box-shadow:var(--shadow-sm);
}
.ehead > div{min-width:0}
.ehead h1{margin:0 0 10px;font-size:38px;line-height:1.14;letter-spacing:-.035em;font-weight:800}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.chip{
  font-size:11.5px;padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--line);
  color:var(--mut);background:transparent;font-weight:600;
}
.chip.kind{border-color:transparent;font-weight:700}
.chip.status{border-color:var(--Event);color:var(--Event);background:transparent}
.aka{color:var(--dim);font-size:12.5px;margin-top:4px}

/* 긴 글은 몇 줄만 보이고 '더 보기'로 편다 — 몇 줄인지는 JS가 style 로 박는다.
 * (넘치는지는 그려 본 뒤에야 알 수 있어서 버튼은 rAF 한 번 뒤에 켜진다.) */
.clampbox .ct{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.clampbox.open .ct{display:block}
.summary{margin:22px 0 0;max-width:70ch}
.summary .ct{margin:0;font-size:18px;line-height:1.78;color:var(--tx);letter-spacing:-.011em}

/* ── 탭 ─────────────────────────────────────────────────────────────
 * ⚠️ **탭이 탭으로 안 읽히던 자리다(2026-09-27 고침).** 전에는 회색 홈통 안의
 *    회색 알약이라 "누를 것"이라는 신호가 거의 없었고, 다섯 개가 전부 같은 색이라
 *    무엇이 무엇인지도 한눈에 안 들어왔다. 세 가지를 바꿨다:
 *      ① **점 색** — 탭마다 그 내용의 종류 색 점을 단다(연표=사건 붉은색,
 *         어휘=노란색…). 그래프·줄·칩에서 이미 쓰는 색이라 새로 배울 것이 없다.
 *      ② **고른 탭은 판 위로 떠오른다** — 바탕색·그림자·굵은 글씨, 그리고
 *         **아래에 그 색 밑줄**. 셋이 같이 걸려야 멀리서도 읽힌다.
 *      ③ 개수 배지는 늘 또렷하게(전에는 회색 위 회색이라 안 보였다). */
.tabs{
  display:flex;gap:4px;margin:30px 0 0;padding:5px;border-radius:var(--r-lg);
  background:var(--sink);border:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;display:flex;align-items:center;gap:8px;white-space:nowrap;flex:0 0 auto;
  background:transparent;border:0;border-radius:var(--r);color:var(--mut);
  padding:10px 15px;font-size:14px;font-weight:600;letter-spacing:-.01em;transition:.16s;
}
.tab::before{
  content:'';width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--tabdot,var(--line2));opacity:.55;transition:.16s;
}
.tab:hover{color:var(--tx);background:var(--tint)}
.tab:hover::before{opacity:.9}
.tab.on{
  background:var(--panel);color:var(--tx);font-weight:700;
  box-shadow:var(--shadow-sm);
}
.tab.on::before{opacity:1;box-shadow:0 0 0 3px var(--tabsoft,transparent)}
/* 고른 탭 아래의 짧은 밑줄 — 알약만으로는 낮 모드에서 대비가 약하다. */
.tab.on::after{
  content:'';position:absolute;left:15px;right:15px;bottom:3px;height:2px;border-radius:2px;
  background:var(--tabdot,var(--accent));
}
.tab i{
  font-style:normal;font-size:11px;font-weight:700;color:var(--mut);
  background:var(--tint);border-radius:var(--r-pill);padding:2px 8px;min-width:22px;
  text-align:center;transition:.16s;
}
.tab.on i{color:var(--accent-tx);background:var(--tabdot,var(--accent))}
.panel{padding-top:22px;animation:fade .22s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── 한 줄짜리 목록 ─────────────────────────────────────────────────
 * ⚠️ **줄을 누르면 그 노드로 간다.** 펴기는 오른쪽 ⌄ 가 따로 받는다 —
 *    펴기와 이동을 같은 클릭에 묶으면 파도타기가 두 번 클릭이 되어 죽는다. */
.rows{display:flex;flex-direction:column;gap:4px}
/* ⚠️ **왼쪽 색 막대를 걷어냈다(2026-09-27).** 줄마다 세워 두니 목록 전체가 괄호를
 * 친 것처럼 보였고, 그 모양이 이 화면에서 제일 '기계가 만든 것' 같았다.
 * 종류는 **이름 색**이 이미 말한다(관계 묶음은 그 위의 묶음 제목이 말한다). */
.ln{
  position:relative;border-radius:var(--r);background:var(--panel);
  border:1px solid var(--line);overflow:hidden;transition:.14s;
}
.ln:hover{background:var(--raise);border-color:var(--line2)}
.rh{display:flex;align-items:center;gap:12px;padding:12px 14px}
.rh.go{cursor:pointer}
.rh .dt{flex:0 0 auto;min-width:64px;font-size:11.5px;color:var(--dim);
  letter-spacing:.02em;font-variant-numeric:tabular-nums;font-weight:600}
.rh .nm{flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rh.go:hover .nm{color:var(--accent)}
.rh .mt{flex:0 0 auto;font-size:11.5px;color:var(--dim);white-space:nowrap}
.ln .ex{
  flex:0 0 auto;background:transparent;border:0;color:var(--dim);font-size:13px;
  line-height:1;padding:5px 6px;border-radius:var(--r-sm);transition:.16s;
}
.ln .ex:hover{color:var(--tx);background:var(--tint)}
.ln.open .ex{color:var(--accent);transform:rotate(180deg)}
/* 설명은 **한 줄만** 보인다. 눌러서 편다.
 * ⚠️ **아래 여백은 padding 이 아니라 margin 이어야 한다(2026-09-27).** padding 은
 *    잘라 내는 상자 **안쪽**이라, 한 줄로 접어도 두 번째 줄의 위 12px 이 그 여백
 *    자리에 그대로 비쳤다 — 글자 윗동강이 잘린 채 한 줄 더 보이는 모양이 됐다. */
.ln .no{
  padding:0 40px 0 14px;margin-bottom:12px;
  color:var(--mut);font-size:13px;line-height:1.65;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.ln.open .no{display:block;max-width:74ch}
.more{
  align-self:flex-start;margin:12px 0 2px;background:transparent;
  border:1px solid var(--line);border-radius:var(--r-pill);color:var(--mut);
  padding:7px 16px;font-size:12.5px;font-weight:600;transition:.16s;
}
.more:hover{color:var(--tx);border-color:var(--line2);background:var(--raise)}

.relgroup{margin-bottom:22px}
.relgroup .gh{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px;font-weight:700}

/* 연표 — 줄은 위 .ln 과 같은 부품이고, 여기서 더하는 것은 선과 점뿐이다. */
.tl{border-left:2px solid var(--line);margin-left:8px;padding-left:22px;
  display:flex;flex-direction:column;gap:4px}
.tl .ln{position:relative}
.tl .ln::after{
  content:'';position:absolute;left:-29px;top:18px;width:9px;height:9px;border-radius:50%;
  background:var(--Event);box-shadow:0 0 0 4px var(--bg);
}

/* ── 우측 레일(다음으로) ────────────────────────────────────────────── */
.railtitle{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:6px 0 14px;font-weight:700}
.card{
  display:flex;gap:13px;padding:8px;border-radius:var(--r);cursor:pointer;margin-bottom:4px;
  border:1px solid transparent;transition:.16s;
}
.card:hover{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow-sm)}
.card .thumb{
  flex:0 0 116px;height:66px;border-radius:var(--r-sm);overflow:hidden;background:var(--raise);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.card .meta{min-width:0;flex:1}
.card .t{font-weight:700;font-size:14px;line-height:1.3;margin-bottom:3px;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card:hover .t{color:var(--accent)}
.card .why{color:var(--mut);font-size:12px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .lbl{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  margin-bottom:2px}
.foot{color:var(--dim);font-size:11.5px;line-height:1.65;margin-top:26px;
  border-top:1px solid var(--line);padding-top:16px}

/* ── 임베드 · 링크 ──────────────────────────────────────────────────── */
.embed{margin:14px 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:#000;box-shadow:var(--shadow-sm)}
/* ⚠️ **영상이 가로로 길게 늘어져 있던 자리다.** height 를 208px 로 못 박아 놓아서
 *    본문이 900px 일 때 900×208(약 4.3:1)이 됐다. 유튜브는 16:9다. */
.embed iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
.embed .cap{padding:9px 12px;font-size:12px;color:var(--mut);background:var(--panel)}
.linkcard{
  display:flex;gap:12px;align-items:center;border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;margin-bottom:6px;background:var(--panel);
  transition:.16s;
}
.linkcard:hover{border-color:var(--line2);background:var(--raise)}
.linkcard img{flex:0 0 auto;width:56px;height:56px;object-fit:cover;
  object-position:center 22%;border-radius:var(--r-sm)}
.linkcard > div{min-width:0}
.linkcard .t{font-size:13px;font-weight:700}
.linkcard .d{font-size:12px;color:var(--dim);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── 답 ─────────────────────────────────────────────────────────────── */
.answer{
  border:1px solid var(--accent-line);
  border-radius:var(--r-xl);padding:24px 26px;margin-bottom:18px;
  background:var(--panel);box-shadow:var(--shadow-sm);
}
.answer h3{margin:0 0 12px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:800}
.answer .body{font-size:16.5px;line-height:1.82;white-space:pre-wrap;letter-spacing:-.011em}
.answer .cites{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.cite{font-size:12px;padding:5px 13px;border-radius:var(--r-pill);font-weight:600;
  background:var(--accent-soft);border:1px solid transparent;color:var(--accent);cursor:pointer}
.cite:hover{border-color:var(--accent-line)}
.followups{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.fu{font-size:13px;padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--raise);color:var(--mut);cursor:pointer;transition:.16s;font-weight:600}
.fu:hover{color:var(--tx);border-color:var(--accent-line);background:var(--accent-soft)}
.spin{color:var(--mut);font-size:14px}
.answer .lbl{color:var(--dim);font-size:11.5px;margin-top:10px}
/* 한도를 넘어 모델 없이 답한 경우 — 고장이 아니라 안내다. 붉게 칠하지 않는다. */
.answer .lbl.capped{color:var(--mut);background:var(--raise);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 13px;font-size:12.5px;line-height:1.55;margin-top:14px}

/* ── 첫 화면 ──────────────────────────────────────────────────────────
 * 첫 문장이 이 서비스가 무엇인지를 통째로 설명한다 — 그러니 크게 쓴다. */
/* ⚠️ **머리말은 그래프 위에 온다(2026-09-27).** 전에는 `#home` 안에 있어서
 *    그래프(520px) 아래로 밀렸고, 처음 온 사람이 첫 화면에서 보는 것이 아무
 *    설명 없는 점 스무 개였다. 광고를 보고 들어온 사람에게는 그것이 전부다. */
.hero{padding:6px 0 22px;max-width:none}
.hero h1{font-size:clamp(30px,3.6vw,46px);margin:0 0 10px;letter-spacing:-.04em;
  line-height:1.08;font-weight:800;max-width:17ch}
.hero p{color:var(--mut);margin:0;max-width:56ch;font-size:16px;line-height:1.62}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.tile{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 18px 16px;
  background:var(--panel);cursor:pointer;transition:.18s;overflow:hidden;
}
.tile:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:var(--shadow)}
/* 종류는 작은 이름표로 — 왼쪽 색 막대 대신이다(레일 카드와 같은 방식). */
.tile .k{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;
  margin-bottom:6px}
.tile .t{font-weight:700;margin-bottom:6px;letter-spacing:-.018em;font-size:15.5px}
.tile:hover .t{color:var(--accent)}
.tile .s{color:var(--mut);font-size:12.5px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── 한 단 (≤1100px) — 추천이 본문 **위**로 온다 ──────────────────────
 * ⚠️ 그래프·추천·본문이 HTML 에서 형제가 아니라 .stage 안에 묶여 있어서,
 *    순서를 바꾸려면 .stage 를 display:contents 로 **풀어** 자식들을
 *    .layout 의 직계로 만들어야 한다. 그다음 order 로 세운다:
 *
 *        답 → 그래프 → 다음으로(추천) → 본문 → 첫 화면
 *
 * ⚠️ **1100px 이하 전부에 걸어야 한다.** 전에는 폰(≤820)에만 걸어서, 창을
 *    조금 줄인 노트북·태블릿(821~1100)에서는 추천이 본문 **아래** 스크롤 맨
 *    끝에 가 있었다. 이 서비스는 '다음으로 갈 곳'을 누르는 그 한 번으로 먹고산다.
 */
@media (max-width:1100px){
  /* ⚠️ **`align-items` 를 같이 안 바꾸면 페이지가 통째로 옆으로 밀린다.**
   *    가로 배치일 때 `align-items:flex-start` 는 세로축(위 맞춤)이라 옳지만,
   *    `flex-direction:column` 으로 세우는 순간 그게 **가로축**이 되어 자식이
   *    컨테이너 폭이 아니라 **내용 폭**으로 부푼다. 그러면 아래 `#rail{overflow-x:auto}`
   *    가 영영 발동하지 않는다 — 부모가 이미 내용만큼 넓어졌으니 넘칠 것이 없다.
   *    실측(2026-09-26, 뷰포트 500px): `aside.rail` 이 **3199px**, 문서 전체가
   *    **3211px** 이 되어 폰에서 좌우로 2,700px 을 밀어야 했다.
   *    선반(추천)만 옆으로 밀리고 **페이지는 절대 옆으로 안 밀리는 것**이 맞다. */
  .layout{flex-direction:column;gap:18px;padding:18px 18px 56px;align-items:stretch}
  .stage{display:contents}
  /* 세로 flex에서 grow가 남아 있으면 칸이 제멋대로 늘어난다 — 전부 못 박는다.
   * ⚠️ `width:auto` 만으로는 부족하다 — `max-width:100%` 가 없으면 내용이 큰 칸
   *    (그래프 캔버스·추천 선반)이 부모를 밀어낸다. */
  .layout > *{flex:0 0 auto;min-width:0;width:auto;max-width:100%}
  #answer{order:1;margin-bottom:0}
  .graphbox{order:2}
  .rail{order:3;position:static}
  #entity{order:4;margin-top:0}
  #home{order:5}
  .searchwrap{max-width:none;margin:0}
  .hero{max-width:none}
  /* 다음으로 — **가로로 밀어 보는 선반**이다. 세로로 쌓으면 카드 열넷이 1,000px을
   * 먹어서, 추천을 위로 올려 둔 것이 도로 무의미해진다(본문에 닿으려면 또 한참). */
  #rail{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;
        scroll-snap-type:x proximity}
  #rail .card{flex:0 0 224px;flex-direction:column;gap:9px;margin-bottom:0;
              scroll-snap-align:start;background:var(--panel);border-color:var(--line)}
  #rail .card:hover{transform:translateY(-2px)}
  #rail .card .thumb{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9}
  /* 레일 맨 위의 미리보기 영상은 본문 §영상·자료와 같은 것이다 — 한 번만 보여 준다.
   * ⚠️ 선택자는 `#rail > .embed` 다. `.rail > .embed` 로 쓰면 **아무것도 안 잡힌다**
   *    (embed 는 .rail 이 아니라 그 안의 #rail 에 들어간다 — 그래서 두 번 떴었다). */
  #rail > .embed{display:none}
  /* 레일이 본문 위로 올라오므로 바닥 문구는 본문 쪽에서만 보이게 한다. */
  .rail .foot{display:none}
}

/* ── 폰 (≤820px) ──────────────────────────────────────────────────────
 * 한 단으로 세우는 일과 **순서는 위 §한 단이 이미 한다** — 여기에는 폰에서만
 * 달라지는 것만 둔다(순서를 여기에 또 쓰면 두 곳이 조용히 어긋난다).
 */
@media (max-width:820px){
  .layout{padding:14px 14px 48px}

  /* 상단 — 브랜드 한 줄, 검색창 한 줄. 꼬리 문구는 폰에서 자리만 먹는다. */
  .top{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .brand{flex:1 1 auto}
  .brand .tagline{display:none}
  .searchwrap{flex:1 1 100%;order:3}
  .tools{order:2;margin-left:auto}
  /* ⚠️ **브랜드와 도구가 한 줄에 들어가야 한다.** 402px 폰에서 넷을 그냥 두면
   *    합이 416px 이라 도구 줄이 통째로 아래로 떨어지고, 상단이 세 줄이 된다
   *    (실측 2026-09-27). 지우는 대신 **전부 한 치수씩 줄인다** — 파도타기는
   *    이 서비스의 즐거움 절반이라 폰에서 없애고 싶지 않다. */
  .brand .knot{width:26px;height:26px}
  .brand .name{font-size:17px}
  #rand,#signin,#marks{padding:8px 9px;font-size:13px}
  .iconbtn{width:32px;height:32px}
  .langs{padding:2px;margin-left:2px}
  .lang{padding:4px 7px;min-width:26px;font-size:11.5px}
  .trail{padding:10px 14px 0}
  .pinbar{margin:10px 14px 0}

  /* 그래프는 폰에서 화면 높이의 절반 이하로 — 더 크면 스크롤이 여기서 막힌다.
   * ⚠️ **touch-action:pan-y 가 없으면 페이지가 아래로 안 내려간다.** 캔버스가
   *    화면 폭을 다 쓰기 때문에 세로 스와이프를 cytoscape 가 먹어 버린다.
   *    pan-y 를 주면 세로 넘기기는 브라우저가 처리하고, 확대·축소와 좌우 끌기는
   *    그래프가 받는다. */
  #cy{height:46vh;min-height:260px;touch-action:pan-y}
  .legend{display:none}

  /* 사진은 제목 위로 올려 가로를 다 쓴다(작은 세로 상자에 얼굴이 갇히지 않게). */
  .ehead{flex-direction:column;gap:14px}
  .ehead img{width:46%;max-width:186px}
  .ehead h1{font-size:28px}
  .summary .ct{font-size:16.5px;line-height:1.75}
  .entity{margin-top:4px}

  /* 문 타일은 한 줄에 하나. 두 개씩 넣으면 글씨가 네 줄로 접힌다. */
  .grid{grid-template-columns:1fr}
  .hero{padding:14px 0 6px}
  .answer{padding:20px;border-radius:var(--r-lg)}

  /* 탭과 줄은 손가락으로 누른다 — 탭은 좁히고 줄 높이는 남겨 둔다. */
  .tabs{margin-top:20px}
  .tab{padding:10px 13px;font-size:13.5px;gap:7px}
  .rh{padding:12px 12px;gap:10px}
  .rh .dt{min-width:52px}
  .ln .no{padding:0 34px 0 12px}
}

/* ⚠️ **페이지 자체는 어떤 폭에서도 옆으로 밀리지 않는다.** 옆으로 미는 것은
 *    허락한 자리(`#rail` 선반, `.trail` 발자국)뿐이고 그것들은 자기 안에서 민다.
 *    이 한 줄은 그 규칙의 **마지막 빗장**이다 — 새 칸을 만들다 한 군데 넘치면
 *    화면 전체가 옆으로 밀리는데, 폰에서 그 증상은 "글씨가 반쯤 잘려 보인다"로
 *    나타나서 원인을 짚기가 유난히 어렵다(2026-09-26에 실제로 그랬다).
 * ⚠️ `html` 에는 걸지 않는다 — 거기 걸면 `position:sticky` 인 상단 바가 죽는다. */
body{overflow-x:hidden}

/* 아주 좁은 화면(≤400px)에서 가로 스크롤이 생기지 않게 마지막으로 못 박는다. */
@media (max-width:400px){
  .layout{padding:12px 12px 44px}
  .brand .name{font-size:16px}
  #rand{padding:8px 7px}     /* 좁으면 더 줄인다. 지우지는 않는다 — 파도타기가 이 서비스다 */
  .ehead img{width:56%}
  .chain .r b{max-width:none}
  #rail .card{flex-basis:194px}
  .rh .mt{display:none}      /* 이름이 먼저다 — 좁으면 곁가지를 지운다 */
  .search{padding-right:96px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}