/* ---- 웹툰 일대기 (2026-10-04) — 포인트색은 파랑, 노랑 쓰지 않음 */
#story{--wt-blue:#2f6fb3;--wt-dash:#9aa6b5}
#story .wt-lead{font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:var(--ink2);font-weight:500;margin:-32px 0 64px;max-width:28em;text-wrap:balance}
#story .kicker::before{background:var(--wt-blue)}
.wt-ch{max-width:920px;margin:0 auto 80px}
.wt-band{display:flex;align-items:center;gap:14px;margin-bottom:32px;padding:14px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.wt-no{background:var(--wt-blue);color:#fff;font-size:13px;line-height:1;letter-spacing:.06em;padding:6px 10px;border-radius:4px;font-weight:600;white-space:nowrap}
.wt-t{font-size:clamp(20px,2.2vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.wt-range{margin-left:auto;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 같은 행 좌우 칸의 캡션 줄을 맞춘다: 컷 = 그림·메타·내레이션 3행 subgrid */
.wt-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:0}
.wt-cut{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.wt-cut figcaption{display:contents}
.wt-grid>.wt-cut:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 16px)}
.wt-frame{aspect-ratio:4/5;border:2px solid var(--ink);border-radius:4px;overflow:hidden;background:#fff}
.wt-frame img{width:100%;height:100%;object-fit:cover}
.wt-frame.empty{border:2px dashed var(--wt-dash);background:transparent;display:grid;place-items:center}
.wt-frame.empty svg{width:44%;height:auto;color:var(--wt-blue);opacity:.75}
.wt-meta{font-size:13px;line-height:1.5;color:var(--muted);display:flex;gap:4px 8px;flex-wrap:wrap;align-items:baseline;align-content:start;padding-top:14px;text-wrap:pretty}
.wt-sn{color:var(--wt-blue);font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.wt-meta time{font-variant-numeric:tabular-nums}
.wt-nar{font-size:18px;line-height:1.6;padding:6px 0 56px;color:var(--ink);text-wrap:pretty}
.wt-chrono{max-width:920px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wt-chrono>summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;display:flex;align-items:center;gap:12px}
.wt-chrono>summary::-webkit-details-marker{display:none}
.wt-chrono>summary::before{content:"+";display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;font-weight:400;line-height:1}
.wt-chrono[open]>summary::before{content:"−"}
.wt-chrono[open]>summary{border-bottom:1px solid var(--line)}
@media (max-width:720px){
  .wt-grid{grid-template-columns:1fr}
  .wt-nar{padding-bottom:44px}
  .wt-grid>.wt-cut:last-child:nth-child(odd){grid-column:auto;width:auto;justify-self:stretch}
  .wt-band{flex-wrap:wrap;row-gap:6px}
  .wt-nar{font-size:17px}
}
@supports (animation-timeline: view()){
  .wt-cut,.wt-band{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
