html{box-sizing:border-box; padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
/* 레이아웃: 공책 한 쪽. 윗줄에 문제와 풀이 한 줄, 가운데 깍두기 칸에 귤, 아래 여백에 도구.
   강한 색은 채점 색연필 둘뿐: 나는 빨강, 대결 상대는 파랑. 어두운 테마는 같은 구성을 칠판으로 옮긴 것. */
:root{
  --paper:#FAFCFB; --paper-2:#EDF3F2; --grid:#D2E2EE; --grid-strong:#A3C1D8;
  --ink:#27313B; --ink-soft:#5B6874;
  --pen:#DE382C; --on-pen:#FFFFFF; --pen2:#2B6BD6;
  --fruit:#F7A823; --fruit-deep:#E27F12; --fruit-hi:#FFD27A; --leaf:#4C9C48; --stem:#3B7A38; --num:#45210A;
  --key:#93CC45; --key-deep:#5F9E2D; --key-hi:#D6F2A0; --key-ink:#3F7F1E;
  --pencil:#F2BE3A; --wood:#E9C9A0; --eraser:#EE98A4; --ferrule:#A9B4BD;
  --star:#EFA41C; --star-off:#D3DCE3;
  --card:#FFFFFF; --lift:#27313B; --veil:rgba(250,252,251,.9);
  --f-display:'Jua','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  --f-hand:'Gaegu','Nanum Pen Script','Apple SD Gothic Neo','Malgun Gothic',cursive;
  --f-body:'Gowun Dodum','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1D3830; --paper-2:#25463C; --grid:#31564B; --grid-strong:#4C7669;
    --ink:#F2F4EC; --ink-soft:#B9C9BE;
    --pen:#FF9C8C; --on-pen:#3B120E; --pen2:#93BEFF;
    --fruit:#F9AE2B; --fruit-deep:#E08413; --fruit-hi:#FFD88A; --leaf:#7DC670; --stem:#5FA85A; --num:#45210A;
    --key:#A3D94F; --key-deep:#6BAA31; --key-hi:#E0F7AE; --key-ink:#B7E676;
    --pencil:#F2BE3A; --wood:#E9C9A0; --eraser:#EE98A4; --ferrule:#93A39B;
    --star:#F6C54A; --star-off:#3D6156;
    --card:#254539; --lift:#0F231D; --veil:rgba(29,56,48,.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1D3830; --paper-2:#25463C; --grid:#31564B; --grid-strong:#4C7669;
  --ink:#F2F4EC; --ink-soft:#B9C9BE;
  --pen:#FF9C8C; --on-pen:#3B120E; --pen2:#93BEFF;
  --fruit:#F9AE2B; --fruit-deep:#E08413; --fruit-hi:#FFD88A; --leaf:#7DC670; --stem:#5FA85A; --num:#45210A;
  --key:#A3D94F; --key-deep:#6BAA31; --key-hi:#E0F7AE; --key-ink:#B7E676;
  --pencil:#F2BE3A; --wood:#E9C9A0; --eraser:#EE98A4; --ferrule:#93A39B;
  --star:#F6C54A; --star-off:#3D6156;
  --card:#254539; --lift:#0F231D; --veil:rgba(29,56,48,.9);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.5;
  overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  touch-action:manipulation;
}
input{-webkit-user-select:text; user-select:text}
[hidden]{display:none!important}
.defs{position:absolute; width:0; height:0; overflow:hidden}
button,input{font:inherit; color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--pen); outline-offset:3px}

#app{height:100%; max-width:560px; margin-inline:auto}
.screen{height:100%; display:flex; flex-direction:column; gap:12px; padding-inline:16px; padding-block:14px}

/* ---------- 공통 부품 ---------- */
.btn{
  font-family:var(--f-display); font-size:1.0625rem; line-height:1.2;
  padding:11px 16px; min-height:46px; border-radius:12px;
  background:var(--card); color:var(--ink);
  border:2px solid var(--ink); box-shadow:0 3px 0 var(--lift);
  transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(3px); box-shadow:0 0 0 var(--lift)}
.btn--primary{background:var(--pen); color:var(--on-pen)}
.btn:disabled{opacity:.55; cursor:default; transform:none; box-shadow:0 3px 0 var(--lift)}
.link{padding:0; border:0; background:none; color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.eyebrow{margin:0; font-size:.8125rem; letter-spacing:.08em; color:var(--ink-soft)}
.stars{display:inline-flex; gap:2px; line-height:1}
.stars i{font-style:normal; color:var(--star-off)}
.stars i.on{color:var(--star)}
.dot{display:inline-block; flex:none; width:.7em; height:.7em; border-radius:50%; background:var(--pen)}
.dot--op{background:var(--pen2)}

.cell{position:relative; width:var(--cell); height:var(--cell)}
.fruit{position:absolute; inset:4%; transition:transform .1s}
.fruit svg{display:block; width:100%; height:100%; overflow:visible}
/* 초록 귤: 그 단의 숫자. 색만이 아니라 잎도 진하게 해서 구분한다. */
.fruit--key{--fruit:var(--key); --fruit-deep:var(--key-deep); --fruit-hi:var(--key-hi); --leaf:var(--key-deep)}
.keynum{color:var(--key-ink)}
.fruit__n{
  position:absolute; inset:0; display:grid; place-items:center; padding-top:14%;
  font-family:var(--f-display); font-size:calc(var(--cell) * .48); line-height:1;
  color:var(--num); text-shadow:0 1px 0 var(--fruit-hi);
  font-variant-numeric:tabular-nums;
}
.gridpaper{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1.5px, transparent 1.5px),linear-gradient(90deg, var(--grid) 1.5px, transparent 1.5px);
  background-size:var(--cell) var(--cell);
  border-right:1.5px solid var(--grid); border-bottom:1.5px solid var(--grid);
  outline:1.5px solid var(--grid-strong); outline-offset:0;
}
.hand{font-family:var(--f-hand); font-weight:700}
.mk{display:inline-block; vertical-align:-.08em; margin-left:.35em; width:.82em; height:.82em}
.mk--o{border:.13em solid var(--pen); border-radius:50%}
.mk--o.mk--op{border-color:var(--pen2)}
.mk--x{background:linear-gradient(to top right, transparent 44%, var(--pen) 44%, var(--pen) 56%, transparent 56%)}

/* ---------- 첫 화면 ---------- */
#home{overflow-y:auto; gap:18px}
.cover{display:flex; flex-direction:column; gap:4px}
.cover h1{margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(2.1rem, 9vw, 2.9rem); line-height:1.1; text-wrap:balance}
.cover h1 em{font-style:normal; color:var(--fruit-deep)}
.cover p{margin:0; color:var(--ink-soft)}

.demo{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
.demo__strip{--cell:46px; position:relative; display:grid; grid-template-columns:repeat(5, var(--cell)); flex:none}
.demo__ring{
  position:absolute; left:calc(var(--cell) * 1 - 3px); top:-4px;
  width:calc(var(--cell) * 2 + 6px); height:calc(var(--cell) + 8px);
  border:3px solid var(--pen); border-radius:50%; transform:rotate(-2deg);
}
.demo__notes{display:flex; flex-direction:column; gap:2px; min-width:0}
.demo__q{font-family:var(--f-display); font-size:1.5rem; line-height:1.2}
.demo__a{font-size:1.5rem; line-height:1.2}
.box{display:inline-block; width:.9em; height:.9em; vertical-align:-.1em; border:2px solid var(--grid-strong); border-radius:3px; background:var(--paper-2)}

.howto{margin:0; padding:0; list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:4px; color:var(--ink-soft); font-size:.9375rem}
.howto li{counter-increment:step; display:flex; gap:8px}
.howto li::before{content:counter(step); flex:none; width:1.5em; height:1.5em; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); font-size:.8125rem; color:var(--ink); border:1.5px solid var(--ink-soft)}

.pick{display:flex; flex-direction:column; gap:10px}
.pick h2{margin:0; font-family:var(--f-display); font-weight:400; font-size:1.25rem}
.modes{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px}
.mode{
  text-align:left; padding:9px 10px; border-radius:12px; min-height:58px;
  background:transparent; border:2px dashed var(--grid-strong); color:var(--ink-soft);
  display:flex; flex-direction:column; gap:1px; min-width:0;
}
.mode b{font-family:var(--f-display); font-weight:400; font-size:1.0625rem; color:var(--ink)}
.mode span{font-size:.75rem; line-height:1.3}
.mode[aria-checked="true"]{background:var(--card); border:2px solid var(--ink); box-shadow:0 3px 0 var(--lift)}

.duelbox{display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:12px; background:var(--paper-2)}
.duelbox p{margin:0; font-size:.875rem; color:var(--ink-soft)}
.seg{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px}
.seg button{
  min-height:40px; padding:6px 4px; border-radius:10px; background:transparent;
  border:2px dashed var(--grid-strong); color:var(--ink-soft); font-family:var(--f-display); font-size:1rem;
}
.seg button[aria-checked="true"]{background:var(--card); border:2px solid var(--ink); color:var(--ink)}
.seg button:disabled{opacity:.45; cursor:default}
.join{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.join label{font-family:var(--f-display); font-size:1rem; color:var(--ink)}
.join input{
  width:5.4em; min-height:46px; padding:6px 10px; border-radius:12px; text-align:center;
  font-family:var(--f-display); font-size:1.375rem; letter-spacing:.14em; font-variant-numeric:tabular-nums;
  background:var(--card); border:2px solid var(--ink);
}
.join input::placeholder{color:var(--star-off)}
.duelbox .warn{color:var(--pen)}
.duelbox .me{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; padding-top:8px; border-top:1.5px dashed var(--grid-strong)}
.duelbox .me b{font-family:var(--f-display); font-weight:400; font-size:1rem; color:var(--ink)}

.stages{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px 8px}
.stage{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:9px 9px 8px; min-width:0; border-radius:12px; text-align:left;
  background:var(--card); border:2px solid var(--ink); box-shadow:0 3px 0 var(--lift);
  transition:transform .08s, box-shadow .08s;
}
.stage:active{transform:translateY(3px); box-shadow:0 0 0 var(--lift)}
.stage__name{font-family:var(--f-display); font-size:1.375rem; line-height:1.1}
.stage .stars{font-size:.8125rem}
.stage__best{font-size:.75rem; color:var(--ink-soft); white-space:nowrap}
.stages--mix{grid-template-columns:repeat(3, minmax(0, 1fr))}
.stages--mix .stage__name{font-size:1.0625rem}
.stages--mix .stage__name small{display:block; font-size:.8125rem; font-family:var(--f-body); color:var(--ink-soft)}
.foot{margin:0; font-size:.8125rem; color:var(--ink-soft)}

/* ---------- 게임 화면 ---------- */
#game{gap:10px}
.hud{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.hud__stage{font-family:var(--f-display); font-size:1.125rem; white-space:nowrap}
.hud__nums{display:flex; gap:14px; font-size:.8125rem; color:var(--ink-soft); white-space:nowrap}
.hud__nums b{font-family:var(--f-display); font-weight:400; font-size:1.25rem; color:var(--ink); font-variant-numeric:tabular-nums; display:inline-block}
.hud b.bump{animation:bump .25s}
.duel{display:flex; align-items:baseline; gap:8px; min-width:0; font-size:.875rem}
.duel__p{display:flex; align-items:baseline; gap:5px; min-width:0}
.duel__name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:8.5em}
.duel b{font-family:var(--f-display); font-weight:400; font-size:1.5rem; line-height:1; font-variant-numeric:tabular-nums; display:inline-block}
.duel__vs{font-family:var(--f-display); color:var(--ink-soft)}

.clock{display:flex; align-items:center; gap:10px; min-height:18px}
.clock__text{font-family:var(--f-display); font-size:1rem; min-width:2.6em; text-align:right; font-variant-numeric:tabular-nums}
.clock__free{font-size:.8125rem; color:var(--ink-soft)}
.pencil{--t:1; flex:1; min-width:0; display:flex; align-items:center; height:14px}
.pencil__eraser{flex:none; width:12px; height:100%; background:var(--eraser); border-radius:4px 0 0 4px}
.pencil__ferrule{flex:none; width:7px; height:100%; background:var(--ferrule)}
.pencil__body{flex:0 0 calc((100% - 37px) * var(--t)); height:100%; background:linear-gradient(var(--pencil) 0 33%, color-mix(in srgb, var(--pencil) 82%, var(--num)) 33% 66%, var(--pencil) 66%)}
.pencil__tip{flex:none; width:18px; height:100%; background:var(--wood); clip-path:polygon(0 0, 100% 50%, 0 100%); position:relative}
.pencil__tip::after{content:""; position:absolute; inset:0; background:var(--ink); clip-path:polygon(66% 33%, 100% 50%, 66% 67%)}
.clock.is-late .clock__text{color:var(--pen)}

.quiz{display:flex; flex-direction:column; gap:0; padding-bottom:6px; border-bottom:2px solid var(--grid-strong)}
.quiz__q{min-height:1.15em; font-family:var(--f-display); font-size:clamp(2rem, 10vw, 2.6rem); line-height:1.15; font-variant-numeric:tabular-nums}
.quiz__q b{font-weight:400; color:var(--pen)}
.quiz__q.is-new{animation:slidein .22s}
.quiz__work{min-height:1.25em; font-size:1.625rem; line-height:1.25; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.quiz__work.is-ok,.quiz__work.is-no{color:var(--ink)}
.quiz__work.is-op{color:var(--pen2)}
.quiz__work small{font-family:var(--f-body); font-weight:400; font-size:.8125rem; color:var(--ink-soft); margin-left:.5em}
.quiz__work small:first-child{margin-left:0}

.boardwrap{position:relative; flex:1; min-height:0; display:grid; place-items:center}
#board{--cell:48px; --cols:7; position:relative; display:grid; grid-template-columns:repeat(var(--cols), var(--cell)); grid-auto-rows:var(--cell); touch-action:none; cursor:crosshair; transition:opacity .15s}
#board.is-locked{opacity:.45}
.cell.is-sel .fruit{transform:scale(1.1)}
.fruit.pop{animation:pop .26s forwards}
.fruit.grow{animation:grow .3s}
.cell.is-shake .fruit{animation:shake .3s}
#sel,#hintbox{position:absolute; pointer-events:none; border-radius:12px; z-index:2}
#sel{border:3px solid var(--pen); background:color-mix(in srgb, var(--pen) 12%, transparent)}
#hintbox{border:3px dashed var(--ink); animation:blink .5s 3}
.mark{position:absolute; pointer-events:none; z-index:3; overflow:visible; animation:fade .7s forwards}
.mark *{fill:none; stroke:var(--pen); stroke-width:4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:draw .22s forwards}
.mark--op *{stroke:var(--pen2)}
#toast{position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:4; pointer-events:none; white-space:nowrap; padding:6px 14px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:.875rem; animation:fade 1.6s forwards}

.lobby{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:16px; text-align:center; background:var(--veil);
}
.lobby p{margin:0}
.lobby__label{font-family:var(--f-display); font-size:1.125rem; color:var(--ink-soft)}
.lobby__big{font-family:var(--f-display); font-size:clamp(3.2rem, 20vw, 4.6rem); line-height:1; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--pen)}
.lobby__text{max-width:19em; color:var(--ink); text-wrap:balance}
.lobby__btns{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:10px}

.tools{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:8px}
.tools .btn{padding-inline:8px}

/* ---------- 결과 화면 ---------- */
#result{overflow-y:auto; gap:16px}
.sheet__top{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.sheet__top h1{margin:2px 0 6px; font-family:var(--f-display); font-weight:400; font-size:2rem; line-height:1.1}
.sheet__top .stars{font-size:1.75rem}
.stamp{
  flex:none; width:118px; height:118px; border-radius:50%; display:grid; place-items:center; text-align:center;
  font-family:var(--f-display); font-size:1.375rem; line-height:1.15; color:var(--pen);
  border:4px solid var(--pen); outline:2px solid var(--pen); outline-offset:-10px;
  transform:rotate(-9deg); animation:stamp .35s .15s backwards;
}
.stats{margin:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; padding-block:12px; border-block:2px solid var(--grid-strong)}
.stats div{display:flex; flex-direction:column; gap:2px; min-width:0}
.stats dt{font-size:.8125rem; color:var(--ink-soft)}
.stats dd{margin:0; font-family:var(--f-display); font-size:1.625rem; line-height:1.1; font-variant-numeric:tabular-nums}
.versus{display:flex; align-items:baseline; justify-content:center; gap:14px; padding-block:14px; border-block:2px solid var(--grid-strong); font-size:1rem}
.versus span{display:inline-flex; align-items:baseline; gap:8px; min-width:0}
.versus b{font-family:var(--f-display); font-weight:400; font-size:2.6rem; line-height:1; font-variant-numeric:tabular-nums}
.record{margin:0; color:var(--ink-soft)}
.record b{color:var(--pen); font-family:var(--f-display); font-weight:400}
.again h2{margin:0 0 6px; font-family:var(--f-display); font-weight:400; font-size:1.25rem}
.review{margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 22px; font-size:1.625rem; line-height:1.3}
.review--none{font-size:1rem; font-family:var(--f-body); font-weight:400; color:var(--ink-soft)}
.actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; padding-top:8px}
.actions .btn:only-child{grid-column:1 / -1}

@keyframes pop{to{transform:scale(0) rotate(25deg); opacity:0}}
@keyframes grow{from{transform:scale(0)}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes bump{50%{transform:scale(1.3)}}
@keyframes slidein{from{transform:translateY(-8px); opacity:.2}}
@keyframes fade{0%,65%{opacity:1}100%{opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes blink{50%{opacity:.25}}
@keyframes stamp{from{transform:rotate(-9deg) scale(1.8); opacity:0}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
@media (max-height:520px){
  #game{gap:6px; padding-block:8px}
  .quiz{flex-direction:row; align-items:baseline; gap:16px}
  .quiz__q{font-size:1.75rem}
  .tools .btn{min-height:38px; padding-block:6px}
}