/* 원소 — 팔레트는 science.css 변수를 쓴다.
   분류색은 표에서만 쓰는 자체 팔레트다(계보 지도의 분과색과 섞이면 안 된다). */
.elpage{
  --nm:#8FBF6A; --ng:#6FB7C9; --am:#D9564E; --ae:#E0913F; --ml:#B98BD9;
  --tm:#C9A227; --pt:#7FD1AE; --ln:#5FA8D3; --an:#D96C9E; --uk:#6B7A94;
}
*{box-sizing:border-box}
body.elpage{margin:0;min-height:100vh;background:var(--ink);-webkit-text-size-adjust:100%}
#wrap{max-width:1240px;margin:0 auto;padding:0 18px 40px}

#head{display:flex;align-items:center;gap:12px;padding:14px 0 10px;flex-wrap:wrap}
#backbtn{width:34px;height:34px;flex:0 0 auto;font-size:17px;line-height:1;color:var(--chalk);
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:.16s}
#backbtn:hover{border-color:var(--brass);color:var(--brass)}
.brandline{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--brass);
  text-decoration:none}
.brandline b{color:var(--chalk);font-weight:500}
.h-sp{flex:1}
.h-lib{font-size:12.5px;color:var(--chalk-dim);text-decoration:none;border:1px solid var(--ink-3);
  border-radius:7px;padding:6px 11px;transition:.16s}
.h-lib:hover{border-color:var(--brass);color:var(--brass)}

.pg-h{font-family:var(--disp);font-weight:700;font-size:31px;color:var(--chalk);
  margin:18px 0 14px;line-height:1.32}
.pg-sub{font-size:14.5px;line-height:1.85;color:var(--chalk-dim);word-break:keep-all;margin:0 0 22px}
.s-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--brass);
  margin:0 0 12px}
section{margin-bottom:36px;padding-bottom:30px;border-bottom:1px solid var(--ink-3)}

/* ── ① 한 줄 ── */
#line{display:flex;flex-wrap:wrap;align-items:stretch;gap:5px;margin-bottom:14px}
#line.is-folded{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:5px}
#line.is-folded .ln{width:auto;min-width:0;padding:8px 2px 6px}
#line.is-folded .ln b{font-size:13px}
#line.is-folded .ln span{font-size:11px}
#line.is-folded .foldmark{display:none}
.ln{width:52px;padding:9px 4px 7px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-top:2px solid var(--c,var(--ink-3));border-radius:7px;cursor:pointer;
  font-family:inherit;transition:.16s;text-align:center}
.ln:hover{border-color:var(--brass);transform:translateY(-2px)}
.ln b{display:block;font-family:var(--disp);font-weight:700;font-size:15px;color:var(--chalk)}
.ln span{display:block;font-size:12px;color:var(--chalk-dim);margin-top:3px}
.foldmark{width:2px;align-self:stretch;background:repeating-linear-gradient(180deg,
  var(--brass) 0 4px, transparent 4px 9px);opacity:.7;margin:0 3px}
.mn-line{font-family:var(--disp);font-size:24px;line-height:1.7;color:var(--chalk);
  margin:0 0 6px;letter-spacing:.04em}
#mnote{font-size:12.5px;line-height:1.8;color:var(--chalk-dim);opacity:.8;margin:0 0 16px;
  word-break:keep-all}
#foldbtn{padding:13px 22px;font-size:15px;font-weight:700;color:var(--ink);background:var(--brass);
  border:none;border-radius:9px;cursor:pointer;font-family:inherit;transition:.14s}
#foldbtn:active{transform:scale(.985)}
#foldsay{font-size:14px;line-height:1.85;color:var(--chalk-dim);margin:14px 0 0;
  word-break:keep-all;max-width:70ch}

/* ── 표 ── */
#board{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:1040px){#board{grid-template-columns:minmax(0,1fr) 232px}}
#tbl{display:grid;grid-template-columns:repeat(18,1fr);gap:2px;min-width:0}
.gh{grid-row:1;font-family:var(--mono);font-size:8px;color:var(--chalk-dim);opacity:.35;
  text-align:center;font-style:normal;align-self:start;margin-top:-11px;pointer-events:none}
.el{position:relative;aspect-ratio:1;min-width:0;padding:2px 1px;cursor:pointer;
  background:var(--ink-2);border:1px solid var(--ink-3);border-top:2px solid var(--c);
  border-radius:3px;font-family:inherit;overflow:hidden;transition:.2s;opacity:.34}
.el em{display:block;font-style:normal;font-family:var(--mono);font-size:6px;
  color:var(--chalk-dim);line-height:1}
.el b{display:block;font-family:var(--disp);font-weight:700;font-size:12px;color:var(--chalk);
  line-height:1.15}
.el span{display:none}
.el:hover{opacity:1;border-color:var(--brass);z-index:2}
.el.pick{opacity:1;outline:2px solid var(--brass);outline-offset:-2px;z-index:3}
.el.sung{opacity:1;background:color-mix(in srgb, var(--c) 24%, var(--ink-2))}
.el.edge{box-shadow:0 0 0 2px var(--c), 0 0 12px 1px var(--c);z-index:4}
.el.dim20{opacity:.12}
/* 후렴의 되새김 — 새로 켜는 게 아니라 이미 켜진 것을 다시 짚는다 */
.el.echo{animation:echopulse 1.1s ease-in-out infinite}
@keyframes echopulse{
  0%,100%{box-shadow:0 0 0 0 rgba(111,183,201,0)}
  50%{box-shadow:0 0 0 2px var(--ng),0 0 10px 1px rgba(111,183,201,.55)}
}
@media (prefers-reduced-motion:reduce){.el.echo{animation:none;box-shadow:0 0 0 2px var(--ng)}}
.el.hi1{opacity:1;box-shadow:0 0 0 2px var(--am)}
.el.hi18{opacity:1;box-shadow:0 0 0 2px var(--ng)}
.c-nm{--c:var(--nm)} .c-ng{--c:var(--ng)} .c-am{--c:var(--am)} .c-ae{--c:var(--ae)}
.c-ml{--c:var(--ml)} .c-tm{--c:var(--tm)} .c-pt{--c:var(--pt)} .c-ln{--c:var(--ln)}
.c-an{--c:var(--an)} .c-uk{--c:var(--uk)}

#dtl{padding:15px 16px;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:9px}
.d-k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--brass);margin:0 0 9px}
.d-s{display:block;font-family:var(--disp);font-weight:700;font-size:40px;color:var(--chalk);
  line-height:1;margin-bottom:6px}
.d-ko{font-size:15px;color:var(--chalk);margin:0 0 13px}
.d-ko em{font-style:normal;font-size:12px;color:var(--chalk-dim)}
#dtl dl{margin:0;font-size:12.5px}
#dtl dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--brass);
  margin-bottom:3px}
#dtl dd{margin:0 0 10px;color:var(--chalk-dim)}
.d-n{font-size:12px;line-height:1.75;color:var(--cyan);margin:8px 0 0;padding-top:10px;
  border-top:1px solid var(--ink-3);word-break:keep-all}

/* ── ② 노래 ── */
#player{padding:16px 17px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:10px;margin-bottom:16px}
#scred{font-size:14px;color:var(--chalk);margin:0 0 4px}
#scred em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--brass);
  letter-spacing:.1em;margin:0 5px}
#scred b{color:var(--brass);font-weight:500}
#snote{font-size:12.5px;line-height:1.8;color:var(--chalk-dim);opacity:.8;margin:0 0 12px;
  word-break:keep-all}
#au{width:100%;margin-bottom:11px}
.prow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.pbtn{padding:9px 15px;font-size:13px;color:var(--chalk-dim);background:var(--ink);
  border:1px solid var(--ink-3);border-radius:8px;cursor:pointer;font-family:inherit;transition:.15s}
.pbtn:hover{border-color:var(--brass);color:var(--brass)}
#cnt{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--brass)}

.beatnote{font-size:12px;line-height:1.8;color:var(--chalk-dim);opacity:.75;margin:0 0 11px;
  word-break:keep-all}
.beatnote b{color:var(--brass);font-weight:500}
.fol{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--chalk-dim);
  cursor:pointer;user-select:none}
.fol input{accent-color:var(--brass);width:15px;height:15px;cursor:pointer}

/* 가사 — 원문 그대로. 재생 위치에 따라 한 줄씩 밝아진다. */
#lyrwrap{margin-bottom:22px}
#lyr{max-height:420px;overflow-y:auto;padding:14px 16px;background:var(--ink-2);
  border:1px solid var(--ink-3);border-radius:10px;scrollbar-width:thin}
.lyh{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--brass);
  margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--ink-3)}
#lyr .lyh:first-child{margin-top:0;padding-top:0;border-top:none}
.lyh.k-hook,.lyh.k-bridge{color:var(--cyan)}
.ly{display:block;width:100%;text-align:left;padding:5px 8px;margin:0 0 1px;
  background:none;border:none;border-radius:5px;cursor:pointer;font-family:inherit;
  font-size:14.5px;line-height:1.75;color:var(--chalk-dim);opacity:.5;transition:.18s;
  word-break:keep-all}
.ly:hover{opacity:.85;background:rgba(255,255,255,.03)}
.ly.past{opacity:.72}
.ly.on{opacity:1;color:var(--chalk);background:rgba(201,162,39,.11);
  box-shadow:inset 2px 0 0 var(--brass)}
.ly.k-el,.ly.k-echo{color:var(--chalk);border-bottom:1px solid rgba(201,162,39,.22)}
.ly.k-echo{font-style:italic}
.ly.k-hook,.ly.k-bridge,.ly.k-intro,.ly.k-outro{color:var(--chalk-dim)}
.ly.on.k-echo{background:rgba(111,183,201,.12);box-shadow:inset 2px 0 0 var(--cyan)}
.ly i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--brass);
  margin-left:9px;opacity:.75}
.lyrnote{font-size:12px;line-height:1.8;color:var(--chalk-dim);opacity:.72;margin:10px 0 0;
  word-break:keep-all}

.say{padding:15px 17px;border:1px solid var(--ink-3);border-left:2px solid var(--brass);
  border-radius:0 9px 9px 0;background:var(--ink-2);margin:0 0 16px;font-size:16px;
  line-height:1.7;color:var(--chalk);word-break:keep-all;min-height:58px}
.say em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.15em;color:var(--brass);margin-bottom:7px}
.say.rest{color:var(--chalk-dim);border-left-color:var(--cyan)}
.say.rest em{color:var(--cyan)}

#plist{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:8px}
.ph{text-align:left;padding:11px 13px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-left:2px solid var(--ink-3);border-radius:8px;cursor:pointer;font-family:inherit;
  transition:.15s}
.ph:hover{border-color:var(--brass)}
.ph.on{border-color:var(--brass);border-left-color:var(--brass);background:rgba(201,162,39,.09)}
.ph em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--brass);
  margin-bottom:5px}
.ph span{display:block;font-size:12.5px;line-height:1.6;color:var(--chalk-dim);word-break:keep-all}
.ph i{display:block;font-style:normal;font-size:11px;color:var(--cyan);margin-top:6px;opacity:.85}

/* ── 범례 · 출처 ── */
#leg{display:flex;flex-wrap:wrap;gap:7px 15px;margin-top:14px}
.lg{font-family:var(--mono);font-size:10.5px;color:var(--chalk-dim);
  display:inline-flex;align-items:center;gap:6px}
.lg i{width:9px;height:9px;border-radius:2px;background:var(--c);display:inline-block}
#src h2{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--chalk);margin:0 0 14px}
#src ul{margin:0 0 16px;padding-left:19px}
#src li{font-size:13.5px;line-height:1.85;color:var(--chalk-dim);margin-bottom:11px;
  word-break:keep-all}
#src b{color:var(--chalk);font-weight:500}
#src a{color:var(--cyan)}
.src-warn{font-size:13px;line-height:1.85;color:var(--chalk-dim);word-break:keep-all;
  padding:13px 15px;border:1px solid var(--ink-3);border-left:2px solid var(--cyan);
  border-radius:0 8px 8px 0;background:var(--ink-2);margin:0 0 11px}
.src-warn b{color:var(--cyan);font-weight:500}
.foot-note{font-size:12.5px;line-height:1.85;color:var(--chalk-dim);opacity:.7;
  margin:30px 0 0;word-break:keep-all}
#src{border-bottom:none}

@media (max-width:760px){
  .pg-h{font-size:23px}
  .mn-line{font-size:19px}
  .ln{width:44px}
  .el b{font-size:9px}
  .el em{display:none}
  #tbl{gap:1.5px}
  .say{font-size:14.5px}
  #plist{grid-template-columns:1fr}
}

/* ── 춤 (v3.36.2) ───────────────────────────────────────────
   후렴·브리지·맺음에서 이미 켜진 원소들이 박자에 맞춰 움직인다.
   --beat 는 곡의 1박(0.627초, 95.7 BPM)이고 js 가 심는다.
   --danceDelay 는 구간 시작을 박 머리에 맞추는 보정값이다.

   움직이는 것은 transform 과 opacity 뿐이다. 118개에 box-shadow 를
   애니메이션하면 매 프레임 다시 그려야 해서 느려진다.
   지연값(--dsweep 등)은 셀마다 0~1 로 미리 심어둔 값이다. */
.dancing .el.sung{
  will-change:transform,opacity;
  animation:dance calc(var(--beat) * 2) ease-in-out infinite;
  animation-delay:calc(var(--danceDelay, 0s) + var(--beat) * 2 * var(--dv, 0));
}
@keyframes dance{
  0%   {transform:scale(1);      opacity:1}
  22%  {transform:scale(1.16);   opacity:1}
  46%  {transform:scale(.97);    opacity:.72}
  100% {transform:scale(1);      opacity:1}
}
/* 훑는 방향 — 구간마다 다른 좌표를 지연값으로 쓴다 */
.dance-sweep  .el.sung{--dv:var(--dsweep)}
.dance-column .el.sung{--dv:var(--dcol)}
.dance-row    .el.sung{--dv:var(--drow)}
.dance-bloom  .el.sung{--dv:var(--dbloom);
  animation-duration:calc(var(--beat) * 4)}          /* 브리지 — 느린 호흡 */
.dance-fade   .el.sung{--dv:var(--dsweep);
  animation:fadeout calc(var(--beat) * 8) ease-out infinite}
@keyframes fadeout{
  0%{transform:scale(1.06);opacity:1}
  60%{transform:scale(1);opacity:.55}
  100%{transform:scale(1);opacity:.85}
}
/* 켜진 칸이 살짝 커질 때 이웃에 가리지 않도록 */
.dancing .el.sung{z-index:1;position:relative}

/* 되부르는 구절은 춤 위에 한 겹 더 얹는다 — 시안 테두리로 구분 */
.dancing .el.echo{z-index:5}

/* 움직임을 줄여달라고 한 사람에게는 크기만 아주 조금 */
@media (prefers-reduced-motion:reduce){
  .dancing .el.sung{animation:none}
  .dancing .el.sung{filter:brightness(1.12)}
}
.dancetog{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
  color:var(--chalk-dim);cursor:pointer;user-select:none}
.dancetog input{accent-color:var(--brass);width:15px;height:15px;cursor:pointer}

/* ── 두 번째 손잡이 — 표는 왜 이 모양인가 (2026-08-22) ──────────
   첫 손잡이가 「한 줄을 접으면 표가 된다」였다면, 여기는 접는 자리가
   왜 거기인지를 본다. 전자가 앉는 자리 수(2·6·10·14)를 세면
   줄 길이 2·8·8·18·18·32·32 가 그대로 나온다. */
#s-why{margin-bottom:36px;padding-bottom:30px;border-bottom:1px solid var(--ink-3)}
#wy-stage{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;
  padding:14px 14px 10px;margin-bottom:16px;overflow-x:auto}
#wy-fill{display:block;width:100%;min-width:620px}
.wy-sub{fill:var(--ink-3);stroke:var(--grid);stroke-width:1}
.wy-sub.is-on{stroke:none}
.wy-sub.is-on.b-s{fill:var(--brass)}
.wy-sub.is-on.b-p{fill:var(--cyan)}
.wy-sub.is-on.b-d{fill:#8FA96B}
.wy-sub.is-on.b-f{fill:#B98BC4}
.wy-sublab{fill:var(--chalk);font-family:'IBM Plex Mono',monospace;font-size:11px}
.wy-cap{fill:var(--chalk-dim);font-family:'IBM Plex Mono',monospace;font-size:9.5px}
.wy-cut{stroke:var(--chalk);stroke-width:1.4;stroke-dasharray:3 3;opacity:.75}
.wy-cutlab{fill:var(--chalk-dim);font-family:'IBM Plex Mono',monospace;font-size:10px}
.wy-now{stroke:var(--brass-soft);stroke-width:2}
.wy-nowlab{fill:var(--brass-soft);font-family:'IBM Plex Mono',monospace;font-size:12px}

#wy-read{margin:10px 0 0}
#wy-name{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--chalk);margin:0 0 8px}
#wy-facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#wy-facts span{font-family:var(--mono);font-size:11.5px;color:var(--chalk-dim);
  background:var(--ink-3);border-radius:6px;padding:4px 9px}
#wy-say{font-size:13.5px;line-height:1.9;color:var(--chalk-dim);margin:0;word-break:keep-all;
  min-height:3.8em}
#wy-say b{color:var(--brass-soft);font-weight:600}

.wy-ctl{margin:0 0 16px}
.wy-ctl .ctl-lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--chalk-dim);margin-bottom:8px}
.wy-ctl .ctl-row{display:flex;align-items:center;gap:14px}
.wy-ctl input[type=range]{flex:1;accent-color:var(--brass);min-width:0}
#wy-zv{font-family:var(--mono);font-size:16px;color:var(--brass-soft);min-width:44px;text-align:right}
.wy-jumps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wy-jump{font-size:12.5px;color:var(--chalk);background:none;border:1px solid var(--ink-3);
  border-radius:7px;padding:6px 11px;cursor:pointer;font-family:inherit;transition:.16s}
.wy-jump:hover{border-color:var(--brass);color:var(--brass)}

#wy-rows{display:grid;gap:6px;margin-bottom:16px}
.wy-row{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;
  padding:6px 10px;border-radius:8px;transition:background .16s}
.wy-row.is-on{background:var(--ink-2)}
.wy-row b{font-family:var(--mono);font-size:13px;color:var(--chalk-dim);font-weight:500}
.wy-row.is-on b{color:var(--brass-soft)}
.wy-bar{display:block;height:9px;border-radius:5px;background:var(--ink-3)}
.wy-row.is-on .wy-bar{background:var(--brass)}
.wy-row em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--chalk-dim)}
@media (max-width:560px){
  .wy-row{grid-template-columns:48px 1fr;row-gap:2px}
  .wy-row em{grid-column:1/-1}
}
#s-why .sec-h{font-family:var(--disp);font-weight:700;font-size:21px;color:var(--chalk);
  margin:0 0 10px}

/* 범례 뜻 — 이름표만으론 모르는 사람을 위해 (2026-09-03) */
.lg-help{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;padding:10px 12px;
  border:1px dashed var(--ink-3,rgba(140,160,200,.2));border-radius:9px;font-size:12.5px;line-height:1.6}
.lg-help dt{font-weight:600;opacity:.85;white-space:nowrap}
.lg-help dd{margin:0;opacity:.72}
@media (max-width:560px){.lg-help{grid-template-columns:1fr;gap:2px}.lg-help dd{margin-bottom:6px}}

/* ── 원자 판 1~4 (2026-09-15) ─────────────────────────── */
.at-sec{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--ink-3)}
.at-h{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:12px}
.at-tip{color:var(--chalk-dim);font-size:14.5px;line-height:1.75;margin-bottom:14px}
.at-board{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);padding:14px 16px 18px}
.at-board>svg{width:100%;max-width:640px;height:auto;display:block;margin:0 auto;background:var(--ink);border-radius:var(--radius)}
.at-say{margin:12px 0 0;font-size:14.5px;line-height:1.75;color:var(--chalk);min-height:3.4em}
.at-say b{color:var(--brass-soft);font-weight:500}
.at-ctl{margin-top:12px}
.at-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--brass);margin:14px 0 8px}
.at-lbl:first-child{margin-top:0}
.at-val{float:right;font-family:var(--mono);letter-spacing:0;color:var(--chalk)}
.at-range{width:100%;margin:4px 0 2px;accent-color:var(--brass)}
.at-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.at-btn{flex:1;background:none;border:1px solid var(--brass);color:var(--brass-soft);border-radius:999px;padding:9px 0;font-size:14.5px;font-family:inherit;cursor:pointer;transition:.15s}
.at-btn:hover{background:var(--ink-3)}
.at-btn.ghost{border-color:var(--ink-3);color:var(--chalk-dim)}
.at-read{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:12px;font-size:14px}
.at-read b{font-family:var(--disp);font-size:17px;color:var(--chalk)}
.at-read span{font-family:var(--mono);font-size:12px;color:var(--chalk-dim)}
.at-steppers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.at-stp{background:var(--ink);border:1px solid var(--ink-3);border-radius:var(--radius);padding:10px 8px;display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:6px}
.at-stp b{font-size:13px;font-weight:500;color:var(--chalk)}
.at-stp i{font-family:var(--mono);font-style:normal;font-size:16px;min-width:22px;text-align:center;color:var(--chalk)}
.at-step{width:30px;height:30px;border-radius:50%;border:1px solid var(--ink-3);background:none;color:var(--chalk);font-size:16px;cursor:pointer;font-family:inherit}
.at-step:hover{border-color:var(--brass);color:var(--brass-soft)}
.at-dot{width:12px;height:12px;border-radius:50%;display:block}
.at-dot.p{background:#E0705F}.at-dot.n{background:#B9B6AE}.at-dot.e{background:#6FB7C9}
.at-presets .at-preset{background:none;border:1px solid var(--ink-3);color:var(--chalk-dim);border-radius:999px;padding:7px 12px;font-size:13.5px;font-family:inherit;cursor:pointer}
.at-presets .at-preset:hover{border-color:var(--brass);color:var(--brass-soft)}
@media(max-width:520px){.at-steppers{grid-template-columns:1fr}}

.at-trio-wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.at-tri{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);padding:14px 10px;text-align:center}
.at-tri svg{width:64px;height:64px;display:block;margin:0 auto 6px}
.at-tri b{display:block;font-family:var(--disp);font-size:15px;color:var(--chalk)}
.at-w{display:block;height:6px;background:var(--ink-3);border-radius:3px;margin:8px 0 4px;overflow:hidden}
.at-w i{display:block;height:100%;background:var(--brass)}
.at-tri small{font-family:var(--mono);font-size:11px;color:var(--chalk-dim)}
.at-tri em{display:block;font-style:normal;font-size:12.5px;color:var(--chalk-dim);margin-top:6px;line-height:1.5}
.at-note{margin-top:14px;font-size:14px;line-height:1.8;color:var(--chalk-dim)}
@media(max-width:520px){.at-trio-wrap{grid-template-columns:1fr}}

.at-chips{display:flex;flex-wrap:wrap;gap:8px}
.at-chip{background:var(--ink);border:1px solid var(--ink-3);border-radius:var(--radius);padding:6px 8px 8px;cursor:pointer;display:grid;justify-items:center;gap:2px;font-family:inherit;color:var(--chalk);min-width:64px}
.at-chip.on{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}
.at-chip span{font-size:12.5px}
.at-chip small{font-family:var(--mono);font-size:10.5px;color:var(--chalk-dim)}
.at-pairs{display:grid;justify-items:center;gap:6px;padding:14px 0 6px}
.at-pairs .at-row{margin-top:0;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.at-bonds{display:flex;gap:10px}
.at-bonds i{display:block;width:3px;height:22px;background:var(--brass);border-radius:2px}
.at-link{display:block;height:4px;background:var(--brass);border-radius:2px;min-width:18px}
.at-formula{text-align:center;font-family:var(--disp);font-size:28px;font-weight:700;color:var(--chalk);margin:6px 0 0}
.at-formula sub{font-size:16px}
.at-strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.at-hs{background:var(--ink);border:1px solid var(--ink-3);border-radius:6px;text-align:center;padding:6px 0}
.at-hs b{display:block;font-family:var(--mono);font-size:15px;color:var(--brass-soft)}
.at-hs.zero b{color:var(--chalk-dim)}
.at-hs span{font-size:10.5px;color:var(--chalk-dim)}

/* ── 2026-09-27 개편: 판 사이 다리, 판 2 꼬리표, 판 4 맨 위층 칸, 판 6 아파트 ── */
.at-bridge{margin:14px 0 0;font-size:13.5px;color:var(--brass-soft);line-height:1.8;word-break:keep-all}
.at-bridge a{color:var(--brass-soft)}
#at-tags{display:inline-flex;gap:6px}
.at-tag{font-style:normal;font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid}
.at-tag.ion{color:#E3C86A;border-color:#E3C86A}
.at-tag.iso{color:var(--cyan);border-color:var(--cyan)}
#at-floors{margin:10px 0 4px}
.at-fl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0}
.at-fl-n{font-size:13px;color:var(--chalk);min-width:78px}
.at-fl-t{font-family:var(--mono);font-size:11.5px;color:var(--chalk-dim)}
#wy-aptwrap{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;padding:10px 8px;margin:0 0 12px}
#wy-apt{display:block;width:100%;height:auto}
.wy-fl{fill:var(--chalk-dim);font-family:var(--mono);font-size:12px}
.wy-fl.is-link{fill:var(--brass-soft);text-decoration:underline}
.wy-e{font-size:12px;font-weight:700;font-family:var(--mono)}
.wy-e.is-new{font-size:14px}
.wy-cnt{fill:var(--chalk-dim);font-family:var(--mono);font-size:11px}
.wy-cnt.is-full{fill:var(--d-bio)}
.wy-foot{fill:var(--chalk-dim);font-size:10px;opacity:.7}
.wy-box{cursor:pointer}
.wy-bounce{font-size:15px;font-weight:700;animation:wyb .9s ease-out forwards}
@keyframes wyb{0%{transform:translateY(-4px);opacity:1}45%{transform:translateY(12px);opacity:1}100%{transform:translateY(-26px);opacity:0}}
.wy-steprow{display:flex;align-items:center;gap:10px;margin-top:6px}
.wy-steprow input[type=range]{flex:1;accent-color:var(--brass);min-width:0}
.wy-stepb{width:36px;height:36px;border-radius:50%;border:1px solid var(--ink-3);background:none;color:var(--chalk);font-size:18px;cursor:pointer}
.wy-stepb:hover{border-color:var(--brass);color:var(--brass)}
#wy-square{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;padding:12px;margin:0 0 14px}
.wy-sqh{margin:0 0 8px;font-size:14px;color:var(--chalk)}
.wy-sqn{margin:8px 0 10px;font-size:13px;color:var(--chalk-dim);line-height:1.8}
.wy-sq{display:block;width:100%;height:auto;max-height:220px}
.wy-sqc{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.wy-sq.peel .wy-sqc{transform:translate(var(--dx),var(--dy))}
.wy-sqt{font-size:11px;font-family:var(--body)}
.wy-rule{margin:14px 0 6px;padding:12px 14px;border-left:3px solid var(--brass);background:var(--ink-2);font-size:14px;line-height:1.9;color:var(--chalk);word-break:keep-all}
.wy-note{font-size:12.5px;color:var(--chalk-dim);line-height:1.8;margin:6px 0}
.wy-sql{list-style:none;padding:0;margin:8px 0 0;font-size:13px;line-height:1.9}
.at-door{margin:14px 0 26px;padding:12px 14px;border:1px solid var(--ink-3);border-radius:10px;font-size:14px;line-height:1.9;color:var(--chalk-dim);word-break:keep-all}.at-door a{color:var(--brass-soft);white-space:nowrap}