:root{
  color-scheme: light;
  --hanji:#F2EEE4; --cell:#E9E4D8; --surface:#FBF9F4; --ink-bg:#2C2A28;
  --line:#D8D0C0; --line-strong:#1B1814;
  --ink:#2C2A28; --muted:#6E665A; --inverse:#F2EEE4;
  --gold:#A07A16; --gold-bright:#E2B419; --red:#8F2A1C; --kakao:#FEE500;
  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --pad:max(24px, env(safe-area-inset-left,0px));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--hanji)}
body{margin:0;background:var(--hanji);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
.wrap{max-width:calc(1440px + 2*var(--pad));margin:0 auto;padding-left:var(--pad);padding-right:max(24px, env(safe-area-inset-right,0px))}
.ic{width:20px;height:20px;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--gold)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.m-only{display:none}

/* ---------- header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--hanji);border-bottom:1px solid var(--line)}
.hdr .wrap{height:88px;display:flex;align-items:center;gap:56px}
.logo{display:block;width:139px;height:40px;background:url(img/logo.png) left center/contain no-repeat;flex:none}
.logo.inv{filter:invert(.94) sepia(.08)}
.gnb{display:flex;gap:40px;flex:1;min-width:0}
.gnb a{font-size:16px;font-weight:500;padding:8px 0;white-space:nowrap;position:relative}
.gnb a[aria-current="true"]{color:var(--gold);font-weight:600}
.gnb a:hover{color:var(--gold)}
.hbtn{width:40px;height:40px;display:grid;place-items:center;flex:none}
.hbtn .ic{width:24px;height:24px}
.mhdr{display:none}

/* ---------- footer ---------- */
.ftr{background:var(--ink-bg);color:var(--inverse);margin-top:0}
.ftr .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:72px;padding-bottom:72px}
.ftr .logo{width:170px;height:49px}
.ftr .tag{display:block;margin-top:16px;font-size:15px;color:var(--gold-bright)}
.ftr .info{font-size:13px;line-height:1.7;text-align:right;color:rgba(242,238,228,.75)}
.ftr nav{display:flex;gap:20px;font-size:14px;margin-top:20px;color:rgba(242,238,228,.85);flex-wrap:wrap}

/* ---------- common ---------- */
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted);padding:32px 0 0}
.crumb a:hover{color:var(--ink)}
.crumb .cur{color:var(--ink)}
.sec{padding:88px 0 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:32px}
.sec-head .t{display:grid;gap:6px}
.sec-head h2{font-size:40px;line-height:1.3}
.sec-head .r{font-size:15px;color:var(--muted)}
.sec-head a.r:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;font-weight:600;font-size:16px;border:1px solid transparent;white-space:nowrap}
.btn-ink{background:var(--ink-bg);color:var(--inverse)}
.btn-line{border-color:var(--line-strong)}
.btn-kakao{background:var(--kakao);color:#191600}
.btn:hover{filter:brightness(.96)}
.toast{position:fixed;left:50%;bottom:calc(32px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink-bg);color:var(--inverse);padding:12px 20px;font-size:14px;z-index:90;max-width:calc(100% - 32px);text-align:center}
.toast[hidden]{display:none}

/* ---------- card ---------- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 4px}
.card{display:grid;gap:14px;align-content:start;min-width:0}
.card .im{position:relative;aspect-ratio:1/1;background:var(--cell);overflow:hidden}
.card .im img{position:absolute;left:8%;top:8%;width:84%;height:84%;object-fit:contain;transition:transform .35s ease}
.card:hover .im img{transform:scale(1.03)}
.badge{position:absolute;left:12px;top:12px;background:var(--ink-bg);color:var(--inverse);font-size:11px;font-weight:600;letter-spacing:.06em;padding:3px 8px}
.card .info{display:grid;gap:4px;padding:0 4px}
.card .nm{font-size:16px;font-weight:500;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .cd{font-size:13px;font-weight:500;color:var(--gold)}
.card .pr{font-size:16px;font-weight:600;margin-top:6px}

/* ---------- home ---------- */
.hero{position:relative;height:min(640px,62vh);min-height:460px;background:#D89A68 url(img/hero_L24.webp) center/cover no-repeat;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,24,10,0) 35%,rgba(40,24,10,.38) 100%)}
.hero .in{position:relative;display:grid;justify-items:center;gap:28px;padding-top:120px}
.hero h1{font-size:48px;line-height:1.3;color:#fff;text-shadow:0 2px 18px rgba(60,30,10,.35)}
.hero .btn{height:48px;border-color:rgba(255,255,255,.9);color:#fff;background:rgba(0,0,0,.08);backdrop-filter:blur(2px)}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.cat{display:grid;gap:14px}
.cat .im{position:relative;aspect-ratio:357/292;background:var(--cell);overflow:hidden}
.cat .im img{position:absolute;left:14%;top:10%;width:72%;height:80%;object-fit:contain;transition:transform .35s}
.cat:hover .im img{transform:scale(1.04)}
.cat b{font-weight:500;font-size:16px;padding:0 4px}
.deities{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.deity{display:grid;gap:12px;justify-items:center}
.deity .im{position:relative;width:100%;aspect-ratio:1/1.07;background:var(--cell);overflow:hidden}
.deity .im img{position:absolute;left:12%;top:10%;width:76%;height:80%;object-fit:contain}
.deity b{font-weight:500;font-size:15px}
.home-end{height:120px}

/* ---------- list ---------- */
.lhead{display:grid;gap:14px;padding:28px 0 36px}
.lhead .tr{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lhead h1{font-size:40px;line-height:1.3}
.lhead .cnt{font-size:14px;font-weight:600;color:var(--gold)}
.lhead .desc{font-size:15px;color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--line);background:var(--surface);font-size:14px;white-space:nowrap}
.chip .n{font-size:12px;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink-bg);border-color:var(--ink-bg);color:var(--inverse)}
.chip[aria-pressed="true"] .n{color:rgba(242,238,228,.7)}
.lbody{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;border-top:1px solid var(--line-strong);padding-top:20px}
.side{display:grid;gap:0;align-content:start}
.fg{border-bottom:1px solid var(--line);padding:12px 0 16px}
.fg>button{display:flex;justify-content:space-between;align-items:center;width:100%;font-weight:600;font-size:15px;padding:6px 0 8px}
.fg>button svg{transition:transform .2s}
.fg[data-closed] >button svg{transform:rotate(180deg)}
.fg[data-closed] .opts{display:none}
.opts{display:grid;gap:4px}
.fopt{display:flex;align-items:center;gap:10px;font-size:14px;padding:4px 0;cursor:pointer}
.fopt input{appearance:none;width:16px;height:16px;border:1px solid #9a9184;background:var(--surface);margin:0;flex:none;display:grid;place-items:center}
.fopt input:checked{background:var(--ink-bg);border-color:var(--ink-bg)}
.fopt input:checked::after{content:"";width:8px;height:4px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.fopt .n{margin-left:auto;font-size:12px;color:var(--muted)}
.fopt.off{opacity:.4}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;min-height:36px}
.toolbar .c{font-size:14px;color:var(--muted)}
.applied{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.applied button{font-size:13px;border:1px solid var(--line);background:var(--surface);padding:4px 10px}
select{font:inherit;font-size:14px;border:0;background:transparent;color:var(--ink);padding:6px 22px 6px 6px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232C2A28' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;cursor:pointer}
.more{display:grid;justify-items:center;gap:12px;padding:56px 0 0}
.more .n{font-size:13px;color:var(--muted)}
.more .btn{width:300px;max-width:100%;height:52px;font-weight:500;background:var(--surface);border-color:var(--line)}
.empty{padding:80px 0;text-align:center;color:var(--muted)}
.mtool{display:none}
.list-end{height:120px}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(27,24,20,.45);z-index:80;display:flex;align-items:flex-end}
.sheet{background:var(--hanji);width:100%;max-height:86vh;overflow:auto;padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px))}
.sheet .grab{display:block;width:40px;height:4px;background:var(--line);margin:0 auto 12px}
.sheet .hd{display:flex;justify-content:space-between;align-items:center;padding:4px 0 8px}
.sheet h3{font-size:20px}
.sheet .chips{margin-top:8px}
.sheet .grp{padding:14px 0;border-bottom:1px solid var(--line)}
.sheet .grp b{font-size:14px}
.sheet .btn{width:100%;margin-top:16px}
.drawer{background:var(--hanji);width:min(320px,86vw);height:100%;margin-left:auto;padding:16px 24px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;overflow:auto}
.drawer .nav{display:grid;margin-top:8px}
.drawer .nav a{font-family:var(--serif);font-size:20px;font-weight:500;padding:14px 0;border-bottom:1px solid var(--line)}
.scrim.side-r{align-items:stretch}

/* search */
.sbox{position:fixed;inset:0;z-index:85;background:rgba(27,24,20,.45);display:flex;justify-content:center;align-items:flex-start}
.sbox .in{background:var(--hanji);width:100%;max-width:760px;margin-top:88px;padding:24px;display:grid;gap:12px;max-height:calc(100vh - 120px);overflow:auto}
.sbox form{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--line-strong);padding:6px 0}
.sbox input{flex:1;border:0;background:transparent;font:inherit;font-size:20px;padding:8px 0;color:var(--ink);outline:none;min-width:0}
.sbox .res{display:grid}
.sbox .res a{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sbox .res .t{position:relative;width:56px;height:56px;background:var(--cell)}
.sbox .res .t img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain}
.sbox .res .cd{font-size:13px;color:var(--gold);font-weight:500}
.sbox .hint{font-size:13px;color:var(--muted)}

/* ---------- detail ---------- */
.dtop{display:grid;grid-template-columns:minmax(0,680px) minmax(0,680px);justify-content:space-between;gap:80px;padding:28px 0 0}
.gal{display:grid;gap:12px;align-content:start;min-width:0}
.gal-main{position:relative;background:var(--cell);aspect-ratio:1/1;overflow:hidden}
.slides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:start}
.slide img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.slide img.fill{inset:0;width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:12px}
.thumbs button{position:relative;width:80px;height:80px;background:var(--cell);border:1px solid transparent;overflow:hidden}
.thumbs button[aria-current="true"]{border-color:var(--line-strong)}
.thumbs img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain}
.dots{display:none}
.dinfo{display:grid;align-content:start;gap:0;min-width:0;padding-top:8px}
.catrow{display:flex;justify-content:space-between;align-items:center;gap:12px}
.catrow .lb{font-size:14px;font-weight:600;color:var(--gold)}
.tools{display:flex;gap:6px}
.tools button{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--line);background:var(--surface);height:32px;padding:0 10px;color:var(--muted)}
.tools button .ic{width:15px;height:15px}
.dinfo h1{font-size:36px;line-height:1.35;margin-top:18px}
.pricerow{display:flex;align-items:baseline;gap:12px;margin-top:10px;flex-wrap:wrap}
.price{font-family:var(--serif);font-size:32px;font-weight:600}
.vat{font-size:14px;color:var(--muted)}
.spec{margin:36px 0 0;border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 4px;border-bottom:1px solid var(--line);font-size:15px}
.spec dt{color:var(--muted)}
.spec dd{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spec .copy{display:inline-grid;place-items:center;width:28px;height:28px;color:var(--muted)}
.spec .copy .ic{width:16px;height:16px}
.sim{display:grid;gap:12px;margin-top:40px}
.sim>b{font-size:15px;font-weight:600}
.other{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:12px 16px}
.other .t{position:relative;width:56px;height:56px;background:var(--cell)}
.other .t img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain}
.other b{font-weight:500;font-size:15px;display:block}
.other span.s{font-size:13px;color:var(--muted)}
.dtabs{display:flex;gap:40px;border-bottom:1px solid var(--line);margin-top:96px}
.dtabs a{padding:16px 0;font-size:16px;color:var(--muted);position:relative}
.dtabs a[aria-selected="true"]{color:var(--ink);font-weight:600}
.dtabs a[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.dpanel{padding-top:48px;display:grid;gap:56px}
.video{display:grid;gap:20px}
.video .hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.video h2{font-size:24px}
.video .hd span{font-size:15px;color:var(--muted)}
.player{position:relative;display:block;aspect-ratio:16/9;max-width:100%;background:var(--ink-bg);overflow:hidden;color:#fff}
.player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .2s}
.player:hover img{opacity:.85}
.player .play{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;padding-left:4px}
.player .cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:15px;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.yt-note{font-size:13px;color:var(--muted)}
.dimgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dimgs.one{grid-template-columns:minmax(0,880px);justify-content:center}
.dimgs img{width:100%;background:var(--cell)}
.dimgs img.pad{aspect-ratio:1/1;object-fit:contain;padding:6%}
.related{padding:120px 0 120px}
.related .sec-head h2{font-size:32px}
.bbar{display:none}

/* ---------- FAQ ---------- */
.ptitle{display:grid;gap:12px;padding:24px 0 56px}
.ptitle h1{font-size:40px;line-height:1.3}
.ptitle p{color:var(--muted)}
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;align-items:center;gap:20px;padding:28px 8px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq .q{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--gold);flex:none}
.faq .qt{display:grid;gap:4px;flex:1}
.faq .qt small{font-size:14px;font-weight:600;color:var(--muted)}
.faq .qt b{font-size:18px;font-weight:600}
.faq summary svg{transition:transform .2s;flex:none}
.faq details:not([open]) summary svg{transform:rotate(180deg)}
.faq .ans{background:var(--surface);padding:48px 64px 56px;display:grid;gap:32px}
.faq .lead{display:flex;gap:16px;align-items:center}
.faq .lead .a{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--gold)}
.faq .ans img{width:100%;max-width:1313px;margin:0 auto}
.faq .ans img.m{display:none}
.cbox{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);padding:32px 40px;margin-top:64px}
.cbox h3{font-size:22px;font-weight:500}
.cbox p{color:var(--muted);margin-top:6px}
.page-end{height:120px}
.cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.cs>div{background:var(--surface);padding:32px;display:grid;gap:8px;align-content:start}
.cs small{font-size:14px;font-weight:600;color:var(--gold)}
.cs b{font-family:var(--serif);font-size:24px;font-weight:600}
.cs span{font-size:14px;color:var(--muted)}

/* ---------- tablet ---------- */
@media (max-width:1200px){
  .hdr .wrap{gap:32px}
  .gnb{gap:24px}
  .gnb a{font-size:15px}
  .dtop{gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .deities{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} .lbody{grid-template-columns:180px minmax(0,1fr)} }

/* ---------- mobile (Figma 375) ---------- */
@media (max-width:900px){
  :root{--pad:max(20px, env(safe-area-inset-left,0px))}
  .wrap{padding-right:max(20px, env(safe-area-inset-right,0px))}
  .m-only{display:revert}
  .d-only{display:none!important}
  .hdr .wrap{display:none}
  .mhdr{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;height:56px;padding:0 max(8px, env(safe-area-inset-left,0px))}
  .mhdr .logo{width:106px;height:30px;justify-self:center;background-position:center}
  .ftr .wrap{flex-direction:column;align-items:flex-start;padding-top:40px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  .ftr .logo{width:140px;height:40px}
  .ftr .info{text-align:left}
  .ftr.has-bar .wrap{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .sec{padding-top:56px}
  .sec-head{margin-bottom:20px}
  .sec-head h2{font-size:28px}
  .sec-head .r{font-size:13px}
  .eyebrow{font-size:13px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 6px}
  .card{gap:10px}
  .card .info{gap:2px;padding:0 2px}
  .card .nm{font-size:14px}
  .card .cd{font-size:12px}
  .card .pr{font-size:14px;margin-top:4px}
  .badge{left:8px;top:8px;font-size:10px;padding:2px 6px}
  .hero{height:auto;min-height:0;aspect-ratio:375/430;background-image:url(img/hero_L24_m.webp)}
  .hero .in{gap:20px;padding-top:150px}
  .hero h1{font-size:30px}
  .hero .btn{height:40px;font-size:14px;padding:0 18px}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 6px}
  .cat{gap:10px}
  .cat b{font-size:14px}
  .deities{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 6px}
  .deity{gap:8px}
  .deity b{font-size:13px}
  .home-end{height:64px}
  .crumb{display:none}
  .lhead{padding:24px 0 16px;gap:8px}
  .lhead h1{font-size:28px}
  .lhead .desc{font-size:14px}
  .lhead .chips{flex-wrap:nowrap;overflow-x:auto;margin:6px calc(-1*var(--pad)) 0;padding:0 var(--pad);scrollbar-width:none}
  .lhead .chips::-webkit-scrollbar{display:none}
  .chip{height:36px;padding:0 14px;font-size:13px}
  .lbody{display:block;border-top:0;padding-top:0}
  .side{display:none}
  .mtool{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);padding:6px 0;margin-bottom:12px}
  .mtool .fbtn{display:inline-flex;align-items:center;gap:6px;font-size:14px;height:36px}
  .mtool .fbtn .n{background:var(--ink-bg);color:var(--inverse);font-size:11px;padding:1px 6px}
  .toolbar{margin-bottom:14px;min-height:0}
  .toolbar .sortd{display:none}
  .more{padding-top:36px}
  .list-end{height:64px}
  .dtop{display:block;padding:0;margin:0 calc(-1*var(--pad))}
  .gal{gap:0}
  .gal-main{aspect-ratio:1/1}
  .thumbs{display:none}
  .dots{display:flex;justify-content:center;gap:6px;position:absolute;left:0;right:0;bottom:12px}
  .dots i{width:6px;height:6px;border-radius:50%;background:rgba(44,42,40,.25)}
  .dots i.on{background:var(--ink-bg)}
  .dinfo{padding:20px var(--pad) 0}
  .dinfo h1{font-size:24px;margin-top:10px}
  .price{font-size:22px}
  .vat{font-size:13px}
  .pricerow{margin-top:6px;gap:8px}
  .spec{margin-top:24px}
  .spec>div{grid-template-columns:88px 1fr;padding:12px 0;font-size:14px}
  .sim{margin-top:28px}
  .dtabs{margin:40px calc(-1*var(--pad)) 0;padding:0 var(--pad);gap:24px}
  .dtabs a{font-size:15px;padding:14px 0}
  .dpanel{padding-top:24px;gap:36px}
  .video{gap:12px}
  .video h2{font-size:20px}
  .player .play{width:56px;height:56px;margin:-28px 0 0 -28px}
  .player .cap{bottom:12px;font-size:13px}
  .video .hd span{font-size:13px}
  .dimgs,.dimgs.one{grid-template-columns:1fr;gap:12px}
  .related{padding:64px 0 48px}
  .related .sec-head h2{font-size:22px}
  .related .grid{display:flex;overflow-x:auto;gap:6px;margin:0 calc(-1*var(--pad));padding:0 var(--pad);scroll-snap-type:x mandatory;scrollbar-width:none}
  .related .grid::-webkit-scrollbar{display:none}
  .related .card{flex:0 0 46%;scroll-snap-align:start}
  .bbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--hanji);border-top:1px solid var(--line);padding:9px max(16px,env(safe-area-inset-right,0px)) calc(9px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .bbar .sq{width:48px;height:56px;border:1px solid var(--line);display:grid;place-items:center;flex:none;background:var(--surface)}
  .bbar .btn{flex:1;height:56px}
  .ptitle{padding:28px 0 28px;gap:8px}
  .ptitle h1{font-size:28px}
  .ptitle p{font-size:14px}
  .faq{margin:0 calc(-1*var(--pad))}
  .faq summary{padding:20px var(--pad);gap:12px}
  .faq .q{font-size:18px}
  .faq .qt b{font-size:16px}
  .faq .qt small{font-size:13px}
  .faq .ans{padding:24px 16px 28px;gap:20px}
  .faq .lead{gap:10px;font-size:14px}
  .faq .lead .a{font-size:18px}
  .faq .ans img.d{display:none}
  .faq .ans img.m{display:block}
  .cbox{flex-direction:column;align-items:stretch;padding:24px 20px;margin-top:40px}
  .cbox h3{font-size:18px}
  .cbox p{font-size:14px}
  .page-end{height:56px}
  .cs{grid-template-columns:1fr;gap:6px}
  .cs>div{padding:24px 20px}
  .sbox .in{margin-top:0;max-height:100vh;height:100%;padding:16px 20px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ======================================================================
   Laravel 적용용 추가 스타일 (sample 원본 이후 추가분)
   ====================================================================== */
/* 필터 링크형 옵션 (서버 쿼리 이동) */

.fopt .bx{width:16px;height:16px;border:1px solid #9a9184;background:var(--surface);flex:none;display:grid;place-items:center}
a.fopt[aria-checked="true"] .bx{background:var(--ink-bg);border-color:var(--ink-bg)}
a.fopt[aria-checked="true"] .bx::after{content:"";width:8px;height:4px;border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
a.fopt:hover{color:var(--gold)}
.fopt.soon{opacity:.45;cursor:default}
.fopt .soon-t,.chip .soon-t{font-size:11px;color:var(--muted);margin-left:auto}
.applied a{font-size:13px;border:1px solid var(--line);background:var(--surface);padding:4px 10px}
.sheet .chip[aria-disabled="true"]{opacity:.45}
.more .btn[aria-busy="true"]{opacity:.6;pointer-events:none}

/* 상세: 툴 버튼(a 태그 포함) */
.tools a{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--line);background:var(--surface);height:32px;padding:0 10px;color:var(--muted)}
.tools a .ic{width:15px;height:15px}
/* 상세: 데스크톱 문의 버튼 */
.dcta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:32px}
.dcta .btn{width:100%}
/* 상세: 유튜브 임베드 */
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dimgs a{display:block}
.dimgs img.pad{background:var(--cell)}
.rel-loading{color:var(--muted);font-size:14px;padding:24px 0}

/* 고객센터: 의뢰 폼 */
.cs-form{margin-top:64px;border-top:1px solid var(--line-strong);padding-top:40px;display:grid;gap:24px}
.cs-form .hd{display:grid;gap:6px}
.cs-form .hd h2{font-size:28px}
.cs-form .hd p{color:var(--muted);font-size:15px}
.cs-form form{display:grid;gap:16px}
.cs-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:grid;gap:8px}
.fld label{font-size:14px;font-weight:600}
.fld input,.fld textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:14px 16px;border-radius:0;outline:none;width:100%}
.fld input:focus,.fld textarea:focus{border-color:var(--line-strong)}
.fld textarea{min-height:180px;resize:vertical}
.dropzone.dz-box{min-height:140px;border:1px dashed #9a9184;background:var(--surface);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:20px;cursor:pointer;color:var(--muted);font-size:14px}
.dropzone.dz-box .dz-message{margin:0;text-align:center}
.dropzone.dz-box .dz-preview{margin:0}
.cs-form .act{display:flex;justify-content:flex-end}
.cs-form .act .btn{min-width:200px}
.cs a.lnk{color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:14px}

@media (max-width:900px){
  .dcta{display:none}
  .cs-form{margin-top:40px;padding-top:28px}
  .cs-form .hd h2{font-size:22px}
  .cs-form .row2{grid-template-columns:1fr}
  .cs-form .act .btn{width:100%}
}

[hidden]{display:none!important}

/* 상세 갤러리: 썸네일이 많을 때 갤러리가 오른쪽 정보 영역을 덮는 문제 수정
   - .gal 내부 그리드 트랙을 부모 폭으로 고정
   - 썸네일은 한 줄 가로 스크롤 */
.gal{grid-template-columns:minmax(0,1fr)}
.gal-main{width:100%;min-width:0}
.thumbs{min-width:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
.thumbs button{flex:0 0 80px}

/* 상세 상단 툴 버튼: 버튼(문자 포함)이 많을 때 글자가 두 줄로 깨지는 문제 수정
   - 버튼 텍스트 줄바꿈 금지, 버튼 영역은 줄어들지 않게
   - 공간이 부족하면 분류 라벨 아래로 버튼 줄이 내려감 */
.catrow{flex-wrap:wrap;row-gap:10px}
.catrow .lb{min-width:0}
.tools{flex:none;margin-left:auto}
.tools a,.tools button{white-space:nowrap;flex:none}
@media (max-width:900px){
  .tools a,.tools button{padding:0 8px;gap:4px}
}

/* NEW 뱃지가 상품 이미지(배경 있는 이미지 등)에 가려지는 문제 수정 */
.card .im .badge{z-index:2}