/* 몸 시뮬레이터 화면. 공용 색·글자는 common.css를 쓴다 */
:root{--s4:#eda100;--ml:3.3rem;--mr:8px;
  --ev-sleep:#4a55a2;--ev-meal:#c9741f;--ev-coffee:#7a5230;--ev-stress:#c8443c;--ev-exercise:#2f8f5b;--ev-light:#c79a00;--ev-alcohol:#a8457e}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){--s4:#c98500;--ev-sleep:#7c88d8;--ev-coffee:#a87b50;--ev-stress:#e0625a;--ev-exercise:#46a873;--ev-alcohol:#c9669e}}
:root[data-theme="dark"]{--s4:#c98500;--ev-sleep:#7c88d8;--ev-coffee:#a87b50;--ev-stress:#e0625a;--ev-exercise:#46a873;--ev-alcohol:#c9669e}

#app .topbar{padding-left:max(16px,calc((100% - 1528px)/2));padding-right:max(16px,calc((100% - 1528px)/2))}
#app .disclaimer,#foot .credit,#foot footer.brand{max-width:1560px}
.sim{max-width:1560px;margin:0 auto;padding:0 8px 24px;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.sim-title{margin:0 8px}
.sim-title h1{margin:0;font:400 clamp(1.7rem,4.2vw,2.5rem)/1.04 var(--display);letter-spacing:-.012em}
.sim-sub{margin:.15rem 0 0;font-size:.78rem;line-height:1.4;color:var(--ink2)}
.card-s{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}

/* 장면: 어느 테마에서도 어둡다. 낮과 밤은 빛의 값(--sky)으로 바뀐다 */
.stage{--topic-d:#f4d84f;--sky:.5;border-radius:0;display:grid;grid-template-columns:minmax(0,1fr);z-index:6}
.st-sky{position:absolute;inset:0;z-index:-2;background:radial-gradient(70% 90% at 50% 34%,rgba(92,104,214,calc(.14 + var(--sky)*.42)),transparent 70%),radial-gradient(52% 42% at 50% 0%,rgba(255,206,140,calc(var(--sky)*var(--sky)*.42)),transparent 74%),radial-gradient(60% 70% at 8% 100%,rgba(120,70,200,.24),transparent 70%),#07060f;transition:filter .7s}
.stage[data-asleep="1"] .st-sky{filter:brightness(.62) saturate(.8)}
.st-art{position:relative;inset:auto;z-index:0}
.st-art canvas{touch-action:pan-y;cursor:grab}
.st-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.st-links path{fill:none;stroke:rgba(214,209,234,.42);stroke-width:1}
.st-links.off,.org-tags.off{display:none}
.org-tags{position:absolute;left:0;top:0;right:0;z-index:1;height:0}
.org-tag{position:absolute;left:0;top:0;display:inline-flex;align-items:baseline;gap:5px;max-width:42vw;min-height:24px;padding:1px 8px;border:1px solid transparent;border-radius:7px;background:rgba(7,6,15,.56);color:#f5f2ff;cursor:pointer;font:600 .72rem/1.3 var(--sans);white-space:nowrap;will-change:transform;overflow:hidden;text-overflow:ellipsis}
.org-tag:hover,.org-tag:focus-visible{border-color:var(--accent)}
.ot-n{flex:none}
.ot-w{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:#d6d1ea}
.org-tag.flash{animation:otFlash 1.6s ease-out}
@keyframes otFlash{0%{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 46%,rgba(7,6,15,.6))}100%{border-color:transparent;background:rgba(7,6,15,.56)}}
.s3d-off .org-tags,.s3d-off .st-links{display:none}

.st-left{z-index:2;display:grid;gap:8px;align-content:start;min-width:0}
.st-states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.st-card{display:grid;gap:0;text-align:left;padding:5px 8px 6px;border:1px solid var(--line);border-radius:10px;background:rgba(14,12,32,.72);color:var(--ink);cursor:pointer;min-width:0}
.st-card:hover,.st-card:focus-visible{border-color:var(--accent)}
.st-k{font-size:.62rem;line-height:1.2;color:var(--muted)}
.st-w{font:500 .9rem/1.25 var(--sans);letter-spacing:-.01em;min-height:2.5em;overflow-wrap:anywhere}
html[lang="en"] .st-w{font-size:.78rem;overflow-wrap:normal}
.st-w.flip{animation:stFlip .7s ease-out}
@keyframes stFlip{0%{color:var(--accent);transform:translateY(3px)}100%{color:var(--ink);transform:none}}
.st-card i{display:block;height:3px;margin-top:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.st-card i>span{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
.st-quick{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.qk-l{flex:1 1 100%;font-size:.72rem;font-weight:600;line-height:1.2;color:var(--ink)}
.qk{min-height:32px;padding:2px 9px;border:1px solid color-mix(in srgb,var(--c) 70%,#fff 10%);border-radius:99px;background:color-mix(in srgb,var(--c) 26%,rgba(10,8,24,.74));color:#fff;font-size:.72rem;font-weight:600;cursor:grab;touch-action:none;white-space:nowrap;user-select:none;-webkit-user-select:none;transition:transform .12s,background .12s}
.qk:hover{background:color-mix(in srgb,var(--c) 56%,rgba(10,8,24,.74))}
.qk:active{transform:scale(.95)}

/* 오른쪽: 일어나는 일과 숫자 */
.feed-list{display:flex;flex-direction:column;justify-content:flex-start;gap:7px;min-height:0}
.fl-empty{margin:0;font-size:.78rem;color:var(--muted)}
.fl-row{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:2px 6px;font-size:.78rem;line-height:1.42;opacity:.62}
.fl-row.last{opacity:1}
.fl-row:nth-last-child(2){opacity:.82}
.fl-t{font:500 .68rem/1.6 var(--mono);color:var(--muted);white-space:nowrap}
.fl-line{min-width:0}
.fl-arr{color:var(--muted)}
.fl-s{display:inline;padding:0;border:0;background:none;color:var(--ink2);font:inherit;text-align:left;cursor:pointer;border-radius:3px}
.fl-s:hover{color:var(--accent);text-decoration:underline}
.fl-s.head{color:var(--ink);font-weight:600}
.fl-s small{font:500 .86em var(--mono);color:var(--muted)}
.fl-s.new{animation:flNew 1.1s ease-out}
@keyframes flNew{0%{color:var(--accent)}100%{}}
.body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.bd{position:relative;display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--raise);color:var(--ink);padding:3px 6px 4px;cursor:pointer;font-size:.64rem;line-height:1.2;min-height:44px}
.bd:hover,.bd:focus-visible{border-color:var(--accent)}
.bd b{display:block;font:500 .84rem/1.25 var(--mono);letter-spacing:-.02em}
.bd .nm{display:block;color:var(--muted);overflow-wrap:anywhere}
.bd .up{color:#ff9d6a}.bd .dn{color:#7ab4ff}
.bd .arr{position:absolute;top:2px;right:4px;font-size:.66rem;line-height:1.2}
.bd i{display:block;height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 14%,transparent);margin-top:2px;overflow:hidden}
.bd i>span{display:block;height:100%;background:var(--ink2);border-radius:2px}
.nums .hint-line{margin-top:6px}
.st-sidetabs{margin:0 0 6px;flex-wrap:nowrap}
.st-sidetabs button{min-height:30px;padding:2px 10px;font-size:.72rem;white-space:nowrap}
.st-side[data-view="feed"] .nums,.st-side[data-view="nums"] .feed{display:none}
.st-note{margin:2px 4px 0}

/* 조작 줄 */
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.clock{font:500 1.15rem/1.2 var(--mono);letter-spacing:-.02em;min-width:6.4em;white-space:nowrap}
.icon-btn{min-width:42px;min-height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(14,12,32,.72);color:var(--ink);cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn.main{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ctl .seg{margin:0;gap:3px;flex-wrap:nowrap}
.ctl .seg button{min-height:32px;padding:2px 8px;white-space:nowrap;font-size:.72rem;font-variant-numeric:tabular-nums}
.ph-tabs{display:none}
.pn-tabs{display:none}
.row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.tl-row{margin-bottom:6px}
.tl-head .seg{margin:0;gap:3px}
.tl-head .seg button{min-height:32px;padding:2px 10px;font-size:.74rem;white-space:nowrap}
.row .seg{margin:0}
.lb-group{display:inline-flex;align-items:center;gap:6px}
.lb-group .seg{margin:0}
.row .lb{font-size:.76rem;color:var(--muted)}
.now{display:flex;flex-wrap:nowrap;gap:4px;height:1.75em;overflow:hidden;font-size:.7rem}
.now span{white-space:nowrap}
.now span{padding:1px 8px;border-radius:99px;background:rgba(255,255,255,.1);color:var(--ink)}
.beyond p{margin:6px 0 0;padding:4px 8px;border-left:3px solid var(--accent);background:var(--tint);border-radius:0 6px 6px 0;font-size:.76rem;color:var(--ink)}

/* 시나리오 띠: 눌러서 바꾼다. 카드마다 평소와 견준 값 */
.scen{min-width:0}
.sc-row{display:flex;gap:8px;align-items:stretch}
.sc-cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);gap:6px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;min-width:0}
.sc-card{display:grid;gap:1px;text-align:left;align-content:start;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;min-width:0}
.sc-card:hover{border-color:var(--accent)}
.sc-card b{font:600 .78rem/1.25 var(--sans)}
.sc-card small{font-size:.66rem;line-height:1.3;color:var(--muted)}
.sc-card[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--plane)}
.sc-card[aria-pressed="true"] small{color:color-mix(in srgb,var(--plane) 74%,var(--ink))}
.cmp-big{flex:0 0 auto;display:grid;align-content:center;gap:1px;padding:4px 16px;border:1px solid var(--accent);border-radius:12px;background:var(--accent);color:var(--on-accent);cursor:pointer;text-align:left}
.cmp-big b{font:600 .84rem/1.2 var(--sans)}
.cmp-big small{font-size:.66rem;line-height:1.2;opacity:.82}
.cmp-big[aria-pressed="true"]{background:transparent;color:var(--accent)}
.sc-links{margin:0 0 0 4px;font-size:.7rem;color:var(--muted)}
.sc-links a{font-weight:600}
.from-topic{justify-self:start;font-size:.72rem;font-weight:600;color:var(--accent);text-decoration:none}
.from-topic:hover{text-decoration:underline}
.cmp-labels{position:absolute;inset:auto 0 8px 0;height:1.4em;z-index:2;pointer-events:none}
.cmp-labels[hidden]{display:none}
.cmp-labels span{position:absolute;bottom:0;text-align:center;font:600 .72rem/1.3 var(--sans);color:#d6d1ea;text-shadow:0 1px 6px #000,0 0 2px #000}
.cmp-labels span.on{color:var(--accent)}
.st-w2{display:block}
.st-w2[hidden]{display:none}
.stage.two .st-w{min-height:0;font-size:.74rem;line-height:1.3}
.st-w2.differs{color:var(--accent)}
/* 두 하루 차이 */
.diff{min-height:0;overflow-y:auto;padding:4px 10px 8px;border-radius:12px;background:var(--surface)}
.stage .diff{background:rgba(14,12,32,.74)}
.diff .df-row b.up{color:var(--pos)}.diff .df-row b.dn{color:var(--neg)}
.stage .diff .df-row b.up{color:#ff9d6a}.stage .diff .df-row b.dn{color:#7ab4ff}
.diff h3{margin:.45rem 0 .15rem;font:600 .72rem/1.3 var(--sans);color:var(--muted)}
.df-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;gap:0 7px;width:100%;padding:3px 2px;border:0;border-top:1px solid var(--grid);background:none;color:var(--ink);text-align:left;cursor:pointer;font-size:.76rem;line-height:1.3}
.df-row:hover{background:var(--tint)}
.df-row time{font:500 .66rem var(--mono);color:var(--muted);white-space:nowrap}
.df-row b{font:500 .78rem var(--mono)}
.df-row b.up{color:#ff9d6a}.df-row b.dn{color:#7ab4ff}
.df-row small{grid-column:2/4;font:500 .62rem var(--mono);color:var(--muted)}
.df-row .lv-m{grid-column:4;grid-row:1}
.df-n{min-width:0;overflow-wrap:anywhere}
.st-side[data-view="feed"] .diff,.st-side[data-view="nums"] .diff,.st-side[data-view="diff"] .feed,.st-side[data-view="diff"] .nums{display:none}

/* 시간표 */
.tl{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ruler{position:relative;height:30px;margin-left:var(--ml);margin-right:var(--mr);cursor:ew-resize;touch-action:none;border-bottom:1px solid var(--axis)}
.ruler span{position:absolute;bottom:2px;transform:translateX(-50%);font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none}
.ruler span.day{top:0;bottom:auto;transform:none;font-weight:700;color:var(--ink2);white-space:nowrap}
.lane{display:flex;align-items:stretch;height:34px;border-bottom:1px solid var(--grid)}
.chip{flex:0 0 var(--ml);width:var(--ml);padding:0 2px;border:0;border-left:4px solid var(--c);background:transparent;color:var(--ink);font-size:.66rem;line-height:1.1;cursor:grab;touch-action:none;text-align:left;overflow:hidden}
.chip:hover{background:var(--tint)}
.chip:active{cursor:grabbing}
.track{position:relative;flex:1 1 auto;margin-right:var(--mr);overflow:hidden}
.band{position:absolute;top:0;bottom:0;background:var(--grid);opacity:.45;pointer-events:none}
.divider{position:absolute;top:0;bottom:0;width:1px;background:var(--axis);pointer-events:none}
.blk{position:absolute;top:4px;bottom:4px;border:0;border-radius:5px;background:var(--c);cursor:grab;touch-action:none;padding:0;min-width:12px}
.blk:active{cursor:grabbing}
.blk::before{content:"";position:absolute;inset:-4px -8px}/* 좁은 블록도 손가락으로 잡히게 누르는 자리를 넓힌다 */
.blk.sel{outline:2px solid var(--ink);outline-offset:1px}
.blk.del{opacity:.3}
.blk.ghost{background:transparent;border:1.5px dashed var(--c);pointer-events:none;opacity:.8}
.blk .h{position:absolute;right:-2px;top:-4px;bottom:-4px;width:13px;cursor:ew-resize;touch-action:none}
.blk .h::after{content:"";position:absolute;right:5px;top:30%;bottom:30%;width:2px;background:rgba(255,255,255,.85);border-radius:1px}
.tl-cur{position:absolute;left:0;top:0;bottom:0;width:2px;margin-left:-1px;will-change:transform;background:var(--ink);pointer-events:none;z-index:3}
.tl-cur::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--ink)}
.drag-ghost{position:fixed;z-index:30;pointer-events:none;width:14px;height:26px;margin:-13px 0 0 -7px;border-radius:5px;background:var(--c);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.hint-line{font-size:.72rem;color:var(--muted);margin:4px 0 0}
.insp{display:grid;gap:4px 14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.insp .ctrl input[type=range]{height:34px}
.insp-note{grid-column:1/-1;margin:0;font-size:.74rem;color:var(--ink2)}
.insp-note.warn{color:var(--ink);font-weight:600}
.insp-note[hidden]{display:none}
.insp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;grid-column:1/-1;font-size:.86rem;font-weight:700}

/* 그래프: 펼쳐 본다 */
.graphs>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;list-style:none}
.graphs>summary::-webkit-details-marker{display:none}
.graphs>summary::before{content:"▸";color:var(--accent);margin-right:2px}
.graphs[open]>summary::before{content:"▾"}
.graphs>summary:hover{border-color:var(--accent)}
.g-t{font:400 1.2rem/1.2 var(--display)}
.g-s{font-size:.72rem;color:var(--muted)}
.graphs[open]>.panels{margin-top:8px}
.lv-m{font-size:.6rem;font-weight:600;line-height:1.3;padding:0 4px;border-radius:99px;border:1px solid var(--ink2);color:var(--ink2);white-space:nowrap}
.lv-m.measured{background:var(--ink2);color:var(--surface)}
.lv-m.assumed{border-style:dashed}
.panels{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.pn-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 2px}
.pn-h h3{margin:0;font-size:.88rem}
.pn-h small{font-size:.72rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:3px;margin:0 0 2px}
.schip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--ink2);font-size:.72rem;padding:2px 6px;min-height:32px;cursor:pointer}
.schip:hover{background:var(--tint)}
.schip b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.plot{position:relative;touch-action:pan-y}
.plot svg{display:block;width:100%;cursor:crosshair;user-select:none;-webkit-user-select:none}
.plot text{fill:var(--muted);font-size:.66rem;font-variant-numeric:tabular-nums}
.cur-line{position:absolute;left:0;width:1.5px;margin-left:-.75px;background:var(--ink);pointer-events:none;will-change:transform}
.plot .tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--surface);font-size:.72rem;line-height:1.4;padding:4px 7px;border-radius:6px;white-space:nowrap;z-index:2;transform:translateX(-50%);top:2px}
.plot .tip b{font-variant-numeric:tabular-nums}
.pn details{font-size:.74rem;color:var(--muted);margin-top:2px}
.pn summary{cursor:pointer;width:max-content}
.pn table{font-size:.72rem;margin-top:4px}

/* 근거 */
.ev{position:fixed;z-index:40;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.28);overflow-y:auto;overscroll-behavior:contain;left:0;right:0;bottom:0;max-height:78vh;border-radius:14px 14px 0 0;padding:12px 14px 20px}
.ev[hidden]{display:none}
.ev-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ev h2{margin:0;font-size:1.2rem}
.ev .val{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;margin:.1rem 0}
.ev .val small{font-size:.8rem;font-weight:400;color:var(--muted)}
.ev p{margin:.35rem 0;font-size:.9rem}
.ev .ev-plain{font-size:1rem;color:var(--ink)}
.ev .ev-tech{font-size:.8rem;color:var(--ink2)}
.ev h3{font-size:.92rem;margin:1rem 0 .3rem}
.lv{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.74rem;font-weight:700;white-space:nowrap;border:1.5px solid var(--ink2);color:var(--ink)}
.lv.measured{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.lv.assumed{border-style:dashed;color:var(--ink2)}
.edge{border-top:1px solid var(--grid);padding:.5rem 0}
.edge .top{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:.8rem;color:var(--ink2)}
.edge p{font-size:.86rem;margin:.25rem 0}
.edge .basis{font-size:.8rem;color:var(--ink2)}
.edge-learn{display:inline-block;font-size:.78rem;margin-top:2px}
.tag-on{font-size:.72rem;font-weight:700;padding:0 6px;border-radius:99px;background:var(--tint);color:var(--ink)}
.refs-in{font-size:.78rem;display:flex;flex-wrap:wrap;gap:2px 10px}
.learn{display:inline-flex;align-items:center;min-height:38px;padding:4px 12px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:.86rem}
:root[data-theme="dark"] .learn{color:#141210}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .learn{color:#141210}}
.grp-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 4px;border:0;border-top:1px solid var(--grid);background:none;color:var(--ink);text-align:left;cursor:pointer;font-size:.86rem}
.grp-row:hover{background:var(--tint)}
.grp-v{font:500 .9rem var(--mono)}
.ev details{font-size:.84rem;margin-top:1rem}
.ev summary{cursor:pointer;font-weight:600}

.work-stack{display:grid;gap:10px;min-width:0}
/* 넓은 화면: 장면이 위에 꽉 차고 왼쪽에 말과 조작, 오른쪽에 흐름, 그 아래 시간표. 1280×800 첫 화면에 다 들어온다 */
@media (min-width:1000px){
  :root{--ml:4.2rem}
  #app{position:relative}
  #app .topbar{position:absolute;inset:0 0 auto;z-index:8;color:#f5f2ff;--ink2:#e7e2f8;--ink:#fff;--line:rgba(255,255,255,.26)}
  #app .topbar .tool{background:rgba(10,8,24,.38)}
  .sim{max-width:none;padding:0 0 24px;gap:10px}
  .stage{grid-template-columns:minmax(330px,27%) minmax(0,1fr) minmax(320px,27%);grid-template-rows:minmax(0,1fr);height:clamp(420px,calc(100vh - 360px),760px);padding:54px max(20px,calc((100% - 1520px)/2)) 10px;gap:0 12px}
  .st-art{position:absolute;inset:0;z-index:0}
  .org-tags{inset:0 0 auto}
  .st-left{grid-column:1;grid-row:1;align-content:start;overflow:hidden}
  .st-side{grid-column:3;grid-row:1;display:flex;flex-direction:column;min-height:0;z-index:2}
  .feed,.nums,.diff{flex:1 1 auto;min-height:0;overflow:hidden}
  .diff{overflow-y:auto}
  .nums{overflow-y:auto}
  .feed{display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px;border-radius:12px;background:linear-gradient(180deg,rgba(14,12,32,0),rgba(14,12,32,.74) 34%)}
  .work-stack,.scen{padding:0 max(16px,calc((100% - 1528px)/2))}
  #timeline-card{padding:8px 10px 6px}
  .tl-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-bottom:4px}
  .tl-row{display:contents}
  .lane{height:26px}
  .chip{font-size:.62rem}
  .ruler{height:24px}
  .blk{top:3px;bottom:3px}
  .panels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev{left:auto;top:0;right:0;width:min(480px,92vw);max-height:none;border-radius:14px 0 0 14px}
}
/* 폰·태블릿: 몸과 시각을 위에 고정하고 아래 칸은 탭으로 바꾼다. 세로가 짧으면(가로로 든 폰) 고정을 푼다 */
@media (max-width:999px){
  .stage{position:sticky;top:0;margin:0 -8px;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--line);padding:0 8px 6px}
  .st-left{display:contents}
  .ctl{order:1;z-index:2;gap:4px 6px;padding:6px 0 4px;flex-wrap:nowrap}
  .st-art{order:2;position:relative;height:clamp(150px,27svh,240px);margin:0 -8px}
  .org-tags{top:58px}
  .now{position:absolute;top:50px;right:8px;z-index:2;max-width:58%;height:auto;flex-wrap:wrap;justify-content:flex-end;font-size:.6rem;pointer-events:none}
  .st-states{order:4;z-index:2;margin-top:2px;gap:4px}
  .st-card{padding:3px 5px 4px}
  .st-w{font-size:.7rem;line-height:1.2;min-height:2.4em}
  .st-card i{margin-top:1px}
  .st-quick{order:5;z-index:2;margin-top:4px;gap:3px;flex-wrap:nowrap;justify-content:space-between}
  .qk-l{display:none}
  .qk{flex:1 1 auto;padding:1px 2px;min-height:30px;font-size:.66rem;text-align:center}
  #rewind{display:none}
  .ctl .seg{margin-left:auto}
  .ctl .seg button{padding:2px 4px;min-width:32px;font-size:.72rem}
  .clock{font-size:.92rem;min-width:0}
  .ph-tabs{display:flex;flex-wrap:nowrap;margin:0;gap:3px}
  .ph-tabs button{flex:1 1 0;padding:2px 2px;min-height:38px;white-space:nowrap;font-size:.72rem}
  .pn-tabs{display:flex;flex-wrap:wrap;gap:3px;margin:8px 0}
  .pn-tabs button{min-height:34px;padding:2px 8px;font-size:.72rem}
  .pn-tabs button[hidden]{display:none}
  .graphs>summary{display:none}
  .panels .pn:not(.cur){display:none!important}
  .feed,.nums,.diff{display:none}
  .sim[data-tab="diff"] .diff{display:block}
  .sc-row{flex-direction:column;gap:6px}
  .sc-cards{grid-auto-columns:minmax(116px,42%)}
  .cmp-big{grid-auto-flow:column;justify-content:space-between;align-items:baseline;padding:6px 12px}
  .ph-tabs button[hidden]{display:none}
  .sim[data-tab="tl"] #timeline-card{display:block}
  .sim:not([data-tab="tl"]) #timeline-card{display:none}
  .sim:not([data-tab="graphs"]) .graphs{display:none}
  .sim[data-tab="feed"] .feed{display:block}
  .sim[data-tab="nums"] .nums{display:block}
  .feed{padding:2px 6px}
  .fl-row{opacity:1}
  .body{grid-template-columns:repeat(3,minmax(0,1fr))}
  .st-side{display:none}
  .st-note{margin:0 8px}
  .tl-head .row:first-child>.seg{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tl-head .lb{display:none}
  .tl-head .tool{min-height:32px}
}
@media (max-width:999px) and (max-height:560px){.stage{position:relative}.st-art{height:150px}}
@media print{.ctl,.ev,.st-quick{display:none!important}}