:root{--ink:#111;--bg:#fff;--gray:#f5f5f5;--line:#e5e5e5;--mute:#707072;--w:1440px;--pad:48px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}button{font-family:inherit}
h1,h2,h3{text-wrap:balance}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
img{max-width:100%}
/* 헤더 */
.util{background:var(--gray);font-size:12px;font-weight:500}
.util .in{max-width:var(--w);margin:0 auto;padding:7px var(--pad);display:flex;justify-content:flex-end;gap:14px;color:var(--ink)}
.hd{background:#fff;position:sticky;top:0;z-index:5}
.hd-main{display:grid;grid-template-columns:112px minmax(0,1fr) 190px;align-items:center;gap:24px;max-width:var(--w);margin:0 auto;min-height:64px;padding:8px var(--pad)}
.logo{text-decoration:none;white-space:nowrap;display:inline-block;line-height:1;justify-self:start}
.logo .l1{display:block;font-size:30px;font-weight:900;letter-spacing:-.03em}
.logo .l2{display:block;margin-top:5px;font-size:10px;font-weight:700;letter-spacing:.015em;text-align:justify;text-align-last:justify;text-justify:inter-character}
.gnb{display:flex;gap:2px;justify-content:flex-start;overflow-x:auto;min-width:0;scrollbar-width:thin}
.gnb a,.gnb button{border:0;background:none;padding:8px 10px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;cursor:pointer;border-radius:30px;white-space:nowrap}
.gnb a:hover,.gnb button:hover{background:var(--gray)}.gnb .on{box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
.sf{justify-self:end;display:flex;align-items:center;background:#fff;border:1px solid #b8b8b8;border-radius:0;width:100%;max-width:260px;padding:0 4px 0 12px}
.sf input{flex:1;border:0;background:transparent;padding:10px 4px;font:inherit;font-size:14px;outline:none;min-width:0}
.sf button{border:0;background:none;padding:8px;display:flex;align-items:center;cursor:pointer}.sf svg{width:19px;height:19px}.sf:focus-within{border-color:var(--ink)}.sf input::placeholder{color:#666}
/* 본문 */
main{flex:1;width:100%}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:20px var(--pad) 0;max-width:var(--w);margin:0 auto}
.tile{position:relative;display:block;background:var(--gray);aspect-ratio:1/1.02;overflow:hidden;text-decoration:none}
.tile img{position:absolute;inset:6% 8% 30%;width:84%;height:64%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s}
.tile:hover img{transform:scale(1.04)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 30px;background:transparent}
.tile h2{margin:0;font-size:clamp(22px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.tile p{margin:6px 0 14px;font-size:14px;color:#3a3a3a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{display:inline-block;background:var(--ink);color:#fff;border-radius:30px;padding:9px 22px;font-size:14px;font-weight:500}
.title{max-width:var(--w);margin:0 auto;padding:56px var(--pad) 8px}
.title h1,.title h2{margin:0;font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.03em}
.title p{margin:6px 0 0;color:var(--mute);font-size:15px}
.body>section{min-width:0}
.body{max-width:var(--w);margin:0 auto;padding:20px var(--pad) 72px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px}
.side h3{margin:0;font-size:21px;font-weight:900;letter-spacing:-.02em}.side>p{margin:2px 0 16px;font-size:13px;color:var(--mute)}
.side button{display:flex;justify-content:space-between;width:100%;border:0;background:none;padding:7px 0;font-size:15px;color:var(--ink);cursor:pointer;text-align:left}
.side button:hover{color:var(--mute)}.card[hidden]{display:none}.side a{display:flex;justify-content:space-between;width:100%;padding:7px 0;font-size:15px;color:var(--ink);text-decoration:none}.side a:hover{color:var(--mute)}.side .on span{font-weight:700;text-decoration:underline;text-underline-offset:4px}.side em{font-style:normal;color:var(--mute);font-size:13px}
.bar{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 16px;font-size:16px;font-weight:500}.bar span:first-child{min-width:0;overflow-wrap:anywhere}.bar span+span{flex-shrink:0;color:var(--mute);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 12px}
.card{display:block;min-width:0;text-decoration:none}
.frame{background:var(--gray);aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.frame img{width:88%;height:88%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s}
.card:hover .frame img{transform:scale(1.05)}
.brand{margin:12px 0 0;font-size:15px;font-weight:500}
.name{font-size:15px;line-height:1.5;height:3em;overflow:hidden;color:var(--mute)}
.tag{font-size:14px;margin-top:4px;min-height:1.4em}
.btn{display:none}
.trending{max-width:var(--w);margin:0 auto;padding:76px var(--pad) 0}
.section-heading h2{font-size:clamp(28px,3.4vw,44px);line-height:1.15;font-weight:900;letter-spacing:-.03em;margin:0}
.section-heading p{color:var(--mute);margin:10px 0 24px;font-size:15px}
.trend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.trend-card h3{font-size:18px;line-height:1.4;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;margin:16px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-wrap:nowrap}
.trend-card .brand{color:var(--mute);font-size:13px;margin-top:5px}.trending .frame{aspect-ratio:1/1.08}
.empty{padding:60px 0;text-align:center;color:var(--mute)}
/* 상세 */
.crumb{max-width:var(--w);margin:0 auto;padding:20px var(--pad) 0;font-size:13px;color:var(--mute)}.crumb a{text-decoration:none}.crumb a:hover{color:var(--ink)}
.detail{max-width:var(--w);margin:0 auto;padding:20px var(--pad) 56px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:start}
.detail .frame{aspect-ratio:1}.detail h1{font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.35;letter-spacing:-.02em;margin:4px 0 14px}.detail .brand{margin:0;color:var(--mute)}
.facts{list-style:none;margin:20px 0;padding:0;border-top:1px solid var(--line)}
.facts li{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}.facts b{display:inline-block;width:92px;font-weight:500;color:var(--mute)}
.order{display:block;margin-top:24px;padding:18px 8px;text-align:center;background:var(--ink);color:#fff;text-decoration:none;font-size:16px;font-weight:500;border-radius:40px;transition:background .2s}
.order:hover{background:#4a4a4a}.soldout{background:#cacacb;cursor:default}.soldout:hover{background:#cacacb}
.note{font-size:13px;color:var(--mute);margin-top:14px;line-height:1.8}
.coupang-note{margin-top:12px;margin-bottom:0}.coupang-note b{font-weight:600;color:var(--ink)}.coupang-note+.note{margin-top:6px}
.more{max-width:var(--w);margin:0 auto;padding:0 var(--pad) 56px}.more .section-heading h2{font-size:clamp(26px,3vw,36px)}
/* 푸터 */
.ft{background:#111;color:#aaa;font-size:13px;line-height:1.9;margin-top:auto}
.ft .in{max-width:var(--w);margin:0 auto;padding:48px var(--pad) 48px;display:grid;grid-template-columns:1fr 1fr;gap:24px 56px}
.ft b{color:#fff;font-weight:600}.ft p{margin:0}.ft .full{grid-column:1/-1;border-top:1px solid #2b2b2b;padding-top:20px}
.ft .coupang{color:#fff;margin-bottom:6px}
@media(max-width:1000px){:root{--pad:24px}.hd-main{grid-template-columns:100px minmax(0,1fr);gap:8px 20px}.gnb{grid-column:1/-1;order:3;padding-bottom:4px}.sf{max-width:260px}.body{grid-template-columns:minmax(0,1fr);gap:24px}.side{min-width:0}.side>p{margin-bottom:12px}#side{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px}.side button{width:auto;flex-shrink:0;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);border-radius:24px}.side button.on{border-color:var(--ink)}.side a{width:auto;flex-shrink:0;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line);border-radius:24px}.side a.on{border-color:var(--ink)}.detail{gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.facts b{display:block;width:auto}.tile .cap{padding:20px}.tile{aspect-ratio:1/1.15}.tile img{inset:5% 8% 37%;height:58%}.title{padding-top:44px}.trending{padding-top:56px}.trend-card h3{font-size:16px}.ft .in{grid-template-columns:1fr}}
@media(max-width:560px){:root{--pad:16px}.util .in{justify-content:center;font-size:11px}.hd-main{gap:8px 16px}.sf{max-width:190px}.sf input{padding:8px 2px}.gnb a,.gnb button{font-size:13px;padding:6px 10px}.hero{grid-template-columns:1fr;gap:12px}.tile{aspect-ratio:1/1.04}.tile img{inset:6% 8% 26%;height:68%}.tile .cap{padding:18px}.tile h2{font-size:28px}.tile p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}.trending{padding-top:44px}.trend-grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.trend-card{flex:0 0 82%;scroll-snap-align:start}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 8px}.title{padding-top:36px}.body{padding-top:16px;padding-bottom:48px}.detail{grid-template-columns:1fr;gap:24px;padding-bottom:40px}.name{font-size:13px;overflow-wrap:anywhere}.brand{font-size:14px}.bar{font-size:14px;gap:12px}.bar span:first-child{min-width:0;overflow-wrap:anywhere}.bar span+span{flex-shrink:0;font-size:12px}.ft .in{padding-top:36px;padding-bottom:32px}.facts b{display:inline-block;width:92px}}
@media(prefers-reduced-motion:reduce){.tile img,.frame img,.order{transition:none}}
.dp{max-width:var(--w);margin:0 auto;padding:0 var(--pad) 64px;word-break:keep-all}
.dp .sc{padding:72px clamp(36px,8vw,120px);border-top:1px solid var(--line)}
.dp .paper{background:#f5f5f5}.dp .dark{background:#111;color:#f1f1f1;border-top-color:#111}
.dp .num{font-size:clamp(24px,3.2vw,40px);line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-weight:900;overflow-wrap:anywhere}.dp .dark .num{color:#fff}
.dp h2{font-weight:800;font-size:clamp(26px,3.6vw,44px);line-height:1.4;letter-spacing:-.02em;margin:12px 0 0}
.dp .body{display:block;max-width:65ch;margin:18px 0 0;padding:0;font-size:16.5px;line-height:1.85;color:#444}.dp .dark .body{color:#cfcfcf}
.dp .lines{margin-top:22px;border-top:1px solid var(--line)}
.dp .lines p{margin:0;padding:18px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.6}
.dp .lines b{font-weight:400;color:var(--mute);font-size:11px;letter-spacing:.14em;margin-right:14px}
.dp .nums{display:flex;margin-top:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dp .nums div{flex:1;padding:22px 0 22px 16px;border-left:1px solid var(--line)}.dp .nums div:first-child{border-left:0;padding-left:0}
.dp .nums b{display:block;font-weight:800;font-size:clamp(28px,4vw,44px);line-height:1}.dp .nums small{font-size:13px;margin-left:2px}
.dp .nums span{display:block;margin-top:8px;font-size:11.5px;color:var(--mute);line-height:1.4}
.dp .ph{margin-top:24px}.dp .ph img{width:100%;display:block}
.dp .dl{margin:22px 0 0;border-top:1px solid var(--line)}.dp .dark .dl{border-top-color:#3a3a3a}
.dp .dl div{display:flex;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}.dp .dark .dl div{border-bottom-color:#3a3a3a}
.dp .dl dt{width:110px;flex:none;color:var(--mute)}.dp .dark .dl dt{color:#9a9a9a}.dp .dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dp .qa h3{margin:24px 0 6px;font-size:16.5px;font-weight:600}.dp .qa p{margin:0;font-size:15px;line-height:1.8;color:#444}
.dp .src{margin-top:18px;font-size:11.5px;color:var(--mute);line-height:1.8}.dp .src a{color:var(--mute)}
.dp .cta{text-align:center}.dp .cta .order{margin-top:24px;background:#fff;color:#111}.dp .cta .order:hover{background:#ddd}.dp .cta .note{color:#aaa}.dp .cta .coupang-note b{color:#fff}.dp .cta .order{max-width:480px;margin-left:auto;margin-right:auto}.dp .cta .note{max-width:65ch;margin-left:auto;margin-right:auto}
@media(max-width:1000px){.dp .sc{padding:52px 32px}}
@media(max-width:560px){.dp{padding:0 0 28px}.dp .sc{padding:40px 20px}.dp .nums{flex-wrap:wrap}.dp .nums div{padding-left:10px;min-width:0}.dp .nums b{overflow-wrap:anywhere}.dp .dl dt{width:80px}.dp h2{overflow-wrap:anywhere}}
.bstrip{max-width:var(--w);margin:0 auto;padding:18px var(--pad) 0}
/* 한 줄 6칸(넓은 화면)·5칸(중간)·3칸(좁은 화면). 칸 크기는 모두 같고, 로고는 칸 안에 맞춰 들어간다(contain). */
.bcat{margin:0 0 22px}.bc-title{margin:0 0 8px;font-size:15px;font-weight:800;letter-spacing:.02em}.bc-title em{font-style:normal;font-weight:500;color:var(--mute);font-size:12.5px;margin-left:8px}
.bs-in ul{list-style:none;margin:0;padding:1px 0 0 1px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.bs-in li{border:1px solid var(--line);margin:-1px 0 0 -1px}
.bs-in a{display:flex;align-items:center;justify-content:center;height:92px;padding:0 24px;text-decoration:none;color:var(--ink);opacity:.82;transition:opacity .2s,background .2s}
.bs-in a:hover,.bs-in a:focus-visible{opacity:1;background:var(--gray)}
.bs-in img[src*='.png'],.bs-in img[src*='.jpg']{filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply}
.bs-in img{display:block;width:auto;height:auto;max-width:132px;max-height:40px;object-fit:contain}
.bs-text{display:block;width:100%;text-align:center;font-size:18px;font-weight:800;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1100px){.bs-in ul{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:820px){.bs-in ul{grid-template-columns:repeat(3,minmax(0,1fr))}.bs-in a{height:88px;padding:0 14px}.bs-in img{max-height:38px;max-width:104px}.bs-text{font-size:15px}}