/* Layout: phone-first notebook (모눈 노트) column; desktop adds a sticky live sidebar.
   The varsity jacket (과잠) is the one bold object; the LED campus signboard carries the live feed. */
:root{
  --paper:oklch(.985 .006 170); --grid:oklch(.45 .05 175 / .06); --card:oklch(1 0 0); --sunk:oklch(.92 .02 175); --ink:oklch(.27 .034 175); --muted:oklch(.49 .03 175); --line:oklch(.82 .024 175);
  --accent:oklch(.48 .10 177); --accent-ink:oklch(.99 0 0); --accent-soft:oklch(.92 .035 170); --accent-deep:oklch(.34 .07 177);
  --marker:#FFE45A; --on-marker:#161A36;
  --led-bg:#151935; --led:#FFB627; --led-dim:#8A7440; --live:#F0384F;
  --leather:#F1EBDC;
  --t-n:#74809A; --t-r:#1E8BD8; --t-sr:#8A4BE6; --t-ssr:#D19A00;
  --f-eng:#D9622B; --f-soc:#1F8F66; --f-hum:#B23F74; --f-nat:#1C83A0; --f-med:#C93A50; --f-edu:#B47A0B; --f-art:#6B4BD3;
  --s-a:#2F45E8; --s-h:#1C9A5F; --s-r:#D2437D; --s-c:#C98200;
  --up:#1C8A55; --down:#C93D36;
  --display:"Black Han Sans","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --hand:"Nanum Pen Script","Gaegu",cursive;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:oklch(.19 .015 175); --grid:oklch(.7 .02 175 / .06); --card:oklch(.24 .018 175); --sunk:oklch(.29 .025 175); --ink:oklch(.94 .01 175); --muted:oklch(.75 .02 175); --line:oklch(.4 .025 175);
  --accent:oklch(.8 .11 170); --accent-ink:oklch(.2 .02 175); --accent-soft:oklch(.32 .045 175); --accent-deep:oklch(.85 .08 170);
  --marker:#E8C93A;
  --t-n:#8E99AC; --t-r:#4DA8EC; --t-sr:#A97DF2; --t-ssr:#F2BB2E;
  --s-a:#7C8CFF; --s-h:#3DBB80; --s-r:#EC6A9E; --s-c:#E6A522;
  --up:#4CC88A; --down:#F07067; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:oklch(.19 .015 175); --grid:oklch(.7 .02 175 / .06); --card:oklch(.24 .018 175); --sunk:oklch(.29 .025 175); --ink:oklch(.94 .01 175); --muted:oklch(.75 .02 175); --line:oklch(.4 .025 175);
  --accent:oklch(.8 .11 170); --accent-ink:oklch(.2 .02 175); --accent-soft:oklch(.32 .045 175); --accent-deep:oklch(.85 .08 170);
  --marker:#E8C93A;
  --t-n:#8E99AC; --t-r:#4DA8EC; --t-sr:#A97DF2; --t-ssr:#F2BB2E;
  --s-a:#7C8CFF; --s-h:#3DBB80; --s-r:#EC6A9E; --s-c:#E6A522;
  --up:#4CC88A; --down:#F07067; color-scheme:dark;
}
/* Scene palette: the flat vignettes (장면 일러스트) and the play HUD draw only from these, so dark mode turns campus into night with lit windows. */
:root{
  --sc-wall:#E2E7F5; --sc-floor:#CAD1E6; --sc-sky:#CFE4F7; --sc-night:#1E2450; --sc-ink:#2A2F4D;
  --sc-wood:#B9844F; --sc-legc:#8A6440; --sc-desk:#D8B285; --sc-board:#2E5A4A; --sc-chalk:#EEF5EF;
  --sc-glass:#CFE4F7; --sc-glassf:rgba(255,255,255,.55); --sc-paper:#FFFDF6; --sc-card:#FFFFFF; --sc-glowc:255 214 120;
  --sc-grass:#BCD8A2; --sc-bldg:#B8C1DD; --sc-bldg2:#A3AED3; --sc-roofc:#7E86B8; --sc-cork:#C99B66; --sc-skin:#F2CDA8;
  --sc-red:#E2574C; --sc-curtain:#C6DAEA; --sc-stage:#262A50; --sc-train:#DCE3F0; --sc-shade:rgba(0,0,0,.08);
  --sc-pink:#EE7FA8; --sc-cream:#F3E6CC; --sc-yellow:#FFCF3F; --sc-green:#5DB97A; --sc-blue:#4D63F0;
  --sc-sunc:#FFC93C; --sc-win:#F4F8FF; --sc-cloudc:rgba(255,255,255,.92); --sc-cloudy:#B8C3D6; --sc-cloudd:#8E9AB3;
  --sc-tree:#7CC27F; --sc-chairc:#9AA4D2;
  --hud:oklch(.94 .033 175); --arcade-bg:oklch(.28 .065 275); --hud-ink:oklch(.99 0 0); --arcade-muted:oklch(.84 .02 275); --tamt:7%;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sc-wall:#252B4B; --sc-floor:#1C2140; --sc-sky:#24305E; --sc-night:#12163A; --sc-ink:#0B0E22;
  --sc-wood:#8C6239; --sc-legc:#5A4128; --sc-desk:#735538; --sc-board:#1F4136; --sc-chalk:#D5E4DA;
  --sc-glass:#34497A; --sc-glassf:rgba(200,220,255,.2); --sc-paper:#E4E0D2; --sc-card:#E3E7F5; --sc-glowc:255 205 110;
  --sc-grass:#2F5034; --sc-bldg:#3D4775; --sc-bldg2:#4A558A; --sc-roofc:#5D669E; --sc-cork:#8C6A44; --sc-skin:#D8B48F;
  --sc-red:#D9554B; --sc-curtain:#34486C; --sc-stage:#141833; --sc-train:#2C3352; --sc-shade:rgba(0,0,0,.25);
  --sc-pink:#E07399; --sc-cream:#CDBF9F; --sc-yellow:#E8B92E; --sc-green:#4FA56A; --sc-blue:#6F80F5;
  --sc-sunc:#F2E3AE; --sc-win:#FFD98A; --sc-cloudc:rgba(255,255,255,.14); --sc-cloudy:#3A4560; --sc-cloudd:#56617E;
  --sc-tree:#3F8A55; --sc-chairc:#46507F;
  --hud:#1F2550; --tamt:7%;
}}
:root[data-theme="dark"]{
  --sc-wall:#252B4B; --sc-floor:#1C2140; --sc-sky:#24305E; --sc-night:#12163A; --sc-ink:#0B0E22;
  --sc-wood:#8C6239; --sc-legc:#5A4128; --sc-desk:#735538; --sc-board:#1F4136; --sc-chalk:#D5E4DA;
  --sc-glass:#34497A; --sc-glassf:rgba(200,220,255,.2); --sc-paper:#E4E0D2; --sc-card:#E3E7F5; --sc-glowc:255 205 110;
  --sc-grass:#2F5034; --sc-bldg:#3D4775; --sc-bldg2:#4A558A; --sc-roofc:#5D669E; --sc-cork:#8C6A44; --sc-skin:#D8B48F;
  --sc-red:#D9554B; --sc-curtain:#34486C; --sc-stage:#141833; --sc-train:#2C3352; --sc-shade:rgba(0,0,0,.25);
  --sc-pink:#E07399; --sc-cream:#CDBF9F; --sc-yellow:#E8B92E; --sc-green:#4FA56A; --sc-blue:#6F80F5;
  --sc-sunc:#F2E3AE; --sc-win:#FFD98A; --sc-cloudc:rgba(255,255,255,.14); --sc-cloudy:#3A4560; --sc-cloudd:#56617E;
  --sc-tree:#3F8A55; --sc-chairc:#46507F;
  --hud:#1F2550; --tamt:7%;
}
/* Seasons: the page takes a faint tint and campus trees change with the month */
[data-season="winter"]{--sc-tree:color-mix(in srgb,#E6EDF8 72%,var(--paper))}
[data-season="spring"]{--sc-tree:color-mix(in srgb,#F4A6C2 86%,var(--paper))}
[data-season="may"]{--sc-tree:color-mix(in srgb,#6CBF6F 86%,var(--paper))}
[data-season="june"]{--sc-tree:color-mix(in srgb,#3E9A5A 86%,var(--paper))}
[data-season="autumn"]{--sc-tree:color-mix(in srgb,#E8914A 88%,var(--paper))}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper)}
body{margin:0;min-height:100vh;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;padding-inline:16px;padding-block:0 56px;word-break:keep-all;overflow-wrap:anywhere;transition:background-color .9s ease}
body[data-season="winter"]{background-color:color-mix(in srgb,#C9DBF5 var(--tamt),var(--paper))}
body[data-season="spring"]{background-color:color-mix(in srgb,#FFC2D7 var(--tamt),var(--paper))}
body[data-season="may"]{background-color:color-mix(in srgb,#C2E8BA var(--tamt),var(--paper))}
body[data-season="june"]{background-color:color-mix(in srgb,#FFE09C var(--tamt),var(--paper))}
body[data-season="autumn"]{background-color:color-mix(in srgb,#FFC79A var(--tamt),var(--paper))}
body[data-season="night"]{background-color:color-mix(in srgb,#232A5C var(--tamt),var(--paper))}
#amb{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
a{color:var(--accent)}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p,ul,ol{margin:0}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.h2{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.12}
.kicker{font-size:13.5px;font-weight:700;color:var(--accent)}
mark{background:linear-gradient(transparent 55%,var(--marker) 55%);color:inherit;padding:0 .1em}

/* LED signboard ticker */
.ticker{margin-inline:-16px;background:var(--led-bg);color:var(--led);display:flex;align-items:stretch;height:36px;font-family:var(--mono);font-size:13px;position:relative;z-index:6}
.ticker .live{flex:none;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--live);color:#fff;font-weight:600;font-family:var(--body);font-size:12.5px}
.ticker .live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s ease-in-out infinite}
.ticker .live.off{background:#3A3F66}
.ticker .live.off i{animation:none;opacity:.5}
.ticker .win{flex:1;overflow:hidden;display:flex;align-items:center;-webkit-mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ticker .track{display:flex;gap:48px;white-space:nowrap;padding-left:24px;animation:marquee var(--dur,40s) linear infinite;text-shadow:0 0 6px rgba(255,182,39,.55)}
.ticker .track span b{color:#fff;font-weight:600}
.ticker .track .sep{color:var(--led-dim)}
.sndbtn{flex:none;appearance:none;border:0;border-left:1px solid rgba(255,255,255,.08);background:transparent;color:var(--led);width:46px;display:grid;place-items:center;padding:0;cursor:pointer}
.sndbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sndbtn .spk{fill:currentColor;stroke:none}
.sndbtn .x{display:none}
.sndbtn.off{color:#6E7399}
.sndbtn.off .w1,.sndbtn.off .w2{display:none}
.sndbtn.off .x{display:inline}
.sndbtn:focus-visible{outline:2px solid var(--led);outline-offset:-5px}
.sound-panel{position:absolute;top:44px;right:12px;z-index:32;width:min(280px,calc(100vw - 24px));padding:16px;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:8px;box-shadow:4px 4px 0 var(--sprite-shadow);display:grid;gap:10px}
.sound-panel h3{font-size:17px}
.sound-panel label{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700}
.sound-panel output{font:12px var(--mono);color:var(--muted)}
.sound-panel input{width:100%;margin:0;min-height:28px;accent-color:var(--accent);cursor:pointer}
.sound-panel input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blink{50%{opacity:.25}}

/* Shell */
.shell{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:22px;position:relative;z-index:1}
.main{min-width:0;max-width:520px;width:100%;margin:0 auto}
.side{min-width:0;max-width:520px;width:100%;margin:0 auto}
@media (min-width:960px){
  .shell{grid-template-columns:minmax(0,520px) 330px;justify-content:center;gap:36px}
  .main,.side{margin:0}
  .side{position:sticky;top:18px;align-self:start}
}
@media (max-width:959px){
  body:not([data-screen="home"]):not([data-screen="end"]) .side{display:none}
}
.screen{display:flex;flex-direction:column;gap:20px}
.screen.scr-in{animation:scrin .36s cubic-bezier(.2,.9,.3,1) both}
@keyframes scrin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Home */
.mast{position:relative;display:flex;flex-direction:column;gap:10px;padding-top:36px}
.mast h1{font-family:var(--display);font-weight:400;font-size:88px;line-height:1;letter-spacing:0;color:var(--ink)}
.mast h1 .l2{display:block;color:var(--accent);margin-left:.35em;white-space:nowrap;text-shadow:3px 3px 0 var(--accent-soft);position:relative;width:fit-content}
.mast h1 .l2::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:7px;background:var(--marker);clip-path:polygon(0 20%,95% 0,100% 80%,4% 100%)}
.mast h1{text-shadow:3px 3px 0 var(--accent-soft);position:relative;margin:0 0 12px}
.mast h1::after{content:"✦";position:absolute;right:18px;top:26px;font-size:32px;color:var(--marker);text-shadow:2px 2px 0 var(--ink)}
/* Brand pair: the site is unsae.life, so 운 and 새 carry the title. */
.mast h1 .hi{display:inline-block;font-size:1.36em;line-height:1;color:var(--accent-deep);transform-origin:50% 92%;animation:hipop .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes hipop{from{transform:scale(.7);opacity:.15}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.mast h1 .hi{animation:none}}
.sign{font-family:var(--hand);font-size:28px;line-height:1;color:var(--ink);text-align:right;margin:-6px 6px 0 0;transform:rotate(-6deg);opacity:.9}
.credit{font-size:13px;color:var(--muted);text-align:center}
.credit b{font-family:var(--hand);font-size:22px;font-weight:400;color:var(--ink)}
.credit a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.credit a:hover{text-decoration:underline}
.feedback-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1.5px solid var(--accent);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13.5px;font-weight:700;text-decoration:none;box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 28%,transparent);transition:transform .1s}
.feedback-chip .fb-ic{width:15px;height:15px;flex:none}
.feedback-chip:hover{transform:translateY(-1px);text-decoration:underline}
.feedback-chip:active{transform:translateY(1px);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 28%,transparent)}
.copyright{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;letter-spacing:.02em}
.about-entry{border-color:var(--accent);color:var(--accent);min-height:52px}
#aboutSheet .use-policy{margin-top:16px}
/* 만든 사람: 양센세 · 인스타그램 */
.maker{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--card);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:700;box-shadow:0 3px 0 var(--line);margin:-4px 0 0}
.maker:hover{border-color:var(--accent)}
.maker .at{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:700 15px/1 var(--mono)}
.maker .l{color:var(--muted);font-weight:600}
.maker .ig{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
.maker .ig-ic{width:14px;height:14px;flex:none;color:var(--accent)}
.makercard{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--accent-soft);color:var(--ink);text-decoration:none;box-shadow:0 10px 24px -16px var(--sprite-shadow)}
.makercard .mk-sign{font-family:var(--hand);font-size:36px;line-height:1;color:#FFB627;transform:rotate(-7deg);padding:0 2px}
.makercard .mk-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.makercard .mk-tx b{font-size:15.5px;line-height:1.35}
.makercard .mk-tx span{font-size:13.5px;color:var(--muted)}
.makercard .mk-go{grid-column:1/-1;text-align:center;background:#FFB627;color:#1A1F42;font-weight:800;border-radius:12px;padding:10px 14px;font-size:15px;white-space:nowrap}
.makercard:hover .mk-go{filter:brightness(1.08)}
.sticker{position:absolute;right:4px;top:6px;transform:rotate(8deg);background:var(--marker);color:var(--on-marker);font-family:var(--display);font-size:17px;padding:6px 12px 5px;border-radius:6px;box-shadow:2px 3px 0 var(--ink)}
.sticker.sticker-ver{font-size:11.5px;padding:3px 8px 2px;font-family:var(--mono);font-weight:700;transform:rotate(5deg)}
.sticker-ver .patchnote{display:block;margin-top:2px;font-size:8.5px;font-weight:500;letter-spacing:-.2px;opacity:.82;line-height:1.25}
.lede{color:var(--muted);max-width:34ch;font-size:16.5px}
.rack{position:relative;aspect-ratio:100/60;margin-block:-2px 0}
.rack-campus{position:absolute;left:0;bottom:0;width:100%;height:65%;object-fit:cover;image-rendering:pixelated;opacity:.28;z-index:0;mask-image:linear-gradient(transparent, var(--ink) 50%);}
.rack .rail{position:absolute;left:2%;right:2%;top:9px;height:7px;border-radius:4px;background:linear-gradient(#C3C8D8,#8E93A6);box-shadow:0 2px 0 rgba(20,24,60,.12);z-index:1}
.rack .rail::before,.rack .rail::after{content:"";position:absolute;top:-5px;width:11px;height:17px;border-radius:4px;background:#8E93A6}
.rack .rail::before{left:-5px} .rack .rail::after{right:-5px}
.rack .jw{position:absolute;top:12px;transform-origin:50% 0;z-index:2}
.rack .j1{left:3%;width:35%;animation:sway 5.6s ease-in-out infinite}
.rack .j2{left:50%;width:44%;margin-left:-22%;z-index:3;animation:sway 4.8s ease-in-out -1s infinite}
.rack .j3{right:3%;width:35%;animation:sway 6.2s ease-in-out -2.4s infinite}
.rack .j1 .jacket,.rack .j3 .jacket{filter:drop-shadow(0 8px 10px rgba(20,24,60,.18)) saturate(1)}
@keyframes sway{0%,100%{rotate:-1.8deg}50%{rotate:1.8deg}}

.cta{appearance:none;border:0;border-radius:4px;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-size:26px;padding:16px 20px 15px;width:100%;box-shadow:0 6px 0 var(--accent-deep);transition:transform .08s, box-shadow .08s;display:flex;align-items:center;justify-content:center;gap:12px}
:root[data-theme="dark"] .cta{box-shadow:0 6px 0 #3B47A8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cta{box-shadow:0 6px 0 #3B47A8}}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 var(--accent-deep)}
.cta:disabled{opacity:.45;cursor:not-allowed}
.cta .cap{width:24px;height:22px;border-radius:4px;border:2px solid var(--accent-ink);flex:none;background:linear-gradient(var(--accent-ink),var(--accent-ink)) center/4px 100% no-repeat,linear-gradient(var(--accent-ink),var(--accent-ink)) 0 5px/100% 2px no-repeat}
.ghost{appearance:none;border:1.5px solid var(--line);background:var(--card);border-radius:4px;padding:12px 14px;font-weight:600;width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ghost:hover:not(:disabled){border-color:var(--accent)}
.ghost .sub{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.ghost .ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.ghost .ic svg{width:20px;height:20px}
.ghost .tx{flex:1;min-width:0}
.ghost:disabled{opacity:.45;cursor:not-allowed}
.ghost.center{justify-content:center;text-align:center}
a.ghost{color:inherit;text-decoration:none}a.ghost:hover{border-color:var(--accent)}a.ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menu{display:flex;flex-direction:column;gap:8px}
.hint{font-size:13.5px;color:var(--muted);text-align:center;margin-top:-8px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:14px 16px}
details.panel summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.panel summary::-webkit-details-marker{display:none}
details.panel summary::after{content:"+";font-family:var(--mono);color:var(--muted)}
details.panel[open] summary::after{content:"–"}
.odds{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.odds h4{font-size:14px;display:flex;justify-content:space-between;gap:8px}
.odds h4 .num{font-family:var(--mono);color:var(--muted);font-weight:500}
.odds ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;font-size:13px}
.odds li{display:flex;justify-content:space-between;gap:6px;min-width:0}
.odds li .num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.tierkey{display:flex;flex-wrap:wrap;gap:6px}
.note{font-size:12.5px;color:var(--muted);line-height:1.55}

/* Jacket */
.jacket{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 12px 16px rgba(20,24,60,.22))}
.jk-body{fill:var(--fc,#3B4A8C)}
.jk-sleeve{fill:var(--sl,var(--leather))}
.jk-rib{fill:color-mix(in srgb,var(--fc,#3B4A8C) 70%,#0B0D1A)}
.jk-stripe{fill:none;stroke:var(--trim,var(--leather));stroke-width:2.4}
.jk-seam{fill:none;stroke:rgba(0,0,0,.22);stroke-width:1;stroke-dasharray:3 3}
.jk-name{font-family:var(--display);fill:var(--leather)}
.jk-num{font-family:var(--display);font-size:56px;fill:var(--leather);stroke:color-mix(in srgb,var(--fc,#3B4A8C) 55%,#000);stroke-width:1.4;paint-order:stroke;letter-spacing:0}
.jk-num.out{fill:none;stroke:var(--trim,var(--leather));stroke-width:9;stroke-linejoin:round}
.jk-snap{fill:#D9D3C3;stroke:rgba(0,0,0,.45);stroke-width:1}
.jk-welt{fill:var(--sl,var(--leather));stroke:rgba(0,0,0,.3);stroke-width:.8}
.jk-patch{fill:var(--leather);stroke:var(--trim,color-mix(in srgb,var(--fc,#3B4A8C) 60%,#000));stroke-width:2.6}
.jk-stitch{fill:none;stroke:color-mix(in srgb,var(--fc,#3B4A8C) 70%,#000);stroke-width:1;stroke-dasharray:2.5 2}
.jk-letter{font-family:var(--display);font-size:30px;fill:var(--fc,#3B4A8C)}
.jk-emb{font-family:var(--display);font-size:17px;fill:var(--leather);stroke:var(--trim,transparent);stroke-width:.6}
.jk-star{fill:var(--trim,var(--leather));stroke:rgba(0,0,0,.3);stroke-width:.6}
.jk-hanger{fill:none;stroke:#8E93A6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.jk-knit{fill:none;stroke:rgba(0,0,0,.18);stroke-width:1;stroke-dasharray:1 2.2}
.jk-uni{font-family:var(--body);font-size:8.5px;font-weight:700;fill:var(--leather);letter-spacing:.18em;opacity:.9}
.t-N{--tc:var(--t-n)} .t-R{--tc:var(--t-r);--trim:var(--t-r)} .t-SR{--tc:var(--t-sr);--trim:var(--t-sr)} .t-SSR{--tc:var(--t-ssr);--trim:var(--t-ssr)}
.f-eng{--fc:var(--f-eng)} .f-soc{--fc:var(--f-soc)} .f-hum{--fc:var(--f-hum)} .f-nat{--fc:var(--f-nat)} .f-med{--fc:var(--f-med)} .f-edu{--fc:var(--f-edu)} .f-art{--fc:var(--f-art)}
.tier{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.02em;padding:2px 8px;border-radius:999px;color:#fff;background:var(--tc);white-space:nowrap}

/* Showcase (result hero) */
.showcase{position:relative;border-radius:6px;overflow:hidden;padding:26px 24px 18px;background:var(--card);border:1.5px solid color-mix(in srgb,var(--tc) 45%,var(--line));perspective:900px}
.showcase .tiltee{width:min(78%,300px);margin:0 auto;transform:rotateY(var(--fy,0deg));transition:transform .55s cubic-bezier(.3,1.2,.5,1);position:relative;transform-style:preserve-3d;cursor:pointer;transform-origin:50% 3%;animation:sway 5s ease-in-out infinite}
.showcase .ribbon{position:absolute;top:18px;left:-40px;width:150px;transform:rotate(-45deg);background:var(--tc);color:#fff;text-align:center;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.08em;padding:4px 0 3px;z-index:2;box-shadow:0 3px 8px -2px rgba(0,0,0,.3);pointer-events:none}
.showcase.t-SSR .ribbon{background:linear-gradient(90deg,#A8780A,#F2C94C 50%,#A8780A);color:#2A1F00}
.showcase .face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.showcase .face.ff{position:absolute;inset:0;transform:rotateY(180deg)}
.showcase .tiltee{aspect-ratio:240/270;transform:none;transform-style:flat}
.showcase .face{position:absolute;inset:0;backface-visibility:visible;-webkit-backface-visibility:visible}
.showcase .face.ff{transform:none;visibility:hidden}
.showcase .tiltee.flipped .fb{visibility:hidden}
.showcase .tiltee.flipped .ff{visibility:visible}
.pixel-jacket{aspect-ratio:240/270}
.flipbtn{position:absolute;right:14px;top:14px;appearance:none;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;z-index:3}
.holo{position:relative}
.t-SR .holo::after,.t-SSR .holo::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.55;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.75) 38%,rgba(120,220,255,.6) 45%,rgba(255,120,220,.55) 52%,transparent 66%);background-size:260% 100%;animation:sheen 3.2s ease-in-out infinite;
  -webkit-mask:var(--jkmask) center/contain no-repeat;mask:var(--jkmask) center/contain no-repeat}
.t-SR .holo::after{opacity:.08}
@keyframes sheen{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.idstrip{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;position:relative}
.idstrip .badge{width:42px;height:52px;border-radius:7px;background:var(--fc);color:var(--leather);display:grid;place-items:center;font-family:var(--display);font-size:22px}
.idstrip .nm{display:block;font-family:var(--display);font-size:24px;line-height:1.15}
.idstrip .meta{display:block;font-size:12px;color:var(--muted)}
.idstrip .meta .mono{color:var(--ink)}
.idstrip .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.idstrip .prob{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* Reveal overlay */
.overlay{position:fixed;inset:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px 16px}
.overlay.flash::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--tc) 60%,#fff) 0%,transparent 62%);animation:flash 1s ease-out forwards}
.overlay.t-SSR.flash .stage{animation:jolt .45s ease}
@keyframes flash{from{opacity:.95}to{opacity:0}}
@keyframes jolt{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.stage{width:min(86vw,340px);display:flex;flex-direction:column;align-items:center;gap:18px;position:relative}
.stage .pod{position:relative;width:100%;aspect-ratio:1/1;display:grid;place-items:center}
.rays{position:absolute;inset:-40%;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tc,var(--accent)) 32%,transparent) 0 8deg,transparent 8deg 20deg);opacity:0;transition:opacity .5s;animation:spin 9s linear infinite;pointer-events:none;-webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%)}
.stage.open:not(.t-N) .rays{opacity:1}
.box{position:absolute;width:56%;aspect-ratio:1/.9;filter:drop-shadow(0 14px 18px rgba(20,24,60,.3))}
.box i{position:absolute;display:block;border:3px solid var(--ink);background-color:var(--accent);background-image:linear-gradient(90deg,transparent 43%,var(--marker) 43% 57%,transparent 57%);transition:transform .55s cubic-bezier(.5,-.3,.6,1.3),opacity .45s,background-color .4s}
.box .bx{left:0;right:0;top:28%;bottom:0;border-radius:4px 4px 12px 12px}
.box .bx::after{content:"";position:absolute;left:0;right:0;top:0;height:16%;background:rgba(0,0,0,.18)}
.box .lid{left:-7%;right:-7%;top:8%;height:24%;border-radius:8px;z-index:2}
.box .lid::before,.box .lid::after{content:"";position:absolute;bottom:88%;width:24%;height:80%;border:3px solid var(--ink);background:var(--marker);border-radius:60% 60% 8% 60%}
.box .lid::before{left:27%;transform:rotate(-28deg)} .box .lid::after{right:27%;transform:rotate(28deg) scaleX(-1)}
.stage.shake .box{animation:shake .16s linear infinite}
.stage.lit .box i{background-color:var(--tc)}
.stage.lit .box{filter:drop-shadow(0 0 24px var(--tc)) drop-shadow(0 14px 18px rgba(20,24,60,.3))}
.stage.open .box .lid{transform:translate(-8%,-170%) rotate(-24deg);opacity:0}
.stage.open .box .bx{transform:translateY(45%) scale(.85);opacity:0}
.reveal-jacket{width:82%;transform:scale(.2);opacity:0;transition:transform .7s cubic-bezier(.2,1.6,.4,1),opacity .3s}
.stage.open .reveal-jacket{transform:scale(1);opacity:1}
.revcap{font-family:var(--display);font-size:24px;min-height:1.3em;text-align:center;line-height:1.2}
.revcap small{display:block;font-family:var(--body);font-size:14px;color:var(--muted);font-weight:500}
.tapnote{font-size:13px;color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4px,1px) rotate(-4deg)}50%{transform:translate(3px,-2px) rotate(3deg)}75%{transform:translate(-1px,2px) rotate(-1deg)}100%{transform:translate(0,0)}}
@keyframes pop{from{transform:translateY(6px);opacity:.3}to{transform:none;opacity:1}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* Info tabs */
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--sunk);border-radius:12px;padding:4px}
.tab{appearance:none;border:0;background:transparent;border-radius:9px;padding:8px 2px;font-size:13.5px;font-weight:500;color:var(--muted)}
.tab[aria-selected="true"]{background:var(--card);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(10,20,50,.14)}
.info{display:flex;flex-direction:column;gap:14px}
.tabpanel{display:flex;flex-direction:column;gap:16px;padding-top:2px;animation:pop .25s ease}
.info .intro{font-size:17.5px;font-weight:500;line-height:1.55}
.kv{display:flex;flex-direction:column;gap:7px}
.kv .k{font-size:13px;font-weight:700;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:4px 11px;font-size:14px}
.chip.hs{background:color-mix(in srgb,var(--fc,var(--accent)) 10%,var(--card));border-color:color-mix(in srgb,var(--fc,var(--accent)) 35%,var(--line))}
.memo{position:relative;background:color-mix(in srgb,var(--marker) 30%,var(--card));border-radius:4px 14px 14px 14px;padding:12px 14px;font-size:14.5px;box-shadow:2px 3px 0 color-mix(in srgb,var(--ink) 12%,transparent)}
.memo b{display:block;font-size:12.5px;color:var(--muted);margin-bottom:2px}
.meters{display:flex;flex-direction:column;gap:7px}
.meter{display:grid;grid-template-columns:5.5em 1fr;align-items:center;gap:10px;font-size:13.5px}
.dots{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dots i{height:9px;border-radius:3px;background:var(--sunk)}
.dots i.on{background:var(--fc,var(--accent))}
.road{list-style:none;padding:0;display:flex;flex-direction:column;border-left:2px dashed color-mix(in srgb,var(--fc,var(--accent)) 50%,var(--line));margin-left:7px}
.road li{position:relative;padding:0 0 12px 18px;font-size:14.5px}
.road li::before{content:"";position:absolute;left:-8px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--card);border:3px solid var(--fc,var(--accent))}
.road li b{display:block;font-size:12.5px;color:var(--muted)}
.lic{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.lic li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--fc,var(--accent));border-radius:8px;padding:8px 12px;font-size:14.5px}
.checklist{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.checklist li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:14.5px}
.checklist li::before{content:"";width:16px;height:16px;border:2px solid var(--muted);border-radius:4px;margin-top:4px}
.fit{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.fit .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fit .ring{--v:0;width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--v)*1%),var(--sunk) 0);font-family:var(--display);font-size:18px}
.fit .ring span{width:50px;height:50px;border-radius:50%;background:var(--card);display:grid;place-items:center}
.fit ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.fit li{display:grid;grid-template-columns:18px 1fr;gap:6px}
.fit li .m{font-family:var(--mono);font-weight:600}
.fit li.y .m{color:var(--up)} .fit li.n .m{color:var(--muted)}
.linkbtn{appearance:none;border:0;background:none;color:var(--accent);font-weight:700;padding:0;text-align:left}

/* Quiz & housing */
.q{display:flex;flex-direction:column;gap:10px}
.q h3{font-size:17px}
.q .help{font-size:13px;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{appearance:none;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;font-weight:500}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.opts.col{flex-direction:column}
.opts.col .opt{border-radius:12px;text-align:left}
.house{appearance:none;text-align:left;border:1.5px solid var(--line);background:var(--card);border-radius:4px;padding:14px 16px;display:grid;grid-template-columns:52px 1fr;gap:4px 14px;align-items:start}
.house:hover{border-color:var(--accent);transform:translateY(-1px)}
.house .hi{grid-row:span 3;width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.house .hi svg{width:30px;height:30px}
.house b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2}
.house .eff{font-family:var(--mono);font-size:12px;color:var(--muted)}
/* 체험 기간 고르기 (1학기 / 1년) */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode{appearance:none;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:16px;padding:13px 15px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;transition:border-color .15s,box-shadow .15s,background-color .15s}
.mode b{font-family:var(--display);font-weight:400;font-size:27px;line-height:1.1}
.mode span{font-size:14px;color:var(--muted);line-height:1.4}
.mode small{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--muted);margin-top:3px}
.mode:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.mode[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.mode[aria-pressed="true"] small{color:var(--accent)}
.mode .chk{display:none}
.h2.sub2{font-size:27px;margin-top:8px}

/* Play HUD: a dark dashboard in the signboard's navy. The name+calendar part scrolls away; the stat bar stays pinned. */
#play{gap:0}
#pEvent{margin-top:16px}
.hud-top,.hud-bar{background:var(--hud);color:var(--hud-ink);margin-inline:-16px;padding-inline:16px}
.hud-top{padding-block:14px 8px;display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(255,255,255,.07)}
.hud-bar{position:sticky;top:0;z-index:5;padding-block:8px 12px;display:flex;flex-direction:column;gap:9px;border-radius:0 0 20px 20px;box-shadow:0 14px 26px -18px rgba(8,12,40,.75);
  --s-a:#8F9DFF;--s-h:#4FD69A;--s-r:#F78DB8;--s-c:#F8C24F;--up:#62E6A2;--down:#FF8D84}
@media (min-width:560px){ .hud-top{margin-inline:0;border-radius:20px 20px 0 0;border-top:0} .hud-bar{margin-inline:0} }
@media (max-width:559px){ body[data-screen="play"] .shell{padding-top:0} }
.who{display:flex;align-items:center;justify-content:space-between;gap:10px}
.who .l{display:flex;align-items:center;gap:12px;min-width:0}
.who .badge{position:relative;width:36px;height:42px;border-radius:9px;background:var(--fc);color:var(--leather);display:grid;place-items:center;font-family:var(--display);font-size:20px;flex:none;box-shadow:0 3px 0 rgba(0,0,0,.28)}
.who .badge::after{content:"";position:absolute;inset:3px;border:1.5px dashed color-mix(in srgb,var(--leather) 55%,transparent);border-radius:6px}
.who .nmwrap{display:flex;flex-direction:column;min-width:0}
.who .nm{font-family:var(--display);font-size:22px;line-height:1.15;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .sub{font-size:12.5px;color:rgba(255,255,255,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.livechip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.82);white-space:nowrap;flex:none}
.livechip i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55)}
.livechip.on{background:rgba(240,56,79,.24);color:#FF9DAA}
.livechip.on i{background:#FF5A6E;animation:blink 1.4s infinite}
.cal{display:flex;gap:6px;align-items:flex-end}
.cal .mo{display:flex;flex-direction:column;gap:4px;flex:var(--n)}
.cal .mo span{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);white-space:nowrap}
.cal .mo.cur span{color:#fff}
.cal .wk{display:flex;gap:3px}
.cal .wk i{flex:1;height:8px;border-radius:3px;background:rgba(255,255,255,.14)}
.cal .wk i.done{background:#8F9DFF}
.cal .wk i.exam{background:rgba(255,128,118,.36)}
.cal .wk i.exam.done{background:#FF7D72}
.cal .wk i.now{outline:2px solid #fff;outline-offset:1px}
.cal .when{font-family:var(--mono);font-size:12.5px;color:#fff;white-space:nowrap;align-self:flex-end;flex:none;margin-left:4px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.stat{display:grid;grid-template-columns:16px auto 1fr auto;align-items:center;gap:7px;font-size:13px;position:relative}
.stat .si{display:block;width:16px;height:16px;color:var(--sc)}
.stat .si svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.stat .si svg .fill{fill:currentColor;stroke:none}
.stat .lb{font-weight:700}
.stat .bar{height:10px;border-radius:5px;background:var(--sunk);overflow:hidden}
.stat .bar b{display:block;height:100%;width:50%;background:var(--sc);border-radius:5px;transition:width .6s cubic-bezier(.3,1.3,.5,1),box-shadow .4s}
.stat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;min-width:2.1em;text-align:right;color:var(--muted)}
.hud-bar .stat .bar{background:rgba(255,255,255,.13)}
.hud-bar .stat .v{color:#fff;font-weight:600}
.stat.bump .bar b{box-shadow:0 0 14px var(--sc),0 0 3px #fff}
.stat.bump .v{animation:vbump .5s ease}
.stat.bump.up{animation:rowup .7s ease}
.hud-bar .stat.bump.up .v{color:#7CF0B0} .hud-bar .stat.bump.down .v{color:#FF9A92}
.stat.bump.down{animation:rowdown .55s ease}
@keyframes rowup{30%{background:color-mix(in srgb,var(--sc) 28%,transparent);border-radius:8px}}
@keyframes rowdown{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}30%{background:rgba(255,90,80,.22);border-radius:8px}}
@keyframes vbump{40%{transform:scale(1.35)}}
.stat .fl{position:absolute;right:2.4em;top:50%;margin-top:-13px;height:26px;line-height:26px;padding:0 9px;border-radius:9px;background:var(--hud);box-shadow:inset 0 0 0 2px currentColor,0 4px 12px -4px currentColor;font-family:var(--mono);font-size:15px;font-weight:800;pointer-events:none;animation:floatup 2s ease-out forwards;z-index:2}
.stat .fl.up{color:var(--up)} .stat .fl.down{color:var(--down)}
@keyframes floatup{from{transform:translateY(6px) scale(.8);opacity:0}15%{transform:none;opacity:1}75%{transform:translateY(-2px);opacity:1}to{transform:translateY(-6px);opacity:0}}
.statusline{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted)}
.statusline:empty{display:none}
.statusline span{background:var(--sunk);border-radius:7px;padding:2px 9px}
.hud-bar .statusline span{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9)}
.event{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:13px;animation:cardin .42s cubic-bezier(.2,.9,.3,1.08);position:relative;box-shadow:3px 4px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
@keyframes cardin{from{transform:translateX(24px) rotate(.8deg);opacity:0}to{transform:none;opacity:1}}
.event > p{font-size:17px;line-height:1.72}
.event .tag{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--fc,var(--accent));padding:1px 10px;border-radius:6px;margin-bottom:4px}
.evhead{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.evhead .date{width:56px;border-radius:10px;overflow:hidden;border:1.5px solid var(--line);text-align:center;background:var(--card);box-shadow:0 3px 0 var(--line);flex:none;position:relative;z-index:1}
.evhead .date span{display:block;background:var(--fc,var(--accent));color:#fff;font-size:12px;font-weight:700;padding:2px 0}
.evhead .date b{display:block;font-family:var(--display);font-weight:400;font-size:22px;padding:4px 0 3px;color:var(--ink)}
.event.examev .evhead .date span{background:var(--down)}
.event.examev .tag{background:var(--down)}
.evt{min-width:0}
.event h3{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.2}
.choices{display:flex;flex-direction:column;gap:10px}
.choice{appearance:none;text-align:left;border:2px solid color-mix(in srgb,var(--fc,var(--accent)) 22%,var(--line));background:color-mix(in srgb,var(--fc,var(--accent)) 5%,var(--card));border-radius:4px;padding:12px 14px;min-height:56px;font-size:16px;font-weight:500;line-height:1.45;display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;box-shadow:0 3px 0 color-mix(in srgb,var(--fc,var(--accent)) 22%,var(--line));transition:transform .1s,border-color .1s,box-shadow .1s}
.choice .key{width:28px;height:28px;border-radius:8px;border:1.5px solid color-mix(in srgb,var(--fc,var(--accent)) 30%,var(--line));display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);background:var(--card)}
.choice:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 45%,var(--line))}
.choice:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.choice .luck{font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--t-ssr) 18%,var(--card));color:color-mix(in srgb,var(--t-ssr) 55%,var(--ink))}
.choice .luck:empty{display:none}
.choice.unlock{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 60%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--paper))}
.choice.unlock .luck{background:var(--accent-soft);color:var(--accent)}
.choice.locked .luck{background:var(--sunk);color:var(--muted)}
.choice.locked{opacity:.55;cursor:not-allowed;border-style:dashed;box-shadow:none;background:var(--card)}
.choice.picked{border-color:var(--accent);background:var(--accent-soft);opacity:1;box-shadow:0 3px 0 var(--accent)}
.choice.picked .key{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.choice:disabled:not(.picked):not(.locked){opacity:.4;cursor:default;box-shadow:none}
.outcome{border-top:2px dashed var(--line);padding-top:14px;display:flex;flex-direction:column;gap:12px;scroll-margin:118px 0 104px}
.outcome > p{font-size:16.5px;font-weight:500;line-height:1.65}
.outcome > *{animation:pop .3s ease both}
.luckbar{position:relative;height:26px;border-radius:8px;background:color-mix(in srgb,var(--down) 18%,var(--sunk));overflow:visible}
.luckbar .zone{position:absolute;left:0;top:0;bottom:0;width:var(--p);background:color-mix(in srgb,var(--up) 30%,var(--sunk));border-radius:8px 0 0 8px;display:flex;align-items:center;padding-left:9px;font-size:12px;font-weight:700;color:var(--up);white-space:nowrap;transition:background-color .3s}
.luckbar.won .zone{background:color-mix(in srgb,var(--up) 50%,var(--sunk));color:color-mix(in srgb,var(--up) 60%,var(--ink))}
.luckbar.lost{background:color-mix(in srgb,var(--down) 32%,var(--sunk))}
.luckbar .needle{position:absolute;top:-6px;bottom:-6px;width:5px;margin-left:-2.5px;border-radius:3px;background:var(--ink);left:0;box-shadow:0 0 0 2px var(--card);transition:left .85s cubic-bezier(.2,.9,.3,1.15)}
.luckline{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.2}
.luckline.wait{color:var(--muted);animation:blink .7s ease-in-out infinite}
.grading{font-family:var(--display);font-size:21px;color:var(--muted);display:flex;align-items:center;gap:10px}
.grading::before{content:"";width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .7s linear infinite}
.luckline.win{color:var(--up)} .luckline.lose{color:var(--down)}
.examline{display:flex;align-items:baseline;gap:10px}
.examline b{font-family:var(--display);font-weight:400;font-size:44px;line-height:1}
.examline span{font-size:14px;color:var(--muted)}
.deltas{display:flex;flex-wrap:wrap;gap:6px}
.delta{font-family:var(--mono);font-size:13px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--sunk);display:inline-flex;align-items:center;gap:6px}
.delta[style]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dc);flex:none}
.delta.up{color:var(--up)} .delta.down{color:var(--down)}
.delta.small{font-weight:500;opacity:.85}
/* 능력치 변화 패널: 결과 안에서 막대가 차오르고 숫자가 올라가요 */
.statfx{display:flex;flex-direction:column;gap:7px;padding:12px 14px;border-radius:14px;background:var(--sunk);border:1.5px solid var(--line)}
.statfx .sfx-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:700;color:var(--muted)}
.sfx{display:grid;grid-template-columns:18px 2.6em 1fr 3.4em;align-items:center;gap:8px}
.sfx .si{width:18px;height:18px;color:var(--sc)}
.sfx .si svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sfx .si svg .fill{fill:currentColor;stroke:none}
.sfx .lb{font-weight:700;font-size:14px}
.sfx-bar{position:relative;height:14px;border-radius:7px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.sfx-bar .base{position:absolute;left:0;top:0;bottom:0;background:var(--sc);border-radius:7px 0 0 7px}
.sfx-bar .chg{position:absolute;top:0;bottom:0;width:0;transition:width .9s cubic-bezier(.25,1.2,.4,1),opacity .9s}
.sfx.up .chg{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--sc) 70%,#fff) 0 5px,var(--sc) 5px 10px);box-shadow:0 0 10px var(--sc)}
.sfx.down .chg{background:repeating-linear-gradient(-45deg,rgba(240,112,103,.7) 0 5px,rgba(240,112,103,.35) 5px 10px)}
.sfx .sfx-n{font-family:var(--mono);font-weight:800;font-size:19px;text-align:right;font-variant-numeric:tabular-nums}
.sfx.up .sfx-n{color:var(--up)} .sfx.down .sfx-n{color:var(--down)}
.sfx.big .sfx-n{font-size:23px}
.sfx .sfx-v{grid-column:3/5;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:-4px}
.statfx .sfx-note{font-size:12px;color:var(--muted);margin:0}
/* 능력치 돌파 · 위기 경고: 화면 가득 */
.statev{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px 16px;cursor:pointer;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--sc) 55%,#fff) 0%,color-mix(in srgb,var(--sc) 85%,#0E1124) 55%,#0E1124 100%);color:#fff}
.statev .rays{opacity:.9;--tc:#fff}
.statev.down{background:radial-gradient(circle at 50% 40%,#5A1620 0%,#2A0B14 60%,#12060A 100%)}
.statev.down::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 10px rgba(255,70,70,.7),inset 0 0 120px rgba(255,40,40,.55);animation:siren 1s ease-in-out infinite;pointer-events:none}
@keyframes siren{50%{opacity:.35}}
.sev-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;width:min(100%,420px)}
.sev-num{font-family:var(--display);font-size:clamp(120px,40vw,190px);line-height:.85;color:transparent;-webkit-text-stroke:3px rgba(255,255,255,.85);text-shadow:0 0 40px rgba(255,255,255,.35)}
.statev.down .sev-num{-webkit-text-stroke-color:#FF8A80}
.sev-ic{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--sc);display:grid;place-items:center;margin-top:-40px;box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}
.statev.down .sev-ic{background:#FF6B60;color:#fff}
.sev-ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sev-ic svg .fill{fill:currentColor;stroke:none}
.sev-kick{font-weight:800;font-size:15px;letter-spacing:.02em;background:rgba(255,255,255,.18);border-radius:999px;padding:4px 14px}
.sev-t{font-family:var(--display);font-weight:400;font-size:clamp(34px,10vw,46px);line-height:1.1;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.sev-m{font-size:16px;line-height:1.6;color:rgba(255,255,255,.92);max-width:30ch;margin:0}
.sev-fx{font-family:var(--mono);font-weight:800;font-size:15px;background:#FFD54A;color:#2A1F00;border-radius:12px;padding:8px 14px}
.statev.down .sev-fx{background:#fff;color:#8B1D1D}
.statev small{font-size:12.5px;color:rgba(255,255,255,.65);margin-top:6px}
.statev.in .sev-in{animation:sevin .55s cubic-bezier(.2,1.4,.4,1)}
.statev.down.in .sev-in{animation:sevin .45s ease,jolt .5s .2s ease}
@keyframes sevin{from{transform:scale(.6);opacity:0}}
/* 특별 행동 */
.spbanner{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;font-weight:800;font-size:14.5px;color:#3A2A00;background:linear-gradient(100deg,#FFE27A,#FFC94A 45%,#FFB8D2);box-shadow:0 4px 14px -6px rgba(201,150,20,.7);animation:spin-in .5s cubic-bezier(.2,1.4,.4,1)}
.spbanner .st{font-size:20px;line-height:1}
.spbanner .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.spbanner small{font-weight:700;opacity:.8;font-size:12.5px}
/* 잠긴 특별 행동: 선택지 아래 한 줄로 */
.splock{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:1.5px dashed var(--line);background:var(--sunk);font-size:13.5px;color:var(--muted)}
.splock .t{min-width:0}
.splock .t b{color:var(--ink);font-weight:700}
.splock .prog{display:block;width:72px;height:6px;border-radius:3px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.splock .prog b{display:block;height:100%;background:var(--sc,var(--accent));border-radius:3px}
.splock small{display:block;font-family:var(--mono);font-size:11.5px;text-align:right;margin-top:2px}
@keyframes spin-in{from{transform:scale(.85) translateY(-6px);opacity:0}}
.choice.unlock{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(110deg,#F2C94C,#FF8FB1,#7C8CFF,#F2C94C) border-box;background-size:100% 100%,300% 100%;animation:spshine 4s linear infinite;box-shadow:0 3px 0 #C9A227,0 0 22px -8px rgba(242,201,76,.9)}
@keyframes spshine{to{background-position:0 0,300% 0}}
.choice.unlock .key{background:linear-gradient(135deg,#FFE27A,#F2B53C);border-color:#E0A82E;color:#3A2A00}
.choice.unlock .luck{background:linear-gradient(100deg,#FFE27A,#FFC94A);color:#3A2A00;font-weight:800}
.choice .cl{display:flex;flex-direction:column;gap:2px;min-width:0}
.choice .spcost{font-size:12px;font-weight:600;color:color-mix(in srgb,var(--down) 80%,var(--ink))}
.spdone{color:#B07D00} .spdone.fail{color:var(--down)}
.choice.locked .lk{display:flex;flex-direction:column;gap:4px;min-width:0}
.choice.locked .lk .prog{display:block;height:5px;border-radius:3px;background:var(--sunk);overflow:hidden;max-width:180px}
.choice.locked .lk .prog b{display:block;height:100%;background:var(--sc,var(--accent));border-radius:3px}
.choice.locked .lk small{font-size:12px;color:var(--muted)}
.next{appearance:none;border:0;border-radius:14px;background:var(--ink);color:var(--paper);padding:15px;font-size:17px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:10px;width:100%;box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 55%,#000);transition:transform .08s,box-shadow .08s}
.next:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 55%,#000)}
@media (hover:none){ .next kbd{display:none} }
.next kbd{font-family:var(--mono);font-size:11px;opacity:.6;border:1px solid currentColor;border-radius:4px;padding:0 5px}
.terms{background:var(--accent-soft);border:2px solid var(--accent);border-radius:12px;padding:10px 12px;font-size:14px;box-shadow:0 2px 0 var(--line)}
.terms summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline;min-width:0}
.terms summary::-webkit-details-marker{display:none}
.terms summary::after{content:"+";font-family:var(--mono);color:var(--accent);margin-left:auto}
.terms[open] summary::after{content:"–"}
.terms .lbl{font-size:12.5px;font-weight:800;color:var(--accent);white-space:nowrap}
.terms .lbl::before{content:"★";font-size:11px;margin-right:4px}
.terms .tn{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.terms dl{margin:8px 0 2px;display:flex;flex-direction:column;gap:6px}
.terms dt{font-weight:700;font-size:14px}
.terms dt::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:2px;background:var(--marker);margin-right:6px;vertical-align:middle}
.terms dd{margin:0;font-size:14px;color:var(--ink)}

/* Sugang */
.sugang{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0}
.server{width:100%;background:var(--led-bg);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--led)}
.server .lab{font-size:12px;color:#B9BEDF}
.clock{font-family:var(--mono);font-size:44px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-shadow:0 0 10px rgba(255,182,39,.5)}
.clock.open{color:#5CF09A;text-shadow:0 0 10px rgba(92,240,154,.5)}
.regbtn{appearance:none;border:0;border-radius:12px;width:100%;padding:18px;font-family:var(--display);font-size:26px;background:var(--sunk);color:var(--muted)}
.regbtn.live{background:var(--accent);color:var(--accent-ink);box-shadow:0 5px 0 var(--accent-deep)}
.ms{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:center}

/* Transcript */
.transcript{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:22px 16px 18px;display:flex;flex-direction:column;gap:14px;font-size:14px;position:relative;overflow:hidden;box-shadow:0 1px 0 var(--line),0 3px 0 -1px var(--card),0 4px 0 -1px var(--line),0 7px 0 -2px var(--card),0 8px 0 -2px var(--line)}
.wm{position:absolute;inset:-20%;display:flex;flex-wrap:wrap;gap:26px 30px;align-content:flex-start;transform:rotate(-22deg);opacity:.045;pointer-events:none;font-family:var(--display);font-size:22px;color:var(--ink);user-select:none}
.tr-head{text-align:center;display:flex;flex-direction:column;gap:2px;border-bottom:2px solid var(--ink);padding-bottom:12px;position:relative}
.tr-head h2{font-family:var(--display);font-weight:400;font-size:25px}
.tr-head .sub{font-size:12.5px;color:var(--muted)}
.tr-head .no{font-family:var(--mono);font-size:11px;color:var(--muted)}
.tr-meta{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font-size:13px;position:relative}
.tr-meta dt{color:var(--muted)} .tr-meta dd{margin:0;font-weight:500}
.tblwrap{overflow-x:auto;position:relative}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:7px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:11.5px;color:var(--muted);font-weight:500;white-space:nowrap}
td .k{display:block;font-size:11.5px;color:var(--muted)}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.g{font-family:var(--mono);font-weight:600;text-align:right;font-size:15px}
tfoot td{border-bottom:0;border-top:2px solid var(--ink);font-weight:700}
tfoot .gpa{font-family:var(--display);font-weight:400;font-size:22px}
.breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;position:relative}
.breakdown div{background:var(--sunk);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column}
.breakdown span{font-size:11px;color:var(--muted)}
.breakdown b{font-family:var(--mono);font-size:17px}
.tr-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;position:relative}
.tr-foot .date{font-size:13px}
.seal{width:64px;height:64px;border:2.5px solid var(--down);border-radius:6px;color:var(--down);display:grid;grid-template-columns:repeat(3,1fr);place-items:center;font-family:var(--display);font-size:15px;line-height:1;padding:4px;transform:rotate(-4deg);opacity:.85;flex:none}
.barcode{height:26px;display:block}
.stamp{position:absolute;right:14px;top:96px;font-family:var(--display);color:var(--down);border:2.5px solid var(--down);border-radius:8px;padding:2px 10px;transform:rotate(-10deg);font-size:16px;opacity:.85;background:color-mix(in srgb,var(--card) 70%,transparent)}
.stamp.good{color:var(--up);border-color:var(--up)}
.patch{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px;border-radius:18px;background:var(--fc);color:var(--leather);outline:2px dashed color-mix(in srgb,var(--leather) 70%,transparent);outline-offset:-8px}
.patch .em{width:62px;height:62px;border-radius:50%;background:var(--leather);color:var(--fc);display:grid;place-items:center;font-family:var(--display);font-size:28px;flex:none}
.patch .lbl{font-size:12.5px;font-weight:700;opacity:.85}
.patch .ttl{font-family:var(--display);font-size:28px;line-height:1.15;display:block}
.patch p{font-size:14px;opacity:.95}
.patch .lbl .tier{margin-left:4px;vertical-align:1px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--leather) 60%,transparent)}
/* 이번에 얻은 칭호 · 칭호 도감 */
.endgot h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.endgot h3 .num{font-family:var(--mono);font-size:13px;color:var(--muted);font-weight:600}
.endgot .newn{font-size:12px;font-weight:800;color:#fff;background:var(--down);padding:2px 9px;border-radius:999px}
.tchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tchips li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 6px;border-radius:12px;background:var(--card);border:1.5px solid color-mix(in srgb,var(--tc) 45%,var(--line))}
.tchips li b{font-size:14.5px;line-height:1.3}
.tchips li.main{background:color-mix(in srgb,var(--tc) 14%,var(--card));border-width:2px}
.tchips em,.tnline em{font-style:normal;font:800 10.5px var(--mono);color:var(--down)}
.tnline{font-size:13.5px;color:var(--muted);margin:10px 0 0;line-height:1.7}
.tnline .tier{vertical-align:1px;margin-right:4px}
.endgot>.ghost{margin-top:12px}
#endBtns{grid-template-columns:repeat(3,1fr)}
#endBtns .ghost{padding-inline:6px;font-size:15px}
.endgot>.ghost .mono{color:var(--muted);font-size:13px;margin-left:6px}
.tdexkey{display:flex;flex-wrap:wrap;gap:6px}
.tgrp{display:flex;flex-direction:column;gap:8px}
.tgrp h3{font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tgrp h3 span:last-child{font-family:var(--mono);color:var(--muted);font-weight:500;font-size:12.5px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:12px 12px 10px;border-radius:14px;background:var(--card);border:1.5px solid color-mix(in srgb,var(--tc) 45%,var(--line));min-height:128px}
.tcard b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.2}
.tcard p{font-size:13px;line-height:1.5;margin:0}
.tcard small{font-size:11.5px;color:var(--muted);margin-top:auto;line-height:1.4}
.tcard.got.t-SR,.tcard.got.t-SSR{background:linear-gradient(150deg,color-mix(in srgb,var(--tc) 16%,var(--card)),var(--card) 70%)}
.tcard.miss{background:var(--sunk);border-style:dashed;border-color:var(--line)}
.tcard.miss b{color:var(--muted)}
.tcard.miss p{color:var(--muted)}
.tcard.miss .tier{opacity:.6}
.tcard .newt{position:absolute;right:10px;top:10px;font:800 10.5px var(--mono);color:#fff;background:var(--down);border-radius:6px;padding:1px 6px}
.reflect{list-style:none;padding:0;counter-reset:q;display:flex;flex-direction:column;gap:10px}
.reflect li{counter-increment:q;display:grid;grid-template-columns:26px 1fr;gap:8px;font-size:15px}
.reflect li::before{content:counter(q);font-family:var(--mono);font-weight:600;background:var(--marker);color:var(--on-marker);border-radius:6px;text-align:center;height:24px;line-height:24px;font-size:13px}
.links{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.links a{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;text-decoration:none;color:var(--ink)}
.links a b{color:var(--accent)}
.links a span{font-size:13px;color:var(--muted)}
.section{display:flex;flex-direction:column;gap:10px}
.section > h3{font-size:17px}

/* Live side */
.livepanel{display:flex;flex-direction:column;gap:14px}
.livepanel header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.livepanel h2{font-size:16px;display:flex;align-items:center;gap:8px}
.livepanel h2 .count{font-family:var(--mono);font-size:12px;background:var(--sunk);border-radius:999px;padding:1px 8px;color:var(--muted)}
.av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:hsl(var(--h) 62% 48%);border:2px solid var(--card)}
.me-row{display:flex;align-items:center;gap:10px;background:var(--paper);border-radius:12px;padding:8px 10px}
.me-row .nick{flex:1;min-width:0;font-weight:700}
.me-row .nick span{display:block;font-size:12px;color:var(--muted);font-weight:400}
.smallbtn{appearance:none;border:1.5px solid var(--line);background:var(--card);border-radius:9px;padding:5px 10px;font-size:12.5px;font-weight:600;white-space:nowrap}
.peers{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto}
.peers li{display:flex;align-items:center;gap:10px;font-size:13.5px}
.peers li .t{flex:1;min-width:0}
.peers li .t b{display:block;font-weight:600}
.peers li .t span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.livepanel h3{font-size:13.5px;color:var(--muted)}
.feed{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
.feed li{display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:13.5px;animation:pop .35s ease}
.feed li .t{min-width:0}
.feed li time{display:block;font-size:11.5px;color:var(--muted)}
.feed li.hi .t{background:color-mix(in srgb,var(--tc) 12%,transparent);border-radius:8px;padding:2px 8px;margin-left:-8px}
.empty{font-size:13.5px;color:var(--muted);background:var(--paper);border:1.5px dashed var(--line);border-radius:12px;padding:12px}
.board{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.board li{display:grid;grid-template-columns:24px 30px 1fr auto;gap:10px;align-items:center;font-size:13.5px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.board li.me{border-color:var(--accent)}
.board .rk{font-family:var(--mono);font-weight:600;color:var(--muted);text-align:center}
.board .g{font-family:var(--display);font-size:18px}
.board .t span{display:block;font-size:12px;color:var(--muted)}

/* Quick facts & collapsibles */
.quick{display:flex;flex-direction:column;gap:10px}
.qrow{display:grid;grid-template-columns:3.6em 1fr;gap:8px;align-items:center}
.qk{font-size:12.5px;font-weight:700;color:var(--muted)}
.fitchip{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
details.more{background:var(--card);border:1.5px solid var(--line);border-radius:4px;padding:12px 14px}
details.more>summary{cursor:pointer;list-style:none;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"+";font-family:var(--mono);color:var(--accent)}
details.more[open]>summary::after{content:"–"}
details.more[open]>summary{margin-bottom:12px}

/* Luck & romance */
.gacha{display:flex;flex-direction:column;gap:3px;border-radius:14px;padding:11px 14px;border:2px solid;animation:pop .35s ease;position:relative}
.gacha.surprise{animation:cardflip .6s .35s cubic-bezier(.3,1.3,.5,1) both;box-shadow:0 8px 18px -12px rgba(20,24,60,.45)}
@keyframes cardflip{from{transform:perspective(700px) rotateY(-95deg);opacity:0}45%{opacity:1}to{transform:none;opacity:1}}
.gacha .gk{font-size:12px;font-weight:700;opacity:.75}
.gacha.win.big{animation:stampin .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes stampin{from{transform:scale(1.35) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.jolt{animation:jolt .45s ease}
.gacha.win{border-color:var(--t-ssr);background:color-mix(in srgb,var(--t-ssr) 14%,var(--card))}
.gacha.lose{border-color:var(--down);background:color-mix(in srgb,var(--down) 10%,var(--card))}
.gacha b{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.25}
.gacha span{font-size:14.5px}
.delta.love{color:var(--s-r)}
.statusline .love{background:color-mix(in srgb,var(--s-r) 16%,var(--sunk));color:var(--s-r);font-weight:700}
.hud-bar .statusline .love{background:rgba(247,141,184,.2);color:#FFB8D2}
.statusline .luckchip{font-weight:700}
.luckchip.lv0,.luckchip.lv1{color:var(--up)} .luckchip.lv3,.luckchip.lv4{color:var(--down)}
.event.romance{border-color:color-mix(in srgb,var(--s-r) 45%,var(--line))}
.event.romance .tag{background:var(--s-r)}
.event.sig .tag{background:var(--ink);color:var(--paper)}
td .k em{font-style:normal;font-weight:600}
td .k em.bless{color:var(--up)} td .k em.curse{color:var(--down)}
td.g.pending{color:var(--muted)}
td.g.flip{animation:pop .3s ease}
.stamp.big{font-size:19px;padding:4px 12px}
.lovecard{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--s-r) 10%,var(--card));border:1.5px solid color-mix(in srgb,var(--s-r) 40%,var(--line))}
.lovecard .hi{width:48px;height:48px;border-radius:50%;background:var(--s-r);display:grid;place-items:center}
.lovecard .hi svg{width:24px;height:24px;fill:#fff}
.lovecard .lbl{display:block;font-size:12.5px;font-weight:700;color:var(--s-r)}
.lovecard b{font-family:var(--display);font-weight:400;font-size:24px;display:block;line-height:1.2}
.lovecard p{font-size:14px}
/* 1년 체험: 학년 평점 · 2학년 계획 */
.yearbox{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px}
.yearbox div{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.yearbox span{font-size:12.5px;font-weight:700;color:var(--muted)}
.yearbox b{font-family:var(--mono);font-size:24px;font-weight:600;line-height:1.2}
.yearbox .all{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)}
.yearbox .all span{color:inherit;opacity:.85}
.yearbox .all b{font-size:28px}
.yearbox .all small{font-size:12px;opacity:.85}
.plancard{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--s-c) 10%,var(--card));border:1.5px solid color-mix(in srgb,var(--s-c) 40%,var(--line))}
.plancard .hi{width:48px;height:48px;border-radius:50%;background:var(--s-c);display:grid;place-items:center}
.plancard .hi svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plancard .lbl{display:block;font-size:12.5px;font-weight:700;color:color-mix(in srgb,var(--s-c) 80%,var(--ink))}
.plancard b{font-family:var(--display);font-weight:400;font-size:24px;display:block;line-height:1.2}
.plancard p{font-size:14px}
.halfnote{font-size:14.5px}
.logsem{font-size:13px;font-weight:700;color:var(--muted);margin:10px 0 6px}
.logsem:first-of-type{margin-top:0}
.cookie-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px}
.plate{position:absolute;left:50%;top:64%;width:min(82%,320px);aspect-ratio:3/1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 14%,transparent),transparent)}
.cookie{appearance:none;border:0;background:none;padding:0;width:min(80%,300px);display:block;cursor:pointer;position:relative}
.cookie svg{width:100%;height:auto;overflow:visible;display:block;filter:drop-shadow(0 10px 10px rgba(110,70,20,.25))}
.ck-shell{fill:url(#ckg);stroke:#8A5A1C;stroke-width:2.6;stroke-linejoin:round}
.ck-inner{fill:#B9772A;stroke:#8A5A1C;stroke-width:2}
.ck-inner{transition:opacity .3s}
.cookie.open .ck-inner{opacity:0}
.ck-paper{transform-box:fill-box;transform-origin:center}
.cookie.open .ck-paper{animation:paperup .6s .2s cubic-bezier(.3,1.5,.5,1) both}
@keyframes paperup{from{transform:translateY(10px) scale(.6)}to{transform:translateY(-8px) scale(1.15)}}
.ck-edge{fill:none;stroke:#8A5A1C;stroke-width:1.2;opacity:.35;stroke-dasharray:2 3}
.ck-dots circle{fill:#A86B26;opacity:.4}
.ck-paper{fill:#FFFDF4;stroke:#E2C98E;stroke-width:1;opacity:0;transition:opacity .3s .25s}
#ckL,#ckR{transform-box:view-box;transform-origin:140px 150px;transition:transform .7s cubic-bezier(.25,1.5,.45,1)}
.cookie:not(.open):not(.crack) svg{animation:wobble 2.8s ease-in-out infinite}
.cookie.crack svg{animation:shake .12s linear infinite}
.cookie.open #ckL{transform:translate(-40px,16px) rotate(-18deg)}
.cookie.open #ckR{transform:translate(40px,16px) rotate(18deg)}
.cookie.open .ck-paper{opacity:1}
.crumbs polygon{fill:#D9A04A;stroke:#8A5A1C;stroke-width:.6;opacity:0}
.cookie.open .crumbs polygon{animation:crumb .9s ease-out forwards}
.cookie-stage .tap{font-size:13.5px;color:var(--muted);font-weight:600;transition:opacity .3s}
.cookie.open + .tap{opacity:0}
@keyframes wobble{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-5deg)}82%{transform:rotate(4deg)}88%{transform:rotate(-2deg)}}
@keyframes crumb{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(140deg)}}
.slip{position:relative;background:#FFFDF4;color:#2A2410;border-radius:3px;padding:16px 18px 14px;box-shadow:0 10px 24px -12px rgba(60,40,10,.45);display:flex;flex-direction:column;gap:10px;animation:unroll .6s cubic-bezier(.3,1.2,.5,1) both;
  background-image:repeating-linear-gradient(transparent 0 27px,rgba(201,61,54,.08) 27px 28px);border-left:6px solid #E8C98A;border-right:6px solid #E8C98A}
@keyframes unroll{from{clip-path:inset(0 50% 0 50%);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
.sl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sl-top small{font-size:12px;color:#7A6A40;font-weight:700;letter-spacing:.04em}
.sl-stamp{font-family:var(--display);font-size:24px;line-height:1;padding:6px 12px 5px;border:3px solid currentColor;border-radius:8px;transform:rotate(-4deg);background:rgba(255,255,255,.6)}
.slip.lv0 .sl-stamp,.slip.lv1 .sl-stamp{color:#1C8A55} .slip.lv2 .sl-stamp{color:#2F45E8} .slip.lv3 .sl-stamp,.slip.lv4 .sl-stamp{color:#C93D36}
.sl-msg{font-size:15.5px;font-weight:600;line-height:1.5}
.sl-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;border-top:1.5px dashed #E2C98E;padding-top:10px}
.sl-meta span{display:flex;flex-direction:column;font-size:11px;color:#7A6A40;min-width:0}
.sl-meta b{font-size:13.5px;color:#2A2410;font-weight:700}
.fmeter{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.fmeter i{height:10px;border-radius:3px;background:#EFE6CF;position:relative}
.fmeter i.on{background:currentColor}
.slip.lv0 .fmeter,.slip.lv1 .fmeter{color:#1C8A55} .slip.lv2 .fmeter{color:#2F45E8} .slip.lv3 .fmeter,.slip.lv4 .fmeter{color:#C93D36}
.fmeter-l{display:flex;justify-content:space-between;font-size:10.5px;color:#7A6A40;margin-top:3px}

/* Class mode (반 코드) */
.board-head{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:stretch}
.codebox,.sizebox{background:var(--led-bg);color:var(--led);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;position:relative}
.codebox .lbl,.sizebox .lbl{font-size:12px;color:#B9BEDF;font-weight:600}
.codebox .code{font-family:var(--mono);font-weight:600;font-size:clamp(34px,10vw,56px);letter-spacing:.18em;line-height:1.1;text-shadow:0 0 12px rgba(255,182,39,.55)}
.codebox .smallbtn{position:absolute;right:12px;top:10px;background:transparent;color:#DDE1F7;border-color:#3A3F66}
.sizebox{align-items:center;justify-content:center}
.stepwrap{display:flex;align-items:center;gap:8px}
.stepwrap b{font-family:var(--mono);font-size:26px;min-width:2ch;text-align:center;color:#fff}
.stepper{appearance:none;width:32px;height:32px;border-radius:50%;border:1.5px solid #3A3F66;background:transparent;color:#fff;font-size:18px;line-height:1}
.howto{grid-column:1/-1;list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:h}
.howto li{counter-increment:h;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 6px;font-size:13.5px;display:flex;align-items:center;gap:6px}
.howto li::before{content:counter(h);width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;display:grid;place-items:center}
.board-ctl{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.seatgrid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
@media (min-width:960px){ .seatgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))} }
.seat{appearance:none;width:100%;height:158px;border:0;padding:0;background:none;position:relative;perspective:700px;cursor:pointer}
.sface{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s cubic-bezier(.3,1.3,.5,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;padding:8px}
.sback{background:var(--accent);color:var(--accent-ink);border:2px solid var(--accent-deep);background-image:repeating-linear-gradient(45deg,transparent 0 9px,rgba(255,255,255,.08) 9px 10px),radial-gradient(circle at 50% 42%,rgba(255,255,255,.18) 0 34%,transparent 35%)}
.sback b{font-family:var(--display);font-weight:400;font-size:44px;line-height:1}
.sback i{font-style:normal;font-size:13px;opacity:.85}
.seat:hover .sback{transform:translateY(-3px)}
.sfront{background:var(--card);border:2px solid var(--line);transform:rotateY(180deg)}
.sfront .jacket{width:62%;filter:drop-shadow(0 3px 4px rgba(20,24,60,.2))}
.sfront small{font-size:11.5px;color:var(--muted)}
.sfront b{font-size:13.5px;line-height:1.2}
.sfront em{font-style:normal;font-size:10.5px;padding:1px 7px}
.seat.open .sback{transform:rotateY(-180deg)}
.seat.open .sfront{transform:rotateY(0)}
.seat.t-SR .sfront,.seat.t-SSR .sfront{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 9%,var(--card))}
.joinbox{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:16px}
.joinbox label{font-size:13px;font-weight:700;color:var(--muted);grid-row:1}
.joinbox input{font:inherit;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:10px 12px;min-width:0;grid-row:2}
.joinbox input:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.codein{font-family:var(--mono)!important;font-size:28px!important;letter-spacing:.2em;text-transform:uppercase}
.numin{font-family:var(--display)!important;font-size:28px!important}
.jerr{color:var(--down);font-size:14px;min-height:1.2em}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:960px){
  body[data-screen="class"] .shell{grid-template-columns:minmax(0,980px)}
  body[data-screen="class"] .main{max-width:980px}
  body[data-screen="class"] .side{display:none}
}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.15;overflow-wrap:anywhere}
.tile span{font-size:12px;color:var(--muted)}
.cmpwrap{display:flex;flex-direction:column;gap:12px}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;vertical-align:middle;margin-right:6px}
.legend .lb{width:16px;height:10px;background:var(--accent);border-radius:0 3px 3px 0}
.legend .lr{width:2px;height:14px;background:var(--ink)}
.cmp{display:flex;flex-direction:column;gap:12px}
.cmp .row{display:grid;grid-template-columns:5.6em 1fr 7.4em;gap:10px;align-items:center;font-size:13.5px;border-radius:8px}
.cmp .row:hover{background:var(--sunk)}
.cmp .trk{position:relative;height:14px;background:var(--sunk);border-radius:2px}
.cmp .bar{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:0 4px 4px 0;transition:width .5s cubic-bezier(.3,1.2,.5,1)}
.cmp .ref{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px}
.cmp .val{font-family:var(--mono);font-size:12px;text-align:right;color:var(--muted);white-space:nowrap}
.cmp .val b{color:var(--ink);font-weight:600}
.confirm{background:color-mix(in srgb,var(--down) 10%,var(--card));border:1.5px solid var(--down);border-radius:4px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.ghost.danger{border-color:var(--down);color:var(--down)}

/* Dex & glossary */
.dexgrp{display:flex;flex-direction:column;gap:8px}
.dexgrp h3{font-size:14.5px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.dexgrp h3 i{width:12px;height:12px;border-radius:3px;background:var(--fc);display:inline-block;margin-right:6px}
.dexgrp h3 span{font-family:var(--mono);color:var(--muted);font-weight:500;font-size:12.5px}
.dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
button.dx{appearance:none;text-align:left;cursor:pointer}
.dx{border-radius:12px;padding:8px 6px 8px;font-size:12.5px;display:flex;flex-direction:column;align-items:center;gap:2px;border:1.5px solid var(--line);background:var(--card);position:relative;text-align:center}
.dx .jacket{width:78%;filter:drop-shadow(0 3px 4px rgba(20,24,60,.2))}
.dx .nm{line-height:1.25;font-weight:600}
.dx.miss .jacket{opacity:.5;filter:none}
.dx.miss .nm{font-weight:500;color:var(--ink);opacity:.8}
.dx.miss:hover{border-color:var(--accent);background:var(--card)}
.dx.got{border-color:var(--tc)}
.dx.got:hover{background:color-mix(in srgb,var(--tc) 8%,var(--card))}
.dx.miss{background:var(--sunk);color:var(--muted);border-style:dashed}
.dx .t{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--tc)}
.dx.miss .t{color:var(--muted)}
.dexbar{height:10px;border-radius:5px;background:var(--sunk);overflow:hidden}
.dexbar b{display:block;height:100%;background:var(--accent);border-radius:5px}
.gloss{display:flex;flex-direction:column;gap:8px}
.gl{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.gl h4{font-size:15px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.gl h4 em{font-style:normal;background:linear-gradient(transparent 58%,var(--marker) 58%)}
.gl h4 span{font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 8px;white-space:nowrap}
.gl p{font-size:14px}
.backlink{appearance:none;border:0;background:none;color:var(--accent);font-weight:700;padding:0;align-self:flex-start}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:12px;font-size:14px;z-index:30;max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;animation:pop .3s ease;box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.toast .av{border-color:var(--ink);width:26px;height:26px;font-size:12px}

/* Scenes (장면 일러스트): 320×120 flat vignettes on top of each event card */
.scenesvg{display:block;width:100%;height:100%}
.event .scene{margin:-16px -16px 0;aspect-ratio:3/2;height:auto;border-radius:17px 17px 0 0;overflow:hidden;position:relative;background:var(--sc-wall)}
.event .scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(to top,var(--card),transparent);pointer-events:none}
.event .scene + .evhead .date{margin-top:0}
.sc-wall{fill:var(--sc-wall)} .sc-night{fill:var(--sc-night)} .sc-floor{fill:var(--sc-floor)} .sc-sky{fill:var(--sc-sky)}
.sc-a{fill:var(--sc-blue);color:var(--sc-blue)} .sc-b{fill:var(--sc-pink);color:var(--sc-pink)} .sc-c{fill:var(--sc-cream);color:var(--sc-cream)} .sc-d{fill:var(--sc-yellow);color:var(--sc-yellow)} .sc-g{fill:var(--sc-green);color:var(--sc-green)}
.sc-roof{fill:var(--sc-roofc)} .sc-wood,.sc-woodF{fill:var(--sc-wood)} .sc-shade{fill:var(--sc-shade)}
.sc-win{fill:var(--sc-win)} .sc-star{fill:#FFF6D6} .sc-glass{fill:var(--sc-glass)}
.sc-frame{fill:none;stroke:var(--sc-wall);stroke-width:3}
.sc-board{fill:var(--sc-board)} .sc-chalk{fill:none;stroke:var(--sc-chalk);stroke-width:2.2;stroke-linecap:round;opacity:.9}
.sc-card{fill:var(--sc-card)}
.sc-hand,.sc-lamp,.sc-mic,.sc-handle,.sc-steth{fill:none;stroke:var(--sc-ink);stroke-linecap:round;stroke-linejoin:round}
.sc-hand{stroke-width:2} .sc-lamp,.sc-mic{stroke-width:3} .sc-handle,.sc-steth{stroke-width:2.5}
.sc-desk{fill:var(--sc-desk)} .sc-leg{fill:none;stroke:var(--sc-legc);stroke-width:3;stroke-linecap:round}
.sc-sun{fill:var(--sc-sunc)} .sc-moon{fill:#F4E7B5}
.sc-glow{fill:rgb(var(--sc-glowc) / .3)}
.sc-paper{fill:var(--sc-paper)}
.sc-line{fill:none;stroke:var(--sc-ink);stroke-opacity:.3;stroke-width:2.5;stroke-linecap:round}
.sc-line2{fill:none;stroke:#fff;stroke-opacity:.75;stroke-width:2.5;stroke-linecap:round}
.sc-bubble{fill:none;stroke:var(--sc-ink);stroke-opacity:.5;stroke-width:1.2} .sc-bubble.on{fill:var(--sc-ink);fill-opacity:.75}
.sc-glassF{fill:var(--sc-glassf);stroke:var(--sc-ink);stroke-opacity:.3;stroke-width:1.5} .sc-bub{fill:#fff;fill-opacity:.85}
.sc-inkF{fill:var(--sc-ink)} .sc-inkF2{fill:#3B4270}
.sc-rail{fill:none;stroke:var(--sc-ink);stroke-opacity:.35;stroke-width:3} .sc-curtain{fill:var(--sc-curtain)} .sc-fold{fill:none;stroke:#000;stroke-opacity:.07;stroke-width:2}
.sc-screen{fill:#14263A} .sc-pulse{fill:none;stroke:#5CF09A;stroke-width:2;stroke-linejoin:round}
.sc-peg{fill:color-mix(in srgb,var(--sc-desk) 75%,var(--sc-card))} .sc-hole{fill:#000;fill-opacity:.25}
.sc-wrench{fill:none;stroke:#8E96B0;stroke-width:6;stroke-linecap:round} .sc-ring{fill:none;stroke:#8E96B0;stroke-width:4}
.sc-trace{fill:none;stroke:#FFE07A;stroke-width:2} .sc-spark{fill:none;stroke:#FFD54A;stroke-width:2.5;stroke-linecap:round}
.sc-stage{fill:var(--sc-stage)} .sc-beam{fill:#FFF0C8;fill-opacity:.2} .sc-glowS{fill:#FFF0C8;fill-opacity:.32}
.sc-easel{fill:none;stroke:var(--sc-wood);stroke-width:4;stroke-linecap:round}
.sc-note{fill:none;stroke:#FFE7A0;stroke-width:2.5;stroke-linecap:round} .sc-noteF{fill:#FFE7A0}
.sc-cloud{fill:var(--sc-cloudc)}
.sc-bldg{fill:var(--sc-bldg)} .sc-bldg2{fill:var(--sc-bldg2)} .sc-door{fill:var(--sc-ink);fill-opacity:.65}
.sc-grass{fill:var(--sc-grass)} .sc-grassN{fill:#1D3324} .sc-path{fill:var(--sc-paper);fill-opacity:.8}
.sc-trunk{fill:var(--sc-legc)} .sc-tree{fill:var(--sc-tree)}
.sc-fw{fill:none!important;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.sc-wire{fill:none;stroke:var(--sc-ink);stroke-opacity:.45;stroke-width:1.5}
.sc-roofF{fill:var(--sc-red)} .sc-stageF{fill:#3A3F70} .sc-beamY{fill:#FFE68C;fill-opacity:.22}
.sc-stripe{fill:none;stroke:#fff;stroke-opacity:.85;stroke-width:4}
.sc-head{fill:var(--sc-ink)}
.sc-train{fill:var(--sc-train)} .sc-motion{fill:none;stroke:#fff;stroke-opacity:.75;stroke-width:2;stroke-linecap:round}
.sc-frameT{fill:none;stroke:var(--sc-train);stroke-width:4} .sc-strap{fill:none;stroke:#9AA3C0;stroke-width:2} .sc-ringT{fill:none;stroke:#9AA3C0;stroke-width:2.5}
.sc-floorT{fill:color-mix(in srgb,var(--sc-train) 80%,#000)}
.sc-mapbar{fill:var(--sc-ink)} .sc-mapline{fill:none;stroke:#5DBB7A;stroke-width:3}
.sc-cork{fill:var(--sc-cork)} .sc-starF{fill:#FFE45A} .sc-pin{fill:var(--sc-red)} .sc-pinB{fill:var(--sc-blue)}
.sc-softA{fill:var(--sc-blue);fill-opacity:.12} .sc-softB{fill:var(--sc-pink);fill-opacity:.16}
.sc-unread{font:700 9px var(--mono);fill:#FFD54A}
.sc-dot{fill:var(--sc-ink);fill-opacity:.55} .sc-bell{fill:var(--sc-yellow)}
.sc-petal{fill:#F6A6C4} .sc-rain{fill:none;stroke:#9DB4D8;stroke-width:1.5;stroke-linecap:round;stroke-opacity:.8}
.sc-rib{fill:none;stroke:#000;stroke-opacity:.18;stroke-width:1.5}
.sc-skin{fill:var(--sc-skin)} .sc-heart{fill:#F06A9A}
.sc-trend{fill:none;stroke:var(--sc-red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sc-cloudy{fill:var(--sc-cloudy)} .sc-cloudD{fill:var(--sc-cloudd)} .sc-red{fill:var(--sc-red)}
.sc-tissue{fill:#fff;stroke:var(--sc-ink);stroke-opacity:.3}
.sc-ban{font:400 15px var(--display);fill:#fff}
.sc-str{fill:none;stroke:var(--sc-ink);stroke-opacity:.4;stroke-width:1}
.sc-chair{fill:var(--sc-chairc)} .sc-chairS{fill:color-mix(in srgb,var(--sc-chairc) 75%,#000)}
/* small ambient loops inside scenes; all switched off by reduced motion below */
.scenesvg .sc-star{animation:scTw 2.4s ease-in-out infinite}
.scenesvg .sc-bub{animation:scBub 2.4s ease-in infinite}
.scenesvg .sc-pulse{stroke-dasharray:92 60;animation:scPulse 2.2s linear infinite}
.scenesvg .sc-spark{animation:scFlick .5s steps(2) infinite}
.scenesvg .sc-bulb{animation:scTw 1.6s ease-in-out infinite}
.scenesvg .sc-bulb.sc-b{animation-delay:-.4s} .scenesvg .sc-bulb.sc-d{animation-delay:-.8s} .scenesvg .sc-bulb.sc-g{animation-delay:-1.2s}
.scenesvg .sc-fw{stroke-dasharray:12 30;animation:scFw 2.4s ease-out infinite}
.scenesvg .sc-fw.sc-d{animation-delay:-.8s} .scenesvg .sc-fw.sc-g{animation-delay:-1.6s}
.scenesvg .sc-motion{animation:scMove 1.1s linear infinite}
.scenesvg .sc-petal{animation:scPetal 5s ease-in-out infinite alternate}
.scenesvg .sc-rain{stroke-dasharray:6 10;animation:scRain .8s linear infinite}
.scenesvg .sc-heart{transform-box:fill-box;transform-origin:center;animation:scHeart 2.6s ease-in-out infinite}
.scenesvg .sc-dot{animation:scDot 1.2s ease-in-out infinite}
.scenesvg .sc-bell{transform-box:fill-box;transform-origin:50% 0;animation:scBell 2.4s ease-in-out infinite}
.scenesvg .sc-glow{animation:scGlow 3.2s ease-in-out infinite}
.scenesvg .sc-cloud{animation:scDrift 9s ease-in-out infinite alternate}
@keyframes scTw{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes scBub{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-22px);opacity:0}}
@keyframes scPulse{from{stroke-dashoffset:152}to{stroke-dashoffset:0}}
@keyframes scFlick{50%{opacity:.15}}
@keyframes scFw{0%{stroke-dashoffset:12;opacity:1}60%{stroke-dashoffset:-6;opacity:1}100%{stroke-dashoffset:-18;opacity:0}}
@keyframes scMove{from{transform:translateX(26px);opacity:0}30%{opacity:1}to{transform:translateX(-30px);opacity:0}}
@keyframes scPetal{from{translate:-3px -4px}to{translate:4px 5px}}
@keyframes scRain{to{stroke-dashoffset:-16}}
@keyframes scHeart{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.14)}}
@keyframes scDot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}
@keyframes scBell{0%,58%,100%{transform:rotate(0)}64%{transform:rotate(14deg)}72%{transform:rotate(-12deg)}80%{transform:rotate(8deg)}88%{transform:rotate(-4deg)}}
@keyframes scGlow{50%{opacity:.7}}
@keyframes scDrift{from{transform:translateX(-6px)}to{transform:translateX(9px)}}

/* Chapter card (장 넘김): shown when the semester turns a month */
.chapter{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:24px 16px;background:linear-gradient(165deg,var(--ch1,#FFE3EE),var(--ch2,#ECDDF8));color:var(--ink);cursor:pointer}
.chapter[data-season="winter"]{--ch1:#E2ECFB;--ch2:#F6F8FF}
.chapter[data-season="spring"]{--ch1:#FFE2EE;--ch2:#ECDDF8}
.chapter[data-season="may"]{--ch1:#DFF4DA;--ch2:#D3E9F6}
.chapter[data-season="june"]{--ch1:#FFF0C8;--ch2:#FFDCC0}
.chapter[data-season="autumn"]{--ch1:#FFE1C4;--ch2:#F6D4CC}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chapter{
  --ch1:#35203F;--ch2:#1F1A3C}
  :root:not([data-theme="light"]) .chapter[data-season="winter"]{--ch1:#17213D;--ch2:#10162E}
  :root:not([data-theme="light"]) .chapter[data-season="may"]{--ch1:#16302A;--ch2:#132535}
  :root:not([data-theme="light"]) .chapter[data-season="june"]{--ch1:#362B16;--ch2:#2E1F1E}
  :root:not([data-theme="light"]) .chapter[data-season="autumn"]{--ch1:#3A2416;--ch2:#2E1A22}}
:root[data-theme="dark"] .chapter{--ch1:#35203F;--ch2:#1F1A3C}
:root[data-theme="dark"] .chapter[data-season="winter"]{--ch1:#17213D;--ch2:#10162E}
:root[data-theme="dark"] .chapter[data-season="may"]{--ch1:#16302A;--ch2:#132535}
:root[data-theme="dark"] .chapter[data-season="june"]{--ch1:#362B16;--ch2:#2E1F1E}
:root[data-theme="dark"] .chapter[data-season="autumn"]{--ch1:#3A2416;--ch2:#2E1A22}
.chin{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;width:min(100%,440px)}
.chmonth{font-family:var(--display);font-size:clamp(76px,24vw,124px);line-height:.88;color:var(--accent);letter-spacing:-.02em}
.chscene{width:100%;aspect-ratio:320/120;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px -20px rgba(20,24,60,.55);margin-block:6px 4px}
.chtitle{font-family:var(--display);font-weight:400;font-size:clamp(30px,8.5vw,42px);line-height:1.15}
.chsub{font-size:16.5px;color:var(--muted)}
.chin small{font-size:12.5px;color:var(--muted);margin-top:8px}
.chapter.in{animation:chwipe .5s cubic-bezier(.3,.9,.3,1)}
.chapter.in .chin > *{animation:chin .55s cubic-bezier(.2,.9,.3,1.1) both}
.chapter.in .chin > :nth-child(2){animation-delay:.08s} .chapter.in .chin > :nth-child(3){animation-delay:.16s} .chapter.in .chin > :nth-child(4){animation-delay:.24s} .chapter.in .chin > :nth-child(5){animation-delay:.5s}
.chapter.out{animation:chout .28s ease forwards}
@keyframes chwipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes chin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes chout{to{opacity:0;transform:translateX(-24px)}}

/* Sticky action bar: the next step stays under the thumb */
.actbar{position:sticky;bottom:0;z-index:4;margin-inline:-16px;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:stretch;animation:barup .32s cubic-bezier(.2,.9,.3,1.08)}
#pAct{grid-template-columns:1fr}
#result,#idc,#play{min-height:calc(100vh - 58px);min-height:calc(100dvh - 58px)}
body[data-screen="result"],body[data-screen="idc"],body[data-screen="play"]{padding-bottom:0}
#result > .actbar,#idc > .actbar,#pAct{margin-top:auto}
#pEvent{margin-bottom:16px}
@media (max-width:559px){ #play{min-height:calc(100vh - 36px);min-height:calc(100dvh - 36px)} }
@media (min-width:560px){ #result,#idc,#play{padding-bottom:12px} }
@keyframes barup{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@media (min-width:560px){ .actbar{margin-inline:0;bottom:12px;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 14px 30px -16px rgba(10,14,40,.45)} }
.actbar .cta{font-size:22px;padding:13px 16px 12px}
.actbar .ghost{width:auto;justify-content:center;gap:8px;padding:0 16px;white-space:nowrap;border-radius:16px}
.cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 12.5px var(--mono)}
.ghost:disabled .cnt{background:var(--muted)}

/* End banner */
.endban{position:relative;border-radius:22px;overflow:hidden;height:clamp(150px,44vw,214px);box-shadow:0 16px 32px -20px rgba(20,24,60,.55)}
.endban .scenesvg{position:absolute;inset:0}
.endban .endtxt{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(to top,rgba(14,17,40,.78),transparent);color:#fff;display:flex;flex-direction:column;gap:2px}
.endban b{font-family:var(--display);font-weight:400;font-size:clamp(32px,9.5vw,42px);line-height:1.08}
.endban span{font-size:15px;opacity:.94}

/* Minigames: an arcade panel in the HUD navy, one per interactive week */
.mg{position:relative;background:var(--arcade-bg);color:var(--hud-ink);border-radius:16px;overflow:hidden;min-height:330px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);scroll-margin:110px 0 100px}
.mg-intro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px 18px;text-align:center}
.mg-ic{width:60px;height:60px;border-radius:18px;background:color-mix(in srgb,var(--fc,var(--accent)) 88%,#000);display:grid;place-items:center;box-shadow:0 5px 0 rgba(0,0,0,.28)}
.mg-ic svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mg-name{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.15}
.mg-name.sm{font-size:17px}
.mg-intro p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.86);max-width:32ch;margin:0}
.mg-intro small{font-size:12.5px;color:var(--arcade-muted)}
.mg-btns{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%;max-width:340px;margin-top:6px}
.mg-btns .cta{font-size:21px;padding:12px 14px 11px}
.mg-btns .ghost{width:auto;justify-content:center;background:transparent;color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.3);padding:0 16px}
.mg-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px 6px}
.mg-sc{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--led);white-space:nowrap}
.mg-bar{height:6px;margin:0 14px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.mg-bar b{display:block;height:100%;width:100%;background:var(--led);border-radius:3px}
.mg-bar b.low{background:#FF7D72}
.mg-stage{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:280px;padding:12px 14px 14px;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.mg-cd{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:72px;background:rgba(12,15,38,.62);z-index:5}
.mg-cd:empty{background:rgba(12,15,38,.62)}
.mg-cd.pulse{animation:cdpulse .45s ease}
@keyframes cdpulse{from{transform:scale(1.5);opacity:0}}
.mg-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;background:rgba(12,15,38,.82);z-index:6;text-align:center;animation:pop .3s ease}
.mg-over b{font-family:var(--display);font-weight:400;font-size:44px;line-height:1}
.mg-over span{font-size:15px;color:rgba(255,255,255,.88);max-width:30ch}
.mg-over.great b{color:#FFD54A} .mg-over.good b{color:#9ADBFF} .mg-over.bad b{color:#FFA39B}
.mg button{-webkit-tap-highlight-color:transparent;cursor:pointer}
.mg .nope{animation:jolt .35s ease}
/* order */
.mg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(100%,360px);margin:0 auto}
.mg-tile{aspect-ratio:1.2;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font:600 22px var(--mono);box-shadow:inset 0 -3px 0 rgba(0,0,0,.28)}
.mg-tile.ar{font-family:var(--body);font-size:25px}
.mg-tile.ok{background:color-mix(in srgb,var(--fc,var(--accent)) 60%,transparent);opacity:.38}
.mg-legend{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;font-size:12.5px;color:rgba(255,255,255,.72);margin:0 0 10px}
.mg-legend span{display:inline-flex;align-items:baseline;gap:3px}
.mg-legend b{font-size:17px;color:#fff;font-weight:600}
/* code */
.mg-goal{font-size:14.5px;color:#FFE7A0;margin:0 0 8px;font-weight:600}
.mg-code{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.mg-code button{width:100%;display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:center;text-align:left;border:1.5px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:#E8ECFF;border-radius:9px;padding:7px 10px;min-height:40px}
.mg-code .ln{font:500 11px var(--mono);color:rgba(255,255,255,.45)}
.mg-code code{font:500 13.5px/1.45 var(--mono);white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.mg-code button:hover{border-color:rgba(255,255,255,.4)}
.mg-code button.ok{border-color:#5BE39A;background:rgba(91,227,154,.16)}
.mg-code button.nope{border-color:#FF7D72}
.mg-fb{min-height:1.5em;font-size:13.5px;color:#9EF0C2;margin:8px 0 0}
/* stack */
.mg-tower{position:relative;flex:1;min-height:268px;overflow:hidden;cursor:pointer}
.mg-tap{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:12.5px;color:rgba(255,255,255,.5);margin:0}
.mg-ground{position:absolute;left:0;right:0;bottom:0;height:10px;border-radius:4px;background:rgba(255,255,255,.14)}
.mg-blk{position:absolute;height:24px;border-radius:5px;background:color-mix(in srgb,var(--fc,#4D63F0) calc(100% - var(--k)*6%),#fff);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
.mg-blk.base{background:#8E93A6}
.mg-blk.cut,.mg-blk.fall{animation:cutfall .75s ease-in forwards}
@keyframes cutfall{to{transform:translateY(130px) rotate(14deg);opacity:0}}
/* wire */
.mg-wire{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:256px}
.mg-wire .col{display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;position:relative;z-index:2}
.term{width:58px;height:36px;border-radius:10px;border:2.5px solid var(--wc);background:color-mix(in srgb,var(--wc) 20%,transparent);color:#fff;font-size:16px;line-height:1}
.term.sel{background:var(--wc);box-shadow:0 0 0 4px rgba(255,255,255,.32)}
.term.ok{background:var(--wc);opacity:.85}
.mg-wsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.mg-wsvg path{fill:none;stroke-width:6;stroke-linecap:round}
.mg-bulb{width:36px;height:48px;border-radius:50% 50% 42% 42%;background:rgba(255,255,255,.12);box-shadow:inset 0 -9px 0 rgba(0,0,0,.25);position:relative;z-index:2;transition:background-color .3s,box-shadow .3s}
.mg-bulb.on{background:#FFE07A;box-shadow:0 0 26px #FFD54A,inset 0 -9px 0 rgba(0,0,0,.12)}
/* pipette */
.mg-pip{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:stretch;min-height:256px}
.tube{position:relative;margin:6px 0 4px 26px;border:3px solid rgba(255,255,255,.6);border-top:0;border-radius:0 0 18px 18px;background:rgba(255,255,255,.05)}
.tube i{position:absolute;left:0;width:34%;height:2px;margin-bottom:-1px;background:rgba(255,255,255,.55);z-index:1}
.tube i span{position:absolute;right:calc(100% + 8px);top:-8px;font:500 11px var(--mono);color:rgba(255,255,255,.7);white-space:nowrap}
.liq{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:0 0 15px 15px;background:linear-gradient(color-mix(in srgb,var(--fc,#4D63F0) 55%,#fff),var(--fc,#4D63F0))}
.tgt{position:absolute;left:-10px;right:-10px;height:0;border-top:2.5px dashed #FFD54A;z-index:2}
.pside{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.ptgt{font-size:15px;margin:0}
.ptgt b{font-family:var(--mono);color:#FFD54A}
.pnow{font-size:28px;font-weight:600;margin:0}
.hold{border:0;border-radius:16px;padding:20px 10px;font-family:var(--display);font-size:22px;color:#fff;background:var(--fc,var(--accent));box-shadow:0 6px 0 rgba(0,0,0,.32);touch-action:none;-webkit-user-select:none;user-select:none}
.hold.on{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.32);filter:brightness(1.12)}
.pfb{min-height:1.4em;font-size:14px;color:#9EF0C2;margin:0}
/* cpr */
.mg-cpr{display:flex;flex-direction:column;align-items:center;gap:12px}
.chest{position:relative;width:152px;height:152px;border-radius:50%;border:0;background:radial-gradient(circle at 50% 38%,#F7D9BC,#D9A882);color:#5A2E14;font-family:var(--display);font-size:24px;box-shadow:0 8px 0 rgba(0,0,0,.32);touch-action:none}
.chest .ring{position:absolute;inset:-10px;border-radius:50%;border:4px solid #FF7D8E;opacity:0;pointer-events:none}
.chest.beat{animation:press .2s ease}
.chest.beat .ring{animation:ringout .5s ease-out}
@keyframes press{50%{transform:scale(.92)}}
@keyframes ringout{from{opacity:.9;transform:scale(.92)}to{opacity:0;transform:scale(1.25)}}
.bpm{font-size:20px;font-weight:600;min-height:1.4em;margin:0}
.bpm.ok{color:#5BE39A} .bpm.off{color:#FFB15C}
.mg-cpr .dots{display:flex;gap:6px}
.mg-cpr .dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.mg-cpr .dots i.on{background:#FF7D8E}
/* sort */
.mg-sort{display:flex;flex-direction:column;gap:14px;min-height:256px;justify-content:center}
.mg-sort .card{min-height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:16px;border-radius:14px;background:#FFFDF6;color:#1A1F42;font-size:17.5px;font-weight:700;line-height:1.5;box-shadow:0 6px 0 rgba(0,0,0,.28);animation:pop .22s ease;transition:transform .25s,background-color .2s}
.mg-sort .card.ok{background:#D9F7E6} .mg-sort .card.no{background:#FFE1DE}
.mg-sort .card.tol{transform:translateX(-12px) rotate(-2.5deg)} .mg-sort .card.tor{transform:translateX(12px) rotate(2.5deg)}
.mg-sort .ans{font-size:13px;color:#C93D36;font-weight:700}
.mg-sort .ans.ok{color:#1C8A55}
.mg-ox .oxq{margin:0;text-align:center;font-size:14.5px;font-weight:700;color:#FFE7A0}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bins button{border:0;border-radius:14px;padding:14px 8px;font-family:var(--display);font-size:21px;color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.28);display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;line-height:1.15}
.bins button:first-child{background:#3E73D6} .bins button:last-child{background:#C9497F}
.bins kbd{font:500 11px var(--mono);opacity:.65;border:1px solid currentColor;border-radius:4px;padding:0 4px}
/* words */
.mg-words{display:flex;flex-direction:column;gap:12px;min-height:256px;justify-content:center}
.mg-words .mean{font-size:14.5px;color:#FFE7A0;text-align:center;margin:0;font-weight:600}
.mg-words .line{min-height:56px;border-radius:12px;border:2px dashed rgba(255,255,255,.3);display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:8px;margin:0}
.mg-words .line span{background:#FFFDF6;color:#1A1F42;border-radius:8px;padding:5px 10px;font-weight:700;font-size:16px;animation:pop .2s ease}
.mg-words .line.done{border-style:solid;border-color:#5BE39A}
.mg-words .tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wt{border:0;border-radius:10px;padding:10px 14px;font-size:17px;font-weight:700;color:#1A1F42;background:#FFE7A0;box-shadow:0 4px 0 rgba(0,0,0,.28);min-height:46px}
.wt.ok{visibility:hidden}
/* hands */
.mg-hands{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-height:256px;align-content:center}
.kid{position:relative;border:0;border-radius:14px;background:rgba(255,255,255,.07);height:118px;touch-action:none;transition:background-color .15s,box-shadow .15s}
.kid .head{position:absolute;left:50%;top:36px;width:32px;height:32px;margin-left:-16px;border-radius:50%;background:#F2CDA8}
.kid .body{position:absolute;left:50%;top:66px;width:46px;height:36px;margin-left:-23px;border-radius:16px 16px 6px 6px;background:hsl(var(--h) 55% 58%)}
.kid .arm{position:absolute;left:50%;top:70px;width:9px;height:30px;margin-left:15px;border-radius:5px;background:hsl(var(--h) 50% 50%);transform-origin:50% 3px;transform:rotate(-8deg);transition:transform .12s}
.kid.up .arm{transform:rotate(-166deg)}
.kid .bub{position:absolute;left:50%;top:5px;transform:translateX(-50%) scale(0);background:#FFFDF6;color:#1A1F42;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;transition:transform .12s;z-index:2}
.kid.up{background:rgba(255,213,74,.2);box-shadow:inset 0 0 0 2px #FFD54A}
.kid.up .bub{transform:translateX(-50%) scale(1)}
.kid.happy{background:rgba(91,227,154,.24)}
.kid.sad{background:rgba(255,125,114,.16)}
.kid kbd{position:absolute;right:7px;bottom:5px;font:500 10px var(--mono);color:rgba(255,255,255,.4)}
@media (hover:none){ .bins kbd,.kid kbd{display:none} }
/* rhythm */
.mg-rhy{position:relative;display:flex;justify-content:center;min-height:256px;cursor:pointer}
.mg-rhy .lane{position:relative;width:min(170px,52%);height:252px;border-radius:14px;background:linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.1));overflow:hidden}
.mg-rhy .lane.flash{background:linear-gradient(rgba(255,255,255,.03),rgba(255,213,74,.3))}
.mg-rhy .hit{position:absolute;left:8px;right:8px;bottom:22px;height:4px;border-radius:2px;background:#FFD54A;box-shadow:0 0 12px #FFD54A}
.mg-rhy .note{position:absolute;left:14px;right:14px;top:-12px;height:16px;border-radius:8px;background:var(--fc,#A97DF2);box-shadow:0 0 10px color-mix(in srgb,var(--fc,#A97DF2) 70%,transparent);opacity:0;will-change:transform}
.mg-rhy .note.done{visibility:hidden}
.mg-rhy .note.miss{background:rgba(255,255,255,.28);box-shadow:none}
.mg-rhy .judge{position:absolute;left:0;right:0;top:38%;text-align:center;font-family:var(--display);font-size:30px;pointer-events:none;margin:0}
.mg-rhy .judge.pop{animation:jpop .55s ease forwards}
@keyframes jpop{0%{transform:scale(1.25)}70%{opacity:1;transform:none}100%{opacity:0}}
.mg-rhy .judge.p{color:#FFD54A} .mg-rhy .judge.g{color:#9ADBFF} .mg-rhy .judge.m{color:#FFA39B}
/* color */
.mg-color{display:grid;place-items:center;min-height:256px}
.mg-color .grid{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:6px;width:min(100%,250px);aspect-ratio:1}
.mg-color.night .grid{padding:10px;border-radius:14px;background:#0B0E26}
.ct{border:0;border-radius:8px;padding:0;min-width:0}
.ct.round{border-radius:50%}
.ct.tooth{border-radius:40% 40% 46% 46%/34% 34% 62% 62%}
/* memory */
.mg-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-content:center}
.mc{position:relative;aspect-ratio:.82;border:0;padding:0;background:none;perspective:600px}
.mc .bk,.mc .fr{position:absolute;inset:0;border-radius:10px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .35s ease}
.mc .bk{background:var(--accent);background-image:repeating-linear-gradient(45deg,transparent 0 7px,rgba(255,255,255,.12) 7px 8px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.mc .fr{background:#FFFDF6;color:#1A1F42;font-size:12.5px;font-weight:700;padding:6px;line-height:1.3;transform:rotateY(180deg);word-break:keep-all;overflow-wrap:anywhere}
.mc.up .bk{transform:rotateY(-180deg)}
.mc.up .fr{transform:rotateY(0)}
.mc.ok .fr{background:#D9F7E6}
/* balloon */
.mg-bal{position:relative;height:256px;overflow:hidden;border-radius:12px;background:linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.08))}
.bl{position:absolute;bottom:0;width:48px;height:72px;margin-left:-24px;border:0;padding:0;background:none;touch-action:none;will-change:transform}
.bl i{position:absolute;inset:0;display:block}
.bl i::before{content:"";position:absolute;left:1px;top:0;width:46px;height:56px;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6),transparent 30%),var(--bc);box-shadow:inset -5px -7px 0 rgba(0,0,0,.14)}
.bl i::after{content:"";position:absolute;left:23px;top:55px;width:2px;height:16px;background:rgba(255,255,255,.55)}
.bl.gold i::before{box-shadow:0 0 16px #F2C94C,inset -5px -7px 0 rgba(0,0,0,.12)}
.bl.pop i{animation:popb .28s ease-out forwards}
@keyframes popb{to{transform:scale(1.7);opacity:0}}
.bl em{position:absolute;left:0;right:0;top:17px;text-align:center;font:800 15px/1 var(--mono);font-style:normal;color:#3A2A00;pointer-events:none}
.bl.cloud i::before{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.28),transparent 30%),#5B6176;box-shadow:inset -5px -7px 0 rgba(0,0,0,.22)}
.bl.cloud em{color:#FFD9D4}
.bl.pop em{display:none}
.mg-bal .combo{position:absolute;top:8px;left:0;right:0;text-align:center;font-family:var(--display);font-size:24px;line-height:1;color:#FFD54A;margin:0;pointer-events:none;z-index:3;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.mg-bal .combo.neg{color:#FFA39B}
.mg-bal .combo.pop{animation:jpop .7s ease forwards}
/* 2학기 미니게임: 주문 기억하기 */
.mg-cafe{display:flex;flex-direction:column;gap:10px;min-height:256px;justify-content:center}
.mg-cafe .ticket{position:relative;min-height:84px;border-radius:12px;background:#FFFDF6;color:#1A1F42;padding:10px 12px 12px;display:flex;flex-wrap:wrap;gap:6px;align-content:center;align-items:center;justify-content:center;box-shadow:0 5px 0 rgba(0,0,0,.28)}
.mg-cafe .ticket .who{width:100%;text-align:center;font-size:12.5px;font-weight:700;color:#5A6082}
.mg-cafe .ticket .gone{font-size:15px;font-weight:700;color:#5A6082}
.mg-cafe .peek{position:absolute;left:12px;right:12px;bottom:5px;height:3px;border-radius:2px;background:#E9A800;transform-origin:left center}
.mg-cafe .it{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:999px;background:#EEF0F8;font-size:14.5px;font-weight:700;animation:pop .2s ease}
.mg-cafe .it .no{font:600 11px var(--mono);color:#5A6082}
.mg-cafe .tray{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:30px;align-items:center}
.mg-cafe .tray .it{background:rgba(255,255,255,.14);color:#fff}
.mg-cafe .tray .it.no-ok{background:rgba(255,125,114,.3)}
.mg-cafe .tray .it.ok{background:rgba(91,227,154,.28)}
.mg-cafe .menu{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cup{border:0;border-radius:12px;padding:9px 4px 8px;background:rgba(255,255,255,.1);color:#fff;font-size:13.5px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:5px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.28);min-height:64px;line-height:1.2}
.cup:disabled{opacity:.45}
.ci{display:inline-block;width:13px;height:16px;border-radius:2px 2px 5px 5px;background:var(--cc);box-shadow:inset 0 3px 0 rgba(255,255,255,.4)}
.cup .ci{width:20px;height:24px;border-radius:3px 3px 8px 8px}
/* 2학기 미니게임: 빈자리 잡기 */
.mg-seat{display:flex;flex-direction:column;gap:7px;min-height:256px;justify-content:center}
.mg-seat .want{font-size:14.5px;color:#FFE7A0;text-align:center;margin:0 0 3px;font-weight:600}
.srow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;border:1.5px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);color:#E8ECFF;border-radius:10px;padding:8px 12px;min-height:44px;text-align:left;font-size:15px;font-weight:600;transition:background-color .1s,border-color .1s}
.srow .n{font:500 11px var(--mono);color:rgba(255,255,255,.45)}
.srow .cnt{font:600 12.5px var(--mono);color:rgba(255,255,255,.5);white-space:nowrap}
.srow.mine{border-color:#FFD54A;border-width:2px}
.srow.mine .nm::after{content:" ← 내 과목";font-size:12px;color:#FFD54A;font-weight:700}
.srow.open{background:rgba(91,227,154,.24);border-color:#5BE39A}
.srow.open .cnt{color:#5BE39A}
.srow.got{background:#5BE39A;color:#0E2A1C;border-color:#5BE39A}
.srow.got .cnt,.srow.got .n{color:#0E2A1C}
.mg-seat .sfb{min-height:1.4em;font-size:13.5px;color:#9EF0C2;margin:2px 0 0;text-align:center}
.mg-seat .sfb.bad{color:#FFA39B}
@media (hover:none){ .srow .n{display:none} .srow{grid-template-columns:1fr auto} }
/* 2학기 미니게임: 이어달리기 */
.mg-relay{display:flex;flex-direction:column;gap:12px;min-height:256px;justify-content:center}
.mg-relay .track{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 12px 8px;border-radius:12px;background:linear-gradient(#C4553F,#AE4733);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.lane{position:relative;height:40px;border-bottom:2px dashed rgba(255,255,255,.35)}
.lane:last-of-type{border-bottom:0}
.lane .lab{position:absolute;left:0;top:0;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85)}
.runner{position:absolute;bottom:3px;left:4%;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:var(--rc);box-shadow:0 3px 0 rgba(0,0,0,.3),inset 0 0 0 2px rgba(255,255,255,.7);display:grid;place-items:center;font:800 13px var(--body);color:#fff}
.runner.trip{animation:jolt .35s ease}
.finline{position:absolute;right:6%;top:4px;bottom:4px;width:8px;border-radius:2px;background:repeating-linear-gradient(#fff 0 6px,#1A1F42 6px 12px);z-index:0}
.feet{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.foot{border:0;border-radius:16px;min-height:86px;font-family:var(--display);font-size:24px;color:#fff;background:#3E73D6;box-shadow:0 6px 0 rgba(0,0,0,.32);touch-action:none;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .05s}
.foot:last-child{background:#C9497F}
.foot kbd{font:500 11px var(--mono);opacity:.7;border:1px solid currentColor;border-radius:4px;padding:0 4px}
.foot.next{box-shadow:0 6px 0 rgba(0,0,0,.32),0 0 0 3px #FFD54A}
.foot.hit{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.32)}
.mg-relay .rmsg{text-align:center;min-height:1.4em;font-size:14px;color:#9EF0C2;margin:0}
.mg-relay .rmsg.bad{color:#FFA39B}
@media (hover:none){ .foot kbd{display:none} }
.mg-grid.g5{grid-template-columns:repeat(5,1fr);gap:6px}
.mg-grid.g5 .mg-tile{font-size:19px;aspect-ratio:1.05}
/* results */
.mgres{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mgres b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1}
.mgres.great b{color:var(--t-ssr)} .mgres.good b{color:var(--accent)} .mgres.bad b{color:var(--down)}
.mgres span{font-size:14.5px;color:var(--muted)}
.memo.tip{font-size:14.5px}
.mgsum{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;background:var(--sunk);border-left:4px solid var(--accent)}
.mgsum.great{border-left-color:var(--t-ssr)} .mgsum.bad{border-left-color:var(--down)}
.mgsum b{font-family:var(--display);font-weight:400;font-size:19px}
.mgsum span{font-size:14px;color:var(--muted)}
.actlog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.actlog li{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.actlog li>span:last-child{min-width:0}
.actlog .tb{font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:999px;color:#fff;background:var(--accent);white-space:nowrap}
.actlog .great .tb{background:var(--t-ssr);color:#2A1F00} .actlog .bad .tb{background:var(--down)}
.actlog b{display:block;font-size:14px}
.actlog small{display:block;font-size:12px;color:var(--muted);line-height:1.45}

/* Student ID card (학생증) */
.idcard.student-pass{border-radius:8px;box-shadow:4px 5px 0 var(--sprite-shadow);min-height:320px;max-width:480px;overflow:visible}
.pass-front,.pass-back{position:relative;overflow:hidden;border-radius:8px;min-height:320px}
.pass-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:2px solid var(--fc);background:var(--accent-soft)}
.pass-crest{width:30px;flex:none;color:var(--fc)}
.pass-crest svg,.pass-seal svg{display:block;width:100%;height:36px}
.pass-school{min-width:0;display:flex;flex-direction:column;flex:1;line-height:1.4}
.pass-school b{font-size:17px}.pass-school small{font:9px var(--mono);color:var(--muted)}
.pass-kind{font:9px/1.5 var(--mono);text-align:right;color:var(--muted)}
.pass-body{position:relative;display:grid;grid-template-columns:100px minmax(0,1fr);gap:18px;padding:16px}
.pass-photo{align-self:start;border:2px solid var(--line);background:var(--sunk);z-index:1}
.pass-photo svg{display:block;width:100%;height:auto;image-rendering:pixelated}
.pass-photo>span{display:block;font:8px/2 var(--mono);text-align:center;white-space:nowrap;background:var(--fc);color:var(--leather)}
.pass-details{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;z-index:1}
.pass-label{font:9px var(--mono);color:var(--muted)}
.pass-name{font-size:21px;line-height:1.4;overflow-wrap:anywhere;word-break:break-all}
.pass-field{font-size:11px;color:var(--muted)}.pass-major{font-size:14px;overflow-wrap:anywhere}
.pass-number-label{margin-top:6px}.pass-number{font:13px var(--mono);overflow-wrap:anywhere;word-break:break-all}
.pass-tier{font:700 11px var(--body);margin-top:6px;color:var(--fc);border:1px solid currentColor;padding:2px 7px;border-radius:3px}
.t-SSR .pass-tier{color:var(--t-ssr)}.t-SR .pass-tier{color:var(--t-sr)}.t-R .pass-tier{color:var(--t-r)}
.pass-watermark{position:absolute;bottom:0;right:16px;font:90px var(--display);color:var(--grid);pointer-events:none}
.pass-bottom{display:flex;gap:12px;align-items:center;padding:8px 16px 14px;border-top:1px solid var(--line)}
.pass-chip{width:26px;height:21px;border:2px solid var(--t-ssr);background:var(--marker);border-radius:3px}
.pass-valid{display:flex;flex-direction:column;font-size:10px;color:var(--muted);flex:1}.pass-seal{width:24px;color:var(--fc);opacity:.55}
.pass-hologram{font:9px var(--mono);color:var(--accent);border:1px solid var(--line);padding:3px 6px}
.pass-stripe{height:32px;background:var(--ink);margin-top:16px}.pass-backbody{padding:12px 16px}.pass-backbody .pass-top{padding:8px 0;background:none;border-bottom:1px solid var(--line)}
.pass-backtitle{font:12px var(--mono);margin:12px 0;color:var(--accent)}.pass-perks{display:flex;gap:12px;font-size:11px;font-weight:700}
.pass-backnote{font-size:11px;color:var(--muted);margin:10px 0}.pass-barcode{display:flex;align-items:center;justify-content:space-between;gap:8px}.pass-barcode svg{max-width:65%;height:26px}.pass-barcode small{font:10px var(--mono)}
.pass-backfoot{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:12px}
.portrait-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.portrait-option{padding:3px;border:2px solid var(--line);border-radius:4px;background:var(--card);min-width:0;aspect-ratio:4/5}
.portrait-option svg{width:100%;height:100%;display:block}.portrait-option[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.pass-controls{display:flex;justify-content:flex-end}.pass-controls .ghost{width:auto;min-height:36px;padding:4px 14px;font-size:13px}
.cloud-section{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}.cloud-section details{border-top:1px solid var(--line);padding-top:10px}.cloud-section summary{font-weight:700;cursor:pointer}.cloud-section .board{padding:0;list-style:none;margin-top:10px}.cloud-section .board li{grid-template-columns:24px minmax(0,1fr) auto}.cloud-section .board li:has(> .t:first-child){grid-template-columns:minmax(0,1fr) auto}.cloud-section .t{min-width:0;overflow-wrap:anywhere}
@media(max-width:400px){.pass-body{grid-template-columns:80px minmax(0,1fr);gap:12px;padding:12px}.pass-name{font-size:18px}.pass-top{padding:12px;gap:7px}.pass-school b{font-size:15px}.pass-kind{font-size:8px}.portrait-choices{gap:5px}.nickbox .ghost{font-size:13px;padding:8px}.student-pass .idstamp{font-size:14px;bottom:8px;right:50px}}
.idcard{position:relative;width:100%;max-width:440px;margin:0 auto;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 16px 32px -20px rgba(20,24,60,.5);display:flex;flex-direction:column}
.idcard .band{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;background:var(--fc);color:var(--leather)}
.idcard .uni{font-family:var(--display);font-size:19px}
.idcard .kind{font-size:12.5px;font-weight:700;border:1.5px solid currentColor;border-radius:999px;padding:1px 10px}
.idcard .mid{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px;align-items:center}
.idcard .photo{width:86px;height:106px;border-radius:12px;background:hsl(var(--h) 62% 50%);color:#fff;display:grid;place-items:center;font-family:var(--display);font-size:42px;box-shadow:inset 0 -28px 0 rgba(0,0,0,.12)}
.idcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;align-items:baseline;min-width:0}
.idcard dt{font-size:12.5px;color:var(--muted)}
.idcard dd{margin:0;font-size:14.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idcard dd.nm{font-family:var(--display);font-weight:400;font-size:25px;line-height:1.15}
.idcard .foot{display:flex;justify-content:space-between;align-items:center;padding:0 16px 14px;color:var(--ink)}
.idcard .idbadge{width:34px;height:40px;border-radius:8px;background:var(--fc);color:var(--leather);display:grid;place-items:center;font-family:var(--display);font-size:19px}
.idstamp{position:absolute;right:62px;bottom:12px;font-family:var(--display);font-size:22px;color:var(--down);border:3px solid var(--down);border-radius:10px;padding:3px 12px;background:color-mix(in srgb,var(--card) 70%,transparent);transform:rotate(-12deg);opacity:0;pointer-events:none}
.idcard.issued .idstamp{opacity:.94;animation:idstamp .38s cubic-bezier(.3,1.5,.5,1) backwards}
@keyframes idstamp{from{transform:rotate(-12deg) scale(1.8);opacity:0}}
.nickbox{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:stretch}
.nickbox label{grid-column:1/-1;font-size:13px;font-weight:700;color:var(--muted)}
.nickbox input,.nickedit input{font:inherit;font-weight:600;border:2px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);min-width:0}
.nickbox input{font-size:19px;padding:10px 12px}
.nickbox input:focus,.nickedit input:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.nickbox .ghost{width:auto;justify-content:center;white-space:nowrap}
.nickedit{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center}
.nickedit input{padding:7px 10px;font-size:15px}
.actbar.one{grid-template-columns:1fr}
.event > p.choicenote,.choicenote{font-size:13px;color:var(--muted);line-height:1.55;margin-top:-2px}
.choicenote b{color:var(--ink)}
.choicenote .linkbtn{font-size:13px}
.choice .key svg{display:block}
.who .r{display:flex;align-items:center;gap:8px;flex:none}
.helpbtn{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-weight:700;font-size:15px;line-height:1;display:grid;place-items:center;flex:none;padding:0}
.helpbtn:hover{background:rgba(255,255,255,.12)}
.helpbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.gterms{margin:0;display:flex;flex-direction:column;gap:12px}
.gterms dt{font-weight:700;font-size:15.5px}
.gterms dd{margin:2px 0 0;font-size:14.5px;color:var(--muted);line-height:1.6}
.glh{font-size:16px;margin-top:8px}
.gl.game h4 em{background:linear-gradient(transparent 58%,var(--accent-soft) 58%)}
.peers li .t b .mine{font-size:11.5px;font-weight:700;color:var(--accent);margin-left:4px}
.cta .shotic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
#end > .actbar{margin-top:4px}

/* Share sheet (결과 카드) */
.sheet{position:fixed;inset:0;z-index:30;background:rgba(10,12,30,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:end center;padding:12px}
@media (min-width:560px){ .sheet{place-items:center} }
.sheet-in{width:min(100%,460px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;background:var(--card);color:var(--ink);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px;animation:barup .3s cubic-bezier(.2,.9,.3,1.08)}
.sheet-in header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sheet-in h3{font-family:var(--display);font-weight:400;font-size:24px}
.shimg{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);display:block}
#shBtns{display:flex;flex-direction:column;gap:8px}
#shBtns .cta{font-size:21px;padding:13px 16px 12px}
.capture{position:fixed;inset:0;z-index:45;background:#0E1124;display:grid;place-items:center;cursor:zoom-out}
.capture img{display:block;max-width:100vw;max-height:100vh;max-height:100dvh;width:auto;height:auto;object-fit:contain;cursor:default}
.capture img,#shImg{-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.caphint{position:absolute;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);text-align:center;background:rgba(255,255,255,.94);color:#161A36;font-size:14px;font-weight:700;padding:9px 16px;border-radius:999px;box-shadow:0 8px 24px -10px rgba(0,0,0,.6);transition:opacity .4s;pointer-events:none}
.caphint.gone{opacity:0}
.shtxt{width:100%;min-height:190px;font:14.5px/1.6 var(--body);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper);color:var(--ink);resize:vertical}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .ticker .track{transform:none}
}

/* Pixel visual system: limited palettes, stable sprites, readable Korean labels. */
:root { --sprite-outline:oklch(.28 .025 175); --sprite-shadow:oklch(.27 .025 175 / .18); --embroidery:oklch(.94 .035 90); }
.pixel-jacket image,.cookie-image { image-rendering:pixelated; }
.pixel-jacket { filter:drop-shadow(3px 5px 0 var(--sprite-shadow)); }
.jk-pixel-number { font-family:var(--mono);font-weight:600;font-size:52px;fill:var(--embroidery);stroke:var(--sprite-outline);stroke-width:1.5;paint-order:stroke; }
.jk-pixel-letter { font-family:var(--display);font-size:22px;fill:var(--fc); }
.pixel-scene { width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;image-rendering:pixelated;display:block; }
.scene:has(.pixel-scene) { aspect-ratio:3/2;overflow:hidden; }
.endban .pixel-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.maker-mark{width:34px;height:34px;flex:none;object-fit:contain;border-radius:50%;background:var(--embroidery)}
.makercard .maker-mark{width:48px;height:48px}
.use-policy{color:var(--muted);font-size:12px;line-height:1.7;margin-top:10px}
.use-policy summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.use-policy p{margin:8px 0}
.music-caption{font-size:13px;color:var(--accent);margin:4px 0 12px;line-height:1.5}
.pixel-box{aspect-ratio:1;filter:drop-shadow(3px 6px 0 var(--sprite-shadow));pointer-events:none}
.pixel-box img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.gift-body{clip-path:polygon(0 45%,50% 65%,100% 43%,100% 100%,0 100%);z-index:3}
.gift-lid{clip-path:polygon(0 0,100% 0,100% 43%,50% 65%,0 45%);z-index:4;transform-origin:50% 55%}
.stage.open .gift-lid{animation:giftLift .65s ease-out forwards}
.stage.open .gift-body{animation:giftSettle .85s ease-out .35s forwards}
.reveal-jacket{transform:translateY(35px) scale(.68);transition:transform .65s cubic-bezier(.18,.8,.25,1) .16s,opacity .3s .16s}
@keyframes giftLift{0%{transform:none;opacity:1}60%{transform:translateY(-68px) rotate(-10deg);opacity:1}100%{transform:translateY(-110px) rotate(-16deg);opacity:0}}
@keyframes giftSettle{0%{transform:none;opacity:1}100%{transform:translateY(60px);opacity:0}}
@media(prefers-reduced-motion:reduce){.stage.open .gift-lid,.stage.open .gift-body{animation:none;opacity:0}}
.welcome-use{display:block;font-size:14px;color:var(--accent);line-height:1.65}
.dept-count{margin:8px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.dept-count strong{font-size:18px;color:var(--accent)}
.class-tools{margin:16px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:14px}
.class-tools summary{cursor:pointer;line-height:1.6}
.class-tools .menu{margin-top:12px}
@media(max-width:540px) { .mast h1{font-size:72px;} .idstrip .nm{font-size:20px;} }
@media(max-width:360px) { .mast h1{font-size:62px;} }

/* Clear campus surfaces and legible jacket embroidery. */
:root{--sky-soft:oklch(.95 .027 225);--lime-soft:oklch(.95 .055 125);--jacket-edge:oklch(.2 .025 175);--reading-shadow:oklch(.2 .02 175 / .18);--hud-muted:var(--muted)}
:root[data-theme="dark"]{--sky-soft:oklch(.3 .035 225);--lime-soft:oklch(.3 .035 125);--hud:var(--accent-soft)}
:root[data-theme="light"]{color-scheme:light}
.about-link{align-self:flex-start;min-height:36px;font-size:15px}
.lede{max-width:none;color:var(--ink);font-size:15px;line-height:1.7}.lede strong{display:inline-block;font-size:19px;color:var(--accent);line-height:1.5;margin-bottom:6px}
.dept-overview{padding:16px 0;border-block:2px solid var(--line)}
.dept-overview h3{font-size:20px;color:var(--accent);margin-bottom:14px}
.dept-overview dl{margin:0;display:grid;gap:14px}.dept-overview dl>div{min-width:0}.dept-overview dt{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:3px}.dept-overview dd{margin:0;font-size:15px;line-height:1.65}.dept-overview .note{margin-top:14px}
.dept-access{align-self:flex-start;width:auto;padding:7px 12px;font-size:13px;min-height:36px}
.career-note{background:var(--sky-soft);border-left:3px solid var(--accent);padding:10px 12px;font-size:13px!important;line-height:1.65!important;color:var(--ink)}.career-note b{display:block;font-size:11px;color:var(--accent);margin-bottom:3px}
.reading-sheet{border-radius:8px;box-shadow:4px 6px 0 var(--reading-shadow);gap:20px}.reading-sheet header{position:sticky;top:-16px;background:var(--card);padding-block:10px;z-index:1}.reading-sheet p{font-size:15px;line-height:1.8}.reading-sheet #deptSheetBody{display:grid;gap:20px}
.pixel-jacket image{image-rendering:pixelated}.pixel-jacket .jk-name,.pixel-jacket .jk-uni{fill:var(--embroidery);stroke:var(--jacket-edge);stroke-width:2;paint-order:stroke;stroke-linejoin:round;font-weight:700;letter-spacing:0}.pixel-jacket .jk-uni{font-size:10px;opacity:1;stroke-width:1.8}.jk-pixel-number{stroke-width:3;stroke:var(--jacket-edge);font-weight:700}.showcase .tiltee{animation:none;width:min(84%,320px)}.holo::after{display:none}
.hud-top,.hud-bar{color:var(--ink);border-color:var(--line);--s-a:var(--accent);--s-h:var(--up);--s-r:var(--f-hum);--s-c:var(--t-ssr)}
.who .sub,.cal .mo span,.cal .when,.hud-bar .stat .v{color:var(--ink)}.cal .mo span{color:var(--muted)}.cal .mo.cur span{color:var(--accent)}.cal .wk i,.hud-bar .stat .bar{background:var(--line)}.cal .wk i.done{background:var(--accent)}.cal .wk i.now{outline-color:var(--ink)}.hud-bar .statusline span{background:var(--card);color:var(--ink)}
.livechip{background:var(--card);color:var(--muted)}.livechip.on{background:var(--card);color:var(--down)}.helpbtn{border-color:var(--line);color:var(--ink)}.helpbtn:focus-visible{outline-color:var(--accent)}
.idstrip{grid-template-columns:42px minmax(0,1fr);border-radius:8px}.idstrip .right{grid-column:2;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.idstrip .nm{overflow-wrap:anywhere}.tier{letter-spacing:0}
.cloud-section .board li:only-child:not(:has(.rk,.t,.g)){display:block;line-height:1.65}
:root[data-theme="dark"] .cta{box-shadow:0 6px 0 var(--accent-deep)}
.mode[aria-pressed="true"]{background:var(--lime-soft)}
@media(max-width:400px){.sound-panel{right:8px}.reading-sheet h3{font-size:21px}.idstrip{gap:8px}.dept-overview h3{font-size:18px}}

/* Proportion-safe scenes and shorter, readable play screens. */
.explore-entry{border-color:var(--accent);color:var(--accent);min-height:56px;font-size:17px;font-weight:700}
.cta .btn-label,.explore-entry .btn-label{display:block;text-align:center}
.cta .btn-sub{font-size:18px;font-family:var(--body);font-weight:700;letter-spacing:.01em;white-space:nowrap}
.explore-entry .btn-sub{font-size:14px;font-weight:600;white-space:nowrap}
/* Start button: a red flag so the first move is unmistakable, in both themes. */
:root{--start:oklch(.55 .19 25);--start-ink:oklch(.99 0 0);--start-deep:oklch(.39 .15 25)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--start:oklch(.62 .18 25);--start-ink:oklch(.99 0 0);--start-deep:oklch(.44 .14 25)}}
:root[data-theme="dark"]{--start:oklch(.62 .18 25);--start-ink:oklch(.99 0 0);--start-deep:oklch(.44 .14 25)}
#home .cta{background:var(--start);color:var(--start-ink);box-shadow:0 6px 0 var(--start-deep)}
#home .cta:active{box-shadow:0 2px 0 var(--start-deep)}
#home .cta .cap{border-color:var(--start-ink);background:linear-gradient(var(--start-ink),var(--start-ink)) center/4px 100% no-repeat,linear-gradient(var(--start-ink),var(--start-ink)) 0 5px/100% 2px no-repeat}
@media(max-width:699px){#home .cta{font-size:21px;gap:9px}#home .cta .btn-sub{font-size:16px}}
.explore-filters{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.explore-filters label{display:grid;gap:6px;font-size:13px;font-weight:700;min-width:0}
.explore-filters input,.explore-filters select{min-width:0;width:100%;font:inherit;padding:10px;border:1.5px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink)}
.explore-layout{display:grid;gap:18px;min-width:0}
.explore-list{display:grid;gap:6px;max-height:220px;overflow:auto;overscroll-behavior:contain;padding:3px}
.explore-option{min-width:0}.explore-option[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.explore-option .tier{font-size:10px;padding-inline:5px}
.explore-preview{min-width:0}.explore-heading{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center}.explore-heading h3{font-size:24px;line-height:1.3;margin-bottom:8px}
.explore-preview .dept-overview{margin-block:12px}.explore-preview .dept-overview dl{gap:10px}
.event .scene{width:min(100%,270px);margin:0 auto;flex:none;border-radius:8px;aspect-ratio:3/2;background:var(--sc-wall)}
.event .scene::after{display:none}
.chscene{width:min(100%,330px);aspect-ratio:3/2;border-radius:8px;flex:none}
.endban{width:min(100%,360px);aspect-ratio:3/2;height:auto;margin-inline:auto;border-radius:8px;background:var(--sc-wall)}
#home{gap:14px}.mast{padding-top:30px;gap:8px}.rack{width:min(100%,330px);align-self:center;aspect-ratio:100/55}.menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.class-tools .menu{grid-template-columns:1fr}
.mast h1::after{right:0;top:14px}.class-tools{margin-block:6px}
#result,#idc{gap:14px}.showcase{padding-block:12px}.showcase .tiltee{width:min(58%,210px)}
.dept-overview{padding-block:12px}.dept-overview h3{margin-bottom:10px}.dept-overview dl{gap:10px}
.portrait-choices{max-width:390px;width:100%;align-self:center}.portrait-option{max-height:66px}
.shimg{width:auto;max-width:100%;max-height:calc(100dvh - 280px);object-fit:contain;align-self:center}
.who{display:grid;grid-template-columns:minmax(0,1fr) auto}.who .r{flex-shrink:0}
@media(min-width:700px){
 .main{max-width:760px}.shell{max-width:1160px}
 #home{max-width:600px;margin-inline:auto}.mast h1{font-size:80px}.rack{width:300px;aspect-ratio:100/48}
 .explore-layout{grid-template-columns:240px minmax(0,1fr);align-items:start}.explore-list{max-height:460px}
 #result{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:14px 22px;align-content:start}#result>.kicker,#result>.actbar{grid-column:1/-1}#result>.actbar{margin-top:0}.showcase .tiltee{width:min(90%,210px)}
 .event:not(.game):has(>.scene){display:grid;grid-template-columns:210px minmax(0,1fr);gap:10px 18px;align-items:start}
 .event:not(.game)>.scene{grid-column:1;grid-row:1/5;width:100%;margin:0;position:sticky;top:110px}
 .event:not(.game):has(>.scene)>:not(.scene):not(.outcome){grid-column:2}
 .event:not(.game)>.outcome{grid-column:1/-1}
 .event>p{font-size:16px;line-height:1.6}.event .choice{padding:10px;gap:8px;font-size:15px}.choices{gap:8px}
 .hud-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;padding-block:10px}.hud-top .dept-access{justify-self:end}.hud-top .cal{grid-column:1/-1}.hud-bar{padding-block:8px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 #pEvent{margin-top:12px}.event{border-radius:8px;padding:14px;gap:10px}
 #housing{gap:14px}#houseOpts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}.house{grid-template-columns:1fr;padding:12px}.house .hi{grid-row:auto}.house b{font-size:20px}
 #idc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start}#idc>.kicker,#idc>.h2,#idc>.muted,#idc>.actbar{grid-column:1/-1}#idCard{grid-column:1;grid-row:4/8}#idc>.pass-controls,#idc>.portrait-choices,#idc>.nickbox,#idc>#idNote{grid-column:2}#idc>.actbar{margin-top:0}
}
@media(min-width:960px){.shell{grid-template-columns:minmax(0,760px) 280px;gap:28px}.side{max-height:calc(100dvh - 36px);overflow:auto;padding-right:4px}}
@media(max-width:699px){.menu .ghost{padding:10px;gap:8px}.menu .ghost .ic{width:28px;height:28px}.menu .ghost .tx{font-size:14px}.menu .ghost .sub{font-size:11px}.event{gap:10px;border-radius:8px}.event>p{font-size:16px;line-height:1.6}.choices{gap:8px}.event .scene{width:min(100%,240px)}.mast h1::after{display:none}}
@media(max-width:400px){.explore-filters{grid-template-columns:minmax(0,1fr)}.explore-list{max-height:190px}}
.choices:has(.picked) .choice:disabled:not(.picked){display:none}
body{padding-bottom:24px}
@media(max-width:699px){.event .scene{width:min(100%,180px)}.hud-top{gap:8px;padding-block:10px 6px}.hud-bar{gap:6px;padding-bottom:8px}.career-note{padding:8px 10px}.mast{gap:6px}#home{gap:12px}.event>p{line-height:1.55}.choice{padding:10px;gap:8px;font-size:15px}.spbanner{font-size:13px}}
@media(min-width:700px){#home .mast{gap:6px;padding-top:24px}#home .mast h1{font-size:72px}#home .rack{width:270px;aspect-ratio:100/44}#home .dept-count{margin-top:0}#home .cta{padding-block:12px}#home .maker{padding-block:3px}}

/* A jacket-sized opening, collectible-tier pixel celebrations, and campus interludes. */
.stage .pixel-box{width:72%}
.stage .reveal-jacket{width:58%;transform:translateY(45px) scale(.35);z-index:2;transition:transform .5s cubic-bezier(.16,.84,.3,1) .18s,opacity .2s .18s}
.stage.open .reveal-jacket{transform:translateY(-10px) scale(1);opacity:1}
.stage .reveal-tier{font:700 13px var(--mono);color:var(--ink);background:var(--card);border:2px solid var(--tc);padding:4px 14px;opacity:0;transform:translateY(8px);transition:opacity .2s .3s,transform .2s .3s}
.stage.open .reveal-tier{opacity:1;transform:none}
.rarity-sparks{position:absolute;inset:0;pointer-events:none;color:var(--tc);z-index:1}
.rarity-sparks i{position:absolute;left:50%;top:50%;font-style:normal;font-size:22px;opacity:0;--angle:calc(var(--spark)*30deg)}
.stage.open.t-R .rarity-sparks i:nth-child(3n){animation:pixelSpark .65s ease-out .15s both}
.stage.open.t-SR .rarity-sparks i{animation:pixelSpark .8s ease-out calc(.15s + var(--spark)*.015s) both}
.stage.open.t-SSR .rarity-sparks i{font-size:30px;animation:pixelSpark .95s ease-out calc(.15s + var(--spark)*.015s) both}
.stage.open.t-SR .reveal-tier,.stage.open.t-SSR .reveal-tier{background:var(--card);box-shadow:3px 3px 0 var(--tc)}
.stage.open.t-SSR .reveal-jacket{filter:drop-shadow(0 0 8px var(--tc))}
.stage.open.t-SSR .revcap{animation:rareCaption .25s ease-out .3s both}
@keyframes pixelSpark{0%{opacity:0;transform:rotate(var(--angle)) translateX(35px) rotate(calc(-1*var(--angle))) scale(.4)}25%{opacity:1}70%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(140px) rotate(calc(-1*var(--angle))) scale(1)}}
@keyframes rareCaption{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.campus-tip{font-size:13px;line-height:1.6;color:var(--ink);padding:6px 0;min-width:0;text-align:left;font-family:var(--body);font-weight:400;overflow-wrap:anywhere}
#pAct{gap:4px}.chin .campus-tip{max-width:36ch;text-align:center;margin-top:4px}.stage{gap:12px}
@media(min-width:700px){
 #home{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;row-gap:14px;align-content:start;align-items:center}
 #home .mast{grid-column:1;grid-row:1/5;align-self:start;padding-top:28px}
 #home .rack{grid-column:2;grid-row:1;width:100%;max-width:310px;aspect-ratio:100/68;justify-self:center;margin-top:24px}
 #btnDraw{grid-column:2;grid-row:2}#home>.hint{grid-column:2;grid-row:3}#btnExplore{grid-column:2;grid-row:4}#btnAbout{grid-column:2;grid-row:5}
 #home>.menu,#home>.class-tools,#home>#oddsPanel,#home>.credit,#home>.use-policy{grid-column:1/-1}
 #home .mast h1{font-size:68px}#home .mast h1::after{display:none}#home .maker{align-self:flex-start;flex-wrap:wrap;border-radius:8px}#home .maker .l{display:none}
 #home .lede{font-size:14px}#home .lede strong{font-size:19px}#home .sign{text-align:left;align-self:flex-start;margin:0}
 #home>.menu{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px}#home>.menu .ghost{display:grid;grid-template-columns:28px minmax(0,1fr);padding:10px;gap:8px}#home>.menu .ic{width:28px;height:28px}#home>.menu .tx{font-size:13px}#home>.menu .sub{font-size:11px}
 .event.game{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:12px 20px;align-items:start}.event.game>.evhead,.event.game>p{grid-column:1}.event.game>.mg{grid-column:2;grid-row:1/5;min-width:0;min-height:300px}.event.game>.outcome,.event.game>.terms{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.rarity-sparks{display:none}.stage .reveal-tier{transition:none}.stage.open .reveal-jacket{transform:translateY(-10px) scale(1)}}
/* Scope arcade surfaces locally: page HUD changes cannot tint an active quiz. */
.mg{--hud:var(--arcade-bg);--ink:var(--hud-ink);--muted:var(--arcade-muted);background-color:var(--arcade-bg);color:var(--hud-ink);border-radius:8px}
.mg .mg-name,.mg .mg-sc,.mg .mg-intro p,.mg .oxq{color:var(--hud-ink)}
.mg .oxq{font-size:16px;line-height:1.5}.mg .mg-name.sm{font-size:18px}
.mg .mg-sort .card{color:var(--on-marker);background:var(--embroidery)}
.mg .mg-btns .ghost{color:var(--sprite-outline);background:var(--embroidery)}
.mg .mg-btns .cta{background:var(--marker);color:var(--on-marker);box-shadow:0 4px 0 var(--sprite-outline)}
.mg .mg-top{display:grid;grid-template-columns:minmax(0,1fr) auto}.mg .mg-top .mg-name{min-width:0}.mg .mg-sc{flex-shrink:0}
.rack .jw{width:29%;top:12px;margin-left:0;right:auto;transform-origin:50% 0;animation:rackBreeze 4.8s ease-in-out infinite;transform:none}.rack .j1{left:0;width:24%;top:12px;z-index:2;animation-delay:-1.2s}.rack .j2{left:21%;width:24%;top:12px;z-index:2;animation-duration:5.4s;animation-delay:-3s}.rack .j3{left:44%;width:24%;top:12px;z-index:2;animation-duration:5.9s;animation-delay:-.4s}.rack .j4{left:73%;width:24%;top:12px;z-index:2;animation-delay:-2.5s}.rack .j5{left:5%;width:33%;top:16px;z-index:3;animation-duration:5.6s;animation-delay:-.8s}.rack .j6{left:34%;width:34%;top:17px;z-index:4;animation-duration:5.1s;animation-delay:-2.8s}.rack .j7{left:64%;width:33%;top:15px;z-index:3;animation-duration:6.2s;animation-delay:-1.8s}.rack .jk-hanger{stroke:var(--muted)}
@keyframes rackBreeze{0%,100%{rotate:-3deg;translate:-2px 0}50%{rotate:3deg;translate:2px 0}}
.class-tools{border:2px solid var(--accent);border-radius:8px;background:var(--accent-soft);padding:0 14px}.class-tools>summary{min-height:58px;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}.class-tools>summary::before{content:'▸';color:var(--accent)}.class-tools[open]>summary::before{content:'▾'}.class-tools .menu{padding-bottom:14px}
.play-menu{position:relative;color:var(--ink)}.play-menu>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:13px;font-weight:700;list-style:none;white-space:nowrap}.play-menu-items{position:absolute;right:0;top:100%;width:min(260px,80vw);padding:8px;background:var(--card);border:2px solid var(--line);border-radius:8px;z-index:20;display:grid;gap:8px;box-shadow:0 6px 0 var(--line)}.play-menu-items button{min-height:44px}.withdraw{color:var(--hud-ink);background:var(--down);border:2px solid var(--down);border-radius:6px;min-height:44px;padding:10px 14px;font:700 14px var(--body)}.play-menu-items .withdraw{color:var(--hud-ink);background:var(--down)}
.ticker .play-menu{flex:none}.ticker .play-menu>summary{min-height:36px;height:36px;padding:0 12px;color:var(--led);font-size:13px;border-left:1px solid rgba(255,255,255,.08)}.ticker .play-menu[open]>summary{background:rgba(255,255,255,.08)}.play-menu-items .sound-panel{position:static;width:100%;box-shadow:none;padding:10px;border:1px solid var(--line);border-radius:6px;gap:8px}.play-menu-items .menu-item{text-align:left;display:flex;align-items:center;gap:6px;justify-content:flex-start;padding:0 12px}
.withdraw-dialog{width:min(420px,calc(100% - 32px));padding:22px;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:8px}.withdraw-dialog::backdrop{background:color-mix(in srgb,var(--sprite-outline) 65%,transparent)}.withdraw-dialog h2{font-size:21px;line-height:1.4;margin:0 0 12px}.withdraw-dialog p{font-size:15px;line-height:1.7}.withdraw-dialog form{display:grid;gap:10px;margin-top:20px}
.ticker-actions{flex:none;display:flex;align-items:stretch}
.ticker .ticker-icon{min-height:36px;height:36px;width:42px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-left:1px solid rgba(255,255,255,.08);color:var(--led);font-size:15px;cursor:pointer;padding:0}
.ticker .ticker-icon:hover{background:rgba(255,255,255,.08)}
.ticker .ticker-icon .off{opacity:.6}
:root{--danger-action:oklch(.48 .18 27);--danger-action-ink:oklch(.99 0 0)}.withdraw,.play-menu-items .withdraw{background:var(--danger-action);border-color:var(--danger-action);color:var(--danger-action-ink)}
.about-usage{border-top:1px solid var(--line);padding-top:16px}.about-usage h4{font-size:18px;margin:12px 0}.about-usage ol{padding-left:22px;line-height:1.8;font-size:15px}.official-links{list-style:none;padding:0;display:grid;gap:12px}.official-links li{display:grid;gap:3px}.official-links a{color:var(--accent);font-weight:700}.official-links span{font-size:13px;color:var(--muted)}
#btnGloss .tx::before{content:'★';font-size:12px;color:var(--accent);margin-right:5px}#btnGloss{border-color:var(--accent);background:var(--accent-soft)}
.who .r{display:flex;align-items:center;gap:6px}.who .l{min-width:0}.who .livechip{max-width:60px}
@media(max-width:699px){.event .scene{width:calc(100% + 32px);max-width:none;margin:-16px -16px 0;border-radius:8px 8px 0 0;aspect-ratio:3/2}.who .nm{font-size:18px}.who .badge{width:30px}.who .l{gap:6px}}
@media(min-width:700px){.event:not(.game):has(>.scene){grid-template-columns:minmax(0,300px) minmax(0,1fr)}.event:not(.game)>.scene{width:100%}}

/* Quiet maker signature and optional, locally recorded major dilemmas. */
#home .maker{padding:0;margin:0;gap:5px;align-self:flex-end;border:0;border-radius:0;background:none;box-shadow:none;color:var(--muted);font-size:12px;font-weight:400;min-height:28px;flex-wrap:nowrap}
#home .maker:hover{color:var(--accent);text-decoration:underline}
#home .maker .maker-mark{width:22px;height:22px;border-radius:0;background:none}
.makercard{display:flex;justify-content:center;gap:6px;padding:0;background:none;box-shadow:none;border-radius:0;font-size:13px;color:var(--muted)}.makercard .maker-mark{width:24px;height:24px;background:none;border-radius:0}
.major-entry{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.major-entry .ghost{font-size:14px;min-height:44px}.interest-toggle[aria-pressed="true"]{color:var(--accent-deep);border-color:var(--accent);background:var(--accent-soft)}
.major-day-dialog{width:min(800px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:20px;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:8px}.major-day-dialog::backdrop{background:color-mix(in srgb,var(--sprite-outline) 65%,transparent)}
.major-day-dialog>header{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:16px}.major-day-dialog h2{font-size:23px;line-height:1.4}.major-day-dialog header button{flex:none;min-height:36px}
.day-layout{display:grid;gap:16px;min-width:0}.day-layout>.scene{width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:6px;background:var(--sc-wall)}.day-layout .pixel-scene{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.day-content{display:grid;gap:12px;min-width:0;font-size:15px;line-height:1.65}.day-choices{display:grid;gap:8px}.day-choices .ghost{justify-content:flex-start;min-height:48px;font-size:15px}.day-number{font-family:var(--mono);color:var(--accent);flex:none}
.day-outcome{margin:0;display:grid;gap:12px}.day-outcome div{padding-left:12px;border-left:3px solid var(--accent)}.day-outcome dt{font-size:13px;font-weight:700;color:var(--accent-deep)}.day-outcome dd{margin:4px 0 0}
.dex-interest-filter{display:flex;align-items:center;gap:8px;font-size:14px;min-height:44px;font-weight:700}.dex-interest-filter input{accent-color:var(--accent);width:18px;height:18px}.favorite-star,.day-record-tag{color:var(--accent-deep)}.day-record-tag{font-size:11px}.dx.is-favorite{border-color:var(--accent)}
.discovery-notes{border-top:1px solid var(--line);padding-top:14px}.discovery-notes h4{font-size:16px}.discovery-notes ul{padding:0;list-style:none;display:grid;gap:12px;margin:10px 0}.discovery-notes li{display:grid;gap:4px;font-size:14px}.discovery-notes li span{color:var(--muted)}
@media(min-width:700px){#home .maker{align-self:flex-start}.day-layout{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start}#result>.major-entry{grid-column:2}.major-day-dialog{padding:24px}}
@media(max-width:699px){.major-day-dialog{padding:16px}.major-day-dialog h2{font-size:20px}.day-layout>.scene{max-height:230px}}

/* The intact gift compresses and bursts before the jacket takes its place. */
.stage .pixel-box{z-index:5}.stage.open .pixel-box{animation:giftPop .34s cubic-bezier(.2,.8,.3,1) forwards}
.stage.open .gift-body,.stage.open .gift-lid{animation:none;transform:none;opacity:1}
.box-pop{position:absolute;inset:13%;z-index:6;pointer-events:none;display:grid;place-items:center;opacity:0}
.box-pop::before{content:'';position:absolute;inset:30%;border:6px solid var(--marker);opacity:0}
.box-pop i{position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--tc,var(--accent));--angle:calc(var(--p)*22.5deg);opacity:0}.box-pop i:nth-child(3n){background:var(--marker);width:7px;height:14px}.box-pop i:nth-child(3n + 1){background:var(--accent);width:12px;height:6px}
.stage.open .box-pop{opacity:1}.stage.open .box-pop::before{animation:pixelRing .4s steps(6,end) both}.stage.open .box-pop i{animation:pixelFirework .65s steps(10,end) calc(var(--p)*.004s) both}.stage.open .reveal-jacket{animation:jacketBounce .5s steps(12,end) .2s both;transition:none}
@keyframes giftPop{0%{transform:scale(1);opacity:1}28%{transform:scale(.86,1.08);opacity:1}55%{transform:scale(1.2,.9);opacity:1}100%{transform:scale(1.55);opacity:0}}
@keyframes pixelFirework{0%{opacity:0;transform:rotate(var(--angle)) translateX(20px) rotate(0)}15%{opacity:1}65%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(160px) rotate(135deg)}}
@keyframes pixelRing{0%{opacity:1;transform:scale(.3) rotate(45deg)}100%{opacity:0;transform:scale(3) rotate(45deg)}}
@keyframes jacketBounce{0%{transform:translateY(30px) scale(.45);opacity:0}30%{opacity:1}70%{transform:translateY(-22px) scale(1.05);opacity:1}100%{transform:translateY(-10px) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.stage.open .pixel-box,.box-pop{display:none}.stage.open .reveal-jacket{animation:none;opacity:1;transform:translateY(-10px) scale(1)}}
.stage.open .pixel-box{animation-timing-function:steps(8,end)}.rack .jw{animation-timing-function:steps(24,end)}
.screen.scr-in{animation:scrin .2s steps(6,end) both}.chapter.in{animation:chwipe .28s steps(8,end)}.chapter.in .chin>*{animation:chin .24s steps(6,end) both;animation-delay:0s}.chapter.in .chin>.campus-tip{animation:none}.chapter.out{animation:chout .16s steps(4,end) forwards}
.cookie:not(.open):not(.crack) svg{animation-timing-function:steps(20,end)}.cookie.crack svg{animation-timing-function:steps(3,end)}
.registration-note{color:var(--ink);font:14px/1.65 var(--body);text-align:left;padding-top:10px;border-top:1px solid var(--line)}#regReady{min-height:48px;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.sugang .ms{font-size:14px;line-height:1.65}.sugang .clock{min-height:54px}.sugang .regbtn{min-height:56px}
body[data-screen="end"] .shell{grid-template-columns:minmax(0,760px);justify-content:center}
body[data-screen="end"] .main{width:100%;margin-inline:auto}
body[data-screen="end"] .side,#end #boardSec{display:none}
#endRecords .cloud-section{gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--line)}
#endRecords .cloud-section summary{min-height:40px;display:flex;align-items:center;gap:8px;font-size:14px}
#endRecords .cloud-section summary::before{content:'▸';color:var(--accent)}
#endRecords .cloud-section details[open]>summary::before{content:'▾'}
#endRecords .board{max-height:240px;overflow:auto;overscroll-behavior:contain;margin-block:6px}
#endRecords .board li{padding:8px;font-size:13px;gap:8px}
#end .makercard{padding-block:8px;flex-wrap:wrap;font-size:12px}
#endBody>details.more:first-child{border-top:0;padding-top:0}
/* 101개 학과: 빨간 색연필 밑줄 + 별 */
.redpen{position:relative;display:inline-block;padding:0 .1em;white-space:nowrap}
.redpen::after{content:"";position:absolute;left:-.05em;right:-.1em;bottom:-.08em;height:.42em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12 C40 6 90 15 130 9 S185 8 197 11' fill='none' stroke='%23e0312b' stroke-width='4.5' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M8 16 C60 11 120 17 192 13' fill='none' stroke='%23e0312b' stroke-width='2.4' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.redstar{color:#e0312b;font-size:.85em;margin-right:.15em;display:inline-block;transform:rotate(-12deg)}
.domain-tag{margin:.15rem 0 0;font-size:12px;letter-spacing:.08em;opacity:.75;font-weight:700}
.domain-tag b{color:var(--accent);font-size:1.12em}
.drop-end{text-align:center}.drop-end .drop-k{margin:0;font-size:12px;letter-spacing:.3em;font-weight:800;color:var(--accent)}
.drop-end #dropNote{line-height:1.7}.drop-end em{color:#e0312b;font-style:normal;font-weight:800;font-size:.8em}
.rk-del{appearance:none;border:1px solid var(--line);background:transparent;color:#c0392b;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:700;cursor:pointer;margin-left:6px}
.rk-del:hover{background:#c0392b;color:#fff}

/* Persistent tips, one shared reference catalogue, and compact entry controls. */
.play-tip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;margin-top:12px;padding:12px 14px;background:var(--lime-soft);border-left:4px solid var(--accent);border-radius:6px;font-size:15px;line-height:1.65;font-weight:500}
.play-tip strong{color:var(--accent);font-size:14px;white-space:nowrap}.play-tip p{min-width:0}
.chin .campus-tip{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:10px 14px;font-size:15px;font-weight:500}
.gloss-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.gloss-tabs .ghost{min-height:44px;padding:8px 4px;justify-content:center;font-size:14px;font-weight:700;border-radius:6px}.gloss-tabs [aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tip-entry{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border-left:3px solid var(--accent)}.tip-entry p{color:var(--ink);font-size:15px;line-height:1.7}.tip-number{color:var(--accent);font:700 14px var(--mono)}
.explore-reminder{grid-column:1/-1;color:var(--down);font-size:13px;line-height:1.65;font-weight:600;margin-top:0}
#btnExplore{background:var(--sky-soft);border:2px solid var(--accent);color:var(--ink);box-shadow:0 3px 0 var(--line);font-weight:700}#btnExplore .btn-sub{color:var(--ink);opacity:1;font-weight:600}
#home>.hint{font-size:11px;line-height:1.2;margin:0;text-align:right;color:var(--muted)}
@media(min-width:700px){#btnExplore{grid-row:3}#home>.hint{grid-row:4;align-self:start}}
@media(max-width:699px){.play-tip{grid-template-columns:minmax(0,1fr);gap:3px}.play-tip p{font-size:15px}#amb{display:none}.rack .j1,.rack .j2,.rack .j3,.rack .j4{animation:none}.ticker .track{text-shadow:none}.sheet{-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.rack .jw{animation:none}}