:root{
  --paper:#f3eee4; --paper2:#ebe4d6; --ink:#1e1c18; --mute:#6f695d; --line:#d8cfbd; --rust:#a8472a; --rust2:#c7633f; --ok:#3d6b4f;
  --serif:'Instrument Serif','Noto Serif KR',serif; --sans:'Noto Sans KR',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.top{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:14px 32px;background:rgba(243,238,228,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font:400 26px/1 var(--serif);letter-spacing:.01em}
.brand span{color:var(--rust);margin:0 2px}
.brand em{font:500 10px var(--sans);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--ink);border-radius:20px;padding:2px 7px;margin-left:10px;vertical-align:middle}
.top nav{display:flex;gap:22px;align-items:center;font-size:13.5px}
.top nav a:hover{color:var(--rust)}
.lang{border:1px solid var(--line);border-radius:20px;padding:3px 11px;font-size:12px;letter-spacing:.06em}
.lang:hover{border-color:var(--ink)}
.basket{background:var(--ink);color:var(--paper);border-radius:22px;padding:6px 15px;font-size:13px;transition:transform .2s}
.basket b{display:inline-block;min-width:18px;margin-left:4px;background:var(--rust2);border-radius:9px;text-align:center;font-weight:500}
.basket.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.12)}}

.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;max-width:1280px;margin:0 auto;padding:56px 32px 40px;min-height:78vh}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);margin-bottom:18px}
h1{font:400 clamp(36px,4.6vw,64px)/1.08 var(--serif);letter-spacing:-.01em;margin-bottom:30px;word-break:keep-all}
h1 i{color:var(--rust);font-style:italic}
.finder-box{position:relative;display:block;background:#fbf8f1;border:1.5px solid var(--ink);border-radius:6px;box-shadow:5px 5px 0 var(--ink);transition:box-shadow .2s,transform .2s}
.finder-box:focus-within{box-shadow:7px 7px 0 var(--rust);transform:translate(-2px,-2px)}
.finder-box.drag{background:#f6e9dc;border-style:dashed}
#q{display:block;width:100%;resize:none;border:0;outline:0;background:transparent;padding:18px 20px;font:400 18px/1.5 var(--sans);position:relative;z-index:1}
.ph{position:absolute;left:20px;top:18px;right:20px;color:#9b9486;font-size:18px;line-height:1.5;pointer-events:none}
.ph.hide{display:none}
.ph::after{content:"";display:inline-block;width:2px;height:1em;background:var(--rust);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.finder-row{display:flex;align-items:center;gap:12px;margin-top:20px}
.photo-btn{display:inline-flex;gap:8px;align-items:center;border:1.5px solid var(--ink);border-radius:30px;padding:9px 18px;cursor:pointer;font-size:14px;transition:background .2s}
.photo-btn:hover{background:var(--paper2)}
.thumb{position:relative;width:46px;height:46px;border-radius:4px;overflow:hidden;border:1.5px solid var(--ink)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:0;right:0;width:18px;height:18px;line-height:16px;background:var(--ink);color:#fff;font-size:13px}
.go{margin-left:auto;background:var(--rust);color:#fff;border-radius:30px;padding:11px 28px;font-weight:500;transition:background .2s,transform .2s}
.go:hover{background:var(--ink)}
.go:active{transform:scale(.97)}
.samples{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.samples button{font-size:13px;color:var(--mute);border-bottom:1px dashed var(--mute);padding:1px 0;transition:color .2s}
.samples button:hover{color:var(--rust);border-color:var(--rust)}
.samples.photos button{border:0;padding:0;display:flex;flex-direction:column;gap:4px;align-items:center;font-size:11px}
.samples.photos canvas{width:56px;height:56px;border-radius:4px;border:1px solid var(--line);transition:transform .2s}
.samples.photos button:hover canvas{transform:translateY(-3px) rotate(-2deg)}
.samples.photos::before{content:attr(data-label);width:100%;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.hero-stack{position:relative;height:min(560px,62vh);perspective:900px}
.hero-stack .sw{position:absolute;width:44%;aspect-ratio:1;border-radius:3px;box-shadow:0 18px 30px -12px rgba(30,28,24,.45);overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform;background:var(--paper2)}
.hero-stack .sw img{width:100%;height:100%;object-fit:cover;display:block}
.hero-stack .sw span{position:absolute;left:0;bottom:0;right:0;padding:18px 10px 7px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}

.catalog{max-width:1280px;margin:0 auto;padding:24px 32px 80px;scroll-margin-top:60px}
.understood{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;font-size:13px;color:var(--mute)}
.understood b{font-weight:500;color:var(--ink);margin-right:4px}
.chip{display:inline-flex;gap:5px;align-items:center;background:var(--ink);color:var(--paper);border-radius:20px;padding:3px 12px;font-size:12.5px;animation:pop .35s both}
.chip small{opacity:.6;font-size:11px}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.banner{background:#f4e0cf;border:1px solid #e0c3a8;border-left:4px solid var(--rust);padding:10px 16px;font-size:13.5px;margin-bottom:14px;border-radius:3px}
.bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:12px 0;margin-bottom:26px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters select{appearance:none;background:#fbf8f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231e1c18' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid var(--line);border-radius:20px;padding:6px 32px 6px 14px;font:inherit;font-size:13px;cursor:pointer;transition:border-color .2s}
.filters select:hover{border-color:var(--ink)}
.filters select.on{border-color:var(--rust);color:var(--rust);font-weight:500}
.count{font-size:13px;color:var(--mute)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px 20px}
.divider{grid-column:1/-1;display:flex;align-items:center;gap:14px;font:italic 26px var(--serif);color:var(--rust);margin-top:10px}
.divider::after{content:"";flex:1;border-top:1px solid var(--line)}
.card{display:block;text-align:left;width:100%;position:relative;animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.card .ph-img{position:relative;aspect-ratio:1;overflow:hidden;border-radius:3px;background:var(--paper2);box-shadow:0 1px 0 var(--line)}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover img{transform:scale(1.08) rotate(.4deg)}
.card .pct{position:absolute;left:8px;top:8px;background:rgba(251,248,241,.94);border-radius:20px;padding:1px 9px;font-size:11.5px;font-weight:500}
.card .pct.alt{background:var(--rust);color:#fff}
.card .add{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-size:20px;line-height:30px;text-align:center;opacity:0;transform:translateY(6px);transition:.25s}
.card:hover .add,.card .add.in{opacity:1;transform:none}
.card .add.in{background:var(--ok)}
.card .id{font-size:10.5px;letter-spacing:.14em;color:var(--mute);margin-top:9px}
.card h3{font:400 19px/1.2 var(--serif);margin:1px 0 2px}
.card .spec{font-size:12px;color:var(--mute)}
.card .why{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.why i{font-style:normal;font-size:11px;border-radius:3px;padding:0 6px;border:1px solid var(--line);color:var(--mute)}
.why i.ok{background:#e1ece4;border-color:#bcd2c3;color:var(--ok)}
.why i.part{background:#f4e9d3;border-color:#e4d3ab;color:#8a6a1c}
.empty{text-align:center;padding:60px 0;color:var(--mute);font:italic 22px var(--serif)}

.drawer{position:fixed;inset:0;z-index:60;visibility:hidden}
.drawer.open{visibility:visible}
.drawer-bg{position:absolute;inset:0;background:rgba(30,28,24,.45);opacity:0;transition:opacity .3s}
.drawer.open .drawer-bg{opacity:1}
.drawer-panel{position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);background:var(--paper);overflow:auto;transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.drawer-panel.narrow{width:min(480px,100%)}
.drawer.open .drawer-panel{transform:none}
.x{position:absolute;right:14px;top:10px;z-index:3;font-size:30px;line-height:1;width:38px;height:38px;border-radius:50%;background:rgba(251,248,241,.9)}
.zoom{position:relative;aspect-ratio:1;background-size:cover;cursor:zoom-in;overflow:hidden}
.zoom .lens{position:absolute;inset:0;background-repeat:no-repeat;background-size:320%;opacity:0;transition:opacity .2s}
.zoom:hover .lens{opacity:1}
.d-body{padding:26px 30px 40px}
.d-body .id{font-size:11px;letter-spacing:.16em;color:var(--mute)}
.d-body h2{font:400 34px/1.1 var(--serif);margin:4px 0 4px}
.d-body .sub{color:var(--mute);margin-bottom:18px}
table.spec{width:100%;border-collapse:collapse;font-size:14px}
table.spec th{text-align:left;font-weight:400;color:var(--mute);width:34%;padding:8px 0;border-top:1px solid var(--line)}
table.spec td{padding:8px 0;border-top:1px solid var(--line)}
.sw-dot{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:6px;border:1px solid rgba(0,0,0,.2)}
.price{margin:20px 0;padding:14px 16px;background:var(--paper2);border-radius:4px;font-size:13.5px}
.price b{font-family:var(--serif);font-size:20px;font-weight:400}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{border-radius:30px;padding:11px 24px;border:1.5px solid var(--ink);font-weight:500;transition:.2s}
.btn.fill{background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--rust);border-color:var(--rust);color:#fff}
.similar{display:flex;gap:10px;margin-top:26px}
.similar button{flex:1;text-align:left;font-size:11.5px;color:var(--mute)}
.similar img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px;margin-bottom:4px;transition:transform .3s}
.similar button:hover img{transform:translateY(-4px)}
.similar h4{font:400 12px var(--sans);color:var(--mute);margin-top:22px;letter-spacing:.1em;text-transform:uppercase}

form.inq label{display:block;font-size:12.5px;color:var(--mute);margin:14px 0 4px}
form.inq input,form.inq textarea,form.inq select{width:100%;font:inherit;background:#fbf8f1;border:1px solid var(--line);border-radius:4px;padding:9px 12px;outline:0}
form.inq input:focus,form.inq textarea:focus,form.inq select:focus{border-color:var(--ink)}
.seg{display:flex;border:1.5px solid var(--ink);border-radius:30px;overflow:hidden;margin:14px 0}
.seg label{flex:1;text-align:center;margin:0!important;padding:8px;cursor:pointer;color:var(--ink)!important;font-size:13.5px!important}
.seg input{display:none}
.seg label:has(input:checked){background:var(--ink);color:var(--paper)!important}
.mini{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.mini div{position:relative;width:62px}
.mini img{width:62px;height:62px;object-fit:cover;border-radius:3px;display:block}
.mini button{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;line-height:18px}
.note{font-size:12px;color:var(--mute);margin-top:12px}

footer{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;max-width:1280px;margin:0 auto;padding:30px 32px 50px;border-top:1px solid var(--ink);font-size:13px;color:var(--mute)}
footer b{font:400 22px var(--serif);color:var(--ink)}
footer p{max-width:460px}
.scale{text-align:right}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);background:var(--ink);color:var(--paper);padding:11px 22px;border-radius:30px;font-size:13.5px;opacity:0;pointer-events:none;transition:.35s;z-index:90;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:860px){
  .top{padding:12px 16px}.top nav{gap:12px}.top nav a{display:none}
  .hero{grid-template-columns:1fr;padding:30px 16px 20px;min-height:0;gap:28px}
  .hero-stack{height:300px;order:-1}
  .catalog{padding:16px 16px 60px}
  .grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}
  footer{padding:24px 16px 40px}.scale{text-align:left}
  .d-body{padding:20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}