:root{--bg:#f6f6f3;--surface:#fff;--ink:#0b0b0c;--ink2:#35363a;--muted:#6d7077;--line:#e3e3de;--line2:#cfcfc8;--signal:#ff5f00;
--ok:#0b8a5a;--ok-bg:#e5f5ec;--no:#8a8d94;--plate:#f0f0ec;--night:#0b0b0c;--r:12px;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
@media(prefers-color-scheme:dark){:root{--bg:#0b0b0c;--surface:#131315;--ink:#f4f4f5;--ink2:#cfd0d4;--muted:#9a9da5;--line:#232327;--line2:#35353b;--ok:#3ddc9b;--ok-bg:#0f2a21;--plate:#1b1b1f;--night:#000}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
-webkit-text-size-adjust:100%;letter-spacing:-.012em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:inherit}.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:6px}
.mono,.eb,.tag,.chip,.pill small,.tile .n,.tile span,.pager a,.pager span,.crumb,.tl time,.hsearch kbd{font-family:var(--mono)}
/* 상단 띠 (어두운 면 1) */
.tick{background:var(--night);color:#eee;height:34px;overflow:hidden;display:flex;align-items:center;font:500 12px var(--mono)}
.tick .track{display:flex;width:max-content;animation:mq 50s linear infinite}.tick .set{display:flex;gap:28px;padding-right:28px;white-space:nowrap}
.tick b{color:#3ddc9b;font-weight:600}.tick i{font-style:normal;color:#55555c}.tick:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tick .track,.marquee .track{animation:none}.tick .set[aria-hidden],.marquee .set[aria-hidden]{display:none}html{scroll-behavior:auto}}
/* 헤더 */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:auto minmax(220px,440px) 1fr;align-items:center;gap:24px;height:60px}
.logo{white-space:nowrap;display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;text-decoration:none;letter-spacing:-.04em}
.logo i{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--ink);color:var(--bg);font-style:normal;font-size:14px}
.hsearch{position:relative}.hsearch input{width:100%;height:38px;padding:0 44px 0 38px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.hsearch input::placeholder{color:var(--muted)}.hsearch input:focus{outline:0;border-color:var(--ink)}
.hsearch svg{position:absolute;left:13px;top:11px;color:var(--muted);pointer-events:none}
.hsearch kbd{position:absolute;right:9px;top:8px;font-size:11px;line-height:1;padding:5px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);background:var(--bg)}
.hsearch button{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav{display:flex;gap:4px;justify-content:flex-end}.nav a{padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--ink)}.nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--bg);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}.btn.pri{background:var(--signal);border-color:var(--signal);color:#190800}.btn.dk{background:transparent;color:var(--ink);border-color:var(--line2)}
/* 히어로: 밝은 에디토리얼 */
.hero{padding:56px 0 0}.hero-in{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:end}
.live{display:inline-flex;align-items:center;gap:9px;margin-bottom:28px;font:500 12.5px var(--mono);color:var(--ink2);letter-spacing:.01em}
.live b{width:8px;height:8px;border-radius:50%;background:var(--signal);animation:pu 2s infinite}
@keyframes pu{0%{box-shadow:0 0 0 0 rgba(255,95,0,.5)}70%{box-shadow:0 0 0 9px rgba(255,95,0,0)}100%{box-shadow:0 0 0 0 rgba(255,95,0,0)}}
@media(prefers-reduced-motion:reduce){.live b,.bell i:before,.bell i:after{animation:none}}
.hero h1{margin:0 0 24px;font-size:clamp(40px,6.6vw,84px);line-height:1.04;letter-spacing:-.065em;font-weight:800}
.hero h1 em{font-style:normal;box-shadow:inset 0 -.28em 0 color-mix(in srgb,var(--signal) 38%,transparent)}
.hero p{margin:0 0 32px;color:var(--muted);max-width:520px;font-size:17px;line-height:1.7}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.feed{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.feed h3{margin:0;padding:14px 18px;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.feed h3 .live{margin:0;font-size:0}.feed h3 .live b{display:inline-block}
.fr{display:flex;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}.feed h3+.fr{border-top:0}
.fr img{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--plate);flex:none;border:1px solid var(--line)}.fr .tx{min-width:0;flex:1}
.fr .tx b{display:block;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fr .tx small{color:var(--muted);font-size:12.5px}
.fr .tg{flex:none;font:600 11px var(--mono);padding:4px 8px;border-radius:6px;background:var(--ok-bg);color:var(--ok)}.fr .tg.so{background:var(--plate);color:var(--muted)}
.bell{display:grid;place-items:center;padding:44px 16px;text-align:center;color:var(--muted);font-size:14px}
.bell i{position:relative;display:grid;place-items:center;width:56px;height:56px;margin-bottom:14px;border-radius:50%;background:var(--plate);font-style:normal;font-size:24px}
.bell i:before,.bell i:after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--signal);opacity:0;animation:rp 2.6s infinite}.bell i:after{animation-delay:1.3s}
@keyframes rp{from{transform:scale(1);opacity:.8}to{transform:scale(1.8);opacity:0}}
.hstats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--ink)}
.hstats div{padding:22px 24px 0 0}.hstats div+div{padding-left:24px;border-left:1px solid var(--line)}
.hstats b{display:block;font:700 40px/1 var(--mono);letter-spacing:-.06em}.hstats span{display:block;margin-top:8px;font-size:13px;color:var(--muted)}.hstats .hi b{color:var(--ok)}
/* 카테고리 티커(칩) */
.marquee{overflow:hidden;margin:40px 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.marquee .track{display:flex;width:max-content;animation:mq 70s linear infinite}.marquee .set{display:flex;gap:8px;padding-right:8px}
.marquee:hover .track,.marquee:focus-within .track,.marquee.paused .track{animation-play-state:paused}
.pill{display:inline-flex;gap:8px;align-items:center;height:36px;padding:0 15px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.pill small{color:var(--muted);font-size:12px}.pill:hover{border-color:var(--ink)}.pill[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.pill[aria-current=page] small{color:var(--bg);opacity:.65}
.notice{margin:20px 0 0;padding:14px 18px;border-radius:var(--r);background:var(--ok-bg);color:var(--ok);font-weight:600;font-size:14px}
/* 섹션 */
.sec{margin:96px 0 28px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.sec h2{margin:0;font-size:clamp(28px,4.2vw,40px);line-height:1.1;letter-spacing:-.055em;font-weight:800}
.sec h2[data-eb]:before{content:attr(data-eb);display:block;margin-bottom:12px;font:600 11.5px var(--mono);letter-spacing:.14em;color:var(--signal)}
.sec small{align-self:flex-end;margin-bottom:5px;padding:1px 9px;border:1px solid var(--line2);border-radius:999px;font:600 12px var(--mono);color:var(--ink2)}
.sec a{margin-left:auto;margin-bottom:4px;font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--ink);line-height:1.3}
/* 상품 카드 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:24px 16px}.grid>*{min-width:0}
.card{content-visibility:auto;contain-intrinsic-size:auto 360px;position:relative;display:flex;flex-direction:column;background:transparent}
.ph{position:relative;aspect-ratio:1/1;background:var(--plate);border-radius:var(--r);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:contain;display:block;padding:14px;mix-blend-mode:multiply;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
@media(prefers-color-scheme:dark){.ph img{mix-blend-mode:normal;background:#fff}}
.card:hover .ph img{transform:scale(1.06)}.card.out .ph img{filter:grayscale(1);opacity:.5}
.card.in .ph{box-shadow:inset 0 0 0 2px var(--ok)}
.badges{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:1}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;font-size:11px;font-weight:600;background:var(--surface);color:var(--muted)}
.chip.in{background:var(--ok);color:#fff}.chip.new{background:var(--signal);color:#190800}
.fav{position:absolute;right:10px;top:10px;z-index:1;width:30px;height:30px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);font-size:15px;cursor:pointer;line-height:1}.fav.on{background:var(--signal);color:#190800}
.bd{display:flex;flex-direction:column;gap:4px;padding:14px 2px 0;flex:1}
.nm{font-weight:600;line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.84em;font-size:14.5px;letter-spacing:-.025em}
.pr{font:700 18px/1.25 var(--mono);letter-spacing:-.05em;margin-top:2px}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.tag{display:inline-block;padding:0 7px;border:1px solid var(--line2);border-radius:5px;font-size:11px;line-height:1.7;color:var(--muted)}
.mt{font-size:12px;color:var(--muted);margin-top:2px}
.go{padding-top:14px;margin-top:auto}.go a{display:flex;justify-content:center;align-items:center;height:40px;border-radius:var(--r);font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid var(--line2)}
.go a:hover{border-color:var(--ink)}.card.in .go a{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.empty{padding:48px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:var(--r)}
.hide{display:none!important}
/* 카테고리 타일: 큰 숫자가 시각 요소 */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tile{display:flex;flex-direction:column;gap:2px;padding:22px 20px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);text-decoration:none;transition:background .15s}
.tile:hover{background:var(--ink);color:var(--bg)}.tile:hover span,.tile:hover em{color:var(--bg);opacity:.75}
.tile .n{font-size:38px;line-height:1;font-weight:700;letter-spacing:-.07em;margin-bottom:28px}.tile b{font-size:15px;font-weight:650;letter-spacing:-.03em}
.tile span{font-size:11.5px;color:var(--muted)}.tile em{font-style:normal;color:var(--ok);font-weight:700}
/* 쪽 이동 */
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:48px 0 4px}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r);font-size:13px;font-weight:600;text-decoration:none}
.pager a:hover{border-color:var(--ink)}.pager span[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--bg)}.pager span.gap{border:0}
.more{display:block;margin:32px auto 0;height:46px;padding:0 26px;border:1px solid var(--ink);border-radius:var(--r);background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
/* 페이지 머리 */
.pg{padding:56px 0 8px}.pg h1{margin:0 0 14px;font-size:clamp(36px,6vw,64px);line-height:1.04;letter-spacing:-.065em;font-weight:800}
.pg p{margin:0;color:var(--muted);font-size:16px}
.crumb{font-size:12px;color:var(--muted);margin-bottom:20px}.crumb a{text-decoration:none}.crumb a:hover{color:var(--ink)}
.search{display:flex;gap:8px;margin:24px 0 4px}.search input{flex:1;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line2);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:16px}.search input:focus{outline:0;border-color:var(--ink)}
/* 타임라인 */
.tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.tl li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.tl .dot{flex:none;width:9px;height:9px;margin-top:8px;border-radius:50%;background:var(--line2)}.tl li[data-kind=restock] .dot{background:var(--signal);box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 20%,transparent)}
.tl .tx{flex:1;min-width:0}.tl .tx a{text-decoration:none;font-weight:650}.tl .tx a:hover{text-decoration:underline}.tl .tx small{display:block;color:var(--muted)}
.tl time{flex:none;font-size:12px;color:var(--muted)}.tl li.fresh{background:linear-gradient(90deg,color-mix(in srgb,var(--signal) 8%,transparent),transparent)}
/* 안내 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.step{padding:32px 32px 28px 0}.step+.step{padding-left:32px;border-left:1px solid var(--line)}
.step b{display:block;margin-bottom:56px;font:700 13px var(--mono);color:var(--signal);letter-spacing:.1em}
.step h3{margin:0 0 10px;font-size:22px;letter-spacing:-.05em;font-weight:800}.step p{margin:0;color:var(--muted);font-size:15px}
details.q{border-bottom:1px solid var(--line);padding:20px 0}details.q:first-of-type{border-top:1px solid var(--ink)}
details.q summary{cursor:pointer;font-weight:650;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px}
details.q summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--muted)}details.q[open] summary::after{content:"–"}
details.q p{margin:12px 0 0;color:var(--muted);max-width:640px}
details.recent{margin:20px 0;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;font-size:14px}details.recent li{margin:6px 0}details.recent a{text-decoration:underline}
/* 하단 배너 (어두운 면 2) */
.band{margin:96px 0 0;padding:56px;border-radius:var(--r);color:#fff;display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--night)}
.band h3{margin:0 0 8px;font-size:clamp(24px,3.8vw,36px);letter-spacing:-.055em;font-weight:800;line-height:1.15}.band p{margin:0;color:#a3a6ae}
.band .btn{background:#fff;color:#0b0b0c;border-color:#fff}.band .btn.pri{background:var(--signal);border-color:var(--signal);color:#190800}
.wm{font-weight:900;font-size:clamp(56px,17.4vw,236px);line-height:.78;letter-spacing:-.075em;text-align:center;color:transparent;-webkit-text-stroke:1.5px var(--line2);user-select:none;margin:112px 0 0;overflow:hidden;white-space:nowrap}
footer{padding:28px 0 40px;border-top:1px solid var(--ink);margin-top:0;color:var(--muted);font-size:12.5px;line-height:1.8}
footer nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px;font-size:14px;font-weight:500}footer nav a{color:var(--ink);text-decoration:none}footer nav a:hover{text-decoration:underline}
/* 한글이 들어가는 요소는 본문 글꼴 유지(고정폭 대체 글꼴에서 글자 간격이 벌어지는 문제 방지). 숫자·영문 라벨만 mono */
.tick,.live,.feed h3,.fr .tg,.chip,.tag,.sec small,.tile span,.crumb,.tl time,.pr,.hsearch kbd{font-family:inherit}
.pr{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.tick,.sec small,.tile span,.chip,.tag,.fr .tg,.crumb,.tl time,.live{font-variant-numeric:tabular-nums}
.feed h3{text-transform:none;letter-spacing:.02em;font-size:12.5px;font-weight:600}
.hsearch kbd{font-family:var(--mono)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.reveal.in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}.hero{padding-top:36px}.steps{grid-template-columns:1fr}.step,.step+.step{padding:24px 0;border-left:0;border-top:1px solid var(--line)}.step b{margin-bottom:20px}}
@media(max-width:700px){.wrap{padding:0 18px}.top .wrap{grid-template-columns:1fr auto;gap:8px;height:auto;padding-top:10px;padding-bottom:10px}.hsearch{grid-column:1/-1;order:3}.hsearch kbd{display:none}
.nav a:nth-child(2),.nav a:nth-child(4){display:none}.hstats{grid-template-columns:repeat(2,1fr);margin-top:40px}.hstats div:nth-child(3){padding-left:0;border-left:0}.hstats div{padding-bottom:20px}.hstats b{font-size:30px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}.pr{font-size:16px}.sec{margin-top:64px}.band{padding:32px 24px;margin-top:64px}.pg{padding-top:36px}.tiles{grid-template-columns:repeat(2,1fr)}.wm{margin-top:72px}}
/* ---- 홈 검색 히어로 ---- */
body[data-home] .top .hsearch{display:none}
.hero.sx{padding:64px 0 0;text-align:center}
.hero.sx .live{margin-bottom:22px}
.hero.sx h1{font-size:clamp(34px,5.6vw,68px);margin:0 auto 14px;max-width:14em;line-height:1.08}
.hero.sx .sub{margin:0 auto 30px;color:var(--muted);font-size:17px;line-height:1.6;max-width:560px}
.bigq{position:relative;max-width:760px;margin:0 auto;background:var(--surface);border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.bigq:focus-within{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--signal);border-color:var(--ink)}
.bigq svg{position:absolute;left:24px;top:50%;margin-top:-12px;color:var(--ink);pointer-events:none}
.bigq input{width:100%;height:72px;padding:0 140px 0 62px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:20px;font-weight:600;border-radius:20px;letter-spacing:-.03em}
.bigq input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}.bigq input::placeholder{color:var(--muted);font-weight:500}.bigq input:focus{outline:0}
.bigq button{position:absolute;right:10px;top:10px;height:52px;padding:0 26px;border:0;border-radius:12px;background:var(--signal);color:#190800;font:inherit;font-weight:800;font-size:16px;cursor:pointer}
.bigq button:hover{filter:brightness(1.06)}
.qchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:760px;margin:22px auto 0}
.qchips a,.qchips button{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.qchips a:hover,.qchips button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.qchips .lab{border:0;padding:8px 2px;color:var(--muted);font-weight:500;cursor:default}
.qchips .lab:hover{background:none;color:var(--muted)}
#hres{max-width:1180px;margin:34px auto 0;text-align:left}
#hres .rh{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font-size:15px;color:var(--muted)}#hres .rh b{color:var(--ink);font-size:20px;letter-spacing:-.04em}
#hres .rh a{margin-left:auto;font-weight:700;color:var(--ink)}
.hero.sx .hstats{text-align:left}
@media(max-width:700px){.hero.sx{padding-top:36px}.hero.sx .sub{font-size:15px;margin-bottom:22px}.bigq{border-radius:16px;box-shadow:4px 4px 0 var(--ink)}.bigq input{height:60px;font-size:16px;padding:0 96px 0 48px;border-radius:16px}.bigq svg{left:16px}.bigq button{height:44px;padding:0 16px;top:8px;right:8px;font-size:14px}.qchips{gap:6px}.qchips a,.qchips button{padding:7px 12px;font-size:13px}}