:root{
  --paper:#F2EDE3; --paper2:#FBF8F2; --ink:#23262B; --ink2:#4A4D52; --muted:#8C877B; --hair:#DCD5C7;
  --red:#D8432F; --amber:#E8A33A; --gold:#C99A3B;
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--font);
  touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
#cv{position:fixed;inset:0;display:block;touch-action:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:active{transform:scale(.94)}
button{transition:transform .08s ease-out}

/* HUD */
/* R11 가지치기(모바일): 상단 오른쪽 ⏩↶⏸≡ 가 토스 X 버튼 자리(≈ 오른쪽 끝 44px)와 겹치지 않게 우측 패딩을 토스 X 영역만큼 비운다 — mobile-check 주의(fold344/g360/se375/i390) '토스 X 버튼 자리에 버튼 2' 반복 지적 처리 */
#hud{position:fixed;left:0;right:0;top:0;padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px;background:linear-gradient(var(--paper) 78%,rgba(242,237,227,0));z-index:5;pointer-events:none}
@media (max-width: 480px){ #hud{padding-right:52px} }
#hud .row{display:flex;align-items:center;justify-content:space-between;height:46px}
#hud .row>*{pointer-events:auto}
.score{display:flex;flex-direction:column;line-height:1;min-width:70px}
.score small{font-size:11px;color:var(--muted);letter-spacing:.08em;font-weight:600}
.score b{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left center}
.score b.bump{animation:bump .28s ease-out}
.score small i{font-style:normal;color:#9A6A00;margin-left:3px;display:inline-flex;align-items:center;gap:2px;letter-spacing:0;transform-origin:left center}
.score small i svg{width:12px;height:12px}
.score small i.bump{animation:bump .3s ease-out}
/* R8(천국철2) 점수 옆 '+N 원인'(천국철1 R10 옮김): 1.4초 동안 가장 큰 원인 하나. 맞는 수(숨통·해결·급행·요원·통로)는 금빛, 셔틀은 흐린 회색 */
#scWhy{display:none;font-style:normal;font-weight:800;font-size:min(12px,3.3vw);letter-spacing:0;color:#9A6A00;white-space:nowrap;transform-origin:left center}
#scWhy.fx{color:#9A6A00;box-shadow:inset 0 -2px 0 rgba(201,154,59,.55)}
#scWhy.bus{color:#8C877B;font-weight:700}
.score.why small .lb,.score.why small i{display:none}
.score.why #scWhy{display:inline-block}
#scWhy.pop{animation:bump .3s ease-out}
#goal{position:absolute;right:14px;top:calc(52px + env(safe-area-inset-top));height:26px;line-height:24px;padding:0 9px;border-radius:99px;background:var(--paper2);border:1px solid var(--hair);font-size:11.5px;font-weight:800;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
#goal.ok{color:#fff;background:#2BA35A;border-color:#2BA35A}
#goal{overflow:hidden}#goal .gf{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(243,196,107,.55),rgba(232,169,58,.75));border-radius:99px;transition:width .4s}#goal span{position:relative}#goal svg{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
#goal.hit{animation:ghit .9s ease-out}
@keyframes ghit{0%{transform:scale(1)}20%{transform:scale(1.35)}45%{transform:scale(.95)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
#goalfly{position:fixed;z-index:9;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:13px;background:#2BA35A;color:#fff;display:none;place-items:center;pointer-events:none;box-shadow:0 10px 26px rgba(35,38,43,.35);border:2px solid #fff;transition:left 1s cubic-bezier(.5,0,.3,1),top 1s cubic-bezier(.5,-.6,.4,1),transform 1s}
#goalfly.on{display:grid}
#goalfly svg{width:32px;height:32px}
#goalfly svg rect:not(:first-child){fill:#2BA35A}
/* 목표 달성 도장: 화면 가운데 위쪽에 1.4초 */
#stamp{position:fixed;left:50%;top:34%;z-index:9;transform:translate(-50%,-50%);pointer-events:none;display:none;text-align:center;background:#FBF8F2;color:var(--sc,#23262B);border-radius:6px;padding:9px 18px 8px;box-shadow:0 6px 18px rgba(35,38,43,.16);border:2px solid var(--sc,#23262B);outline:1px solid var(--sc,#23262B);outline-offset:-6px}
#stamp b{display:block;font-size:28px;font-weight:700;letter-spacing:-.02em}
#stamp span{display:block;font-size:13px;font-weight:700;color:#4A4D52;margin-top:1px;white-space:nowrap;font-variant-numeric:tabular-nums}
#stamp.on{display:block;animation:stampin 1.5s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes stampin{0%{transform:translate(-50%,-50%) scale(1.18);opacity:0}12%{transform:translate(-50%,-50%) scale(.97);opacity:1}22%{transform:translate(-50%,-50%) scale(1)}82%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.ico{width:16px;height:16px;flex:none;vertical-align:-3px}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
.clock{text-align:center;line-height:1.05;flex:1;min-width:0;padding:0 4px}
.clock span{display:block;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hbtns{display:flex;gap:4px;justify-content:flex-end}
.ibtn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--paper2);border:1px solid var(--hair)}
.ibtn svg{width:18px;height:18px}
.ibtn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ibtn:disabled{opacity:.32}
/* R7(천국철2) 패널 '⏩ 켜졌는지 흐리다 · ⏸ 옆 메뉴를 잘못 누른다' → 2배속이면 금빛 + '2배' 꼬리표, 메뉴는 한 칸 떨어뜨린다 */
#ffBtn{position:relative}
#undoBtn{margin-left:12px}   /* R10(패널 P0) ⏩와 ↶ 사이를 띄운다 — 엄지로 2배속을 누르다 되돌리기가 눌리던 것 */
#ffBtn.on{background:#C99A3B;border-color:#8A6A2A;color:#FBF8F2}
#ffBtn.on::after{content:'2배';white-space:nowrap;position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font-size:9.5px;font-weight:900;line-height:14px;padding:0 5px;border-radius:7px;background:#23262B;color:#FBF8F2;pointer-events:none}
#menuBtn{margin-left:12px;background:transparent;border-color:transparent;opacity:.8}
#wave{display:block;width:100%;height:34px;margin-top:2px}
#rush{position:absolute;left:50%;top:calc(52px + env(safe-area-inset-top));transform:translateX(-50%);font-size:11px;font-weight:800;color:#fff;background:var(--red);padding:3px 8px;border-radius:99px;opacity:0;transition:opacity .25s;letter-spacing:.02em;white-space:nowrap}
#rush.on{opacity:1;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.07)}}

/* Hearts */
#hearts{position:absolute;left:14px;top:calc(52px + env(safe-area-inset-top));display:flex;gap:2px;align-items:center;padding:2px 7px 2px 5px;border-radius:99px;background:var(--paper2);border:1px solid var(--hair);transition:border-color .2s,background .2s;pointer-events:none}
#hearts.low{border-color:var(--red);background:#FFF1EC}
#hearts.hit{animation:hhit .5s}
@keyframes hhit{15%{transform:translateX(-4px)}35%{transform:translateX(4px)}55%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.hrt{position:relative;width:20px;height:20px}
.hrt svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hrt .full{display:block}
.hrt.gone .full{display:none}
.hrt .hl,.hrt .hr{transform-box:fill-box}
.hrt.brk .hl{animation:hbl .75s ease-in forwards}
.hrt.brk .hr{animation:hbr .75s ease-in forwards}
@keyframes hbl{0%{transform:none;opacity:1}25%{transform:translate(-2px,-1px) rotate(-8deg)}100%{transform:translate(-9px,14px) rotate(-40deg);opacity:0}}
@keyframes hbr{0%{transform:none;opacity:1}25%{transform:translate(2px,-1px) rotate(8deg)}100%{transform:translate(9px,14px) rotate(40deg);opacity:0}}
.hrt.last{animation:hlast .7s ease-in-out infinite}
#hearts .fat{font-style:normal;font-size:9.5px;font-weight:900;color:#fff;background:#B4402E;border-radius:99px;padding:1px 5px;margin-left:3px;white-space:nowrap;letter-spacing:-.02em}
@keyframes hlast{50%{transform:scale(1.22)}}

/* Hint */
#hint{position:fixed;left:calc((100vw - var(--trayW,0px))/2);top:var(--hintTop,calc(104px + env(safe-area-inset-top)));transform:translate(-50%,-6px);z-index:6;background:var(--ink);color:var(--paper);
  font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:16px;opacity:0;transition:opacity .2s,transform .2s,top .2s;pointer-events:none;width:max-content;max-width:calc(100vw - var(--trayW,0px) - 24px);text-align:center;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;box-shadow:0 6px 18px rgba(35,38,43,.18)}
#hint.on{opacity:1;transform:translate(-50%,0)}
#hint.warn{background:var(--red)}
#hint.low{top:auto!important;bottom:calc(84px + env(safe-area-inset-bottom));max-height:56px;overflow:hidden}

/* Tray: 차량기지 띠 한 줄(노선마다 차고 선로, 서 있는 차량 대수로 읽는다) */
#tray{position:fixed;left:0;right:0;bottom:0;padding:4px 8px calc(6px + env(safe-area-inset-bottom));z-index:5;background:linear-gradient(rgba(242,237,227,0),var(--paper) 30%)}
/* 바닥은 두 채의 건물: 왼쪽 '자재 창고'(톱니 지붕, 열차·장치), 오른쪽 '차고'(노선마다 아치 문) */
#depot{display:flex;gap:7px;justify-content:center;align-items:flex-end;height:62px;padding:0;margin:0 auto;width:max-content;max-width:100%;background:none;border:0}
#depot .bay{position:relative;display:flex;gap:3px;align-items:stretch;height:52px;padding:3px;border-radius:4px 4px 11px 11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 rgba(0,0,0,.08),0 6px 12px rgba(35,38,43,.12)}
#depot .bay::before{content:'';position:absolute;left:-2px;right:-2px;top:-8px;height:9px;pointer-events:none}
#depot .bay.res{background:linear-gradient(#E8D9BC,#DCC9A6);border:1px solid #C8B28A}
#depot .bay.res::before{background:linear-gradient(135deg,#9C7B4E 0 50%,transparent 50%) 0 0/12px 9px repeat-x;filter:drop-shadow(0 1px 0 rgba(0,0,0,.12))}
#depot .bay.gar{background:linear-gradient(#DCE1E6,#C9D0D8);border:1px solid #AEB7C2}
#depot .bay.gar::before{left:6px;right:6px;top:-6px;height:6px;border-radius:8px 8px 0 0;background:#56606E}
#depot .bay>*{position:relative;flex:0 1 46px;min-width:36px;height:100%;border-radius:9px;background:linear-gradient(#FBF8F1,#F1ECE1);border:1px solid #DCD4C3;overflow:hidden;touch-action:none}
#depot .bay.gar>.trk{border-radius:16px 16px 5px 5px}
#depot .bay.gar>.trk .nm{top:6px}
#depot .nm{position:absolute;left:0;right:0;top:4px;font-size:10.5px;font-weight:900;letter-spacing:-.03em;text-align:center;color:var(--c,#8C877B);white-space:nowrap}
#depot .rail{position:absolute;left:3px;right:3px;bottom:11px;height:7px;
  background:linear-gradient(var(--c,#A9A292),var(--c,#A9A292)) 0 0/100% 1.6px no-repeat,linear-gradient(var(--c,#A9A292),var(--c,#A9A292)) 0 100%/100% 1.6px no-repeat,repeating-linear-gradient(90deg,rgba(110,96,74,.38) 0 2px,transparent 2px 6px)}
#depot .cars{position:absolute;left:3px;right:3px;bottom:13px;height:12px;display:flex;justify-content:center;align-items:flex-end}
.car{flex:none;width:14px;height:9px;border-radius:3px 5px 5px 3px;background:var(--c);position:relative;margin:0 .5px;
  box-shadow:inset 0 -2.6px 0 rgba(0,0,0,.28),inset 0 1.2px 0 rgba(255,255,255,.4),0 2px 1.5px rgba(30,24,48,.28)}
.car::after{content:"";position:absolute;left:2px;right:4px;top:2.4px;height:2.4px;border-radius:1px;background:rgba(255,255,255,.85)}
.car.ex{box-shadow:inset 0 -2.6px 0 #C99A3B,inset 0 1.2px 0 rgba(255,255,255,.4),0 2px 1.5px rgba(30,24,48,.28)}
.cars.tight .car{margin-left:-6px}.cars.tight .car:first-child{margin-left:0}
#depot .more{position:absolute;right:3px;top:15px;font-size:9px;font-weight:900;color:var(--ink2)}
#depot .trk .fullb{position:absolute;right:2px;top:14px;font-size:8.5px;font-weight:900;color:#fff;background:var(--c);border-radius:4px;padding:0 3px;line-height:12px}#depot .trk.full .more{display:none}
.bus3{flex:none;width:16px;height:9px;border-radius:3px;background:#E8A33A;position:relative;margin-left:-4px;box-shadow:inset 0 -2.6px 0 rgba(0,0,0,.25),inset 0 1.2px 0 rgba(255,255,255,.45),0 2px 1.5px rgba(30,24,48,.28)}
.bus3:first-child{margin-left:0}
.bus3::after{content:"";position:absolute;left:2px;right:2px;top:2.2px;height:2.4px;background:repeating-linear-gradient(90deg,#FFF8EA 0 2.6px,transparent 2.6px 3.6px)}
#depot .yard{flex:0 1 66px;min-width:54px}
#depot .free .rail{background:repeating-linear-gradient(90deg,var(--c) 0 3px,transparent 3px 6px) 0 0/100% 1.6px no-repeat,repeating-linear-gradient(90deg,var(--c) 0 3px,transparent 3px 6px) 0 100%/100% 1.6px no-repeat;opacity:.7}
#depot .free{background:transparent;border-style:dashed}
#depot .lock{flex:0 1 30px;min-width:26px;background:transparent;border-style:dashed;display:grid;place-items:center;color:#C9C2B3}
#depot .lock svg{width:13px;height:13px}
#depot .zero{opacity:.45}
#depot .arm{background:var(--ink);border-color:var(--ink)}
#depot .arm .nm{color:#fff}
#depot.lit .trk:not(.free){animation:arm .9s infinite}
#depot.shake{animation:shake .32s}
#depot .gain{animation:gain .6s 2}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes arm{50%{box-shadow:0 0 0 3px rgba(35,38,43,.18)}}
@keyframes gain{30%{transform:scale(1.12);background:#FFF3D6}}
/* 안내요원: 승강장에 선 작은 모형. 준비되면 러시 때 맥박, 쓰는 중엔 남은 시간 막대 */
#depot .cw{position:absolute;right:2px;top:14px;width:12px;height:14px;display:grid;place-items:center}
#depot .cw svg{width:12px;height:14px}
#depot .cr-ready .cw{filter:drop-shadow(0 0 2px #FFD34D)}
#depot .cr-go{animation:crgo .8s infinite}
@keyframes crgo{50%{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(255,211,77,.7)}}
#depot .cr-on{box-shadow:inset 0 0 0 2px #FFD34D}
#depot .trk .hv{position:absolute;left:2px;top:4px;width:14px;height:14px;display:grid;place-items:center;pointer-events:none}
#depot .trk .hv svg{width:14px;height:14px;display:block}
#depot .trk.hasHv .nm{padding-left:13px}
#depot .trk.hell{background:linear-gradient(#FDE4DF,#F6C9C0);border-color:#E39A8D;animation:hellk 1.1s infinite}
#depot .trk.heaven{background:linear-gradient(#EAF7FE,#CDEBFA);border-color:#8FCBEA}
#depot .trk.hell .hv{animation:hellf .5s infinite}
#depot .trk.flip{animation:hvflip .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes hvflip{0%{transform:scale(1)}30%{transform:scale(1.22) rotate(-4deg);box-shadow:0 0 0 4px rgba(59,163,217,.6)}60%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes hellk{50%{box-shadow:0 0 0 2px rgba(214,75,58,.45)}}
@keyframes hellf{25%{transform:translateX(-.8px)}75%{transform:translateX(.8px)}}
#depot .trk .cf{position:absolute;left:4px;right:4px;bottom:2px;height:7px;border-radius:3.5px;transform-origin:left center;transform:scaleX(var(--cf,1));transition:transform .4s,background .4s;box-shadow:0 0 0 .6px rgba(0,0,0,.12)}
#depot .cr-on i.k{position:absolute;left:4px;right:4px;bottom:10px;height:2px;border-radius:1px;background:#E0A800;transform-origin:left center;transform:scaleX(var(--k,1))}
#depot .cr-spent .cw{opacity:.4}
.hvj{background:linear-gradient(135deg,#EAF7FE,#FDEBE7);border:1.5px solid #BFE3F5;border-radius:12px;padding:8px 10px;margin:0 0 7px;text-align:center}
.hvj .hvh{font-size:13px;font-weight:700;color:#2B4A63;line-height:1.45;word-break:keep-all}.hvj .hvh b{font-size:16px;color:#1F7FB8}.hvj .hvh b.hl{color:#C0412F}
.hvj .hvh em{display:inline;font-style:normal;font-size:11.5px;font-weight:900;margin-left:2px;background:none;border:0;padding:0}.hvj .hvh .hvup{color:#2B9A5A}.hvj .hvh .hvdn{color:#C0412F}
/* 오너 요청(10-21) 출근길 신문: 하루 끝 상태로 쓴 기사 한 장(언론사는 모두 가상) */
.news{background:#FBF7EE;border:1.5px solid #D9CFBC;border-radius:10px;padding:7px 10px 8px;margin:0 0 7px;text-align:left;box-shadow:0 2px 0 rgba(0,0,0,.04);animation:newsIn .5s ease-out both}
@keyframes newsIn{from{opacity:0;transform:translateY(6px) rotate(-1deg)}to{opacity:1;transform:none}}
.news .nwh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:10.5px;font-weight:800;color:#8A7F6A;border-bottom:2px solid #23262B;padding-bottom:3px;margin-bottom:5px}
.news .nwh b{font-family:'Nanum Myeongjo','AppleMyungjo',Georgia,serif;font-size:13.5px;color:#23262B;font-weight:900}
.news .nwt{font-family:'Nanum Myeongjo','AppleMyungjo',Georgia,serif;font-size:15.5px;font-weight:900;line-height:1.35;color:#23262B;word-break:keep-all}
.news .nwt i{font-family:inherit;font-style:normal;font-size:10.5px;font-weight:900;margin-right:5px;vertical-align:2px;border:1.5px solid currentColor;border-radius:4px;padding:0 4px;color:#C0412F}
.news .nwt i.g{color:#1F7FB8}
.news ul{margin:5px 0 0;padding:0;list-style:none;font-size:12px;line-height:1.5;color:#4A4F57;font-weight:600;word-break:keep-all}
.news li:before{content:'· ';color:#B0A58E}
.news li em{font-style:normal;font-weight:800;color:#8A7F6A;font-size:11px}
.news .nwb{margin-top:6px;font-size:12px;font-weight:800;color:#7A5200;background:#FFF3CF;border-radius:7px;padding:4px 8px;word-break:keep-all}
.hvj .hvl{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 5px;margin-top:5px;font-size:11.5px;font-weight:800}
.hvj .hvl span{display:inline-flex;align-items:center;gap:3px;border-radius:10px;padding:1px 7px 1px 2px;background:#fff;border:1.5px solid var(--c)}
.hvj .hvh .hva,.hvj .hvh .hvb{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}.hvj .hvh .hvb b{color:#2E8A55}.hvj .hvh svg{flex:none;vertical-align:middle}
.hvj .hvl b.hvok{color:#2B9A5A;font-size:12px;margin-left:1px}
.hvj .hvl span svg{flex:none}.hvj .hvl i{font-style:normal;color:var(--muted);font-weight:700;width:100%}
.hvbig{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 4px;padding:8px 10px;border-radius:14px;background:linear-gradient(135deg,#DFF3FD,#F4FBFF);border:1.5px solid #9FD4F0}
.hvbig .n{font-size:34px;font-weight:900;color:#1F7FB8;letter-spacing:-.04em;line-height:1}.hvbig .l{text-align:left;font-size:12px;font-weight:700;color:#3B5A72;line-height:1.35}.hvbig .l b{font-size:13.5px;color:#1F4F70}
.stmps{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:center;justify-content:center;margin:8px 0 2px;font-size:11.5px;line-height:1.3}
.stmps>b{width:100%;text-align:center;font-size:12.5px}
.stmps span{border:1.6px solid var(--zc);color:var(--zc);border-radius:11px;padding:1px 7px;font-weight:800;transform:rotate(-2.5deg);background:rgba(255,255,255,.6)}
.stmps em{width:100%;text-align:center;font-style:normal;color:var(--muted);font-size:11px;margin-top:2px}
#pop .lcf{margin:2px 0 4px;font-size:12px}
#depot .tool{flex:0 1 40px;min-width:34px;display:flex;align-items:center;justify-content:center;gap:0}
#depot .tool .mdl{width:15px;height:15px;margin-left:-6px;filter:drop-shadow(0 1.6px 1px rgba(30,24,48,.3))}
#depot .tool .mdl:first-child{margin-left:0}
#depot .bay>.trk,#depot .bay>.tool{flex:0 0 var(--iw,46px);min-width:0}#depot .bay>.yard{flex:0 0 calc(var(--iw,46px) + 16px);min-width:0}#depot .bay>.lock{flex:0 0 26px;min-width:0}#depot.many .nm{font-size:10px;overflow:hidden;text-overflow:clip}
#depot button{color:inherit}
/* R3: 차고는 화면 오른쪽 세로 가장자리 — 노선마다 지도 쪽으로 뻗은 차고 선로가 위아래로 쌓인 '열차 차고'(하단 바 없음) */
#tray{left:auto;right:0;top:var(--trayT,100px);bottom:0;width:56px;padding:0 0 calc(10px + env(safe-area-inset-bottom)) 0;background:none;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
#depot .bay>*{height:auto;min-width:0}
#depot{flex-direction:column;align-items:flex-end;justify-content:flex-end;height:auto;width:100%;gap:13px;pointer-events:auto}
#depot .bay{flex-direction:column;width:52px;height:auto;padding:3px 0 3px 3px;border-radius:12px 0 0 12px;border-right:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),-3px 0 0 rgba(0,0,0,.06),-6px 4px 12px rgba(35,38,43,.12)}
#depot .bay::before{left:-7px;right:auto;top:-1px;bottom:-1px;width:8px;height:auto}
#depot .bay.res::before{background:linear-gradient(225deg,#9C7B4E 0 50%,transparent 50%) 0 0/8px 11px repeat-y;filter:drop-shadow(-1px 0 0 rgba(0,0,0,.12))}
#depot .bay.gar::before{left:-5px;top:8px;bottom:8px;width:5px;border-radius:6px 0 0 6px}
#depot .bay>.trk,#depot .bay>.tool{flex:0 0 var(--ih,44px);width:auto;min-height:0;border-radius:10px 3px 3px 10px;border-right:0}
#depot .bay>.yard{flex:0 0 calc(var(--ih,44px) + 6px);width:auto;border-radius:10px 3px 3px 10px;border-right:0}
#depot .bay>.lock{flex:0 0 var(--ih,44px);width:auto;border-radius:10px 3px 3px 10px;border-right:0}#depot .bay>.lock.blank{opacity:.45}
#depot .bay.res{flex-direction:column-reverse}
#depot .bay.gar>.trk{border-radius:14px 3px 3px 14px}
/* R18 장치 칸 44px · 빈/잠긴 차고 칸 24px (08-ui renderTray) */
#depot .bay>.tool{flex-basis:var(--it,var(--ih,44px))}#depot .bay>.trk.free,#depot .bay>.lock{flex-basis:var(--if,var(--ih,44px))}
#depot .bay.gar>.trk .nm{top:4px}
#depot .rail{left:5px;right:0;bottom:9px}
#depot .cars{left:5px;right:2px;bottom:11px;justify-content:flex-start}
@media (max-height:519px){#depot{gap:7px}#depot .bay>.yard{flex-basis:calc(var(--ih,44px) + 2px)}#tray{overflow:hidden}}
/* 오너 요청(10-20): 가로 화면은 높이가 낮아 한 줄 차고 칸이 24px까지 줄고 넘쳐 위 칸이 숨었다 → 도구 칸과 노선 칸을 두 줄로 나란히(지도는 높이에 맞춰 그려져 오른쪽 폭은 남는다) */
#depot.two{flex-direction:row;align-items:flex-end;gap:12px}#tray.two{width:118px}
#depot.shake{animation:shakeV .32s}
@keyframes shakeV{20%{transform:translateY(-6px)}40%{transform:translateY(5px)}60%{transform:translateY(-3px)}80%{transform:translateY(2px)}}
#undoToast{position:fixed;left:calc(50% - 28px);bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,8px);z-index:7;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border-radius:14px;padding:0 4px 0 12px;height:52px;font-size:12.5px;font-weight:700;box-shadow:0 8px 20px rgba(35,38,43,.25);white-space:nowrap}
#fitBtn{position:fixed;left:10px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:5;display:none;align-items:center;gap:5px;height:44px;padding:0 12px 0 10px;border-radius:12px;background:#FBF8F2;border:1px solid var(--hair);box-shadow:0 4px 12px rgba(35,38,43,.12);font-size:12.5px;font-weight:800;color:var(--ink)}
#fitBtn svg{width:16px;height:16px}
#commBtn{position:fixed;left:10px;bottom:calc(120px + env(safe-area-inset-bottom));z-index:5;display:none;align-items:center;gap:7px;min-height:44px;max-width:calc(100vw - 90px);padding:5px 13px 5px 10px;border-radius:14px;background:linear-gradient(180deg,#FFE7AE,#F3C46B);border:1px solid #C99A3B;box-shadow:0 5px 0 #B98A2E,0 9px 16px rgba(120,80,10,.25);font-size:12.5px;font-weight:800;color:#4A3208;text-align:left;line-height:1.15}
#commBtn svg{width:18px;height:18px;flex:none}
#commBtn span{display:flex;flex-direction:column;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#commBtn small{font-size:10.5px;font-weight:800;color:#8A5A00}
#commBtn.on{display:flex;animation:popin .18s ease-out}
#commBtn.thru{pointer-events:none;opacity:.55;filter:saturate(.8)}
#fitBtn.thru{pointer-events:none;opacity:.35}
#commBtn.grey{background:linear-gradient(180deg,#F1EEE7,#DCD7CC);border-color:#B9B2A3;box-shadow:0 5px 0 #A8A192,0 9px 16px rgba(60,50,30,.15);color:#5B5446}
#commBtn.grey small{color:#7A7262}
#confirm .cpl{display:flex;flex-direction:column;gap:5px;margin:7px 0 6px}
#confirm .cpo{display:flex;align-items:center;gap:8px;min-height:44px;padding:5px 8px;border-radius:11px;background:#fff;border:1.5px solid var(--hair);text-align:left;font:inherit;color:var(--ink2)}
#confirm .cpo.on{border-color:#C99A3B;background:#FFF6DF;box-shadow:0 0 0 2px rgba(243,196,107,.45)}
#confirm .cpo .cpn{flex:none;width:22px;height:22px;border-radius:50%;color:#fff;font-style:normal;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
#confirm .cpo span{display:flex;flex-direction:column;min-width:0;gap:2px}
#confirm .cpo b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#confirm .cpo em{font-style:normal;display:flex;flex-wrap:wrap;gap:3px}
#confirm .cpo u{text-decoration:none;font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:7px;background:#EFEBE2;color:#5B5446}
#confirm .cpo u.rd{background:#FBE3DE;color:#B4402E}
#confirm .cpo u.am{background:#FCEFD6;color:#9A6512}
#confirm .cpo u.bl{background:#E2EAF7;color:#2F4F8F}
#confirm .cpo u.gn{background:#E0F2E6;color:#22804A}
#commBtn:active{transform:translateY(3px);box-shadow:0 2px 0 #B98A2E,0 4px 8px rgba(120,80,10,.2)}
#fitBtn.on{display:flex}
#fitBtn:not(.user):not(.all){width:44px;padding:0;justify-content:center}
#fitBtn:not(.user):not(.all) span{display:none}
#fitBtn.user{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#undoToast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#undoToast #redoT{display:none}
#undoToast.redo #redoT{display:inline-flex;align-items:center;gap:4px}
#undoToast.redo #undoT{display:none}
#undoToast button{height:44px;padding:0 12px;border-radius:10px;background:#fff;color:var(--ink);font-weight:800;font-size:13px}
/* 다리·통로 확인 상자: 손가락 위쪽에 '놓기 ✓ / 취소 ✕' */
#confirm{position:fixed;z-index:9;display:none;background:var(--paper2);border:1px solid var(--hair);border-radius:14px;padding:9px;box-shadow:0 12px 28px rgba(35,38,43,.25);width:min(290px,calc(100vw - 20px))}
#confirm.on{display:block;animation:popin .14s ease-out}
#confirm .cm{font-size:12.5px;font-weight:700;color:var(--ink2);line-height:1.4;margin:0 2px 7px}
#confirm .cm b{color:var(--ink)}
#confirm .cm .w{color:#B4402E}
#confirm .cb{display:flex;gap:6px}
#confirm .cb button{flex:1;height:44px;border-radius:11px;font-weight:800;font-size:14px;background:#fff;border:1px solid var(--hair)}
#confirm .cb .yes{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#confirm .cb .yes.red{background:#B4402E;border-color:#B4402E}
#ghost{position:fixed;z-index:9;width:40px;height:40px;margin:-48px 0 0 -20px;border-radius:12px;background:var(--ink);color:var(--paper);display:none;place-items:center;pointer-events:none;box-shadow:0 8px 20px rgba(35,38,43,.3)}
#ghost.on{display:grid}
#ghost svg{width:24px;height:24px}
#shield{position:absolute;left:14px;top:calc(82px + env(safe-area-inset-top));font-size:10.5px;font-weight:800;color:#1E7A45;background:#E3F4E8;border:1px solid #9BD3AE;border-radius:99px;padding:1px 7px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
#shield.on{opacity:1}
#shield.pen{color:#B4402E;background:#FBE7E3;border-color:#E9A79B}

/* popover */
#pop{position:fixed;z-index:8;width:min(320px,calc(100vw - 16px));background:var(--paper2);border:1px solid var(--hair);border-radius:14px;padding:10px;box-shadow:0 10px 30px rgba(35,38,43,.18);display:none;min-width:200px}
#pop.on{display:block;animation:popin .14s ease-out}
@keyframes popin{from{transform:translateY(6px);opacity:0}}
#pop h4{margin:0 0 2px;font-size:15px;display:flex;align-items:center;gap:8px;padding-right:92px;min-height:30px}
#pop h4 i{width:14px;height:14px;border-radius:50%;display:inline-block}
#pop p{margin:0 0 8px;font-size:12px;color:var(--muted)}
#pop .sinfo{margin:2px 0 8px;font-size:12.5px;line-height:1.4;color:var(--ink2,#4A4F57);font-weight:600}
svg.gi{width:15px;height:15px;vertical-align:-3px;margin-right:4px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#pop .acts{display:flex;flex-wrap:wrap;gap:6px}
#pop .acts button{flex:1 1 45%;min-height:44px;padding:6px 8px;border-radius:10px;background:#fff;border:1px solid var(--hair);font-size:13px;font-weight:700}
#pop .delb{position:absolute;right:8px;top:8px;height:40px;padding:0 10px;border-radius:10px;background:#fff;border:1px solid var(--hair);font-size:12px;font-weight:800;color:var(--red);max-width:150px;line-height:1.15}
#pop .delb.arm{background:var(--red);color:#fff;border-color:var(--red)}
#pop .acts button.del{color:var(--red)}
/* R17 붉은 일(끊기·빼기)은 0.3초 꾹: 단추 바닥에서 먹빛 인장색이 차오른다 */
#pop .acts button.del{position:relative;overflow:hidden}
#pop .acts button.del::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(192,65,47,.16);pointer-events:none}
#pop .acts button.del.hold::before{width:100%;transition:width .3s linear}
#pop .acts button.del::after{content:'꾹';position:absolute;right:6px;top:4px;font-size:9.5px;font-weight:800;color:#8C877B;letter-spacing:0}
#pop .acts button:disabled{opacity:.35}

/* overlays */
.ov{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(242,237,227,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.ov.on{display:flex;animation:fade .2s ease-out}
.ov.dark{background:rgba(24,27,33,.5)}
@keyframes fade{from{opacity:0}}
.card{width:min(100%,370px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--paper2);border-radius:20px;padding:22px 18px 18px;box-shadow:0 20px 50px rgba(35,38,43,.22);border:1px solid var(--hair)}
.ov.on .card{animation:rise .26s cubic-bezier(.2,.9,.3,1.2)}
/* 뜬 직후 0.9초는 버튼을 막는다(드래그하던 손가락이 바로 누르지 않게) */
.ov.guard .card{pointer-events:none}
.ov .card .btn,.ov .card .up,.ov .card .goalpick button{transition:opacity .25s}
.ov.guard .card .btn,.ov.guard .card .up,.ov.guard .card .goalpick button{opacity:.45}
@keyframes rise{from{transform:translateY(16px) scale(.98);opacity:0}}
.kicker{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em}
.card h1{margin:4px 0 6px;font-size:30px;letter-spacing:-.03em;font-weight:900}
.card h2{margin:4px 0 10px;font-size:21px;letter-spacing:-.02em;font-weight:800;line-height:1.3}
.card p.sub{margin:0 0 16px;color:var(--ink2);font-size:14px;line-height:1.5}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:14px;font-size:16px;font-weight:800;background:var(--ink);color:var(--paper);margin-top:8px}
.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--hair)}
.btn.ghost{background:transparent;color:var(--ink2);height:44px;font-weight:700;font-size:14px}
.btns2{display:flex;gap:8px}.btns2 .btn{flex:1}
.nsum{font-size:12.5px;color:var(--ink2);font-weight:600;margin:-2px 0 6px}
.fnm summary{font-size:11px;color:var(--muted);cursor:pointer;margin-top:3px}
.rcity{margin-top:6px}.rcity .btn{padding-left:4px;padding-right:4px;font-size:13px}
#stDio{display:block;width:calc(100% + 36px);height:118px;margin:-22px -18px 10px;border-radius:20px 20px 0 0}
.tagl{margin:-4px 0 8px;font-size:min(15px,3.9vw);font-weight:800;color:#9A6A00;letter-spacing:-.02em;white-space:nowrap}   /* R8 서사 한 줄(역할 + 이유) — 344px에서도 한 줄 */
.badges{display:flex;gap:6px;margin:2px 0 10px}
.badges i{height:22px;padding:0 7px;border-radius:6px;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800;font-size:11.5px}
.legend{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin:0 0 14px}
.legend div{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);font-weight:600}
.legend svg{width:20px;height:20px;flex:none}
.best{font-size:12.5px;color:var(--muted);text-align:center;margin-top:10px}
.lvls{display:flex;gap:6px;margin:0 0 6px}
.lvls button{flex:1;padding:8px 4px 7px;border-radius:12px;background:#fff;border:1.5px solid var(--hair);text-align:center;line-height:1.15}
.lvls button b{display:block;font-size:15px;font-weight:800}
.lvls button span{display:block;font-size:10.5px;color:var(--muted);font-weight:700;margin-top:2px}
.lvls button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.lvls button.on span{color:#C9C2B3}
.lvls button.lock{opacity:.5}
.lvnote{font-size:12px;color:var(--ink2);margin:0 0 10px;min-height:17px;text-align:center}
.clear{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:#fff;background:#2BA35A;border-radius:10px;padding:9px 11px;margin-bottom:8px}
#depot .yard.nudge{animation:nudge .9s ease-in-out}
@keyframes nudge{0%,100%{transform:none}12%{transform:translateY(-5px) rotate(-4deg)}24%{transform:translateY(0) rotate(3deg)}36%{transform:translateY(-4px) rotate(-3deg)}48%{transform:none}60%{transform:translateY(-3px)}72%{transform:none}}
#bRestart.arm{background:#D8432F;color:#fff;border-color:#D8432F;font-size:13px}
#ovPause #bResume{margin-bottom:14px}
.cityday{font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:#14917F;border-radius:99px;padding:2px 7px;margin-left:6px;vertical-align:3px}
.newel{font-size:12.5px;font-weight:800;color:#8A5A00;background:#FFF0C8;border-radius:8px;padding:6px 9px;margin-top:8px}
.forecast{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:10px 12px;margin:10px 0 12px}
.forecast .fh{font-size:12px;color:var(--muted);font-weight:700}
.forecast .fe{font-size:15px;font-weight:800;margin:2px 0}
.forecast .fd{font-size:12.5px;color:var(--ink2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.forecast .fd.open{-webkit-line-clamp:unset}
.forecast .fn{font-size:12px;color:#B4402E;font-weight:700;line-height:1.35;margin-top:3px}
.forecast canvas{display:block;width:100%;height:34px;margin-top:6px}
.gift{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink2);background:#FFF6E2;border-radius:10px;padding:8px 10px}
.gift svg{width:18px;height:18px}
.gift.miss{background:#EFEBE3;color:var(--muted)}
.gift{flex-wrap:wrap;gap:4px 12px}.gift span{display:flex;align-items:center;gap:5px}
.moodl{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;font-size:13px;font-weight:700;color:#7A5200;background:#FFF3CF;border-radius:10px;padding:7px 10px;margin:0 0 6px}.moodl b{font-size:15px;color:#9A6A00}.moodl em{font-style:normal;font-size:11.5px;color:#5E6676;display:flex;align-items:center;gap:3px;flex-basis:100%}.moodl svg{flex:none}
.clear svg{flex:none}
.pickh{font-size:13px;font-weight:800;margin:4px 0 6px}
.up{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 12px;border-radius:14px;background:#fff;border:1.5px solid var(--hair);margin-top:7px}
.up:hover{border-color:var(--ink)}
.up .ic{width:42px;height:42px;border-radius:12px;background:var(--paper);display:grid;place-items:center;flex:none}
.up .ic svg{width:26px;height:26px}
.up b{display:block;font-size:15px}
.up span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;line-height:1.35}
.big{font-size:46px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05}
.big small{font-size:20px;font-weight:800}
.stats{display:flex;gap:6px;margin:12px 0 4px}
.stats div{flex:1;background:#fff;border:1px solid var(--hair);border-radius:12px;padding:8px 6px;text-align:center}
.stats b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.stats span{font-size:11px;color:var(--muted);font-weight:700}
.newrec{display:inline-block;background:var(--gold);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;border-radius:99px;margin-left:6px;vertical-align:middle;animation:pulse2 1s infinite}
@keyframes pulse2{50%{transform:scale(1.08)}}
.why{font-size:13px;color:var(--ink2);margin:6px 0 0;line-height:1.45}
.why svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}
.goalbar{margin:8px 0 2px}.goalbar .gbt{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:700}.goalbar .gbt b{font-size:15px;color:var(--ink);font-weight:900}
.goalbar .gbb{position:relative;height:10px;border-radius:6px;background:rgba(35,38,43,.1);margin-top:4px;overflow:hidden}.goalbar .gbb i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,#E8A33A,#D8432F)}
.goalbar .gbb s{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.8)}
.again2{display:flex;gap:8px;margin-top:10px}.again2 .btn{flex:1;margin:0;padding-left:6px;padding-right:6px;font-size:14px}
.goalpick{display:flex;gap:6px;margin-top:8px}
.goalpick button{flex:1;padding:7px 6px;border-radius:10px;border:1.5px solid var(--hair);background:var(--paper2);text-align:center;line-height:1.2}
.goalpick button b{display:block;font-size:13px}
.goalpick button span{display:block;font-size:10.5px;color:var(--muted);font-weight:700;margin-top:1px}
.goalpick button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.goalpick button.on span{color:#C9C2B3}
.goalpick button.risk.on{border-color:#B4402E;background:#B4402E}
.goalpick button.risk.on span{color:#FFD9CF}
.up .tag{display:inline-block;font-size:10px;font-weight:800;color:#8A5A00;background:#FFF0C8;border-radius:5px;padding:1px 5px;margin-left:5px;vertical-align:2px}
.paper{background:#FFFDF8;border:1px solid var(--hair);border-radius:12px;padding:10px 12px 8px;margin:6px 0 4px}
.paper .mast{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;color:var(--muted);border-bottom:2px solid var(--ink);padding-bottom:4px;letter-spacing:.02em}
.paper .head{font-size:19px;font-weight:900;letter-spacing:-.03em;line-height:1.25;margin:7px 0 3px}
.paper .deck{font-size:12.5px;color:var(--ink2);line-height:1.4}
.paper canvas{display:block;width:100%;height:46px;margin-top:6px}
.paper .brk{font-size:11.5px;color:#B4402E;font-weight:700;margin:2px 0 3px;line-height:1.4}
.scoreline{display:flex;align-items:baseline;gap:6px;margin-top:8px;font-size:13px;color:var(--ink2);font-weight:700}
.scoreline b{font-size:22px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.rkask{margin-top:6px}
/* 도시 고르기(자유 모드) */
.rtip{font-size:13px;font-weight:700;color:#23262B;background:#FFF4DC;border:1.5px dashed #C99A3B;border-radius:10px;padding:6px 10px;margin:4px 0 6px;text-align:center;line-height:1.35;word-break:keep-all;text-wrap:balance}.rtip b{color:#8A6A10;margin-right:4px}
.rhead{font-size:14px;font-weight:800;color:var(--ink2);text-align:center;margin:2px 0 4px;line-height:1.35;word-break:keep-all;text-wrap:balance}
.why,.wkn,.ct,.fn,.nsum,.moodl{word-break:keep-all}
.rmore{margin:4px 0 8px}.rmore>summary{list-style:none;cursor:pointer;text-align:center;font-size:12.5px;font-weight:800;color:var(--muted);padding:10px 0;min-height:44px;box-sizing:border-box}
.rmore>summary::-webkit-details-marker{display:none}.rmore>summary::after{content:' ▾'}.rmore[open]>summary::after{content:' ▴'}
#stMore{margin:10px 0 0;text-align:left}
#stMore>summary{list-style:none;cursor:pointer;text-align:center;font-size:12.5px;font-weight:800;color:var(--muted);padding:10px 0;min-height:44px;box-sizing:border-box}
#stMore>summary::-webkit-details-marker{display:none}
#stMore>summary::after{content:' ▾'}
#stMore[open]>summary::after{content:' ▴'}
#stMore p.sub{margin:12px 0 4px;font-size:13px}
.cityh{font-size:11.5px;font-weight:800;color:var(--muted);margin:12px 0 5px;text-align:center}
.cities{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.cities button{padding:6px 9px;border-radius:99px;background:#fff;border:1.5px solid var(--hair);font-size:12.5px;font-weight:800;color:var(--ink)}
.cities button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.cities button.lock{opacity:.45}
.citynote{font-size:11.5px;color:var(--ink2);text-align:center;min-height:15px;margin-top:5px}
#bDaily{gap:10px;height:auto;min-height:58px;padding:8px 14px}
#bDaily canvas.sil{width:20px;height:32px;border-radius:4px;flex:none}
#bDaily span{word-break:keep-all;min-width:0;line-height:1.3}
#bDaily small{display:inline-block;font-size:12px;font-weight:700;opacity:.75;margin-left:4px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
#stAlbum:empty{display:none}#stAlbum{margin:0 0 10px}
#stAlbum .alh{font-size:11.5px;font-weight:800;color:var(--muted);text-align:left;margin:0 2px 4px;display:flex;justify-content:space-between}
#stAlbum .alr{display:flex;gap:6px}
#stAlbum .alc{flex:1;min-width:0;border:1px solid var(--hair);border-radius:10px;background:#FBF8F2;padding:3px 3px 4px;cursor:pointer;font:inherit;color:inherit}
#stAlbum .alc.no{opacity:.45;cursor:default}
#stAlbum .alc canvas{display:block;width:100%;height:58px;border-radius:7px}
#stAlbum .alc b{display:block;font-size:11px;font-weight:900;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stAlbum .alc s{display:block;text-decoration:none;font-size:10.5px;letter-spacing:1px;color:#C99A3B;line-height:1.1}
#albCard canvas{display:block;width:100%;height:300px;border-radius:12px;margin:6px 0 8px}
#albCard .als{display:flex;flex-direction:column;gap:4px;text-align:left;font-size:12.5px;font-weight:800;margin:4px 0 10px}
#albCard .als i{font-style:normal;color:#C99A3B;margin-right:4px}#albCard .als .off i{color:#C9C2B3}#albCard .als .off{color:var(--muted)}
#albCard .ald{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:8px}
#albCard .ald button{flex:none;border:1px solid var(--hair);border-radius:99px;background:#fff;font:inherit;font-size:11.5px;font-weight:800;padding:4px 10px}
#albCard .ald button.on{background:var(--ink);color:var(--paper)}
#stBack{margin:0 0 8px;text-align:center;font-size:12.5px;font-weight:800;color:var(--ink2);word-break:keep-all}#stBack:empty{display:none}
#stBack .wk7{display:flex;gap:4px;justify-content:center;margin:5px 0 0}#stBack .wk7 i{width:16px;height:16px;border-radius:5px;border:1.5px dashed #C9C2B3;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:9px;color:#fff}
#stBack .wk7 em{display:flex;flex-direction:column;align-items:center;gap:2px;font-style:normal}#stBack .wk7 u{text-decoration:none;font-size:9.5px;font-weight:800;color:var(--muted);line-height:1}
#stBack .wk7 i.on{background:#C8566A;border:1.5px solid #23262B}#stBack .wk7 i.td{outline:2px solid #E8A33A;outline-offset:1px}#stBack .nw{color:#B07A1E}
#bDaily small.wkr{display:block;margin:2px 0 0;opacity:1;color:#B07A1E;font-size:11.5px;white-space:normal;line-height:1.3;word-break:keep-all}
#bResumeRun{background:#B07A00;height:56px}#bResumeRun[hidden]{display:none}#bResumeRun span{display:flex;flex-direction:column;line-height:1.2}#bResumeRun small{font-size:11.5px;font-weight:700;opacity:.85}
/* 아침 브리핑 카드: 그날 이벤트를 크게 보여 주고 사라진다(누름은 통과) */
#brief{position:fixed;right:10px;top:calc(84px + env(safe-area-inset-top));z-index:12;transform:translateY(-6px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;background:rgba(255,253,248,.86);border:1px solid var(--hair);border-radius:14px;padding:7px 10px 7px;box-shadow:0 8px 18px rgba(35,38,43,.12);text-align:center;width:min(220px,calc(100vw - 20px));word-break:keep-all}
#brief.on{opacity:1;transform:none}
#brief .bk{font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.04em}
#brief .bt{font-size:17px;font-weight:900;letter-spacing:-.03em;line-height:1.2;margin:1px 0 2px}
#brief .bs{font-size:13px;font-weight:800;color:#B4402E;margin-bottom:2px}
#brief .bd{font-size:12.5px;color:var(--ink2);line-height:1.4}
#brief .bg{display:inline-block;margin-top:7px;font-size:12px;font-weight:800;background:var(--ink);color:var(--paper);border-radius:99px;padding:3px 10px}
#brief .bc{display:flex;align-items:center;gap:10px;text-align:left;border-bottom:1px solid var(--hair);padding-bottom:9px;margin-bottom:8px}
#brief .bc canvas{width:40px;height:64px;border-radius:6px;flex:none}
#brief .bc b{display:block;font-size:17px;font-weight:900}
#brief .bc span{display:block;font-size:12px;color:var(--ink2);line-height:1.35}
#brief .bc em{display:block;font-style:normal;font-size:11.5px;font-weight:800;color:#8A5A00;margin-top:2px}
#brief .bw{font-size:11.5px;font-weight:800;color:#B4402E;margin-top:4px}
/* 밤 카드 2단: 출근 일지(지도·하트) → 내일 준비(예보·계약서) */
#nightCard .ns2{display:none}#nightCard.s2 .ns1{display:none}#nightCard.s2 .ns2{display:block}
.nmap{position:relative;margin:6px 0 8px;cursor:pointer}.nmap canvas{display:block;width:100%;height:178px;border-radius:12px;background:var(--paper)}
.nskip{position:absolute;right:8px;bottom:6px;font-size:10.5px;font-weight:800;color:rgba(35,38,43,.55);background:rgba(255,255,255,.75);border-radius:6px;padding:1px 6px;transition:opacity .3s}
#bNext{margin-top:10px}
/* 내일 계약서 3장 */
.cts{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.ct{display:block;width:100%;text-align:left;padding:10px 16px 9px;border-radius:10px;background:#fff;border:1.5px solid var(--hair);border-bottom-width:3px;position:relative;-webkit-mask:radial-gradient(circle 7px at 0 35px,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 35px,#0000 96%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 7px at 0 35px,#0000 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 35px,#0000 96%,#000) right/51% 100% no-repeat}
.ct::after{content:'';position:absolute;left:10px;right:10px;top:34px;border-top:1.5px dashed rgba(140,135,123,.35);pointer-events:none}.ct .cth{padding-bottom:8px;min-height:24px}
.ct.on{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.ct .cth{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ct .cth b{font-size:15px;font-weight:900}
.ct .cth span{font-size:12.5px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct .ctr{font-size:12.5px;color:#1E7A45;font-weight:700;margin-top:3px;line-height:1.35}
.ct .ctp{font-size:12px;color:var(--muted);font-weight:700;margin-top:1px;line-height:1.35}
.ct .cto{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:800;color:var(--muted);margin-top:3px}.ct .cto i{font-style:normal;display:inline-flex;align-items:center;gap:2px;color:var(--oc);font-weight:900}.ct .cto i b,.ct .cto i s{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--oc)}.ct .cto i s{background:rgba(127,127,127,.25)}.ct .cto i s:last-of-type,.ct .cto i b:last-of-type{margin-right:3px}
.ct:not(.on) .ctp{display:none}.ct .pb{display:inline-block;font-size:10px;font-weight:900;color:#B4402E;border:1px solid #E7B4AA;border-radius:5px;padding:0 4px;margin-left:5px;vertical-align:2px}.ct.on .pb{display:none}
.ct.ev{border-color:#E2C78A;background:#FFFBF1}
.ct.ev.on{border-color:#8A5A00;box-shadow:inset 0 0 0 1.5px #8A5A00}
.ct.gb{border-color:#E5B3A8;background:#FFF6F3}
.ct.gb .ctp{color:#B4402E}.ct .pb.hb{color:#fff;background:#C8566A;border-color:#C8566A}.ct.on .pb.hb{display:inline-block}
.gift span.lost{color:#B4402E}
.ct.gb.on{border-color:#B4402E;box-shadow:inset 0 0 0 1.5px #B4402E}
.ct .more{font-style:normal;font-size:11px;color:#1E7A45;border:1px solid #9BD3AE;border-radius:5px;padding:0 4px}
.ct.on .ctr .more{display:none}.ct .ctr .all{display:none}.ct.on .ctr .all{display:inline}
#nightCard.compact .moodl{display:none}
#nightCard:not(.compact) .nsum.dup{display:none}   /* R5: 점수 식은 한 번만(자세한 카드는 아래 웃음 줄, 짧은 카드는 제목 아래) */
.ct .lic{display:inline-block;font-size:10px;font-weight:900;color:#fff;background:#2BA35A;border-radius:5px;padding:1px 5px;margin-left:4px;vertical-align:1px}
#bGo:disabled{opacity:.4}
/* 도시 해금 연출: 실루엣이 펼쳐진다 */
.unl{display:flex;align-items:center;gap:10px;background:#23262B;color:#fff;border-radius:12px;padding:9px 11px;margin-bottom:8px;overflow:hidden}
.unl canvas{width:40px;height:64px;border-radius:6px;flex:none;animation:unfold 1.1s cubic-bezier(.2,.9,.3,1.2) both}
.unl b{display:block;font-size:14px}.unl span{display:block;font-size:12px;opacity:.8;line-height:1.35}
@keyframes unfold{0%{transform:scaleY(0) rotate(-6deg);opacity:0}60%{transform:scaleY(1.08) rotate(1deg);opacity:1}100%{transform:none}}
/* 한 주 진척 막대 */
.wk{display:flex;gap:3px;margin:8px 0 3px;position:relative}
.wk div{flex:1;height:16px;border-radius:4px;background:#ECE6D9;position:relative;overflow:hidden}
.wk div i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);border-radius:4px 0 0 4px}
.wk div u{position:absolute;top:0;bottom:0;width:2px;background:#C99A3B;text-decoration:none}
.wk div em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:800;color:var(--muted);mix-blend-mode:multiply}
.wk div.full em{color:#fff;mix-blend-mode:normal}
.wkn{font-size:11.5px;color:var(--ink2);font-weight:700;text-align:center}
/* 출근 도장 수첩: 최근 14일 */
.stampbk{display:flex;gap:3px;justify-content:center;margin:10px 0 2px}
.stampbk i{width:16px;height:16px;border-radius:50%;border:1.4px dashed #CFC6B2;display:block;position:relative}
.stampbk i.on{border:0;background:#B4402E}
.stampbk i.today{outline:2px solid var(--ink);outline-offset:1px}
.stampn{font-size:11.5px;color:var(--muted);font-weight:700;text-align:center}
.pals{display:flex;gap:5px;justify-content:center;margin-top:5px}
.pals button{height:30px;padding:0 9px;border-radius:99px;border:1.5px solid var(--hair);background:#fff;font-size:11.5px;font-weight:800}
.pals button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* 도시 버튼: 난이도 도장 3칸 */
.cities button .zb{display:block;font-size:9.5px;font-weight:800;color:#8C877B;margin-top:1px}
#zcBar{position:fixed;left:8px;right:8px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:12;display:none;pointer-events:none}
#zcBar .zcs,#zcBar .zt{pointer-events:auto}
#zcBar.on{display:block;animation:popin .2s ease-out}
#zcBar .zt{font-size:13px;font-weight:800;color:#23262B;text-align:center;background:rgba(251,248,242,.94);border-radius:0 0 10px 10px;padding:4px 10px 5px;width:max-content;max-width:100%;margin:6px auto 0;border-radius:10px;white-space:normal;word-break:keep-all;box-shadow:0 4px 10px rgba(35,38,43,.12)}
#zcBar .zcs{display:flex;gap:8px}
#zcBar .pz{display:inline-block;width:9px;height:10px;margin-right:5px;vertical-align:-1px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
#zcBar button{flex:1;min-width:0;min-height:68px;text-align:left;background:#FBF8F2;border:2px solid var(--zc);border-left-width:7px;border-radius:12px;padding:7px 9px;box-shadow:0 4px 0 rgba(35,38,43,.16),0 8px 18px rgba(35,38,43,.18);font-family:inherit;color:#23262B;cursor:pointer}
#zcBar button:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(35,38,43,.16)}
#zcBar b{display:block;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--zc)}
#zcBar .zr{display:block;font-size:10.5px;font-weight:700;color:#7A7D82;margin-top:3px}
#zcBar .za{display:block;font-size:11px;font-weight:700;color:#6E6350}
#zcBar .ztg{font-style:normal;font-size:10.5px;font-weight:900;color:#fff;background:var(--zt);border-radius:4px;padding:1px 5px;margin-right:5px;vertical-align:1px}
#zcBar .zp{display:block;font-size:12px;font-weight:800;color:#23262B;margin-top:3px;line-height:1.3;word-break:keep-all}
#zcBar .zm{display:block;font-size:11.5px;font-weight:700;color:#A0402F;margin-top:1px;line-height:1.3;word-break:keep-all}
#zcBar .zg{display:block;font-size:11px;font-weight:700;color:#5C5F64;margin-top:2px;line-height:1.3}
#zcBar .zg i{font-style:normal;color:#8A5A00}
#zcBar b .zh{font-style:normal;color:#D8432F}#zcBar .za{font-weight:700;color:#6B6E73}#zcBar.picked .za{display:none}
#zcBar button.sel{background:#FFF6E0;transform:translateY(-2px);box-shadow:0 0 0 3px var(--zc),0 8px 18px rgba(35,38,43,.22)}
#zcBar.picked button:not(.sel){opacity:.62}
#zcBar.picked .zt{background:#23262B;color:#FFF4DC}
#stamp.top{top:21%}
#stamp.low{top:auto;bottom:calc(150px + env(safe-area-inset-bottom));transform:translate(-50%,0)}
#stamp.top b,#stamp.low b{font-size:21px;white-space:nowrap}
#stamp b{white-space:nowrap}
.cities button .stp{display:inline-flex;gap:2px;margin-left:5px;vertical-align:1px}
.cities button .stp i{width:6px;height:6px;border-radius:2px;border:1px solid #CFC6B2;display:block}
.cities button .stp i.on{background:#B4402E;border-color:#B4402E}
.cities button.on .stp i{border-color:#8C877B}
.legend.items{grid-template-columns:1fr 1fr 1fr}
.legend.items div{flex-direction:column;gap:2px;font-size:11px;text-align:center}
.legend.items canvas{width:54px;height:30px}

/* R1(재미하네스 10-21) 도시 만족도 띠 + 사고 주의보 선 · 지옥 노선 칸 두 개 */
#sat{position:absolute;right:14px;top:calc(84px + env(safe-area-inset-top));display:flex;align-items:center;gap:5px;height:18px;padding:0 7px;background:var(--paper2);border:1px solid var(--hair);border-radius:3px;font-size:10px;font-weight:800;color:var(--ink2);opacity:0;transition:opacity .25s,border-color .25s,background .25s;font-variant-numeric:tabular-nums;white-space:nowrap}
#sat.on{opacity:1}
#sat .sb{position:relative;width:62px;height:6px;background:#E4DCCB;border-radius:1px;overflow:visible}
#sat .sf{position:absolute;left:0;top:0;bottom:0;background:#B07A00;border-radius:1px;transition:width .4s,background .3s}
#sat.lo .sf{background:#8A8F96}
#sat .sk{position:absolute;left:28.6%;top:-3px;bottom:-3px;width:1.5px;background:#C0412F}
#sat .sh{display:flex;gap:2px}
#sat .sh i{width:6px;height:9px;border:1px solid #C0412F;border-radius:1px;background:transparent}
#sat .sh i.f{background:#C0412F}
#sat.al{border-color:#C0412F;background:#F7E3DE;color:#C0412F;animation:satal 1.6s infinite}
@keyframes satal{50%{box-shadow:0 0 0 2px rgba(192,65,47,.22)}}
/* 노선 칩: 잉크 단선 얼굴 둘레에 사고 위험 고리(0→1) */
#depot .trk .hv::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(#C0412F calc(var(--rk,0)*1turn),rgba(192,65,47,.13) 0);-webkit-mask:radial-gradient(circle,transparent 6.4px,#000 6.9px);mask:radial-gradient(circle,transparent 6.4px,#000 6.9px);opacity:0;transition:opacity .3s}
#depot .trk.rkon .hv::before{opacity:1}
#depot .trk.rkw .hv::before{animation:rkw .7s infinite}
@keyframes rkw{50%{opacity:.45}}
.hvbig svg{flex:none}
/* R1(아트 바이블) 결과 카드 천국철 지수: 원색 그라데이션 대신 종이 바탕 + 하늘빛 괘선 */
.hvbig{background:var(--paper2);border:1.5px solid #9CC3DA;border-radius:4px}
/* R2(재미하네스) 석간 1면 출근 일지: 머리기사 → 망점 지도 사진 → 노선 칩 뒤집기 → 숫자 셋 → 내일 소문 → '자세히' · 다음 단추는 카드 아래 고정 */
#nightCard.front .news{border-radius:4px;border:0;border-top:1px solid #23262B;box-shadow:inset 0 3px 0 #F2EDE3,inset 0 6px 0 #23262B;padding-top:10px;background:#F7F2E7}
#nightCard.front .news .nwt{font-family:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',Georgia,serif;font-weight:800;letter-spacing:-.02em;font-size:17px}
#nightCard.front .news .nwh b{font-family:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',Georgia,serif;font-weight:800}
#nightCard.front .news.nsub{box-shadow:none;border-top:1px solid #D9CFBC;padding-top:6px}
#nightCard.front .news.nsub ul{margin-top:0}
#nightCard.front .nmap.press canvas{border-radius:3px;background:#F2EDE3;outline:1px solid #CFC5B0;outline-offset:-1px;height:150px}
.nchips{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin:-2px 0 8px;font-size:11.5px;font-weight:800}
.nchips span{display:inline-flex;align-items:center;gap:3px;border-radius:3px;padding:1px 7px 1px 3px;background:#F2EDE3;border-bottom:1.5px solid var(--c);color:#23262B}
.nchips span i{display:inline-flex;font-style:normal}.nchips .flip .f1{display:none}.nchips .flip.on .f0{display:none}.nchips .flip.on .f1{display:inline-flex}
.nchips .flip{border-bottom-color:#C0412F}.nchips .flip.on{border-bottom-color:var(--c);animation:chipFlip .4s ease-out}
@keyframes chipFlip{0%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.nf3{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:6px;margin:0 0 8px;text-align:center}
.nf3>div{background:#F7F2E7;border-top:1px solid #23262B;padding:5px 2px 4px}
.nf3 span{display:block;font-size:10.5px;font-weight:800;color:#5E636B}
.nf3 b{font-size:20px;font-weight:900;color:#23262B;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.nf3>div:first-child b{font-size:24px}
.nf3 em{font-style:normal;font-size:11px;font-weight:900;margin-left:2px;vertical-align:3px}.nf3 em.up{color:#1F7FB8}.nf3 em.dn{color:#C0412F}
.nlost{font-size:12px;font-weight:800;color:#C0412F;margin:0 0 6px;word-break:keep-all}
#nightCard .nwb{margin:0 0 8px;font-size:12px;font-weight:800;color:#7A5200;background:#F7EBC9;border-radius:3px;padding:4px 8px;word-break:keep-all;text-align:left}
#nightCard .nwb:before{content:'내일 소문 · ';color:#B07A00}
.nmore{margin:0 0 4px;text-align:left}
.nmore summary{cursor:pointer;list-style:none;font-size:12px;font-weight:800;color:#5E636B;padding:6px 0;text-align:center;border-top:1px solid #E4DCCB}
.nmore summary::-webkit-details-marker{display:none}
.nmore summary:after{content:' ▾'}.nmore[open] summary:after{content:' ▴'}
.nmore .nsum{text-align:center;margin:0 0 6px}
.nbtn{position:sticky;bottom:-18px;margin:6px -18px -18px;padding:8px 18px 18px;background:linear-gradient(rgba(251,248,242,0),var(--paper2) 30%)}
.nbtn #bNext{margin-top:0;width:100%}
/* 12-daily.js 신문 스크랩북(특종 금테) · 내일의 판 예고 */
.news.gold{border-color:#C99A3B;box-shadow:0 0 0 2px #F3DFA8,0 2px 0 rgba(0,0,0,.05)}
#nightCard.front .news.gold{box-shadow:inset 0 3px 0 #F2EDE3,inset 0 6px 0 #23262B,0 0 0 2px #C99A3B}
.news .nwg{display:inline-block;margin:0 0 5px;font-size:10.5px;font-weight:900;color:#fff;background:#B07A1E;border-radius:3px;padding:2px 7px;letter-spacing:.02em;animation:pulse2 1.2s 2}
#stScrap:empty{display:none}#stScrap{margin:10px 0 0}
#stScrap .scb{display:block;width:100%;border:1px solid var(--hair);border-radius:10px;background:#FBF7EE;padding:6px 9px 7px;cursor:pointer;font:inherit;color:inherit;text-align:left}
#stScrap .sch{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:800;color:var(--muted);border-bottom:1.5px solid #23262B;padding-bottom:2px;margin-bottom:4px}
#stScrap .sch b{font-family:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',Georgia,serif;color:#23262B;font-size:12.5px}#stScrap .sch em{font-style:normal;color:#B07A1E}
#stScrap .scl{display:block;font-family:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',Georgia,serif;font-size:13px;font-weight:800;line-height:1.35;color:#23262B;word-break:keep-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#stScrap .scl i{font-family:inherit;font-style:normal;font-size:10px;color:#8A7F6A;margin-right:5px}#stScrap .scl.g i{color:#B07A1E}
#albCard .scgrid{display:flex;flex-direction:column;gap:5px;margin:6px 0 10px;text-align:left}
#albCard .scr{display:grid;grid-template-columns:44px 1fr 1fr 1fr;gap:4px;align-items:stretch}#albCard .scr>b{font-size:11.5px;font-weight:900;align-self:center}
#albCard .scg{border:1.5px dashed #C9C2B3;border-radius:6px;padding:3px 5px;min-width:0;background:#FBF8F2}
#albCard .scg i{display:block;font-style:normal;font-size:9.5px;font-weight:900;color:var(--muted)}
#albCard .scg span{display:block;font-size:10.5px;font-weight:800;line-height:1.3;color:#C9C2B3;word-break:keep-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
#albCard .scg u{display:block;text-decoration:none;font-size:9px;font-weight:700;color:var(--muted);line-height:1.25;margin-top:1px}
#albCard .scg.on{border:1.5px solid #C99A3B;background:#FFF6DC}#albCard .scg.on i{color:#B07A1E}#albCard .scg.on span{color:#23262B;font-family:'Noto Serif KR','Nanum Myeongjo','AppleMyungjo',Georgia,serif}
#albCard .scdh{font-size:11.5px;font-weight:800;color:var(--muted);text-align:left;margin:0 2px 4px}
#albCard .scdays{max-height:38vh;overflow-y:auto;margin-bottom:10px}#albCard .scdays .news{animation:none}
.tmr{margin:6px 0 4px;font-size:12px;font-weight:800;color:#4A4F57;background:#EEF4F8;border-radius:7px;padding:5px 9px;word-break:keep-all;text-align:left}
.tmr b{color:#1F7FB8}.tmr em{font-style:normal;color:#fff;background:#1F7FB8;border-radius:3px;padding:0 5px;font-size:10.5px}
#stBack .tmr{text-align:center;margin-top:7px}
#brief .bc{margin-top:4px;font-size:12px;font-weight:800;color:#1F5F8A;word-break:keep-all}
#goal .rdy{color:#8A5A00;font-weight:900}
/* 막차 퇴마반 잇기(js/14-hunt.js): 출근 일지의 실종·단서 칸 · 파견 단추 · 판 위 전체 화면 */
.hclue{background:#1E1A24;color:#ECE3CF;border-radius:10px;padding:7px 10px 8px;margin:0 0 8px;text-align:left;border:1.5px solid #3A3346;word-break:keep-all}
.hclue .hk{font-size:11px;font-weight:900;color:#E2B24D;letter-spacing:.02em}
.hclue .ht{font-size:12.5px;font-weight:600;line-height:1.5;margin-top:2px}
.hclue .ht b{color:#F0C35A}
.hclue .hn{font-size:10.5px;font-weight:700;color:#9A8F7C;margin-top:3px}
.hclue.go{border-color:#B8862A;box-shadow:0 0 0 2px rgba(226,178,77,.18)}
.hclue.won{background:#FFF6E2;color:var(--ink2);border-color:#E7CF95}.hclue.won .hk{color:#8A6A3A}
.btn.hunt{background:#1E1A24;color:#F0C35A;border:1.5px solid #B8862A}
#huntFrame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:9999;background:#0B0A10}

/* R1 결과 복사 · 버튼 셋 줄 */
.btns2.b3 .btn{font-size:14px;padding:0 4px;gap:5px;letter-spacing:-.02em}.btns2.b3 .btn .ico{width:16px;height:16px}
#copyBox{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;height:64px;padding:10px 12px;border:1.5px solid var(--ink);border-radius:12px;background:var(--paper2);color:var(--ink);font:700 14px var(--font);resize:none;display:none;user-select:text;-webkit-user-select:text}
#copyBox.on{display:block}
#goal{transition:opacity .25s,transform .25s}#goal.hid{opacity:0;transform:translateY(-4px)}
/* R1 보스전 다리: 일지 칸에 붉은 인장 → 종이가 뒤집혀 먹색 → 막차. 돌아올 땐 먹색이 종이로 */
.hclue{position:relative}
.hclue.sealed::after{content:'막차';position:absolute;right:8px;top:50%;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;background:#C0412F;color:#F3E9D2;font:400 14px/1 'Nanum Myeongjo','AppleMyungjo',Georgia,serif;border-radius:4px;box-shadow:inset 0 0 0 2px rgba(243,233,210,.5);animation:hseal .32s cubic-bezier(.2,1.6,.4,1) both}
@keyframes hseal{0%{transform:scale(2.2) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-6deg);opacity:1}}
#huntFlip{position:fixed;inset:0;z-index:9998;display:none;perspective:900px;pointer-events:none}
#huntFlip .hfp{position:absolute;inset:0;display:grid;place-items:center;background:#F2EDE3;backface-visibility:hidden}
#huntFlip .hfs{font-style:normal;width:64px;height:64px;display:grid;place-items:center;text-align:center;background:#C0412F;color:#F3E9D2;font:400 17px/21px 'Nanum Myeongjo','AppleMyungjo',Georgia,serif;border-radius:4px;transform:rotate(4deg);box-shadow:inset 0 0 0 2px rgba(243,233,210,.5);opacity:0}
#huntFlip.on,#huntFlip.back{display:block;pointer-events:auto}
#huntFlip.on .hfp{animation:hflip .62s cubic-bezier(.5,0,.3,1) forwards}
#huntFlip.on .hfs{animation:hfsIn .62s ease-out forwards}
#huntFlip.back .hfp{animation:hflipB .62s cubic-bezier(.5,0,.3,1) forwards}
@keyframes hflip{0%{transform:rotateX(-90deg);background:#F2EDE3;opacity:.2}45%{transform:rotateX(0);background:#F2EDE3;opacity:1}55%{transform:rotateX(0);background:#3A2E2A}100%{transform:rotateX(0);background:#0C0B10;opacity:1}}
@keyframes hfsIn{0%,40%{opacity:0;transform:scale(1.8) rotate(-10deg)}60%{opacity:1;transform:scale(1) rotate(4deg)}100%{opacity:1;transform:scale(1) rotate(4deg)}}
@keyframes hflipB{0%{background:#0C0B10;opacity:1}50%{background:#F2EDE3;opacity:1;transform:rotateX(0)}100%{background:#F2EDE3;opacity:0;transform:rotateX(90deg)}}
/* 보스 보상 ??? 공개(오너 10-23 '보상은 물음표물음표물음표'): 이기기 전엔 붉은 ??? · 이긴 밤엔 ???가 흔들리다 흩어지며 길들인 보스 이름과 3초 시연(16-tame tameDemo) */
.hclue .hqq{display:inline-block;color:#F0C35A;letter-spacing:.12em;animation:hqq 2.4s ease-in-out infinite}
@keyframes hqq{0%,86%,100%{transform:none}90%{transform:translateX(-1.5px) rotate(-3deg)}94%{transform:translateX(1.5px) rotate(3deg)}}
.hclue.tamed .ht{position:relative}
.hclue.tamed .ht b{color:#8A3A1E;animation:htIn .32s .5s both}
.hclue .hq{position:absolute;left:0;top:-2px;display:flex;gap:2px;pointer-events:none;font-size:15px;font-weight:900;color:#C0412F}
.hclue .hq i{font-style:normal;display:block;animation:hqShake .42s ease-in-out,hqFly .3s .42s ease-in forwards}
.hclue .hq i:nth-child(1){--dx:-18px;--rr:-40deg}.hclue .hq i:nth-child(2){--dx:2px;--rr:25deg}.hclue .hq i:nth-child(3){--dx:22px;--rr:60deg}
@keyframes hqShake{0%,100%{transform:none}20%{transform:translateX(-2px) rotate(-6deg)}40%{transform:translateX(2px) rotate(6deg)}60%{transform:translateX(-2px) rotate(-4deg)}80%{transform:translateX(2px) rotate(4deg)}}
@keyframes hqFly{to{transform:translate(var(--dx),-14px) rotate(var(--rr)) scale(.6);opacity:0}}
@keyframes htIn{0%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
.hclue .tdemo{margin:6px auto 0;max-width:300px;min-height:0;border-radius:6px;overflow:hidden}
.hclue .tdemo canvas{display:block;width:100%;height:auto}
/* R1 일지 숫자 차례: 지수 칸은 처음엔 비어 있다가 인장처럼 찍힌다 */
.nf3.seq .nIdx{opacity:0;transform:scale(1.9) rotate(-8deg)}
.nf3.seq .nIdx.stamp{animation:nIdx .34s cubic-bezier(.2,1.5,.4,1) forwards}
.nf3.seq .nIdx.stamp b{color:#C0412F}
/* R17(패널 P0 '좋은 값인데 붉은 경고색') 지수 인장 색은 값을 따른다: 60↑ 청록 먹 · 35~59 금 · 35↓ 인장 붉은색 */
.nf3.seq .nIdx.ig.stamp b{color:#1F6F8B}.nf3.seq .nIdx.im.stamp b{color:#9A7420}
.nf3 .nmean{display:block;font-style:normal;font-size:9.5px;font-weight:700;color:#8C877B;line-height:1.1;margin-top:1px}
@keyframes nIdx{0%{opacity:0;transform:scale(1.9) rotate(-8deg)}70%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-2deg)}}
.howpic{display:block;width:100%;max-width:280px;height:auto;margin:10px auto 2px}
/* R2(펀하네스) 결과 카드: 검정 단추 하나 + 보조 한 줄, 도시 단추는 '자세히' 안 */
#resCard>.btn{margin-top:10px}
.rcap{font-size:11px;font-weight:800;color:var(--muted);margin:12px 0 4px;letter-spacing:.04em}
#resCard .hvsub{margin-top:2px}
#resCard .rcity{flex-wrap:wrap}#resCard .rcity .btn{flex:1 1 40%;margin:0;font-size:13.5px}
#nightCard .hidx{display:inline-block;min-width:1.4em;color:transparent;background:repeating-linear-gradient(90deg,rgba(35,38,43,.28) 0 3px,transparent 3px 5px);border-radius:2px;transition:color .25s,background .25s}
#nightCard.ixon .hidx{color:#C0412F;background:none}
/* R2 아침 카드: 이어지는 하트 */
#brief .bhrt{display:flex;align-items:center;justify-content:center;gap:3px;margin:3px 0 2px;font-size:12.5px;color:#C0412F}
#brief .bhrt i{width:11px;height:10px;background:#E4DCCB;clip-path:path('M5.5 10 L0.8 5.2 A2.7 2.7 0 0 1 5.5 1.6 A2.7 2.7 0 0 1 10.2 5.2 Z')}
#brief .bhrt i.on{background:#C8566A}
#brief .bhrt b{margin-left:4px;font-weight:900}
#hearts.carry{animation:hcarry .65s ease-in-out 3}
@keyframes hcarry{0%,100%{transform:scale(1)}45%{transform:scale(1.14)}}
/* R2(펀하네스) 주민 제안 풍선: 역 위 그림 풍선 → 점선이 서랍 칸까지 */
.toyb{position:fixed;inset:0;z-index:8;pointer-events:none;animation:toyIn .25s ease-out}
.toyb.out{opacity:0;transition:opacity .35s}
.toyb .tl{position:absolute;left:0;top:0;overflow:visible}
.toyb .tl path{fill:none;stroke:#C99A3B;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:2 6;animation:toyDash .6s linear infinite}
.toyb .bb{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:5px;padding:5px 9px 5px 6px;background:#FBF8F2;border:1.5px solid #23262B;border-radius:14px;box-shadow:0 4px 0 rgba(35,38,43,.16);font-size:12px;font-weight:900;color:#23262B;white-space:nowrap;animation:toyPop .5s cubic-bezier(.3,1.6,.5,1)}
.toyb .bb::after{content:'';position:absolute;left:50%;bottom:-7px;width:10px;height:10px;background:#FBF8F2;border-right:1.5px solid #23262B;border-bottom:1.5px solid #23262B;transform:translateX(-50%) rotate(45deg)}
.toyb .ic{display:flex;align-items:center;justify-content:center;min-width:22px;height:20px}
.toyb .ic svg{width:20px;height:20px}
@keyframes toyIn{from{opacity:0}}
@keyframes toyPop{0%{transform:translate(-50%,-60%) scale(.3)}100%{transform:translate(-50%,-100%) scale(1)}}
@keyframes toyDash{to{stroke-dashoffset:-8}}
/* R2(펀하네스) 토스 출시판 HUD: 첫 줄 오른쪽 100px(+여백 10px = 110x56)은 비워 두고(토스 X 버튼 자리), 단추 넷은 둘째 줄 오른쪽 · 하트는 둘째 줄 왼쪽.
   러시·목표·만족도·보호 배지와 하루 그래프는 한 줄씩 내려간다 */
.tossx #hud .row{padding-right:100px}
.tossx #hud .row .hbtns{position:absolute;right:10px;top:calc(56px + env(safe-area-inset-top))}
.tossx #wave{margin-top:48px}
.tossx #hearts{top:calc(65px + env(safe-area-inset-top))}
.tossx #goal,.tossx #rush{top:calc(102px + env(safe-area-inset-top))}
.tossx #shield{top:calc(130px + env(safe-area-inset-top))}
.tossx #sat{top:calc(130px + env(safe-area-inset-top));right:64px}   /* 차고 열(56px) 왼쪽으로 — 4일차 차고 맨 위 칸과 겹치지 않게 */
.tossx #brief{top:calc(132px + env(safe-area-inset-top))}
.tossx #zcBar{top:auto}
/* R2(펀하네스) 접힌 '더 보기' 안 단추는 그리지 않는다(휴대폰 점검이 화면 밖 단추로 세던 것) */
#stMore:not([open])>*:not(summary){display:none}

/* R3(천국철2) 시간 멈춤이 늘 보이게: 지도 둘레 금빛 테 + 아래 꼬리표(안내 줄이 바뀌어도 남는다) */
body.tpause::before{content:'';position:fixed;left:0;top:0;bottom:0;right:var(--trayW,0px);border:3px solid rgba(201,154,59,.8);pointer-events:none;z-index:4}
body.tpause[data-tp=""]::after{display:none}
body.tpause::after{content:attr(data-tp);white-space:nowrap;position:fixed;left:calc((100vw - var(--trayW,0px))/2);bottom:calc(4px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;pointer-events:none;background:#C99A3B;color:#FBF8F2;font-weight:900;font-size:11px;letter-spacing:.04em;padding:2px 10px;border-radius:8px}

/* R3(천국철2) 막차 도감: 얼굴 7칸(못 만난 보스는 그림자) */
#stDex:empty{display:none}#stDex{margin:8px 0 0}
#stDex .dxb{display:block;width:100%;border:1px solid var(--hair);border-radius:10px;background:#FBF7EE;padding:6px 9px 7px;cursor:pointer;font:inherit;color:inherit;text-align:left}
#stDex .dxh{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:800;color:var(--muted);border-bottom:1.5px solid #23262B;padding-bottom:2px;margin-bottom:5px}
#stDex .dxh b{font-family:'Nanum Myeongjo','AppleMyungjo',Georgia,serif;color:#23262B;font-size:12.5px}#stDex .dxh em{font-style:normal;color:#B07A1E}
#stDex .dxr{display:flex;gap:4px;justify-content:space-between}
#stDex .dxr i,.dxc>i{flex:1 1 0;max-width:40px;aspect-ratio:7/8;border-radius:7px;background:#17141A;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 2px 0 rgba(35,38,43,.18)}
#stDex .dxr i img,.dxc>i img{width:100%;height:100%;object-fit:contain}
#stDex .dxr i:not(.on),.dxc:not(.on)>i{background:#DCD5C7}
#stDex .dxr i.g,.dxc.g>i{box-shadow:0 0 0 2px #E2B24D}
#stDex .dxr i.nx{box-shadow:0 0 0 2px #C0412F}
.dxl{display:flex;flex-direction:column;gap:6px;margin:8px 0;max-height:52vh;overflow:auto}
.dxc{display:flex;align-items:center;gap:10px;text-align:left}
.dxc>i{flex:0 0 40px;width:40px}
.dxc b{display:block;font-family:'Nanum Myeongjo','AppleMyungjo',Georgia,serif;font-size:14px}
.dxc u{display:block;text-decoration:none;font-size:12px;color:var(--muted);line-height:1.35;word-break:keep-all}
.dxc:not(.on) b{color:var(--muted)}

/* R4(천국철2 펀하네스) 일시정지 단추 상태가 한눈에: 멈춘 동안은 금빛 바탕 ▶ + 숨 쉬는 테(패널 '▶/⏸ 상태가 헷갈린다') */
#pauseBtn.on{background:#C99A3B;border-color:#C99A3B;color:#FBF8F2;box-shadow:0 0 0 0 rgba(201,154,59,.55);animation:pzPulse 1.6s ease-out infinite}
@keyframes pzPulse{0%{box-shadow:0 0 0 0 rgba(201,154,59,.55)}70%{box-shadow:0 0 0 7px rgba(201,154,59,0)}100%{box-shadow:0 0 0 0 rgba(201,154,59,0)}}
@media (prefers-reduced-motion: reduce){#pauseBtn.on{animation:none}}
.gift span.heal{color:#2B8A4E;font-weight:800}
.nheal{font-size:12px;font-weight:800;color:#2B8A4E;margin:0 0 6px;word-break:keep-all}
.bw.bdev{color:#8A5A00}
.hclue .hmn{display:block;font-size:11px;font-weight:700;color:#8A5A00;margin-top:2px}
/* R5(천국철2) 하트 조각: 빈 하트가 아래에서부터 차오른다 */
.hrt .pc{opacity:.78;transition:clip-path .4s ease-out}
.hrt.filling{animation:none}
#bCkpt{flex-direction:column;gap:0;line-height:1.25}
#bCkpt small{display:block;font-size:11px;font-weight:600;opacity:.82;margin-top:2px;letter-spacing:-.01em}
/* R5 막차 도감: 만난 손님만 + 다음 막차 '?' 한 칸(전체 칸 수를 드러내지 않는다) */
#stDex .dxr{justify-content:flex-start}
#stDex .dxr i{flex:0 0 34px}
#stDex .dxr i.q,.dxc.q>i{position:relative;background:#DCD5C7}
#stDex .dxr i.q img{opacity:.22;filter:grayscale(1)}
#stDex .dxr i.q b,.dxc.q>i b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 17px/1 Georgia,serif;color:#7A7266}
.ckback{margin:-2px 0 8px;padding:6px 10px;border-radius:9px;background:#EAF3EC;color:#2B6B45;font-size:12.5px;font-weight:800;text-align:center}
/* R8(천국철1 R12) 전체 보기를 눌렀는데 이미 전체가 보이던 화면: 테두리 한 번 번쩍 */
body.allf::after{content:'';position:fixed;inset:0;border:3px solid rgba(49,87,184,.55);pointer-events:none;z-index:4;animation:allf .7s ease-out forwards}
@keyframes allf{from{opacity:1}to{opacity:0}}
/* R9(펀하네스) ★8 노선 여행 — 처음 화면 두 번째 단추 · 노선도 · 세계마다 신문 종이 */
#bTrip{height:auto;min-height:48px;padding:7px 14px;font-size:14.5px}
#bTrip span{display:flex;flex-direction:column;line-height:1.25;word-break:keep-all;text-align:center}
#bTrip small{font-size:11.5px;font-weight:700;color:var(--muted)}
.trh{margin:4px 0 2px;font-size:19px;font-weight:900;word-break:keep-all}
.trmap{display:block;width:100%;height:auto;margin:2px 0 4px;overflow:visible}
.trmap path{fill:none;stroke:#C9C0AE;stroke-width:5;stroke-linecap:round;stroke-dasharray:2 9}
.trmap path.go{stroke:#23262B;stroke-dasharray:none;transition:stroke .3s}
.trmap circle{fill:#fff;stroke:#23262B;stroke-width:3}
.trmap circle.o{stroke:#8C877B;stroke-width:2.5}
.trmap text{font-size:10px;font-weight:800;fill:#4A4D52;text-anchor:middle}
.trmap rect{fill:#C0412F;stroke:#fff;stroke-width:1.6}
.trcs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.trc{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:6px 6px 8px;border-radius:14px;background:#fff;border:1.5px solid var(--hair);text-align:left;color:var(--ink);font:inherit;min-width:0;cursor:pointer;transition:transform .15s,border-color .15s}
.trc:active,.trc.on{transform:scale(.97);border-color:var(--ink)}
.trc canvas{display:block;width:100%;height:64px;border-radius:9px}
.trt{display:flex;flex-direction:column;line-height:1.2;padding:0 2px}
.trt b{font-size:15.5px;font-weight:900}
.trt small{font-size:11px;font-weight:700;color:var(--muted)}
.trn{font-size:11.5px;font-weight:800;color:#1F6E8A;line-height:1.3;padding:0 2px;word-break:keep-all}
.trb{position:absolute;right:6px;top:6px;width:30px;height:30px;border-radius:50%;background:rgba(35,38,43,.82);display:grid;place-items:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);overflow:hidden}
.trb img{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.trb em{position:absolute;right:-1px;bottom:-3px;font-style:normal;font-size:10px;font-weight:900;color:#fff}
.trsum{margin-top:8px;font-size:12px;font-weight:700;color:var(--muted);text-align:center}
body[data-world=future] .news{background:#F1F6F8;border-color:#B9D2DC}
body[data-world=future] .news .nwh{color:#4D7686;border-bottom-color:#1E4E60}
body[data-world=future] .news .nwh b{color:#1E4E60}
/* 신문 귀퉁이 그림: 이름표 + 민원 쪽지 더미(천국철 지수가 오를수록 낮아진다) */
.news .nwt .nwc{float:right;width:46px;height:40px;margin:0 0 2px 6px}
#zcBar .zgi{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:5px;vertical-align:-5px;border-radius:6px;background:var(--zt);color:#fff}
#zcBar .zgi svg{width:15px;height:15px}
/* R9(펀하네스 · 패널 '시작 단추에 동사가 없다') 오늘의 판 단추 첫 줄 = '출근 시작' */
#bDaily b.go{display:block;font-size:18px;font-weight:900;line-height:1.2}
#bDaily b.go:after{content:'';display:inline-block;margin-left:7px;vertical-align:1px;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
#bDaily small.dd{display:block;margin:2px 0 0;white-space:normal}
/* R10 세계 넷의 신문: 찜통 지옥 = 같은 종이의 먹색 뒷면(#2A2426 · 글 #E9DEC3 · 밤 금) · 구름 천국 = 밝은 흰 종이와 금빛 */
body[data-world=hell] .news,body[data-world=hell] #nightCard.front .news{background:#2A2426;border-color:#4A3F3A;box-shadow:inset 0 3px 0 #F2EDE3,inset 0 6px 0 #23262B}
body[data-world=hell] .news .nwh{color:#B9A98C;border-bottom-color:#E9DEC3}
body[data-world=hell] .news .nwh b,body[data-world=hell] .news .nwt{color:#E9DEC3}
body[data-world=hell] .news .nwt i{color:#E2B24D}
body[data-world=hell] .news ul{color:#D8CCB4}
body[data-world=hell] .news li:before,body[data-world=hell] .news li em{color:#B9A98C}
body[data-world=hell] .news .nwb{background:#3A302C;color:#E2B24D}
body[data-world=heaven] .news,body[data-world=heaven] #nightCard.front .news{background:#FFFDF9;border-color:#E6D8B8}
body[data-world=future] #nightCard.front .news{background:#F1F6F8}   /* R9 미래도시 종이색이 앞면 일지(#nightCard.front)에선 덮여 있던 것 */
body[data-world=heaven] .news .nwh{color:#9A8A66;border-bottom-color:#C99A3B}
body[data-world=heaven] .news .nwh b{color:#4A4D52}
.trc[data-w=hell] .trn{color:#9A4A33}
.trc[data-w=heaven] .trn{color:#8A6A2A}
.trb svg{width:20px;height:20px}
/* R17(패널 P0 '멈춘 건지 모르겠다') 내가 멈춘 동안: 지도 위쪽 가운데 먹 도장 띠 — 누르면 다시 출발. 안내 줄은 그 아래로 비킨다 */
#pauseTag{display:none;position:fixed;left:calc((100vw - var(--trayW,0px))/2);top:var(--hintTop,calc(104px + env(safe-area-inset-top)));transform:translateX(-50%);z-index:7;min-height:44px;padding:6px 16px;border-radius:12px;background:#23262B;color:#F2EDE3;border:0;box-shadow:inset 0 0 0 2px #23262B,inset 0 0 0 3.5px #F2EDE3,0 4px 0 rgba(35,38,43,.22);font-weight:900;align-items:center;gap:10px;white-space:nowrap;font-family:inherit;cursor:pointer;animation:popin .18s ease-out}
body.paused.tpause #pauseTag{display:flex}body.zcOn #pauseTag,body.paused.tpause.zcOn #pauseTag{display:none}
#pauseTag b{font-size:15px;letter-spacing:.08em;font-family:'Nanum Myeongjo','AppleMyungjo',Georgia,serif}
#pauseTag span{font-size:12.5px;color:#E2B24D}
/* R18 아침 준비: 같은 먹 도장 띠 둘레에 금빛 테가 천천히 숨 쉰다(누르면 출발) · 띠 자체는 움직이지 않는다(누르기 쉽게) */
#pauseTag.morn{animation:mornPulse 1.6s ease-in-out infinite}
@keyframes mornPulse{0%,100%{box-shadow:inset 0 0 0 2px #23262B,inset 0 0 0 3.5px #F2EDE3,0 4px 0 rgba(35,38,43,.22),0 0 0 0 rgba(201,154,59,.0)}50%{box-shadow:inset 0 0 0 2px #23262B,inset 0 0 0 3.5px #F2EDE3,0 4px 0 rgba(35,38,43,.22),0 0 0 6px rgba(201,154,59,.45)}}
@media (prefers-reduced-motion:reduce){#pauseTag.morn{animation:none}}
body.paused.tpause #hint{margin-top:54px}