/* 잉갓잇 v2 — 크림·브라운·머스터드 컬러감은 그대로, 모던 지오메트릭(Urbanist+Pretendard), 부드러운 그라데이션 번짐, 글래스 카드, 결과는 대화창 */
:root{
  --accent:#F2A9D8;--accent-soft:#F9D8EC;--b2:#F5E2F0;--b3:#E9DDF5;--hl:#8A2C78;--kolor:#5B3F8F;--paperL:#F8F5F9;--paper2L:#EFE8F1;--inkL:#3A1033;
  --paper:var(--paperL);--paper2:var(--paper2L);--card:#FFFFFF;--glass:rgba(255,255,255,.66);--ink:var(--inkL);--ink2:#5E3A58;--mute:#8F7A8B;--line:rgba(58,16,51,.10);--line2:rgba(58,16,51,.18);
  --comp:#2E7D4F;--mustard:var(--accent);--mustard-soft:var(--accent-soft);--rust:var(--hl);--blue:var(--kolor);--mark:var(--accent-soft);--peach:var(--b2);--sage:var(--b3);
  --green:var(--hl);--green-deep:var(--kolor);--ok:#4F8A4B;--bad:#C2654A;
  --spr-duo:url(img/raccoon-duo.png);--spr-run:url(img/raccoon-run.png);--spr-cheers:url(img/raccoon-cheers.png);
  --shadow:0 10px 30px rgba(58,16,51,.08),0 1px 2px rgba(58,16,51,.05);--shadow-s:0 4px 14px rgba(58,16,51,.07)
}
@supports (color: color-mix(in srgb, red, blue)){:root{
  --ink2:color-mix(in srgb,var(--inkL) 78%,white);--mute:color-mix(in srgb,var(--inkL) 50%,white);--line:color-mix(in srgb,var(--inkL) 10%,transparent);--line2:color-mix(in srgb,var(--inkL) 18%,transparent);
  --mark:color-mix(in srgb,var(--accent) 45%,white);
  --shadow:0 10px 30px color-mix(in srgb,var(--inkL) 8%,transparent),0 1px 2px color-mix(in srgb,var(--inkL) 5%,transparent);--shadow-s:0 4px 14px color-mix(in srgb,var(--inkL) 7%,transparent)}}
:root[data-pal="2"]{--accent:#C9B6F0;--accent-soft:#E6DCFA;--b2:#F3E7F8;--b3:#DCE7FA;--hl:#5B3F9E;--kolor:#8A2C78;--paperL:#F6F4FA;--paper2L:#ECE7F3;--inkL:#3A1033;--comp:#8A7A1A}
:root[data-pal="3"]{--accent:#A9CFF2;--accent-soft:#D8E9FA;--b2:#E9E0F5;--b3:#F5E6EE;--hl:#2F5F9E;--kolor:#8A2C78;--paperL:#F4F6FA;--paper2L:#E8ECF3;--inkL:#3A1033;--comp:#C8682A}
:root[data-pal="4"]{--accent:#F6C1AD;--accent-soft:#FBE0D5;--b2:#F7E0EC;--b3:#F3ECD8;--hl:#B04A3A;--kolor:#8A2C78;--paperL:#FAF5F3;--paper2L:#F1E8E4;--inkL:#3A1033;--comp:#1F6F7A}
:root[data-pal="5"]{--accent:#B6E3D4;--accent-soft:#DCF2EA;--b2:#E6E9F7;--b3:#F6E7EE;--hl:#1F7A66;--kolor:#5B3F8F;--paperL:#F3F8F6;--paper2L:#E6EFEB;--inkL:#3A1033;--comp:#B5456E}
:root[data-pal="6"]{--accent:#F4E4A6;--accent-soft:#FAF1CF;--b2:#F7E2EE;--b3:#E7E9F7;--hl:#8A6A12;--kolor:#8A2C78;--paperL:#FAF8F1;--paper2L:#F1EEE2;--inkL:#3A1033;--comp:#5B3F8F}
@media (prefers-color-scheme:dark){:root[data-theme=dark]{
  --paper:#2A0D27;--paper2:#361533;--card:#3B1838;--glass:rgba(59,24,56,.72);--ink:#F7EDF5;--ink2:#E2CDDD;--mute:#BFA3BA;--line:rgba(247,237,245,.10);--line2:rgba(247,237,245,.18);
  --mustard-soft:#4C2346;--peach:#4A2241;--sage:#3E2349;--mark:#5A2A52;--rust:#F3B9E0;--blue:#8DBBE0;--green:var(--rust);--green-deep:var(--blue);--ok:#8FC28A;--bad:#E0876A;
  --spr-duo:url(img/raccoon-duo-light.png);--spr-run:url(img/raccoon-run-light.png);--spr-cheers:url(img/raccoon-cheers-light.png);
  --shadow:0 10px 30px rgba(0,0,0,.35);--shadow-s:0 4px 14px rgba(0,0,0,.3);color-scheme:dark}
  @supports (color: color-mix(in srgb, red, blue)){:root[data-theme=dark]{--mustard-soft:color-mix(in srgb,var(--accent) 30%,#2A0D27);--peach:color-mix(in srgb,var(--b2) 30%,#2A0D27);--sage:color-mix(in srgb,var(--b3) 30%,#2A0D27);--mark:color-mix(in srgb,var(--accent) 35%,#2A0D27);--rust:color-mix(in srgb,var(--accent) 70%,white)}}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:"Urbanist","Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
/* 부드러운 번짐 배경 */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background:radial-gradient(55% 45% at 15% 5%,var(--mustard-soft) 0,transparent 60%),radial-gradient(50% 42% at 90% 10%,var(--peach) 0,transparent 60%),radial-gradient(55% 45% at 75% 95%,var(--sage) 0,transparent 60%),radial-gradient(40% 36% at 5% 85%,var(--mustard-soft) 0,transparent 60%)}
body>*{position:relative;z-index:1}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.45;cursor:default}
[hidden]{display:none!important}

/* ---------- 머리 ---------- */
.top{padding:26px 16px 0;max-width:820px;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.tag{font-weight:600;font-size:12px;letter-spacing:.01em;color:var(--inkL);background:var(--mustard);border-radius:999px;padding:3px 10px;margin:4px 0 0 4px;white-space:nowrap}
/* 로고: 한 입 베어 문 클립 마크 + 너구리 + Instrument Serif 워드마크(Abigale 대체). 글자는 살짝 떠다니고 너구리가 뛰어듦 */
.logo{gap:12px}
.bmark{position:relative;flex:none;width:58px;height:46px;display:inline-block;animation:fall .8s cubic-bezier(.2,.9,.25,1.25) both}
.bmark svg{width:100%;height:100%;overflow:visible}
.bmark .clip{fill:var(--hl)}.bmark .tri{fill:var(--paper)}
.bmark .rac{position:absolute;right:-18px;top:-26px;width:42px;height:64px;background:url(img/raccoon-run-green.png) center/contain no-repeat;animation:fall .8s cubic-bezier(.2,.9,.25,1.25) .4s both,bob 3.2s ease-in-out 1.4s infinite}
.wm{font-family:"Chewy","Fredoka",sans-serif;font-weight:400;font-size:38px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--hl);background:linear-gradient(135deg,var(--hl),var(--comp));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transform:rotate(-2deg);animation:fall .8s cubic-bezier(.2,.9,.25,1.25) .15s both,floaty 6s ease-in-out 1.4s infinite}
:root[data-pal="1"] .bmark .rac,:root[data-pal="1"] .g-rac{background-image:url(img/raccoon-run-green.png)}
:root[data-pal="2"] .bmark .rac,:root[data-pal="2"] .g-rac{background-image:url(img/raccoon-run-olive.png)}
:root[data-pal="3"] .bmark .rac,:root[data-pal="3"] .g-rac{background-image:url(img/raccoon-run-orange.png)}
:root[data-pal="4"] .bmark .rac,:root[data-pal="4"] .g-rac{background-image:url(img/raccoon-run-teal.png)}
:root[data-pal="5"] .bmark .rac,:root[data-pal="5"] .g-rac{background-image:url(img/raccoon-run-rose.png)}
:root[data-pal="6"] .bmark .rac,:root[data-pal="6"] .g-rac{background-image:url(img/raccoon-run-violet.png)}
:root[data-theme=dark] .bmark .rac{background-image:url(img/raccoon-run-pink.png)}
@keyframes fall{from{opacity:0;transform:translateY(-26px)}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.t3d i,#res li{animation:none!important}}
.sub{margin:30px 0 18px;color:var(--ink);font-family:"Noto Serif KR","Pretendard Variable",serif;font-size:clamp(22px,3.6vw,31px);font-weight:400;line-height:1.35;letter-spacing:-.015em;max-width:640px;text-wrap:balance}
.sub b{font-weight:600;color:var(--hl)}

/* 검색: 글래스 */
.search{display:flex;gap:8px;position:relative;padding:6px;border-radius:22px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow)}
@media (prefers-color-scheme:dark){:root[data-theme=dark] .search{border-color:var(--line)}}
.search input{flex:1;min-width:0;padding:13px 16px;font-size:17px;border:0;border-radius:16px;background:transparent;color:var(--ink);outline:none;font-weight:500}
.search input::placeholder{color:var(--mute);font-weight:400}
.search button{padding:0 22px;border:0;border-radius:16px;background:var(--ink);color:var(--paper);font-weight:700;font-size:15px;letter-spacing:-.01em;transition:transform .12s,opacity .12s}
.search button:hover{opacity:.9}.search button:active{transform:scale(.97)}
@media (prefers-color-scheme:dark){:root[data-theme=dark] .search button{background:var(--mustard);color:var(--inkL)}}
.qhist{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:8;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.qhist .qh{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 4px;font-size:12px;color:var(--mute)}
.qhist .qh button{border:0;background:none;color:var(--mute);font-size:12px;padding:2px 4px}
.qhist ol{list-style:none;margin:0;padding:0 0 6px;max-height:50vh;overflow-y:auto}
.qhist li{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:16px;cursor:pointer}
.qhist li:hover{background:var(--paper)}
.qhist li .ic{color:var(--mute);font-size:14px}
.qhist li .q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qhist li .n{font-size:12px;color:var(--mute)}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.filters select{font:inherit;font-size:13px;padding:6px 26px 6px 12px;border:1px solid var(--line2);border-radius:999px;background:var(--glass);color:var(--ink);max-width:46vw;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* 탭: 세그먼트 */
.tabs{display:inline-flex;gap:2px;margin-top:18px;padding:4px;border-radius:999px;background:var(--paper2);border:0}
.tabs button{border:0;background:none;color:var(--mute);padding:7px 14px;font-weight:600;border-radius:999px;margin:0;font-size:14px;letter-spacing:-.01em}
.tabs button.on{color:var(--ink);background:var(--card);box-shadow:var(--shadow-s)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chips button{border:1px solid var(--line);background:var(--glass);color:var(--ink);border-radius:14px;padding:6px 12px;font-size:13px;text-align:left;display:flex;flex-direction:column;gap:1px;line-height:1.25;transition:border-color .12s,transform .12s}
.chips button small{font-size:11px;color:var(--mute);font-weight:400}
.chips button.more{justify-content:center;color:var(--rust);border-color:transparent;background:transparent;font-weight:700}
.chips button:hover{border-color:var(--line2);transform:translateY(-1px)}
.stat{font-size:13px;color:var(--mute);margin-top:14px;font-weight:500;letter-spacing:-.01em}
.chstat{font-size:12px;color:var(--mute);margin-top:4px}
.chstat b{color:var(--ink);font-weight:600}
.wrap{max-width:820px;margin:0 auto;padding:0 16px 40px}
.lead{color:var(--mute);font-size:14px;margin:12px 0}
.h{font-size:12px;color:var(--mute);margin:26px 0 8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.row.between{justify-content:space-between}
.hint{font-size:12px;color:var(--mute);flex-basis:100%}
.gbtn-alt{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#1f1f1f;font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.gbtn-alt:hover{background:#f7f7f7}
.gbtn-alt.big{padding:11px 22px;font-size:15px;margin:10px auto 0;display:flex;width:280px;justify-content:center;box-sizing:border-box}
.gmark{flex:none}
.loginbtn .gmark{margin-right:6px;vertical-align:-3px}
.glink{margin-left:0}
.acct:has(#glink:not([hidden])) #gwrap{display:none}   /* 상단엔 '구글로 쉽게 로그인' 한 개만 (10/27) */

/* ---------- 플레이어: 글래스 카드 ---------- */
.player{position:relative;z-index:5;padding:10px 0 12px;margin-bottom:10px;background:linear-gradient(var(--paper) 86%,transparent)}   /* 10/27: 고정 안 함(가림 문제). 지나가면 .mini 띠만 고정 */
.player::before{content:"";position:absolute;inset:10px 0 12px;border-radius:24px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow);z-index:-1}
@media (prefers-color-scheme:dark){:root[data-theme=dark] .player::before{border-color:var(--line)}}
.player>*{margin-left:12px;margin-right:12px}
.video{position:relative;width:auto;aspect-ratio:16/9;background:#1a1210;border-radius:18px;overflow:hidden;margin-top:12px}
.video iframe,#yt{position:absolute;inset:0;width:100%;height:100%}
.line{display:flex;align-items:center;gap:6px;margin-top:14px}
.line .txt{flex:1;min-width:0;text-align:center}
.line #cur{margin:0;font-size:22px;font-weight:600;line-height:1.35;letter-spacing:-.02em}
.line #cur.hidden{filter:blur(9px);user-select:none}
.line .ko{margin:4px 0 0;font-size:15px;color:var(--blue)}
.line .ctx{margin:4px 0 0;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--ink);font-size:22px;line-height:1;flex:0 0 40px}
.ctrl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.ctrl button,.ctrl a{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 13px;font-size:13.5px;text-decoration:none;font-weight:500}
.ctrl button:hover,.ctrl a:hover{border-color:var(--line2)}
.ctrl .on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ctrl #save{font-weight:700;font-size:14.5px;padding:8px 18px;border:0;color:var(--inkL);background:var(--mustard)}
.ctrl #save.on{background:var(--ink);color:var(--paper)}
.ctrl .x{margin-left:auto;color:var(--mute)}
.vinfo{margin:8px 12px 2px;font-size:12px;color:var(--mute);text-align:center}
.panel{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.panel button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:14px}
.panel input{flex:1;min-width:0;padding:9px 12px;font-size:16px;border:1px solid var(--line2);border-radius:12px;background:var(--paper);color:var(--ink);outline:none}
.panel input:focus{border-color:var(--ink)}
#wave{width:100%;height:60px;margin-top:8px;border-radius:10px;background:var(--paper)}
.diff{margin:8px 0 0;font-size:16px;line-height:1.7}
.diff .ok{color:var(--ok)}
.diff .bad{color:var(--bad);text-decoration:line-through}
.diff .miss{color:var(--bad);border-bottom:2px solid var(--bad)}
.diff .score{display:block;font-size:13px;color:var(--mute);margin-top:4px}
.exprs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.exprs button{font-size:13px}
.lines{list-style:none;margin:0;padding:0;max-height:40vh;overflow:auto}
.lines li{padding:5px 8px;border-radius:8px;cursor:pointer;font-size:15px;display:flex;gap:10px}
.lines li .t{color:var(--mute);font-variant-numeric:tabular-nums;font-size:12px;flex:0 0 42px;padding-top:3px}
.lines li.cur{background:var(--mark)}
.lines li:hover{color:var(--rust)}

/* ---------- 결과: 대화창 ---------- */
#res{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
#res[data-q]:not([data-q=""])::before{content:attr(data-q);align-self:flex-end;max-width:78%;margin:4px 0 10px;padding:11px 16px;border-radius:20px 20px 6px 20px;background:var(--ink);color:var(--paper);font-weight:600;font-size:16px;letter-spacing:-.01em;box-shadow:var(--shadow-s)}
@media (prefers-color-scheme:dark){:root[data-theme=dark] #res[data-q]:not([data-q=""])::before{background:var(--mustard);color:var(--inkL)}}
#res li{position:relative;display:flex;gap:12px;align-items:flex-end;cursor:pointer;max-width:92%;animation:pop .35s ease-out both}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
#res .th{flex:0 0 62px;width:62px;height:62px;border-radius:18px;object-fit:cover;background:var(--paper2);box-shadow:0 0 0 2px var(--card),var(--shadow-s);margin-bottom:18px}
#res li::before{content:"";position:absolute;left:40px;bottom:12px;width:28px;height:20px;border-radius:6px;background:#FF0033;box-shadow:0 0 0 2.5px var(--paper),0 3px 8px rgba(0,0,0,.2);z-index:1}
#res li::after{content:"";position:absolute;left:51px;bottom:17px;width:0;height:0;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;z-index:2}
#res li:hover .th{transform:translateY(-1px)}
#res .b{flex:1;min-width:0}
#res .s{margin:0;font-size:16.5px;line-height:1.45;padding:11px 15px;border-radius:20px 20px 20px 6px;background:var(--card);box-shadow:var(--shadow-s);display:inline-block;max-width:100%;letter-spacing:-.01em;transition:transform .12s}
#res li:hover .s{transform:translateY(-1px)}
#res li.active .s{background:var(--mark)}
mark{background:transparent;color:var(--rust);border-radius:0;padding:0;font-weight:700}
#res .m{margin:5px 0 0 6px;font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.more{text-align:center;margin:20px 0}
.more button,#review{border:1px solid var(--line2);background:var(--glass);color:var(--ink);border-radius:999px;padding:10px 20px;font-weight:600}
.empty{color:var(--ink2);text-align:center;padding:26px 0 40px;font-size:17px;line-height:1.5;font-weight:400}
.empty::before{content:"";display:block;width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:var(--mustard-soft)}

/* ---------- 표현 묶음 ---------- */
.group{margin:22px 0 6px}
.group h3{margin:0 0 2px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.group .gko{margin:0 0 10px;font-size:13px;color:var(--mute)}
.group .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.group .items button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--line);background:var(--glass);color:var(--ink);border-radius:16px;padding:11px 14px;transition:transform .12s,border-color .12s}
.group .items button:hover{border-color:var(--line2);transform:translateY(-1px)}
.group .items .q{font-weight:700;font-size:15px}
.group .items .k{font-size:12px;color:var(--mute)}
.group .items .n{font-size:11px;color:var(--rust);font-variant-numeric:tabular-nums}

/* ---------- 단어장 ---------- */
.saved{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.saved li{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--line)}
.saved li .b{flex:1;min-width:0;cursor:pointer}
.saved li .s{margin:0;font-size:16px}
.saved li .m{margin:3px 0 0;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved li .del{border:0;background:none;color:var(--mute);font-size:18px;padding:0 4px}

/* ---------- 오늘 ---------- */
.today{position:relative;padding:24px 22px 20px;border-radius:24px;background:linear-gradient(135deg,var(--card),var(--mustard-soft));border:1px solid rgba(255,255,255,.7);margin-top:14px;box-shadow:var(--shadow);overflow:hidden}
.today::after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:var(--mustard-soft);opacity:.7;pointer-events:none}
.today .lab{font-size:11px;color:var(--rust);letter-spacing:.14em;font-weight:700;text-transform:uppercase}
.today .q{font-size:34px;font-weight:700;margin:8px 0 2px;letter-spacing:-.03em;padding-right:60px}
.today .k{font-size:15px;color:var(--blue);margin:0 0 12px}
.today .g{font-size:13px;color:var(--mute);margin:0 0 14px;max-width:70%}
.today button,.vpage button,.cpage button{border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:999px;padding:9px 16px;font-size:14px;margin-right:6px;font-weight:500}
.today button.go,.vpage .go,.cpage .go{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700}
.streak{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.streak div{padding:14px 12px;border-radius:18px;background:var(--glass);border:1px solid var(--line);text-align:center}
.streak b{display:block;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--ink)}
.streak span{font-size:12px;color:var(--mute)}
.chlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.chlist a{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--glass);text-decoration:none;font-size:13px}
.chlist a:hover{border-color:var(--line2)}
.chlist a small{display:block;color:var(--mute);font-size:11px}

.vpage h2,.cpage h2{margin:14px 0 4px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.vpage .m,.cpage .m{color:var(--mute);font-size:13px;margin:0 0 10px}
.vpage .comment{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--line);font-size:13px;white-space:pre-wrap}
.cpage .tops{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.cpage .tops button{display:flex;flex-direction:column;align-items:flex-start;border-radius:14px;padding:8px 12px}
.cpage .tops small{color:var(--mute);font-size:11px}

/* ---------- 바닥 ---------- */
.foot{max-width:820px;margin:0 auto;padding:30px 16px 36px;color:var(--mute);font-size:12px;position:relative}
.foot::before{content:"";display:block;width:min(220px,50vw);aspect-ratio:900/765;margin:0 auto 4px;background:url(img/raccoon-duo-plum.png) center/contain no-repeat;opacity:.9}
@media (prefers-color-scheme:dark){:root[data-theme=dark] .foot::before{background-image:url(img/raccoon-duo-pink.png)}}
.foot p{margin:0;max-width:600px;margin-inline:auto;text-align:center;line-height:1.6}
.foot .motto{font-family:"Caveat Brush","Caveat",cursive;font-weight:400;font-size:clamp(30px,4.6vw,42px);color:var(--ink);text-align:center;margin:4px auto 14px;line-height:1.15;letter-spacing:.005em;max-width:none;transform:rotate(-1.5deg)}

@media (max-width:520px){
  .top{padding-top:16px}.wm{font-size:29px}.bmark{width:46px;height:36px}.bmark .rac{right:-14px;top:-20px;width:32px;height:50px}.tag{display:none}
  .sub{margin:20px 0 14px}
  .search{padding:5px;border-radius:18px}.search input{font-size:16px;padding:11px 12px}.search button{padding:0 16px;font-size:14px;border-radius:13px}
  .tabs{display:flex}.tabs button{flex:1;padding:7px 6px;font-size:13px;text-align:center}
  .line #cur{font-size:18px}
  .ctrl button,.ctrl a{padding:6px 10px;font-size:13px}
  #res li{max-width:100%}#res .s{font-size:15.5px}#res .th{flex-basis:54px;width:54px;height:54px;border-radius:16px}#res li::before{left:34px;bottom:12px;width:26px;height:18px}#res li::after{left:44px;bottom:16px;border-left-width:7px;border-top-width:4.5px;border-bottom-width:4.5px}
  .today .q{font-size:28px;padding-right:96px}.today .g{max-width:100%}.today::after{width:90px;height:62px;right:12px;top:12px}
  .player>*{margin-left:8px;margin-right:8px}.video{border-radius:14px}
}

/* ---------- 계정 ---------- */
.gwrap{position:relative;display:inline-block;height:38px}
.gwrap .loginbtn{height:38px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;font-size:14px;letter-spacing:-.01em;pointer-events:none}
@media (prefers-color-scheme:dark){:root[data-theme=dark] .gwrap .loginbtn{background:var(--mustard);color:var(--inkL)}}
.gwrap #gbtn{position:absolute;inset:0;opacity:0;overflow:hidden;border-radius:999px}
.gwrap #gbtn>div{transform:scale(1.6);transform-origin:left top}
.acct{position:relative;display:flex;align-items:center;min-height:32px}
.me{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--glass);color:var(--ink);border-radius:999px;padding:3px 10px 3px 3px;font-size:13px;max-width:46vw}
.me img{width:26px;height:26px;border-radius:50%;background:var(--line)}
.me span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{position:absolute;right:0;top:40px;z-index:7;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;min-width:230px;box-shadow:var(--shadow);display:grid;gap:6px}
.menu p{margin:0;font-size:13px}
.menu .hint{color:var(--mute);font-size:12px}
.menu a{font-size:12px;color:var(--mute)}
.menu button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;justify-self:start}
.synced{font-size:12px;color:var(--ok)}
.menu .prem{border:0;background:var(--mustard);color:var(--inkL);font-weight:700;border-radius:999px;padding:8px 12px;font-size:13px;justify-self:stretch}

/* ---------- 광고 띠 ---------- */
.adbar{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.adbar .adtag{font-size:10px;color:var(--mute);border:1px solid var(--line2);border-radius:4px;padding:1px 4px;flex:none}
.adbar .adin{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:50px;font-size:13px;color:var(--mute);text-align:center}
.adbar .adin a{color:var(--rust);font-weight:700}
.adbar .adin iframe,.adbar .adin img,.adbar .adin ins{max-width:100%}
.adbar #ad-x{flex:none;border:0;background:none;color:var(--mute);font-size:16px;padding:6px}
body.has-ad .wrap{padding-bottom:110px}
.adbar .adside{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.adbar .noad{border:1px solid var(--line2);background:none;color:var(--mute);font-size:11px;border-radius:999px;padding:2px 8px}
.adbar .disc{font-size:10px;color:var(--mute);margin:2px 0 0}

/* ---------- 프리미엄 모달 ---------- */
.modal{position:fixed;inset:0;z-index:20;background:rgba(40,24,18,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center}
.modal .box{position:relative;background:var(--card);color:var(--ink);width:100%;max-width:520px;border-radius:24px 24px 0 0;padding:24px 22px calc(24px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow)}
@media(min-width:600px){.modal{align-items:center}.modal .box{border-radius:24px}}
.modal .x{position:absolute;right:12px;top:12px;border:0;background:none;color:var(--mute);font-size:18px;padding:6px}
.modal h2{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.modal .lead{margin:0 0 14px;color:var(--mute);font-size:14px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.plans button{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:18px;padding:14px 8px;font-size:14px}
.plans button b{font-size:14px;font-weight:600}.plans button span{font-size:22px;font-weight:700;letter-spacing:-.02em}.plans button em{font-style:normal;font-size:11px;color:var(--rust)}
.plans button.on{border-color:var(--ink);background:var(--card);box-shadow:0 0 0 1px var(--ink) inset}
.steps{margin:0 0 14px;padding-left:20px;font-size:14px;line-height:1.7}
.modal .row{display:flex;gap:8px;margin:0 0 8px}
.modal .kakao{flex:1;text-align:center;background:#FEE500;color:#191919;font-weight:800;border-radius:14px;padding:12px;text-decoration:none;font-size:15px}
.modal .kakao.off{opacity:.5;pointer-events:none}
.modal #prem-done{flex:1;border:0;background:var(--ink);color:var(--paper);font-weight:700;border-radius:14px;padding:12px;font-size:15px}
.modal #prem-done:disabled{opacity:.5}
.modal .hint{margin:0;font-size:13px;color:var(--mute);min-height:1.4em}

.patinfo{margin:8px 0 0;font-size:13px;color:var(--mute);line-height:1.5}
.patinfo b{color:var(--ink)}
.patinfo .ex{display:block;color:var(--blue)}

.video .tap{position:absolute;inset:0;margin:auto;width:180px;height:54px;border:0;border-radius:999px;background:var(--mustard);color:var(--inkL);font-size:16px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.video .yterr{position:absolute;inset:0;margin:0;padding:18px;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(30,16,12,.86);color:#F2E7D6;font-size:14px;line-height:1.6}
.video .yterr a{color:var(--mustard);font-weight:700}

/* ---------- 시리즈 메뉴 ---------- */
.series{max-width:820px;margin:34px auto 0;padding:0 16px}
.series-h{margin:0 0 10px;font-weight:700;font-size:15px;color:var(--ink)}.series-h span{font-weight:400;color:var(--mute);font-size:13px;margin-left:8px}
.series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.series-grid a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:16px;background:var(--glass);border:1px solid var(--line);text-decoration:none;transition:transform .12s,border-color .12s}
.series-grid a:hover{transform:translateY(-1px);border-color:var(--line2)}
.series-grid b{font-size:14.5px}.series-grid span{font-size:12px;color:var(--mute)}
/* 게이트 모달 */
.gate-btn{display:flex;justify-content:center;margin:10px 0 12px;min-height:44px}
/* 퀴즈 */
.qz-lead{margin:0 0 8px;font-size:14px;color:var(--ink2)}
.qz-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qz-choices button{border:1px solid var(--line2);background:var(--paper);color:var(--ink);border-radius:12px;padding:10px 12px;font-size:16px;font-weight:600}
.qz-choices button.right{background:var(--accent);border-color:var(--accent);color:var(--inkL)}
.qz-choices button.wrong{opacity:.5;text-decoration:line-through}
#cur .blank{display:inline-block;min-width:3.5em;border-bottom:3px solid var(--hl);color:transparent}
#quiz-score button{border:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:5px 12px;font-size:13px;margin-left:6px}
/* 복습 */
.srs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.srs .hint{flex-basis:100%;font-size:13px;color:var(--ink2)}
#srs-ok{background:var(--accent);border-color:var(--accent);color:var(--inkL);font-weight:700}
/* 억양 배지 */
.acc{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:6px;padding:1px 6px;margin-right:2px;background:var(--mustard-soft);color:var(--hl)}.acc.uk{background:var(--b3);color:var(--kolor)}
/* 오늘의 5문장 */
.pack{list-style:none;margin:14px 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}
.pack li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);cursor:pointer}
.pack li b{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12px;flex:none}
.pack li span{flex:1;min-width:0;display:flex;flex-direction:column}.pack li em{font-style:normal;font-weight:600;font-size:15px}.pack li small{color:var(--mute);font-size:12px}
.pack li i{font-style:normal;color:var(--ok);font-weight:700}.pack li.done{opacity:.6}

/* 챌린지 */
.chal{margin-top:12px;background:linear-gradient(135deg,var(--card),var(--b2))}.chal::after{display:none}
.chal .q{padding-right:0}
.chal-soon{display:inline-block;margin-left:8px;font-size:12px;color:var(--mute);border:1px dashed var(--line2);border-radius:999px;padding:4px 10px}
.chal-days{list-style:none;margin:12px 0 10px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.chal-days li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:12px}
.chal-days li b{font-weight:600;color:var(--mute);font-size:11px}.chal-days li span{font-weight:700;font-size:14px}
.chal-days li.ok{background:var(--accent);border-color:var(--accent);color:var(--inkL)}.chal-days li.ok b{color:var(--inkL)}
.chal-days li.x{opacity:.55}.chal-days li.x span{color:var(--bad)}
.chal-days li.t{border:2px solid var(--hl)}.chal-days li.f{opacity:.5}
@media(max-width:520px){.chal-days{grid-template-columns:repeat(7,1fr)}.chal-days li{padding:6px 0}.chal-days li b{font-size:10px}}

/* 폰: 패널(대본·받아쓰기·녹음·퀴즈)이 열리면 플레이어를 고정 해제해 버튼이 밀리거나 겹치지 않게 */
@media(max-width:640px){.player.has-panel{position:relative}.lines{max-height:32vh}.ctrl button,.ctrl a{min-height:36px}}
.player.mini .video{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));right:10px;width:112px;height:63px;margin:0;border-radius:10px;z-index:8;aspect-ratio:auto;box-shadow:var(--shadow)}
.player.mini .line{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));left:10px;right:130px;z-index:8;margin:0;min-height:63px;box-sizing:border-box;padding:6px 10px;border-radius:12px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow)}
.player.mini .line .nav{display:none}
.line .pin{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:var(--paper);font-size:14px;line-height:1;padding:0;opacity:.75}.line .pin.on{background:var(--accent);border-color:var(--accent);opacity:1}
.player.mini .line .pin{display:inline-block;position:absolute;right:6px;bottom:6px}
.player.mini .line #cur{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-align:left}
.player.mini .line .ko,.player.mini .line .ctx{display:none}
@media(min-width:641px){.player.mini .video{width:200px;height:112px;right:16px;top:12px}.player.mini .line{left:16px;right:236px;top:12px;min-height:112px;max-width:520px}.player.mini .line #cur{font-size:16px;-webkit-line-clamp:4}}

.ctrl button,.ctrl a,.nav,.tabs button,.chips button{user-select:none;-webkit-user-select:none}

/* ---------- 한입 서바이벌 게임 ---------- */
.series-grid a.hot{background:linear-gradient(135deg,var(--card),var(--accent-soft));border-color:var(--accent)}
.game{background:linear-gradient(135deg,var(--card),var(--accent-soft))}
.g-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink2);margin-bottom:8px}
.g-lives{font-size:18px;letter-spacing:2px}.g-score{font-weight:700;font-variant-numeric:tabular-nums}
.g-clip{position:relative;width:150px;height:116px;margin:0 auto 8px}
.g-clip svg{width:100%;height:100%;overflow:visible}.g-clip .clip{fill:var(--hl);transition:transform .3s}.g-clip .tri{fill:var(--paper)}
.g-rac{position:absolute;left:-90px;top:0;width:76px;height:116px;background:url(img/raccoon-run-green.png) center/contain no-repeat;opacity:0;z-index:2;pointer-events:none}
.g-rac.go{animation:biterun 1.4s cubic-bezier(.3,.8,.3,1) forwards}
.g-clip.chomp .clip{animation:chomp 1.4s}
@keyframes chomp{0%,40%{transform:none}50%{transform:scale(.92) rotate(-3deg)}62%{transform:scale(1.04) rotate(2deg)}75%,100%{transform:none}}
.g-yum{position:absolute;left:50%;top:-16px;z-index:3;transform:translateX(-50%);font-weight:800;font-size:18px;color:var(--hl);pointer-events:none;animation:yum 1.3s ease-out forwards;text-shadow:0 1px 0 var(--paper)}
@keyframes yum{0%,35%{opacity:0;transform:translate(-50%,10px) scale(.6)}50%{opacity:1;transform:translate(-50%,-6px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-36px) scale(1)}}
.g-timer.wait i{opacity:.35;animation:tpulse 1s ease-in-out infinite}
@keyframes tpulse{0%,100%{opacity:.25}50%{opacity:.6}}
@keyframes biterun{0%{opacity:0;transform:translateX(-20px) rotate(-6deg)}30%{opacity:1;transform:translateX(100px) rotate(4deg)}42%{transform:translateX(112px) rotate(-14deg) scale(1.12)}50%{transform:translateX(106px) rotate(6deg) scale(1.04)}58%{transform:translateX(112px) rotate(-12deg) scale(1.1)}72%{opacity:1;transform:translateX(104px) rotate(2deg)}100%{opacity:0;transform:translateX(170px) translateY(-26px)}}
.g-clip.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px) rotate(-2deg)}75%{transform:translateX(5px) rotate(2deg)}}
.g-end{text-align:center;padding:10px 0 4px}.g-end .big{font-family:"Instrument Serif",serif;font-size:40px;line-height:1;margin:4px 0}.g-end p{margin:4px 0;font-size:14px;color:var(--ink2)}
.g-end button{margin:10px 4px 0;border:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:9px 16px;font-weight:700}
.g-end button.alt{background:var(--card);color:var(--ink);border:1px solid var(--line2)}
.g-combo{display:inline-block;margin-left:6px;color:var(--hl);font-weight:700}

.g-timer{height:6px;border-radius:999px;background:var(--paper2);margin:0 0 10px;overflow:hidden}.g-timer i{display:block;height:100%;width:100%;background:var(--hl);transition:width .1s linear}
.g-timer.hot i{background:var(--comp)}
#cur .fog{filter:blur(6px);opacity:.6}
.g-boss{display:inline-block;background:var(--comp);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;margin-left:6px}
.qz-choices.six{grid-template-columns:1fr 1fr 1fr}
@media(max-width:520px){.qz-choices.six{grid-template-columns:1fr 1fr}}

/* 그라데이션 버튼(주요 액션) */
.search button,.gwrap .loginbtn,.today button.go,.vpage .go,.cpage .go,.ctrl #save,#prem-done,.g-end button:not(.alt),.sp .cta{background:linear-gradient(135deg,var(--hl),var(--comp))!important;color:#fff!important;border:0!important;box-shadow:0 6px 18px color-mix(in srgb,var(--hl) 30%,transparent)}
.ctrl #save.on{background:var(--ink)!important}
#res[data-q]:not([data-q=""])::before{background:linear-gradient(135deg,var(--hl),var(--comp));color:#fff}
.tabs button.on{background:var(--card);box-shadow:var(--shadow-s),inset 0 -3px 0 var(--hl)}
.series-grid a.hot{background:linear-gradient(135deg,color-mix(in srgb,var(--hl) 14%,var(--card)),color-mix(in srgb,var(--comp) 14%,var(--card)))}
.chal-days li.ok{background:linear-gradient(135deg,var(--hl),var(--comp));border-color:transparent;color:#fff}.chal-days li.ok b{color:#fff}
.qz-choices button.right{background:linear-gradient(135deg,var(--hl),var(--comp));border-color:transparent;color:#fff}
/* 게임 목숨: 이모지 대신 너구리 아이콘 */
.g-lives{display:inline-flex;gap:4px}.g-lives i{display:inline-block;width:18px;height:26px;background:url(img/raccoon-run-green.png) center/contain no-repeat}.g-lives i.off{opacity:.2;filter:grayscale(1)}
:root[data-pal="1"] .g-lives i{background-image:url(img/raccoon-run-green.png)}
:root[data-pal="2"] .g-lives i{background-image:url(img/raccoon-run-olive.png)}
:root[data-pal="3"] .g-lives i{background-image:url(img/raccoon-run-orange.png)}
:root[data-pal="4"] .g-lives i{background-image:url(img/raccoon-run-teal.png)}
:root[data-pal="5"] .g-lives i{background-image:url(img/raccoon-run-rose.png)}
:root[data-pal="6"] .g-lives i{background-image:url(img/raccoon-run-violet.png)}

/* ---------- 한입 퍼즐: 귀여운 단어 카드 (10/27) ---------- */
.puzzle{background:linear-gradient(135deg,color-mix(in srgb,var(--comp) 12%,var(--card)),color-mix(in srgb,var(--hl) 12%,var(--card)))}
.p-slots{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:56px;padding:8px;border-radius:16px;background:color-mix(in srgb,var(--paper) 70%,transparent);border:2px dashed var(--line2);margin-bottom:12px}
.p-slots .ph{width:46px;height:36px;border-radius:12px;border:2px dashed var(--line2);opacity:.55}
.p-cards{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;min-height:52px;padding:4px 0}
.pcard{font-family:"Fredoka","Urbanist",system-ui,sans-serif;font-weight:700;font-size:17px;line-height:1;padding:9px 13px 10px;border-radius:14px;border:0;color:#3a2a2a;box-shadow:0 3px 0 rgba(0,0,0,.13),0 6px 14px rgba(0,0,0,.08);cursor:pointer;transition:transform .15s,box-shadow .15s;position:relative;-webkit-tap-highlight-color:transparent}
.pcard::after{content:"";position:absolute;left:8px;top:5px;width:10px;height:5px;border-radius:999px;background:rgba(255,255,255,.7)}
.pcard:active{transform:scale(.93)!important;box-shadow:0 1px 0 rgba(0,0,0,.13)}
.pcard.c0{background:#ffd3df}.pcard.c1{background:#fff0b3}.pcard.c2{background:#d3f4e0}.pcard.c3{background:#d6e6ff}.pcard.c4{background:#ecdcff}.pcard.c5{background:#ffe1c6}
.pcard.t1{transform:rotate(-3deg)}.pcard.t2{transform:rotate(2.5deg)}.pcard.t3{transform:rotate(-1.2deg)}.pcard.t4{transform:rotate(1.8deg)}
.p-slots .pcard{box-shadow:0 2px 0 rgba(0,0,0,.1);font-size:16px;padding:7px 11px 8px;transform:none}
.p-slots .pcard.in{animation:cardpop .28s cubic-bezier(.3,1.4,.5,1)}
@keyframes cardpop{0%{transform:scale(.5) rotate(-8deg)}70%{transform:scale(1.1) rotate(2deg)}100%{transform:none}}
.p-slots .pcard.ok{outline:3px solid var(--accent);outline-offset:1px}
.p-slots .pcard.bad{outline:3px solid #e5484d;outline-offset:1px;animation:shake .35s}
.p-actions{display:flex;gap:8px;justify-content:center;margin-top:10px}
.p-actions button{border:1px solid var(--line2);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 14px;font-weight:600;font-size:13px}
.p-rac{height:0;position:relative}.p-rac .g-yum{left:auto;right:84px;top:-70px;transform:none;font-size:20px;animation-name:yum2}
@keyframes yum2{0%,30%{opacity:0;transform:translateY(8px) scale(.6)}45%{opacity:1;transform:translateY(-4px) scale(1.2)}100%{opacity:0;transform:translateY(-30px)}}.p-rac i{position:absolute;right:6px;bottom:4px;width:70px;height:104px;background:var(--spr-cheers) center/contain no-repeat;opacity:0;pointer-events:none;z-index:2}
.p-rac i.go{animation:cheer 1.7s ease-out forwards}
@keyframes cheer{0%{opacity:0;transform:translateY(24px) scale(.7)}18%{opacity:1;transform:translateY(-10px) scale(1.06)}36%{transform:translateY(0) scale(1)}54%{transform:translateY(-12px) rotate(-5deg)}72%{opacity:1;transform:translateY(0) rotate(4deg)}100%{opacity:0;transform:translateY(-34px)}}
.saved-games{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.saved-games button{border:1px solid var(--line2);background:linear-gradient(135deg,color-mix(in srgb,var(--hl) 14%,var(--card)),color-mix(in srgb,var(--comp) 14%,var(--card)));color:var(--ink);border-radius:999px;padding:9px 14px;font-weight:700;font-size:13.5px}
/* 건의함(10/27) */
.fb{margin-top:22px}
.fb textarea,.fb input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.fb textarea{resize:vertical;min-height:72px}
.fb textarea:focus,.fb input:focus{outline:none;border-color:var(--hl)}
.fb-row{display:flex;gap:8px;margin-top:8px}.fb-row input{flex:1;min-width:0}
.fb-row button{flex:none;padding:0 18px;border-radius:14px;border:0;background:var(--accent);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.fb-row button:disabled{opacity:.5}
.fb .hint{margin:6px 2px 0;min-height:1.2em}
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}