:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#FFFFFF; --ink:#1B1B1B; --ink2:rgba(27,27,27,.56); --ink3:rgba(27,27,27,.28);
  --cloud:#F1F2F4; --card:#FFFFFF;
  --red:#E8322E; --magenta:#E34186; --green:#37BE33; --yellow:#F5C400; --violet:#5B2A86; --chalk:#1B1B1B;
  --line:#E34186; --act:#37BE33; --onLine:#1B1B1B; --onAct:#1B1B1B;
  --disc:#1B1B1B; --discText:#FFFFFF;
  --globe:#FFFFFF; --globeLine:rgba(27,27,27,.10); --band:rgba(205,206,212,.78);
  --c1:#2F6FD6; --c2:#FF8A1F; --c3:#F5C400; --c4:#7A4DE0; --c5:#1B1B1B; --c5t:#FFFFFF; --c6:#39B7E8;
  --r-card:0; --r-item:0; --r-pill:0;
  --ui:"Inter","IBM Plex Sans KR",system-ui,sans-serif;
  --display:"Rubik","IBM Plex Sans KR",system-ui,sans-serif;
  --sign:"Barlow Condensed","IBM Plex Sans KR","Arial Narrow",sans-serif;
  --kr:"IBM Plex Sans KR","Inter",sans-serif;
  --hand:"Nanum Pen Script","IBM Plex Sans KR",cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151515; --ink:#F2F2F2; --ink2:rgba(242,242,242,.6); --ink3:rgba(242,242,242,.28);
    --cloud:#262626; --card:#1D1D1D; --disc:#F2F2F2; --discText:#151515;
    --globe:#1D1D1D; --globeLine:rgba(242,242,242,.12); --band:rgba(70,70,76,.82); --c5:#F2F2F2; --c5t:#151515; --chalk:#262626;
  }
}
:root[data-theme="dark"]{
  --bg:#151515; --ink:#F2F2F2; --ink2:rgba(242,242,242,.6); --ink3:rgba(242,242,242,.28);
  --cloud:#262626; --card:#1D1D1D; --disc:#F2F2F2; --discText:#151515;
  --globe:#1D1D1D; --globeLine:rgba(242,242,242,.12); --band:rgba(70,70,76,.82); --c5:#F2F2F2; --c5t:#151515; --chalk:#262626;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible{outline:2px solid var(--act);outline-offset:3px;border-radius:0}

#app{position:relative;height:100%;max-width:440px;margin:0 auto;overflow:hidden;background:var(--bg)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .45s ease}
.screen.on{opacity:1;pointer-events:auto}
.screen:not(.on) *{pointer-events:none!important}

/* header — identical on every screen */
.hdr{flex:0 0 52px;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.logo{display:block;width:81px;height:27px}
.logo svg{display:block;width:100%;height:100%}
.pills{display:flex;gap:6px;align-items:center}
.pill{height:26px;padding:0 10px;border-radius:0;display:inline-flex;align-items:center;gap:4px;font:600 13px/1 var(--ui);white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.y{background:var(--yellow);color:#1B1B1B}
.pill.r{background:var(--act);color:#fff}
.av{width:32px;height:32px;display:block}
.hstat{display:flex;align-items:center;gap:14px}
.mring{width:30px;height:30px;border-radius:50%;border:4px solid var(--line);display:grid;place-items:center;font:800 11px/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--ink)}
.xp{display:flex;align-items:baseline;gap:3px;font:700 20px/1 var(--sign);letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.xp small{font:700 11px/1 var(--sign);letter-spacing:.14em;color:var(--ink2)}
.today1{font:700 14px/1 var(--sign);letter-spacing:.16em;color:var(--act);text-transform:uppercase}
.cnt{display:flex;align-items:baseline;gap:4px;font:700 13px/1 var(--sign);letter-spacing:.12em;text-transform:uppercase;color:var(--act)}
.cnt b{font:700 24px/1 var(--sign);letter-spacing:0}

/* logo parts */
.dk{fill:var(--disc)}
.lt{fill:var(--discText);font:800 52px var(--ui);text-anchor:middle;dominant-baseline:central}
.lti{fill:var(--discText)}

/* ---------- welcome (OZ first screen) ---------- */
#welcome{align-items:center;justify-content:center;cursor:pointer}
#welcome:not(.go) .wl *{animation-play-state:paused!important}
.wl{width:min(78%,320px);display:flex;flex-direction:column;align-items:stretch}
.wl-logo{width:82%;margin:0 auto 40px;flex-shrink:0}
.wl-logo svg{width:100%;height:auto;display:block;overflow:visible}
.wl-logo .d1,.wl-logo .d2,.wl-logo .d3{transform-box:fill-box;transform-origin:center;animation:lgDisc .5s cubic-bezier(.25,1.35,.5,1) both}
.wl-logo .d2{animation-delay:.1s}.wl-logo .d3{animation-delay:.2s}
.wl-logo .cn{transform-box:fill-box;transform-origin:left center;animation:grow .35s .5s cubic-bezier(.4,0,.2,1) both}
.wl-logo .lti{transform-box:fill-box;transform-origin:center;animation:lgChar .35s .62s cubic-bezier(.3,1.4,.5,1) both}
.wl-logo .lti-dot{transform-box:fill-box;transform-origin:center;animation:lgDisc .35s .9s cubic-bezier(.3,1.6,.5,1) both}
@keyframes lgDisc{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes lgChar{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.wl>*{flex-shrink:0}
@media (max-height:620px){.wl-logo{width:66%;margin-bottom:22px}.wl h1{margin:20px 0 18px;font-size:34px}.wl-crowd{margin-top:16px}.wl-tap{bottom:18px}}
@media (max-height:500px){.wl-logo{width:54%;margin-bottom:14px}.wl h1{margin:12px 0 12px;font-size:30px}.wl-crowd .oa{width:28px;height:28px}.wl{margin-top:-40px}.wl-tap{bottom:10px}}
.wl-meta{display:flex;justify-content:space-between;font:500 9px/1.4 var(--ui);color:var(--ink2);letter-spacing:.02em}
.wl hr{border:0;border-top:1px solid var(--ink3);margin:6px 0 0;width:100%}
.wl h1{font:800 40px/1 var(--ui);letter-spacing:-.01em;text-align:center;margin:34px 0 30px}
.wl-fine{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font:500 9px/1.45 var(--ui);color:var(--ink2)}
.wl-fine p{margin:0}
.wl-bar{height:3px;background:var(--magenta);margin-top:10px;border-radius:0;transform-origin:left;animation:grow .7s .8s both}
.wl-tap{position:absolute;bottom:36px;left:0;right:0;text-align:center;font:500 12px var(--kr);color:var(--ink2);animation:blink 2.4s 1.4s infinite both}

/* pictograms */
.px{width:1em;height:1em;display:inline-block;vertical-align:-.15em;fill:currentColor}
.patwrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.pattern{position:absolute;top:-24px;left:-392px;width:calc(100% + 440px);height:calc(100% + 48px);pointer-events:none;color:var(--ink);--pat:.075;will-change:transform;animation:gridDrift 110s linear infinite}
.screen:not(.on) .pattern,#stage:not(.on) .pattern{animation-play-state:paused}
#welcome .wl{position:relative;z-index:1}
#welcome .wl-tap{z-index:1}
.wl-crowd{display:flex;justify-content:center;gap:10px;margin-top:22px;color:var(--ink);font-size:22px}
.wl-crowd .px{animation:fadeIn .5s both}
.here .px{width:12px;height:12px;vertical-align:-2px;margin-right:4px;fill:currentColor}
.crowd{display:inline-flex;gap:2px;margin-left:8px;color:var(--ink2);font-size:14px;vertical-align:-2px}
.zone .px{font-size:13px;margin-right:6px;vertical-align:-2px}
/* stage card: gate closed */
#stage{position:absolute;inset:0;z-index:40;background:#141414;color:#F2F2F2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .5s ease}
#stage.on{opacity:1;pointer-events:auto}
#stage .pattern{color:#F2F2F2;--pat:.12}
#stage .sc{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.gate{position:relative;width:220px;height:150px;margin-bottom:26px}
.gate .post{position:absolute;bottom:0;width:22px;height:96px;background:#F2F2F2;border-radius:0}
.gate .bar{position:absolute;bottom:58px;height:14px;background:#E8322E;border-radius:0;transition:transform 1s cubic-bezier(.65,0,.35,1) .3s}
.gate .bar.l{left:22px;width:62px;transform-origin:left;transform:scaleX(0)}
.gate .bar.r{right:22px;width:62px;transform-origin:right;transform:scaleX(0)}
#stage.on .gate .bar{transform:scaleX(1)}
.gate .who{position:absolute;bottom:0;left:50%;width:62px;height:62px;margin-left:-31px;fill:#F2F2F2;transform:translateX(-90px);transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .2s}
#stage.on .gate .who{transform:translateX(0)}
#stage h3{margin:0;font:900 30px/1.2 var(--display)}
#stage p{margin:10px 0 0;font:500 14px/1.6 var(--kr);color:rgba(242,242,242,.7)}
#stage .st-t{margin-top:18px;font:700 26px var(--sign);letter-spacing:.06em;font-variant-numeric:tabular-nums}
#stage button{margin-top:26px;height:44px;padding:0 26px;border-radius:0;background:#F2F2F2;color:#141414;font:700 14px var(--kr)}

/* ---------- station ---------- */
#station{cursor:pointer}
.st-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding-bottom:40px}
.slot{display:block}
#slotStation{width:220px;height:220px}
.st-label{font:700 13px var(--sign);letter-spacing:.32em;color:var(--ink2);text-transform:uppercase}
.depart{position:absolute;right:0;bottom:56px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.depart span{font:700 14px var(--sign);letter-spacing:.14em;color:var(--ink2);padding-right:44px;text-transform:uppercase}
.depart i{display:block;width:124px;height:9px;background:var(--line);border-radius:0}
.fade{transition:opacity .35s ease}
#station.leaving .fade{opacity:0}

/* ride (subway transition) */
#ride{position:absolute;inset:0;z-index:15;opacity:0;pointer-events:none;background:var(--bg);transition:opacity .35s ease}
#ride.on{opacity:1}
#rideCv{position:absolute;inset:0;width:100%;height:100%;display:block}
#slotRide{position:absolute;width:130px;height:130px}
.arrows{position:absolute;left:50%;width:0;height:0}
.arw{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;opacity:0;transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--d),opacity .9s ease var(--d)}
.arw svg{width:100%;height:100%;display:block;overflow:visible}
.arw .pl{rx:7px}
.arw .ah{stroke-linejoin:round;stroke-width:1.4}
.arrows.in .arw{opacity:1}
.plate{position:absolute;left:0;right:0;text-align:center;opacity:0;transition:opacity .9s ease .3s}
.plate b{display:block;font:700 22px/1 var(--sign);letter-spacing:.24em}
.plate small{display:block;margin-top:6px;font:500 12px var(--kr);color:var(--ink2)}
.plate.in{opacity:1}

/* shared ring */
#ringLayer{position:absolute;inset:0;pointer-events:none;z-index:20;opacity:0;transition:opacity .35s ease}
#ringLayer.on{opacity:1}
#ring{position:absolute;left:0;top:0;width:220px;height:220px;transform-origin:0 0;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0)}
#ringNum{text-rendering:geometricPrecision}
#ring svg{width:100%;height:100%;display:block;overflow:visible}
.ring-arc{fill:none;stroke:var(--line);stroke-width:20;stroke-dasharray:299.16 15;stroke-dashoffset:-7.5}
#ringSpin{transform-box:fill-box;transform-origin:center}
#ringNum{fill:var(--ink);font:800 86px var(--ui);text-anchor:middle;dominant-baseline:central}
#ringNum{transition:opacity .35s ease}
#ringNum.hide{opacity:0}
#ringNum.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}

/* ---------- junction ---------- */
.jx{flex:1;display:flex;flex-direction:column;padding:6px 24px 28px;min-height:0}
.jtitle{display:flex;align-items:center;gap:14px;height:52px;flex:0 0 52px}
#slotJunction{width:44px;height:44px;flex:0 0 44px}
.jtitle b{display:block;font:700 18px/1 var(--sign);letter-spacing:.2em}
.jtitle small{display:block;font:500 11px var(--kr);color:var(--ink2);margin-top:4px}
.jmap{position:relative;flex:1;display:grid;grid-template-rows:repeat(5,1fr) 56px;margin-top:6px;min-height:0}
.jline{position:absolute;left:18px;top:-8px;bottom:28px;width:8px;background:var(--line);border-radius:0;transform-origin:top}
.jst{position:relative;display:flex;align-items:center;gap:16px;text-align:left;min-height:0}
.sr{position:relative;z-index:1;flex:0 0 40px;width:40px;height:40px;margin-left:2px;border-radius:0;background:var(--bg);border:4px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:800 14px/1 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;transition:background .22s ease,color .22s ease}
.sr i{font:800 8px/1 var(--ui);font-style:normal;letter-spacing:.04em;opacity:.7}
.jst.lit .sr{background:var(--line);color:#fff;scale:1.2}
.jtxt b{display:inline-block;transform-origin:left center;transition:scale .28s cubic-bezier(.3,1.5,.5,1)}
.jst.lit .jtxt b{scale:1.08}
@media (prefers-reduced-motion: reduce){.jst.lit .sr,.jst.lit .jtxt b{scale:1}}
.jst.lit .sr i{opacity:.9}
.jtxt b{font:800 21px/1.1 var(--ui);letter-spacing:-.01em}
.jtxt small{display:block;color:var(--ink2);font:500 13px/1.4 var(--ui);margin-top:3px}
.here{display:inline-block;vertical-align:4px;margin-left:8px;padding:3px 8px 2px;border-radius:0;background:var(--act);color:var(--onAct);font:700 11px/1 var(--sign);letter-spacing:.1em;text-transform:uppercase}
.ydot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin-left:6px;vertical-align:1px}
.branch{position:absolute;left:44px;top:calc(50% + 18px);width:calc(100% - 44px);height:56px;overflow:visible;pointer-events:none}
.branch path{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:101;stroke-dashoffset:0}
.branch .bd{fill:#1B1B1B}
.branch .bl{font:800 9px var(--ui);fill:#fff;text-anchor:middle;dominant-baseline:central}
.jterm{display:flex;align-items:center;gap:16px}
.tr{position:relative;z-index:1;width:40px;height:40px;margin-left:2px;border-radius:0;border:4px solid var(--line);background:var(--bg)}
.tr::after{content:"";position:absolute;inset:8px;border-radius:0;background:var(--line)}
.jterm small{font:700 13px var(--sign);letter-spacing:.14em;color:var(--ink2);text-transform:uppercase}

.jx.pre .jline{transform:scaleY(0)}
.jx.pre .sr,.jx.pre .tr{transform:scale(0)}
.jx.pre .jtxt,.jx.pre .jterm small{opacity:0;transform:translateX(-10px)}
.jx.pre .branch path{stroke-dashoffset:101;opacity:0}
.jx.pre .branch circle,.jx.pre .branch text{opacity:0}
.jx.built .jline{transition:transform 1s cubic-bezier(.65,0,.35,1)}
.jx.built .sr,.jx.built .tr{transition:transform .5s cubic-bezier(.2,.7,.2,1) var(--d),scale .28s cubic-bezier(.3,1.5,.5,1),background .22s ease,color .22s ease}
.jx.built .jtxt,.jx.built .jterm small{transition:opacity .4s var(--d),transform .4s var(--d)}
.jx.built .branch path{transition:stroke-dashoffset .7s cubic-bezier(.5,0,.2,1) calc(var(--d) + .15s),opacity 0s calc(var(--d) + .15s)}
.jx.built .branch circle,.jx.built .branch text{transition:opacity .3s calc(var(--d) + .7s)}

.gantry{position:absolute;left:58px;top:calc(50% + 2px);right:0;height:76px;pointer-events:auto}
.gbeam{position:absolute;left:0;right:6px;top:8px;height:5px;border-radius:0;background:var(--ink3)}
.gexit{position:absolute;left:0;top:0;display:flex;align-items:center;gap:4px;height:20px;padding:0 7px 0 6px;border-radius:0;background:var(--ink);color:var(--bg);font:700 12px/1 var(--sign);letter-spacing:.04em;z-index:1}
.gexit i{font-style:normal;font-size:8px;letter-spacing:.12em;opacity:.75}
.grow{position:absolute;left:52px;right:0;top:14px;display:flex;gap:5px}
.gs{position:relative;flex:0 0 44px;width:44px;height:56px;border-radius:0;box-shadow:inset 0 0 0 1.5px currentColor;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:5px;cursor:pointer}
.gs::before{content:"";position:absolute;left:50%;top:-6px;width:2px;height:6px;margin-left:-1px;background:var(--ink3)}
.gs .ga{position:absolute;right:4px;top:4px;width:10px;height:10px;fill:currentColor}
.gs .gi{width:20px;height:20px;fill:currentColor;margin-bottom:5px}
.gs b{font:700 8px/1 var(--sign);letter-spacing:.04em;text-transform:uppercase}
.gs:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.gs{transform-origin:50% -6px}
.jst.ex.lit .gs,.gs.swing{animation:signSwing 1.1s cubic-bezier(.3,.6,.4,1) calc(var(--i)*.06s) both}
.gs.swing{animation-delay:0s}
@keyframes signSwing{0%{transform:rotate(0)}18%{transform:rotate(9deg)}38%{transform:rotate(-6deg)}58%{transform:rotate(3.5deg)}78%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){.jst.ex.lit .gs,.gs.swing{animation:none}}
.jst.ex .jtxt{transform:none}
.jx.pre .jst.ex .jtxt{transform:translateX(-10px)}
.jx.pre .gs,.jx.pre .gexit,.jx.pre .gbeam{opacity:0}
.jx.pre .gs{transform:translateY(-10px)}
.jx.pre .gbeam{transform:scaleX(0)}
.gbeam{transform-origin:left}
.jx.built .gbeam{transition:transform .5s cubic-bezier(.65,0,.35,1) calc(var(--d) + .1s),opacity .2s calc(var(--d) + .1s)}
.jx.built .gexit{transition:opacity .3s calc(var(--d) + .3s)}
.jx.built .gs{transition:transform .45s cubic-bezier(.2,.7,.2,1) calc(var(--d) + .35s + var(--i)*.07s),opacity .3s calc(var(--d) + .35s + var(--i)*.07s)}

/* ---------- main ---------- */
.views{position:relative;flex:1;min-height:0}
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:4px 24px 128px;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;-webkit-overflow-scrolling:touch}
.view.on{opacity:1;transform:none;pointer-events:auto}
.view::-webkit-scrollbar{display:none}

.tabbar{position:absolute;left:24px;right:24px;bottom:16px;height:66px;border-radius:0;background:var(--cloud);display:flex;justify-content:space-between;align-items:flex-start;padding:10px 26px 0;z-index:5}
.tline{position:absolute;left:44px;right:44px;top:24px;height:3px;background:var(--line);border-radius:0}
.tb{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:32px}
.tb .trg{width:28px;height:28px;border-radius:50%;border:4px solid var(--line);background:var(--cloud);display:grid;place-items:center;font:800 10px var(--ui);font-variant-numeric:tabular-nums;transition:background .2s,color .2s,transform .2s}
.tb.act .trg{background:var(--line);color:#fff;transform:scale(1.12)}
.tb small{font:700 10px var(--sign);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .2s}
.tb.act small{opacity:1}

/* today */
.theme{margin:14px 0 4px}
.theme .wk{display:flex;justify-content:space-between;font:500 12px var(--kr);color:var(--ink2)}
.theme h2{margin:10px 0 0;font:900 76px/.86 var(--display);letter-spacing:-.02em;color:var(--act)}
.route{position:relative;height:96px;margin:22px 4px 8px}
.route .rl{position:absolute;left:6px;right:6px;top:44px;height:6px;border-radius:0;background:var(--cloud)}
.route .rl i{position:absolute;left:0;top:0;bottom:0;width:78%;background:var(--line);border-radius:0}
.stop{position:absolute;top:38px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--bg);border:4px solid var(--ink)}
.stop.done{background:var(--ink)}
.stop.now{width:26px;height:26px;margin-left:-13px;top:34px;border:5px solid var(--line);background:var(--bg)}
.stop.next{border-color:var(--ink3)}
.sl{position:absolute;width:90px;margin-left:-45px;text-align:center;font:500 10px/1.3 var(--ui);color:var(--ink2)}
.sl b{display:block;font:700 12px var(--ui);color:var(--ink)}
.sl.up{top:0}.sl.dn{top:64px}
.sl.first{margin-left:-6px;text-align:left}.sl.last{margin-left:-84px;text-align:right}
.sl.now b{color:var(--act)}

.countdown{margin:30px 0 8px;text-align:center}
.countdown .cap{font:500 12px var(--kr);color:var(--ink2);margin-bottom:12px}
.gwrap{position:relative;width:224px;margin:0 auto}
.globe{width:100%;display:block}
.globe .gbody{fill:var(--globe)}
.globe .gline{fill:none;stroke:var(--globeLine);stroke-width:1.2}
.globe .gland{fill:var(--magenta);opacity:.72}
.globe .gspin{animation:drift 42s linear infinite}
.screen:not(.on) .gspin,.view:not(.on) .gspin{animation-play-state:paused}
.globe .grim{fill:none;stroke:var(--globeLine);stroke-width:2}
.band{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:272px;background:var(--band);padding:8px 0 7px;font:800 35px/1 var(--ui);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.countdown .sub{margin-top:12px;font:700 13px var(--sign);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}

.sign{display:block;width:100%;text-align:left;margin:30px 0 0;background:var(--act);color:#1B1B1B;border-radius:0;padding:20px 22px 22px}
.sign .kr{font:700 30px/1 var(--kr)}
.sign .en{font:500 15px/1.2 var(--ui);margin-top:2px}
.sroute{position:relative;margin-top:6px;padding-bottom:46px}
.sign .num{display:inline-block}
.srsvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sign .num{font:900 104px/.9 var(--ui);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sign .arrow{flex:1;height:34px}
.sign .note{font:500 12px var(--ui);margin-top:2px}
.shead{display:flex;justify-content:space-between;align-items:flex-start}
.slines{display:flex;gap:5px;padding-top:4px}
.slines .bul{width:22px;height:22px;flex:0 0 22px;font-size:11px}
.dest{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.dest li{display:flex;align-items:center;gap:10px;font:500 15px var(--kr)}
.bul{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 12px var(--ui);flex:0 0 24px}
.dest li span:last-child{font:400 12px var(--ui);opacity:.65}

.vdots{display:grid;grid-template-columns:repeat(5,12px) 2px repeat(5,12px);gap:8px 7px;margin-top:16px}
.vdots i:nth-child(10n+6){grid-column:7}
.vdots i{width:12px;height:12px;border-radius:50%;background:rgba(27,27,27,.16)}
.vdots i.u{background:#1B1B1B}

.quick{margin-top:14px;background:var(--line);color:var(--onLine);border-radius:0;padding:20px 22px}
.quick .top{display:flex;justify-content:space-between;align-items:baseline;font:500 12px var(--kr);opacity:.8}
.quick h3{margin:10px 0 2px;font:900 58px/1 var(--display);letter-spacing:.01em}
.quick .qt{font:800 20px var(--ui);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.quick .qtl{font:500 11px var(--kr);opacity:.7}
.quick .vdots i{background:rgba(27,27,27,.18)}
.quick .vdots i.l{background:#1B1B1B}
.qbtn{margin-top:16px;height:40px;padding:0 18px;border-radius:0;background:var(--onLine);color:#FFFFFF;font:700 14px var(--kr)}
.minirow{display:flex;gap:28px;justify-content:center;margin:30px 0 8px}
.mini{display:flex;flex-direction:column;align-items:center;gap:8px;font:500 12px var(--ui);color:var(--ink2)}
.mini .r{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font:800 18px var(--ui);color:var(--ink);border:8px solid var(--line)}
.mini .r.g{border-color:var(--yellow)}

/* wayfinding signs */
.dsign{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:0;background:var(--ink);color:var(--bg);margin:30px 0 12px}
.dsign .px{font-size:24px;flex:0 0 auto}
.dsign .tx{flex:1;text-align:left}
.dsign b{display:block;font:700 15px/1.25 var(--kr)}
.dsign small{display:block;font:500 11px/1.2 var(--ui);opacity:.7}
.dsign .ar{font-size:18px}
.dsign.v{background:var(--violet);color:#fff}
.sboard{margin:12px 0 16px;border-radius:0;background:var(--cloud);overflow:hidden}
.sb-top{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 0}
.sb-kr{font:900 32px/1 var(--display);letter-spacing:-.01em}
.sb-en{padding:4px 16px 14px;font:600 14px var(--ui);color:var(--ink2)}
.sb-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--line);color:#fff;height:36px;padding:0 10px 0 14px;font:600 12px var(--kr)}
.sb-bar b{width:26px;height:26px;border-radius:50%;background:#fff;color:var(--line);display:grid;place-items:center;font:800 11px var(--ui);flex:0 0 26px}
.sb-bar span:last-child{opacity:.75}
.qpick button{position:relative;align-items:flex-start;justify-content:space-between;flex-direction:column;padding:10px 10px 8px;border-radius:0;height:78px;background:rgba(27,27,27,.1);text-align:left}
.qpick .fl{display:flex;align-items:center;gap:6px;font:600 12px var(--ui)}
.qpick .fp{align-self:flex-end;font:700 22px/1 var(--sign);letter-spacing:.02em}
.qpick .fp small{font:700 10px var(--sign);letter-spacing:.12em;opacity:.7;margin-left:2px}
.closed-sign{display:flex;align-items:center;gap:10px;font:700 12px var(--sign);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:10px}
.closed-sign .px{font-size:20px;color:var(--ink)}

.signs{position:relative;display:flex;gap:4px;overflow-x:auto;margin:0 -24px;padding:58px 24px 4px;scrollbar-width:none}
.signs::-webkit-scrollbar{display:none}
.sgb{position:relative;flex:0 0 112px;width:112px;padding:0}
.sg{width:112px;height:196px;display:block;overflow:visible}
.sgt{font:700 11px var(--sign);letter-spacing:.06em;fill:#1B1B1B;text-anchor:middle;dominant-baseline:central}
.sgk{font:700 17px var(--sign);letter-spacing:.06em;fill:#1B1B1B;text-anchor:middle;dominant-baseline:central}
.sgw{font:700 17px var(--sign);letter-spacing:.06em;fill:#FFFFFF;text-anchor:middle;dominant-baseline:central}
.sgw2{font:700 14px var(--sign);letter-spacing:.08em;fill:#FFFFFF;text-anchor:middle;dominant-baseline:central}
.sgn{font:900 26px var(--ui);fill:#1B1B1B;text-anchor:middle;dominant-baseline:central}
.sg .bd{fill:var(--ink)}
.sg .cr{transform-box:view-box;transform-origin:55px 182px;animation:sway 2.6s ease-in-out var(--sd) infinite alternate}
.sg .head{transform-box:view-box;transform-origin:55px 96px;animation:nod 1.9s ease-in-out var(--sd) infinite alternate}
.sg .arm-l{transform-box:view-box;transform-origin:32px 106px}
.sg .arm-r{transform-box:view-box;transform-origin:78px 106px}
.sg .leg-l{transform-box:view-box;transform-origin:47px 142px}
.sg .leg-r{transform-box:view-box;transform-origin:62px 142px}
/* personalities */
.sgb[data-k="blind"] .cr{animation:grope 1.6s ease-in-out infinite alternate}

.sgb[data-k="stop"] .cr{animation:plant 2.4s ease-in-out infinite}
.sgb[data-k="nonum"] .cr{animation:shiver .16s linear infinite}
.sgb[data-k="ticket"] .head{animation:bounceH .5s ease-in-out infinite alternate}
.sgb[data-k="exit"] .cr{animation:runbob .16s ease-in-out infinite alternate}
.sg .shiver{animation:shiver .18s linear infinite}
.sg .flap{transform-box:fill-box;transform-origin:center;animation:flap 1.2s ease-in-out infinite alternate}
.sg .run{animation:runbob .32s ease-in-out infinite alternate}
.sgb.hop .cr{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
.sgb[data-k="exit"].hop .cr{animation:dash 1s cubic-bezier(.5,0,.5,1)}
@keyframes plant{0%,60%,100%{transform:none}70%{transform:translateY(-8px)}80%{transform:none}86%{transform:translateY(-4px)}}
@keyframes tapL{from{transform:none}to{transform:rotate(-24deg)}}
@keyframes bounceH{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes nod{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes reachL{from{transform:rotate(30deg)}to{transform:rotate(60deg)}}
@keyframes reachR{from{transform:rotate(-60deg)}to{transform:rotate(-30deg)}}
@keyframes halt{0%,40%,100%{transform:rotate(0)}55%,85%{transform:rotate(-150deg)}}
@keyframes waveL{from{transform:rotate(10deg)}to{transform:rotate(120deg)}}
@keyframes waveR{from{transform:rotate(-10deg)}to{transform:rotate(-120deg)}}
@keyframes stepL{from{transform:rotate(-28deg)}to{transform:rotate(22deg)}}
@keyframes stepR{from{transform:rotate(22deg)}to{transform:rotate(-28deg)}}
.bub{position:absolute;left:50%;bottom:calc(100% - 6px);transform:translate(-50%,8px) scale(.8);transform-origin:50% 100%;width:max-content;max-width:150px;padding:7px 10px;border-radius:0;background:#FFFFFF;color:#1B1B1B;border:2.5px solid #1B1B1B;font:700 11px/1.35 var(--kr);opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);z-index:2;white-space:normal;text-align:center}
.bub::after{content:"";position:absolute;left:50%;bottom:-8px;width:10px;height:10px;margin-left:-5px;background:#FFFFFF;border-right:2.5px solid #1B1B1B;border-bottom:2.5px solid #1B1B1B;transform:rotate(45deg)}
.sgb.talk .bub{opacity:1;transform:translate(-50%,0) scale(1)}
@keyframes sway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
@keyframes look{0%,30%{transform:translate(0,0)}40%,60%{transform:translate(-3px,0)}70%,100%{transform:translate(1.5px,-1px)}}
@keyframes grope{from{transform:translateX(-5px) rotate(-4deg)}to{transform:translateX(5px) rotate(4deg)}}
@keyframes shiver{0%{transform:translate(0,0)}25%{transform:translate(1px,-.6px)}50%{transform:translate(-.8px,.6px)}75%{transform:translate(.6px,.8px)}100%{transform:translate(0,0)}}
@keyframes flap{from{transform:rotate(-9deg)}to{transform:rotate(9deg) translateY(-2px)}}
@keyframes runbob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes nudge{from{transform:translateX(0)}to{transform:translateX(-3px)}}
@keyframes hop{0%{transform:translateY(0)}35%{transform:translateY(-22px) rotate(-6deg)}70%{transform:translateY(0) rotate(3deg)}100%{transform:none}}
@keyframes kick{0%,100%{transform:none}40%{transform:translateY(-10px) rotate(-20deg)}}
@keyframes dash{0%{transform:none}45%{transform:translateX(40px)}46%{transform:translateX(-40px);opacity:0}60%{opacity:1}100%{transform:none}}

/* explore */
.ehead{display:flex;justify-content:space-between;align-items:center;margin:12px 0 14px}
.ehead h2{margin:0;font:900 30px/1 var(--display);color:var(--act);letter-spacing:-.01em}
.seg{display:inline-flex;background:var(--cloud);border-radius:0;padding:3px;margin-bottom:16px}
.seg button{height:30px;padding:0 14px;border-radius:0;font:600 13px var(--ui);color:var(--ink2)}
.seg button.on{background:var(--ink);color:var(--bg)}
.cats{display:flex;gap:16px;overflow-x:auto;padding:8px 2px 14px;margin:0 -24px;padding-left:24px;padding-right:24px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}
.cat .bb{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 14px var(--ui);box-shadow:0 0 0 0 var(--ink);transition:box-shadow .2s}
.cat .bb.all{background:var(--ink);color:var(--bg);font-size:10px;letter-spacing:.04em}
.cat.on .bb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
.cat small{font:600 11px var(--ui);color:var(--ink2)}
.grid{columns:2;column-gap:10px}
.tile{position:relative;display:block;width:100%;break-inside:avoid;margin:0 0 10px;border-radius:0;overflow:hidden;line-height:0}
.tile svg{width:100%;height:auto;display:block}
.chk{position:absolute;right:9px;bottom:9px;width:24px;height:24px;border-radius:50%;background:var(--act);display:grid;place-items:center;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.tile.voted .chk{transform:scale(1)}
.qlist{display:none;background:var(--line);border-radius:0;padding:6px 18px;color:var(--onLine)}
.qlist.on{display:block}
.qpost{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid rgba(27,27,27,.14)}
.qpost:last-child{border-bottom:0}
.qpost p{margin:8px 0 0;font:500 15px/1.5 var(--kr)}
.qpost small{font:500 11px var(--kr);opacity:.6}
.qv{flex:0 0 30px;width:30px;height:30px;border-radius:50%;border:2px solid rgba(27,27,27,.5);display:grid;place-items:center;align-self:center;transition:background .2s,border-color .2s}
.qv svg{opacity:0;transition:opacity .2s}
.qv.on{background:#1B1B1B;border-color:#1B1B1B}
.qv.on svg{opacity:1}
.qcats{margin:0 -18px;padding:14px 18px 8px}
.qlist .cat small{color:rgba(27,27,27,.7)}
.qlist .cat .bb.all{background:var(--onLine);color:#FFFFFF}
.qlist .cat.on .bb{box-shadow:0 0 0 3px var(--line),0 0 0 5px var(--onLine)}
.qhead{display:flex;align-items:center;gap:6px;font:600 11px var(--ui)}
.qhead small{margin-left:2px}
.qb{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font:800 10px var(--ui);flex:0 0 18px}
.qimg{width:100%;display:block;border-radius:0;margin-top:8px}
.hum{display:flex;align-items:center;gap:10px;margin-top:8px;background:rgba(27,27,27,.1);border-radius:0;padding:10px 12px}
.hum .pl{width:28px;height:28px;border-radius:50%;background:#1B1B1B;display:grid;place-items:center;flex:0 0 28px}
.hum .wv{flex:1;display:flex;align-items:center;gap:2px;height:26px}
.hum .wv i{flex:1;background:#1B1B1B;border-radius:0;opacity:.85}
.hum small{font:600 11px var(--ui);opacity:.75}
.qfm{display:flex;flex-wrap:wrap;gap:6px 12px;margin:10px 0 14px}
.qfm span,.qfm button{display:inline-flex;align-items:center;gap:5px;font:600 12px var(--ui);color:var(--onLine)}
.qfm b{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font:800 10px var(--ui)}
.qpick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0}
.qpick button{justify-content:center;flex-direction:column;gap:6px;height:72px;border-radius:0;background:rgba(27,27,27,.1)}
.qpick b{width:26px;height:26px;font-size:12px}
.qpick button{display:flex;align-items:stretch;justify-content:space-between;padding:10px 12px 9px}
.qpick .fl{justify-content:flex-start}
.qpick .fp{align-self:flex-end}
.ccard.quick h3{font:900 46px/1 var(--display);margin:10px 0 10px;color:var(--onLine)}
.qmeta{display:flex;justify-content:space-between;font:600 12px var(--ui);color:var(--ink2);margin:-4px 2px 12px}


/* league */
.tiers{position:relative;height:84px;margin:16px 0 6px}
.tiers .tl2{position:absolute;left:12px;right:12px;top:22px;height:4px;background:var(--ink);border-radius:0}
.tier{position:absolute;top:12px;width:24px;height:24px;margin-left:-12px;border-radius:50%;border:5px solid;background:var(--bg)}
.tier.past{background:currentColor}
.tier.cur{width:40px;height:40px;margin-left:-20px;top:4px;border-width:7px;display:grid;place-items:center;font:900 13px var(--ui);color:#1B1B1B}
.tname{position:absolute;top:50px;width:60px;margin-left:-30px;text-align:center;font:600 10px var(--ui);color:var(--ink2)}
.tname.cur{color:var(--ink);font-weight:800}
.lgh h2{margin:8px 0 4px;font:900 30px/1 var(--display);letter-spacing:-.01em}
.lgh p{margin:0 0 16px;font:500 12px/1.5 var(--kr);color:var(--ink2)}
.lrow{position:relative;display:flex;align-items:center;gap:12px;height:48px;padding:0 12px 0 16px;border-radius:0}
.lrow::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:0}
.lrow.up::before{background:var(--line)}
.lrow.down::before{background:var(--cloud)}
.lrow.me{background:var(--act);color:var(--onAct)}
.lrow .rk{width:28px;height:28px;border-radius:50%;border:3px solid var(--ink3);display:grid;place-items:center;font:800 10px var(--ui);flex:0 0 28px;font-variant-numeric:tabular-nums}
.lrow.up .rk{border-color:var(--line)}
.lrow.me .rk{border-color:#1B1B1B}
.lrow .nm{flex:1;font:500 14px var(--ui)}
.lrow .xp{font:700 13px var(--ui);font-variant-numeric:tabular-nums}
.lrow .nm small{display:block;font:500 11px var(--ui);opacity:.65}
.zone{font:700 11px var(--sign);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:14px 4px 6px}

/* create */
.ccard{border-radius:0;padding:22px;margin-top:16px}
.ccard.closed{background:var(--cloud)}
.ccard h3{margin:0 0 6px;font:900 22px var(--display)}
.ccard p{margin:0;font:500 13px/1.6 var(--kr);color:var(--ink2)}

/* profile */
.pid{display:flex;align-items:center;gap:14px;margin:14px 0 10px}
.pid .av64{width:64px;height:64px}
.pid b{display:block;font:800 22px var(--ui)}
.pid small{font:500 13px var(--ui);color:var(--ink2)}
.rnote{font:500 12px/1.5 var(--kr);color:var(--ink2);margin:-10px 0 18px}
.rnote span{font:700 12px var(--kr);color:var(--ink);margin-right:6px}
.pstat{font:500 13px var(--ui);color:var(--ink2);margin-bottom:18px}
.stamps{display:flex;gap:10px;margin:8px 0 22px}
.stamp{width:42px;height:42px;border-radius:50%;border:5px solid var(--line);display:grid;place-items:center;font:800 12px var(--ui)}
.stamp.g{border-color:var(--yellow)}
.stamp.e{border-color:var(--cloud)}
.board{position:relative;height:210px;border-radius:0;background:var(--chalk);overflow:hidden;margin-bottom:22px}
.board .lab{position:absolute;left:18px;top:14px;font:700 11px var(--sign);letter-spacing:.16em;color:rgba(255,255,255,.75)}
.board .ed{position:absolute;right:14px;top:12px;height:26px;padding:0 12px;border-radius:0;background:#fff;color:var(--chalk);font:700 12px var(--ui)}
.board .pin{position:absolute;width:84px;border-radius:0;overflow:hidden;line-height:0}
.board .pin svg{width:100%;display:block}
.board .chalk{position:absolute;left:150px;top:118px;font:400 30px/1.05 var(--hand);color:#fff;transform:rotate(-4deg)}
.board .st{position:absolute;width:34px;height:34px;border-radius:50%;border:4px solid var(--line);display:grid;place-items:center;font:800 10px var(--ui);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pg{position:relative;border-radius:0;overflow:hidden;aspect-ratio:1;line-height:0}
.pg svg{width:100%;height:100%;display:block}
.rb{position:absolute;left:6px;top:6px;width:26px;height:26px;border-radius:50%;background:var(--bg);border:3px solid var(--line);display:grid;place-items:center;font:800 9px var(--ui);color:var(--ink);line-height:1}
.arr{position:absolute;left:6px;top:6px;padding:4px 8px;border-radius:0;background:var(--cloud);font:600 9px/1 var(--ui);color:var(--ink)}
.sec{font:700 12px var(--sign);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin:0 0 8px}

.toast{position:absolute;left:50%;bottom:100px;transform:translate(-50%,30px);opacity:0;z-index:30;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:0;font:500 13px/1.4 var(--kr);width:max-content;max-width:calc(100% - 48px);text-align:center;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-208px)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
}
/* ===== Welcome language across the app: mono base, colour only as lines and dots ===== */
.view{isolation:isolate}
.screen{isolation:isolate}
.patwrap{z-index:-1}
.vpat{position:absolute;left:0;top:0;width:100%;height:100%}
.meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 10px/1.4 var(--ui);color:var(--ink2);letter-spacing:.02em;padding-bottom:6px;border-bottom:1px solid var(--ink3);margin:40px 0 0}
.meta b{font-weight:700;color:var(--ink)}
.meta .slines{align-self:center}
.rule{height:3px;background:var(--line);border-radius:0;margin-top:12px}
.theme{margin:6px 0 0}
.theme h2{color:var(--ink);margin-top:18px}
.globe .gland{fill:var(--magenta);opacity:.8}
.countdown{margin:22px 0 4px}
.countdown .sub{display:none}
.sign{background:none;color:var(--ink);border-radius:0;padding:0;margin:14px 0 0}
.quick{background:none;color:var(--ink);border-radius:0;padding:0;margin:14px 0 0}
.quick h3{margin-top:0}
.quick .qtl{opacity:1;color:var(--ink2)}
.quick .vdots i{background:var(--ink3)}
.quick .vdots i.l{background:var(--line)}
.qfm span,.qfm button{color:var(--ink)}
.qbtn{background:var(--ink);color:var(--bg)}
.ccard.quick{background:none;padding:0;margin-top:30px;border-top:1px solid var(--ink3);border-radius:0;padding-top:16px}
.ccard.quick h3{color:var(--ink)}
.ccard.quick .top{color:var(--ink2)}
.qpick button{background:var(--cloud)}
.sboard{background:none;border-radius:0;overflow:visible;margin:12px 0 18px}
.sb-top,.sb-en{padding-left:0;padding-right:0}
.sb-top{padding-top:4px}
.sb-bar{background:none;color:var(--ink2);border-top:3px solid var(--line);height:auto;padding:10px 0 0;font-weight:500}
.sb-bar b{background:var(--bg);color:var(--ink);box-shadow:0 0 0 3px var(--line)}
.qlist{background:none;border-radius:0;padding:0;color:var(--ink)}
.qlist .cat small{color:var(--ink2)}
.qlist .cat .bb.all{background:var(--ink);color:var(--bg)}
.qlist .cat.on .bb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
.qcats{margin:0 -24px;padding:14px 24px 8px}
.qmeta{color:var(--ink2)}
.qpost{border-bottom:1px solid var(--ink3)}
.qv{border-color:var(--ink3)}
.qv.on{background:var(--line);border-color:var(--line)}
.qv.on svg path{stroke:#FFFFFF}
.hum{background:var(--cloud)}
.hum .pl{background:var(--ink)}
.hum .wv i{background:var(--ink)}
.lrow.me{background:var(--cloud);color:var(--ink)}
.lrow.me .rk{border-color:var(--act)}
.lrow.me .nm{font-weight:700}
/* calm Today: one hero, generous spacing, smaller secondary numbers */
#v-today{padding-bottom:140px}
.route{margin-top:30px}
.countdown{margin:64px 0 0}
.countdown .cap,.cap2{font:500 11px var(--kr);color:var(--ink2);margin-bottom:10px;text-align:left}
.countdown .cap{text-align:center}
.gwrap{width:168px}
.band{width:220px;font-size:24px;padding:6px 0 5px}
.vhead{display:flex;justify-content:space-between;align-items:center;margin-top:64px}
.vhead .cap2{margin:0}
.sign{margin-top:6px}
.sign .num{font-size:72px}
.sroute{padding-bottom:40px}
.quick{margin-top:64px}
.quick h3{font-size:40px;margin:0}
.quick .rule{margin-top:10px}
.quick .qt{font-size:16px;margin-top:14px}
.signs{margin-top:48px}
.minirow{margin-top:40px}
.sboard{margin-top:10px}
.sb-kr{font-size:30px}
/* vote ticket: a punched stub, mono like the station */
.ticket{position:absolute;left:50%;bottom:100px;width:220px;height:64px;margin-left:-110px;z-index:6;color:var(--bg);opacity:0;visibility:hidden;transform:translateY(20px);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .25s,visibility 0s .45s}
.ticket.on{opacity:1;visibility:visible;transform:none;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .25s}
.tk-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tk-shape path{fill:var(--ink)}
.tk-shape line{stroke:var(--bg);stroke-width:1.5;stroke-dasharray:3 3;opacity:.45}
.tk-hole{fill:var(--bg);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.ticket.on .tk-hole{transform:scale(1);transition-delay:.45s}
.tk-bul{position:absolute;left:21px;top:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 11px var(--ui)}
.tk-vote{position:absolute;left:0;width:64px;top:40px;text-align:center;font:700 9px/1 var(--sign);letter-spacing:.16em;opacity:.7}
.tk-r{position:absolute;left:78px;right:18px;top:11px}
.tk-no{font:700 12px/1 var(--sign);letter-spacing:.08em;opacity:.95}
.tk-no b{font:700 28px/1 var(--sign);letter-spacing:.02em;margin-left:4px;font-variant-numeric:tabular-nums}
.tk-no small{font:700 12px var(--sign);opacity:.55;margin-left:2px}
.tk-meta{margin-top:5px;font:600 9px/1 var(--sign);letter-spacing:.12em;text-transform:uppercase;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[hidden]{display:none!important}
/* viewer */
.tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#viewer{position:absolute;inset:0;z-index:25;background:#141414;color:#F2F2F2;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .3s ease}
#viewer.on{opacity:1;pointer-events:auto}
.vw-top{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 20px}
.vw-x{width:36px;height:36px;display:grid;place-items:center;margin-right:-8px}
.vw-x svg,.vw-nav svg{width:22px;height:22px;fill:none;stroke:#F2F2F2;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vw-pos{font:700 12px var(--sign);letter-spacing:.14em;opacity:.7}
.vw-top .bul{width:26px;height:26px;flex:0 0 26px}
.vw-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:0 24px;min-height:0}
.vw-art{width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;transform:scale(.97);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
#viewer.on .vw-art{transform:none}
.vw-frame>svg{display:block;width:100%;height:auto;max-height:62vh;border-radius:0}
.vw-art.r{animation:slideR .3s cubic-bezier(.2,.7,.2,1)}
.vw-art.l{animation:slideL .3s cubic-bezier(.2,.7,.2,1)}
@keyframes slideR{from{transform:translateX(30px);opacity:.3}to{transform:none;opacity:1}}
@keyframes slideL{from{transform:translateX(-30px);opacity:.3}to{transform:none;opacity:1}}
.vw-nav{position:absolute;top:50%;width:36px;height:36px;margin-top:-18px;display:grid;place-items:center;opacity:.55;z-index:1}
.vw-nav.p{left:0}.vw-nav.n{right:0}
.vw-note{margin:14px 24px 0;text-align:center;font:500 11px/1.5 var(--kr);color:rgba(242,242,242,.55)}
.vw-bar{display:flex;gap:10px;padding:16px 24px 28px}
.vw-save{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:72px;height:56px;border-radius:0;background:#262626;color:#F2F2F2;font:600 11px var(--kr)}
.vw-save svg{width:22px;height:22px;fill:currentColor}
.vw-save.on{background:#F2F2F2;color:#141414}
.vw-vote{flex:1;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 20px;border-radius:0;background:var(--act);color:var(--onAct);font:700 16px var(--kr)}
.vw-vote small{font:700 12px var(--sign);letter-spacing:.12em;opacity:.7}
.vw-vote.on{background:#262626;color:#F2F2F2;box-shadow:inset 0 0 0 2px var(--act)}
.pseg{margin:4px 0 12px}
.pseg b{font-weight:800;margin-left:2px}
.pempty{font:500 13px/1.6 var(--kr);color:var(--ink2);margin:6px 2px 0}
/* vote feedback in the viewer */
.ticket{z-index:30}
.ticket.inview{bottom:118px}
.vw-frame{position:relative;display:block;width:100%;max-width:342px;margin:0 auto;line-height:0}
.vw-chk{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--act);display:grid;place-items:center;transform:scale(0)}
.vw-chk svg{width:26px;height:26px;fill:none;stroke:var(--onAct);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vw-art.voted .vw-chk{transform:scale(1)}
.vw-art.stamp .vw-chk{animation:stampIn .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes stampIn{0%{transform:scale(2.2) rotate(-18deg);opacity:0}55%{transform:scale(.9) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.vw-art.stamp .vw-frame{animation:thud .35s ease .12s}
@keyframes thud{0%,100%{transform:none}40%{transform:scale(.985)}}
.vw-vote.pop{animation:pop .4s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
/* menu: icons + always-visible labels, so it never reads like a streak or week ring */
.tabbar{height:70px;padding:9px 18px 0}
.tline{top:25px;left:40px;right:40px;height:2px;opacity:.5}
.tb{width:52px;gap:5px}
.tb .trg{width:34px;height:34px;border:0;border-radius:50%;background:var(--cloud);color:var(--ink2);transform:none}
.tb .trg svg{width:20px;height:20px;fill:currentColor}
.tb.act .trg{background:var(--line);color:#FFFFFF;transform:none}
.tb small{opacity:1;color:var(--ink2);font-weight:600}
.tb.act small{color:var(--ink);font-weight:700}
/* week number on the station board: a plate */
.sb-bar b{width:auto;height:22px;padding:0 8px;border-radius:0;background:var(--line);color:#FFFFFF;box-shadow:none;font:700 12px/22px var(--sign);letter-spacing:.06em;flex:0 0 auto}
/* quick: transfer (repost) and quote-transfer */
.qacts{display:flex;gap:6px;margin-top:10px}
.qa{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:0;background:var(--cloud);color:var(--ink2);font:600 12px var(--kr)}
.qa .px{font-size:14px}
.qa.on{background:var(--line);color:#FFFFFF}
.qtag{display:flex;align-items:center;gap:5px;font:600 11px var(--kr);color:var(--line);margin-bottom:6px}
.qtag .px{font-size:13px}
.qre{background:none}
.qmine{margin:0 0 8px!important;font:600 15px/1.5 var(--kr)!important}
.qquote{border:1px solid var(--ink3);border-radius:0;padding:10px 12px}
.qquote .qimg{max-height:120px;object-fit:cover}
#qsheet{position:absolute;inset:0;z-index:28;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .25s}
#qsheet.on{opacity:1;pointer-events:auto}
.qs-card{width:100%;background:var(--bg);border-radius:0;padding:20px 24px 28px;transform:translateY(30px);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
#qsheet.on .qs-card{transform:none}
.qs-h b{display:block;font:700 17px var(--kr)}
.qs-h small{font:500 12px var(--kr);color:var(--ink2)}
#qsIn{width:100%;margin:14px 0 12px;height:46px;border:0;border-bottom:2px solid var(--line);background:none;color:var(--ink);font:600 16px var(--kr);outline:none}
.qs-b{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.qs-b button{height:42px;padding:0 18px;border-radius:0;font:700 14px var(--kr);background:var(--cloud);color:var(--ink)}
.qs-b #qsGo{background:var(--line);color:#FFFFFF}

/* ---------- OZ / U : weightless white space ---------- */
#space{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;transition:opacity .8s ease}
.screen{z-index:1}
.pattern .base{opacity:var(--pat)}
#wlWrap{-webkit-mask-image:radial-gradient(ellipse 72% 30% at 50% 50%,transparent 62%,#000 100%);mask-image:radial-gradient(ellipse 72% 30% at 50% 50%,transparent 62%,#000 100%)}
#jnWrap{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 52%,#000 82%);mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) 52%,#000 82%)}
#stWrap{-webkit-mask-image:radial-gradient(ellipse 70% 32% at 50% 50%,transparent 55%,#000 100%);mask-image:radial-gradient(ellipse 70% 32% at 50% 50%,transparent 55%,#000 100%)}
@keyframes gridDrift{from{transform:translateX(0)}to{transform:translateX(368px)}}
.pattern .lf{transform-box:fill-box;transform-origin:center;opacity:0;animation:liftOff 9s ease-in-out infinite}
@keyframes liftOff{0%,8%{opacity:0;transform:translateY(0) scale(1)}20%{opacity:1;transform:translateY(-4px) scale(1.15)}70%{opacity:.95;transform:translateY(-30px) scale(1.5)}88%,100%{opacity:0;transform:translateY(-44px) scale(1.6)}}
@media (prefers-reduced-motion: reduce){.pattern,.pattern .lf{animation:none}.pattern .lf{opacity:.9}}
.wl-crowd{gap:12px;margin-top:26px}
.wl-crowd{align-items:flex-end;gap:8px}
.wl-crowd .oa{width:34px;height:34px;display:block;overflow:visible;animation:fadeIn .6s ease both}
.wl-crowd .oa polyline{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:3}
.wl-crowd .oa .t{stroke-width:4}
.wl-crowd .oa circle,.wl-crowd .oa .s{fill:currentColor;stroke:none}
.wl-crowd .oa .thin{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}
.wl-crowd .oa .hole{fill:var(--bg);stroke:none}
@keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@media (prefers-reduced-motion: reduce){.theme h2,.quick h3,.gwrap,.wl-crowd .oa{animation:none}#main.screen{transform:none}}

/* ---------- swipe gestures ---------- */
#viewer::before{content:"";position:absolute;left:50%;top:7px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:rgba(242,242,242,.28);z-index:2}
#viewer.drag,#viewer.drag .vw-art{transition:none!important}
.qs-card::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--ink3);margin:-8px auto 14px}
.qs-card.drag{transition:none!important}
.vw-art.dbl .vw-frame{animation:dblPop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes dblPop{50%{transform:scale(.96)}}

/* ---------- quick compose ---------- */
#compose{position:absolute;inset:0;z-index:28;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .25s}
#compose.on{opacity:1;pointer-events:auto}
#compose.on .qs-card{transform:none}
#cpCap,#cpLine{width:100%;height:44px;margin:4px 0 4px;border:0;border-bottom:2px solid var(--line);background:none;color:var(--ink);font:600 15px var(--kr);outline:none}
#cpLine{height:56px;font-size:19px;margin:14px 0 6px}
.qs-b #cpGo{background:var(--line);color:#FFFFFF}
.qs-b #cpGo small{font:700 11px var(--sign);letter-spacing:.08em;opacity:.85;margin-left:4px}
.cp-pick{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:190px;margin:14px 0 8px;border:2px dashed var(--ink3);border-radius:0;font:600 13px var(--kr);color:var(--ink2);cursor:pointer;overflow:hidden}
.cp-pick svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cp-pick input{display:none}
.cp-pick.has{border-style:solid;border-color:transparent}
#cpCanvas{display:block;width:100%;height:210px;margin:14px 0 8px;border-radius:0;background:var(--cloud);touch-action:none;cursor:crosshair}
.cp-pens{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.cp-pens .pen{width:24px;height:24px;border-radius:50%}
.cp-pens .pen.on{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.cp-pens .clr{margin-left:auto;height:30px;padding:0 14px;border-radius:0;background:var(--cloud);color:var(--ink);font:600 12px var(--kr)}
.cp-hum{display:flex;flex-direction:column;align-items:center;gap:12px;margin:18px 0 10px}
.cp-hum .rec{width:78px;height:78px;border-radius:50%;background:var(--line);color:#fff;font:700 12px/1.3 var(--kr);touch-action:none;-webkit-user-select:none;user-select:none}
.cp-hum .rec.on{animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{50%{box-shadow:0 0 0 10px rgba(227,65,134,.25)}}
.cp-wv{display:flex;align-items:center;gap:3px;height:30px}
.cp-wv i{width:3px;height:4px;border-radius:0;background:var(--line);transition:height .12s}
.cp-note{font:500 11px/1.4 var(--kr);color:var(--ink2);text-align:center}
.qimg.ph{aspect-ratio:auto;max-height:300px;object-fit:cover}

/* ---------- tab bar: one pink stop that slides, stretches and settles ---------- */
.tabbar{touch-action:none;-webkit-user-select:none;user-select:none}
.tind{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:17px;background:var(--line);z-index:0;pointer-events:none;will-change:transform}
.tb{z-index:1}
.tb .trg,.tb.act .trg{background:transparent!important;transform:none!important;transition:color .18s ease}
.tb.act .trg{color:#FFFFFF}
.tb .trg svg{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tb.act .trg svg{transform:scale(1.08)}
.tb.pop .trg svg{animation:tbPop .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes tbPop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1.08)}}
.tabbar.drag .tind{transition:transform .08s linear}

/* ---------- tab bar tucks in while you scroll down, comes back on the way up ---------- */
.tabbar{transform-origin:50% 100%;transition:height .45s cubic-bezier(.3,1.35,.5,1),transform .45s cubic-bezier(.3,1.35,.5,1)}
.tb small{transition:opacity .2s ease}
.tabbar.tuck{height:52px;transform:scale(.92)}
.tabbar.tuck .tb small{opacity:0}
@media (prefers-reduced-motion: reduce){.tabbar{transition:none}}

/* ---------- work menu (long-press a tile, or ··· in the viewer) ---------- */
#grid .tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .18s ease}
#grid .tile.press{transform:scale(.96)}
.vw-more{flex:0 0 56px;height:56px;border-radius:0;background:#262626;color:#F2F2F2;display:grid;place-items:center}
.vw-more svg{width:22px;height:22px;fill:currentColor}
#wsheet{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .25s}
#wsheet.on{opacity:1;pointer-events:auto}
.ws-card{position:relative;width:100%;background:var(--bg);border-radius:0;padding:96px 24px 30px;transform:translateY(40px);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
#wsheet.on .ws-card{transform:none}
.ws-card.drag{transition:none}
.ws-thumb{position:absolute;left:50%;top:0;width:118px;transform:translate(-50%,-46%) rotate(-2deg);border-radius:0;overflow:hidden;box-shadow:0 0 0 4px var(--bg)}
.ws-thumb svg{display:block;width:100%;height:auto}
.ws-x{position:absolute;left:18px;top:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.ws-x svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.ws-note{margin:0 0 14px;text-align:center;font:500 12px var(--kr);color:var(--ink2)}
.ws-list{display:flex;flex-direction:column}
.ws-list button{display:flex;align-items:center;gap:16px;height:54px;padding:0 6px;border-radius:0;color:var(--ink);font:700 16px var(--kr);text-align:left}
.ws-list button:active{background:var(--cloud)}
.ws-list button svg{flex:0 0 24px;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws-list button small{margin-left:auto;font:500 12px var(--kr);color:var(--ink2)}
.ws-list button.warn{color:var(--red)}
.ws-list button[disabled]{opacity:.45}
.ws-list .ws-h{font:700 13px var(--kr);color:var(--ink2);padding:4px 6px 8px}

/* ---------- category stops stay pinned to the top while the feed scrolls ---------- */
#v-explore .cats{position:sticky;top:-4px;z-index:6;background:var(--bg);transition:box-shadow .2s}
#v-explore .cats.stuck{box-shadow:0 1px 0 var(--cloud),0 2px 0 rgba(0,0,0,.04)}

/* ---------- pull (or shake) to reshuffle the weekly feed ---------- */
.pullsh{position:absolute;left:50%;top:0;z-index:7;width:56px;height:40px;margin-left:-28px;pointer-events:none;opacity:0;transform-origin:50% 0}
.pullsh .pi{display:block;width:56px;height:40px;transform-origin:50% 0}
.pullsh svg{display:block;width:56px;height:40px}
.pullsh .spl{fill:#1F9E3A}
.pullsh .ex{fill:#fff;font:800 10.5px/1 var(--sign);letter-spacing:.04em}
.pullsh .sarw path{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:butt;stroke-linejoin:miter}
.pullsh .sarw{transform-box:fill-box;transform-origin:center;transition:transform .16s cubic-bezier(.3,1.8,.45,1)}
.pullsh circle{fill:#fff}
.pullsh .rb{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:3}
.pullsh .rb.t{stroke-width:4}
.pullsh .badge{fill:#fff}
.pullsh .no{fill:#1F9E3A;font:800 11px/1 var(--sign);text-anchor:middle}
.pullsh.ready .pi{animation:signPop .45s cubic-bezier(.3,1.7,.45,1)}
@keyframes signPop{0%{transform:scale(1)}40%{transform:scale(1.12,.9)}70%{transform:scale(.96,1.05)}100%{transform:scale(1)}}
.pullsh.tick .pi{animation:signTick .16s cubic-bezier(.3,1.8,.45,1)}
@keyframes signTick{50%{transform:scale(1.06,.95)}}
.pullsh.go{transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .3s}

/* ---------- Today: train-door display x Bauhaus, in eki colours ---------- */
#v-today .td{display:flex;flex-direction:column;gap:30px;margin:6px 0 18px}
#v-today .tdp{display:block;width:100%;padding:0;text-align:left;border:0;border-radius:0;background:var(--bg);color:var(--ink);overflow:hidden}
#v-today .tdband{display:flex;align-items:center;gap:8px;height:30px;padding-left:0;background:none}
#v-today .tdkind{flex:none;padding:4px 7px 3px;border-radius:0;background:var(--magenta);color:#fff;font:700 12px/1 var(--kr);letter-spacing:.02em}
#v-today .tdkind.ink{background:var(--ink);color:var(--bg);font:700 13px/1 var(--sign);letter-spacing:.06em}
#v-today .tdkind.sky{background:#39B7E8;color:#1B1B1B}
#v-today .tdto{font:500 12px/1 var(--kr);color:var(--ink2);white-space:nowrap}
#v-today .tdto b{color:var(--ink);font-weight:700}
#v-today .tdto.r{margin-left:auto}
#v-today .tdno{margin-left:auto;align-self:stretch;display:flex;align-items:center;gap:2px;padding:0 11px;background:var(--ink);color:var(--bg);font:700 24px/1 var(--sign)}
#v-today .tdno small{align-self:flex-start;margin-top:8px;font:700 9px/1 var(--sign);opacity:.7}
#v-today .tdtime{margin-left:auto;align-self:stretch;display:flex;align-items:center;padding:0 10px;background:var(--ink);color:var(--bg);font:700 15px/1 var(--sign);letter-spacing:.04em;font-variant-numeric:tabular-nums}
#v-today .tdmain{position:relative;padding:12px 0}
#v-today .tdgeo{position:absolute;right:0;top:12px;width:72px;height:72px}
#v-today .tdgeo .ink{fill:var(--ink)}
#v-today .tdsm{display:block;font:600 12px/1 var(--kr);color:var(--ink2)}
#v-today .tdtheme{position:relative;margin:8px 0 4px;font:900 60px/.88 var(--display);letter-spacing:-.025em;color:var(--ink)}
#v-today .tdend{position:absolute;right:0;bottom:34px}
#v-today .tdkr{display:block;margin-top:8px;font:500 12px/1 var(--kr);color:var(--ink2)}
#v-today .tdline{padding:6px 0 4px}
#v-today .tdl-days,#v-today .tdl-bar,#v-today .tdl-ph{display:grid;grid-template-columns:repeat(7,1fr);padding-right:16px}
#v-today .tdl-days span{text-align:center;font:700 11px/1 var(--kr);color:var(--ink2);padding-bottom:6px}
#v-today .tdl-days span.now{color:var(--ink)}
#v-today .tdl-bar{height:28px;align-items:center;background:var(--magenta);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
#v-today .tdl-bar span{display:grid;place-items:center}
#v-today .tdl-bar b{display:grid;place-items:center;width:22px;height:20px;background:#fff;color:#1B1B1B;border-radius:0;font:700 14px/1 var(--sign)}
#v-today .tdl-bar .past b{color:rgba(27,27,27,.4)}
#v-today .tdl-bar .now b{width:30px;background:#37BE33;color:#fff;clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%);padding-right:6px}
#v-today .tdl-ph{margin-top:7px}
#v-today .tdl-ph span{display:flex;align-items:center;gap:4px;font:600 11px/1 var(--kr);color:var(--ink2)}
#v-today .tdl-ph i{width:8px;height:8px;flex:none}
#v-today .tdl-ph .ph1{grid-column:1/5;padding-left:4px}#v-today .tdl-ph .ph1 i{background:var(--ink3)}
#v-today .tdl-ph .ph2{grid-column:5/7;padding-left:4px;color:var(--ink)}#v-today .tdl-ph .ph2 i{background:#37BE33}
#v-today .tdl-ph .ph3{grid-column:7/8}#v-today .tdl-ph .ph3 i{background:var(--red);border-radius:50%}
#v-today .tdcd{padding:14px 0 16px;display:grid;place-items:center}
#v-today .tdcd .gwrap{width:190px}
#v-today .tdcd .band{width:max-content;max-width:none;padding-left:14px;padding-right:14px;border-radius:0;text-align:center;white-space:nowrap}
#v-today .tdv .slines{margin-left:auto;display:flex;gap:4px}
#v-today .tdvb{display:flex;align-items:stretch;gap:12px;padding:10px 0 0}
#v-today .tdbig{flex:0 0 96px;height:96px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:900 54px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
#v-today .tdvr{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
#v-today .tdcells,#v-today .tdq .vdots{display:grid;grid-template-columns:repeat(5,1fr) 4px repeat(5,1fr);gap:4px;margin:0}
#v-today .tdcells i:nth-child(10n+6),#v-today .tdq .vdots i:nth-child(10n+6){grid-column:7}
#v-today .tdcells i,#v-today .tdq .vdots i{display:block;width:auto;height:auto;aspect-ratio:1;border-radius:0;background:var(--cloud);box-shadow:none}
#v-today .tdcells i.l{background:var(--magenta);box-shadow:none}
#v-today .tdq .vdots i.l{background:#39B7E8;box-shadow:none}
#v-today .tdgo{align-self:flex-end;font:700 12px/1 var(--kr);color:var(--ink)}
#v-today .tdqb{padding:10px 0 0}
#v-today .tdq h3{margin:0 0 12px;font:900 56px/.9 var(--display);letter-spacing:-.02em;color:var(--ink);border-bottom:6px solid #39B7E8;padding-bottom:8px}
#v-today .tdq .qfm{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 6px;margin:0 0 14px}
#v-today .tdq .qfm span{display:flex;align-items:center;gap:6px;font:600 12px/1 var(--ui);color:var(--ink)}
#v-today .tdq .qfm b{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;font:800 10px/1 var(--ui)}
#v-today .tdq .qtl{margin:0 0 8px;font:600 12px/1 var(--kr);color:var(--ink2)}
#v-today .tdq .vdots{margin-bottom:14px;grid-template-columns:repeat(5,18px) 4px repeat(5,18px)}
#v-today .tdq .qbtn{display:flex;align-items:center;justify-content:center;width:100%;height:46px;margin:0;border-radius:0;background:var(--ink);color:var(--bg);font:700 14px/1 var(--kr)}
#v-today .quick .qbtn{border-radius:0}
/* ---------- signs → pictogram plates (people in poses) ---------- */
.sg{--plate:#E6E6E6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sg{--plate:#F2F2F2}}
:root[data-theme="dark"] .sg{--plate:#F2F2F2}
.sg .pl{fill:var(--plate)}
.sg .pp .lb{fill:none;stroke:#1B1B1B;stroke-width:8.5;stroke-linecap:round;stroke-linejoin:round}
.sg .pp .kb{fill:none;stroke:var(--plate);stroke-width:12.5;stroke-linecap:round;stroke-linejoin:round}
.sg .pp .hb,.sg .pp .lbf{fill:#1B1B1B}
.sg .pp .hk{fill:var(--plate)}
.sg .pp .bn{fill:#E34186}
.sg .pp .slot{fill:var(--plate)}
.sg .pp .tkl{fill:#E34186}
.sg .pp .pk,.sg .pp .sip,.sg .pp .nodh,.sg .pp .tk2,.sg .pp .cl,.sg .pp .cr2{transform-box:view-box}
.sg .pp .pk{transform-origin:55px 42px;animation:peek 2.2s ease-in-out infinite}
@keyframes peek{0%,70%,100%{transform:none}78%,92%{transform:translateY(5px)}}
.sg .pp .sip{transform-origin:46px 42px;animation:sip 3s ease-in-out infinite}
@keyframes sip{0%,55%,100%{transform:none}65%,85%{transform:rotate(-14deg)}}
.sg .pp .nodh{transform-origin:46px 32px;animation:nod 1.9s ease-in-out infinite alternate}
.sg .pp .tk2{animation:drop 1.6s cubic-bezier(.5,0,.6,1) infinite}
@keyframes drop{0%,30%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:1}75%,100%{transform:translateY(18px);opacity:0}}
.sg .pp .cl{transform-origin:55px 42px;animation:cheerL .5s ease-in-out infinite alternate}
.sg .pp .cr2{transform-origin:55px 42px;animation:cheerR .5s ease-in-out infinite alternate}
@keyframes cheerL{from{transform:rotate(0)}to{transform:rotate(14deg)}}
@keyframes cheerR{from{transform:rotate(0)}to{transform:rotate(-14deg)}}
@media (prefers-reduced-motion: reduce){.sg .pp *{animation:none!important}}

/* ---------- commuters: pictogram people walking along the platform ---------- */
.commute{position:relative;height:128px;margin:44px -24px 8px;overflow:hidden;pointer-events:none}
.cm-edge{position:absolute;left:0;right:0;bottom:12px;height:8px;background:repeating-linear-gradient(90deg,#F5C400 0 10px,transparent 10px 14px)}
.cm-edge::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--ink)}
.cmw{position:absolute;inset:0;animation:cmGo var(--dur) linear var(--del) infinite}
.cmw.l{animation-name:cmBack}
@keyframes cmGo{from{transform:translateX(-12%)}to{transform:translateX(104%)}}
@keyframes cmBack{from{transform:translateX(104%)}to{transform:translateX(-12%)}}
.cmp{position:absolute;left:0;bottom:23px;width:40px;height:56px;overflow:visible}
.cmw.back .cmp{bottom:34px;transform:scale(.78);transform-origin:50% 100%;opacity:.32}
.cmw.l .cmp{transform:scaleX(-1)}
.cmw.l.back .cmp{transform:scale(-.78,.78)}
.cmp .k{fill:none;stroke:var(--bg);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.cmp .s{fill:none;stroke:var(--ink);stroke-width:5.6;stroke-linecap:round;stroke-linejoin:round}
.cmp .f{fill:var(--ink)}
.cmp .hk{fill:var(--bg)}
.cmp .bob{animation:cmBob calc(var(--cyc)/2) ease-in-out infinite alternate}
.cmp .lg1,.cmp .lg2,.cmp .ar1,.cmp .ar2{transform-box:view-box}
.cmp .lg1,.cmp .lg2{transform-origin:20px 33px}
.cmp .ar1,.cmp .ar2{transform-origin:20px 19px}
.cmp .lg1,.cmp .ar2{animation:cmSwA var(--cyc) ease-in-out infinite alternate}
.cmp .lg2,.cmp .ar1{animation:cmSwB var(--cyc) ease-in-out infinite alternate}
.cmp.run .lg1,.cmp.run .ar2{animation-name:cmRunA}.cmp.run .lg2,.cmp.run .ar1{animation-name:cmRunB}
@keyframes cmSwA{from{transform:rotate(24deg)}to{transform:rotate(-24deg)}}
@keyframes cmSwB{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes cmRunA{from{transform:rotate(40deg)}to{transform:rotate(-40deg)}}
@keyframes cmRunB{from{transform:rotate(-40deg)}to{transform:rotate(40deg)}}
@keyframes cmBob{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
.cmp .still{animation:none!important;transform:rotate(-55deg)}
.view:not(.on) .commute *,.screen:not(.on) .commute *{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){.commute *{animation:none!important}}

/* ---------- Today: this week's route map (lives in its own shadow root) ---------- */
#v-today .tdmap{display:block;margin:4px 0 6px}

/* ---------- search ---------- */
.segrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.srchbtn{flex:none;width:42px;height:42px;border-radius:50%;background:var(--cloud);color:var(--ink);display:grid;place-items:center}
.srchbtn svg,.sr-in svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
#search{position:absolute;inset:0;z-index:26;background:var(--bg);display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .22s,transform .3s cubic-bezier(.3,1.2,.5,1)}
#search.on{opacity:1;pointer-events:auto;transform:none}
.sr-top{display:flex;align-items:center;gap:10px;padding:14px 20px 8px}
.sr-in{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;background:var(--cloud);color:var(--ink2)}
.sr-in input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);font:600 16px var(--kr)}
#srX{flex:none;white-space:nowrap;padding:0 2px;font:700 14px var(--kr);color:var(--ink)}
.sr-in input{width:100%}
.sr-tabs{display:flex;gap:18px;padding:6px 20px 0;border-bottom:1px solid var(--cloud)}
.sr-tabs button{padding:10px 0 9px;font:700 14px var(--kr);color:var(--ink2);border-bottom:3px solid transparent}
.sr-tabs button.on{color:var(--ink);border-color:var(--line)}
.sr-tabs button small{font:700 11px var(--sign);margin-left:3px;opacity:.7}
.sr-body{flex:1;overflow-y:auto;padding:16px 20px 120px}
.sr-h{margin:6px 0 10px;font:700 12px var(--kr);color:var(--ink2)}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.sr-chips button{height:34px;padding:0 13px;background:var(--cloud);font:600 13px var(--kr);color:var(--ink)}
.sr-chips button b{font:700 11px var(--sign);color:var(--ink2);margin-left:5px}
.sr-map{display:flex;align-items:center;gap:10px;width:100%;height:50px;margin-bottom:14px;padding:0 14px;background:var(--ink);color:var(--bg);font:700 14px var(--kr)}
.sr-map i{width:22px;height:22px;border-radius:50%;border:5px solid var(--line);flex:none}
.sr-map span{margin-left:auto;font:600 12px var(--kr);opacity:.7}
.sr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sr-grid button{aspect-ratio:1;overflow:hidden;display:block;padding:0;background:var(--cloud)}
.sr-grid svg{display:block;width:100%;height:100%}
.sr-note{margin:12px 0 0;font:500 12px var(--kr);color:var(--ink2)}
.sr-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;border-bottom:1px solid var(--cloud);text-align:left}
.sr-row .no{flex:none;width:42px;height:42px;display:grid;place-items:center;border:4px solid var(--line);border-radius:0;font:800 15px var(--ui)}
.sr-row .av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--cloud);font:800 16px var(--ui)}
.sr-row b{display:block;font:700 15px var(--kr)}
.sr-row small{display:block;margin-top:3px;font:500 12px var(--kr);color:var(--ink2)}
.sr-empty{padding:40px 0;text-align:center;font:600 14px var(--kr);color:var(--ink2)}

.sboard.quick .sb-bar{border-top-color:#39B7E8}
.sboard.quick .sb-bar b{background:#39B7E8;color:#1B1B1B}

/* ---------- today's pictogram: one exit-sign figure, a new pose each visit ---------- */
.pday{margin:56px 0 8px;display:flex;flex-direction:column;align-items:center;gap:12px}
.pd-plate{width:84px;height:auto;padding:0;background:none;display:block}
.pd-plate svg{fill:#1F9E3A}
.pd-plate svg{display:block;width:100%;height:auto;overflow:visible}
.pd-plate .pose{transform-box:fill-box;transform-origin:50% 100%}
.pd-plate .pose.hop{animation:pdHop .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes pdHop{30%{transform:scale(1.04,.9)}60%{transform:scale(.98,1.04)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){.pd-plate .pose.hop{animation:none}}
.pday figcaption{text-align:center}
.pday small{display:block;font:600 11px/1 var(--kr);color:var(--ink2)}
.pday b{display:block;margin-top:6px;font:700 14px/1.2 var(--kr);color:var(--ink)}

.sr-chips.row{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px 22px;padding:0 20px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sr-chips.row::-webkit-scrollbar{display:none}
.sr-chips.row button{flex:none;scroll-snap-align:start}
.sr-body.slide-l{animation:srSlideL .28s cubic-bezier(.3,1.1,.5,1)}
.sr-body.slide-r{animation:srSlideR .28s cubic-bezier(.3,1.1,.5,1)}
@keyframes srSlideL{from{transform:translateX(40px);opacity:.3}to{transform:none;opacity:1}}
@keyframes srSlideR{from{transform:translateX(-40px);opacity:.3}to{transform:none;opacity:1}}
#search.drag{transition:none}

#v-today .tdl-ph span{color:var(--ink2);font-weight:600}
#v-today .tdl-ph span.cur{color:var(--ink);font-weight:800}
#v-today .tdl-ph span:not(.cur) i{opacity:.45}
.ccard.open{background:var(--line);color:#fff}
.ccard.open .closed-sign{color:#fff}
.ccard .wkbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;margin-top:14px;background:#fff;color:#1B1B1B;font:700 14px var(--kr)}
.ccard .wkbtn small{font:700 11px var(--sign);opacity:.7}
.ccard .wkpick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.ccard .wkpick button{height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(255,255,255,.16);color:#fff;font:700 11px var(--ui)}
.ccard .wkpick b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 11px var(--ui)}

#ringNumImg{transition:opacity .35s ease;transform-box:view-box;transform-origin:110px 110px}
#ringNumImg.hide{opacity:0}
#ringNumImg.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}

.jtxt small{display:block;width:fit-content;margin-top:5px;padding:2px 0;background:transparent;transition:background-color .18s ease,padding .2s ease,color .18s ease}
.jst.lit .jtxt small{background:var(--line);padding:2px 7px;color:#fff;font-weight:600}
.jmap.scrub{touch-action:none}

.pd-plate .pl{fill:none;stroke:#1F9E3A;stroke-width:2.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:3}
.pd-plate .pl.t{stroke-width:4}
.pd-plate .pf{fill:#1F9E3A;stroke:none}
.pd-plate .pk{fill:none;stroke:var(--bg);stroke-width:4.4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:3}

/* ================= Create: firm corners, soft feel ================= */
#v-create .ccard{border-radius:0}
#v-create .ccard .wkpick button,#v-create .qpick button{border-radius:0}
#v-create .ccard.open{padding:20px 18px 18px}
#v-create .ccard.open h3{font:900 30px/1 var(--display);letter-spacing:-.01em;margin:10px 0 6px}
#v-create .ccard .wkpick b,#v-create .qpick b{border-radius:50%}
#v-create .qpick button{background:var(--cloud);height:80px}

/* ================= League ================= */
#tiers{display:none}
.lg-car{margin:6px -24px 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lg-car::-webkit-scrollbar{display:none}
.lg-track{display:flex;align-items:flex-end;padding:56px calc(50% - 39px) 4px;width:max-content;position:relative}
.lg-t{--k:0;flex:0 0 78px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;position:relative}
.lg-t svg.emb{width:48px;height:48px;transform:scale(calc(1 + var(--k)*.95));transform-origin:50% 100%;transition:transform .08s linear;background:var(--bg)}
.lg-t svg.emb.lk{opacity:.32}
.lg-t span{font:700 11px/1 var(--sign);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);opacity:calc(.55 + var(--k)*.45)}
.lg-t.me span{color:var(--ink)}
.lg-t.me::after{content:"";position:absolute;bottom:-9px;width:6px;height:6px;border-radius:50%;background:var(--line)}
.lgh{position:relative;margin-top:20px}
.lgh .lg-me{display:inline-block;padding:3px 7px;background:var(--line);color:#fff;font:700 11px/1 var(--kr)}
.lgh .lg-me[hidden]{display:none}
.lgh h2{margin:8px 0 4px!important}
.lg-back{position:absolute;right:0;top:0;height:30px;padding:0 12px;background:var(--ink);color:var(--bg);font:700 12px var(--kr)}
#lrows{transition:opacity .25s}
#lrows.peek{opacity:.28;pointer-events:none}
#v-league .lrow{border-radius:0}

/* ================= Profile ================= */
.pf-hero{position:relative;margin:-4px -24px 0;height:250px;background:#FFFFFF;color:#1B1B1B;overflow:hidden}
.pf-hero::before{content:"";position:absolute;inset:0;background:
  none}
.pf-top{position:relative;display:flex;justify-content:space-between;padding:20px 24px 0}
.pf-top h2{margin:0;font:900 40px/1 var(--display);letter-spacing:-.02em}
.pf-top p{margin:8px 0 0;font:600 13px/1 var(--kr);color:#6B6F76}
.pf-btns{display:flex;gap:6px}
.pf-btns button{width:38px;height:38px;display:grid;place-items:center;color:#1B1B1B;border-radius:0;background:rgba(27,27,27,.07)}
.pf-btns svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:butt}
.pf-av{position:absolute;left:50%;bottom:-38px;width:176px;height:176px;margin-left:-88px;padding:0;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 6px #FFFFFF}
.pf-av svg{display:block;width:100%;height:100%}
.pf-av svg circle{transform-box:view-box;transform-origin:50px 50px}
.pf-av.split svg circle{animation:ringSplit .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes ringSplit{35%{transform:scale(1.12)}60%{transform:scale(.97)}100%{transform:none}}
.pf-av.split svg circle:nth-of-type(odd){animation-delay:.04s}
.pf-tag{position:absolute;right:20px;bottom:18px;padding:5px 9px;background:#F5C400;color:#1B1B1B;font:700 12px/1 var(--sign);letter-spacing:.06em}
.pf-id{margin:24px 0 0;font:700 13px/1 var(--sign);letter-spacing:.08em;color:var(--ink2)}
.pf-row{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0}
.pf-row>div{display:flex;flex-direction:column;gap:6px}
.pf-row b{font:800 22px/1 var(--ui);color:var(--ink)}
.pf-row small{font:600 13px/1 var(--kr);color:var(--ink2)}
.pf-emb{display:flex;align-items:center;gap:6px}
.pf-emb svg{width:24px;height:24px}
.pf-emb b{font:800 18px/1 var(--ui)}
.pf-acts{display:flex;gap:8px;margin:18px 0 6px}
.pf-add{flex:1;height:48px;border-radius:0;background:var(--cloud);color:var(--ink);font:700 15px var(--kr)}
.pf-share{width:48px;height:48px;border-radius:0;background:var(--cloud);display:grid;place-items:center;color:var(--ink)}
.pf-share svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2}
#v-profile section{margin-top:28px}
.pf-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.pf-h span{font:800 18px/1 var(--kr);color:var(--ink)}
.pf-h small{font:600 12px/1 var(--kr);color:var(--ink2)}
.pf-strip{display:flex;gap:4px;align-items:flex-end}
.pf-strip .sg{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.pf-strip .sg i{display:block;height:calc(var(--w)*16px);background:var(--c)}
.pf-strip .sg b{font:800 14px/1 var(--ui);color:var(--ink)}
.pf-strip .sg small{font:600 10px/1.2 var(--kr);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-note{margin:10px 0 0;font:600 12px/1 var(--kr);color:var(--ink2)}
.pf-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf-stats>div{position:relative;padding:14px 14px 12px 50px;border-radius:0;background:var(--cloud);min-height:66px}
.pf-stats b{display:block;font:800 20px/1.1 var(--ui);color:var(--ink)}
.pf-stats small{display:block;margin-top:4px;font:600 12px/1.2 var(--kr);color:var(--ink2)}
.pf-stats .ic{position:absolute;left:12px;top:15px;width:28px;height:28px;display:grid;place-items:center}
.pf-stats .ic.ring{border-radius:50%;border:6px solid var(--line);box-sizing:border-box}
.pf-stats .ic.xp{background:#F5C400;color:#1B1B1B;font:800 11px/1 var(--sign)}
.pf-stats .ic.emb svg{width:28px;height:28px}
.pf-stats .ic.wk{background:linear-gradient(90deg,#2F6FD6 50%,#FF8A1F 50%)}
.pf-stamps{display:flex;gap:10px}
.pf-stamps span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font:800 16px/1 var(--ui);color:#fff}
.pf-stamps .st1{background:#E34186}.pf-stamps .st2{background:#2F6FD6}.pf-stamps .st3{background:#F5C400;color:#1B1B1B}.pf-stamps .st4{background:#37BE33}
.pf-stamps .lock{background:var(--cloud)}
.pf-ach{display:flex;flex-direction:column;gap:8px}
.ach{display:flex;align-items:center;gap:12px;padding:12px;border-radius:0;background:var(--cloud)}
.ach .ab{position:relative;flex:none;width:52px;height:52px;background:var(--c);display:grid;place-items:center}
.ach .ab svg{width:40px;height:40px}
.ach .ab em{position:absolute;right:-5px;bottom:-5px;min-width:20px;height:20px;padding:0 4px;display:grid;place-items:center;background:var(--ink);color:var(--bg);font:800 11px/1 var(--sign);font-style:normal}
.ach>div{flex:1;min-width:0}
.ach b{display:block;font:800 15px/1.2 var(--kr);color:var(--ink)}
.ach small{display:block;margin-top:3px;font:600 12px/1.2 var(--kr);color:var(--ink2)}
.ach .bar{display:block;height:6px;margin-top:8px;background:var(--bg)}
.ach .bar i{display:block;height:100%}
.ach .cnt{font:700 13px/1 var(--sign);color:var(--ink2)}
#v-profile .board{margin-top:28px;border-radius:0}

#v-profile .seg,#v-profile .seg button,#v-create .seg,#v-create .seg button{border-radius:0}

#v-create .qpick button,#v-create .ccard .wkpick button{border-radius:0}
#compose .qs-card,#compose .qs-b button,#compose #cpCap,#compose #cpLine,#compose .cp-canvas,#compose canvas{border-radius:0}

/* Explore segment: one box that hops in stepped frames */
#v-explore .seg.has-ind{position:relative}
#v-explore .seg .seg-ind{position:absolute;left:3px;top:3px;width:0;height:30px;background:var(--ink);z-index:0;pointer-events:none}
#v-explore .seg.has-ind button{position:relative;z-index:1;background:transparent!important;transition:color .16s ease .1s}
#v-explore .seg.has-ind button.on{color:var(--bg)}

.pd-plate .pl.th{stroke-width:1.1}.pd-plate .pl.xs{stroke-width:1.8}.pd-plate .pl.ts2{stroke-width:2.8}
.pd-plate .kn{fill:none;stroke:var(--bg);stroke-width:.8;stroke-linecap:butt;stroke-linejoin:miter}
.pd-plate .dash{fill:none;stroke:#1F9E3A;stroke-width:1;stroke-dasharray:1.1 .9}
#cats{align-items:flex-start}
#cats .srchbtn{order:99;margin-left:auto;flex:none;margin-top:2px}
#v-today .quick .vdots{grid-template-columns:repeat(5,8px) 2px repeat(5,8px);gap:5px 4px;margin-top:12px}
#v-today .quick .vdots i{width:8px;height:8px}
/* tab switch: the outgoing screen disappears at once, only the incoming one fades in (no double image) */
.view:not(.on){transition:none!important;visibility:hidden}

/* Today: one centre axis all the way down */
#v-today .sign{display:block;width:100%;margin-top:64px;text-align:center}
#v-today .sroute{text-align:center}
#v-today .sroute .num{display:inline-block}
#v-today .sroute .note{display:inline-block;margin-right:10px;vertical-align:baseline}
#v-today .sroute .note{text-align:center}
#v-today .quick{text-align:center}
#v-today .quick .qfm{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px}
#v-today .quick .vdots{width:max-content;margin-left:auto;margin-right:auto}
#v-today .quick .qbtn{display:block;margin:14px auto 0}
#v-today .sroute{padding-bottom:96px}
#v-today .quick h3{display:block;text-align:center}
#v-today .quick h3 small{font:600 12px/1 var(--kr);color:var(--ink2);letter-spacing:0}
#v-today .sroute .numwrap{position:relative;display:inline-block}
#v-today .sroute .numwrap .note{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin:0 12px 0 0;white-space:nowrap}
#v-today .quick .qwrap{position:relative;display:inline-block}
#v-today .quick .qwrap small{position:absolute;bottom:.14em;white-space:nowrap}
#v-today .quick .qwrap .qpre{right:100%;margin-right:12px}
#v-today .quick .qwrap .qsuf{left:100%;margin-left:12px}
/* reduced motion: stop every decorative loop */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---- Today: make-something first ---- */
#v-today .tdcta{margin-top:4px}
#v-today .tdcta .ct-h{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:12px}
#v-today .tdcta .ct-h b{font:800 20px/1 var(--kr);color:var(--ink)}
#v-today .tdcta .ct-h span{font:600 12px/1 var(--kr);color:var(--ink2)}
#v-today .tdcta .ct-g{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
#v-today .tdcta .ct-g button{height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font:700 12px/1 var(--ui);transition:transform .12s}
#v-today .tdcta .ct-g button:active{transform:scale(.95)}
#v-today .tdcta .ct-g .fic{width:26px;height:26px}
#v-today .tdcta.done p{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;background:var(--cloud)}
#v-today .tdcta.done b{font:800 16px/1 var(--kr);color:var(--ink)}
#v-today .tdcta.done span{font:600 12px/1 var(--kr);color:var(--ink2)}
.fic{fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter}
#v-today .quick .qfm{gap:8px}
#v-today .quick .qf{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 4px;background:var(--cloud);font:700 13px/1 var(--ui);color:var(--ink);transition:transform .12s}
#v-today .quick .qf:active{transform:scale(.94)}
#v-today .quick .qfi{width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
#v-today .quick .qfi .fic{width:16px;height:16px}
#v-today .vhint{margin-top:2px;margin-bottom:0;font:600 12px/1 var(--kr);color:var(--ink2);text-align:center}
#v-today .vhint b{color:var(--line);font-weight:800}

/* slimmer Today: no globe countdown, no quick timer/dots; the vote count is a small strip under the weekly mission */
#v-today .tdcd,#v-today section[aria-label="결과 발표까지"]{display:none}
#v-today .quick .qt,#v-today .quick .qtl,#v-today .quick #qdots{display:none}
#v-today .sign.compact{margin-top:22px}
#v-today .sign.compact .sroute{padding-bottom:30px}
#v-today .sign.compact .num{font-size:40px!important;line-height:1!important}
#v-today .sign.compact .numwrap .note{font-size:12px}
#v-today .sign.compact .vhint{margin-top:6px}
#v-today .quick{margin-top:56px}

#v-today .tdcta{margin-top:44px}
#v-today .tdcta .ct-plus{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;background:var(--line);color:#fff;transition:transform .12s}
#v-today .tdcta .ct-plus:active{transform:scale(.93)}
#v-today .tdcta .ct-plus svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:butt}
#v-today .tdcta .ct-h{flex-direction:column;align-items:center;gap:7px;margin:0}
#v-today .sign.compact{margin-top:40px}
#v-today .sign.compact .numwrap{display:inline-flex;align-items:center;gap:10px}
#v-today .sign.compact .numwrap .note{position:static;transform:none;margin:0}

/* on a wide screen (laptop, projector) the app sits in a phone-sized frame: 390 x 844, scaled down to fit the window height */
@media (min-width:600px) and (min-height:500px){
  html,body{background:#0B0B0B}
  #app{width:min(390px,calc((100dvh - 48px)*390/844));height:min(844px,calc(100dvh - 48px));max-width:none;margin:24px auto 0;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px rgba(0,0,0,.5)}
}
#v-today .tdcta .ct-frame{display:grid;place-items:center;width:88px;height:88px;margin:0 auto;background:color-mix(in srgb,var(--cloud) 40%,var(--bg))}
#v-today .tdcta .ct-plus{margin:0;box-shadow:none;transition:transform .09s ease,filter .09s ease,box-shadow .09s ease}
#v-today .tdcta .ct-plus:active{transform:scale(.88);filter:brightness(.88);box-shadow:inset 0 3px 0 rgba(0,0,0,.22)}
#v-today .tdcta .ct-plus svg{width:52px;height:52px;stroke-width:5.2}
#v-today .sign.compact .numwrap{display:none}
#v-today .sign.compact .sroute{padding-bottom:22px}
#v-today .quick #qGo{display:none}
#v-today .sign.compact .numwrap .note{display:none}
#v-today .quick{margin-top:120px}