:root {
  --ink:#251724;
  --ink-soft:#493b47;
  --plum:#462044;
  --plum-deep:#2e172f;
  --wine:#873a56;
  --coral:#d66f57;
  --cream:#f5ecdf;
  --paper:#fffdf8;
  --paper-warm:#fbf5ec;
  --line:#ddd0c0;
  --muted:#70666b;
  --green:#356c5d;
  --gold:#d2a867;
  --radius-sm:.75rem;
  --radius-md:1rem;
  --radius-lg:1.5rem;
  --shadow-sm:0 8px 24px rgba(54,27,43,.08);
  --shadow-md:0 20px 50px rgba(54,27,43,.13);
  --page-pad:clamp(1rem,5vw,1.5rem);
}

* { box-sizing:border-box; }
html { min-width:320px; background:var(--cream); color:var(--ink); scroll-behavior:smooth; }
body { margin:0; min-height:100vh; min-height:100dvh; background:radial-gradient(circle at 90% 4%,rgba(210,168,103,.2),transparent 17rem),linear-gradient(145deg,#efe3d3,#faf6ee 55%,#f0e2d2); font-family:Pretendard,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:not-allowed; }
.skip-link { position:fixed; z-index:100; top:.75rem; left:1rem; transform:translateY(-160%); padding:.7rem 1rem; border-radius:.65rem; color:white; background:var(--plum-deep); font-weight:700; text-decoration:none; }
.skip-link:focus { transform:none; }

.app-shell { width:100%; min-height:100vh; min-height:100dvh; margin:0 auto; padding:0 var(--page-pad) max(2rem,env(safe-area-inset-bottom)); position:relative; overflow:clip; background:var(--paper); }
.topbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem; position:sticky; z-index:20; top:0; margin-inline:calc(var(--page-pad) * -1); padding:env(safe-area-inset-top) var(--page-pad) 0; border-bottom:1px solid rgba(221,208,192,.7); background:rgba(255,253,248,.9); backdrop-filter:blur(14px); }
.brand { min-height:44px; color:var(--ink); text-decoration:none; font:700 1rem 'Gowun Batang',serif; display:flex; align-items:center; gap:.55rem; letter-spacing:-.035em; }
.brand-mark { width:2rem; height:2rem; display:grid; place-items:center; border-radius:52% 52% 48% 48%; color:var(--paper); background:linear-gradient(145deg,var(--wine),var(--plum)); box-shadow:0 5px 14px rgba(70,32,68,.22); font-size:.8rem; }
.round-status,.tiny-note,.eyebrow { font:500 .65rem 'DM Mono',monospace; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.round-status { max-width:45%; color:var(--wine); text-align:right; line-height:1.35; }

.intro-menu { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; width:100%; margin:1.15rem 0 0; }
.intro-menu a { min-height:5.4rem; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-content:center; gap:.15rem .6rem; padding:.85rem; border:1px solid var(--line); border-radius:var(--radius-md); color:var(--ink); background:rgba(255,253,248,.74); text-decoration:none; box-shadow:var(--shadow-sm); transition:border-color .2s ease,transform .2s ease,background .2s ease; }
.intro-menu a>span { grid-row:1 / 3; align-self:center; width:2rem; height:2rem; display:grid; place-items:center; border-radius:50%; color:var(--wine); background:#f5e6df; font:700 .85rem 'DM Mono',monospace; }
.intro-menu strong { align-self:end; font-size:.78rem; line-height:1.25; }
.intro-menu small { color:var(--muted); font-size:.63rem; line-height:1.35; }

.screen { display:none; min-height:calc(100dvh - 64px); padding-bottom:1rem; animation:rise .32s ease; }
.screen.active { display:flex; flex-direction:column; }
.screen-heading { margin-top:clamp(2rem,8vh,4.25rem); }
.screen-heading.compact { margin-top:clamp(1.5rem,5vh,3rem); }
.eyebrow { margin:0 0 .75rem; color:var(--wine); }
.screen-heading h2,.screen h1 { margin:0; font-family:'Gowun Batang',serif; font-weight:700; line-height:1.18; letter-spacing:-.065em; text-wrap:balance; }
.screen-heading h2 { font-size:clamp(1.75rem,8vw,2.6rem); }
.screen-heading p:not(.eyebrow) { margin:.8rem 0 0; color:var(--muted); font-size:.9rem; line-height:1.55; }

#intro { padding-top:.9rem; }
.hero-visual { height:clamp(18rem,52vh,24rem); margin:.5rem calc(var(--page-pad) * -1) 1.4rem; position:relative; overflow:hidden; isolation:isolate; background:var(--plum-deep); }
.hero-visual img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.hero-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(37,8,39,.04) 0%,transparent 58%,rgba(37,8,39,.18) 100%); }
h1 { font-size:clamp(2.2rem,10.5vw,3.5rem); }
.screen h1 em { color:var(--wine); font-style:normal; }
.intro-copy { margin:1rem 0 1.25rem; color:var(--muted); font-size:.92rem; line-height:1.7; }

.button { width:100%; min-height:3.25rem; border:1px solid transparent; border-radius:.85rem; padding:.75rem 1.05rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.94rem; font-weight:700; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; touch-action:manipulation; }
.button-primary { color:white; background:linear-gradient(135deg,var(--plum),var(--plum-deep)); box-shadow:0 10px 22px rgba(70,32,68,.22); }
.button-primary span { color:#f2c98e; }
.button:disabled { color:#f5f1ec; background:#bdb4b0; box-shadow:none; }
.tiny-note { margin:.85rem 0 0; text-align:center; line-height:1.5; }

.theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin:1.5rem 0 1rem; }
.theme-card { width:100%; min-height:7.25rem; border:1px solid var(--line); border-radius:var(--radius-md); padding:.85rem; display:flex; flex-direction:column; align-items:flex-start; text-align:left; color:var(--ink); background:linear-gradient(160deg,#fffefa,#fbf4ea); box-shadow:var(--shadow-sm); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; touch-action:manipulation; }
.theme-icon { width:2.2rem; height:2.2rem; display:grid; place-items:center; margin-bottom:auto; border-radius:50%; color:var(--wine); background:#f5e7df; font:1.35rem 'Gowun Batang'; }
.theme-card strong { margin-top:.85rem; font-size:.9rem; line-height:1.3; }
.theme-card small { margin-top:.3rem; color:var(--muted); font-size:.72rem; line-height:1.4; }
.theme-card.selected { border:2px solid var(--wine); padding:calc(.85rem - 1px); background:#fff6e9; box-shadow:0 10px 24px rgba(135,58,86,.13); }
.theme-card.selected .theme-icon { color:white; background:var(--wine); }
.proceed { position:sticky; bottom:max(.75rem,env(safe-area-inset-bottom)); z-index:8; margin-top:auto; }

.preference-meter { height:.25rem; margin:1.5rem 0 1rem; overflow:hidden; border-radius:99px; background:#eadfd2; }
.preference-meter span { display:block; width:33.333%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--wine),var(--coral)); transition:width .3s ease; }
.question-card { padding:1.25rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(160deg,#fffefa,#fbf5ed); box-shadow:var(--shadow-md); }
.question-number { color:var(--coral); font:500 .67rem 'DM Mono',monospace; letter-spacing:.06em; }
.question-card h3 { margin:.8rem 0 .4rem; font:700 clamp(1.45rem,7vw,2rem) 'Gowun Batang',serif; letter-spacing:-.055em; }
.question-card>p { margin:0 0 1.15rem; color:var(--muted); font-size:.83rem; line-height:1.55; }
.choice-grid { display:grid; gap:.65rem; }
.choice-card { min-height:4.8rem; border:1px solid var(--line); border-radius:.9rem; padding:.85rem; display:grid; grid-template-columns:2.5rem 1fr; align-items:center; color:var(--ink); text-align:left; background:rgba(255,253,248,.9); transition:border-color .18s ease,background .18s ease,transform .18s ease; touch-action:manipulation; }
.choice-symbol { color:var(--wine); font:1.55rem 'Gowun Batang'; }
.choice-card strong,.choice-card small { display:block; }
.choice-card strong { font-size:.91rem; }
.choice-card small { margin-top:.2rem; color:var(--muted); font-size:.73rem; line-height:1.4; }
.text-button { min-height:44px; margin:.75rem auto; border:0; color:var(--muted); background:transparent; font-size:.8rem; text-decoration:underline; text-underline-offset:4px; }

.match-progress { min-height:3.2rem; display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.8rem 0 .65rem; color:var(--muted); font-size:.75rem; }
.match-progress>span:first-child { flex:none; color:var(--wine); font:500 .68rem 'DM Mono',monospace; }
.dots { max-width:9rem; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.27rem; }
.dot { width:.34rem; height:.34rem; display:block; border-radius:50%; background:#e4d8cb; }
.dot.done { background:var(--wine); }
.matchup { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; position:relative; }
.matchup::after { content:"VS"; position:absolute; z-index:5; top:50%; left:50%; width:2rem; height:2rem; display:grid; place-items:center; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.9); border-radius:50%; color:white; background:var(--plum-deep); box-shadow:0 5px 14px rgba(46,23,47,.25); font:500 .58rem 'DM Mono',monospace; pointer-events:none; }
.drink-card { min-width:0; min-height:17rem; padding:1rem .8rem .85rem; border:1px solid rgba(85,58,65,.13); border-radius:var(--radius-md); overflow:hidden; position:relative; color:var(--ink); text-align:left; background:var(--drink-bg,#f5e6d5); box-shadow:var(--shadow-sm); transition:transform .2s ease,box-shadow .2s ease; touch-action:manipulation; }
.drink-card::before { content:attr(data-symbol); position:absolute; right:-.4rem; top:-1.6rem; color:rgba(255,255,255,.37); font:6.5rem 'Gowun Batang',serif; }
.drink-top,.drink-visual,.drink-card h3,.drink-meta,.tag-list { position:relative; }
.drink-top { min-height:2rem; display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; color:#604f50; font-size:.66rem; line-height:1.3; }
.drink-top span:last-child { font-weight:700; }
.drink-visual { height:6.4rem; display:grid; place-items:center; margin:.25rem 0 -.25rem; overflow:hidden; border:1px solid rgba(255,255,255,.7); border-radius:.75rem; background:rgba(255,255,255,.48); }
.drink-visual img { width:100%; height:100%; display:block; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(53,32,35,.16)); }
.drink-card h3 { margin:4.3rem 0 .55rem; font:700 clamp(1.25rem,6.3vw,1.85rem)/1.12 'Gowun Batang',serif; letter-spacing:-.07em; overflow-wrap:anywhere; }
.drink-card.has-image h3 { margin-top:.8rem; }
.drink-meta { min-height:2.3rem; margin:0; color:#675b5b; font-size:.7rem; line-height:1.45; }
.tag-list { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.65rem; }
.tag { padding:.3rem .38rem; border-radius:.35rem; color:#604c4e; background:rgba(255,255,255,.6); font-size:.62rem; line-height:1.2; }
.tag:nth-child(n+2) { display:none; }
.or-label { margin:.75rem 0 0; color:var(--muted); text-align:center; font-size:.7rem; }

.result-stars { margin:1.8rem 0 1rem; color:var(--coral); font-size:1rem; letter-spacing:.35rem; text-align:center; }
#result>h2 { margin:0; font:700 clamp(1.8rem,8vw,2.6rem) 'Gowun Batang',serif; letter-spacing:-.06em; text-align:center; }
#result>.eyebrow { text-align:center; }
.winner-card { margin:1.35rem 0 .8rem; padding:1.45rem 1.2rem 1.1rem; overflow:hidden; position:relative; border-radius:var(--radius-lg); color:#fffaf0; background:radial-gradient(circle at 90% 8%,rgba(242,201,142,.2),transparent 28%),linear-gradient(145deg,#4b2549,#813752); box-shadow:0 20px 38px rgba(67,30,59,.23); }
.winner-card::after { content:'◒'; position:absolute; right:-1rem; top:-3rem; color:rgba(255,255,255,.09); font:10rem 'Gowun Batang'; }
.winner-card>* { position:relative; z-index:1; }
.winner-label { color:#f5c582; font:500 .62rem 'DM Mono',monospace; letter-spacing:.1em; }
.winner-image { width:100%; height:13rem; display:block; margin:.75rem 0 .9rem; object-fit:contain; border:1px solid rgba(255,255,255,.16); border-radius:.9rem; background:rgba(255,255,255,.08); filter:drop-shadow(0 12px 18px rgba(20,8,18,.24)); }
.winner-card h3 { margin:.75rem 0 .4rem; font:700 clamp(2rem,10vw,3rem)/1.1 'Gowun Batang',serif; letter-spacing:-.085em; overflow-wrap:anywhere; }
.winner-info { margin:.3rem 0; opacity:.85; font-size:.78rem; }
.winner-story { width:82%; margin:1.2rem 0 .9rem; font-size:.79rem; line-height:1.6; }
.winner-pairing { margin-bottom:0; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.23); font-size:.72rem; line-height:1.45; }
.taste-report { margin:1rem 0; padding:1.15rem 0; border-block:1px solid var(--line); }
.taste-report .eyebrow { margin-bottom:.35rem; }
.report-name { margin:0; font:700 1.25rem 'Gowun Batang',serif; letter-spacing:-.045em; }
.taste-report>p { margin:.65rem 0 .9rem; color:var(--muted); font-size:.79rem; line-height:1.6; }
.taste-bars { display:grid; gap:.55rem; }
.taste-row { display:grid; grid-template-columns:3.8rem 1fr 2rem; align-items:center; gap:.5rem; color:var(--muted); font-size:.68rem; }
.bar { height:.38rem; overflow:hidden; border-radius:99px; background:#eee3d8; }
.bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--wine),var(--coral)); }
.result-actions { display:grid; gap:.6rem; }
.button-outline { justify-content:center; color:var(--plum); border-color:var(--plum); background:transparent; box-shadow:none; }
.share-message { min-height:1.2rem; margin:.65rem 0 0; color:var(--green); text-align:center; font-size:.74rem; }

.button:focus-visible,.theme-card:focus-visible,.choice-card:focus-visible,.drink-card:focus-visible,.text-button:focus-visible,.brand:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
@media (hover:hover) {
  .intro-menu a:hover { transform:translateY(-2px); border-color:var(--wine); background:white; }
  .button:hover:not(:disabled),.theme-card:hover,.choice-card:hover,.drink-card:hover { transform:translateY(-2px); }
  .theme-card:hover,.choice-card:hover { border-color:#b77d84; }
  .drink-card:hover { box-shadow:var(--shadow-md); }
}

@media (max-width:599px) {
  #theme { padding-bottom:5.5rem; }
  .proceed:not(:disabled) { position:fixed; left:var(--page-pad); right:var(--page-pad); bottom:max(.75rem,env(safe-area-inset-bottom)); width:auto; box-shadow:0 0 0 .55rem rgba(255,253,248,.9),0 12px 28px rgba(70,32,68,.28); }
}

@media (min-width:600px) {
  :root { --page-pad:2rem; }
  body { padding:1.25rem; }
  .app-shell { width:min(100%,60rem); min-height:calc(100vh - 2.5rem); min-height:calc(100dvh - 2.5rem); border:1px solid rgba(221,208,192,.8); border-radius:1.4rem; box-shadow:0 24px 70px rgba(52,31,36,.15); }
  .topbar { border-radius:1.35rem 1.35rem 0 0; }
  .screen { min-height:calc(100dvh - 8rem); }
  .theme-card { min-height:9.5rem; padding:1.15rem; }
  .theme-card.selected { padding:calc(1.15rem - 1px); }
  .choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .question-card { max-width:42rem; margin-inline:auto; padding:1.75rem; }
  #preferences .screen-heading,#preferences .preference-meter { width:min(100%,42rem); margin-inline:auto; }
  .drink-card { min-height:20rem; padding:1.25rem; }
  .drink-top { flex-direction:row; justify-content:space-between; }
  .drink-card h3 { margin-top:6.8rem; font-size:2.25rem; }
  .drink-card.has-image h3 { margin-top:1rem; }
  .drink-visual { height:9rem; }
  .tag:nth-child(n+2) { display:inline-block; }
  .or-label { display:none; }
  .winner-card,.taste-report,.result-actions,.share-message { width:min(100%,42rem); margin-inline:auto; }
}

@media (min-width:820px) {
  #intro.active { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(19rem,.82fr); grid-template-rows:auto auto auto auto auto; column-gap:3rem; align-content:center; }
  #intro .hero-visual { grid-column:1; grid-row:1 / span 5; width:100%; height:min(66vh,38rem); margin:0; border-radius:1.2rem; }
  #intro>.eyebrow,#intro>h1,#intro>.intro-copy,#intro>.button,#intro>.tiny-note,#intro>.intro-menu { grid-column:2; }
  #intro>.eyebrow { align-self:end; }
  #intro>.tiny-note { align-self:start; }
  .screen-heading { margin-top:3.5rem; }
  .theme-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
  .theme-card { min-height:12rem; }
  .proceed { position:static; width:18rem; margin:1rem 0 0 auto; }
  #tournament .screen-heading,#tournament .match-progress,#tournament .matchup { width:min(100%,48rem); margin-inline:auto; }
  .drink-card { min-height:23rem; }
  .drink-card h3 { margin-top:8rem; font-size:2.65rem; }
  .drink-card.has-image h3 { margin-top:1.15rem; }
  .drink-visual { height:11rem; }
  #result { padding-bottom:3rem; }
}

@keyframes rise { from { opacity:0; transform:translateY(.45rem); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }