/* decodeK — 화면 전부.
 *
 * 읽는 순서
 *   §토큰      색·간격·글꼴을 한자리에. **색을 여기 밖에서 쓰지 않는다.**
 *   §테마      밤이 기본, 낮은 [data-theme="light"]. 토큰만 갈아 끼운다.
 *   §상단 §본문 §탭 §줄 §카드 §그래프 §첫화면
 *   §한 단     ≤1100px — 추천이 본문 위로 온다(가장 조심스러운 곳)
 *   §폰        ≤820px — 폰에서만 달라지는 것
 *
 * ⚠️ **색을 하드코딩하지 말 것.** 낮 모드를 켰을 때 그 자리만 검게 남는다.
 *    새 색이 필요하면 §토큰에 이름을 만들고 두 테마 모두에 값을 준다.
 * ⚠️ **본문은 탭으로 갈라 한 번에 하나만 그린다.** 연결·연표·어휘·자료를 세로로
 *    쌓으면 이웃 서른 개짜리 노드가 폰에서 열 화면이 된다 — 아무도 안 본다.
 */

/* ── 토큰 · 밤(기본) ─────────────────────────────────────────────────── */
:root{
  /* 바탕은 세 겹이다: 판(bg) → 상자(panel) → 도드라진 것(raise) */
  --bg:#0b0c10; --panel:#14161d; --raise:#1b1f29; --sink:#0f1117;
  --line:#242835; --line2:#323847;
  --tx:#e9ebf2; --mut:#98a0b4; --dim:#6a7286;
  --accent:#ff4d6d; --accent-tx:#fff; --accent-soft:#2a151c; --accent2:#ffd166;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --ring:0 0 0 3px rgba(255,77,109,.28);
  /* 그래프 위의 글자는 바탕을 뚫고 읽혀야 한다 */
  --graph-bg1:#1b1f2b; --graph-bg2:#0f1117; --graph-halo:#0b0c10;
  --node-tx:#0b0c10;

  /* 노드 종류 */
  --Person:#6ea8fe; --Group:#9b8cff; --Work:#4ecdc4; --Song:#f78fb3;
  --Event:#ff6b6b; --Term:#ffd166; --Org:#8d95a8; --Place:#7ec86b;
  /* 관계 묶음 */
  --belong:#7b86a0; --work:#3fb3a8; --event:#e0585e; --tie:#a184e6;
  --lexicon:#d4a943; --place:#74b061;

  --r-sm:8px; --r:11px; --r-lg:16px; --r-pill:999px;
  --fs:14px;
}

/* ── 토큰 · 낮 ──────────────────────────────────────────────────────────
 * ⚠️ 낮은 **밝기를 뒤집는 것으로 끝나지 않는다.** 밤에는 테두리로 층을 나누지만
 *    낮에는 그림자로 나눈다(흰 바탕에 회색 선만 그으면 표처럼 보인다).
 *    종류 색도 낮 바탕에서 읽히도록 한 단 낮춘 값을 따로 둔다. */
:root[data-theme="light"]{
  --bg:#f6f7fa; --panel:#ffffff; --raise:#f0f2f7; --sink:#eef0f5;
  --line:#e2e5ec; --line2:#cdd2dd;
  --tx:#161922; --mut:#5b6377; --dim:#8a92a5;
  --accent:#e11d48; --accent-tx:#fff; --accent-soft:#fde8ee; --accent2:#a16207;
  --shadow:0 12px 28px rgba(22,25,34,.10);
  --shadow-sm:0 1px 3px rgba(22,25,34,.10);
  --ring:0 0 0 3px rgba(225,29,72,.20);
  --graph-bg1:#eef1f7; --graph-bg2:#f9fafc; --graph-halo:#ffffff;
  --node-tx:#ffffff;

  --Person:#2563eb; --Group:#6d43d9; --Work:#0e8f86; --Song:#d6417c;
  --Event:#dc2626; --Term:#b45309; --Org:#5b6377; --Place:#3f8f34;
  --belong:#6b7590; --work:#0e8f86; --event:#dc2626; --tie:#6d43d9;
  --lexicon:#b45309; --place:#3f8f34;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--tx);
  font:var(--fs)/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
       "Malgun Gothic",Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .18s,color .18s;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
img{max-width:100%}

/* 무슨 일이 나도 빈 화면으로 끝내지 않는다 — 흰 종이는 고장인지 텅 빈 것인지 모른다. */
.oops{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 18px;background:var(--accent-soft);color:var(--tx);
  border-bottom:1px solid var(--accent);font-size:13px;
}
.oops b{font-weight:700}
.oops span{color:var(--mut)}
.oops .btn{margin-left:auto;padding:7px 14px}

/* ── 상단 ───────────────────────────────────────────────────────────── */
.top{
  display:flex;align-items:center;gap:14px;padding:11px 18px;
  /* ⚠️ color-mix 를 모르는 브라우저는 그 한 줄을 버린다 — 앞에 확실한 값을 둔다. */
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
}
.brand{display:flex;align-items:baseline;gap:8px;flex:0 0 auto}
/* ⚠️ 전에는 `◍` 글리프였다. 폰트마다 모양이 다르고 없는 기기에서는 두부(□)가 떴다 —
 * 이제 브랜드 로고 그림이다(`/mark.png`). 원 바깥이 투명이라 밤·낮 둘 다에 얹힌다.
 * ⚠️ 24px 에서는 'decode' 글자가 안 읽힌다 — 읽힐 필요도 없다. 옆에 이름이 따로 선다. */
.brand .knot{width:26px;height:26px;display:block;flex:0 0 auto}
.brand .name{font-weight:800;letter-spacing:.16em;font-size:16px}
.brand .tagline{color:var(--dim);font-size:12px;max-width:230px}

.searchwrap{position:relative;flex:1 1 460px;display:flex;gap:7px;min-width:0}
.search{
  width:100%;min-width:0;padding:11px 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--sink);color:var(--tx);outline:none;
  /* ⚠️ 16px 미만이면 iOS 사파리가 입력할 때 화면을 제멋대로 확대한다. */
  font-size:16px;transition:border-color .14s,background .14s,box-shadow .14s;
}
.search::placeholder{color:var(--dim)}
.search:focus{border-color:var(--accent);background:var(--panel);box-shadow:var(--ring)}

.btn{
  padding:10px 15px;border-radius:var(--r);border:1px solid transparent;
  background:var(--accent);color:var(--accent-tx);font-weight:600;white-space:nowrap;
  box-shadow:var(--shadow-sm);transition:filter .14s,transform .08s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--mut);box-shadow:none}
.btn.ghost:hover{color:var(--tx);border-color:var(--line2);background:var(--raise)}

.tools{display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-left:auto}
.iconbtn{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--mut);font-size:15px;line-height:1;transition:.14s;
}
.iconbtn:hover{color:var(--tx);border-color:var(--line2);background:var(--raise)}
.langs{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.lang{background:transparent;border:0;color:var(--dim);padding:8px 10px;font-size:12px;transition:.14s}
.lang:hover{color:var(--tx);background:var(--raise)}
.lang.on{background:var(--accent);color:var(--accent-tx);font-weight:700}

/* 검색 자동완성 */
.sugg{
  position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:50;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  max-height:62vh;overflow:auto;box-shadow:var(--shadow);padding:5px;
}
.sugg .row{display:flex;gap:9px;align-items:center;padding:9px 11px;cursor:pointer;
  border-radius:var(--r-sm)}
.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)}
.sugg .head{padding:9px 11px 4px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}

/* ── 발자국 · 핀 ────────────────────────────────────────────────────── */
.trail{
  display:flex;gap:6px;align-items:center;padding:8px 18px;overflow-x:auto;
  border-bottom:1px solid var(--line);background:var(--sink);font-size:12px;
  scrollbar-width:none;
}
.trail::-webkit-scrollbar{display:none}
.trail .step{color:var(--mut);white-space:nowrap;cursor:pointer}
.trail .step:hover{color:var(--tx)}
.trail .sep{color:var(--dim)}
.trail .step.cur{color:var(--accent);font-weight:600}

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

/* 경로(둘 사이) */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px}
.chain .n{padding:6px 11px;border-radius:var(--r-sm);background:var(--raise);
  border:1px solid var(--line);cursor:pointer;font-weight:600;font-size:13px}
.chain .n:hover{border-color:var(--accent);color:var(--accent)}
.chain .r{font-size:11px;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:20px;padding:20px;align-items:flex-start}
.stage{flex:1 1 auto;min-width:0}
.rail{flex:0 0 372px;position:sticky;top:70px}

/* ── 그래프 ─────────────────────────────────────────────────────────── */
.graphbox{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(1200px 420px at 50% -12%,var(--graph-bg1),var(--graph-bg2));
  box-shadow:var(--shadow-sm);
}
#cy{height:430px;width:100%}
.legend{
  position:absolute;left:12px;bottom:10px;right:12px;display:flex;gap:6px;flex-wrap:wrap;
  align-items:center;font-size:11px;color:var(--mut);pointer-events:none;
}
.legend .hint{color:var(--dim);margin-right:4px}
.legend .lg{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 82%,transparent);border:1px solid var(--line);
}
.legend .lg i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.legend .lg b{font-weight:600;color:var(--dim);font-size:10px}
/* 그래프 위에 떠서 지금 가리킨 노드의 온전한 이름을 보여 준다(원 안의 글자는 잘린다) */
.gtip{
  position:absolute;top:12px;left:12px;max-width:70%;padding:6px 11px;
  border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);font-size:12.5px;font-weight:600;pointer-events:none;
  opacity:0;transform:translateY(-4px);transition:.14s;
}
.gtip.on{opacity:1;transform:none}
.gtip i{font-style:normal;color:var(--dim);font-weight:400;margin-left:6px;font-size:11px}

/* ── 본문 ───────────────────────────────────────────────────────────── */
.entity{margin-top:18px}
.ehead{display:flex;gap:18px;align-items:flex-start}
/* ⚠️ **인물 사진이 눌려 나오던 자리다.** 정사각형 상자에 위키의 세로 인물 사진을
 *    넣으면 얼굴이 잘리고, flex 항목이라 제목이 길면 상자 자체가 좁아진다.
 *    ① 3:4 세로 비율 고정 ② flex 로 줄어들지 않게 못 박기 ③ 얼굴은 위쪽이므로
 *    object-position 을 올린다. 비율을 px 로 되돌리면 검사가 실패한다. */
.ehead img{
  flex:0 0 auto;width:116px;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 8px;font-size:28px;line-height:1.25;letter-spacing:-.02em}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.chip{
  font-size:11px;padding:3px 9px;border-radius:var(--r-pill);border:1px solid var(--line);
  color:var(--mut);background:var(--panel);
}
.chip.kind{border-color:transparent;font-weight:600}
.chip.status{border-color:var(--Event);color:var(--Event);background:transparent}
.aka{color:var(--dim);font-size:12px;margin-top:2px}

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

/* ── 탭 ─────────────────────────────────────────────────────────────
 * 분절 컨트롤(트로프 + 알약)이다. 밑줄 탭으로 뒀더니 그냥 글자처럼 보여서
 * 누를 것이라는 게 읽히지 않았다. 개수 배지는 **접어 둔 것이 있다는 사실**이다. */
.tabs{
  display:flex;gap:3px;margin:22px 0 0;padding:4px;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{
  display:flex;align-items:center;gap:7px;white-space:nowrap;flex:0 0 auto;
  background:transparent;border:0;border-radius:var(--r);color:var(--mut);
  padding:8px 13px;font-size:13.5px;font-weight:500;transition:.14s;
}
.tab:hover{color:var(--tx);background:var(--raise)}
.tab.on{
  background:var(--panel);color:var(--tx);font-weight:700;
  box-shadow:var(--shadow-sm);
}
.tab i{
  font-style:normal;font-size:10.5px;font-weight:700;color:var(--dim);
  background:var(--raise);border-radius:var(--r-pill);padding:1px 7px;min-width:20px;
  text-align:center;
}
.tab.on i{color:var(--accent-tx);background:var(--accent)}
.panel{padding-top:18px;animation:fade .18s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── 한 줄짜리 목록 ─────────────────────────────────────────────────
 * ⚠️ **줄을 누르면 그 노드로 간다.** 펴기는 오른쪽 ⌄ 가 따로 받는다 —
 *    펴기와 이동을 같은 클릭에 묶으면 파도타기가 두 번 클릭이 되어 죽는다. */
.rows{display:flex;flex-direction:column;gap:3px}
.ln{
  border-left:3px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--panel);transition:background .12s;
}
.ln:hover{background:var(--raise)}
.rh{display:flex;align-items:center;gap:10px;padding:10px 12px}
.rh.go{cursor:pointer}
.rh .dt{flex:0 0 auto;min-width:62px;font-size:11px;color:var(--dim);
  letter-spacing:.03em;font-variant-numeric:tabular-nums}
.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:12px;
  line-height:1;padding:4px 5px;border-radius:var(--r-sm);transition:.14s;
}
.ln .ex:hover{color:var(--tx);background:var(--raise)}
.ln.open .ex{color:var(--accent);transform:rotate(180deg)}
/* 설명은 **한 줄만** 보인다. 눌러서 편다. */
.ln .no{
  padding:0 38px 10px 12px;color:var(--mut);font-size:12.5px;line-height:1.6;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:10px 0 2px;background:transparent;
  border:1px solid var(--line);border-radius:var(--r-pill);color:var(--mut);
  padding:6px 14px;font-size:12px;transition:.14s;
}
.more:hover{color:var(--tx);border-color:var(--line2);background:var(--raise)}

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

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

/* ── 우측 레일(다음으로) ────────────────────────────────────────────── */
.railtitle{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:4px 0 12px;font-weight:700}
.card{
  display:flex;gap:11px;padding:9px;border-radius:var(--r);cursor:pointer;margin-bottom:5px;
  border:1px solid transparent;transition:.14s;
}
.card:hover{background:var(--panel);border-color:var(--line);transform:translateX(2px)}
.card .thumb{
  flex:0 0 120px;height:68px;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:600;font-size:13.5px;line-height:1.35;margin-bottom:3px;
  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:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.foot{color:var(--dim);font-size:11px;line-height:1.6;margin-top:20px;
  border-top:1px solid var(--line);padding-top:13px}

/* ── 임베드 · 링크 ──────────────────────────────────────────────────── */
.embed{margin:12px 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:8px 11px;font-size:12px;color:var(--mut);background:var(--panel)}
.linkcard{
  display:flex;gap:11px;align-items:center;border:1px solid var(--line);
  border-radius:var(--r);padding:9px 11px;margin-bottom:6px;background:var(--panel);
  transition:.14s;
}
.linkcard:hover{border-color:var(--line2);background:var(--raise)}
.linkcard img{flex:0 0 auto;width:54px;height:54px;object-fit:cover;
  object-position:center 22%;border-radius:var(--r-sm)}
.linkcard > div{min-width:0}
.linkcard .t{font-size:12.5px;font-weight:600}
.linkcard .d{font-size:11.5px;color:var(--dim);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── 답 ─────────────────────────────────────────────────────────────── */
.answer{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px;
  background:var(--panel);box-shadow:var(--shadow-sm);
}
.answer h3{margin:0 0 10px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:800}
.answer .body{font-size:15.5px;line-height:1.85;white-space:pre-wrap}
.answer .cites{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.cite{font-size:11.5px;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--accent-soft);border:1px solid transparent;color:var(--accent);cursor:pointer}
.cite:hover{border-color:var(--accent)}
.followups{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.fu{font-size:12px;padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--panel);color:var(--mut);cursor:pointer;transition:.14s}
.fu:hover{color:var(--tx);border-color:var(--accent)}
.spin{color:var(--mut);font-size:13px}
.answer .lbl{color:var(--dim);font-size:11px;margin-top:8px}

/* ── 첫 화면 ────────────────────────────────────────────────────────── */
.hero{padding:26px 0 4px}
.hero h1{font-size:32px;margin:0 0 8px;letter-spacing:-.03em;line-height:1.2}
.hero p{color:var(--mut);margin:0;max-width:66ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:11px}
.tile{
  border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  background:var(--panel);cursor:pointer;border-left-width:3px;transition:.14s;
}
.tile:hover{background:var(--raise);border-color:var(--line2);transform:translateY(-2px);
  box-shadow:var(--shadow-sm)}
.tile .t{font-weight:700;margin-bottom:5px}
.tile:hover .t{color:var(--accent)}
.tile .s{color:var(--mut);font-size:12px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.srcline a{color:var(--mut);border-bottom:1px dotted var(--line2)}
.srcline a:hover{color:var(--tx)}
.srcline .srcnote{color:var(--dim)}

/* ── 한 단 (≤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:16px;padding:16px;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}

  /* 다음으로 — **가로로 밀어 보는 선반**이다. 세로로 쌓으면 카드 열넷이 1,000px을
   * 먹어서, 추천을 위로 올려 둔 것이 도로 무의미해진다(본문에 닿으려면 또 한참). */
  #rail{display:flex;gap:11px;overflow-x:auto;padding:2px 2px 8px;
        scroll-snap-type:x proximity}
  #rail .card{flex:0 0 218px;flex-direction:column;gap:8px;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:12px}

  /* 상단 — 브랜드 한 줄, 검색창 한 줄. 꼬리 문구는 폰에서 자리만 먹는다. */
  .top{flex-wrap:wrap;gap:8px;padding:9px 12px}
  .brand{flex:1 1 auto}
  .brand .tagline{display:none}
  .searchwrap{flex:1 1 100%;order:3}
  .tools{order:2;margin-left:auto}
  /* ⚠️ 상단 단추가 넷(파도타기·로그인·즐겨찾기·테마)이라 폰에서 줄이 넘친다 —
   *    글씨를 줄이는 대신 **덜 급한 것부터 지운다.** 파도타기는 첫 화면에도 있고,
   *    즐겨찾기는 로그인한 사람만 보므로 로그인 단추가 남으면 길은 안 끊긴다. */
  #rand,#signin,#marks{padding:9px 10px;font-size:13px}
  #rand .t{display:none}
  .trail,.pinbar{padding:7px 12px}

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

  /* 사진은 제목 위로 올려 가로를 다 쓴다(작은 세로 상자에 얼굴이 갇히지 않게). */
  .ehead{flex-direction:column;gap:12px}
  .ehead img{width:46%;max-width:180px}
  .ehead h1{font-size:23px}
  .summary .ct{font-size:15.5px;line-height:1.8}
  .hero h1{font-size:25px}

  /* 문 타일은 한 줄에 하나. 두 개씩 넣으면 글씨가 네 줄로 접힌다. */
  .grid{grid-template-columns:1fr}

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

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

/* 아주 좁은 화면(≤400px)에서 가로 스크롤이 생기지 않게 마지막으로 못 박는다. */
@media (max-width:400px){
  .layout{padding:10px}
  #rand{display:none}        /* 파도타기는 첫 화면에도 있다 — 좁으면 상단에서 뺀다 */
  .ehead img{width:56%}
  .chain .r b{max-width:none}
  #rail .card{flex-basis:188px}
  .rh .mt{display:none}      /* 이름이 먼저다 — 좁으면 곁가지를 지운다 */
}

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