:root{--bg:#eee7dc;--panel:#fffcf7eb;--ink:#231a15;--muted:#786b61;--line:#d9cfc2;--accent:#75452c;--accent-deep:#4e2d1e;--accent-soft:#ead8c8;--coffee:#9a623f;--coffee-dark:#201713;--latte:#cda47d;--cream:#fbf7f0}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{background:radial-gradient(circle at 8% 0%, #97674224, transparent 32rem), radial-gradient(circle at 100% 32%, #58301e1a, transparent 27rem), linear-gradient(180deg, #f8f3eb 0%, var(--bg) 100%);color:var(--ink);margin:0;font-family:Apple SD Gothic Neo,Noto Sans KR,Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #75452c4d}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.page-shell{width:min(1120px,100% - 32px);margin:0 auto;padding:24px 0 64px}.site-header{justify-content:space-between;align-items:center;padding:0 4px 18px;display:flex}.brand-lockup{align-items:center;gap:11px;display:flex}.brand-lockup>div{flex-direction:column;display:flex}.brand-lockup strong{letter-spacing:-.04em;font-size:17px;font-weight:950}.brand-lockup small{color:var(--muted);letter-spacing:.04em;margin-top:1px;font-size:10px;font-weight:750}.bean-mark{background:var(--coffee-dark);border-radius:12px;place-items:center;width:37px;height:37px;display:grid;position:relative;transform:rotate(-4deg)}.bean-mark i{background:var(--latte);border-radius:60% 40%;width:10px;height:20px;position:absolute;transform:rotate(34deg)}.bean-mark i:first-child{margin-left:-9px}.bean-mark i:last-child{opacity:.72;margin-left:9px;transform:rotate(214deg)}.header-note{color:#9b8d82;letter-spacing:.18em;font-size:9px;font-weight:850}.hero{color:#f8f0e7;background:linear-gradient(135deg,#2a1d17 0%,#1e1612 58%,#342219 100%);border-radius:34px;grid-template-columns:1fr 330px;align-items:center;gap:54px;padding:clamp(34px,6vw,68px);display:grid;position:relative;overflow:hidden;box-shadow:0 24px 60px #2a1b1433}.hero:before{content:"";border:1px solid #e8cbaf24;border-radius:50%;width:430px;height:430px;position:absolute;top:-250px;right:-220px;box-shadow:0 0 0 48px #e8cbaf09,0 0 0 96px #e8cbaf06}.hero-content{z-index:1;position:relative}.eyebrow,.section-kicker{color:var(--accent);letter-spacing:.18em;margin:0 0 9px;font-size:11px;font-weight:900}.hero .eyebrow{color:var(--latte)}h1{letter-spacing:-.06em;margin:0;font-size:clamp(42px,6.2vw,72px);line-height:.98}h1 em{color:#e1b58d;font-family:Georgia,Times New Roman,serif;font-weight:500}.hero-copy{color:#bfb1a7;max-width:680px;margin:25px 0 0;font-size:16px;line-height:1.75}.hero-copy strong{color:#fff8ef}.hero-preview{z-index:1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffff0e;border:1px solid #fff4e821;border-radius:25px;padding:23px;position:relative}.cup-ring{border:8px solid #e1b58d38;border-right-color:#d5a77e;border-radius:50%;place-items:center;width:76px;height:76px;display:grid}.cup-ring span{color:#f5e8dc;font-family:Georgia,serif;font-size:24px;font-style:italic}.hero-preview>p{color:var(--latte);letter-spacing:.16em;margin:20px 0 14px;font-size:9px;font-weight:900}.hero-preview ul{gap:11px;margin:0;padding:0;list-style:none;display:grid}.hero-preview li{color:#ddd0c6;align-items:center;gap:10px;font-size:11px;line-height:1.4;display:flex}.hero-preview li span{color:#a98b73;font-family:Georgia,serif;font-size:10px}.mode-switch{z-index:2;border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffcf7f0;border-radius:22px;grid-template-columns:1fr 1fr;gap:8px;max-width:680px;margin:-25px auto 18px;padding:6px;display:grid;position:relative;box-shadow:0 14px 38px #30201724}.mode-switch button{color:var(--muted);text-align:left;background:0 0;border:0;border-radius:16px;flex-direction:column;align-items:flex-start;padding:14px 18px;transition:all .18s;display:flex}.mode-switch button:hover{background:#fffc}.mode-switch button.active{color:#fff;background:var(--coffee-dark);box-shadow:0 8px 22px #26181233}.mode-switch span{font-weight:900}.mode-switch small{opacity:.72;margin-top:4px;font-size:11px}.wizard-card,.simple-results,.control-card,.results-section,.table-card{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:28px;margin-top:18px;box-shadow:0 18px 60px #3a322312}.wizard-card{flex-direction:column;min-height:570px;padding:28px;display:flex}.wizard-progress-wrap{margin-bottom:42px}.wizard-progress-copy{color:var(--muted);justify-content:space-between;margin-bottom:10px;font-size:12px;display:flex}.wizard-progress-copy strong{color:var(--accent)}.wizard-progress{background:#e9e5dc;border-radius:99px;height:6px;overflow:hidden}.wizard-progress>div{border-radius:inherit;background:linear-gradient(90deg, var(--coffee-dark), var(--latte));height:100%;transition:width .35s}.method-question{border:0;min-width:0;margin:0;padding:0}.method-question legend{letter-spacing:-.045em;width:100%;max-width:760px;padding:0;font-size:clamp(27px,4vw,42px);font-weight:900;line-height:1.12;display:block}.question-number{min-width:40px;height:28px;color:var(--accent);background:var(--accent-soft);letter-spacing:.05em;vertical-align:7px;border-radius:99px;place-items:center;margin-right:10px;font-size:11px;font-weight:900;display:inline-grid}.method-question legend small,.question-title>small{color:var(--coffee);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px 52px;font-size:11px;font-weight:900;display:block}.method-question>p{color:var(--muted);margin:14px 0 26px}.method-choice-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.method-choice-grid button{border:1px solid var(--line);min-height:148px;color:var(--ink);text-align:left;background:#ffffffd6;border-radius:20px;flex-direction:column;align-items:flex-start;padding:20px;transition:transform .16s,border-color .16s,box-shadow .16s;display:flex;position:relative}.method-choice-grid button:hover{border-color:#b9977e;transform:translateY(-2px);box-shadow:0 12px 24px #5c36221a}.method-choice-grid button.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent), 0 12px 25px #5c362221;background:#fff9f3}.method-choice-tag{color:var(--accent);letter-spacing:.12em;font-size:10px;font-weight:900}.method-choice-grid strong{margin-top:12px;font-size:19px}.method-choice-grid small{max-width:270px;color:var(--muted);margin-top:6px;line-height:1.45}.method-choice-grid i{color:var(--muted);background:#f0eee8;border-radius:99px;padding:6px 9px;font-size:10px;font-style:normal;font-weight:800;position:absolute;top:18px;right:18px}.method-choice-grid button.selected i{color:#fff;background:var(--accent)}.number-question{text-align:center;width:min(680px,100%);margin:22px auto auto}.question-title .question-number{margin:0 auto 10px;display:grid}.question-title>small{margin-left:0}.question-title h2{letter-spacing:-.045em;margin:0;font-size:clamp(28px,4.5vw,43px);line-height:1.12}.question-title p{max-width:580px;color:var(--muted);margin:15px auto 28px;line-height:1.6}.wizard-input{background:#fff;border:2px solid #cfc9bc;border-radius:20px;align-items:center;width:min(430px,100%);margin:0 auto;display:flex;overflow:hidden;box-shadow:0 12px 28px #372f220f}.wizard-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px #75452c1c}.wizard-input input{width:100%;min-width:0;color:var(--ink);text-align:center;background:0 0;border:0;outline:0;padding:20px 10px 20px 24px;font-size:34px;font-weight:900}.wizard-input em{color:var(--muted);padding:0 24px 0 8px;font-size:16px;font-style:normal;font-weight:800}.suggestion-row{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;display:flex}.suggestion-row button{border:1px solid var(--line);color:var(--muted);background:#fff;border-radius:99px;padding:8px 13px;font-size:12px;font-weight:700}.suggestion-row button:hover,.suggestion-row button.selected{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.wizard-actions{border-top:1px solid var(--line);justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;display:flex}.wizard-actions .primary-button{min-width:140px}.primary-button,.secondary-button{border-radius:999px;padding:13px 20px;font-weight:850;transition:all .16s}.primary-button{border:1px solid var(--accent);color:#fff;background:var(--accent)}.primary-button:hover{background:var(--accent-deep);transform:translateY(-1px)}.primary-button:disabled{cursor:not-allowed;background:#bbb;border-color:#bbb;transform:none}.secondary-button{border:1px solid var(--line);color:var(--ink);background:#fff}.secondary-button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.secondary-button:disabled{cursor:not-allowed;opacity:.42}.simple-results{padding:30px}.result-intro{justify-content:space-between;align-items:flex-start;gap:24px;padding:4px 2px 26px;display:flex}.result-intro h2{letter-spacing:-.045em;margin:0;font-size:clamp(28px,4vw,42px)}.result-intro p:not(.section-kicker){color:var(--muted);margin:12px 0 0;line-height:1.55}.result-method-tag{color:var(--accent);background:var(--accent-soft);letter-spacing:.12em;border-radius:99px;flex:none;padding:9px 12px;font-size:10px;font-weight:900}.result-metrics{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.metric-card{border:1px solid var(--line);background:#fff;border-radius:20px;min-width:0;padding:18px}.metric-card.primary{border-color:var(--coffee-dark);color:#fff;background:linear-gradient(145deg, #35241c, var(--coffee-dark))}.metric-card.caffeine{background:#f7efe9}.metric-card>span,.metric-card>small{color:var(--muted);display:block}.metric-card.primary>span,.metric-card.primary>small{color:#ffffffb3}.metric-card>span{font-size:12px;font-weight:800}.metric-card>strong{overflow-wrap:anywhere;letter-spacing:-.05em;margin:12px 0 6px;font-size:clamp(22px,2.8vw,31px);display:block}.metric-card>small{font-size:10px;line-height:1.35}.result-detail-grid{grid-template-columns:1.25fr .75fr;gap:12px;margin-top:12px;display:grid}.cost-breakdown,.habit-summary{border:1px solid var(--line);background:#fffc;border-radius:22px;padding:22px}.detail-heading{justify-content:space-between;align-items:flex-end;gap:20px;display:flex}.detail-heading h3,.habit-summary h3{letter-spacing:-.03em;margin:0;font-size:22px}.detail-heading>strong{color:var(--accent);white-space:nowrap;font-size:21px}.detail-heading>strong small{color:var(--muted);font-size:10px}.cost-breakdown dl{margin:18px 0 0}.cost-breakdown dl>div{border-bottom:1px solid var(--line);justify-content:space-between;gap:20px;padding:12px 0;display:flex}.cost-breakdown dt{color:var(--muted)}.cost-breakdown dd{margin:0;font-weight:800}.cost-breakdown dl>div.total{color:var(--ink);border-bottom:0;font-size:17px}.cost-breakdown .total dt{color:var(--ink);font-weight:900}.habit-summary ul{gap:12px;margin:19px 0 0;padding:0;list-style:none;display:grid}.habit-summary li{justify-content:space-between;gap:14px;font-size:13px;display:flex}.habit-summary li span{color:var(--muted)}.habit-summary li strong{text-align:right}.result-note{color:#5e5448;background:#eee9de;border-radius:18px;margin-top:12px;padding:17px 19px}.result-note strong{font-size:12px}.result-note p{margin:6px 0 0;font-size:11px;line-height:1.6}.result-actions{justify-content:flex-end;gap:10px;margin-top:22px;display:flex}.control-card,.results-section,.table-card{padding:28px}.section-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px;display:flex}.section-heading h2{letter-spacing:-.035em;margin:0;font-size:27px}.muted{color:var(--muted);margin:0;font-size:14px}.ghost-button{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:999px;padding:10px 15px}.ghost-button:hover{border-color:var(--accent)}.habit-grid{grid-template-columns:1fr 1fr 1fr;gap:14px;display:grid}.field,.method-inputs label{display:block}.field>span,.method-inputs label>span{color:var(--muted);margin-bottom:8px;font-size:13px;font-weight:700;display:block}.input-with-unit{border:1px solid var(--line);background:#fff;border-radius:16px;align-items:center;display:flex;overflow:hidden}.input-with-unit:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #75452c1a}.input-with-unit input{width:100%;min-width:0;color:var(--ink);background:0 0;border:0;outline:0;padding:16px;font-size:20px;font-weight:800}.input-with-unit em{color:var(--muted);padding:0 16px;font-style:normal;font-weight:700}.input-with-unit.compact input{padding:12px 13px;font-size:16px}.summary-pill{background:var(--accent-soft);border-radius:18px;padding:15px 18px}.summary-pill span,.summary-pill small{color:#795d4c;display:block}.summary-pill strong{margin:8px 0 3px;font-size:22px;display:block}.method-grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.method-card{border:1px solid var(--line);background:#ffffffb8;border-radius:20px;padding:19px}.method-topline{justify-content:space-between;align-items:center;gap:12px;display:flex}.method-topline h3{margin:0;font-size:19px}.method-topline span{color:var(--muted);background:#f0eee7;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:700}.method-card>p{min-height:40px;color:var(--muted);margin:11px 0 16px;font-size:13px;line-height:1.55}.method-inputs{grid-template-columns:1fr 1fr;gap:10px;display:grid}.winner-card{color:#fff;background:linear-gradient(135deg,#34231b,#5b3725);border-radius:22px;justify-content:space-between;align-items:center;gap:24px;padding:24px;display:flex}.winner-label,.winner-price span,.winner-price small{color:#ffffffb8;display:block}.winner-card>div>strong{margin-top:7px;font-size:28px;display:block}.winner-price{text-align:right}.winner-price strong{margin:5px 0;font-size:32px;display:block}.ranking-list{gap:10px;margin-top:14px;display:grid}.ranking-row{grid-template-columns:42px 1fr;align-items:center;gap:14px;padding:14px 0;display:grid}.rank{background:#ece8dd;border-radius:50%;place-items:center;width:38px;height:38px;font-weight:900;display:grid}.ranking-title{justify-content:space-between;align-items:end;gap:20px;display:flex}.ranking-title>div>strong,.ranking-title>div>span{display:block}.ranking-title>div>span{color:var(--muted);margin-top:4px;font-size:12px}.ranking-price{text-align:right}.ranking-price strong{font-size:18px}.bar-track{background:#e9e4d8;border-radius:99px;height:9px;margin-top:10px;overflow:hidden}.bar-fill{border-radius:inherit;background:linear-gradient(90deg, var(--accent-deep), var(--latte));height:100%}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:840px}th,td{border-bottom:1px solid var(--line);text-align:right;padding:14px 12px;font-size:14px}th:first-child,td:first-child,th:nth-child(2),td:nth-child(2){text-align:left}th{color:var(--muted);font-size:12px}tbody tr:last-child td{border-bottom:0}footer{color:var(--muted);justify-content:space-between;gap:24px;padding:24px 6px 0;font-size:11px;line-height:1.6;display:flex}footer strong{color:var(--coffee-dark);flex:none;font-size:12px}footer p{text-align:right;max-width:760px;margin:0}@media (max-width:900px){.result-metrics{grid-template-columns:repeat(2,1fr)}.result-detail-grid{grid-template-columns:1fr}}@media (max-width:760px){.page-shell{width:min(100% - 20px,680px);padding-top:22px}.hero{grid-template-columns:1fr;gap:22px}.hero-preview{max-width:360px}.habit-grid,.method-grid{grid-template-columns:1fr}.section-heading,.winner-card{flex-direction:column;align-items:flex-start}.winner-price{text-align:left}}@media (max-width:560px){.page-shell{width:min(100% - 14px,520px)}.site-header{padding-inline:3px}.header-note{display:none}.hero{border-radius:25px;padding:32px 23px 54px}.hero-preview{display:none}.hero-copy{font-size:15px}.mode-switch{border-radius:18px}.mode-switch button{padding:12px}.mode-switch small{display:none}.wizard-card,.simple-results,.control-card,.results-section,.table-card{border-radius:22px;padding:19px}.wizard-card{min-height:580px}.wizard-progress-wrap{margin-bottom:30px}.method-choice-grid{grid-template-columns:1fr}.method-choice-grid button{min-height:124px}.method-question legend{font-size:29px}.method-question legend .question-number{vertical-align:0;margin-bottom:10px;display:grid}.method-question legend small{margin-left:0}.number-question{margin-top:12px}.wizard-input input{padding:17px 8px 17px 18px;font-size:29px}.wizard-input em{padding-right:18px}.wizard-actions{z-index:5;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);margin-top:30px;background:#fffcf7f0;border:1px solid #d9cfc2e6;border-radius:18px;margin-inline:-7px;padding:10px;position:sticky;bottom:8px;box-shadow:0 12px 30px #2d1d1529}.wizard-actions .secondary-button{flex:0 0 86px;min-height:52px}.wizard-actions .primary-button{flex:1;min-height:52px}.result-intro{flex-direction:column}.result-metrics{grid-template-columns:1fr}.metric-card>strong{font-size:30px}.detail-heading{flex-direction:column;align-items:flex-start}.result-actions{flex-direction:column-reverse}.result-actions button{width:100%}.method-inputs{grid-template-columns:1fr}.ranking-title{flex-direction:column;align-items:flex-start}.ranking-price{text-align:left}footer{flex-direction:column;gap:5px}footer p{text-align:left}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
