/* ===== 공부하자 분수 - 스타일 ===== */

:root{
  --purple:#534AB7;
  --purple-light:#7F77DD;
  --purple-bg:#EEEDFE;
  --purple-text:#3C3489;
  --orange:#D85A30;
  --pink:#D4537E;
  --pink-bg:#FBEAF0;
  --pink-text:#993556;
  --green:#1D9E75;
  --green-bg:#E1F5EE;
  --green-text:#0F6E56;
  --amber:#EF9F27;
  --amber-bg:#FAEEDA;
  --amber-text:#854F0B;
  --blue:#378ADD;
  --blue-bg:#E6F1FB;
  --blue-text:#185FA5;
  --ink:#2C2C2A;
  --muted:#6b6a66;
  --line:#e7e5dd;
  /* 분수 앱 전용 — 분자는 따뜻한 색, 분모는 차가운 색으로 늘 고정합니다
     (어느 화면에서나 같은 색이라 아이가 위/아래를 헷갈리지 않습니다) */
  --num:#D85A30;
  --den:#2E77C4;
  --font-title:'Jua','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-body:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }

body{
  font-family:var(--font-body);
  background:#f4f2ea;
  color:var(--ink);
  display:flex;
  justify-content:center;
  height:100%;
  overflow:hidden;              /* 페이지 전체는 안 움직이고, 화면 안에서만 스크롤 */
}

/* 주아체는 큰 로고 제목에만 사용 */
.logo-sub,.logo-main{ font-family:var(--font-title); font-weight:400; }

button,input,select,textarea{ font-family:var(--font-body); }
select,.input-area input{ font-family:var(--font-body); font-weight:500; }

#app{
  width:100%;
  max-width:430px;
  height:100vh;
  height:100dvh;                /* 모바일 동적 뷰포트 (지원 브라우저 우선) */
  background:#fff;
  position:relative;
  overflow:hidden;
}

/* ---- 화면 전환 ---- */
.screen{
  display:none; height:100%; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;   /* 내용이 길면 화면 안에서 스크롤 */
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.screen.active{ display:flex; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.hidden{ display:none !important; }

/* ---- 상단바 ---- */
.topbar{
  height:52px; flex:0 0 52px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; color:#fff;
}
.topbar-purple{ background:var(--purple); }
.topbar-purple2{ background:var(--purple-light); }
.topbar-green{ background:var(--green); }
.topbar-pink{ background:var(--pink); }
.topbar-orange{ background:var(--orange); }
.topbar-blue{ background:var(--blue); }
.topbar-title{ font-size:16px; font-weight:600; }
.topbar-left,.topbar-right{ font-size:13px; display:flex; align-items:center; gap:10px; }
.topbar-pad{ width:36px; }
.dot{ color:#9ee6c7; font-size:9px; }
.coin{ background:rgba(255,255,255,.2); padding:4px 9px; border-radius:20px; font-weight:700; }
.step-badge{ background:rgba(255,255,255,.22); padding:4px 10px; border-radius:20px; font-weight:700; }
.back-btn{
  width:36px; height:36px; border:0; background:rgba(255,255,255,.2);
  color:#fff; font-size:24px; border-radius:50%; cursor:pointer; line-height:1;
}
.sound-btn{ border:0; background:transparent; font-size:18px; cursor:pointer; }

.pad{ padding:18px 16px 28px; flex:1; }
/* 글자가 많은 화면은 흰 카드로 감싸 배경 위에서도 잘 읽히게 */
#screen-theory .pad, #screen-practice-setup .pad, #screen-game-select .pad, #screen-record .pad, #screen-shop .pad{
  flex:0 0 auto;
  background:rgba(255,255,255,0.94); border-radius:20px; margin:12px; padding:16px 16px 20px;
  box-shadow:0 4px 14px rgba(83,74,183,.10);
}
.center-col{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
/* 문제·게임·결과 화면은 배경이 그대로 보이도록 투명 */
.pad.center-col{ background:transparent; border-radius:0; margin:0; box-shadow:none; }

/* ---- 홈 ---- */
.home-body{ flex:1; padding:14px 16px 22px; display:flex; flex-direction:column; }
.logo-card{
  background:var(--amber-bg); border:1.5px solid var(--amber);
  border-radius:18px; padding:12px; text-align:center; position:relative; margin-bottom:14px;
}
.logo-sub{ font-size:14px; font-weight:700; color:var(--purple); letter-spacing:2px; }
.logo-main{ font-size:34px; font-weight:800; letter-spacing:3px; line-height:1.1; }
.logo-main .c-orange{ color:var(--orange); }
.logo-main .c-pink{ color:var(--pink); }
.logo-main .c-purple{ color:var(--purple); }
.logo-main .c-blue{ color:var(--blue); }
.logo-star{ position:absolute; color:var(--amber); font-size:16px; animation:twinkle 1.8s ease-in-out infinite; }
.logo-star.s1{ top:10px; left:16px; }
.logo-star.s2{ bottom:10px; right:18px; color:var(--orange); animation-delay:.6s; }
@keyframes twinkle{ 0%,100%{opacity:.4; transform:scale(.9);} 50%{opacity:1; transform:scale(1.2);} }

.hero{ display:flex; gap:12px; margin-bottom:12px; align-items:stretch; }
.hero-char{ flex:0 0 108px; text-align:center; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.speech{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding:7px 10px; font-size:12px; color:var(--ink); line-height:1.3; margin-bottom:8px;
  word-break:keep-all; width:100%;
}
.speech::after{
  content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#fff; border-bottom:0;
}
.char-face{
  width:84px; height:84px; margin:0 auto; border-radius:50%; overflow:hidden;
  background:var(--pink-bg); border:3px solid var(--pink);
  display:flex; align-items:center; justify-content:center; font-size:46px;
  animation:bob 2.4s ease-in-out infinite;
}
.char-face img{ width:100%; height:100%; object-fit:contain; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
.char-name-sm{ font-size:12px; color:var(--muted); margin-top:6px; }

.hero-right{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.level-row{ display:flex; align-items:center; justify-content:space-between; }
.lv-group{ display:flex; align-items:center; gap:6px; min-width:0; }
.level-badge{
  background:var(--purple); color:#fff; font-size:13px; font-weight:700;
  padding:3px 12px; border-radius:20px; flex:0 0 auto;
}
.title-badge{
  background:var(--purple-bg); color:var(--purple-text); font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.exp-text{ font-size:12px; color:var(--muted); flex:0 0 auto; }
.exp-bar{ height:9px; background:#eceae2; border-radius:20px; overflow:hidden; }
.exp-fill{ height:100%; width:0; background:var(--purple-light); border-radius:20px; transition:width .4s; }

.mission-card{
  background:var(--green-bg); border:1.5px solid #9FE1CB; border-radius:14px; padding:10px 12px; margin-top:2px;
}
.mission-top{ display:flex; justify-content:space-between; align-items:center; }
.mission-title{ font-size:13px; font-weight:700; color:var(--green-text); }
.mission-count{ font-size:13px; font-weight:700; color:var(--green-text); }
.mbar{ height:8px; background:#cdeee0; border-radius:20px; overflow:hidden; margin:7px 0 5px; }
.mbar-fill{ height:100%; width:0; background:var(--green); border-radius:20px; transition:width .4s; }
.mission-reward{ font-size:11px; color:var(--green-text); }

.mini-cards{ display:flex; gap:9px; margin-bottom:14px; }
.mini-card{ flex:1; background:#f4f2ea; border-radius:14px; padding:11px 8px; text-align:center; cursor:pointer; }
.mini-label{ font-size:11px; color:var(--muted); }
.mini-val{ font-size:21px; font-weight:800; margin-top:2px; }

.menu{ display:flex; flex-direction:column; gap:11px; margin-top:10px; }
.menu-btn{
  border:0; color:#fff; border-radius:16px; padding:16px; font-size:18px; font-weight:600;
  cursor:pointer; transition:transform .08s; text-align:center;
}
.menu-btn:active{ transform:scale(.97); }
.m-purple{ background:var(--purple-light); }
.m-green{ background:var(--green); }
.m-pink{ background:var(--pink); }

.home-foot{ display:flex; gap:10px; margin-top:16px; }
.ghost-btn{
  flex:1; border:1.5px solid var(--line); background:#fff; color:var(--muted);
  border-radius:14px; padding:12px; font-size:14px; font-weight:600; cursor:pointer;
}
.ghost-btn.danger{ color:#A32D2D; border-color:#F0999580; margin-top:20px; width:100%; flex:none; }

/* =====================================================================
   분수 표기 — 이 앱의 심장. 어디에 놓아도 같은 모양으로 보여야 합니다
   ===================================================================== */
.frac{
  display:inline-flex; flex-direction:column; align-items:center;
  vertical-align:middle; line-height:1; margin:0 2px;
}
.frac-n, .frac-d{ font-weight:800; padding:0 3px; }
.frac-n{ color:var(--num); }
.frac-d{ color:var(--den); border-top:2.5px solid var(--ink); margin-top:2px; padding-top:2px; }
.frac{ font-size:18px; }
.frac-sm{ font-size:14px; }
.frac-sm .frac-d{ border-top-width:2px; }
.frac-lg{ font-size:26px; }
.frac-lg .frac-d{ border-top-width:3px; }
.frac-xl{ font-size:40px; }
.frac-xl .frac-d{ border-top-width:4px; margin-top:3px; padding-top:3px; }

/* 대분수 — 자연수는 분수보다 한 단계 크게, 크기 등급을 따라갑니다 */
.frac-mixed{ display:inline-flex; align-items:center; gap:4px; vertical-align:middle; line-height:1; }
.frac-whole{ font-weight:800; color:var(--ink); font-size:26px; }
.fm-sm .frac-whole{ font-size:20px; }
.fm-lg .frac-whole{ font-size:36px; }
.fm-xl .frac-whole{ font-size:52px; }

/* 분수 그림 */
.frac-svg{ display:block; max-width:100%; height:auto; }
.pies{ display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
/* 가분수를 막대로 그릴 때는 판을 위아래로 쌓습니다 (옆으로 두면 너무 넓어짐) */
.pies.bars{ flex-direction:column; gap:2px; width:100%; }
.pc{ cursor:pointer; transition:opacity .12s; }
.pc:active{ opacity:.7; }

/* ---- 분수 배우기 ---- */
.chip-tabs{
  display:flex; gap:6px; padding:10px 12px 0; flex:0 0 auto;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.chip-tabs::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; border:0; background:rgba(255,255,255,.86); color:var(--muted);
  padding:9px 13px; border-radius:20px; font-size:13px; font-weight:700; cursor:pointer;
  white-space:nowrap;
}
.chip.active{ background:var(--purple); color:#fff; }

.theory-h{ font-size:19px; font-weight:800; color:var(--purple-text); text-align:center; margin-bottom:10px; }
.theory-stage{ display:flex; justify-content:center; margin:6px 0 10px; }
.theory-stage.wrap{ flex-wrap:wrap; gap:8px; }
.big-frac{ text-align:center; margin:6px 0 2px; display:flex; align-items:center; justify-content:center; gap:10px; }
.big-frac .eqs{ font-size:30px; font-weight:800; color:var(--muted); }
.read-line{ text-align:center; font-size:16px; font-weight:700; color:var(--purple); margin-bottom:10px; }
.read-line.big{ font-size:22px; }
.hint{ font-size:14px; color:var(--muted); text-align:center; margin-bottom:8px; }
.hint-sub{ font-size:12px; opacity:.8; }

.ctrl-row{ display:flex; gap:8px; justify-content:center; margin:8px 0; }
.ctrl-row.two > *{ flex:1; }
.stepper{
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:#f7f5ee; border-radius:14px; padding:7px 9px; flex:1;
}
.stepper-label{ font-size:11px; color:var(--muted); font-weight:700; }
.stepper.c-num .stepper-label{ color:var(--num); }
.stepper.c-den .stepper-label{ color:var(--den); }
.stepper-val{ font-size:16px; font-weight:800; min-width:38px; text-align:center; }
.step-btn{
  width:30px; height:30px; border:0; border-radius:50%; background:#fff;
  font-size:17px; font-weight:800; color:var(--purple); cursor:pointer; line-height:1;
}
.step-btn:active{ transform:scale(.92); }

.adj-btn{
  flex:1; border:1.5px solid var(--line); background:#fff; border-radius:14px; padding:11px;
  font-size:14px; font-weight:700; cursor:pointer; color:var(--ink);
}
.adj-btn:active{ transform:scale(.96); }

.chip-row{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.mini-chip{
  border:1.5px solid var(--line); background:#fff; border-radius:12px;
  padding:6px 10px; cursor:pointer; font-size:13px; font-weight:700; color:var(--muted);
}
.mini-chip.wide{ padding:8px 12px; }
.mini-chip:active{ transform:scale(.95); }

.explain-box{
  margin-top:14px; background:var(--green-bg); border:1.5px solid #5DCAA5;
  border-radius:14px; padding:14px; color:var(--green-text);
  font-size:14px; line-height:1.75; word-break:keep-all;
}
.explain-box b{ color:#0B5946; }
.explain-box.wide-box{ background:var(--purple-bg); border-color:#B6B0EC; color:var(--purple-text); }
.explain-box.wide-box b{ color:var(--purple-text); }
.tip-box{
  margin-top:10px; background:var(--amber-bg); border:1.5px solid #EFCF92;
  border-radius:14px; padding:12px 14px; color:var(--amber-text);
  font-size:13px; line-height:1.7; word-break:keep-all;
}

.anat{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.anat-row{ display:flex; align-items:center; gap:8px; font-size:13px; }
.anat-badge{
  flex:0 0 auto; font-size:11px; font-weight:800; color:#fff;
  padding:3px 9px; border-radius:20px;
}
.anat-badge.num{ background:var(--num); }
.anat-badge.den{ background:var(--den); }
.c-num{ color:var(--num); font-weight:800; }
.c-den{ color:var(--den); font-weight:800; }

.anat-frac{ position:relative; text-align:center; margin:4px 0; }
.anat-arrow{ display:flex; align-items:center; justify-content:center; gap:5px; font-size:11px; font-weight:800; }
.anat-arrow.top{ color:var(--num); }
.anat-arrow.bottom{ color:var(--den); }
.anat-arrow i{ display:block; width:20px; height:2px; background:currentColor; border-radius:2px; }

.read-order{ display:block; text-align:center; margin:8px 0; font-size:16px; }
.calc-line{
  display:block; text-align:center; background:#fff; border-radius:10px;
  padding:8px 6px; margin:7px 0; font-size:15px; font-weight:700; color:var(--ink);
}
.calc-line.center{ font-size:17px; }
.calc-line .mul{ font-size:13px; color:var(--muted); margin:0 6px; }

.cmp-row{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.cmp-tag{ flex:0 0 44px; text-align:center; }
.cmp-row .frac-svg{ flex:1; }
.cmp-sign{ text-align:center; font-size:30px; font-weight:800; color:var(--purple); margin:2px 0; }
/* 문제 그림에 분수 둘이 나올 때.
   막대는 가로로 길어서 위아래로 쌓고, 원은 옆으로 나란히 놓습니다 */
.cmp-mini{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.cmp-mini > div{ flex:1 1 100%; display:flex; justify-content:center; }
.cmp-mini.side{ flex-wrap:nowrap; gap:10px; }
.cmp-mini.side > div{ flex:0 0 auto; }
.cmp-mini.stack{ flex-direction:column; gap:2px; }
.cmp-mini.stack > div{ flex:0 0 auto; width:100%; }
.cmp-mini.stack .q-op{ margin:-6px 0; }

.eq-stack{ display:flex; flex-direction:column; gap:6px; }
.eq-row{ display:flex; align-items:center; gap:8px; opacity:.45; transition:opacity .2s; }
.eq-row.on{ opacity:1; }
.eq-tag{ flex:0 0 44px; text-align:center; }
.eq-row .frac-svg{ flex:1; }

.two-col{ display:flex; flex-direction:column; gap:12px; }
.way-badge{
  display:inline-block; background:var(--purple); color:#fff; font-size:11px; font-weight:800;
  padding:3px 10px; border-radius:20px;
}
.kinds-list{ display:flex; flex-direction:column; gap:9px; font-size:13px; }

.kind-badge{
  display:block; width:fit-content; margin:4px auto 0;
  font-size:13px; font-weight:800; padding:4px 14px; border-radius:20px;
}
.kind-badge.k-proper{ background:var(--green-bg); color:var(--green-text); }
.kind-badge.k-improper{ background:var(--amber-bg); color:var(--amber-text); }
.conv{ margin-top:10px; }

.calc-stage{
  display:flex; align-items:center; justify-content:center; gap:4px;
  flex-wrap:wrap; margin:10px 0;
}
.calc-side{ text-align:center; font-size:13px; }
.calc-op{ font-size:22px; font-weight:800; color:var(--muted); }
.calc-neg{ font-size:40px; color:#E24B4A; }

.theory-nav{ display:flex; gap:10px; margin-top:18px; }

/* ---- 설정 / 공통 폼 ---- */
.setup-h{ font-size:15px; font-weight:600; margin:18px 0 10px; color:var(--ink); }
.seg{ display:flex; gap:8px; }
.seg-btn{
  flex:1; height:44px; border:1.5px solid var(--line); background:#fff; color:var(--muted);
  border-radius:12px; font-size:15px; font-weight:600; cursor:pointer;
}
.seg-btn.active{ background:var(--purple); color:#fff; border-color:var(--purple); }
.seg-note{ font-size:12px; color:var(--muted); margin-top:6px; text-align:center; word-break:keep-all; }

.big-btn{
  width:100%; border:0; color:#fff; border-radius:16px; padding:16px; font-size:18px;
  font-weight:700; cursor:pointer; margin-top:26px;
}
.big-btn:active{ transform:scale(.98); }
.big-btn:disabled{ opacity:.45; }
.b-green{ background:var(--green); }
.b-pink{ background:var(--pink); }
.b-amber{ background:var(--amber); color:var(--amber-text); }

/* ---- 문제 / 게임 공통 ---- */
.q-title{
  font-size:19px; font-weight:800; color:var(--ink); margin:12px 0 4px; text-align:center;
  background:rgba(255,255,255,.88); border-radius:14px; padding:9px 14px; word-break:keep-all;
}
.q-visual{ display:flex; justify-content:center; align-items:center; margin:8px 0 12px; width:100%; }
.q-frac{ background:rgba(255,255,255,.9); border-radius:16px; padding:12px 22px; }
.q-op{ font-size:22px; font-weight:800; color:var(--muted); margin:0 4px; }

.choices{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:340px; }
.choice{
  background:var(--purple-bg); color:var(--purple-text); border:1.5px solid #AFA9EC;
  border-radius:16px; padding:14px 10px; font-size:18px; font-weight:800; cursor:pointer;
  transition:transform .08s; display:flex; align-items:center; justify-content:center; min-height:64px;
}
.choice:active{ transform:scale(.96); }
.choice.right{ background:var(--green); color:#fff; border-color:var(--green); }
.choice.wrong{ background:#F09595; color:#fff; border-color:#E24B4A; }
/* 정답·오답 표시 중에도 분수 색은 흰 글씨로 (배경이 진해지므로) */
.choice.right .frac-n, .choice.right .frac-d,
.choice.wrong .frac-n, .choice.wrong .frac-d,
.choice.right .frac-whole, .choice.wrong .frac-whole{ color:#fff; }
.choice.right .frac-d, .choice.wrong .frac-d{ border-top-color:#fff; }
/* 그림 보기(그림 고르기 문제)는 여백을 줄여 그림을 크게 */
.choices-wide .choice{ padding:8px; }

.input-area{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:300px; align-items:center; }
.frac-inputs{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:20px; font-weight:800; color:var(--muted);
  background:rgba(255,255,255,.9); border-radius:16px; padding:12px 16px;
}
.fi-stack{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.fi-line{ width:78px; height:3px; background:var(--ink); border-radius:2px; }
.frac-inputs input{
  width:78px; height:48px; border:2px solid var(--line); border-radius:12px; text-align:center;
  font-size:22px; font-weight:800;
}
#practice-n{ color:var(--num); }
#practice-d{ color:var(--den); }
#practice-w{ width:60px; color:var(--ink); }
.frac-inputs input:focus{ outline:none; border-color:var(--purple); }
.fi-hint{ font-size:12px; color:var(--muted); }

.feedback{
  margin-top:16px; font-size:19px; font-weight:800; min-height:30px; text-align:center;
  background:rgba(255,255,255,.9); border-radius:14px; padding:8px 14px;
}
.feedback:empty{ background:transparent; padding:0; }
.feedback.ok{ color:var(--green); }
.feedback.no{ color:#E24B4A; }
.fb-why{ font-size:13px; font-weight:600; color:var(--muted); margin-top:6px; line-height:1.6; word-break:keep-all; }

/* ---- 게임 ---- */
.game-cards{ display:flex; flex-direction:column; gap:12px; }
.game-card{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  border:1.5px solid var(--line); background:#fff; border-radius:18px; padding:16px; cursor:pointer;
}
.game-card:active{ transform:scale(.98); }
.game-emoji{ font-size:34px; margin-bottom:6px; }
.game-title{ font-size:18px; font-weight:700; color:var(--ink); }
.game-desc{ font-size:13px; color:var(--muted); margin-top:2px; }
.time-bar{ height:8px; background:#eceae2; overflow:hidden; flex:0 0 8px; }
.time-bar-fill{ height:100%; width:100%; background:var(--pink); transition:width .1s linear, background .2s; }
.game-lives{ font-size:18px; letter-spacing:2px; }
.game-timer{ font-size:16px; font-weight:800; background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px; }
.stat-row{ display:flex; gap:12px; width:100%; max-width:340px; margin-top:8px; }
.stat-box{ flex:1; background:rgba(255,255,255,.9); border-radius:14px; padding:10px; text-align:center; }
.stat-box.stat-combo{ background:var(--amber-bg); }
.stat-label{ font-size:12px; color:var(--muted); }
.stat-combo .stat-label{ color:var(--amber-text); }
.stat-val{ font-size:24px; font-weight:800; }
.stat-combo .stat-val{ color:var(--orange); }
.game-flash{ font-size:22px; font-weight:800; min-height:36px; margin-top:10px; text-align:center; }

/* ---- 피자 가게 ---- */
#screen-pizza{ position:relative; }   /* 레벨 안내(.game-notice)가 이 화면 기준으로 놓이도록 */
.alarm-lv{ font-size:13px; font-weight:800; background:rgba(255,255,255,.2); padding:4px 9px; border-radius:20px; }

.guest-row{
  display:flex; align-items:center; gap:10px; padding:10px 14px 6px; flex:0 0 auto;
}
.guest-face{
  width:62px; height:62px; flex:0 0 62px; border-radius:50%; overflow:hidden;
  background:var(--amber-bg); border:3px solid var(--amber);
  display:flex; align-items:center; justify-content:center; font-size:32px;
  animation:bob 2.4s ease-in-out infinite;
}
.guest-face img{ width:100%; height:100%; object-fit:contain; }
.guest-bubble{
  position:relative; flex:1; background:#fff; border-radius:16px; padding:10px 14px;
  box-shadow:0 3px 10px rgba(60,40,90,.16);
}
.guest-bubble::after{
  content:''; position:absolute; left:-7px; top:50%; transform:translateY(-50%);
  border:7px solid transparent; border-right-color:#fff; border-left:0;
}
.guest-order{ font-size:20px; font-weight:800; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.guest-read{ font-size:12px; color:var(--muted); margin-top:2px; }

.cut-row{ padding:2px 14px 6px; flex:0 0 auto; }
.cut-label{ font-size:12px; color:var(--muted); font-weight:700; }
.cut-btns{ display:flex; gap:8px; margin-top:5px; }
.cut-btn{
  flex:1; border:1.5px solid var(--line); background:#fff; border-radius:14px;
  padding:10px 4px; font-size:15px; font-weight:800; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.cut-btn .cut-emoji{ font-size:14px; }
.cut-btn.on{ background:var(--amber); color:#fff; border-color:var(--amber); }
.cut-btn:active{ transform:scale(.96); }

.pizza-board{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  gap:10px; padding:4px 12px; flex-wrap:wrap;
}
.pizza-board.uncut{ opacity:.55; }
.pizza-plate{ display:flex; align-items:center; justify-content:center; }
.pizza-plate .frac-svg{ max-height:100%; width:auto; }
.pizza-board.shake{ animation:pizzaShake .38s ease; }
@keyframes pizzaShake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-8px);} 75%{ transform:translateX(8px);} }
.pizza-board.served{ animation:pizzaServe .5s ease; }
@keyframes pizzaServe{ 50%{ transform:scale(1.07); } }

.serve-row{ display:flex; align-items:center; gap:10px; padding:2px 14px 4px; flex:0 0 auto; }
.pizza-taken{
  flex:1; background:rgba(255,255,255,.92); border-radius:14px; padding:8px 12px;
  display:flex; align-items:center; gap:8px; min-height:52px; border:2px solid transparent;
}
.pizza-taken.ok{ border-color:var(--green); background:var(--green-bg); }
.taken-label{ font-size:11px; color:var(--muted); font-weight:700; }
.taken-hint{ font-size:12px; color:var(--muted); }
.taken-ok{ font-size:12px; font-weight:800; color:var(--green-text); }
.serve-row .big-btn{ flex:0 0 128px; width:auto; margin-top:0; padding:14px 10px; font-size:16px; }
#pizza-flash{ flex:0 0 auto; font-size:16px; min-height:34px; padding:0 14px 8px; }
#pizza-flash .frac{ font-size:15px; }

/* ---- 게임 결과 ---- */
.over-col{ justify-content:center; flex:1; gap:6px; padding-top:60px; }
.over-emoji{ font-size:72px; animation:pop .4s ease; }
@keyframes pop{ from{transform:scale(0);} to{transform:scale(1);} }
.over-title{ font-size:24px; font-weight:800; }
.over-score{ font-size:48px; font-weight:800; color:var(--pink); margin:6px 0; }
.over-best{ font-size:15px; color:var(--amber-text); font-weight:700; }
.over-coin{ font-size:15px; color:var(--muted); margin-bottom:20px; }
.over-col .big-btn{ width:100%; max-width:260px; }
.over-col .ghost-btn{ flex:none; width:100%; max-width:260px; margin-top:10px; }

/* ---- 캐릭터 ---- */
.gacha-card{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--purple-bg); border:1.5px solid var(--purple-light);
  border-radius:18px; padding:14px 16px; margin-bottom:16px;
}
.gacha-title{ font-size:16px; font-weight:700; color:var(--purple-text); }
.gacha-sub{ font-size:13px; color:var(--purple); margin-top:2px; }
.gacha-btn{
  border:0; background:var(--purple); color:#fff; border-radius:14px;
  padding:12px 22px; font-size:16px; font-weight:800; cursor:pointer;
}
.gacha-btn:active{ transform:scale(.96); }
.char-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.char-cell{
  border:1.5px solid var(--line); border-radius:16px; padding:12px 6px; text-align:center;
  background:#fff; cursor:pointer; position:relative;
}
.char-cell.selected{ border-color:var(--orange); border-width:2.5px; }
.char-cell.locked{ opacity:.55; }
.char-circle{
  width:60px; height:60px; margin:0 auto 6px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:32px; overflow:hidden;
}
.char-circle img{ width:100%; height:100%; object-fit:contain; }
.char-nm{ font-size:13px; font-weight:600; }
.char-rank{ font-size:11px; font-weight:700; margin-top:2px; }
.rank-common{ color:var(--muted); }
.rank-rare{ color:var(--purple); }
.rank-epic{ color:var(--blue-text); }
.rank-legend{ color:var(--orange); }
.char-badge{
  position:absolute; top:6px; right:6px; font-size:11px; background:var(--orange);
  color:#fff; border-radius:10px; padding:1px 7px; font-weight:700;
}

/* ---- 기록 ---- */
.rec-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rec-card{ background:#f4f2ea; border-radius:14px; padding:14px; }
.rec-label{ font-size:12px; color:var(--muted); }
.rec-val{ font-size:24px; font-weight:800; margin-top:4px; }
.weak-list{ font-size:15px; color:var(--muted); background:#f4f2ea; border-radius:12px; padding:14px; }
.weak-tag{ display:inline-block; background:var(--pink-bg); color:var(--pink-text); border-radius:10px; padding:4px 10px; margin:3px; font-weight:700; }

/* 뽑기 연출 */
.gacha-pop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex;
  align-items:center; justify-content:center; z-index:50; animation:fade .2s;
}
.gacha-pop .box{
  background:#fff; border-radius:24px; padding:30px 26px; text-align:center; max-width:280px;
  animation:pop .4s ease;
}
.gacha-pop .big-emoji{ font-size:80px; }
.gacha-pop .got{ font-size:20px; font-weight:800; margin:10px 0 4px; }
.gacha-pop .rk{ font-size:14px; font-weight:700; margin-bottom:16px; }
.gacha-pop button{
  border:0; background:var(--purple); color:#fff; border-radius:14px;
  padding:12px 28px; font-size:16px; font-weight:800; cursor:pointer;
}
.gacha-pop .btns{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.gacha-pop .btns button{ width:100%; padding:12px; }
.gacha-pop .gacha-redraw{ background:linear-gradient(180deg,#7bd88f,#39b36f); }

/* 게임 중 레벨업 안내 — 화면 아래쪽에 띄워 문제를 안 가림 */
.game-notice{
  position:absolute; left:50%; bottom:84px; transform:translateX(-50%) translateY(8px);
  background:rgba(60,40,90,.82); color:#fff; font-size:14px; font-weight:800;
  padding:8px 16px; border-radius:16px; white-space:nowrap; z-index:6; pointer-events:none;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.game-notice.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- 랭킹 ---- */
.nick-btn{
  border:0; background:rgba(255,255,255,.18); color:#fff; cursor:pointer;
  font-size:13px; font-weight:700; padding:5px 11px; border-radius:20px;
  display:flex; align-items:center; gap:5px;
}

.rank-me{
  display:flex; align-items:center; gap:8px;
  background:var(--purple-bg); border-radius:14px; padding:10px 12px; margin-bottom:12px;
}
.rank-me-label{ font-size:12px; color:var(--muted); }
.rank-me-nick{ flex:1; font-size:16px; font-weight:800; color:var(--purple-text); }
.rank-nick-btn{
  border:0; background:var(--purple); color:#fff; cursor:pointer;
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px;
}
.rank-nick-hint{ font-size:12px; color:var(--muted); text-align:center; margin:-6px 0 12px; }

/* 홈 상단 공지(종) 버튼 — 안 본 공지가 있으면 빨간 점 */
.notice-btn{ position:relative; }
.notice-btn.has-new::after{
  content:''; position:absolute; top:0; right:0;
  width:8px; height:8px; border-radius:50%;
  background:#E24B4A; border:1.5px solid var(--purple);
}

.seg-sm{ margin-bottom:8px; }
.seg-sm .seg-btn{ font-size:13px; padding:9px 0; height:auto; }

.rank-season{ font-size:13px; font-weight:700; color:var(--muted); margin:10px 0 6px; text-align:center; }
.rank-row{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line); }
.rank-row.me{ background:var(--amber-bg); border-radius:12px; border-bottom-color:transparent; }
.rank-badge{ width:30px; text-align:center; font-size:17px; }
.rank-num{ font-size:14px; font-weight:800; color:var(--muted); }
.rank-nick{ flex:1; min-width:0; font-weight:700; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-score{ font-weight:800; color:var(--purple-text); }
.rank-msg{ text-align:center; color:var(--muted); font-size:14px; padding:28px 10px; line-height:1.6; }
.rank-sub{ font-size:12px; }

.hall-season{ margin-bottom:16px; }
.hall-season-h{ font-size:14px; font-weight:800; color:var(--amber-text); margin-bottom:6px; }
.hall-row{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); }
.hall-row.me{ background:var(--amber-bg); border-radius:12px; border-bottom-color:transparent; }
.hall-medal{ width:26px; text-align:center; font-size:16px; }
.hall-nick{ flex:1; min-width:0; font-weight:700; font-size:15px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hall-score{ font-weight:800; color:var(--amber-text); }

/* 닉네임 입력 모달 */
.nick-title{ font-size:18px; font-weight:800; margin-bottom:4px; }
.nick-sub{ font-size:13px; color:var(--muted); margin-bottom:14px; }
.nick-input{
  width:100%; border:2px solid var(--line); border-radius:14px;
  padding:12px 14px; font-size:16px; font-weight:600; margin-bottom:16px; outline:none;
}
.nick-input:focus{ border-color:var(--purple-light); }
.nick-input.shake{ animation:pizzaShake .35s ease; border-color:#E24B4A; }

/* ---- 상점 ---- */
.shop-tabs{ display:flex; gap:6px; padding:10px 12px 0; flex:0 0 auto; }
.shop-tab{
  flex:1; border:0; background:#eceae2; color:var(--muted);
  padding:10px 0; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer;
}
.shop-tab.active{ background:var(--orange); color:#fff; }

.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.shop-item{
  background:#fff; border:2px solid var(--line); border-radius:16px;
  padding:10px 6px 8px; text-align:center; cursor:pointer; position:relative;
}
.shop-item.selected{ border-color:var(--orange); background:var(--amber-bg); }
.shop-item.locked{ opacity:.82; }
.shop-thumb{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:12px;
}
.shop-thumb svg{ width:100%; height:100%; }
.shop-swatch{ width:100%; height:100%; background-size:cover; background-position:center; border-radius:12px; }
.shop-name{ font-size:13px; font-weight:700; margin-top:6px; }
.shop-tag{ display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:20px; margin-top:4px; }
.shop-tag.sel{ background:var(--orange); color:#fff; }
.shop-tag.own{ background:var(--green-bg); color:var(--green-text); }
.shop-tag.buy{ background:var(--amber-bg); color:var(--amber-text); }

/* ---- 확인 팝업 (예/아니오) ---- */
.confirm-pop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:90;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.confirm-box{
  background:#fff; border-radius:22px; padding:24px 22px 18px; max-width:320px; width:100%;
  text-align:center; animation:pop .3s ease;
}
.confirm-msg{ font-size:16px; font-weight:600; line-height:1.5; margin-bottom:18px; }
.confirm-btns{ display:flex; gap:10px; }
.confirm-btns button{
  flex:1; border:0; border-radius:14px; padding:13px 0;
  font-size:15px; font-weight:800; cursor:pointer;
}
.confirm-cancel{ background:#eceae2; color:var(--muted); }
.confirm-ok{ background:var(--purple); color:#fff; }

/* 소리/배경음 끈 상태 */
.sound-btn.muted{ opacity:.38; }

/* 토스트 알림 */
.toast{
  position:fixed; top:64px; left:50%; transform:translateX(-50%) translateY(-12px);
  background:var(--purple); color:#fff; font-size:14px; font-weight:700;
  padding:11px 18px; border-radius:20px; z-index:80; opacity:0;
  transition:opacity .25s, transform .25s; white-space:nowrap; max-width:90%;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- 어두운 배경 테마('밤')일 때 ----
   흰 카드 안의 글자는 그대로 두고, 배경 위에 바로 놓인 글자만 밝게 바꿉니다 */
body.theme-dark .q-title{ background:rgba(255,255,255,.92); }
body.theme-dark .hint,
body.theme-dark .cut-label{ color:#EDEBFF; }
body.theme-dark .cmp-sign{ color:#EDEBFF; }