:root {
    --navy: #1B2E4C;
    --navy-soft: #3C5075;
    --cream: #F7F3E9;
    --cream-deep: #EFE7D4;
    --gold: #C9A227;
    --gold-soft: #E4C766;
    --ink: #26241F;
    --danger: #B3432F;
    --good: #2E7D5B;
    --line: #D8D0BB;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  body {
    margin: 0; background: var(--cream); color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  }
  button { font-family: inherit; cursor: pointer; border: none; }
  input, textarea, select { font-family: inherit; }
  .wrap { max-width: 640px; margin: 0 auto; min-height: 100vh; }
  .hdr { background: var(--navy); color: var(--cream); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; }
  .hdr h1 { margin: 0; font-size: 18px; }
  .card { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
  .btn { background: var(--navy); color: var(--cream); border-radius: 9px; padding: 11px 16px; font-size: 14px; font-weight: 600; }
  .btn:disabled { opacity: .4; }
  .btn-ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); border-radius: 9px; padding: 9px 14px; font-size: 14px; font-weight: 500; }
  .btn-danger { background: var(--danger); color: #fff; border-radius: 9px; padding: 11px 16px; font-size: 14px; font-weight: 600; }
  .full { width: 100%; }
  .field { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; font-size: 15px; outline: none; background: #fff; }
  .label { font-size: 12px; font-weight: 600; color: var(--navy-soft); margin-bottom: 5px; display: block; }
  .tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: var(--cream); position: sticky; top: 0; z-index: 5; }
  .tab { flex: 1 1 auto; min-width: 66px; padding: 11px 8px; border-radius: 9px; font-size: 15px; font-weight: 700; background: transparent; color: var(--navy-soft); }
  .tab.on { background: #fff; color: var(--navy); }
  .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
  .b-gray { background: #E7E3D8; color: #6B6552; }
  .b-gold { background: #F3E4B8; color: #8A6D0F; }
  .b-navy { background: #DCE3EE; color: var(--navy); }
  .b-danger { background: #F3D9D2; color: var(--danger); }
  .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .muted { font-size: 12px; color: var(--navy-soft); }
  .err { font-size: 12px; color: var(--danger); margin-top: 6px; }
  .body { padding: 16px; }
  audio { height: 36px; }
  .seg { display: flex; gap: 6px; margin-top: 12px; }
  .seg button { flex: 1; padding: 8px; border-radius: 9px; font-size: 12px; font-weight: 700; border: 1px solid var(--navy); background: #fff; color: var(--navy); }
  .seg button.on { background: var(--navy); color: var(--cream); }
  .spin { display:inline-block; width:18px; height:18px; border:2px solid var(--line); border-top-color: var(--navy); border-radius:50%; animation: sp .8s linear infinite; }
  @keyframes sp { to { transform: rotate(360deg); } }
  .center { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
  @keyframes balloonUp {
    0%   { transform: translateY(0) translateX(0) rotate(-4deg); opacity: 0; }
    12%  { opacity: 1; }
    50%  { transform: translateY(-46vh) translateX(14px) rotate(4deg); }
    100% { transform: translateY(-94vh) translateX(-10px) rotate(-3deg); opacity: 0; }
  }
  .balloon { position: absolute; bottom: -40px; will-change: transform, opacity; animation: balloonUp 6s ease-in forwards; pointer-events: none; }
  @keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }