:root{
  --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
  --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
  --line:#e3e1db; --line-2:#dcdad3; --line-3:#efeee9; --hover:#efeee9; --soft:#f3f2ee; --track:#ebe9e3;
  --accent:#d9472b;
  --paper:#f3efe6;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace;
  --target:#22845a; --mix:#ffffff;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0;flex-wrap:wrap}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:background .15s,transform .1s,opacity .15s}
.btn:hover{background:var(--hover)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.38;cursor:default}
.btn:disabled:hover{background:transparent}
.btn:disabled:active{transform:none}
.btn--solid{background:var(--ink);color:#fff;border:none;font-weight:500}
.btn--solid:hover{background:var(--ink-hover)}
.btn--accent{background:var(--accent);color:#fff;border:none;font-weight:500}
.btn--accent:hover{background:var(--accent);filter:brightness(1.07)}
.btn--accent:disabled:hover{background:var(--accent)}
.btn--icon{width:36px;padding:0}
.btn--sm{height:32px;padding:0 12px;font-size:12px}
.btn.is-ready{animation:pulse 1.4s ease-in-out infinite}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kbd{display:inline-block;font-family:var(--mono);font-size:10.5px;line-height:1.4;padding:0 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;background:var(--surface);color:var(--ink-2)}
.btn .kbd{font-size:10px;opacity:.75}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 레이아웃 ---------- */
.lab{
  flex:1;width:100%;max-width:1120px;margin:0 auto;padding:28px 28px 40px;
  display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px 28px;
  grid-template-areas:"dish goal" "dish note" "palette note";
  grid-template-rows:auto 1fr auto;align-items:start;
}
.goal{grid-area:goal}
.dish-area{grid-area:dish}
.palette-area{grid-area:palette}
.note{grid-area:note}

/* ---------- 목표 카드 ---------- */
.goal{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.goal-head{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.goal-name{font-size:22px;letter-spacing:-.02em;font-weight:700}
.chips{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.chip{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.chip-swatch{aspect-ratio:1/1.08;border-radius:12px 12px 4px 4px;background:var(--target);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 8px 18px -10px rgba(0,0,0,.35);transition:background .45s ease}
.chip--mix .chip-swatch{background:var(--mix)}
.chip-swatch.is-empty{background:repeating-linear-gradient(135deg,var(--soft) 0 6px,#fff 6px 12px)}
.chip figcaption{display:flex;flex-direction:column;gap:1px}
.chip-hex{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.is-hidden .chip-swatch{background:repeating-linear-gradient(135deg,var(--soft) 0 6px,#fff 6px 12px)}

.match{display:flex;flex-direction:column;align-items:center;gap:4px}
.match-ring{position:relative;width:104px;height:104px}
.match-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.match-ring circle{fill:none;stroke-width:9}
.ring-track{stroke:var(--track)}
.ring-goal{stroke:var(--ink);stroke-width:12;stroke-dasharray:1.2 400}
.ring-val{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:0 400;transition:stroke-dasharray .5s cubic-bezier(.2,.9,.3,1),stroke .3s}
.match.is-pass .ring-val{stroke:#1f9d63}
.match-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:24px;letter-spacing:-.04em}
.match-num small{font-size:12px;font-weight:500;margin-left:1px;color:var(--sub)}
.match.is-pass .match-label{color:#1f9d63}
.match.is-bump .match-num{animation:bump .4s ease}

.free-target{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2)}
.free-pick{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 4px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;cursor:pointer}
.free-pick input{width:24px;height:24px;padding:0;border:none;border-radius:50%;background:none;cursor:pointer}
.free-pick input::-webkit-color-swatch-wrapper{padding:0}
.free-pick input::-webkit-color-swatch{border:none;border-radius:50%}
.free-pick input::-moz-color-swatch{border:none;border-radius:50%}

/* ---------- 접시 ---------- */
.dish-area{display:flex;justify-content:center}
.dish-wrap{
  position:relative;width:100%;max-width:560px;aspect-ratio:1/1;border-radius:28px;
  background:
    radial-gradient(120% 90% at 30% 10%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%),
    repeating-linear-gradient(0deg,rgba(120,100,70,.035) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(120,100,70,.03) 0 1px,transparent 1px 5px),
    var(--paper);
  border:1px solid #e6dfd0;box-shadow:inset 0 0 0 6px rgba(255,255,255,.5);
}
.dish-wrap canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:28px}
.dish-wrap canvas.has-paint{touch-action:none;cursor:grab}
.dish-wrap canvas:active{cursor:grabbing}
.drop-badge{position:absolute;left:18px;top:16px;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.drop-num{font-family:var(--mono);font-weight:700;font-size:34px;line-height:1;letter-spacing:-.04em}
.drop-num.is-bump{animation:bump .35s ease}
.par-badge{position:absolute;right:18px;top:18px;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid #e6dfd0;font-family:var(--mono);font-size:13px;font-weight:700;pointer-events:none}
.par-badge.is-over{color:var(--accent);border-color:rgba(217,71,43,.4)}
.dish-hint{position:absolute;left:0;right:0;bottom:14px;margin:0;text-align:center;font-size:12.5px;color:var(--sub);pointer-events:none;transition:opacity .3s}
.dish-hint.is-off{opacity:0}

/* ---------- 팔레트 ---------- */
.palette-area{display:flex;flex-direction:column;gap:14px;max-width:560px;width:100%;justify-self:center}
.palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.pot{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;cursor:pointer;
  transition:transform .12s,box-shadow .15s,border-color .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.pot:hover{border-color:var(--line-2);box-shadow:0 6px 16px -10px rgba(0,0,0,.35);transform:translateY(-2px)}
.pot:active,.pot.is-press{transform:translateY(1px) scale(.96)}
.pot-blob{
  width:min(44px,100%);aspect-ratio:1;border-radius:50% 50% 50% 50% / 55% 55% 45% 45%;background:var(--c);
  box-shadow:inset -4px -6px 10px rgba(0,0,0,.18),inset 4px 5px 8px rgba(255,255,255,.35),0 3px 6px -2px rgba(0,0,0,.25);
  position:relative;
}
.pot-blob::after{content:"";position:absolute;left:22%;top:16%;width:26%;height:18%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(.5px)}
.pot[data-k="W"] .pot-blob{box-shadow:inset -4px -6px 10px rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.08),0 3px 6px -2px rgba(0,0,0,.2)}
.pot-name{font-size:12px;font-weight:500}
.pot-key{position:absolute;left:7px;top:5px;font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.pot-count{position:absolute;right:5px;top:4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--mono);font-size:10px;line-height:18px;text-align:center;transform:scale(0);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.pot-count.is-on{transform:scale(1)}
.pot.is-hint{border-color:var(--accent);box-shadow:0 0 0 2px rgba(217,71,43,.15)}
.pot.is-hint .pot-name::after{content:" ✓";color:var(--accent)}
.pot.is-new::before{content:"NEW";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.08em;line-height:15px}
.pot.is-locked{opacity:.3;pointer-events:none;filter:grayscale(.6)}
.tool-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tool-row #submitBtn{min-width:104px}

/* ---------- 노트 ---------- */
.note{display:flex;flex-direction:column;gap:18px;padding:18px;background:var(--panel-soft);border:1px solid var(--line);border-radius:18px;
  background-image:radial-gradient(rgba(120,100,70,.09) 1px,transparent 1.2px);background-size:14px 14px}
.note-block{display:flex;flex-direction:column;gap:10px}
.note-block--row{flex-direction:row;gap:24px}
.meters{display:flex;flex-direction:column;gap:10px}
.meter{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center}
.meter-name{font-size:12px;font-weight:500;color:var(--ink-2);grid-row:span 2}
.meter-bar{position:relative;height:8px;border-radius:999px;background:var(--track)}
.meter-bar::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink);border-radius:2px;opacity:.6}
.meter-bar i{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff,0 1px 4px rgba(0,0,0,.3);transition:left .45s cubic-bezier(.2,.9,.3,1),background .3s;opacity:0}
.meter.is-on .meter-bar i{opacity:1}
.meter.is-ok .meter-bar i{background:#1f9d63}
.meter-text{font-size:12px;color:var(--sub);min-height:1.4em}
.drop-log{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none;min-height:16px}
.drop-log li{width:16px;height:16px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);animation:pop .25s cubic-bezier(.3,1.6,.5,1)}
.recipe{margin:0;font-size:13px;color:var(--ink-2);line-height:1.6}
.best{margin:4px 0 0;font-family:var(--mono);font-size:14px;font-weight:500}
.rules{margin:0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none;display:flex;flex-direction:column;gap:7px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.rules li{padding-left:14px;position:relative}
.rules li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- 모달 ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(40,34,28,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fade .2s ease}
.modal-card{width:100%;max-width:420px;max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border-radius:22px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.3);animation:rise .35s cubic-bezier(.2,1.2,.4,1)}
.modal-card--wide{max-width:760px}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.modal-title{margin:2px 0 0;font-size:20px;letter-spacing:-.02em}
.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.lv{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px 8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;cursor:pointer;text-align:left;transition:transform .12s,border-color .15s}
.lv:hover{border-color:var(--ink);transform:translateY(-2px)}
.lv-sw{aspect-ratio:1.5/1;border-radius:9px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.lv-no{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.lv-name{font-size:12.5px;font-weight:500;line-height:1.3}
.lv-stars{font-size:12px;letter-spacing:1px;color:#e8a317}
.lv-stars .off{color:var(--line-2)}
.lv.is-current{border-color:var(--accent);box-shadow:0 0 0 2px rgba(217,71,43,.15)}
.lv:disabled{cursor:default;opacity:.55}
.lv:disabled:hover{transform:none;border-color:var(--line)}
.lv:disabled .lv-sw{background:repeating-linear-gradient(135deg,var(--soft) 0 6px,#fff 6px 12px)}
.lv--free .lv-sw{background:conic-gradient(from 20deg,#e82e54,#fbef00,#22845a,#005db6,#cf34bc,#e82e54)}

.result{padding:16px}
.result-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 18px 18px;border-radius:16px;background:var(--paper);
  background-image:repeating-linear-gradient(0deg,rgba(120,100,70,.035) 0 1px,transparent 1px 4px)}
.result-title{margin:0;font-size:22px;letter-spacing:-.02em}
.result-swatches{display:flex;margin:10px 0 2px}
.rs{width:104px;height:104px;border-radius:50%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-size:11px;font-weight:500;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:0 10px 24px -12px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.05)}
.rs--t{background:var(--target)}
.rs--m{background:var(--mix);margin-left:-22px;box-shadow:-6px 0 0 0 var(--paper),0 10px 24px -12px rgba(0,0,0,.5)}
.result-stars{font-size:30px;letter-spacing:4px;color:#e8a317;line-height:1}
.result-stars .off{color:#d9d3c5}
.result-stars span{display:inline-block;animation:star .5s cubic-bezier(.3,1.6,.5,1) backwards}
.result-stars span:nth-child(2){animation-delay:.12s}
.result-stars span:nth-child(3){animation-delay:.24s}
.result-stats{display:flex;gap:22px;margin:6px 0 0}
.result-stats div{display:flex;flex-direction:column;align-items:center}
.result-stats dt{font-size:11px;color:var(--sub)}
.result-stats dd{margin:0;font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.03em}
.result-badges{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;min-height:0}
.result-badges span{padding:3px 10px;border-radius:999px;background:#fff;border:1px solid #e6dfd0;font-size:11.5px;font-weight:500}
.result-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}

.toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:calc(100% - 32px);padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:opacity .2s,transform .25s cubic-bezier(.2,1.2,.4,1);text-align:center}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,71,43,.45)}50%{box-shadow:0 0 0 7px rgba(217,71,43,0)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes star{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .lab{grid-template-columns:minmax(0,1fr);grid-template-areas:"goal" "dish" "palette" "note";grid-template-rows:auto;max-width:600px}
}
@media (max-width:640px){
  .topbar{padding:14px 16px}
  .lab{padding:16px 16px 32px;gap:14px}
  .goal{padding:14px}
  .goal-head{flex-direction:row;align-items:baseline;gap:10px;margin-bottom:10px}
  .goal-name{font-size:18px}
  .chips{gap:10px}
  .chip{gap:6px}
  .chip-swatch{aspect-ratio:auto;height:64px}
  .match-ring{width:78px;height:78px}
  .match-num{font-size:18px}
  .match-num small{font-size:10px}
  .palette{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pot{padding:9px 2px 7px}
  .dish-wrap{border-radius:22px}
  .dish-wrap canvas{border-radius:22px}
  .drop-num{font-size:26px}
  .tool-row .btn{flex:1 1 auto;padding:0 10px}
  .note-block--row{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* 다크 모드 (인쇄는 라이트 그대로)
   — 색 맞추기 게임이라 판단 대상(목표·내 색 견본, 물감, 레벨 견본)은 그대로,
     물감 접시(종이)와 결과 카드는 색 판단 환경이라 밝게 유지(data-tb-light) */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#151412; --surface:#1b1a17; --panel:#201f1c; --panel-soft:#252421;
    --ink:#eeece7; --ink-hover:#ffffff; --ink-2:#cbc8c0; --sub:#a29f96; --muted:#8c897f;
    --line:#312f2b; --line-2:#3c3a35; --line-3:#292824; --hover:#2c2a26; --soft:#292824; --track:#36342f;
    --accent:#ee6246;
  }
  /* 밝게 유지하는 영역 안은 라이트 토큰으로 되돌림 */
  :root[data-theme="dark"] .dish-wrap,:root[data-theme="dark"] .result-card{
    --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
    --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
    --line:#e3e1db; --line-2:#dcdad3; --line-3:#efeee9; --hover:#efeee9; --soft:#f3f2ee; --track:#ebe9e3;
    --accent:#d9472b;
    color:var(--ink);color-scheme:light;
  }
  :root[data-theme="dark"] .dish-wrap{box-shadow:inset 0 0 0 6px rgba(255,255,255,.5),0 0 0 1px rgba(0,0,0,.4)}
  :root[data-theme="dark"] .btn--solid,:root[data-theme="dark"] .btn--accent,:root[data-theme="dark"] .toast,:root[data-theme="dark"] .pot-count{color:var(--bg)}
  :root[data-theme="dark"] .result-card .btn--solid,:root[data-theme="dark"] .result-card .btn--accent{color:#fff}
  :root[data-theme="dark"] .chip-swatch{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 18px -10px rgba(0,0,0,.6)}
  :root[data-theme="dark"] .chip-swatch.is-empty,:root[data-theme="dark"] .chip.is-hidden .chip-swatch,
  :root[data-theme="dark"] .lv:disabled .lv-sw{background:repeating-linear-gradient(135deg,var(--soft) 0 6px,#33312c 6px 12px)}
  :root[data-theme="dark"] .match.is-pass .ring-val{stroke:#3cc283}
  :root[data-theme="dark"] .match.is-pass .match-label{color:#3cc283}
  :root[data-theme="dark"] .meter.is-ok .meter-bar i{background:#3cc283}
  :root[data-theme="dark"] .meter-bar i{box-shadow:0 0 0 3px var(--panel-soft),0 1px 4px rgba(0,0,0,.5)}
  :root[data-theme="dark"] .note{background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.2px)}
  :root[data-theme="dark"] .pot.is-hint{box-shadow:0 0 0 2px rgba(238,98,70,.25)}
  :root[data-theme="dark"] .lv.is-current{box-shadow:0 0 0 2px rgba(238,98,70,.25)}
  :root[data-theme="dark"] .lv-sw{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  :root[data-theme="dark"] .lv-stars .off{color:#6f6c64}
  :root[data-theme="dark"] .modal{background:rgba(0,0,0,.6)}
  :root[data-theme="dark"] .modal-card{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px var(--line-2)}
  :root[data-theme="dark"] .result{background:var(--panel)}
}