:root {
  --paper:#f8f5ed;
  --ink:#23291f;
  --olive:#34402c;
  --olive-deep:#263121;
  --muted:#79796d;
  --line:#d9d5c9;
  --tint:#eeede3;
  --sand:#b2a08b;
  --serif:"Nanum Myeongjo","NanumMyeongjo","Noto Serif CJK KR","AppleMyungjo",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans CJK KR",sans-serif;
}
* { box-sizing:border-box; }
html { background:#f0ede5; min-height:100%; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 20%,#fffcf7 0%,#f0ede5 80%); z-index:-1; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; cursor:pointer; color:inherit; }
a { color:inherit; }
button:focus-visible,a:focus-visible { outline:2px solid #768269; outline-offset:5px; }
button:disabled { cursor:default; }
button svg,a svg { flex-shrink:0; }
img { display:block; max-width:100%; }
[hidden] { display:none!important; }
.app { width:100%; max-width:440px; margin:0 auto; min-height:100svh; background:var(--paper); position:relative; isolation:isolate; overflow:hidden; outline:none; }
.screen { min-height:100svh; position:relative; animation:arrive .25s ease both; }
.site-home-footer { max-width:440px; margin:0 auto; padding:12px 24px calc(16px + env(safe-area-inset-bottom,0px)); background:var(--paper); text-align:center; }
.site-home-footer a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 18px; color:var(--olive); font-family:var(--serif); font-size:14px; font-weight:700; letter-spacing:.06em; text-decoration:none; }
.site-home-footer a:hover { text-decoration:underline; text-underline-offset:5px; }
.paper { background:radial-gradient(ellipse at 30% 10%,#fffdf680,transparent 70%),var(--paper); }
.paper::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:8; opacity:.10; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.34' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes arrive { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
.skip-link { position:fixed; top:-70px; left:16px; z-index:100; padding:12px; background:var(--paper); }
.skip-link:focus { top:12px; }
.icon-button { display:grid; place-items:center; width:40px; height:40px; padding:8px; border:0; background:none; border-radius:50%; text-decoration:none; }
.icon-button:hover { background:#34402c08; }
.eyebrow { font-family:Georgia,serif; font-size:9px; letter-spacing:.30em; line-height:1.5; }
.primary,.outline { min-height:56px; border-radius:100px; display:flex; align-items:center; justify-content:center; gap:13px; width:100%; padding:13px 19px; text-decoration:none; font-size:18px; line-height:1.4; letter-spacing:-.035em; }
.primary { background:linear-gradient(112deg,#39482f,#2c3826); color:#fffdf5; border:1px solid #78856580; box-shadow:0 4px 14px #222c1510; }
.primary:hover { background:linear-gradient(112deg,#44563a,#33432b); }
.primary:active,.outline:active { transform:translateY(1px); }
.outline { background:transparent; border:1px solid #56604d; font-size:16px; }
.outline:hover { background:#e9ecdf; }
.rule { width:38px; height:1px; background:#9d927e; }
/* START — photos extracted from the approved visual, with real HTML over them. */
.landing { display:flex; flex-direction:column; height:max(100svh,800px); min-height:800px; background:#eae3d7; overflow:hidden; }
.landing-light { position:absolute; inset:0 0 30%; background:linear-gradient(90deg,#ece5d8 0%,#ece5d8eb 25%,#eee8dc99 57%,#eee8db18 95%),url('assets/window-shadow.webp') right top / 100% 100% no-repeat; opacity:.84; pointer-events:none; }
.landing-glow { position:absolute; inset:0; pointer-events:none; background:linear-gradient(114deg,transparent 12%,#fffcf080 17%,#fffcf044 26%,transparent 31%,transparent 45%,#fffff735 48%,transparent 57%); filter:blur(4px); }
.landing-table { position:absolute; width:100%; left:0; bottom:183px; aspect-ratio:429/313; object-fit:cover; mask-image:linear-gradient(to bottom,transparent,black 9%,black 100%); -webkit-mask-image:linear-gradient(to bottom,transparent,black 9%,black 100%); }
.landing-floor { position:absolute; inset:auto 0 0; height:188px; background:linear-gradient(#6b5d4770,#736853b0),url('assets/hero-wood.webp') center / 100% 100%; }
.landing-header { padding:34px 25px 0 28px; display:flex; justify-content:space-between; align-items:center; z-index:2; }
.landing-header .eyebrow { font-size:9.1px; letter-spacing:.29em; }
.landing-copy { position:relative; padding:36px 28px 0; z-index:2; }
.landing h1 { font-size:clamp(30px,9.6vw,41px); font-weight:700; line-height:1.47; letter-spacing:-.065em; margin:0 0 24px; }
.landing h1 span { display:block; white-space:nowrap; }
.landing-description { font-size:16px; line-height:1.83; letter-spacing:-.04em; margin:0 0 24px; }
.landing-copy .rule { background:#615f51; transform:translateY(-9px); }
.landing-footer { position:absolute; inset:auto 26px 27px; z-index:3; }
.start-button { min-height:63px; font-size:23px; margin-bottom:13px; }
.landing-meta { font-family:var(--sans); color:#f5f0e4; font-size:10.5px; text-align:center; letter-spacing:-.015em; margin:0; }
.landing-ending { padding-top:29px; color:#fff8ed; }
.landing-ending .rule { background:#f9f2df90; margin-bottom:12px; width:41px; }
.landing-ending p { margin:0; font-size:14px; line-height:1.75; letter-spacing:-.025em; }
/* QUESTIONS */
.quiz { padding:0 25px 28px; }
.quiz-nav { display:flex; align-items:center; padding:25px 0 23px; gap:24px; }
.quiz-nav .icon-button { margin-left:-8px; margin-right:auto; }
.counter { font-family:Georgia,serif; font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:.06em; white-space:nowrap; }
.progress { height:3px; background:#d0d0c8; width:56%; overflow:hidden; }
.progress-fill { height:100%; background:var(--olive); transition:width .2s ease; }
.q-number { margin:12px 0 11px; font:400 40px/1.1 Georgia,serif; letter-spacing:-.04em; }
.question-title { font-size:22px; font-weight:400; line-height:1.65; letter-spacing:-.05em; word-break:keep-all; overflow-wrap:break-word; margin:0 0 23px; }
.question-photo { width:100%; height:198px; border-radius:17px; object-fit:cover; object-position:center; margin:0 0 16px; background:#e6e2d6; }
.answers { display:grid; gap:10px; }
.answer { border:1px solid var(--line); border-radius:21px; min-height:68px; padding:10px 16px; width:100%; display:flex; align-items:center; gap:15px; background:#fdfaf22e; text-align:left; font-family:var(--sans); font-size:13px; line-height:1.6; letter-spacing:-.035em; transition:background .16s,border-color .16s,transform .16s; word-break:keep-all; }
@media(hover:hover) { .answer:hover { border-color:#a1aa97; background:#eeeee3; } }
.answer.selected { border-color:#718163; background:#e2e7d9; }
.answer.selected .answer-letter { background:var(--olive); color:#fffdf5; }
.answer-letter { font-family:Georgia,serif; font-size:24px; display:grid; place-items:center; width:41px; height:41px; border-radius:50%; background:#e7e6de; flex-shrink:0; font-weight:400; transition:background .16s; }
.answer-text { flex:1; }
.quiz-hint { margin:20px 0 0; font-family:var(--sans); font-size:10px; text-align:center; color:#8e8a7e; }
/* FINDING */
.finding { display:flex; align-items:center; text-align:center; flex-direction:column; padding:90px 25px 40px; min-height:max(100svh,800px); }
.crescent { margin:20px 0 49px; color:#b6a590; }
.finding h1 { font-size:28px; font-weight:400; letter-spacing:-.04em; line-height:1.55; margin:0; }
.finding .vertical-rule { width:1px; height:51px; background:#bfb19e; margin:29px auto 21px; }
.cat-picture { width:244px; height:auto; mix-blend-mode:darken; filter:brightness(1.06); margin:2px auto 25px; }
.finding-note { margin:4px 0 0; font-size:17px; }
.handwriting { font-family:"Nothing You Could Do","Snell Roundhand","Z003","URW Chancery L",cursive; font-style:italic; font-size:19px; color:#776e60; line-height:1.75; letter-spacing:.08em; }
.finding .handwriting { margin:47px 0 0; }
.finding-note::after { content:""; display:inline-block; width:14px; text-align:left; animation:dots 1.2s steps(4,end) infinite; }
@keyframes dots { 0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."} }
/* TIE QUESTION */
.tie { padding:0 25px 35px; }
.tie .eyebrow { display:block; color:#8f826e; margin:29px 0 20px; }
.tie h1 { font-size:28px; line-height:1.55; font-weight:400; letter-spacing:-.04em; margin:0 0 18px; }
.tie-intro { font-family:var(--sans); font-size:13px; line-height:1.8; color:var(--muted); margin:0 0 27px; }
.tie .answer { min-height:76px; }
/* RESULT */
.result { padding:0 23px 28px; }
.page-nav { display:flex; align-items:center; justify-content:space-between; height:79px; }
.page-nav .icon-button:first-child { margin-left:-8px; }
.page-nav .icon-button:last-child { margin-right:-8px; }
.result-header { text-align:center; margin:0 0 22px; }
.result-kicker { margin:0 0 13px; font-size:16px; font-weight:400; letter-spacing:-.045em; }
.result-name { margin:0 0 13px; font-size:28px; font-weight:700; line-height:1.45; letter-spacing:-.063em; word-break:keep-all; }
.result-quote { margin:0; font-size:16px; line-height:1.75; font-weight:400; white-space:pre-line; letter-spacing:-.04em; }
.result-image { width:100%; aspect-ratio:361/285; object-fit:cover; border-radius:13px; }
.result-copy { font-size:15px; letter-spacing:-.038em; line-height:1.8; word-break:keep-all; margin:17px 0 14px; }
.result .rule { margin:0 0 12px; }
.trait-box { background:var(--tint); border-radius:17px; padding:18px 19px 17px; margin-bottom:10px; }
.trait-heading { margin:0 0 13px; display:flex; gap:10px; align-items:center; font-size:17px; font-weight:700; letter-spacing:-.03em; }
.trait-box ul { list-style:none; padding:0; margin:0; font-family:var(--sans); font-size:13px; line-height:1.65; letter-spacing:-.035em; }
.trait-box li { display:flex; align-items:baseline; gap:9px; }
.trait-box li::before { content:""; display:block; width:6px; height:6px; background:var(--olive); border-radius:50%; flex-shrink:0; }
.result .primary { font-size:19px; }
.result-bottom { display:flex; justify-content:center; margin:20px 0 0; }
.text-button { border:0; padding:9px; background:none; color:#807e72; font-family:var(--sans); font-size:11px; text-decoration:underline; text-underline-offset:4px; }
/* BOOKS — modern / classic tabbed pages */
.books { padding:0 25px 30px; }
.books .page-nav { height:76px; }
.page-title { font-size:18px; font-weight:700; margin:0; letter-spacing:-.04em; text-align:center; flex:1; padding:0 3px; }
.nav-spacer { width:32px; }
.book-tabs { display:flex; width:100%; border-radius:100px; padding:0; background:var(--tint); margin:0 0 26px; }
.book-tab { font-size:16px; line-height:1.4; font-weight:400; padding:12px 8px; border:0; flex:1; border-radius:100px; color:#47483e; background:transparent; }
.book-tab[aria-selected="true"] { color:#fffaf1; background:linear-gradient(110deg,#35432d,#2c3825); }
.book-figure { width:70%; max-width:254px; margin:0 auto 23px; }
.cover-photo { width:100%; aspect-ratio:261/364; object-fit:cover; border-radius:4px; box-shadow:3px 11px 18px #3b33282e,1px 2px 3px #3b332822; }
.cover-caption { display:block; font-family:var(--sans); font-size:10px; color:#777363; text-align:center; line-height:1.5; margin-top:13px; word-break:keep-all; letter-spacing:-.02em; }
.concept-cover { position:relative; height:auto; aspect-ratio:261/364; border-radius:4px; box-shadow:3px 11px 18px #3b33282e; padding:29px 21px 23px 26px; display:flex; flex-direction:column; text-align:center; overflow:hidden; background:linear-gradient(120deg,#d8d9c9,#9bA38c); color:#283324; }
.concept-cover::before { content:""; position:absolute; inset:0 auto 0 4px; width:9px; background:linear-gradient(90deg,#151c142a,transparent,#ffffff20); z-index:2; }
.concept-cover::after { content:""; position:absolute; width:75%; height:45%; bottom:0; right:0; background:url('assets/leaves-detail.webp') center/cover; opacity:.12; mix-blend-mode:multiply; }
.cover-type-track { background:linear-gradient(150deg,#d6d0c0,#797c6c); }
.cover-type-warm { background:linear-gradient(140deg,#e2d8bf,#b2a283); }
.cover-type-free { background:linear-gradient(140deg,#cbd2bd,#849075); }
.cover-type-wonder { background:linear-gradient(140deg,#c3ceca,#778b83); }
.cover-type-question { background:linear-gradient(140deg,#d1caba,#9f997e); }
.concept-eyebrow { position:relative; z-index:2; font-family:Georgia,serif; font-size:7px; letter-spacing:.22em; margin-bottom:47px; }
.concept-title { z-index:2; position:relative; font-size:23px; font-weight:400; line-height:1.55; letter-spacing:-.04em; word-break:keep-all; }
.concept-author { z-index:2; position:relative; font-size:11px; margin-top:18px; }
.concept-flower { margin:auto auto 0; width:28px; opacity:.5; }
.book-name { font-size:28px; line-height:1.4; font-weight:700; letter-spacing:-.055em; margin:0 0 7px; word-break:keep-all; }
.book-author { font-size:16px; margin:0 0 20px; letter-spacing:-.035em; }
.books .rule { margin:0 0 20px; width:35px; }
.why-label { font-family:var(--sans); font-size:10px; font-weight:500; color:#8a816f; margin:0 0 9px; letter-spacing:.02em; }
.book-reason { font-size:15px; line-height:1.85; letter-spacing:-.035em; margin:0 0 24px; word-break:keep-all; }
.pending-link { border-color:#7f8575; color:#7b7d70; background:#f4f1e730; }
.pending-note { font-family:var(--sans); color:#8b877b; font-size:10px; text-align:center; line-height:1.65; margin:11px 0 0; }
.affiliate-note { font-family:var(--sans); font-size:11px; line-height:1.7; color:#5e6554; background:var(--tint); padding:13px; border-radius:12px; margin:0 0 17px; }
.book-back { margin:15px auto 0; display:block; }
/**** Shared utility UI ****/
.menu-dialog { border:1px solid #e4dfd2; border-radius:25px; padding:22px 26px 28px; width:calc(100% - 38px); max-width:380px; background:var(--paper); color:var(--ink); box-shadow:0 20px 90px #1e201a40; }
.menu-dialog::backdrop { background:#24251d66; backdrop-filter:blur(4px); }
.dialog-top { display:flex; align-items:center; justify-content:space-between; }
.close-menu { font:30px/1 Georgia,serif; }
.menu-dialog h2 { font-size:30px; font-weight:400; margin:25px 0 18px; }
.menu-dialog p { font-size:16px; line-height:1.8; }
.dialog-note { font-family:var(--sans); font-size:12px; line-height:1.9; color:#767968; border-top:1px solid var(--line); padding-top:20px; margin:25px 0; }
.menu-dialog .primary { font-size:16px; }
#toast { position:fixed; left:50%; bottom:max(25px,env(safe-area-inset-bottom)); transform:translate(-50%,12px); background:#2f392bf5; color:#fff9ee; padding:14px 23px; border-radius:30px; font-family:var(--sans); font-size:12px; text-align:center; z-index:30; max-width:calc(100% - 36px); width:max-content; pointer-events:none; opacity:0; transition:opacity .2s,transform .2s; box-shadow:0 4px 20px #1112; }
#toast.visible { opacity:1; transform:translate(-50%,0); }
.noscript { padding:60px 25px; }
@media(min-width:560px) {
  body { padding:30px 0; }
  .app { border-radius:29px; min-height:870px; border:1px solid #e5dfd2; box-shadow:0 20px 70px #403c2b1c,0 3px 9px #403c2b08; }
  .screen { min-height:870px; }
  .landing { height:916px; }
  .landing-copy { padding-top:44px; }
  .landing-table { bottom:184px; }
  .landing-footer { bottom:31px; }
  .finding { min-height:916px; padding-top:112px; }
  .finding .handwriting { margin-top:57px; }
}
@media(max-width:370px) {
  .landing { min-height:790px; }
  .landing-header { padding-left:24px; }
  .landing-header .eyebrow { font-size:8px; }
  .landing-copy { padding:31px 24px 0; }
  .landing h1 { font-size:34px; }
  .landing-description { font-size:15px; }
  .landing-table { bottom:194px; }
  .landing-floor { height:200px; }
  .landing-footer { left:22px;right:22px; }
  .question-title { font-size:21px; }
  .question-photo { height:175px; }
  .quiz,.books { padding-left:22px;padding-right:22px; }
  .answer { padding:10px 12px; gap:12px; font-size:12px; }
  .answer-letter { width:36px; height:36px; font-size:22px; }
  .result-name { font-size:25px; }
  .result-copy,.book-reason { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
/* Result + two actual books, kept on one screen. */
.recommendations{margin:32px 0 0;border-top:1px solid var(--line);padding-top:27px}
.recommendations>.eyebrow{text-align:center;color:#7d846e;font-size:9px;margin:0 0 10px}
.recommendations>h2{text-align:center;font-size:22px;letter-spacing:-.05em;margin:0 0 23px;line-height:1.5}
.recommended-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.recommended-book{min-width:0;display:flex;flex-direction:column;text-align:center;height:100%}
.book-category{font:12px var(--sans);color:#778166;margin:0 0 13px}
.real-cover-wrap{height:218px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:17px}
.real-cover{width:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:3px 7px 13px #3b332822}
.recommended-book h3{font-size:17px;line-height:1.55;letter-spacing:-.045em;margin:0 0 6px;word-break:keep-all;overflow-wrap:break-word}
.pair-author{font:12px/1.6 var(--sans);color:var(--muted);margin:0 0 16px}
.recommended-book .outline{font:12px/1.4 var(--sans);min-height:41px;padding:10px 5px;margin-top:auto}
.recommendation-details{margin-top:29px;padding:20px 17px 2px;background:#eeede370;border-radius:18px}
.reason-title{font-size:15px;margin:0 0 15px;text-align:center}
.recommendation-details .book-tabs{margin:0 0 19px}
.recommendation-details .book-tab{font-size:14px;min-height:44px}
.reason-book{font-size:17px;line-height:1.5;margin:0 0 9px;word-break:keep-all}
.recommendation-details .book-reason{font-size:14px;line-height:1.85;margin-bottom:20px}
.result-actions{margin-top:29px}
.result-actions .primary{font-size:17px}
.share-hint{text-align:center;font:11px/1.7 var(--sans);color:var(--muted);margin:11px 0 0}
.result-share-dialog{width:calc(100% - 28px);max-width:430px;max-height:92svh;padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--paper);color:var(--ink);overflow:auto;box-shadow:0 20px 90px #1e201a40}
.result-share-dialog::backdrop{background:#24251d88;backdrop-filter:blur(4px)}
.result-share-dialog header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.result-share-dialog h2{font-size:22px;margin:0}.result-share-dialog header button{font:30px Georgia,serif}
.share-intro{font:12px/1.7 var(--sans);color:var(--muted);margin:10px 0 16px}
.result-share-preview{width:100%;height:auto;border:1px solid var(--line);border-radius:9px;-webkit-touch-callout:default;user-select:auto}
.share-status{font:12px/1.75 var(--sans);margin:14px 0}
.share-controls{display:grid;gap:9px}.share-controls .primary,.share-controls .outline{font:15px var(--sans);min-height:48px}
.share-controls button:disabled{opacity:.5}.share-controls .text-button{font-size:13px;min-height:40px}
.share-save-help{font:11px/1.75 var(--sans);color:var(--muted);margin:7px 0 0}
.share-manual-link{width:100%;padding:10px;margin-top:12px;border:1px solid var(--line);background:white;color:var(--ink)}
@media(max-width:370px){.recommended-pair{gap:15px}.real-cover-wrap{height:187px}.recommended-book h3{font-size:15px}.recommended-book .outline{font-size:11px}.recommendations>h2{font-size:20px}}