:root{
    --paper:#F3EEE1; --paper-dark:#E9E1CD; --ink:#201C1C; --ink-soft:#4A4540;
    --green:#00CC33; --green-soft:#DCF2E1; --shadow:rgba(30,25,15,0.28);
  }
  *{box-sizing:border-box;}
  body{
    margin:0; min-height:100vh;
    background: radial-gradient(ellipse at top left, #FAF7EE 0%, var(--paper) 55%, var(--paper-dark) 100%);
    font-family:'Pretendard',-apple-system,sans-serif; color:var(--ink);
    display:flex; flex-direction:column; align-items:center; padding:32px 16px 64px;
  }
  .eyebrow{ font-size:13px; letter-spacing:.18em; color:var(--green); font-weight:700; text-transform:uppercase; margin-bottom:6px; }
  h1{ font-family:'Gaegu',cursive; font-size:40px; margin:0 0 4px; }
  .sub{ font-size:14px; color:var(--ink-soft); margin-bottom:24px; text-align:center; line-height:1.6; }
  .toggle-row{ display:flex; gap:8px; margin-bottom:18px; }
  .toggle-btn{ padding:9px 16px; border-radius:999px; border:1px solid #DED4BC; background:#fff;
    font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-soft); }
  .toggle-btn.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .stage{ position:relative; background:#fff; padding:14px; border-radius:4px;
    box-shadow:0 18px 40px var(--shadow); max-width:94vw; }
  canvas{ display:block; max-width:90vw; max-height:66vh; width:auto; height:auto; background:#fbf9f3; }
  .empty-hint{ position:absolute; inset:14px; display:flex; align-items:center; justify-content:center;
    color:#B9AF9C; pointer-events:none; font-family:'Gaegu',cursive; font-size:20px; text-align:center; }
  .loading{ position:absolute; inset:14px; display:none; align-items:center; justify-content:center;
    background:rgba(255,255,255,.75); font-family:'Gaegu',cursive; font-size:18px; color:var(--ink-soft); }
  .panel{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:680px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  label.small{ font-size:11px; color:var(--ink-soft); font-weight:600; }
  select,input[type=text]{ font-family:'Pretendard',sans-serif; font-size:13px; padding:9px 12px;
    border-radius:8px; border:1px solid #DED4BC; background:#fff; color:var(--ink); }
  .row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:flex-end; }
  button,.filebtn{ font-family:'Pretendard',sans-serif; font-weight:600; font-size:14px; padding:11px 20px;
    border-radius:999px; border:none; cursor:pointer; transition:transform .12s; }
  button:active,.filebtn:active{ transform:scale(.96); }
  .accent{ background:var(--green); color:#fff; }
  .ghost{ background:#fff; color:var(--ink); border:1px solid #DED4BC; }
  input[type=file]{ display:none; }
  .filebtn{ background:var(--green-soft); color:#1a6b32; display:inline-block; }
  .count-badge{ font-size:12px; color:var(--ink-soft); align-self:center; }
  footer{ margin-top:30px; font-size:11.5px; color:#BDB39E; text-align:center; max-width:480px; line-height:1.6; }