@charset "UTF-8";
:root{color-scheme:light dark;--bg:#fbf7f2;--surface:#fffdf9;--surface-soft:#f4eee7;--text:#302526;--muted:#77686a;--subtle:#806e70;--line:#e8ddd3;--accent:#7a2e3a;--accent-soft:#f5e8e8;--on-accent:#fff9f3;--coral:#c5806e;--gold:#ae8a50;--gray:#eeeae6;--focus:#a55462;--art-peach:#e8b8a1;--art-paper:#f5ddc7;--art-ink:#7a2e3a;--art-sage:#a6b29a;--art-shadow:#7a2e3a0b;--art-halo:#f3ebe2;--art-gold:#b99b67;--shadow:0 1px 2px #542a2404,0 8px 24px #542a2405}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;font-size:16px;line-height:1.6;letter-spacing:-.02em;word-break:keep-all;overflow-wrap:anywhere}
button,input{font:inherit}
button{cursor:pointer}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
a{color:var(--accent);text-decoration:none}
button,a,summary{transition:background 180ms ease-out,color 180ms ease-out,transform 180ms ease-out,box-shadow 180ms ease-out}
button:active,.button:active,.choice:active{transform:scale(.98)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
button:disabled{cursor:default;opacity:.45}
[hidden]{display:none!important}
.page-shell{max-width:600px;margin:0 auto;padding:0 20px}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:750;letter-spacing:-.04em;color:var(--text)}
.brand-icon{color:var(--accent);width:26px;height:26px}
.brand-dot{color:var(--accent);margin-left:-5px}
.header-link{font-size:12px;color:var(--muted);white-space:nowrap}
.header-link:hover{color:var(--accent)}
.hero{position:relative;padding:36px 0 32px;min-height:320px}
.hero-copy{position:relative;z-index:1;pointer-events:none}
.eyebrow{font-size:12px;line-height:1.6;color:var(--accent);font-weight:700;letter-spacing:.14em;margin:0 0 16px;display:flex;align-items:center;gap:8px}
.eyebrow>span{display:inline-block;width:20px;height:1px;background:var(--gold)}
h1{font-family:"Gowun Batang","Batang",Georgia,serif;font-size:36px;line-height:1.35;letter-spacing:-.04em;margin:0;font-weight:700}
h1 span{color:var(--accent)}
.hero-description{font-size:14px;line-height:1.8;color:var(--muted);margin:20px 0 0}
.hero-caption{font-size:12px;color:var(--subtle);margin:16px 0 0}
.gift-art{width:178px;height:210px;position:absolute;right:-14px;bottom:16px}
.ribbon-bow{transform-box:fill-box;transform-origin:bottom center;animation:ribbon-sway 5s ease-in-out infinite}
@keyframes ribbon-sway{0%,80%,100%{transform:rotate(0)}
88%{transform:rotate(-2deg)}
94%{transform:rotate(2deg)}
}
.finder{background:var(--surface);border-radius:24px;padding:24px 20px;box-shadow:var(--shadow);scroll-margin-top:24px}
.load-state{display:grid;gap:20px;justify-items:center;padding:56px 0;text-align:center;color:var(--muted);font-size:14px}
.loading-ribbon{width:80px;height:6px;border-radius:4px;background:var(--accent-soft);position:relative;overflow:hidden}
.loading-ribbon::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:ribbon-load 1.2s ease-in-out infinite}
@keyframes ribbon-load{to{transform:translateX(100%)}
}
.progress-heading{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:12px}
.progress-heading b{color:var(--accent);font-variant-numeric:tabular-nums}
.ribbon-progress{position:relative;margin-bottom:28px;padding-right:8px}
.ribbon-progress>span{position:absolute;right:0;top:0;width:8px;height:6px;background:var(--line);clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}
progress{display:block;appearance:none;border:0;width:100%;height:6px;background:var(--line);color:var(--accent);border-radius:2px 0 0 2px;overflow:hidden}
progress::-webkit-progress-bar{background:var(--line)}
progress::-webkit-progress-value{background:var(--accent);transition:width 200ms ease-out}
progress::-moz-progress-bar{background:var(--accent)}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;font-size:22px;font-weight:750;line-height:1.4;letter-spacing:-.02em;width:100%}
.question-help{font-size:12px;color:var(--muted);margin:8px 0 24px;line-height:1.7}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:96px;padding:16px;gap:12px;border:1.5px solid transparent;background:var(--surface-soft);border-radius:16px;font-size:14px;font-weight:600;cursor:pointer;transition:border-color 180ms,background 180ms,transform 180ms}
.choice:hover{background:var(--accent-soft)}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice-icon{display:flex;color:var(--accent)}
.choice-icon svg{width:24px;height:24px}
.choice-text{display:block;line-height:1.4}
.choice-check{position:absolute;right:12px;top:14px;width:18px;height:18px;border-radius:50%;color:transparent;background:transparent}
.choice-check svg{display:block;width:18px;height:18px;padding:2px;stroke-dasharray:24;stroke-dashoffset:24}
.choice input:checked~.choice-check{color:var(--on-accent);background:var(--accent)}
.choice input:checked~.choice-check svg{animation:draw-check 200ms ease-out forwards}
@keyframes draw-check{to{stroke-dashoffset:0}
}
.tag-choices .choice{min-height:88px}
.quiz-actions{display:flex;align-items:center;gap:12px;margin-top:28px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:52px;padding:12px 20px;border-radius:14px;font-size:14px;font-weight:650;border:0;text-decoration:none}
.button svg{width:18px;height:18px}
.primary{color:var(--on-accent);background:var(--accent)}
.primary:hover{background:var(--focus)}
.secondary{background:var(--surface-soft);color:var(--text)}
.secondary:hover{background:var(--accent-soft);color:var(--accent)}
.back{background:transparent;color:var(--muted);padding-left:0}
.back:hover{color:var(--accent)}
.quiz-actions .primary{margin-left:auto;flex:1}
.privacy-note{text-align:center;font-size:12px;color:var(--subtle);margin:16px 0 0}
.error{padding:12px 16px;border-radius:12px;font-size:14px;color:var(--accent);background:var(--accent-soft)}
.notice{font-size:12px;color:var(--text);background:var(--accent-soft);padding:16px;border-radius:12px}
h2{font-size:22px;font-weight:750;line-height:1.4;letter-spacing:-.02em;margin:0 0 16px}
.result-heading{display:flex;justify-content:space-between;gap:8px;align-items:center}
#results{scroll-margin-top:24px}
.result-heading .eyebrow{font-size:12px;margin-bottom:12px}
#results-title{font-family:"Gowun Batang","Batang",Georgia,serif;font-size:24px;margin-bottom:8px}
.result-art{width:48px;height:56px;flex-shrink:0}
.result-summary{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--accent);margin:12px 0 16px}
.result-summary span{padding:4px 10px;border-radius:20px;background:var(--accent-soft)}
.price-note{font-size:12px;color:var(--muted);line-height:1.7;margin:0 0 24px}
.gift-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
.gift-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:0}
.gift-visual{background:var(--thumb-cream,#f5eee5);aspect-ratio:1.14;border-radius:16px;overflow:hidden;display:grid;place-items:center;position:relative;margin-bottom:12px}
.gift-visual[data-tone="rose"]{background:var(--thumb-rose,#f7eded)}
.gift-visual[data-tone="sage"]{background:var(--thumb-sage,#edf1eb)}
.gift-visual>svg{width:100%;height:100%;max-height:160px}
.gift-details{display:flex;flex-direction:column;flex:1;min-width:0}
.best-pick{grid-column:1 / -1;padding-bottom:24px;border-bottom:1px solid var(--line)}
.best-pick .gift-visual{aspect-ratio:auto;height:240px;margin-bottom:20px}
.best-pick .gift-visual>svg{max-height:236px;width:auto;max-width:100%}
.gift-card.best-pick h3{font-size:22px;line-height:1.4;margin-bottom:8px}
.best-pick .gift-price{font-size:16px;margin-bottom:16px}
.best-pick .gift-reason{font-size:14px;color:var(--text);line-height:1.7}
.pick-label{font-size:12px;color:var(--accent);font-weight:750;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.pick-label::before{content:"";width:16px;height:1px;background:var(--gold)}
.best-ribbon{position:absolute;top:8px;left:0;padding:4px 12px 4px 8px;background:var(--accent);color:var(--on-accent);font-size:12px;letter-spacing:.08em;font-weight:750;clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%)}
.gift-card-top{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.gift-category{color:var(--muted);font-size:12px}
.gift-rank{margin-left:auto;font-size:12px;color:var(--subtle);font-variant-numeric:tabular-nums}
.gift-card h3{font-size:14px;line-height:1.5;margin:0 0 8px;font-weight:750}
.gift-price{color:var(--accent);font-size:12px;font-weight:700;margin:0 0 8px;font-variant-numeric:tabular-nums}
.gift-reason{flex:1;font-size:12px;color:var(--muted);line-height:1.65;margin:0}
.gift-image{display:block;width:100%;height:100%;object-fit:contain;padding:12px}
.platform-badge{align-self:flex-start;margin-top:12px;color:var(--subtle);font-size:12px}
.buy-link{margin-top:8px;font-size:12px;min-height:44px;width:100%;padding:8px;gap:4px}
.demo-link{background:var(--gray);color:var(--muted);margin-top:12px;border-radius:12px;padding:12px 8px;font-size:12px;text-align:center}
.affiliate-note{font-size:12px;color:var(--muted);margin:8px 0 0}
.disclosure{font-size:12px;color:var(--muted);line-height:1.8;margin:16px 0 0}
.result-actions{display:grid;gap:12px;margin-top:28px}
.result-actions .button{width:100%}
.page-note{font-size:12px;color:var(--subtle);text-align:center;margin:12px 0 0}
.text-button{display:block;margin:16px auto 0;border:0;color:var(--muted);background:none;text-decoration:underline;text-underline-offset:4px;padding:12px;font-size:12px}
.text-button:hover{color:var(--accent)}
.share-status{font-size:12px;color:var(--accent);text-align:center}
.share-status:empty{display:none}
.copy-area{background:var(--surface-soft);padding:16px;border-radius:16px;font-size:12px;margin-top:16px}
.copy-area label{display:block;margin-bottom:8px}
.copy-area input{width:100%;min-width:0;min-height:44px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:8px}
.banner-slot{margin-top:24px;width:100%;border-radius:16px;overflow:hidden}
.banner-slot iframe{display:block;width:100%;border:0}
.banner-placeholder{height:140px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);background:var(--gray);border-radius:16px}
.intro{padding:56px 0;border-bottom:1px solid var(--line)}
.intro p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.guides{padding:56px 0 0}
.guide{position:relative;border-top:1px solid var(--line);padding:24px 0 24px 32px}
.guide-number{position:absolute;left:0;top:24px;color:var(--coral);font-weight:700;font-size:12px}
.guide h3{font-size:16px;margin:0 0 12px;font-weight:750}
.guide p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 12px}
.guide a{display:inline-block;font-size:12px;font-weight:650;padding:4px 0}
.guide a:hover{color:var(--focus);transform:translateX(2px)}
.faq{padding:48px 0 56px}
.faq details{padding:20px 0;border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;font-size:14px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:22px;color:var(--accent)}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--accent)}
.faq details p{font-size:14px;color:var(--muted);line-height:1.8;margin:12px 0 0}
.site-footer{padding:32px 0 40px;border-top:1px solid var(--line)}
.site-footer .brand{font-size:16px}
.site-footer>p{font-size:12px;color:var(--muted);margin:8px 0}
.site-footer .disclosure{font-size:12px;margin-top:24px}
.site-footer>a:last-child{display:inline-block;font-size:12px;margin-top:16px}
.skip-link{position:absolute;top:-100px;left:12px;background:var(--surface);padding:12px;z-index:10}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.error-page{padding-top:20vh}
.error-page h1{font-size:36px}
.error-page>p{font-size:14px;color:var(--muted)}
.error-page .button{margin-top:24px}
.panel-enter{animation:panel-enter 220ms ease-out}
@keyframes panel-enter{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}

@media(min-width:500px){.page-shell{padding:0 24px}
.hero{padding:48px 0 40px;min-height:356px}
h1{font-size:42px}
.hero-description{font-size:16px}
.gift-art{width:230px;height:270px;bottom:20px;right:-8px}
.finder{padding:28px 24px}
legend{font-size:24px}
.choice{min-height:104px;padding:20px;flex-direction:row;align-items:center}
.choice-check{top:12px;right:12px}
.gift-cards{gap:28px 20px}
.gift-card h3{font-size:16px}
.gift-price{font-size:14px}
.best-pick{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.best-pick .gift-visual{height:256px;margin:0}
.best-pick .gift-visual>svg{max-height:248px;width:100%}
.best-pick h3{font-size:22px}
.best-pick .gift-price{font-size:16px}
.result-actions{grid-template-columns:1fr 1fr}
.best-ribbon{font-size:12px}
}

@media(max-width:499px){body:has(#quiz:not([hidden])){padding-bottom:96px}
.quiz-actions{position:fixed;left:0;bottom:0;width:100%;margin:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -1px 0 var(--line),0 -8px 24px #542a2405;z-index:5}
.quiz-actions .primary{min-height:52px}
.privacy-note{margin-top:20px}
.hero-description{max-width:200px}
}

@media(max-width:359px){h1{font-size:32px}
.gift-art{width:158px;right:-16px}
.finder{padding:24px 16px}
.choice{padding:12px}
.choice-text{font-size:12px}
}

@media(prefers-color-scheme:dark){:root{--bg:#211b1d;--surface:#2c2426;--surface-soft:#372d30;--text:#f2e6df;--muted:#c1afae;--subtle:#b09a9b;--line:#49393c;--accent:#e5a3aa;--accent-soft:#493037;--on-accent:#311b21;--coral:#d19a86;--gold:#b89b73;--gray:#3a3435;--focus:#eebcc2;--art-peach:#c3907c;--art-paper:#e0b79e;--art-ink:#823c49;--art-sage:#8c9c84;--art-shadow:#00000020;--art-halo:#312629;--art-gold:#bb9e6a;--shadow:0 1px 2px #00000008,0 8px 24px #0000000a}
:root{--thumb-cream:#392f2b;--thumb-rose:#3b2e33;--thumb-sage:#2d3530}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
.choice input:checked~.choice-check svg{stroke-dashoffset:0}
}


.gift-visual>svg,.gift-visual>img{grid-area:1 / 1}