/* onda — wave/ocean theme: teal water + coral sunset, soft rounded "pebble" shapes */
:root{
  --canvas:#eef7f7; --surface:#ffffff; --surface-alt:#e3f1f1;
  --ink:#0b2f3a; --ink-2:#144552; --ink-muted:#5c7d85; --ink-faint:#9dbcc2;
  --hairline:#d3e7e8;
  --primary:#0ea5b7; --primary-active:#0a8494; --on-primary:#ffffff;
  --coral:#ff7a59; --coral-active:#e85f3f;
  --sky:#0a6b78; --sky-bg:#d7f0f2; --pink-bg:#ffe4d6;
  --shadow-1: 0 1px 3px rgba(11,63,74,.08);
  --shadow-2: 0 10px 28px rgba(11,63,74,.14);
  --shadow-3: 0 18px 46px rgba(11,63,74,.20);
  --radius-card:20px; --radius-pill:9999px; --radius-sm:14px; --radius-md:16px; --radius-xl:26px;
  --font-body:"Pretendard Variable","Pretendard",-apple-system,"Segoe UI",system-ui,"Malgun Gothic",sans-serif;
  --font-display:var(--font-body);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#04141b; --surface:#0b2733; --surface-alt:#0f3140;
    --ink:#eaf6f7; --ink-2:#cfe8ea; --ink-muted:#7fa3aa; --ink-faint:#4d707a;
    --hairline:#163947;
    --primary:#2fd0e2; --primary-active:#5adceb; --on-primary:#062024;
    --coral:#ff9478; --coral-active:#ffb199;
    --sky:#bdf0f4; --sky-bg:#0f3f48; --pink-bg:#3a2318;
    --shadow-1: 0 1px 3px rgba(0,0,0,.4);
    --shadow-2: 0 10px 28px rgba(0,0,0,.45);
    --shadow-3: 0 18px 46px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --canvas:#04141b; --surface:#0b2733; --surface-alt:#0f3140;
  --ink:#eaf6f7; --ink-2:#cfe8ea; --ink-muted:#7fa3aa; --ink-faint:#4d707a;
  --hairline:#163947;
  --primary:#2fd0e2; --primary-active:#5adceb; --on-primary:#062024;
  --coral:#ff9478; --coral-active:#ffb199;
  --sky:#bdf0f4; --sky-bg:#0f3f48; --pink-bg:#3a2318;
  --shadow-1: 0 1px 3px rgba(0,0,0,.4);
  --shadow-2: 0 10px 28px rgba(0,0,0,.45);
  --shadow-3: 0 18px 46px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{text-wrap:balance; margin:0;}
.tabular{font-variant-numeric:tabular-nums;}
button{font-family:inherit;}
textarea, input{font-family:inherit;}
svg path, svg rect, svg circle{stroke-linecap:round; stroke-linejoin:round;}

#shell{max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; position:relative;}

/* header */
#topbar{
  position:sticky; top:0; z-index:5; background:var(--canvas);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 10px;
}
#topbar .word{font-family:var(--font-display); font-weight:400; font-size:19px; letter-spacing:-.2px;}
#topbar .tab-title{font-family:var(--font-display); font-size:20px;}
#gear{background:none; border:none; color:var(--ink-muted); cursor:pointer; padding:6px; border-radius:var(--radius-pill); line-height:0;}
#gear:hover{background:var(--surface-alt);}
#gear:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}

main{flex:1; padding:4px 18px 110px; overflow-x:hidden;}
.panel{display:none;}
.panel.active{display:block;}

/* wave divider, used under the two "ocean card" moments */
.wave-deco{display:block; width:100%; height:20px; margin:-4px 0 18px; color:var(--primary); opacity:.5;}

/* bottom nav — floating rounded dock */
#nav{
  position:sticky; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:5;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--surface); margin:0 12px; border-radius:26px;
  padding:8px 4px; box-shadow:var(--shadow-2);
}
.navbtn{
  background:none; border:none; cursor:pointer; color:var(--ink-faint);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px; font-size:11px; font-weight:600; position:relative; border-radius:var(--radius-pill);
}
.navbtn svg{width:22px; height:22px;}
.navbtn.active{color:var(--primary);}
.navbtn .dot{position:absolute; top:2px; right:22%; width:7px; height:7px; border-radius:50%; background:var(--primary); border:1.5px solid var(--surface);}

/* generic card */
.card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:10px 14px; box-shadow:var(--shadow-1);}
.stack{display:flex; flex-direction:column; gap:12px;}
.row{display:flex; align-items:center; gap:10px;}

.btn{
  border:none; cursor:pointer; font-weight:600; font-size:14px;
  border-radius:var(--radius-pill); padding:10px 20px;
  background:var(--primary); color:var(--on-primary);
  display:inline-flex; align-items:center; justify-content:center;
}
.btn:active{background:var(--primary-active);}
.btn.secondary{background:var(--surface); color:var(--ink); border:1px solid var(--hairline);}
.btn.block{width:100%;}
.btn:disabled{opacity:.45; cursor:default;}

.input, textarea.input{
  width:100%; border:1px solid var(--hairline); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); padding:10px 14px; font-size:15px;
  resize:none;
}
.input::placeholder{color:var(--ink-faint);}

.pill{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; padding:3px 9px; border-radius:var(--radius-pill);}
.muted{color:var(--ink-muted); font-size:13px;}
.faint{color:var(--ink-faint); font-size:12px;}

/* the two "ocean" feature-moment cards: home hero + today's question */
.ocean-card{
  background:linear-gradient(160deg, #17c2d1 0%, #0a5a68 58%, #063542 100%);
  color:#ffffff; border-radius:var(--radius-xl); box-shadow:0 14px 34px rgba(6,53,66,.35);
}

/* HOME */
.hero{padding:26px 20px; text-align:center;}
.hero .names{font-family:var(--font-display); font-size:16px; color:rgba(255,255,255,.85);}
.hero .dday{font-family:var(--font-display); font-size:46px; letter-spacing:-.5px; margin:6px 0 2px; color:var(--coral);}
.hero .annidate{font-size:12px; color:rgba(255,255,255,.65);}
.section-title{font-family:var(--font-display); font-size:14px; color:var(--ink-muted); margin:22px 0 10px;}
.mini-row{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:13px; line-height:1.3;}
.mini-row:last-child{border-bottom:none;}
.empty{padding:26px 16px; text-align:center; color:var(--ink-faint); font-size:13px;}

/* CALENDAR */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-head .navstep{background:none; border:none; color:var(--ink-muted); cursor:pointer; font-size:18px; padding:4px 10px;}
.cal-head .ym{font-family:var(--font-display); font-size:17px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center;}
.cal-dow{font-size:11px; color:var(--ink-faint); font-weight:500; padding:4px 0;}
.cal-day{
  aspect-ratio:1.5/1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:var(--radius-md); cursor:pointer; font-size:13px; position:relative; background:none; border:none; color:var(--ink);
}
.cal-day.pad{visibility:hidden; cursor:default;}
.cal-day.today{font-weight:600; color:var(--primary);}
.cal-day.selected{background:var(--sky-bg); box-shadow:inset 0 0 0 1.5px var(--primary);}
.cal-day .dots{position:absolute; bottom:5px; left:50%; transform:translateX(-50%); display:flex; gap:2px;}
.cal-day .dot{width:4px; height:4px; border-radius:50%;}
.cal-day .dot.a{background:var(--primary);}
.cal-day .dot.b{background:var(--coral);}
.cal-day .anni{position:absolute; top:1px; font-size:9px;}
.day-panel{margin-top:16px;}
.event-item{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:13px; line-height:1.3;}
.event-item:last-child{border-bottom:none;}
.del{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:16px; line-height:1; padding:4px;}

/* RECORD (기록) */
.entry{padding:13px 0; border-bottom:1px solid var(--hairline);}
.entry:last-child{border-bottom:none;}
.entry .meta{display:flex; align-items:center; gap:8px; margin-bottom:4px;}
.entry .txt{font-size:14.5px; line-height:1.55; white-space:pre-wrap; word-break:break-word;}

/* BUCKET */
.seg{display:flex; background:var(--surface-alt); border-radius:var(--radius-pill); padding:3px; margin-bottom:14px;}
.seg button{flex:1; border:none; background:none; padding:9px 0; border-radius:var(--radius-pill); font-weight:600; font-size:13.5px; color:var(--ink-muted); cursor:pointer;}
.seg button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
.bucket-item{display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--hairline);}
.bucket-item:last-child{border-bottom:none;}
.check{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ink-faint); flex:none; margin-top:1px; cursor:pointer; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--on-primary); font-size:13px;}
.check.done{background:var(--primary); border-color:var(--primary);}
.bucket-item .txt{flex:1; font-size:14.5px; line-height:1.5;}
.bucket-item .txt.done{color:var(--ink-faint); text-decoration:line-through;}

/* Kakao place search results */
#placeResults:not(:empty){margin-top:8px; display:flex; flex-direction:column; gap:6px;}
.place-result{display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:8px 12px; cursor:pointer;}
.place-result:hover{background:var(--surface-alt);}
.place-result .pr-name{font-size:13.5px; font-weight:500; color:var(--ink);}
.place-result .pr-addr{font-size:12px; margin-top:2px;}

/* QUESTION */
.q-card{padding:18px; margin-bottom:18px;}
.q-card .q-label{font-size:12px; font-weight:500; color:#5eead4;}
.q-card .q-text{font-family:var(--font-display); font-size:19px; margin:8px 0 14px; line-height:1.4; color:#ffffff;}
.ans-grid{display:flex; flex-direction:column; gap:10px;}
.ans-box{background:rgba(255,255,255,.09); border-radius:var(--radius-md); padding:11px 12px;}
.ans-box .who{font-size:11px; font-weight:500; color:rgba(255,255,255,.65); margin-bottom:4px;}
.ans-box .ans-txt{font-size:14px; line-height:1.5; color:#ffffff;}

/* MESSAGES (chat widget) */
.msg{max-width:82%; padding:9px 13px; border-radius:var(--radius-card); border:1px solid var(--hairline); font-size:14px; line-height:1.5; margin-bottom:8px; word-break:break-word; white-space:pre-wrap; position:relative;}
.msg.me{margin-left:auto; background:var(--pink-bg); border-bottom-right-radius:4px; padding-right:30px;}
.msg.partner{margin-right:auto; background:var(--sky-bg); border-bottom-left-radius:4px;}
.msg .del{position:absolute; top:5px; right:5px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; font-size:11px; padding:0; color:inherit;}

/* floating chat widget */
.chat-fab{
  position:fixed; right:20px; bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:45; width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center;
  animation:onda-bob 3.2s ease-in-out infinite;
}
@keyframes onda-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
@media (prefers-reduced-motion: reduce){ .chat-fab{animation:none;} }
.chat-fab .dot{position:absolute; top:2px; right:2px; width:11px; height:11px; border-radius:50%; background:#ffffff; box-shadow:0 0 0 2px var(--primary);}
.chat-panel{
  position:fixed; inset:0; z-index:46; background:var(--surface);
  display:flex; flex-direction:column; border-radius:0; box-shadow:none;
}
.chat-panel[hidden]{display:none;}
.chat-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--hairline); font-family:var(--font-display); font-size:17px;}
.chat-body{flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column;}
.chat-composer{padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--hairline);}
.composer{display:flex; gap:8px; align-items:stretch;}
.composer .input{flex:1; width:auto; min-width:0;}
.composer textarea{min-height:42px;}
.composer .btn{flex:none; white-space:nowrap;}

/* onboarding / chooser overlay */
.overlay{position:fixed; inset:0; background:rgba(4,20,27,.55); display:flex; align-items:flex-end; justify-content:center; z-index:50;}
.sheet{width:100%; max-width:480px; background:var(--surface); border-radius:var(--radius-xl) var(--radius-xl) 0 0; padding:26px 22px calc(26px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-3);}
.sheet h2{font-family:var(--font-display); font-size:22px; margin-bottom:6px;}
.sheet .sub{color:var(--ink-muted); font-size:13.5px; margin-bottom:18px;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:12px; font-weight:500; color:var(--ink-muted); margin-bottom:5px;}
.choose-btns{display:flex; gap:10px; margin-top:6px;}
.choose-btns button{flex:1; padding:16px 8px; border-radius:var(--radius-card); border:1.5px solid var(--hairline); background:var(--surface-alt); font-weight:600; cursor:pointer; color:var(--ink);}
.choose-btns button.active{background:var(--primary); color:var(--on-primary); border-color:var(--primary);}

/* full-screen login/signup — covers everything until a session resolves */
#authScreen{position:fixed; inset:0; z-index:100; background:var(--canvas); display:flex; align-items:center; justify-content:center; padding:24px;}
#authScreen[hidden]{display:none;}
.auth-card{width:100%; max-width:380px;}
.auth-logo{font-size:15px; font-weight:600; margin-bottom:18px; text-align:center;}
.auth-card h2{font-family:var(--font-display); font-size:22px; margin-bottom:6px; text-align:center;}
.auth-card .sub{color:var(--ink-muted); font-size:13.5px; margin-bottom:18px; text-align:center;}
.auth-err{background:var(--pink-bg); color:var(--coral-active); font-size:13px; padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:14px;}
.auth-switch{display:block; width:100%; text-align:center; background:none; border:none; color:var(--ink-muted); font-size:13px; margin-top:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.invite-code{background:var(--surface-alt); border-radius:var(--radius-md); padding:18px; margin-bottom:18px; text-align:center; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:28px; font-weight:700; letter-spacing:.15em; color:var(--primary-active);}

#dateMap{width:100%; height:220px; border-radius:var(--radius-md); overflow:hidden; background:var(--surface-alt); margin-top:4px;}
#dateMap .empty{padding:0; height:220px; display:flex; align-items:center; justify-content:center;}

::selection{background:color-mix(in srgb, var(--primary) 28%, transparent);}

/* ---- desktop layout (>=880px): sidebar nav + centered reading column ---- */
.nav-brand{display:none;}
@media (min-width:880px){
  body{padding:32px 24px;}
  #shell{max-width:1040px; flex-direction:row; flex-wrap:wrap; align-items:flex-start; min-height:0;}
  .nav-brand{
    display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:18px;
    padding:8px 12px 18px;
  }
  #nav{
    position:sticky; top:32px; bottom:auto; width:220px; flex:none; margin:0;
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-1);
    padding:16px 12px;
  }
  .navbtn{
    flex-direction:row; justify-content:flex-start; gap:10px;
    padding:10px 12px; border-radius:var(--radius-md); font-size:14px; font-weight:500;
  }
  .navbtn:hover{background:var(--surface-alt);}
  .navbtn.active{background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary-active);}
  .navbtn svg{width:19px; height:19px; flex:none;}
  .navbtn .dot{position:static; margin-left:auto;}
  main{flex:1 1 0%; min-width:0; width:100%; max-width:640px; margin:0 auto; padding:0 8px 60px 40px;}
  #topbar{flex:0 0 100%; width:100%; padding:0 8px 20px 40px;}
  #topbarWord{font-size:28px;}
  .overlay{align-items:center;}
  .sheet{max-width:420px; border-radius:var(--radius-xl); box-shadow:var(--shadow-3);}

  .chat-fab{bottom:24px;}
  .chat-panel{
    inset:auto; right:24px; bottom:88px;
    width:360px; height:480px; max-height:70vh;
    border-radius:var(--radius-xl); box-shadow:var(--shadow-3);
    border:1px solid var(--hairline);
  }

  /* preview=sidebar / preview=stats: third column next to nav */
  #shell.has-side-widget{max-width:1320px;}
  .side-widget{
    display:flex; flex-direction:column; gap:14px; width:280px; flex:none;
    position:sticky; top:32px;
  }
  .side-widget[hidden]{display:none;}
  .side-widget .card{margin:0;}
  .side-widget .widget-title{font-family:var(--font-display); font-size:13px; color:var(--ink-muted); margin-bottom:2px;}
  .stat-row{display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--hairline);}
  .stat-row:last-child{border-bottom:none;}
  .stat-row .stat-num{font-family:var(--font-display); font-size:20px; color:var(--primary);}

  /* preview=grid: home upcoming + recent side by side, wider column */
  main.wide{max-width:900px;}
  .home-2col{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;}
  .home-2col .section-title{margin-top:0;}
}

/* ====================================================================
   Layout variants (?layout=c01|c02|c06|c07|c19) — same data/functions, different
   nav/hero/card chrome. Nav/topbar REPOSITIONING is desktop-only (mobile
   keeps the proven bottom dock everywhere) — but each concept's color/
   shape signature (flat hero, dday treatment, palette) applies at every
   width, so a layout still reads as itself on a phone, not as the
   generic default.
   ==================================================================== */
/* transparent by default — #nav behaves as a direct flex child of #shell exactly
   as before; c19 turns this into the real flex item instead (see below), so
   #nav's own max-width can't get clamped during #shell's line-wrap fitting */
#navWrap{display:contents;}

/* ---- per-concept color/shape signature: applies at every width ---- */
/* No-gradient rule only needs solving for the default "wave" look — every
   named theme already ships its own flat, contrast-checked .hero/.q-card
   color (some dark+white text, "supabase" is light+dark text), so we must
   NOT override those with a single guessed color: var(--primary-active)
   isn't guaranteed dark, and forcing it broke legibility on any theme
   where it resolves light (caught via a real screenshot, not assumed). */
:root[data-layout="c01"][data-app-theme="wave"] .ocean-card, :root[data-layout="c02"][data-app-theme="wave"] .ocean-card,
:root[data-layout="c06"][data-app-theme="wave"] .ocean-card, :root[data-layout="c07"][data-app-theme="wave"] .ocean-card,
:root[data-layout="c19"][data-app-theme="wave"] .ocean-card{
  background:#0a5a68;
}

/* c01 — dday tile shrinks to a label + number, like the desktop stat-tile */
:root[data-layout="c01"] .stat-tile-hero{text-align:left;}
:root[data-layout="c01"] .stat-tile-hero::before{content:"디데이"; display:block; font-size:12px; font-weight:600; color:rgba(255,255,255,.7);}
:root[data-layout="c01"] .stat-tile-hero .names, :root[data-layout="c01"] .stat-tile-hero .annidate{display:none;}

/* c02 — no card chrome, huge typography */
:root[data-layout="c02"] .hero{background:transparent; border:none; box-shadow:none;}
:root[data-layout="c02"] .hero .names{color:var(--ink-muted);}
:root[data-layout="c02"] .hero .dday{font-size:56px; color:var(--primary);}
:root[data-layout="c02"] .hero .annidate{color:var(--ink-faint);}
:root[data-layout="c02"] .wave-deco{display:none;}

/* c06 — chat-app shell: dday reads like a bubble, nav icons like avatar badges */
:root[data-layout="c06"] .navbtn svg{background:var(--primary); color:var(--on-primary); border-radius:50%; padding:4px; box-sizing:border-box;}
:root[data-layout="c06"] .navbtn.active svg{background:var(--primary-active);}
:root[data-layout="c06"] main{background-image:radial-gradient(var(--hairline) 1px, transparent 1px); background-size:16px 16px;}
:root[data-layout="c06"] #panel-home .hero{max-width:88%; text-align:left; border-radius:var(--radius-card) var(--radius-card) var(--radius-card) 4px;}

/* c07 — journal: cream paper canvas, ink typography, no card chrome */
:root[data-layout="c07"]{--canvas:#fdfbf6; --ink:#20221f; --ink-muted:#8a8676; --ink-faint:#a6a294; --hairline:#ece7d8;}
:root[data-layout="c07"] .hero{background:transparent; border:none; box-shadow:none; text-align:left;}
:root[data-layout="c07"] .hero .names{color:var(--ink-muted);}
:root[data-layout="c07"] .hero .dday{color:var(--ink); font-weight:800;}
:root[data-layout="c07"] .hero .annidate{color:var(--ink-faint);}
:root[data-layout="c07"] .wave-deco{display:none;}
:root[data-layout="c07"] .card{background:transparent; border:none; box-shadow:none; padding:0;}

/* c19 — flat white dday card instead of the dark gradient */
:root[data-layout="c19"] #panel-home .hero{background:var(--surface); box-shadow:var(--shadow-1);}
:root[data-layout="c19"] #panel-home .hero .names{color:var(--ink);}
:root[data-layout="c19"] #panel-home .hero .dday{color:var(--primary);}
:root[data-layout="c19"] #panel-home .hero .annidate{color:var(--ink-faint);}

@media (min-width:880px){
  /* c01 — sidebar dashboard: nav sits LEFT of main (gallery has nav first in the row);
     stat tiles go from mobile's plain vertical stack to a 3-column grid row */
  :root[data-layout="c01"] #topbar{order:-2;}
  :root[data-layout="c01"] #nav{order:-1;}
  :root[data-layout="c01"] #shell:has(#panel-home.active) #topbarWord{display:none;}
  :root[data-layout="c01"] .stat-tiles{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px;}
  :root[data-layout="c01"] .stat-tile-hero{margin:0; padding:18px;}
  :root[data-layout="c01"] .stat-tile-hero .dday{margin:4px 0 0; font-size:34px;}
  :root[data-layout="c01"] .stat-tile{margin:0; display:flex; flex-direction:column; justify-content:center; gap:6px;}
  :root[data-layout="c01"] .stat-tile .stat-num{font-size:26px;}

  /* c02 — editorial top tabs (mobile keeps the bottom dock; dday grows a bit more) */
  :root[data-layout="c02"] #nav{position:static; width:auto; flex:0 0 100%; order:-1; flex-direction:row; justify-content:center; background:transparent; box-shadow:none; border-bottom:1px solid var(--hairline); border-radius:0; padding:16px 0;}
  :root[data-layout="c02"] .nav-brand{display:none;}
  :root[data-layout="c02"] .navbtn{flex-direction:row; padding:8px 16px; font-size:13px;}
  :root[data-layout="c02"] .navbtn .dot{position:static; margin-left:4px;}
  :root[data-layout="c02"] main{max-width:600px; margin:0 auto; padding:0 8px 60px;}
  :root[data-layout="c02"] #topbar{padding:0 8px 8px; justify-content:flex-end;}
  :root[data-layout="c02"] #topbarWord{display:none;}
  :root[data-layout="c02"] .hero{padding:40px 0 0;}
  :root[data-layout="c02"] .hero .dday{font-size:72px;}

  /* c06 — chat-app shell: nav is a LEFT-side conversation list (gallery has nav first in the row) */
  :root[data-layout="c06"] #topbar{order:-2;}
  :root[data-layout="c06"] #nav{order:-1;}
  :root[data-layout="c06"] #shell:has(#panel-home.active) #topbarWord{display:none;}
  /* nav rows read like a conversation list: letter-avatar + title line + "last message" subtitle */
  :root[data-layout="c06"] .navbtn{flex-wrap:wrap; align-items:center; text-align:left; padding:8px 10px; font-weight:600;}
  :root[data-layout="c06"] .navbtn svg{display:none;}
  :root[data-layout="c06"] .navbtn::before{
    content:"?"; width:34px; height:34px; flex:none; border-radius:50%; margin-right:10px;
    background:var(--primary); color:var(--on-primary); font-size:14px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  :root[data-layout="c06"] .navbtn.active::before{background:var(--primary-active);}
  :root[data-layout="c06"] .navbtn[data-tab="home"]::before{content:"홈";}
  :root[data-layout="c06"] .navbtn[data-tab="calendar"]::before{content:"캘";}
  :root[data-layout="c06"] .navbtn[data-tab="record"]::before{content:"기";}
  :root[data-layout="c06"] .navbtn[data-tab="bucket"]::before{content:"버";}
  :root[data-layout="c06"] .navbtn[data-tab="question"]::before{content:"질";}
  :root[data-layout="c06"] .navbtn::after{
    content:attr(data-sub); flex-basis:100%; margin-left:44px;
    font-size:11px; font-weight:400; color:var(--ink-faint);
  }
  :root[data-layout="c06"] main{background-image:radial-gradient(var(--hairline) 1px, transparent 1px); background-size:18px 18px;}
  :root[data-layout="c06"] #panel-home .hero{max-width:420px; text-align:left; padding:16px 20px; border-radius:var(--radius-card) var(--radius-card) var(--radius-card) 4px;}
  :root[data-layout="c06"] #panel-home .hero .names, :root[data-layout="c06"] #panel-home .hero .annidate{font-size:12px;}
  :root[data-layout="c06"] #panel-home .card{border:none; box-shadow:var(--shadow-1); border-radius:var(--radius-card) var(--radius-card) var(--radius-card) 4px;}

  /* c07 — journal: top link-row nav instead of the bottom dock, narrower reading column */
  :root[data-layout="c07"] #nav{position:static; width:auto; flex:0 0 100%; order:-1; flex-direction:row; gap:22px; justify-content:flex-start; background:transparent; box-shadow:none; border-radius:0; padding:26px 8px 18px;}
  :root[data-layout="c07"] .nav-brand{display:none;}
  :root[data-layout="c07"] .navbtn{flex-direction:row; padding:0; font-size:13px; color:var(--ink-muted); border-radius:0;}
  :root[data-layout="c07"] .navbtn svg{display:none;}
  :root[data-layout="c07"] .navbtn .dot{position:static;}
  :root[data-layout="c07"] .navbtn.active{background:none; color:var(--ink); text-decoration:underline; text-underline-offset:4px;}
  :root[data-layout="c07"] main{max-width:560px; margin:0 auto; padding:0 8px 60px;}
  :root[data-layout="c07"] #topbar{order:-2; padding:0 8px 4px;}
  :root[data-layout="c07"] .hero{padding:8px 0 20px;}
  :root[data-layout="c07"] .hero .dday{font-size:48px;}
  :root[data-layout="c07"] .card.stack{gap:10px;}

  /* c19 — centered, no sidebar, pill tabs (mobile keeps the bottom dock) */
  :root[data-layout="c19"] #topbar{order:-2; justify-content:center; position:relative;}
  :root[data-layout="c19"] #gear{position:absolute; right:8px;}
  :root[data-layout="c19"] #navWrap{display:block; flex:0 0 100%; order:-1;}
  :root[data-layout="c19"] #nav{width:auto; display:flex; flex-direction:row; justify-content:center; background:var(--surface-alt); border-radius:var(--radius-pill); box-shadow:none; padding:4px; margin:0 auto 20px; max-width:480px;}
  :root[data-layout="c19"] .nav-brand{display:none;}
  :root[data-layout="c19"] .navbtn{flex-direction:row; padding:8px 16px; border-radius:var(--radius-pill);}
  :root[data-layout="c19"] .navbtn.active{background:var(--surface); color:var(--primary-active); box-shadow:var(--shadow-1);}
  :root[data-layout="c19"] main{max-width:520px; margin:0 auto; padding:0 8px 60px;}
}

/* ---- theme picker (settings sheet) ---- */
.theme-opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border-radius:var(--radius-md); border:1.5px solid var(--hairline); background:var(--surface); cursor:pointer;}
.theme-opt.active{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary);}
.theme-swatch{display:flex; flex:none;}
.theme-swatch span{display:block; width:16px; height:16px; border-radius:50%; margin-left:-6px; border:2px solid var(--surface);}
.theme-swatch span:first-child{margin-left:0;}
.theme-info{display:flex; flex-direction:column; gap:2px; flex:1;}
.theme-name{font-weight:600; font-size:14px;}
.theme-check{color:var(--primary); font-weight:700;}

/* ====================================================================
   Alternate app theme: "supabase" — the near-monochrome + single green
   accent, square-ish 6px controls design (saved as a selectable theme
   alongside the default "wave" ocean look above).
   ==================================================================== */
[data-app-theme="supabase"]{
  --radius-card:12px; --radius-sm:6px; --radius-md:8px; --radius-xl:16px;
  --font-display:var(--font-body);
}
[data-app-theme="supabase"]{
  --canvas:#fafafa; --surface:#ffffff; --surface-alt:#eeeeee;
  --ink:#171717; --ink-2:#212121; --ink-muted:#707070; --ink-faint:#b2b2b2;
  --hairline:#dfdfdf;
  --primary:#3ecf8e; --primary-active:#24b47e; --on-primary:#171717;
  --sky:#212121; --sky-bg:#eeeeee; --pink-bg:#ffffff;
  --shadow-1: 0 1px 3px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,.08);
  --shadow-3: 0 16px 48px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark){
  [data-app-theme="supabase"]:not([data-theme="light"]){
    --canvas:#1c1c1c; --surface:#202020; --surface-alt:#282828;
    --ink:#ffffff; --ink-2:#e5e5e5; --ink-muted:#9a9a9a; --ink-faint:#707070;
    --hairline:#2e2e2e;
    --primary:#3ecf8e; --primary-active:#4ade80; --on-primary:#171717;
    --sky:#e5e5e5; --sky-bg:#2a2a2a; --pink-bg:#202020;
    --shadow-1: 0 1px 3px rgba(0,0,0,.4);
    --shadow-2: 0 8px 24px rgba(0,0,0,.45);
    --shadow-3: 0 16px 48px rgba(0,0,0,.55);
  }
}
[data-app-theme="supabase"][data-theme="dark"]{
  --canvas:#1c1c1c; --surface:#202020; --surface-alt:#282828;
  --ink:#ffffff; --ink-2:#e5e5e5; --ink-muted:#9a9a9a; --ink-faint:#707070;
  --hairline:#2e2e2e;
  --primary:#3ecf8e; --primary-active:#4ade80; --on-primary:#171717;
  --sky:#e5e5e5; --sky-bg:#2a2a2a; --pink-bg:#202020;
  --shadow-1: 0 1px 3px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-3: 0 16px 48px rgba(0,0,0,.55);
}

[data-app-theme="supabase"] .btn{border-radius:6px;}
[data-app-theme="supabase"] .seg,
[data-app-theme="supabase"] .seg button{border-radius:6px;}
[data-app-theme="supabase"] .check{border-radius:6px;}
[data-app-theme="supabase"] .chat-fab{animation:none;}
[data-app-theme="supabase"] .wave-deco{display:none;}
[data-app-theme="supabase"] .cal-day .dot.b{background:var(--ink-muted);}

[data-app-theme="supabase"] .hero{background:var(--surface); color:var(--ink); border:1px solid var(--hairline); box-shadow:var(--shadow-1);}
[data-app-theme="supabase"] .hero .names{font-family:var(--font-body); font-weight:600; color:var(--ink-2);}
[data-app-theme="supabase"] .hero .dday{font-family:var(--font-body); font-weight:500; letter-spacing:-1.1px; color:var(--primary);}
[data-app-theme="supabase"] .hero .annidate{color:var(--ink-faint);}

[data-app-theme="supabase"] .q-card{background:#1c1c1c; box-shadow:none;}
[data-app-theme="supabase"] .q-card .q-label{color:#3ecf8e;}
[data-app-theme="supabase"] .q-card .q-text{font-family:var(--font-body); font-weight:500; letter-spacing:-.2px;}

[data-app-theme="supabase"] #topbar .word,
[data-app-theme="supabase"] .nav-brand,
[data-app-theme="supabase"] .cal-head .ym,
[data-app-theme="supabase"] .section-title,
[data-app-theme="supabase"] .sheet h2,
[data-app-theme="supabase"] .chat-head{font-family:var(--font-body); font-weight:600;}

/* ====================================================================
   8 additional selectable app themes (see Settings > 테마).
   Each layers color/shape/font overrides on the wave base above —
   flat colors only (no gradients), meaningful onda/water palettes.
   ==================================================================== */

/* 한여름 */
[data-app-theme="summer"]{
  --canvas:#fff8e8; --surface:#ffffff; --surface-alt:#fdeecb;
  --ink:#2b2013; --ink-2:#4a3a20; --ink-muted:#8a7550; --ink-faint:#c9b98c;
  --hairline:#f0e2c0;
  --primary:#ffb703; --primary-active:#e6a300; --on-primary:#2b2013;
  --coral:#0096c7;
  --sky:#8a5a00; --sky-bg:#fff1cf; --pink-bg:#e0f4fb;
}
@media (prefers-color-scheme: dark){
  [data-app-theme="summer"]:not([data-theme="light"]){
    --canvas:#1c1608; --surface:#2a2210; --surface-alt:#352b15;
    --ink:#fff3d6; --ink-2:#f0dfb0; --ink-muted:#b9a06a; --ink-faint:#7a6640;
    --hairline:#453a1e;
    --primary:#ffc93c; --primary-active:#ffd966; --on-primary:#241a00;
    --coral:#48cae4;
    --sky:#ffd166; --sky-bg:#4a3a10; --pink-bg:#123a4a;
    }
}
[data-app-theme="summer"][data-theme="dark"]{
  --canvas:#1c1608; --surface:#2a2210; --surface-alt:#352b15;
  --ink:#fff3d6; --ink-2:#f0dfb0; --ink-muted:#b9a06a; --ink-faint:#7a6640;
  --hairline:#453a1e;
  --primary:#ffc93c; --primary-active:#ffd966; --on-primary:#241a00;
  --coral:#48cae4;
  --sky:#ffd166; --sky-bg:#4a3a10; --pink-bg:#123a4a;
}
[data-app-theme="summer"] .hero{background:#023e8a; color:#ffffff;}
[data-app-theme="summer"] .hero .names{color:rgba(255,255,255,.85);}
[data-app-theme="summer"] .hero .dday{color:#ffd166;}
[data-app-theme="summer"] .hero .annidate{color:rgba(255,255,255,.65);}
[data-app-theme="summer"] .q-card{background:#023e8a;}
[data-app-theme="summer"] .q-card .q-label{color:#ffd166;}

/* 한겨울 */
[data-app-theme="winter"]{
  --canvas:#f2f7fa; --surface:#ffffff; --surface-alt:#e6eef3;
  --ink:#16232c; --ink-2:#2c3e4a; --ink-muted:#66808f; --ink-faint:#a9bcc6;
  --hairline:#dbe6ec;
  --primary:#4f7ca8; --primary-active:#3d6389; --on-primary:#ffffff;
  --coral:#9fd8e8;
  --sky:#2c5878; --sky-bg:#e2f1f7; --pink-bg:#eef0f5;
}
@media (prefers-color-scheme: dark){
  [data-app-theme="winter"]:not([data-theme="light"]){
    --canvas:#0c1620; --surface:#132030; --surface-alt:#1b2b3d;
    --ink:#eaf3f8; --ink-2:#cddce6; --ink-muted:#7f9aab; --ink-faint:#4f6575;
    --hairline:#233648;
    --primary:#7db4d9; --primary-active:#a3cde6; --on-primary:#0a1520;
    --coral:#bfeaf5;
    --sky:#a3cde6; --sky-bg:#1c3448; --pink-bg:#241e33;
    }
}
[data-app-theme="winter"][data-theme="dark"]{
  --canvas:#0c1620; --surface:#132030; --surface-alt:#1b2b3d;
  --ink:#eaf3f8; --ink-2:#cddce6; --ink-muted:#7f9aab; --ink-faint:#4f6575;
  --hairline:#233648;
  --primary:#7db4d9; --primary-active:#a3cde6; --on-primary:#0a1520;
  --coral:#bfeaf5;
  --sky:#a3cde6; --sky-bg:#1c3448; --pink-bg:#241e33;
}
[data-app-theme="winter"] .hero{background:#132639; color:#ffffff;}
[data-app-theme="winter"] .hero .names{color:rgba(255,255,255,.85);}
[data-app-theme="winter"] .hero .dday{color:#8fd6ea;}
[data-app-theme="winter"] .hero .annidate{color:rgba(255,255,255,.65);}
[data-app-theme="winter"] .q-card{background:#132639;}
[data-app-theme="winter"] .q-card .q-label{color:#8fd6ea;}

/* 폭풍 */
[data-app-theme="storm"]{
  --canvas:#eef0f3; --surface:#ffffff; --surface-alt:#e3e7ec;
  --ink:#262b33; --ink-2:#3c4451; --ink-muted:#6b7280; --ink-faint:#a8b0ba;
  --hairline:#d7dce2;
  --primary:#6c63ff; --primary-active:#564bf0; --on-primary:#ffffff;
  --coral:#c6d94a;
  --sky:#4b3fd1; --sky-bg:#eae8ff; --pink-bg:#f2f5df;
}
@media (prefers-color-scheme: dark){
  [data-app-theme="storm"]:not([data-theme="light"]){
    --canvas:#14171d; --surface:#1c2029; --surface-alt:#242a35;
    --ink:#eef0f3; --ink-2:#d3d8e0; --ink-muted:#7d8592; --ink-faint:#4d5563;
    --hairline:#2c333f;
    --primary:#8f88ff; --primary-active:#a9a3ff; --on-primary:#121225;
    --coral:#d7e86a;
    --sky:#a9a3ff; --sky-bg:#2a2650; --pink-bg:#333a1a;
    }
}
[data-app-theme="storm"][data-theme="dark"]{
  --canvas:#14171d; --surface:#1c2029; --surface-alt:#242a35;
  --ink:#eef0f3; --ink-2:#d3d8e0; --ink-muted:#7d8592; --ink-faint:#4d5563;
  --hairline:#2c333f;
  --primary:#8f88ff; --primary-active:#a9a3ff; --on-primary:#121225;
  --coral:#d7e86a;
  --sky:#a9a3ff; --sky-bg:#2a2650; --pink-bg:#333a1a;
}
[data-app-theme="storm"] .hero{background:#1f2430; color:#ffffff;}
[data-app-theme="storm"] .hero .names{color:rgba(255,255,255,.85);}
[data-app-theme="storm"] .hero .dday{color:#8f88ff;}
[data-app-theme="storm"] .hero .annidate{color:rgba(255,255,255,.65);}
[data-app-theme="storm"] .q-card{background:#1f2430;}
[data-app-theme="storm"] .q-card .q-label{color:#8f88ff;}

/* 산호초 */
[data-app-theme="coral-reef"]{
  --canvas:#eafbf6; --surface:#ffffff; --surface-alt:#d9f5ec;
  --ink:#0c2b24; --ink-2:#1c4b3f; --ink-muted:#5a8079; --ink-faint:#9dc2b8;
  --hairline:#cdeee2;
  --primary:#0fb894; --primary-active:#0c9678; --on-primary:#ffffff;
  --coral:#ff3d81;
  --sky:#0c8a6f; --sky-bg:#d3f5ea; --pink-bg:#ffe1ec;
}
@media (prefers-color-scheme: dark){
  [data-app-theme="coral-reef"]:not([data-theme="light"]){
    --canvas:#06201a; --surface:#0c2c24; --surface-alt:#12392f;
    --ink:#e3fbf3; --ink-2:#bdeee0; --ink-muted:#68a596; --ink-faint:#3d6b5f;
    --hairline:#164435;
    --primary:#2ee0b8; --primary-active:#5fe9c9; --on-primary:#052018;
    --coral:#ff6fa3;
    --sky:#5fe9c9; --sky-bg:#0e3d33; --pink-bg:#3a1c2b;
    }
}
[data-app-theme="coral-reef"][data-theme="dark"]{
  --canvas:#06201a; --surface:#0c2c24; --surface-alt:#12392f;
  --ink:#e3fbf3; --ink-2:#bdeee0; --ink-muted:#68a596; --ink-faint:#3d6b5f;
  --hairline:#164435;
  --primary:#2ee0b8; --primary-active:#5fe9c9; --on-primary:#052018;
  --coral:#ff6fa3;
  --sky:#5fe9c9; --sky-bg:#0e3d33; --pink-bg:#3a1c2b;
}
[data-app-theme="coral-reef"] .hero{background:#0b4d43; color:#ffffff;}
[data-app-theme="coral-reef"] .hero .names{color:rgba(255,255,255,.85);}
[data-app-theme="coral-reef"] .hero .dday{color:#ff6fa3;}
[data-app-theme="coral-reef"] .hero .annidate{color:rgba(255,255,255,.65);}
[data-app-theme="coral-reef"] .q-card{background:#0b4d43;}
[data-app-theme="coral-reef"] .q-card .q-label{color:#ff6fa3;}

/* 소금 */
[data-app-theme="sea-salt"]{
  --radius-card:14px; --radius-sm:8px; --radius-md:10px; --radius-xl:18px;
}
[data-app-theme="sea-salt"]{
  --canvas:#f6f4f0; --surface:#ffffff; --surface-alt:#ece8e0;
  --ink:#292c2e; --ink-2:#40444a; --ink-muted:#7a7f82; --ink-faint:#b6b2aa;
  --hairline:#e2ded7;
  --primary:#6f8c99; --primary-active:#597682; --on-primary:#ffffff;
  --coral:#b99b8d;
  --sky:#4c6570; --sky-bg:#e6edf0; --pink-bg:#efe6df;
}
@media (prefers-color-scheme: dark){
  [data-app-theme="sea-salt"]:not([data-theme="light"]){
    --canvas:#1c1c1c; --surface:#252525; --surface-alt:#2e2e2e;
    --ink:#f2f0ec; --ink-2:#d6d2c8; --ink-muted:#9a9690; --ink-faint:#63605a;
    --hairline:#3a3a38;
    --primary:#8fadb8; --primary-active:#a8c3cc; --on-primary:#12181a;
    --coral:#d4b6a6;
    --sky:#a8c3cc; --sky-bg:#2c3a3e; --pink-bg:#352c26;
    }
}
[data-app-theme="sea-salt"][data-theme="dark"]{
  --canvas:#1c1c1c; --surface:#252525; --surface-alt:#2e2e2e;
  --ink:#f2f0ec; --ink-2:#d6d2c8; --ink-muted:#9a9690; --ink-faint:#63605a;
  --hairline:#3a3a38;
  --primary:#8fadb8; --primary-active:#a8c3cc; --on-primary:#12181a;
  --coral:#d4b6a6;
  --sky:#a8c3cc; --sky-bg:#2c3a3e; --pink-bg:#352c26;
}
[data-app-theme="sea-salt"] .hero{background:#23282b; color:#ffffff;}
[data-app-theme="sea-salt"] .hero .names{color:rgba(255,255,255,.85);}
[data-app-theme="sea-salt"] .hero .dday{color:#a8c3cc;}
[data-app-theme="sea-salt"] .hero .annidate{color:rgba(255,255,255,.65);}
[data-app-theme="sea-salt"] .q-card{background:#23282b;}
[data-app-theme="sea-salt"] .q-card .q-label{color:#a8c3cc;}

/* 밀물 */
[data-app-theme="high-tide"]{
  --canvas:#f6ead9; --surface:#fffaf2; --surface-alt:#efdcc0;
  --ink:#2b241c; --ink-2:#453a2b; --ink-muted:#7d7365; --ink-faint:#bcae98;
  --hairline:#e6d7bf;
  --primary:#147a6a; --primary-active:#106258; --on-primary:#ffffff;
  --coral:#c98a53;
  --sky:#0e5c50; --sky-bg:#d9ece7; --pink-bg:#f3e2cd;
}
@media (prefers-color-scheme: dark){
  [data-app-theme="high-tide"]:not([data-theme="light"]){
    --canvas:#191410; --surface:#231c15; --surface-alt:#2c2319;
    --ink:#f3e9d8; --ink-2:#dfd0b4; --ink-muted:#a3917a; --ink-faint:#665a49;
    --hairline:#382c1e;
    --primary:#3ea592; --primary-active:#5fc0ac; --on-primary:#0a1a16;
    --coral:#e0ab73;
    --sky:#5fc0ac; --sky-bg:#173a33; --pink-bg:#3a2a18;
    }
}
[data-app-theme="high-tide"][data-theme="dark"]{
  --canvas:#191410; --surface:#231c15; --surface-alt:#2c2319;
  --ink:#f3e9d8; --ink-2:#dfd0b4; --ink-muted:#a3917a; --ink-faint:#665a49;
  --hairline:#382c1e;
  --primary:#3ea592; --primary-active:#5fc0ac; --on-primary:#0a1a16;
  --coral:#e0ab73;
  --sky:#5fc0ac; --sky-bg:#173a33; --pink-bg:#3a2a18;
}
[data-app-theme="high-tide"] .hero{background:#0d4a40; color:#ffffff;}
[data-app-theme="high-tide"] .hero .names{color:rgba(255,255,255,.85);}
[data-app-theme="high-tide"] .hero .dday{color:#e0ab73;}
[data-app-theme="high-tide"] .hero .annidate{color:rgba(255,255,255,.65);}
[data-app-theme="high-tide"] .q-card{background:#0d4a40;}
[data-app-theme="high-tide"] .q-card .q-label{color:#e0ab73;}

/* 윤슬 */
[data-app-theme="yunseul"]{
  --canvas:#fdf6e6; --surface:#ffffff; --surface-alt:#faecc6;
  --ink:#12283a; --ink-2:#26435a; --ink-muted:#5c7488; --ink-faint:#a4b7c4;
  --hairline:#f0e2bd;
  --primary:#f2b544; --primary-active:#dba02f; --on-primary:#12283a;
  --coral:#1c5d8c;
  --sky:#8a6a10; --sky-bg:#fbeec8; --pink-bg:#dceafa;
}
@media (prefers-color-scheme: dark){
  [data-app-theme="yunseul"]:not([data-theme="light"]){
    --canvas:#0e1a24; --surface:#152534; --surface-alt:#1c3040;
    --ink:#fdf3dc; --ink-2:#eadcb8; --ink-muted:#a3946e; --ink-faint:#65593d;
    --hairline:#2a3f52;
    --primary:#f7cc6e; --primary-active:#fadb92; --on-primary:#1c1400;
    --coral:#5b9cd6;
    --sky:#fadb92; --sky-bg:#3a2f10; --pink-bg:#16304a;
    }
}
[data-app-theme="yunseul"][data-theme="dark"]{
  --canvas:#0e1a24; --surface:#152534; --surface-alt:#1c3040;
  --ink:#fdf3dc; --ink-2:#eadcb8; --ink-muted:#a3946e; --ink-faint:#65593d;
  --hairline:#2a3f52;
  --primary:#f7cc6e; --primary-active:#fadb92; --on-primary:#1c1400;
  --coral:#5b9cd6;
  --sky:#fadb92; --sky-bg:#3a2f10; --pink-bg:#16304a;
}
[data-app-theme="yunseul"] .hero{background:#0d2b42; color:#ffffff;}
[data-app-theme="yunseul"] .hero .names{color:rgba(255,255,255,.85);}
[data-app-theme="yunseul"] .hero .dday{color:#f2c869;}
[data-app-theme="yunseul"] .hero .annidate{color:rgba(255,255,255,.65);}
[data-app-theme="yunseul"] .q-card{background:#0d2b42;}
[data-app-theme="yunseul"] .q-card .q-label{color:#f2c869;}

/* 심야 — deliberately always dark (night sea), no light-mode variant */
[data-app-theme="midnight"]{
  --canvas:#0a0a1a; --surface:#14142b; --surface-alt:#1c1c3a;
  --ink:#e8e6f5; --ink-2:#c7c3e8; --ink-muted:#8886a8; --ink-faint:#56547a;
  --hairline:#2a2a4a;
  --primary:#2de6a8; --primary-active:#1fc48e; --on-primary:#07120e;
  --coral:#a8b8e0;
  --sky:#8bf0c8; --sky-bg:#123830; --pink-bg:#241c3a;
}
[data-app-theme="midnight"] .hero{background:#050510; color:#ffffff;}
[data-app-theme="midnight"] .hero .names{color:rgba(255,255,255,.85);}
[data-app-theme="midnight"] .hero .dday{color:#2de6a8;}
[data-app-theme="midnight"] .hero .annidate{color:rgba(255,255,255,.65);}
[data-app-theme="midnight"] .q-card{background:#050510;}
[data-app-theme="midnight"] .q-card .q-label{color:#2de6a8;}