@font-face{font-family:"Noto Serif KR";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/serif-400.ttf") format("truetype");}
@font-face{font-family:"Noto Serif KR";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/serif-500.ttf") format("truetype");}
@font-face{font-family:"Noto Serif KR";font-style:normal;font-weight:600;font-display:swap;src:url("./fonts/serif-600.ttf") format("truetype");}
:root{--bg:#f7f4ec;--paper:#fffdf7;--ink:#383226;--muted:#706857;--line:#ded5c2;--accent:#7a6236;--soft:#eee5d2}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.5 "Noto Serif KR","AppleMyungjo","Nanum Myeongjo","Batang",serif;word-break:keep-all}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #b39961;outline-offset:4px}.header{max-width:1220px;margin:auto;padding:28px 44px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:14px;font-size:1.1875rem;font-weight:600;letter-spacing:.04em}.brand small{display:block;font-size:0.75rem;font-weight:400;letter-spacing:.02em;color:var(--muted)}.monogram{font:italic 38px Georgia,serif;border:1px solid #bd9d6c;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;color:var(--accent);padding-right:4px}.help{font-size:0.875rem;background:transparent;border:1px solid #c8b78e;padding:9px 14px;border-radius:7px}main{max-width:1220px;margin:auto;padding:0 44px}.intro{padding:40px 0 30px;position:relative}.eyebrow{font-size:0.75rem;letter-spacing:.12em;color:var(--accent);margin:0 0 12px}.intro h1{font-size:2.375rem;line-height:1.38;font-weight:500;letter-spacing:-.045em;margin:0 0 14px}.intro>p:not(.eyebrow){margin:0;color:var(--muted)}.price-note{margin-top:25px;background:#eee5d2;border-left:2px solid #b39262;padding:12px 18px;font-size:0.875rem;display:flex;gap:18px}.price-note>span{white-space:nowrap;color:var(--accent)}.price-note p{margin:0}.price-note strong{font-weight:500}.workspace{display:grid;grid-template-columns:310px 1fr;gap:32px;align-items:start}.finder{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:12px;position:sticky;top:24px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}h2{font-size:1.125rem;font-weight:600;letter-spacing:-.035em;margin:0}.finder h2{font-size:1.0625rem}.text-button{padding:4px 0;background:none;border:0;color:var(--muted);font-size:0.75rem;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.hint{font-size:0.875rem;color:var(--muted);margin:7px 0 22px}fieldset{padding:0;border:0;margin:0 0 25px;min-width:0}legend{font-size:0.875rem;margin-bottom:11px;font-weight:500}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid var(--line);background:transparent;border-radius:24px;padding:9px 13px;font-size:0.875rem;min-height:42px;transition:background .15s}.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.chip:hover{border-color:#9c8250}.segmented{display:flex;background:#f1eadb;padding:4px;border-radius:8px;gap:4px}.segmented button{border:0;background:none;border-radius:6px;padding:9px 0;flex:1;font-size:0.875rem}.segmented button[aria-pressed=true]{background:var(--paper);box-shadow:0 1px 4px #0000000c}.finder-foot{border-top:1px solid var(--line);padding-top:17px;font-size:0.8125rem;color:var(--muted)}.results-head{padding-top:4px}.results h2{font-size:1.4375rem}.results h2 span{font:italic 24px Georgia,serif;color:#8a713c;margin-left:4px}.results .eyebrow{margin-bottom:4px}.range{font-size:0.75rem;color:var(--muted)}.result-explanation{font-size:0.875rem;color:var(--muted);margin:12px 0 20px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:23px;text-align:left;width:100%;display:flex;flex-direction:column;position:relative;transition:transform .2s,border-color .2s}.card:hover{transform:translateY(-2px);border-color:#b6a071}.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:20px}.category{font-size:0.75rem;letter-spacing:.04em;color:var(--accent);border-bottom:1px solid #c7aa77;padding-bottom:3px}.recommend{font-size:0.75rem;color:var(--accent)}.card h3{font-size:1.1875rem;letter-spacing:-.035em;line-height:1.55;font-weight:500;margin:0 0 10px}.card h3 small{display:block;font-size:0.8125rem;color:var(--muted);font-weight:400;margin-bottom:3px}.card p{font-size:0.875rem;color:var(--muted);margin:0 0 20px;line-height:1.5}.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;margin-bottom:20px}.mini-tag{font-size:0.75rem;background:#f1eadb;border-radius:4px;padding:3px 7px;color:#6c5b38}.card-bottom{border-top:1px solid #e9dfcc;padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}.price{font-size:1.1875rem;font-weight:500;white-space:nowrap}.price small{font-size:0.75rem;font-weight:400;color:var(--muted);margin-right:5px}.more{font-size:0.75rem;color:var(--muted)}.care-note{font-size:0.8125rem;color:var(--muted);margin:22px 0;line-height:1.5}footer{margin-top:46px;padding:26px 0 36px;border-top:1px solid var(--line);color:var(--muted);font-size:0.75rem}footer>span{font-size:0.875rem;color:var(--ink)}footer p{margin:7px 0}dialog{color:var(--ink);border:1px solid var(--line);border-radius:16px;background:var(--paper);padding:32px;width:560px;max-width:calc(100% - 32px);max-height:85dvh;overflow-y:auto}dialog::backdrop{background:#302a1e70;backdrop-filter:blur(4px)}dialog h2{font-size:1.625rem;line-height:1.5;margin:10px 0 18px}dialog p{font-size:0.9375rem;color:var(--muted)}.dialog-x{float:right;background:none;border:0;font-size:1.75rem;line-height:1;width:44px;height:44px}.detail-price{padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.detail-block{margin-top:24px}.detail-block h3{font-size:0.9375rem;font-weight:600;margin:0 0 8px}.detail-block p{margin:0 0 10px}.close-bottom{border:0;background:var(--ink);color:white;width:100%;border-radius:7px;min-height:48px;margin-top:24px}.empty{grid-column:1/-1;border:1px solid var(--line);border-radius:10px;padding:30px;color:var(--muted)}@media(min-width:1000px){.intro h1 br{display:none}}@media(max-width:900px){.workspace{grid-template-columns:260px 1fr;gap:20px}.finder{padding:20px}.cards{grid-template-columns:1fr}.header{padding:24px}main{padding:0 24px}.finder .section-head{align-items:flex-start;flex-direction:column;gap:4px}}@media(max-width:640px){.header{padding:calc(17px + env(safe-area-inset-top)) 20px 17px}.brand{font-size:1.0625rem;gap:10px}.monogram{height:42px;width:42px;font-size:1.9375rem}.brand small{font-size:0.6875rem}.help{font-size:0.75rem;padding:8px 10px}main{padding:0 20px}.intro{padding:28px 0 24px}.intro h1{font-size:1.875rem}.intro>p:not(.eyebrow){font-size:0.875rem}.price-note{display:block;padding:12px 14px;margin-top:20px;font-size:0.8125rem}.price-note>span{display:block;margin-bottom:3px;font-size:0.75rem}.workspace{display:block}.finder{position:static;padding:20px}.finder .section-head{flex-direction:row;align-items:center}.finder .text-button{font-size:0.75rem}.finder .hint{margin-bottom:20px}.chips{gap:7px}.chip{padding:8px 12px;min-height:42px}fieldset{margin-bottom:21px}.finder-foot br{display:none}.finder-foot{font-size:0.75rem}.results{margin-top:30px}.results h2{font-size:1.375rem}.cards{gap:13px}.card{padding:22px}.card-top{margin-bottom:13px}.card h3{font-size:1.3125rem}.card p{margin-bottom:16px}.card-tags{margin-bottom:17px}.card-bottom{padding-top:14px}.result-explanation{line-height:1.5}.range{font-size:0.6875rem}footer{margin-top:30px;padding-bottom:calc(30px + env(safe-area-inset-bottom))}dialog{padding:24px;max-height:88dvh}.eyebrow{font-size:0.75rem}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Muted antique gold accents, with a consistent Korean serif face. */
.header{border-top:4px solid var(--accent)}
.brand{color:var(--accent);letter-spacing:.02em}
.monogram{background:var(--accent);color:#eedcba;box-shadow:inset 0 0 0 4px var(--bg)}
.intro h1{color:#69532b;letter-spacing:-.035em}
.price-note{border-radius:0 7px 7px 0}
.finder{border-top:3px solid #af8d60;box-shadow:0 8px 28px #66533105}
.chip[aria-pressed=true],.close-bottom{background:var(--accent);border-color:var(--accent)}
.card{border-top:2px solid #d0b993;box-shadow:0 5px 20px #66533104}
.card h3{color:#69532b}
.card p,dialog p{font-size:0.9375rem;line-height:1.5}
.category{color:#7a6236}
.price{color:var(--accent)}
.recommend{font-weight:500}
@media(max-width:640px){.header{gap:10px}.finder .section-head{flex-wrap:wrap}.card h3{line-height:1.45}.intro h1{line-height:1.5}}

.card h3,dialog h2{line-height:1.4}
.card h3 small{line-height:1.4;margin-bottom:4px}
.detail-block{margin-top:20px}
.detail-block p{margin-bottom:8px}
.benefit-label{display:block;color:var(--accent);font-size:0.8125rem;margin-bottom:3px}
.card-tags{row-gap:5px}
.header{border-top-color:#ab915b}
.monogram{background:linear-gradient(135deg,#b5a071,#7a6236);color:#fff8e8}

.card{padding:0;overflow:hidden}.card-main{display:flex;flex-direction:column;flex:1;width:100%;padding:22px;background:none;border:0;text-align:left}.card-main .card-bottom{width:100%}.card-main .card-top{width:100%}.stage-label{font-size:0.75rem;color:var(--muted)}.compare-choice{margin:0 22px 18px;padding:9px 12px;min-height:44px;background:transparent;border:1px solid var(--line);border-radius:6px;font-size:0.875rem}.compare-choice[aria-pressed=true]{background:var(--soft);border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}.stage-filter button{font-size:0.8125rem;white-space:nowrap}.result-explanation{display:flex;flex-wrap:wrap;gap:6px}.selected-tag{border:1px solid var(--line);background:var(--soft);border-radius:5px;padding:7px 10px;font-size:0.8125rem;min-height:36px}.result-explanation:empty{margin:0 0 18px}#compare-tray{position:fixed;bottom:0;left:0;right:0;z-index:10;background:var(--paper);border-top:1px solid #c8b78e;padding:12px max(20px,calc((100vw - 1132px)/2)) calc(12px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px #3832260b}#compare-tray[hidden]{display:none}#compare-items{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px}#compare-items button{flex-shrink:0;border:1px solid var(--line);border-radius:5px;background:var(--soft);padding:7px 10px;font-size:0.8125rem;min-height:38px}.compare-actions{display:flex;justify-content:flex-end;gap:18px;align-items:center}#compare-open{border:0;border-radius:6px;background:var(--accent);color:#fff;padding:11px 22px;font-size:0.875rem;min-height:44px}.has-comparison{padding-bottom:160px}#comparison{width:960px}.comparison-hint{font-size:0.75rem!important;margin:0 0 16px}.table-scroll{overflow:auto;max-height:60dvh;overscroll-behavior:contain}.table-scroll table{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;font-size:0.875rem;line-height:1.5}.table-scroll th,.table-scroll td{padding:14px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top;text-align:left;overflow-wrap:anywhere}.table-scroll th{font-weight:500;background:var(--soft)}.table-scroll th:first-child{width:90px;position:sticky;left:0;z-index:1}.table-scroll td{background:var(--paper)}.table-scroll thead th{position:sticky;top:0;z-index:2}.table-scroll thead th:first-child{z-index:3}.table-scroll thead small{display:block;font-size:0.75rem;color:var(--muted);margin-bottom:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:640px){#comparison{padding:20px}.table-scroll table{min-width:590px}.table-scroll th,.table-scroll td{padding:12px 10px}.table-scroll th:first-child{width:78px}.card-main{padding:20px}.compare-choice{margin:0 20px 16px}}

/* Quiet, regular-weight typography with natural character width. */
body{letter-spacing:0}
.brand,.eyebrow,h2,.card h3,dialog h2{letter-spacing:0}
h2,.card h3,dialog h2,.price{font-weight:400}
.intro{padding:22px 0 24px}
.intro .eyebrow{margin:0 0 10px}
.price-note{margin-top:0}
.finder .section-head{margin-bottom:22px}
.finder h2{font-size:1.0625rem;line-height:1.5}
.card h3{font-size:1.1875rem;line-height:1.5}
.card h3 small{font-size:0.75rem;font-weight:400}
.card p,dialog p{font-size:0.875rem;line-height:1.6;letter-spacing:0}
dialog h2{font-size:1.4375rem;line-height:1.5}
.detail-price .fee-disclaimer{font-size:0.75rem;line-height:1.4;margin:7px 0 0}
@media(max-width:640px){.intro{padding:18px 0 20px}.card h3{font-size:1.125rem}.results h2{font-size:1.25rem}.finder .section-head{gap:8px}.finder h2{font-size:1.0625rem}.price{font-size:1.125rem}}

/* Comparison cells should wrap like product copy, not run far sideways. */
#comparison{width:min(820px,calc(100% - 32px))}
.table-scroll{overflow-x:auto}
.table-scroll table{min-width:0}
.table-scroll th,.table-scroll td{overflow-wrap:break-word;word-break:keep-all;line-break:loose}
.table-scroll tbody th{white-space:nowrap;overflow-wrap:normal}
.table-scroll td{font-size:0.8125rem;line-height:1.65}
.table-scroll thead th{font-size:0.875rem;line-height:1.55}
@media(max-width:640px){#comparison{padding:18px}.table-scroll{max-height:62dvh}.table-scroll table{min-width:560px}.table-scroll th,.table-scroll td{padding:11px 9px}.table-scroll th:first-child{width:96px}.table-scroll tbody th{font-size:0.875rem}.table-scroll td{font-size:0.8125rem}}

.ai-compare{margin-top:16px;padding:15px 16px;border:1px solid #d6c39d;background:#fbf7ee;border-radius:7px}
.ai-compare h3{margin:0 0 9px;color:var(--accent);font-size:0.9375rem;font-weight:400}
.ai-compare p{margin:0 0 7px;font-size:0.8125rem!important;line-height:1.6;color:var(--muted)}
.ai-compare p:last-child{margin-bottom:0}

/* Keep the established serif and gold palette, with flexible mobile sizing. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:180px}
body{overflow-wrap:anywhere}
body.dialog-open{overflow:hidden}
button,a{touch-action:manipulation}
.brand h1{font-size:inherit;font-weight:400;line-height:1.4;margin:0 0 3px}
.brand,.brand small,.category{letter-spacing:0}
.monogram{flex-shrink:0;background:var(--accent)}
.help{min-height:44px;flex-shrink:0}
.intro .price-note{display:block;padding:0;border:0;border-radius:0;background:none;color:var(--muted)}
.price-note .fee-disclaimer{font-size:0.6875rem;margin:5px 0 0;line-height:1.6}
.workspace{grid-template-columns:300px minmax(0,1fr)}
.finder{position:static;border-radius:8px;box-shadow:none}
.finder .section-head{flex-wrap:wrap;align-items:baseline}
.finder .text-button{min-height:44px}
fieldset:last-child{margin-bottom:0}
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{min-width:0;overflow:visible;border-radius:8px;box-shadow:none}
.card-main{min-width:0;border-radius:7px}
.card-top,.card-bottom,.results-head{flex-wrap:wrap}
.card p,dialog p{line-height:1.7}
.chip,.selected-tag{min-height:44px;max-width:100%}
.segmented button{min-height:44px;min-width:0}
.stage-filter button{white-space:normal}
.mini-tag{max-width:100%;padding:4px 7px}
.card:hover{transform:none}
.results{min-width:0}
dialog{border-radius:8px;max-height:88vh;max-height:88dvh;overscroll-behavior:contain}
dialog h2{margin-right:44px}
.dialog-x{position:absolute;right:12px;top:12px;float:none;border-radius:4px}
button:focus-visible,a:focus-visible{outline-width:2px;outline-offset:2px}
#detail-content>.eyebrow{padding-right:44px}
#detail-content>.card-tags{margin-top:20px;margin-bottom:0}
#compare-items button{min-height:44px}
.has-comparison{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
#comparison{width:900px;max-width:calc(100% - 24px)}
.table-scroll{overflow:visible;max-height:none}
.table-scroll table{min-width:0}
.table-scroll th:first-child{position:static;width:100px}
.table-scroll thead th{position:static}
.table-scroll th,.table-scroll td{overflow-wrap:anywhere;line-height:1.7}
.ai-compare{margin-top:24px;padding:18px 0 0;border:0;border-top:1px solid #c8b78e;background:none;border-radius:0}
.ai-compare h3{margin-bottom:14px;font-size:1rem}
.ai-compare p{margin-bottom:13px;font-size:0.875rem!important;line-height:1.7}
.compare-product-name{display:block;color:var(--ink);margin-bottom:3px}
.ai-compare .compare-guidance{padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:1000px){.workspace{grid-template-columns:270px minmax(0,1fr);gap:22px}.cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
 .header{padding:calc(16px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left));gap:10px}
 .brand{gap:9px;font-size:1.0625rem}.brand small{font-size:0.6875rem}
 .monogram{height:40px;width:40px;font-size:1.75rem}
 .help{padding:8px 9px;font-size:0.75rem}
 main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .workspace{display:block}.finder{padding:18px}.finder .section-head{flex-direction:row;align-items:baseline}
 .finder h2{font-size:1rem}.results{margin-top:28px}
 dialog{padding:20px;max-width:calc(100% - 24px);max-height:90vh;max-height:90dvh}
 #comparison{padding:18px}
 /* Full-width row labels leave room for all selected products. */
 .table-scroll table,.table-scroll thead,.table-scroll tbody{display:block}
 .table-scroll tr{display:grid;grid-template-columns:repeat(var(--product-count),minmax(0,1fr))}
 .table-scroll th,.table-scroll td{display:block;min-width:0;padding:10px 8px}
 .table-scroll th:first-child{width:auto}
 .table-scroll thead th:first-child{display:none}
 .table-scroll thead th{font-size:0.8125rem}
 .table-scroll thead small{font-size:0.6875rem}
 .table-scroll tbody th{grid-column:1/-1;padding:8px 10px;font-size:0.8125rem;background:#f5efe2;white-space:normal}
 .table-scroll td{font-size:0.8125rem}
 .table-scroll .common-row td{grid-column:1/-1}
 /* Isolate scrolling rows so grid-cell z-index cannot cover the sticky names. */
 .table-scroll tbody{position:relative;z-index:0}
 .table-scroll tbody th,.table-scroll tbody td{position:static;z-index:auto}
 .table-scroll thead{position:sticky;top:-18px;z-index:2;background:var(--soft)}
}
@media(max-width:360px){.header{flex-wrap:wrap}.help{margin-left:auto}.finder{padding:15px}.chip{padding:8px 10px}.table-scroll th,.table-scroll td{padding:9px 6px}}
.salon-logo{display:block;flex:0 0 auto;width:52px;height:52px;object-fit:contain}
.chip{padding:6px 10px;min-height:40px}
@media(max-width:700px){.salon-logo{width:44px;height:44px}}
@media(max-width:360px){.chip{padding:6px 9px}}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:0}.footer-brand>span:first-child{font-size:.875rem;color:var(--ink)}.footer-contact{font-size:.75rem;white-space:nowrap}.footer-contact [lang=en]{letter-spacing:.015em}
#tag-groups{padding-bottom:24px}
.footer-address{font-style:normal;line-height:1.7;margin:0 0 18px}
.footer-ending{margin-top:24px;max-width:38rem;line-height:1.7}
.footer-ending .copyright{margin-top:16px}