/* 체리엘루 — 밝은 화면. 흰 바탕 · 둥근 카드 · 포인트 컬러 하나(--point)만 바꾸면 띠·버튼·푸터가 같이 바뀐다 */
:root{
  color-scheme:light;
  /* 연한 핑크(2026-10-23 사장님: 「핫핑크는 눈이 아프다」). 연한 바탕 위 글씨는 흰색이 안 읽혀서 진한 자두색(--point-ink).
     흰 바탕 위에 핑크 글씨·아이콘을 쓸 땐 --point-deep (흰 바탕 대비 5:1) — 연한 핑크 글씨는 안 보인다 */
  --point:#F4B4C6; --point-ink:#3A1F2A; --point-deep:#B8466F;
  --bg:#FFFFFF; --soft:#F3F3F3; --soft2:#F7F7F7; --tint:#FDF1F5; --gray-bg:#F1F1F1;
  --ink:#000000; --muted:#6F6F6F; --line:#E6E6E6; --sale:#C8102E; --star:#F5A623;
  --ok:#2E6B4A; --ok-soft:#E6F2EB; --warn:#8A5A00; --warn-soft:#FBF1DC; --err:#C8102E; --err-soft:#FCE9EC;
  --r:20px;
  --latin:"Outfit","Pretendard Variable","Pretendard",system-ui,sans-serif;
  --body:"Pretendard Variable","Pretendard","Outfit","Apple SD Gothic Neo",system-ui,sans-serif; /* 가변·조각판 글꼴 (views.js 머리) — 굵기 하나에 750KB 씩 받던 static 판에서 바꿈 */
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{background:var(--bg);color:var(--ink);font:400 14px/1.6 var(--body);letter-spacing:-.02em;margin:0}
a{color:inherit}
img{max-width:100%;display:block;height:auto} /* width·height 속성(자리 잡기)이 있어도 비율 유지 */
button{font:inherit;color:inherit}
.wrap{max-width:1440px;margin:0 auto;padding-inline:20px}
.narrow{max-width:960px}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.num,.code{font-variant-numeric:tabular-nums}
.empty{color:var(--muted);text-align:center;padding:60px 0}
:focus-visible{outline:2px solid var(--point-deep);outline-offset:2px}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico.big{width:56px;height:56px;color:var(--point-deep);stroke-width:1.4}
.arr{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.req{color:var(--sale);font-style:normal;margin-left:2px}
.stars{color:var(--star);letter-spacing:1px;font-size:13px}
.stars i{color:#DDD;font-style:normal}

/* ── 띠 · 머리 ── */
.notice{background:var(--point);color:var(--point-ink);text-align:center;font-size:13px;font-weight:500;padding:6px 16px}
.top{position:sticky;top:0;z-index:20;background:var(--bg)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:16px;max-width:1480px}
.logo{font:700 2.1rem/1 var(--latin);letter-spacing:-.04em;text-decoration:none;display:inline-block;transform:scaleY(1.12)}
.logo.sm{font-size:1.3rem;transform:none}
.nav{display:flex;gap:30px;font:500 15px var(--latin);letter-spacing:0;align-items:center}
.nav.right{justify-content:flex-end}
.nav a{text-decoration:none}
.nav a:hover{opacity:.6}
.nav sup{font-size:9px;margin-left:1px}
.dd{position:relative}
.dd-menu{position:absolute;top:100%;left:-16px;min-width:180px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.1);padding:10px 0;display:none;z-index:30}
.nav.right .dd-menu{left:auto;right:-16px}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd-menu a{display:block;padding:7px 20px;font-size:14px;white-space:nowrap}

.btn{font:600 14px var(--latin);border-radius:8px;padding:12px 22px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block;line-height:1.3;text-align:center}
.btn.primary{background:var(--point);border-color:var(--point);color:var(--point-ink)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:6px;white-space:nowrap}
.btn:hover{opacity:.85}
.btn.wide{display:block;width:100%;padding:15px;font-size:15px;margin-top:8px}
.inline{display:inline}

/* ── 메인 ── */
.hero .hero-box,.brand-hero .hero-box{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1400/530;background:var(--soft)}
.hero-box>img{width:100%;height:100%;object-fit:cover;object-position:center 72%} /* 스타킹몰 — 상품 사진의 다리 쪽을 보이게 */
.hero-copy{position:absolute;left:5%;top:50%;transform:translateY(-50%);color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-copy p{font:600 13px var(--latin);letter-spacing:.3em;margin:0 0 12px}
.hero-copy h1{font:600 clamp(2.6rem,6vw,5.2rem)/.95 var(--latin);letter-spacing:-.04em}
.float-card{position:absolute;left:4.5%;bottom:9%;display:flex;gap:16px;align-items:center;background:#fff;border-radius:18px;padding:14px 26px 14px 14px;max-width:340px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.fc-img{width:64px;height:64px;border-radius:12px;overflow:hidden;flex:none;background:var(--soft)}
.fc-img img{width:100%;height:100%;object-fit:cover}
.float-card b{display:block;font-size:14px;line-height:1.35}
.float-card small{color:var(--muted);font-size:13px}
.intro{padding-block:80px 64px;text-align:center}
.intro p{font:500 clamp(1.2rem,2.2vw,1.75rem)/1.45 var(--latin);letter-spacing:-.02em;margin:0}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.cat{background:var(--soft);border-radius:var(--r);padding:18px;text-decoration:none;box-shadow:0 6px 14px rgba(0,0,0,.06);transition:transform .25s}
.cat:hover{transform:translateY(-4px)}
.cat-top{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 16px}
.cat-top b{font:600 15px var(--latin)}
.cat-top .arr{width:34px;height:34px;padding:8px;background:#fff;border-radius:50%}
.cat-img{display:block;aspect-ratio:1.07;border-radius:14px;overflow:hidden;background:#fff}
.cat-img img{width:100%;height:100%;object-fit:cover}
.benefits{padding-block:150px 40px}
.benefits .wrap{display:grid;grid-template-columns:1.35fr 1fr;gap:20px}
.ben-main{background:var(--point);color:var(--point-ink);border-radius:var(--r);min-height:288px;padding:40px 48px;display:flex;align-items:center;justify-content:space-between;text-decoration:none}
.ben-main b{font:700 3rem/1 var(--latin);letter-spacing:-.04em}
.ben-main span{font:500 1.2rem/1.4 var(--body);text-align:right}
.ben-side{display:grid;gap:20px}
.ben{background:var(--tint);border-radius:var(--r);padding:28px 40px;display:flex;align-items:center;justify-content:space-between;text-decoration:none;font-size:1.25rem;font-weight:600}
.ben small{display:block;font:600 11px var(--latin);letter-spacing:.3em;color:var(--muted);margin-bottom:4px}
.ben b{font:600 1.9rem var(--latin);display:flex;align-items:center;gap:8px;color:var(--point-deep)}
.ben .arr{width:26px;height:26px}
.closing{padding-block:140px;text-align:center}
.closing h2{font:700 clamp(2rem,4vw,3rem)/1.05 var(--latin);letter-spacing:-.03em;margin-bottom:28px}

/* ── 상품 목록 ── */
.sec{padding-block:80px 40px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.sec-head h2{font:500 2.5rem var(--latin);letter-spacing:-.03em}
.sec-head a{font:400 13px var(--latin);color:var(--muted);text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 20px}
.item{position:relative;display:grid;gap:3px;min-width:0;align-content:start}
.item .txt{display:grid;gap:3px;text-decoration:none;min-width:0}
.ph-box{position:relative}
.quick{position:absolute;right:10px;bottom:10px;display:grid;gap:6px}
.qbtn{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:grid;place-items:center;cursor:pointer;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.qbtn .ico{width:16px;height:16px}
.ph{aspect-ratio:333/416;background:var(--soft);overflow:hidden;display:block;border-radius:var(--r)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.item:hover .ph img{transform:scale(1.04)}
.nm{font-size:16px;font-weight:600;margin-top:16px;padding-inline:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.summ{color:var(--muted);font-size:14px;padding-inline:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr{font-weight:700;font-size:16px;padding-inline:6px}
.rv{font-size:12px;color:var(--muted);padding-inline:6px}
.item-wrap form{margin-top:8px;padding-inline:6px}
.list-title{text-align:center;font:500 1.25rem var(--latin);letter-spacing:.02em;padding-block:40px 24px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.chips a{text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-weight:500}
.chips a.on{background:var(--point);border-color:var(--point);color:var(--point-ink)}
.list-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.list-bar p{margin:0;font:400 13px var(--latin)}
.list-bar p b{color:var(--point-deep)}
.sort select{border:0;padding:4px 24px 4px 4px;font-size:13px;width:auto;background:transparent}
.pager{display:flex;justify-content:center;gap:18px;margin-top:60px;font:500 13px var(--latin)}
.pager a{text-decoration:none;color:var(--muted)}
.search-box{display:flex;gap:8px;max-width:560px;margin:0 auto 18px}
.search-box input{font-size:16px;border-radius:999px;padding-inline:22px}
.search-box .btn{border-radius:999px;flex:none;white-space:nowrap}
.popular{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center;margin-bottom:48px;font-size:13px}
.popular b{font:600 12px var(--latin);letter-spacing:.1em;margin-right:6px}
.popular a{color:var(--muted)}

/* ── 상품 상세 ── */
.page{padding-block:36px 100px}
.page-title{font:500 1.6rem var(--body);letter-spacing:-.03em;margin-bottom:28px;text-align:center}
.page-title.left{text-align:left}
/* PC: 왼쪽 위 사진 · 왼쪽 아래 탭/상세 · 오른쪽 구매(두 줄에 걸쳐 따라옴). 모바일: 사진 → 구매 → 탭/상세 순서 */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"media buy" "rest buy";gap:0 70px;align-items:start;max-width:1140px;margin:0 auto}
.pdp-media{grid-area:media;min-width:0}
.pdp-rest{grid-area:rest;min-width:0}
.pdp .buy{grid-area:buy}
.main-img{aspect-ratio:743/930;background:var(--soft);overflow:hidden;border-radius:var(--r)}
.main-img img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:10px}
.thumbs button{padding:0;border:0;background:var(--soft);cursor:pointer;aspect-ratio:1;border-radius:10px;overflow:hidden}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs.small{grid-template-columns:repeat(8,1fr);margin-top:12px}
.thumbs.small a{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden}
.pdp-tabs{position:sticky;top:76px;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--soft2);border-radius:10px;padding:4px;margin:60px 0 40px}
.pdp-tabs a{text-align:center;text-decoration:none;padding:10px 4px;border-radius:8px;color:var(--muted);font-size:13px}
.pdp-tabs a:hover,.pdp-tabs a.on{background:#fff;color:var(--point-deep);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.pdp-sec{scroll-margin-top:140px}
.detail img{width:100%}
.guide{margin-top:60px;border-top:1px solid var(--line);padding-top:40px}
.guide details{border-bottom:1px solid var(--line)}
.guide summary{list-style:none;pointer-events:none;padding:22px 0 10px}
.guide summary::-webkit-details-marker{display:none}
.guide h3{font-size:15px;margin:0}
.guide details p{padding-bottom:20px}
.guide p{white-space:pre-line;color:var(--muted);font-size:13px;margin:0}
.buy{position:sticky;top:96px}
.buy-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rate{font-size:13px;text-decoration:none}
.rate span{color:var(--line)}
.buy-icons{display:flex;gap:6px}
.icon-btn{background:none;border:0;padding:4px;cursor:pointer;display:grid}
.icon-btn.on svg{fill:var(--point-deep);stroke:var(--point-deep)}
.buy h1{font:600 1.45rem/1.35 var(--body);margin-bottom:14px}
.points{list-style:none;padding:0;margin:0 0 18px;color:var(--muted)}
.price{font-size:1.4rem;font-weight:700;margin:0 0 20px}
.info{display:grid;grid-template-columns:90px 1fr;gap:8px;margin:0 0 22px;color:var(--muted);font-size:13px}
.info dd{margin:0}
.opt-box{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.opt-box summary{background:var(--soft2);padding:12px 16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.opt-box summary::after{content:"⌃"}
.opt-box:not([open]) summary::after{content:"⌄"}
.opt-box .field{padding:14px 16px 0}
.opt-box .field:last-child{padding-bottom:14px}
.picked{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.picked li{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;background:var(--soft2);border-radius:10px;padding:12px 14px;font-size:13px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:#fff}
.stepper button{border:0;background:none;width:28px;height:28px;cursor:pointer;font-size:15px}
.stepper input,.stepper b{width:34px;text-align:center;border:0;padding:0;font-size:13px;background:none}
.x{border:0;background:none;font-size:18px;cursor:pointer;color:var(--muted);line-height:1}
.ship-note{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0}
.ship-note .ico{color:var(--point-deep)}
.ship-note p{margin:0;display:grid;font-size:13px}
.ship-note span{color:var(--muted)}
.total{display:flex;align-items:baseline;gap:6px;margin:22px 0 10px}
.total span{flex:1;font:600 13px var(--latin)}
.total b{font-size:1.25rem}
.total small{color:var(--muted)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.actions .btn{padding:15px;font-size:15px}
.pdp-wide{max-width:1140px;margin:100px auto 0;scroll-margin-top:90px}
.pdp-wide .sec-head h2{font-size:1.6rem}
.board-box .cta-line{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:24px 0 0}
.board-box .cta-line p{margin:0;font-weight:500}
.rv-sum{display:grid;grid-template-columns:auto auto 1fr;gap:48px;align-items:center;background:var(--soft2);border-radius:14px;padding:28px 36px}
.rv-sum small{display:block;color:var(--muted);font-size:12px}
.rv-avg b,.rv-cnt b{font:600 2rem var(--latin)}
.rv-avg i{font-style:normal;font-size:1rem;color:var(--muted)}
.rv-bars{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:12px}
.rv-bars li{display:grid;grid-template-columns:32px 1fr 36px;gap:10px;align-items:center}
.rv-bars i{height:6px;background:#E3E3E3;border-radius:3px;overflow:hidden}
.rv-bars i b{display:block;height:100%;background:var(--point-deep)}
.posts{list-style:none;padding:0;margin:0}
.posts li{border-bottom:1px solid var(--line)}
.posts a{display:grid;gap:4px;padding:18px 4px;text-decoration:none}
.posts p{margin:0;color:var(--muted);font-size:13px}
.posts small{color:var(--muted);font-size:12px}
.answered{color:var(--point-deep);font-style:normal;font-weight:600}

/* ── 장바구니 ── */
.cart-wrap{max-width:1160px}
.cart-head{display:flex;justify-content:space-between;align-items:baseline;padding-block:40px 30px}
.cart-head h1{font-size:1.4rem;font-weight:500}
.cart-head p{margin:0;font-size:12px}
.cart{display:grid;grid-template-columns:1fr 300px;gap:50px;align-items:start}
.cart-group{background:var(--soft);padding:10px 14px;font-size:12px;border-radius:4px}
.cline{display:grid;grid-template-columns:auto 120px 1fr auto;gap:16px;align-items:center;padding:16px 0 16px 0}
.cline .ph{border-radius:6px}
.cinfo{display:grid;gap:3px;align-self:start;font-size:13px}
.cinfo a{text-decoration:none}
.cinfo small{color:var(--muted)}
.cinfo .stepper{margin-top:8px;width:max-content}
.cline .x{align-self:start}
.cart-tools{display:flex;gap:6px;margin-top:14px}
.cart-side{position:sticky;top:100px}
.sum-box{border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.sum-box p{display:flex;justify-content:space-between;margin:4px 0;font-size:13px}
.sum-box .grand{font-weight:700;margin-top:8px}
.cart-side .btn.wide{margin-top:10px}
.cart-side .muted{margin-top:10px}
.cart-empty{text-align:center;padding:80px 0}

/* ── 주문서 (회색 바탕, 흰 카드) ── */
body.order{background:var(--gray-bg)}
.order-top{background:#fff;border-bottom:1px solid var(--line)}
.order-top .wrap,.order-title .wrap,.order-page .wrap{max-width:1000px}
.order-top .wrap{display:flex;justify-content:space-between;align-items:center;height:60px}
.order-top nav{display:flex;gap:14px}
.order-top nav a{position:relative;display:grid}
.count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;border-radius:8px;background:var(--sale);color:#fff;font:600 10px/16px var(--latin);text-align:center;padding:0 4px}
.order-title{background:#fff}
.order-title h1{font-size:1.3rem;font-weight:500;padding-block:20px}
.order-page{padding-block:20px 80px}
.order-grid{display:grid;grid-template-columns:1fr 330px;gap:20px;align-items:start}
.order-main{display:grid;gap:16px}
.ocard{background:#fff;border-radius:12px;padding:0 16px 16px}
.ocard>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:16px}
.ocard>summary::after{content:"⌃";margin-left:auto;color:var(--muted)}
.ocard:not([open])>summary{border-bottom:0;margin-bottom:0}
.ocard:not([open])>summary::after{content:"⌄"}
.ocard h2{font-size:15px;padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:14px}
.ocard h3{font-size:14px;margin:20px 0 10px}
.oline{display:grid;grid-template-columns:68px 1fr;gap:12px;margin-bottom:12px}
.oline .ph{aspect-ratio:1;border-radius:8px}
.oline div{display:grid;gap:2px}
.oline small{color:var(--muted)}
.oship{display:flex;justify-content:space-between;background:var(--soft2);border-radius:8px;padding:12px 14px;margin:0}
.oship span{color:var(--muted)}
.zip-row,.email-row{display:flex;gap:6px;align-items:center}
.zip-row input{flex:1}
.email-row input{flex:1}
.field input+input{margin-top:6px}
.oblock{border-top:1px solid var(--line);margin:18px -16px 0;padding:18px 16px 0}
.oblock h3{margin-top:0}
.notes{margin:8px 0 0;padding-left:14px;color:var(--muted);font-size:12px}
.paybox{border:1px solid var(--point-deep);background:var(--tint);border-radius:8px;padding:14px 16px}
.paybox .check{margin-bottom:12px;font-weight:600}
.order-side{position:sticky;top:20px}
.pay-card p{display:flex;justify-content:space-between;margin:6px 0;font-size:13px}
.pay-card p span{color:var(--muted)}
.pay-card .minus{color:var(--sale)}
.pay-card .grand{border-top:1px solid var(--line);padding-top:14px;margin-top:14px;font-size:14px}
.pay-card .grand b{font-size:1.35rem}
.agree{display:grid;gap:10px;margin-top:16px;font-size:13px}
.agree .all{padding-bottom:12px;border-bottom:1px solid var(--line);font-weight:600}
.agree a{margin-left:auto;text-decoration:none;color:var(--muted);font-size:16px}
.agree .note{background:var(--soft2);border-radius:8px;padding:12px}
.done-head{text-align:center;padding:40px 0 24px;display:grid;justify-items:center;gap:12px}
.done-head h1{font-size:1.5rem}
.done-head p{margin:0;color:var(--muted)}
.done-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.ov-head{display:flex;justify-content:space-between;align-items:center;padding-top:16px}
.ov-sum{background:var(--soft2);border-radius:8px;padding:12px 14px;margin-top:12px}
.ov-sum p{display:flex;justify-content:space-between;margin:3px 0;font-size:13px}
.ov-sum .grand{font-weight:700}
.ship-info{background:var(--ok-soft);color:var(--ok);border-radius:8px;padding:10px 14px}
.bank{background:var(--tint);border-radius:10px;padding:16px 18px;margin:12px 0;display:grid;gap:2px}
.bank p{margin:0;font:600 11px var(--latin);letter-spacing:.2em;color:var(--point-deep)}
.bank b{font-size:1.1rem}

/* ── 폼 공통 ── */
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:600}
.field small{color:var(--muted);font-size:12px}
.check{display:flex;gap:8px;align-items:center;font-weight:400 !important;cursor:pointer}
.check input{width:auto;margin:0;accent-color:var(--point-deep)}
select,input,textarea{font:400 15px var(--body);width:100%;padding:11px 14px;border-radius:8px;border:1px solid #DADADA;background:#fff;color:var(--ink)}
input:disabled{background:var(--soft2);color:var(--muted)}
textarea{min-height:110px;resize:vertical}
.form{max-width:520px}
.flash{padding:12px 16px;margin-block:16px;font-weight:500;border-radius:10px}
.flash.err{background:var(--err-soft);color:var(--err)}
.flash.ok{background:var(--ok-soft);color:var(--ok)}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--soft2);border:1px solid var(--line);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.pill.err{background:var(--err-soft);color:var(--err);border-color:transparent}

/* ── 로그인 · 가입 (머리·바닥 없음) ── */
.bare-top{max-width:420px;margin:0 auto;display:flex;justify-content:space-between;padding:20px 0 0}
.bare-top a{display:grid}
.bare-page{max-width:420px;margin:0 auto;padding:30px 16px 80px}
.bare-page>h1{text-align:center;font-size:1.3rem;margin-bottom:24px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border-radius:999px;margin-bottom:24px}
.seg a{text-align:center;text-decoration:none;padding:13px;color:var(--muted);border-radius:999px;font-weight:500}
.seg a.on{background:var(--ink);color:#fff;font-weight:600}
.line-form input{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0;margin-bottom:6px}
.line-form .btn.wide{margin-top:20px}
.login-links{display:flex;justify-content:center;gap:10px;font-size:12px;color:var(--muted);margin-top:16px}
.login-links span{color:var(--line)}
.hint{font-size:12px;color:var(--muted)}
.join-form h2{font-size:15px;margin:28px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.join-form h2:first-child{margin-top:0}

/* ── 마이페이지 ── */
.my-wrap{display:grid;grid-template-columns:200px 1fr;gap:60px;max-width:1160px;padding-top:30px}
.my-nav{display:grid;gap:2px;align-content:start;position:sticky;top:100px}
.my-nav a{text-decoration:none;padding:9px 0;color:var(--muted)}
.my-nav a.on,.my-nav .my-home{color:var(--ink);font-weight:600}
.my-nav .my-home{font-size:1.15rem;margin-bottom:10px}
.my-main{min-width:0}
.hello{background:var(--tint);border-radius:14px;padding:24px 28px;margin-bottom:30px}
.hello p{margin:0;font-size:1.1rem}
.hello small{color:var(--muted)}
.sub{font-size:15px;margin:30px 0 14px}
.sub small{color:var(--muted);font-weight:400}
.status-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.status-row a{display:grid;justify-items:center;gap:4px;padding:24px 0;text-decoration:none}
.status-row a+a{border-left:1px solid var(--line)}
.status-row b{font:600 1.8rem var(--latin);color:var(--point-deep)}
.status-row span{color:var(--muted);font-size:13px}
.olist{list-style:none;padding:0;margin:0}
.olist a{display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.olist .ph{aspect-ratio:1;border-radius:8px}
.olist div{display:grid;gap:2px}
.olist small{color:var(--muted)}
.my-main .chips{justify-content:flex-start}
.my-main .grid{grid-template-columns:repeat(3,1fr)}

/* ── 게시판 ── */
.board-wrap{max-width:1200px}
.board-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:50px;flex-wrap:wrap}
.board-tabs a{text-decoration:none;background:var(--soft);padding:7px 12px;border-radius:4px;font:500 13px var(--latin);color:var(--muted)}
.board-tabs a.on{background:var(--point);color:var(--point-ink)}
.board-filter select{width:auto;font-size:12px;padding:6px 28px 6px 10px;margin-bottom:10px}
.board-table table{width:100%;border-collapse:collapse;font-size:13px}
.board-table th{background:var(--soft2);font-weight:500;font-size:12px;padding:10px;color:var(--muted)}
.board-table td{padding:14px 10px;border-bottom:1px solid var(--line);text-align:center}
.board-table td.tit{text-align:left}
.board-table td.tit a{text-decoration:none}
.board-table .no,.board-table .views{width:60px}
.board-table .bcat{width:100px}
.board-table .prd{width:70px}
.board-table .prd img{width:48px;height:56px;object-fit:cover;border-radius:4px;margin:auto}
.board-table .who{width:110px}
.board-table .date{width:110px}
.board-write{text-align:right;margin-top:16px}
.board-search{display:flex;gap:4px;margin-top:40px}
.board-search select{width:auto;font-size:12px;padding:6px 26px 6px 10px}
.board-search input{width:200px;font-size:12px;padding:6px 10px}
.board-prd{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:24px;text-decoration:none;max-width:480px}
.board-prd img{width:56px;height:68px;object-fit:cover;border-radius:6px}
.board-prd span{display:grid}
.board-prd small{color:var(--muted)}
.event-list{display:grid;gap:10px}
.event-list a{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding:16px 4px;text-decoration:none}
.event-list small{margin-left:auto;color:var(--muted)}
.post{border-top:2px solid var(--ink)}
.post header{border-bottom:1px solid var(--line);padding:20px 4px}
.post h2{font-size:1.15rem}
.post h2 small{color:var(--muted);font-weight:400}
.post header p{margin:8px 0 0;color:var(--muted);font-size:13px}
.post-body{padding:30px 4px 40px;white-space:pre-line;min-height:160px}
.answer{background:var(--tint);border-radius:12px;padding:20px 24px;margin-bottom:20px}
.answer p{margin:8px 0 0;white-space:pre-line}
.post-nav{display:flex;gap:8px;justify-content:space-between;margin-top:20px}
.write-form{max-width:760px;margin:0 auto}
.rate-pick{display:flex;gap:16px;flex-wrap:wrap}
.rate-pick label{display:flex;align-items:center;gap:4px;font-weight:400}
.rate-pick input{width:auto}

/* ── 정보 페이지 ── */
.prose{max-width:760px;margin:0 auto;white-space:pre-line}
.guide-page section{border-top:1px solid var(--line);padding:28px 0}
.guide-page h2{font-size:1.05rem;margin-bottom:10px}
.guide-page p{white-space:pre-line;color:var(--muted);margin:0}
.brand-text{padding-block:100px;text-align:center}
.brand-text h2{font-size:1.6rem;margin-bottom:24px}
.brand-text p{white-space:pre-line;color:var(--muted);line-height:2;margin:0 0 40px}

/* ── 관리자 표 (관리자 개편 전까지 그대로) ── */
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.grid2>*{min-width:0}
.table-box{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.table-box table{border-collapse:collapse;width:100%}
.table-box th,.table-box td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.table-box th{font-size:12px;color:var(--muted);font-weight:600;background:var(--soft2);white-space:nowrap}
td.r,th.r{text-align:right}
.tiny{width:48px;height:60px;object-fit:cover;border-radius:6px}
.admin-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px;align-items:center}
.admin-nav a{text-decoration:none;padding:7px 14px;border:1px solid var(--line);border-radius:8px;font-weight:600}
.admin-nav a.on{background:var(--point);color:var(--point-ink);border-color:var(--point)}
.admin-nav form{margin-left:auto}
.row-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.row-form input{width:auto;padding:6px 8px;font-size:13px}
.mini{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px}

/* ── 푸터 — 포인트 컬러 덩어리 ── */
footer{background:var(--point);color:var(--point-ink);margin-top:40px;padding-block:60px 50px}
footer .wrap{max-width:1440px}
.foot-grid{display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo info" "brand info";gap:0 60px;padding-inline:4%}
.foot-grid>.logo{grid-area:logo}
.foot-info{grid-area:info}
.foot-brand{grid-area:brand}
footer .logo{font-size:clamp(3.5rem,8vw,7rem);transform-origin:left top;margin-bottom:40px;justify-self:start}
.fcol summary{list-style:none;pointer-events:none}
.fcol summary::-webkit-details-marker{display:none}
.biz-name{font-weight:700;font-size:13px;margin:0 0 12px}
.biz{display:grid;grid-template-columns:150px 1fr;gap:4px 10px;margin:0;font-size:12px}
.biz dd{margin:0}
.copy{font-size:12px;margin:30px 0 0;opacity:.85}
.foot-info{display:grid;gap:50px;align-content:start}
.foot-row{display:grid;grid-template-columns:repeat(2,auto);gap:16px 60px}
.foot-row.links{grid-template-columns:repeat(4,auto)}
footer h3{font:600 14px var(--latin);margin-bottom:12px}
footer p{margin:2px 0;font-size:13px}
footer .big{font:600 13px var(--latin)}
footer a{text-decoration:none}
.foot-row.links a{display:block;font:500 12px/2 var(--latin)}

.totop{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.14);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;color:var(--ink)}
.totop.show{opacity:1;pointer-events:auto}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:rgba(0,0,0,.82);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:60;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.menu-btn,.m-menu,.slides-wrap,.buybar{display:none}

@media (max-width:1000px){
  .grid,.cat-grid{grid-template-columns:repeat(2,1fr);gap:28px 14px}
  .pdp,.grid2,.cart,.order-grid,.my-wrap{grid-template-columns:1fr;gap:28px}
  .pdp{grid-template-areas:"media" "buy" "rest";gap:0}
  .pdp .buy{padding-top:20px}
  .buy,.cart-side,.order-side,.my-nav{position:static}
  .my-nav{display:flex;flex-wrap:wrap;gap:4px 16px}
  .benefits .wrap{grid-template-columns:1fr}
  .hero .hero-box,.brand-hero .hero-box{aspect-ratio:4/5}
  .hero .hero-box{aspect-ratio:2/3}
  .foot-grid{grid-template-columns:1fr}
  .rv-sum{grid-template-columns:1fr 1fr;gap:20px}
  .rv-bars{grid-column:1/-1}
  .board-table .bcat,.board-table .who,.board-table .views,.board-table .prd{display:none}
}
@media (max-width:1000px){
  /* 머리: MENU · 로고 · CART 한 줄, MENU 를 누르면 아래로 판이 펼쳐진다 */
  .top .wrap{grid-template-columns:1fr auto 1fr;padding-block:12px}
  .top .nav:not(.right),.top .nav.right .dd{display:none}
  .logo{font-size:1.75rem}
  .nav{font-size:14px}
  .menu-btn{display:grid;place-items:center;justify-self:start;background:none;border:0;padding:0;margin-left:-10px;cursor:pointer;color:var(--ink);position:relative}

  /* 상세: 사진은 꽉 차게 넘기고, 장바구니·구매하기는 아래에 붙인다 */
  .pdp-page{padding-top:0}
  .gallery{display:none}
  .slides-wrap{display:block;position:relative;margin-inline:-16px}
  .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .slides::-webkit-scrollbar{display:none}
  .slides img{flex:0 0 100%;width:100%;aspect-ratio:390/488;object-fit:cover;scroll-snap-align:start}
  .slide-n{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.45);color:#fff;font:500 12px var(--latin);padding:3px 10px;border-radius:999px}
  .pdp-tabs{top:58px;margin:40px -16px 24px;border-radius:0}
  /* 아래 가운데 떠 다니는 구매하기 하나(2026-11-02 사장님) — 누르면 옵션 칸으로, 거기서 장바구니·구매하기. 스크롤 중엔 숨김(app.js) */
  .buybar{display:block;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:50;width:min(78%,360px);padding:17px 0;border-radius:999px;background:var(--point);color:var(--point-ink);font:600 16px var(--latin);text-align:center;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:opacity .25s,transform .25s}
  .buybar.off{opacity:0;transform:translate(-50%,24px);pointer-events:none}
  .opt-box{scroll-margin-top:90px}
  body:has(.buybar) .totop{bottom:84px}
  body:has(.buybar) footer{padding-bottom:110px}
  .guide summary{pointer-events:auto;cursor:pointer;display:flex;justify-content:space-between;padding:18px 0}
  .guide summary::after{content:"⌄";color:var(--muted)}
  .guide details[open] summary::after{content:"⌃"}
  .pdp-wide{margin-top:60px}
  .rv-sum{padding:20px}

  /* 푸터: 큰 로고 + 접히는 묶음 */
  .foot-grid{grid-template-columns:1fr;grid-template-areas:"logo" "info" "brand";padding-inline:0}
  footer .logo{font-size:4.6rem;margin-bottom:24px}
  .foot-info{gap:0}
  .foot-row,.foot-row.links{grid-template-columns:1fr;gap:0}
  .fcol{border-bottom:1px solid rgba(58,31,42,.18)}
  .fcol summary{pointer-events:auto;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 0}
  .fcol summary::after{content:"+";font-weight:300;font-size:20px;line-height:1}
  .fcol[open] summary::after{content:"−"}
  .fcol h3{margin:0}
  .fcol>div{padding-bottom:14px}
  .foot-brand{margin-top:36px}
  .biz{grid-template-columns:120px 1fr}
  .totop{right:16px;bottom:16px}

}
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .intro{padding-block:40px 24px}
  .intro p{font-size:1rem}
  .benefits{padding-block:64px 20px}
  .ben-main{min-height:180px;padding:28px}
  .ben-main b{font-size:2.2rem}
  .ben{padding:20px 24px;font-size:1rem}
  .ben b{font-size:1.3rem}
  .sec{padding-block:48px 20px}
  .sec-head h2{font-size:1.5rem}
  .nm,.pr{font-size:14px}
  .nm{white-space:normal;margin-top:10px}
  .summ{font-size:12px}
  .grid{gap:24px 10px}
  .float-card{max-width:calc(100% - 32px);left:16px;bottom:16px}
  .closing{padding-block:80px}
  .closing h2{font-size:1.8rem}

  /* 옆으로 넘기는 줄 (분류 카드 · 베스트 · 관련상품) — 진행 막대는 app.js 가 아래에 붙인다(.sbar) */
  .slide-x{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .slide-x>*{scroll-snap-align:start}
  .cat-grid.slide-x{grid-auto-columns:82%;gap:14px;padding-top:6px}
  .cat{padding:12px}
  .cat-top{padding:4px 4px 12px}
  .cat-img{aspect-ratio:4/5}

  .cline{grid-template-columns:auto 80px 1fr auto;gap:10px}
  .cart-head{padding-block:24px 16px}

  /* 게시판: 표 대신 목록 (제목 한 줄 + 아래 작은 정보) */
  .board-tabs{margin-bottom:30px}
  .board-table thead{display:none}
  .board-table tr{display:flex;flex-wrap:wrap;gap:4px 10px;padding:16px 4px;border-bottom:1px solid var(--line)}
  .board-table td{display:inline;padding:0;border:0;text-align:left;font-size:12px;color:var(--muted);width:auto !important}
  .board-table td.no{display:none}
  .board-table td.tit{flex:0 0 100%;order:-1;font-size:14px;color:var(--ink);margin-bottom:2px}
  .board-table .bcat,.board-table .who,.board-table .views{display:inline !important}
  .board-table .prd{display:none !important}
  .board-table td.views::before{content:"조회 "}
  .board-search{flex-wrap:wrap}
  .board-search select{flex:0 0 100%}
  .board-search input{flex:1;width:auto}

  .my-main .grid{grid-template-columns:repeat(2,1fr)}
  .status-row b{font-size:1.4rem}
}

/* ═════════ 2차 튜닝 (2026-10-23) ═════════ */
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sale);margin-left:3px;vertical-align:top}
.badge-n{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--sale);color:#fff;font:600 11px/1 var(--latin);font-style:normal;padding:0 5px}
.minus,.ov-sum .minus{color:var(--sale)}
.plus{color:var(--ok)}
.tag{display:inline-block;font-size:11px;background:var(--tint);color:var(--point-deep);border-radius:4px;padding:1px 6px}
.warn{color:var(--warn)}
.err{color:var(--err)}
.pre{white-space:pre-line}

/* 가격: 할인 중이면 원래 가격 줄 · 할인율 */
.pr s,.cpr s,.price s{color:#9a9a9a;font-weight:400;font-size:.85em}
.pr em,.cpr em,.price em{color:var(--sale);font-style:normal;font-weight:700}
.cpr{font-size:13px}
.badge{position:absolute;left:10px;top:10px;background:var(--sale);color:#fff;font:600 12px var(--latin);padding:3px 8px;border-radius:999px}
.qbtn.on svg{fill:var(--point-deep);stroke:var(--point-deep)}
.sale-timer{display:inline-block;background:var(--tint);color:var(--point-deep);border-radius:6px;padding:6px 10px;font-size:13px;margin:-8px 0 16px}
.perks{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:4px;font-size:13px;color:var(--muted)}
.perks li::before{content:"· "}
.perks b{color:var(--point-deep)}
.info small{color:var(--muted)}
.swatches{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.swatches button{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:#fff}
.swatches button.on{outline:2px solid var(--point-deep);outline-offset:1px}
.swatches img{width:100%;height:100%;object-fit:cover}
.sec-head h2 small{font:400 13px var(--body);color:var(--muted);margin-left:6px}

/* 리뷰 */
.rv-fit{grid-column:1/-1;display:grid;gap:4px;font-size:12px}
.rv-fit p{display:grid;grid-template-columns:70px 1fr 36px;gap:10px;align-items:center;margin:0}
.rv-fit i{height:6px;background:#E3E3E3;border-radius:3px;overflow:hidden}
.rv-fit i b{display:block;height:100%;background:var(--point-deep)}
.rv-photos{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:14px}
.rv-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.posts li{position:relative}
.posts li.pinned{background:var(--tint)}
.ptop{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.best,.verified,.fit{font-style:normal;font-size:11px;font-weight:600;padding:1px 6px;border-radius:4px}
.best{background:var(--point-deep);color:#fff}
.verified{background:var(--ok-soft);color:var(--ok)}
.fit{background:var(--soft);color:var(--muted)}
.pthumbs{display:flex;gap:6px;margin:4px 0}
.pthumbs img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.like{position:absolute;right:4px;top:18px}
.like.big{position:static;margin:16px 0}
.like button{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer}
.like button .ico{width:14px;height:14px}
.like button.on{border-color:var(--point-deep);color:var(--point-deep)}

/* 장바구니 · 주문서 */
.freebar{background:var(--tint);border-radius:10px;padding:12px 16px;margin-bottom:12px}
.freebar p{margin:0 0 8px;font-size:13px}
.freebar b{color:var(--point-deep)}
.freebar i{display:block;height:6px;background:#fff;border-radius:3px;overflow:hidden}
.freebar i b{display:block;height:100%;background:var(--point-deep)}
.hint-line{font-size:13px;margin:0 0 12px;color:var(--muted)}
.hint-line b{color:var(--point-deep)}
.sum-box p[hidden],.pay-card p[hidden]{display:none}
.addr-pick{margin-bottom:14px}
.addr-pick label{font-size:13px;font-weight:600;display:block;margin-bottom:6px}
.addr-pick div{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;text-decoration:none}
.check.pack{background:var(--soft2);border-radius:8px;padding:10px 12px;margin:4px 0 10px;align-items:flex-start}
.inline-input{width:auto;padding:4px 8px;font-size:13px;margin-left:6px}
.earn{color:var(--point-deep)}
.deadline{font-size:13px}
.deadline b{color:var(--point-deep)}
/* 배송 단계 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:14px 0}
.steps li{position:relative;text-align:center;padding-top:26px;font-size:13px;color:var(--muted)}
.steps li::before{content:"";position:absolute;top:6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#ddd;z-index:1}
.steps li+li::after{content:"";position:absolute;top:11px;right:50%;width:100%;height:2px;background:#ddd}
.steps li.done{color:var(--ink)}
.steps li.done::before,.steps li.done::after{background:var(--point-deep)}
.steps li.now b{color:var(--point-deep)}
.steps small{display:block;font-size:11px}
.steps.canceled{display:block;background:var(--err-soft);color:var(--err);border-radius:8px;padding:10px 14px}
.order-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.claims{list-style:none;padding:0;display:grid;gap:8px}
.answer-mini{margin:4px 0 0;background:var(--tint);border-radius:6px;padding:6px 10px;font-size:13px}
.claim-form form{padding-top:6px}

/* 공지 팝업 · 최근 본 상품 바 · 배너 · 인스타 */
.popup{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:80;padding:16px}
.popup-box{background:#fff;border-radius:16px;max-width:400px;width:100%;padding:28px 24px 0;text-align:center}
.popup-box h2{font-size:1.2rem;margin-bottom:10px}
.popup-box p{white-space:pre-line;color:var(--muted);margin:0 0 14px}
.popup-foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin:18px -24px 0}
.popup-foot button{background:none;border:0;padding:14px;cursor:pointer;font-size:13px}
.popup-foot button+button{border-left:1px solid var(--line)}
.recent-bar{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;gap:6px;justify-items:center;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.recent-bar b{font:600 9px var(--latin);letter-spacing:.1em;color:var(--muted)}
.recent-bar img{width:52px;height:52px;object-fit:cover;border-radius:8px}
.recent-bar .more{font-size:16px;text-decoration:none;color:var(--muted)}
.slider{position:relative}
.slider .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;display:block}
.slider .slide.on{opacity:1;z-index:1}
.slider .slide img{width:100%;height:100%;object-fit:cover}
.dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.dots button{width:28px;height:3px;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.dots button.on{background:#fff}
.insta{padding-block:40px 80px}
.insta-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.insta-row img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}

/* 로그인 · 마이페이지 */
.join-banner{display:grid;gap:2px;margin-top:20px;background:var(--tint);border-radius:12px;padding:16px 18px;text-decoration:none}
.join-banner span{font-size:13px;color:var(--point-deep)}
.hello{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.hello .grade{color:var(--point-deep)}
.hello-nums{display:flex;gap:10px}
.hello-nums a{display:grid;background:#fff;border-radius:10px;padding:10px 16px;text-decoration:none;min-width:110px}
.hello-nums small{color:var(--muted);font-size:12px}
.leave-link{text-align:right;font-size:12px}
.leave-link a{color:var(--muted)}
.addr-list{list-style:none;padding:0;display:grid;gap:8px}
.addr-list li{display:grid;gap:2px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;position:relative}
.addr-list form{position:absolute;right:12px;top:12px}
.addr-list span{font-size:13px;color:var(--muted)}
.code-form{margin-bottom:16px}
.code-form input{max-width:260px}
.coupons{list-style:none;padding:0;display:grid;gap:10px}
.coupons li{display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:center;border:1px solid var(--point);border-radius:12px;padding:14px 16px;background:var(--tint)}
.coupons li.off{opacity:.5;background:#fff;border-color:var(--line)}
.coupons .amt{font:700 1.4rem var(--latin);color:var(--point-deep)}
.coupons div{display:grid}
.coupons small{color:var(--muted)}
.alerts{list-style:none;padding:0;display:grid;gap:6px}
.alerts li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:10px;border:1px solid var(--line)}
.alerts li.new{background:var(--tint);border-color:var(--point)}
.alerts div{display:grid}
.alerts a{text-decoration:none}
.alerts small{color:var(--muted);font-size:12px}
.invite p{margin:0 0 12px}
.ref-code{display:grid;justify-items:start}
.ref-code b{font:700 2rem var(--latin);letter-spacing:.15em;color:var(--point-deep)}
.invite .btn.wide{margin-top:12px}

/* 게시판: 매거진 · 이벤트 · 글 */
.mag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mag-grid a{display:grid;gap:4px;text-decoration:none}
.mag-grid .ph{aspect-ratio:4/3}
.mag-grid img{width:100%;height:100%;object-fit:cover}
.mag-grid small{color:var(--muted)}
.event-list img{width:120px;height:80px;object-fit:cover;border-radius:8px}
.post-cover{width:100%;max-width:860px;border-radius:12px;margin:20px auto 0}
.post-photos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.post-photos img{width:160px;height:160px;object-fit:cover;border-radius:10px}
.entry{background:var(--tint);border-radius:12px;padding:18px 20px;margin-bottom:20px;display:grid;gap:8px}
.entry form{display:flex;gap:8px}
.entry small{color:var(--muted)}

/* ═════════ 관리자 ═════════ */
body.admin{background:var(--soft2)}
.adm-top{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);font-size:13px}
.adm-top .logo small{font:500 11px var(--latin);color:var(--muted);letter-spacing:.1em}
.adm-nav{display:flex;gap:4px;overflow-x:auto;padding:8px 20px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;scrollbar-width:none}
.adm-nav a{flex:none;text-decoration:none;padding:7px 12px;border-radius:8px;font-weight:600;font-size:14px;color:var(--muted)}
.adm-nav a.on{background:var(--point);color:var(--point-ink)}
.adm-main{max-width:1280px;margin:0 auto;padding:20px}
.adm-main h1{font-size:1.4rem;margin-bottom:16px}
.adm-main h2{font-size:1.05rem;margin:22px 0 10px}
.adm-main .card{background:#fff;margin-bottom:12px}
.adm-main details.card>summary{cursor:pointer}
.adm-main textarea{min-height:90px}
.stats4,.todo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{display:grid;gap:2px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none}
.stat small{color:var(--muted);font-size:12px;font-weight:600}
.stat b{font:600 1.35rem var(--latin)}
a.stat[href]:hover{border-color:var(--point-deep)}
.adm-table{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
.adm-table table{width:100%;border-collapse:collapse}
.adm-table th,.adm-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;text-align:left;vertical-align:top}
.adm-table th{background:var(--soft2);color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap}
.adm-table td.r{text-align:right;white-space:nowrap}
.adm-table tr:last-child td{border-bottom:0}
.tiny.wide{width:96px;height:54px}
.chips.left{justify-content:flex-start;margin-bottom:14px}
.adm-search{margin:0 0 12px}
.adm-search input{width:auto;min-width:200px}
.adm-bulk{margin:10px 0}
.adm-tools{display:grid;gap:10px;margin-top:16px}
.match{padding:6px 0;border-bottom:1px dashed var(--line)}
.match.exact{background:var(--ok-soft)}
.bar{display:flex;align-items:center;gap:8px}
.bar i{display:block;height:8px;background:var(--point);border-radius:4px;min-width:2px}
.settings fieldset{border:1px solid var(--line);margin:0 0 12px}
.settings legend{font-weight:700;padding:0 6px}
.form-wide{max-width:none}
.post-adm p{margin:4px 0}
.post-adm textarea{margin:6px 0}

@media (max-width:1000px){
  .recent-bar{display:none}
  .mag-grid{grid-template-columns:repeat(2,1fr)}
  .insta-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;overflow-x:auto}
  .stats4,.todo{grid-template-columns:repeat(2,1fr)}
  /* 관리자 표 → 카드 (td 의 data-label 이 이름표) */
  .adm-table thead{display:none}
  .adm-table tr{display:block;border-bottom:8px solid var(--soft2);padding:6px 0}
  .adm-table td{display:grid;grid-template-columns:96px 1fr;gap:8px;border:0;padding:4px 12px}
  .adm-table td::before{content:attr(data-label);color:var(--muted);font-size:12px}
  .adm-table td.r{text-align:left}
  .adm-main{padding:14px}
}
@media (max-width:640px){
  .rv-photos{grid-template-columns:repeat(4,1fr)}
  .coupons li{grid-template-columns:80px 1fr}
  .coupons .pill{grid-column:1/-1;justify-self:start}
  .steps small{display:none}
  .like{position:static;margin:0 0 10px 4px}
  .hello-nums a{min-width:0;flex:1}
}

/* ───── 경쟁사 비교 튜닝 (2026-10-23): 출고 마감 · 안 보이게 포장 · 상품정보 고시 · 색상 필터 ───── */
.ship-note strong{font-weight:600}
.ship-note .dispatch{color:var(--point-deep)}
.ship-note .dispatch b{font-variant-numeric:tabular-nums}
.discreet-box{display:flex;gap:12px;align-items:flex-start;background:var(--tint);border-radius:10px;padding:14px 16px;margin:0 0 12px;font-size:13px}
.discreet-box .ico{color:var(--point-deep);flex:none;margin-top:2px}
.discreet-box ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:2px;color:var(--ink)}
.discreet-box li::before{content:"✓ ";color:var(--point-deep)}
.discreet-box small{display:block;margin-top:6px;color:var(--muted)}
.guide-page .discreet-box{margin-bottom:28px}
.notice-table{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 8px}
.notice-table th,.notice-table td{border-top:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.notice-table tr:last-child th,.notice-table tr:last-child td{border-bottom:1px solid var(--line)}
.notice-table th{width:34%;background:var(--soft2);font-weight:500;color:var(--muted)}
.color-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px}
.color-chips a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;text-decoration:none}
.color-chips a.on{border-color:var(--ink);font-weight:600}
.color-chips i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
.color-chips small{color:var(--muted)}
@media (max-width:640px){
  .color-chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 18px;padding:0 16px;scrollbar-width:none}
  .color-chips a{flex:none}
  .notice-table th{width:38%}
}

/* ───── 3차 튜닝 (2026-10-23) ───── */
img.lq{background-size:cover;background-position:center;background-color:var(--soft)}
.steps{grid-template-columns:repeat(4,1fr)}
.chips.left{justify-content:flex-start;margin-bottom:16px}
/* 이탈 쿠폰 · FAQ 봇 */
.exit-pop .eyebrow{font:600 12px/1 var(--latin);letter-spacing:.2em;color:var(--point-deep);margin:0 0 8px}
.exit-pop h2 b{color:var(--point-deep)}
.exit-pop .popup-foot{grid-template-columns:1fr}
.faq-bot{position:fixed;left:20px;bottom:24px;z-index:45}
.faq-bot>summary{list-style:none;width:48px;height:48px;border-radius:50%;background:var(--point);color:var(--point-ink);display:grid;place-items:center;font:700 20px/1 var(--latin);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.14)}
.faq-bot>summary::-webkit-details-marker{display:none}
.faq-panel{position:absolute;left:0;bottom:58px;width:min(340px,calc(100vw - 40px));max-height:60vh;overflow:auto;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:16px;display:grid;gap:8px;font-size:13px}
.faq-panel details{border-bottom:1px solid var(--line);padding:6px 0}
.faq-panel summary{cursor:pointer;font-weight:500}
.faq-panel p{white-space:pre-line;color:var(--muted);margin:6px 0 0}
body.order .faq-bot,body.bare .faq-bot,body.admin .faq-bot{display:none}
/* 푸터 소식 받기 */
/* 타임딜 */
.deal-card{position:relative}
.deal-timer{margin:-4px 0 0;font-size:13px;color:var(--point-deep);padding:0 6px}
.deal-timer b{font-variant-numeric:tabular-nums}
.deal-pct{position:absolute;left:10px;top:10px;background:var(--sale);color:#fff;font:700 13px/1 var(--latin);padding:6px 8px;border-radius:999px;z-index:2}
/* 룩북 */
.look-box{position:relative;margin:0 0 24px;border-radius:var(--r);overflow:hidden}
.look-box>img{width:100%}
.look-box figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.spot{position:absolute;transform:translate(-50%,-50%);z-index:2}
.spot summary{list-style:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font:600 18px/1 var(--latin);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.spot summary::-webkit-details-marker{display:none}
.spot[open] summary{background:var(--point);color:var(--point-ink)}
.spot-card{position:absolute;left:50%;top:38px;transform:translateX(-50%);width:220px;display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:8px;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.2);font-size:12px}
.spot-card img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.spot-card b{display:block;font-weight:500;line-height:1.3;margin-bottom:2px}
.look-list{display:grid;gap:24px;max-width:960px;margin:0 auto}
/* 목록 필터 */
.price-chips,.tag-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 14px;align-items:center}
.price-chips a,.tag-chips a{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;text-decoration:none}
.price-chips a.on,.tag-chips a.on{border-color:var(--ink);font-weight:600}
.price-own{display:inline-flex;gap:4px;align-items:center}
.price-own input{width:84px;padding:5px 8px;font-size:12px}
.tags-line{font-size:13px;color:var(--muted);margin:0 0 14px}
.tags-line a{margin-left:6px;color:var(--point-deep);text-decoration:none}
/* 검색 자동완성 · 최근 검색어 */
.suggest{position:absolute;left:0;right:0;top:100%;z-index:60;list-style:none;margin:4px 0 0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.12);text-align:left}
.suggest a{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:7px 8px;border-radius:8px;text-decoration:none;font-size:13px}
.suggest a:hover{background:var(--soft2)}
.suggest img{width:36px;height:36px;object-fit:cover;border-radius:6px}
.suggest b{font-size:12px}
.recent-search .clear{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline}
/* 리뷰 */
.rv-keys p{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.rv-keys span{background:var(--tint);color:var(--point-ink);border-radius:999px;padding:4px 10px;font-size:12px}
.rv-keys b{color:var(--point-deep);margin-left:2px}
.rv-photos .more{display:grid;place-items:center;background:var(--soft);border-radius:8px;font-weight:600;text-decoration:none}
.rv-filter{margin:8px 0 14px}
.rv-filter a{font-size:12px;padding:5px 12px}
.body-info{display:inline-block;font-size:11px;color:var(--muted);background:var(--soft2);border-radius:4px;padding:1px 6px}
.board-filter.rv-body{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.board-filter.rv-body select{margin-bottom:0}
.insta-form,.insta-done{margin:18px 0 0;background:var(--tint);border-radius:10px;padding:14px 16px;font-size:13px}
.insta-form small{display:block;color:var(--muted);margin:2px 0 8px}
/* 사진 크게 보기 */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.9);display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:16px}
.lightbox figure{margin:0;text-align:center}
.lightbox img{max-width:100%;max-height:80vh;margin:0 auto;border-radius:8px}
.lightbox figcaption{color:#ddd;font-size:13px;margin-top:10px}
.lightbox figcaption a{color:#fff}
.lightbox button{background:none;border:0;color:#fff;font-size:40px;cursor:pointer}
.lightbox .lb-x{position:absolute;top:10px;right:16px}
/* 장바구니: 주문에 더 넣기 · 사줘 링크 */
.addto-bar{display:flex;gap:12px;justify-content:space-between;align-items:center;background:var(--tint);border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:13px}
.addto-bar p{margin:0}
.ask-box{margin:10px 0;border:1px dashed var(--point-deep);border-radius:10px;padding:10px 14px;font-size:13px}
.ask-box summary{cursor:pointer;font-weight:600}
.ask-box p{color:var(--muted);margin:6px 0 8px}
/* 선물 */
.gift-card .check{align-items:flex-start}
.gift-box{background:var(--tint);border-radius:12px;padding:14px 16px;margin:14px 0;display:grid;gap:8px}
.gift-box p{margin:0}
.gift-page .done-head{text-align:center}
.gift-emoji{font-size:48px;margin:0}
.gift-msg{font-size:1.1rem;color:var(--point-deep)}
.ask-page .ov-sum{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;margin-top:8px}
.order-actions form{display:inline}
/* 마이페이지 혜택 */
.my-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:0 0 26px}
.perk{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:6px;align-content:start}
.perk small{color:var(--muted);font-size:12px}
.perk .btn{justify-self:start}
.stamps{display:flex;gap:6px;margin:4px 0 0}
.stamps i{width:22px;height:22px;border-radius:50%;border:2px dashed var(--line)}
.stamps i.on{border:0;background:var(--point)}
/* 관리자 */
.memo{color:var(--warn)}
.spot-editor{position:relative;max-width:420px;cursor:crosshair}
.spot-editor img{width:100%;border-radius:10px}
.spot-editor i{position:absolute;transform:translate(-50%,-50%);background:var(--point);color:var(--point-ink);font:600 11px/1 var(--latin);padding:5px 7px;border-radius:999px;font-style:normal;pointer-events:none}
.look-edit{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:16px;align-items:start}
.ai-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:12px 0 24px}
.ai-card img,.ai-none{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;display:block}
.ai-none{display:grid;place-items:center;background:var(--soft2);color:var(--muted);font-size:13px}
.ai-prompt{white-space:pre-wrap;max-height:220px;overflow:auto}
.ai-edit{display:grid;gap:6px}
.insta-adm{background:var(--tint);border-radius:8px;padding:8px 10px;font-size:13px}
@media (max-width:1000px){
  .faq-bot{left:12px;bottom:84px}
  .faq-bot>summary{width:38px;height:38px;font-size:16px;opacity:.92}
  .look-edit{grid-template-columns:1fr}
}
@media (max-width:640px){
  .price-chips,.tag-chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 2px;scrollbar-width:none}
  .price-chips a,.tag-chips a,.price-own{flex:none}
  .spot-card{width:180px}
  .steps small{font-size:10px}
}

/* ───── 4차 (2026-10-23) ───── */
.pay-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.m-only{display:none}
@media (max-width:1000px){.m-only{display:inline-flex}}
/* REAL REVIEW */
.real-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.real-grid a{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;text-decoration:none}
.real-grid img{width:100%;height:100%;object-fit:cover}
.real-grid span{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:12px;display:grid}
.real-grid span b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.real-grid .stars{color:#ffd76a}
.real-grid .stars i{color:rgba(255,255,255,.4)}
@media (max-width:1000px){.real-grid{grid-template-columns:repeat(4,42%);overflow-x:auto;scrollbar-width:none}}
.verified.ss{background:#E7F7EC;color:#1E7B3C}
/* 문의 쓸 때 FAQ */
.faq-hint{background:var(--tint);border-radius:10px;padding:12px 14px;margin:0 0 14px;font-size:13px}
.faq-hint details{border-top:1px solid rgba(0,0,0,.06);padding:6px 0}
.faq-hint summary{cursor:pointer}
.faq-hint p{white-space:pre-line;color:var(--muted);margin:6px 0 0}
/* 감사카드 인쇄 */
.cards-print{background:#fff;padding:16px}
.cards-print .no-print{font-size:13px;color:var(--muted)}
.tcards{display:grid;grid-template-columns:repeat(2,1fr);gap:0;max-width:190mm;margin:0 auto}
.tcard{border:1px dashed #bbb;padding:7mm 8mm;height:66mm;box-sizing:border-box;display:grid;align-content:space-between;background:#fff}
.tc-brand{font:700 20px/1 var(--latin);letter-spacing:.04em;margin:0}
.tc-thx{margin:0;color:var(--point-deep);font-weight:600}
.tc-cpn{margin:0;font-size:13px}
.tc-cpn b{font-size:18px;color:var(--point-deep)}
.tc-row{display:flex;gap:10px;align-items:center}
.tc-row p{margin:0;font-size:12px;display:grid}
.tc-row small{color:var(--muted);font-size:10px}
.tc-qr svg{width:22mm;height:22mm;display:block}
@media print{.no-print{display:none}.cards-print{padding:0}@page{size:A4;margin:8mm}}

/* ───────── 움직임 — 작은 재미 (2026-10-23 사장님 「애니메이션 작은 재미」 12개) ─────────
   전부 0.3~0.9초 안에 끝난다(상단 띠만 계속 흐름). 폰 설정 「동작 줄이기」면 맨 아래 규칙이 다 끈다.
   JS 쪽(날아가기·하트·꽃가루·카드 등장)은 public/app.js 「움직임」 묶음. */
/* 3 버튼 눌림 */
.btn,.qbtn,.icon-btn{transition:transform .12s,opacity .2s}
.btn:active,.qbtn:active,.icon-btn:active{transform:scale(.94)}
/* 6 메뉴 밑줄이 왼→오로 그어진다 (원래 흐려지던 것 대신) */
.nav a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s}
.nav a:hover{opacity:1;background-size:100% 1px}
/* 5 PC: 사진에 마우스 올리면 두 번째 사진 (폰에선 display:none 이라 받지도 않는다) */
.ph{position:relative}
.ph .alt{display:none}
@media (hover:hover) and (min-width:1001px){
  .ph .alt{display:block;position:absolute;inset:0;opacity:0;transition:opacity .45s}
  .item:hover .ph .alt{opacity:1}
}
/* 4 카드가 아래에서 떠오른다 — .pre 는 JS 가 「아직 화면 아래에 있는」 카드에만 붙인다 (첫 화면은 깜빡이지 않게 그대로) */
.item.pre{opacity:0;transform:translateY(18px);transition:opacity .55s,transform .55s cubic-bezier(.2,.7,.3,1)}
.item.pre.in{opacity:1;transform:none}
/* 1 장바구니 숫자 톡 */
@keyframes bump{40%{transform:scale(1.7)}}
.bump{display:inline-block;animation:bump .4s}
/* 2 하트 퐁 */
@keyframes pop{30%{transform:scale(1.35)}60%{transform:scale(.9)}}
.pop svg{animation:pop .4s} /* 누른 순간만 — JS 가 붙였다 뗀다 (원래 찜한 하트는 안 튄다) */
.burst{position:fixed;pointer-events:none;z-index:1000;color:var(--point-deep);font-size:12px;line-height:1}
/* 7 페이지 넘어갈 때 부드럽게 + 목록 사진이 상세 큰 사진으로 이어진다 (크롬·최신 사파리) */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
::view-transition-group(pimg){animation-duration:.4s}
@media (min-width:1001px){#main-img{view-transition-name:pimg}}
@media (max-width:1000px){.slides img:first-child{view-transition-name:pimg}}
/* 8 주문 완료 꽃가루 */
.confetti{position:fixed;top:-12px;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:1000}
/* 9 스탬프가 하나씩 찍힌다 · 출석하면 도장 쾅 */
@keyframes stamp{0%{transform:scale(2.2) rotate(-25deg);opacity:0}60%{transform:scale(.9) rotate(4deg);opacity:1}100%{transform:none}}
.stamps i.on{animation:stamp .45s backwards}
.stamps i.on:nth-child(2){animation-delay:.08s}.stamps i.on:nth-child(3){animation-delay:.16s}.stamps i.on:nth-child(4){animation-delay:.24s}
.stamps i.on:nth-child(5){animation-delay:.32s}.stamps i.on:nth-child(n+6){animation-delay:.4s}
.perk{position:relative}
.perk.slam::after{content:"출석";position:absolute;right:12px;top:10px;width:52px;height:52px;border:3px solid var(--point-deep);border-radius:50%;
  display:grid;place-items:center;font:800 14px var(--latin);color:var(--point-deep);background:rgba(255,255,255,.92);transform:rotate(-14deg);animation:stamp .5s}
/* 10 방금 받은 쿠폰이 뒤집히며 들어온다 */
@keyframes flipin{0%{transform:perspective(600px) rotateY(90deg);opacity:0}70%{transform:perspective(600px) rotateY(-12deg);opacity:1}100%{transform:none}}
.coupons li.fresh{animation:flipin .7s;box-shadow:0 0 0 3px var(--point)}
/* 11 무료배송 막대가 차오른다 */
@keyframes fill{from{width:0}}
.freebar i b{animation:fill .9s cubic-bezier(.2,.7,.3,1)}
/* 12 상단 띠가 천천히 흐른다 — 읽어 주는 글은 .nt 한 번만, 흐르는 줄은 aria-hidden */
.notice{overflow:hidden;white-space:nowrap}
.notice .mq{display:inline-flex;animation:mq 40s linear infinite}
.notice .mq span{padding-right:5em}
.notice:hover .mq{animation-play-state:paused}
.notice .nt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .item.pre{opacity:1;transform:none}
  .notice .mq{display:none}
  .notice .nt{position:static;width:auto;height:auto;clip-path:none}
}
/* 관리자 사진 고르기 */
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.pick figure{margin:0;border:2px solid transparent;border-radius:8px;padding:4px;display:grid;gap:4px}
.pick figure:first-child{border-color:var(--point)}
.pick figure.shared{border-color:var(--point-deep)}
.pick figure.shared::before{content:"★ 공유용";font-size:11px;color:var(--point-deep)}
.pick figure.dropped{opacity:.3}
.pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.pick div{display:flex;flex-wrap:wrap;gap:3px}
/* 사이즈 표 — 이 상품에 맞는 줄 강조 */
.size-table th{width:auto}
.size-table tr.on td{background:var(--tint);font-weight:600}

/* ───────── 반응형 다듬기 (2026-10-23 폰 375 · 태블릿 768 · PC 1920 점검 결과 12개) ───────── */
/* 5 목록 필터: PC 는 그대로 펼침, 폰·태블릿은 「필터」 버튼 → 아래에서 올라오는 판 (#ft 체크박스로 여닫음) */
.ft-btn,.ft-head,.ft-dim{display:none}
@media all{
  .ft-btn{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 14px;margin-left:auto;margin-right:10px;border:1px solid var(--line);border-radius:999px;font:500 13px var(--latin);cursor:pointer}
  .ft-btn b{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--point);color:var(--point-ink);font-size:11px}
  .filters{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--bg);border-radius:16px 16px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 30px rgba(0,0,0,.15);max-height:80dvh;overflow:auto;transform:translateY(105%);visibility:hidden;transition:transform .3s,visibility .3s}
  .ft:checked ~ .filters{transform:none;visibility:visible}
  .ft:checked ~ .ft-dim{display:block;position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.35)}
  .ft-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:15px}
  .filters .color-chips,.filters .price-chips,.filters .tag-chips{flex-wrap:wrap;overflow:visible;justify-content:flex-start;margin:0 0 16px;padding:0}
  .filters .color-chips a,.filters .price-chips a,.filters .tag-chips a{min-height:40px;display:inline-flex;align-items:center;font-size:13px}
  body:has(.ft:checked){overflow:hidden}
}
/* 3 태블릿: 목록 3칸 */
@media (min-width:641px) and (max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid.slide-x{grid-template-columns:none}
}
/* 4 태블릿 상품 상세: 사진 왼쪽 · 이름·가격·옵션 오른쪽 */
@media (min-width:700px) and (max-width:1000px){
  .pdp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"media buy" "rest rest";gap:0 28px;padding-top:20px}
  .slides-wrap{margin-inline:0;border-radius:var(--r);overflow:hidden}
  .pdp .buy{padding-top:0}
}
@media (max-width:1000px){
  /* 1 아이폰은 16px 보다 작은 입력칸을 누르면 화면을 확대한다 */
  /* !important: 칸마다 글씨를 작게 준 규칙(.board-filter select 12px 등)이 있어서 — 새로 생기는 칸도 같이 막는다 */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font-size:16px !important}
  /* 2 손가락으로 누르는 범위 넓히기 (보이는 크기는 그대로) */
  .qbtn,.icon-btn{position:relative}
  .qbtn::after,.icon-btn::after{content:"";position:absolute;inset:-7px}
  .menu-btn{min-height:44px;min-width:56px}
  .top .nav.right a{display:inline-block;padding-block:12px}
  .list-bar select,.sort select{min-height:40px}
  /* 7 폰 메뉴: 사파리 주소창을 뺀 실제 높이로 */
  /* 8 너무 작은 글씨 */
  .nav sup{font-size:11px}
  /* 6 「?」 버튼: 스크롤을 내리는 동안은 왼쪽 끝으로 비켜 있다 (오른쪽은 카드의 하트·장바구니 버튼과 겹쳐서 왼쪽 그대로) */
  .faq-bot{transition:transform .3s,opacity .3s}
  .scroll-down .faq-bot:not([open]){transform:translateX(-30px);opacity:.35}
  /* 12 스크롤을 내리면 머리를 숨기고, 올리면 다시 */
  .top{transition:transform .3s}
  .scroll-down .top:not(:has([aria-expanded="true"])){transform:translateY(-100%)}
  .scroll-down .pdp-tabs{top:0}
  .pdp-tabs{transition:top .3s}
  /* 11 폰 상단 여백 줄이기 */
  .page{padding-top:16px}
  .list-title{padding-block:12px 18px}
}

/* ───────── 디자인 다듬기 (2026-10-23 8개) ───────── */
/* 5 메인 혜택 큰 칸: 상품 사진을 연핑크 막 아래로 은은하게 */
.ben-main{background:linear-gradient(rgba(244,180,198,.84),rgba(244,180,198,.84)),var(--bg,none) center 30%/cover,var(--point)}
/* 6 타임딜: 상품이 4개보다 적으면 그 수만큼 칸 · 가운데 (PC) */
@media (min-width:1001px){
  .deal .grid[style*="--n"]{grid-template-columns:repeat(var(--n),minmax(0,1fr));width:calc(var(--n) * 25%);margin-inline:auto}
}
/* 7 메인 큰 사진 — AUREL 모양(2026-11-02 사장님): 글씨는 위 가운데, 상품 카드는 아래 가운데, 넘김 막대는 그 밑 */
.hero .hero-box::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.08) 38%,transparent 60%);pointer-events:none}
.hero .hero-box{border-radius:32px}
.hero .hero-copy{z-index:3;left:50%;top:9%;transform:translateX(-50%);width:90%;text-align:center}
.hero .hero-copy p{font:400 clamp(15px,1.6vw,20px) var(--latin);letter-spacing:0;margin:0 0 14px;opacity:.92}
.hero .hero-copy h1{font:600 clamp(1.9rem,4.2vw,3.6rem)/1.15 var(--latin);letter-spacing:-.01em;text-transform:uppercase}
.hero .float-card{z-index:3;left:50%;transform:translateX(-50%);bottom:8%;width:min(84%,460px);max-width:none;border-radius:22px}
.hero .dots{bottom:3.5%}
/* 8 카드 색상 점 */
.cdots{display:flex;gap:4px;margin:2px 0 1px} /* .dots 는 슬라이더가 쓴다 — 이름 겹침 주의 */
.cdots i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
/* 4 없는 페이지 검색창 */
.nf-search{display:flex;gap:8px;max-width:460px;margin:20px auto}
.nf-search input{flex:1}

/* ───────── 손님 맞이 (2026-10-23): 카톡 상담 버튼 · 폰 첫 방문 가입 쿠폰 띠 ───────── */
.btn.kakao{background:#FEE500;border-color:#FEE500;color:#191919}
.cta-line .btn.kakao{margin-right:8px}
footer .btn.kakao{margin-top:8px}
.join-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;display:flex;align-items:center;gap:6px;
  background:var(--point-ink);color:#fff;border-radius:14px;padding:6px 6px 6px 16px;box-shadow:0 8px 24px rgba(0,0,0,.22);animation:joinin .4s cubic-bezier(.2,.7,.3,1)}
.join-bar[hidden]{display:none}
.join-bar a{flex:1;color:#fff;text-decoration:none;font-size:14px;padding-block:10px}
.join-bar b{color:var(--point)}
.join-bar button{background:none;border:0;color:#fff;font-size:22px;line-height:1;width:44px;height:44px;cursor:pointer}
body:has(.buybar) .join-bar{bottom:76px}
/* 띠가 떠 있는 동안 「?」·위로 버튼은 잠깐 숨김 (겹치지 않게) */
body:has(.join-bar:not([hidden])) .faq-bot,body:has(.join-bar:not([hidden])) .totop{visibility:hidden}
@keyframes joinin{from{transform:translateY(130%)}}

/* ───────── 움직임 2차 — 매끄럽게 (2026-10-23 10개, JS 는 app.js 「움직임 2차」) ───────── */
/* 1 상품 큰 사진 바꾸기 */
#main-img{transition:opacity .18s,filter .18s}
#main-img.swap{opacity:.25;filter:blur(4px)}
/* 2 옵션 줄이 미끄러져 들어오고, 지우면 접히며 사라진다 */
@keyframes rowin{from{opacity:0;transform:translateY(-6px)}}
[data-picked] li{animation:rowin .28s ease-out}
[data-picked] li.out{transition:opacity .2s,transform .2s;opacity:0;transform:translateX(16px)}
/* 3 금액 숫자: 굴러가는 동안 자리 폭이 흔들리지 않게 */
[data-total],[data-q="total"] b{font-variant-numeric:tabular-nums}
/* 4 사진이 받아지는 동안 흐린 미리보기 → 선명하게 */
img.lq{transition:filter .45s}
img.lq.ld{filter:blur(8px)}
/* 5 상세 탭: 흰 바탕(.tab-ind)이 지금 칸으로 미끄러진다 */
.pdp-tabs.has-ind{position:sticky}
.tab-ind{position:absolute;top:4px;bottom:4px;left:0;width:0;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .3s cubic-bezier(.3,.7,.3,1),width .3s;pointer-events:none}
.pdp-tabs.has-ind a{position:relative;z-index:1;transition:color .2s}
.pdp-tabs.has-ind a.on,.pdp-tabs.has-ind a:hover{background:none;box-shadow:none}
/* 6 PC 메뉴 펼침: 살짝 내려오며 */
.dd-menu{display:block;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
/* 7 폰 MENU 판: 위에서 스르륵 */
/* 8 접히는 칸 부드럽게 (최신 크롬·사파리 — 안 되는 브라우저는 그냥 열리고 닫힌다) */
:root{interpolate-size:allow-keywords}
details:not(.faq-bot)::details-content{height:0;overflow:clip;transition:height .3s ease,content-visibility .3s allow-discrete}
details[open]:not(.faq-bot)::details-content{height:auto}
/* 9 주문 진행 단계: 지난 단계까지 선이 차례로 차오른다 */
@keyframes stepline{from{transform:scaleX(0)}}
@keyframes steppop{0%{transform:scale(0)}70%{transform:scale(1.3)}}
.steps li.done::after{transform-origin:left;animation:stepline .35s ease-out backwards}
.steps li.done::before{animation:steppop .3s ease-out backwards}
.steps li.done:nth-child(2)::after{animation-delay:.1s}.steps li.done:nth-child(2)::before{animation-delay:.4s}
.steps li.done:nth-child(3)::after{animation-delay:.5s}.steps li.done:nth-child(3)::before{animation-delay:.8s}
.steps li.done:nth-child(4)::after{animation-delay:.9s}.steps li.done:nth-child(4)::before{animation-delay:1.2s}
/* 10 리뷰 별점 막대: 화면에 들어올 때 차오른다 (안 되는 브라우저는 열리자마자) */
.rv-bars i b{animation:fill .9s cubic-bezier(.2,.7,.3,1) both}
@supports (animation-timeline:view()){
  .rv-bars i b{animation:fill linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
}

/* 옆으로 넘기는 줄 진행 막대 — AUREL 모양(2026-11-02 사장님: 오른쪽 흐림 대신 늘 보이는 막대) */
.slide-x{scrollbar-width:none}
.slide-x::-webkit-scrollbar{display:none}
.sbar{height:2px;background:var(--line);margin-top:22px;overflow:hidden}
.sbar i{display:block;height:100%;width:var(--w);background:var(--point-deep);transform:translateX(var(--x))}

/* 11-02 점검 */
body{word-break:keep-all;overflow-wrap:break-word} /* 한글이 「전신스/타킹」처럼 글자 중간에서 끊기지 않게 */
@media (max-width:1000px){
  .faq-bot{display:none} /* 폰: 떠 있는 「?」가 글씨를 가렸다 — FAQ 는 메뉴 COMMUNITY → FAQ */
  .at-buy .totop{opacity:0;pointer-events:none} /* 상세: 폼의 장바구니·구매하기가 보이면 맨 위로(^)가 비킨다 */
}

/* 메인 배너 6장(11-02): 장마다 사진 · 글 · 작은 상품 카드. 글은 클릭을 막지 않는다 */
.slide-link{display:block;height:100%;position:relative}
.hero .slide-link::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.08) 38%,transparent 60%)}
.hero-copy{pointer-events:none}
.hero .float-card{width:min(70%,380px);padding:9px 18px 9px 9px;gap:12px;border-radius:16px;bottom:9%}
.hero .fc-img{width:50px;height:50px;border-radius:10px}
.hero .float-card b{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero .float-card small{font-size:12px}

/* ───────── 머리 아이콘 + 폰 메뉴 서랍 (2026-11-02 사장님: 글씨 MENU/CART → 아이콘, 메뉴는 요즘 앱처럼) ───────── */
.m-ico,.cart-a>.ico,.bag-n{display:none}
.burger path{transition:transform .3s cubic-bezier(.2,.7,.2,1);transform-box:fill-box;transform-origin:center}
.menu-btn[aria-expanded="true"] .b1{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .b2{transform:translateY(-3px) rotate(-45deg)}
@media (max-width:1000px){
  .menu-btn .ico,.top .nav.right .ico{width:24px;height:24px;stroke-width:1.6}
  .menu-btn .dot{position:absolute;top:10px;right:8px}
  .top .nav.right{display:flex;gap:2px;justify-self:end;margin-right:-10px}
  .top .nav.right>a{display:grid;place-items:center;width:44px;height:44px;padding:0;position:relative;background:none}
  .m-ico{display:grid}
  .cart-a .t{display:none}
  .cart-a>.ico{display:block}
  .bag-n:not([hidden]){display:grid;place-items:center;position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--point);color:var(--point-ink);font:700 10px/1 var(--latin);font-style:normal}
  /* 서랍: 어두운 막 + 왼쪽 판(86%). 열려 있으면 뒤 화면은 안 굴러간다 */
  .top:has(.m-menu:not([hidden])){z-index:200}
  body:has(.m-menu:not([hidden])){overflow:hidden}
  .m-menu:not([hidden]){display:block;position:fixed;inset:0;z-index:200}
  .mm-dim{position:absolute;inset:0;background:rgba(30,16,24,.42);backdrop-filter:blur(2px);animation:mmfade .3s ease-out}
  .mm-panel{position:absolute;inset:0 auto 0 0;width:100%;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;padding:0 22px calc(32px + env(safe-area-inset-bottom));animation:mmin .34s cubic-bezier(.2,.8,.2,1)}
  @keyframes mmin{from{transform:translateX(-100%)}}
  @keyframes mmfade{from{opacity:0}}
  .mm-head{display:flex;justify-content:space-between;align-items:center;height:64px;position:sticky;top:0;background:var(--bg);z-index:1}
  .mm-head .logo{font-size:1.35rem}
  .mm-x{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;border:0;background:none;color:var(--ink);cursor:pointer}
  .mm-search{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:999px;padding:0 18px;margin:4px 0 18px}
  .mm-search .ico{width:18px;height:18px;color:var(--muted)}
  .mm-search input{border:0;background:none;padding:14px 0;font-size:15px;min-width:0}
  .mm-search input:focus{outline:none}
  .mm-search:focus-within{box-shadow:0 0 0 2px var(--point)}
  .mm-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:26px}
  .mm-quick a{display:grid;justify-items:center;gap:6px;padding:12px 2px;border-radius:14px;background:var(--soft);text-decoration:none;font-size:12px;color:var(--ink)}
  .mm-quick .ico{width:22px;height:22px;stroke-width:1.6;color:var(--ink)}
  .mm-quick a:active{background:var(--point)}
  .mm-label{font:600 11px var(--latin);letter-spacing:.18em;color:var(--muted);margin:0 0 10px}
  .mm-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
  .mm-cats a{position:relative;display:block;aspect-ratio:1.25;border-radius:16px;overflow:hidden;text-decoration:none;background:var(--soft)}
  .mm-cats img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
  .mm-cats a::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.55))}
  .mm-cats b{position:absolute;left:12px;bottom:10px;z-index:1;color:#fff;font:600 14px var(--latin)}
  .mm-cats .mm-all{display:flex;flex-direction:column;justify-content:flex-end;padding:12px;background:var(--point)}
  .mm-cats .mm-all::after{display:none}
  .mm-cats .mm-all b{position:static;color:var(--point-ink);font-size:22px;letter-spacing:-.02em}
  .mm-cats .mm-all small{color:var(--point-ink);font-size:12px;opacity:.8}
  .mm-links{display:grid;margin-bottom:24px;border-top:1px solid var(--line)}
  .mm-links a,.mm-ig{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;border-bottom:1px solid var(--line);font:600 16px var(--latin);text-decoration:none;color:var(--ink)}
  .mm-links .arr,.mm-ig .arr{width:18px;height:18px}
  .mm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
  .mm-chips a{padding:10px 16px;border:1px solid var(--line);border-radius:999px;font:500 13px var(--latin);text-decoration:none;color:var(--ink)}
  .mm-chips a:active{background:var(--point);border-color:var(--point)}
  .mm-ig{border-top:1px solid var(--line)}
}
@media (max-width:1000px) and (prefers-reduced-motion:reduce){.mm-panel,.mm-dim{animation:none}}

/* ───────── 포인트 움직임 (2026-11-02 사장님 「최신 애니메이션·마이크로인터랙션 포인트로」) ─────────
   「동작 줄이기」면 위쪽 *{animation:none!important} 가 전부 끈다. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
/* 1 메인 배너: 사진이 천천히 다가오고, 글 → 상품 카드 순서로 올라온다 */
@keyframes kb{from{transform:scale(1.08)}}
.slider .slide.on .slide-link img{animation:kb 6s cubic-bezier(.2,.6,.3,1) both}
.slider .slide.on .hero-copy p{animation:rise .7s .15s both}
.slider .slide.on .hero-copy h1{animation:rise .8s .28s both}
@keyframes cardup{from{opacity:0;transform:translate(-50%,22px)}}
.hero .slide.on .float-card{animation:cardup .6s .5s both}
/* 2 배너 점: 인스타 스토리처럼 지금 막대가 5초 동안 차오른다 (JS 가 넘길 때마다 5초를 새로 센다) */
.dots button{position:relative;overflow:hidden;border-radius:2px}
.dots button.on{background:rgba(255,255,255,.5)}
.dots button.on::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:dotfill 5s linear both}
@keyframes dotfill{from{transform:scaleX(0)}}
/* 3 섹션 제목이 화면에 들어올 때 떠오른다 — 브라우저가 스크롤로 직접 돌린다(JS 없음, 안 되는 브라우저는 그냥 보임) */
@supports (animation-timeline:view()){
  .sec-head h2{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
/* 4 머리: 조금이라도 내리면 아래에 옅은 그림자 */
@supports (animation-timeline:scroll()){
  .top{animation:hdr linear both;animation-timeline:scroll();animation-range:0 60px}
  @keyframes hdr{to{box-shadow:0 6px 18px rgba(58,31,42,.07)}}
}
/* 5 눌렀을 때 살짝 들어갔다 튕겨 나온다 (transform 과 따로 노는 scale 속성이라 기존 위치 잡기와 안 섞인다) */
.item .ph,.cat,.float-card,.mm-cats a,.mm-quick a,.mm-chips a{transition:scale .35s cubic-bezier(.3,1.6,.5,1)}
.item a:active .ph,.cat:active,.float-card:active,.mm-cats a:active,.mm-quick a:active,.mm-chips a:active{scale:.96;transition-duration:.1s}
@media (max-width:1000px){
  /* 6 떠 있는 구매하기: 몇 초마다 빛이 한 번 스치고, 누르면 쏙 */
  .buybar{overflow:hidden;transition:opacity .25s,transform .25s,scale .3s cubic-bezier(.3,1.6,.5,1)}
  .buybar:active{scale:.95;transition-duration:.1s}
  .buybar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-100%);animation:sheen 4.5s 1.5s infinite}
  @keyframes sheen{0%{transform:translateX(-100%)}25%,100%{transform:translateX(100%)}}
  /* 7 메뉴 서랍: 칸들이 위에서부터 차례로 들어온다 */
  .mm-panel>*{animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
  .mm-panel>:nth-child(2){animation-delay:.05s}.mm-panel>:nth-child(3){animation-delay:.1s}
  .mm-panel>:nth-child(4),.mm-panel>:nth-child(5){animation-delay:.15s}.mm-panel>:nth-child(6){animation-delay:.2s}
  .mm-panel>:nth-child(n+7){animation-delay:.25s}
}
/* 사진이 늦게 오면 휙 대신 서서히 (JS 가 html 에 .fade-img 를 붙여야만 켜진다 — JS 가 죽어도 사진은 보인다) */
.fade-img img[loading=lazy]{transition:opacity .6s ease}
.fade-img img[loading=lazy]:not(.loaded){opacity:0}
@media (max-width:1000px){
  /* 메뉴 SHOP: 칸이 홀수면 ALL 을 맨 위 가로 띠로 — 마지막 칸이 혼자 남지 않게 */
  .mm-cats:has(>a:last-child:nth-child(odd)) .mm-all{grid-column:1/-1;aspect-ratio:3.4;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:14px 16px}
}
/* PC 메인 배너: 반반 — 왼쪽 연핑크 바탕에 글·상품 카드, 오른쪽에 세로 사진 (세로 사진이 다리만 잘려 보이던 것) */
@media (min-width:1001px){
  .hero .hero-box{aspect-ratio:1400/620}
  .hero .hero-box::after,.hero .slide-link::after{display:none}
  .hero .slide{background:linear-gradient(120deg,color-mix(in srgb,var(--point) 18%,#fff),color-mix(in srgb,var(--point) 38%,#fff))}
  .hero .slide-link{position:absolute;inset:0 0 0 auto;width:46%}
  .hero .slide-link img{object-position:center 35%}
  .hero .hero-copy{left:7%;top:42%;transform:translateY(-50%);width:42%;text-align:left;color:var(--ink);text-shadow:none}
  .hero .hero-copy p{color:var(--point-deep);opacity:1}
  .hero .float-card{left:7%;transform:none;bottom:13%;width:min(40%,380px)}
  .hero .slide.on .float-card{animation-name:rise}
  .hero .dots{left:77%}
}
/* 관리자 자주 쓰는 답변 버튼 */
.tpl-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}

/* 매거진: 분류 꼬리표 · 메인 칸 · 글 아래 「이런 글도 있어요」 (11-03) */
.mag-cat{justify-self:start;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--point-ink);background:#FCE9EF;border-radius:999px;padding:2px 9px;margin-top:6px}
.mag-grid b{line-height:1.45}
.mag-home{grid-template-columns:repeat(4,1fr)}
.mag-home .ph,.mag-more .ph{aspect-ratio:3/4;overflow:hidden;border-radius:6px}
.mag-home a:hover img,.mag-more a:hover img{transform:scale(1.04)}
.mag-home img,.mag-more img{transition:transform .5s ease}
.mag-more{margin:56px 0 8px;padding-top:32px;border-top:1px solid var(--line)}
.mag-more h3{font-size:18px;margin:0 0 18px}
.mag-picks{margin:56px 0 0;padding:28px 24px;background:#FFF6F8;border-radius:10px}
.mag-picks .sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 18px}
.mag-picks h3{font-size:18px;margin:0;color:var(--point-ink)}
.mag-picks .sec-head a{font-size:13px;color:var(--point-ink)}
@media(max-width:640px){.mag-picks{padding:22px 14px}}
@media (max-width:1000px){
  .mag-grid.slide-x{grid-template-columns:none;grid-auto-columns:46%;gap:14px}
  .mag-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .mag-cats a{white-space:nowrap}
}

/* ═════════ OFFGRAY 구성 (2026-11-05 잠옷몰) — 카페24 OFFGRAY 스킨의 배치를 따르되 코드는 자체 작성 ═════════
   빨강 하나(--point) + 연노랑 띠. 색을 바꾸려면 여기 :root 만 고친다 */
:root{--point:#D9201C;--point-ink:#fff;--point-deep:#D9201C;--sale:#D9201C;--topbar:#FFF8B8;--card-bg:#FFFFFF;--r:10px}
/* 맨 위 흐르는 띠 */
.notice{background:var(--topbar);color:var(--point);font:500 12px var(--latin);padding:5px 0}
/* 머리: 왼쪽 로고 · 가운데 알약 메뉴 · 오른쪽 동그란 아이콘 셋(세로) */
.og-top{position:sticky;top:0;z-index:30;background:#fff;transition:background .3s,top .3s}
@media (min-width:1001px){.page>.wrap,footer .wrap{padding-right:88px}}
.og-top .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:14px;max-width:none;padding-inline:28px;min-height:72px}
.og-top .logo{font:800 2.2rem/1 "Outfit",var(--latin);color:var(--point);letter-spacing:-.03em;transform:scaleY(1.15)}
.og-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(240,240,240,.85);backdrop-filter:blur(10px);font:500 13px var(--latin)}
.og-nav>a,.og-nav .dd>a{display:block;padding:9px 20px;border-radius:999px;text-decoration:none;color:#555}
.og-nav>a:hover,.og-nav .dd:hover>a{background:#fff;color:var(--ink)}
.og-nav .dd-menu{left:0;top:100%}
.og-ico{position:fixed;right:24px;top:62px;display:grid;gap:10px;z-index:31}
.og-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);color:var(--ink);text-decoration:none}
.og-btn .ico{width:19px;height:19px}
.og-btn .bag-n{display:grid !important;place-items:center;position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--point);color:#fff;font:700 10px/1 var(--latin);font-style:normal}
.og-dd .dd-menu{left:auto;right:100%;top:0;margin-right:10px}
.og-btn .dot{position:absolute;top:2px;right:2px}
/* 메인: 머리가 첫 화면 위에 투명하게 얹힌다 (스크롤하면 흰 바탕 — app.js 가 body.scrolled) */
.home .og-top{position:fixed;left:0;right:0;top:24px;background:transparent}
.home .og-nav{background:rgba(255,255,255,.7)}
.home.scrolled .og-top{top:0} /* 참고 스킨처럼 내려도 투명 — 로고·메뉴가 사진 위에 뜬다 */
.home.scrolled .og-nav{background:rgba(240,240,240,.85)}
.og-home .sec{max-width:1600px;margin:0 auto;padding:90px 88px 0 28px} /* 오른쪽은 떠 있는 아이콘 줄 자리 */
.og-home .sec-head{align-items:center;margin-bottom:24px}
.og-home .sec-head h2{font:800 1.75rem var(--latin);letter-spacing:-.02em;text-transform:uppercase}
.og-home .sec-head h2 small{font:500 15px var(--latin);margin-left:6px;color:var(--ink);text-transform:none}
.arrows{display:flex;gap:6px;align-items:center}
.arrows button{background:none;border:0;padding:4px;cursor:pointer;color:var(--ink)}
.arrows button:disabled{color:#bbb;cursor:default}
.arrows .ico{width:26px;height:26px;stroke-width:1.6}
.arrows .more{font:500 12px var(--latin);color:var(--muted);text-decoration:none;margin-right:10px}
/* 옆으로 넘기는 줄: PC 4칸이 보이고 화살표로 넘긴다 (진행 막대는 숨김) */
.og-home .slide-x{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.og-home .slide-x::-webkit-scrollbar{display:none}
.og-home .slide-x>*{scroll-snap-align:start}
.og-home .sbar{display:none}
/* 첫 화면: 화면 꽉 찬 사진 + 왼쪽 아래 큰 글씨 */
.og-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#ddd}
.og-hero .slide-link{display:block;width:100%;height:100%}
/* ponytail: 1688 사진은 800×800 정사각에 세로 사진 + 양옆 흰 여백 → 넓은 칸에선 134% 로 키워 여백을 잘라낸다.
   여백 없는 사진(관리자 배너)엔 조금 더 확대될 뿐 — 배너를 쓰기 시작하면 .og-hero.banner 로 이 줄을 빼면 된다 */
.og-hero .slide-link img,.og-wide img{width:134%;max-width:none;margin-left:-17%;height:100%;object-fit:cover;object-position:center 30%}
.og-hero-copy{position:absolute;left:28px;bottom:9%;z-index:2;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.og-hero-copy h1{font:800 clamp(2.4rem,5vw,4.6rem)/1.02 var(--latin);letter-spacing:-.03em}
.og-hero-copy p{font-size:16px;margin:16px 0 0;font-weight:500}
.og-hero .dots{left:auto;right:28px;transform:none;bottom:9%}
/* 상품 카드: 회색 정사각 사진 · 가운데 글 */
.og-home .grid,.page .grid{gap:44px 20px}
.item .ph{border-radius:var(--r);background:var(--card-bg);aspect-ratio:3/4} /* 1688 정사각 사진의 양옆 흰 여백이 3:4 로 잘려 나간다 */
.item .txt{text-align:center;justify-items:center;gap:5px}
.item .nm{font-size:14px;font-weight:500;margin-top:14px;max-width:100%}
.item .pr{font-size:14px}
.pr s{color:#aaa;font-weight:400}
.pr em{color:var(--sale);font-style:normal;font-weight:700}
.item .cdots{justify-content:center}
.item .cdots i{width:11px;height:11px}
.item .rv{font-size:12px;color:var(--ink)}
.item .rv small{color:var(--muted);font-size:12px}
.item .badge{display:none}
/* 분류 카드 */
.og-cat{text-decoration:none;display:grid;gap:4px;text-align:center}
.og-cat .cat-img{display:block;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--card-bg);margin-bottom:10px}
.og-cat .cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.og-cat:hover img{transform:scale(1.04)}
.og-cat b{font:700 15px var(--latin)}
.og-cat small{color:var(--muted);font-size:13px}
/* 기획 한 벌: 왼쪽 큰 사진 · 오른쪽 회색 판 */
.og-edit{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.edit-ph{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--card-bg)}
.edit-ph img{width:100%;height:100%;object-fit:cover}
.edit-box{border-radius:var(--r);background:#F2F2F2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 10%;gap:26px}
.edit-box h2{font:800 1.6rem var(--latin)}
.edit-item{width:min(320px,70%);aspect-ratio:1;border-radius:var(--r);overflow:hidden}
.edit-item img{width:100%;height:100%;object-fit:cover}
.edit-box p{margin:0;font-size:14px;line-height:1.9;color:#333}
.edit-more{font:500 12px var(--latin);color:var(--muted);text-decoration:none}
/* 추천: 긴 모델 사진 + 아래 작은 상품 줄 */
.rec{display:grid;gap:14px;align-content:start}
.rec-ph{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--card-bg)}
.rec-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.rec:hover .rec-ph img{transform:scale(1.04)}
.rec-info{display:flex;gap:12px;align-items:center;text-decoration:none}
.rec-info>img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:none;background:var(--card-bg)}
.rec-info span{display:grid;gap:2px;min-width:0}
.rec-info b{font-weight:500;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-info .pr{padding:0;font-size:13px}
.rec-info small{font-size:11px;color:var(--muted)}
/* 넓은 사진 띠 */
.og-wide{margin-top:100px}
.og-wide a{position:relative;display:block;height:min(90svh,800px);overflow:hidden;color:#fff;text-decoration:none}
.og-wide span{position:absolute;left:28px;bottom:9%;display:grid;gap:14px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.og-wide b{font:800 clamp(2rem,4vw,3.6rem)/1.05 var(--latin);letter-spacing:-.03em}
.og-wide small{font:600 13px var(--latin)}
/* 인스타 */
.og-insta .insta-row{grid-template-columns:repeat(5,1fr);gap:16px}
.og-insta .insta-row a{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r)}
.og-insta .insta-row img{width:100%;height:100%;object-fit:cover}
/* 푸터: 흰 바탕 · 작은 글씨 */
/* 푸터: 참고 스킨처럼 왼쪽 사업자 정보 · 오른쪽 CS CENTER · BANK ACCOUNT · 아래 약관 링크 + SNS */
footer.og-foot{background:#fff;color:var(--ink);margin-top:110px;padding-block:60px 40px}
footer.og-foot .wrap{max-width:none;padding-inline:28px 88px;display:grid;grid-template-columns:1fr 220px 220px;grid-template-areas:"biz cs bank" "links links sns";gap:40px 30px}
.of-biz{grid-area:biz;font-size:12px;line-height:1.9;color:#333}
.of-biz p{margin:0;font-size:12px}
.of-biz i{font-style:normal;margin:0 6px;color:#bbb}
.of-biz .copy{margin-top:14px}
.of-col h3{font:700 13px var(--latin);margin-bottom:10px}
.of-col p{font-size:12px;line-height:1.8;margin:0;color:#333}
.of-col .big{font:700 15px var(--latin);margin-bottom:4px}
.of-col:nth-of-type(2){grid-area:cs}.of-col:nth-of-type(3){grid-area:bank}
.of-links{grid-area:links;display:flex;gap:22px;font:500 12px var(--latin)}
.of-links a{color:var(--ink)}
.of-sns{grid-area:sns;display:flex;gap:14px;justify-content:flex-end;align-items:center}
.of-sns a{color:var(--ink)}
.of-sns .ico{width:20px;height:20px}
.biz{color:#555}
/* 목록·상세 */
.list-title{font:800 1.6rem var(--latin);text-transform:uppercase;padding-block:50px 30px}
.buy .price em{color:var(--sale)}
.btn.primary{background:var(--point);border-color:var(--point);color:#fff}
@media (max-width:1000px){
  .og-top .wrap{padding-inline:16px;min-height:60px}
  .og-top .logo{font-size:1.7rem;position:absolute;left:50%;transform:translateX(-50%) scaleY(1.15)}
  .og-nav{display:none}
  .og-ico{position:static;display:flex;gap:4px}
  .og-ico .og-dd,.og-ico .og-search{display:none}
  .og-btn{width:38px;height:38px}
  .home .og-top{top:22px}
  .home .menu-btn{color:#fff}
  .home.scrolled .menu-btn{color:var(--ink)}
  .og-home .sec{padding:60px 16px 0}
  .og-home .sec-head h2{font-size:1.3rem}
  .og-home .slide-x{grid-auto-columns:46%;gap:12px}
  .og-cats .slide-x{grid-auto-columns:42%}
  .og-home .rec-row.slide-x{grid-auto-columns:72%}
  .og-edit{grid-template-columns:1fr}
  .edit-box{padding:40px 24px}
  .og-hero-copy,.og-wide span{left:16px}
  .og-insta .insta-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;overflow-x:auto}
  .arrows button{display:none}
  footer.og-foot .wrap{padding-inline:16px;grid-template-columns:1fr;grid-template-areas:"biz" "cs" "bank" "links" "sns";gap:26px}
  .of-sns{justify-content:flex-start}
}

/* ═════════ OFFGRAY 구성 2 (2026-11-05): 메인 밖 화면 · 목록 · 상세를 참고 스킨에 맞춤 ═════════ */
/* 메인 밖에서는 메뉴가 알약 없이 글자만 (참고: 15px · 보통 굵기 · 검정) */
body:not(.home) .og-nav{background:none;backdrop-filter:none;gap:0;font:400 15px var(--latin)}
body:not(.home) .og-nav>a,body:not(.home) .og-nav .dd>a{color:#000;padding:16px 24px}
body:not(.home) .og-nav>a:hover,body:not(.home) .og-nav .dd:hover>a{background:none;text-decoration:underline;text-underline-offset:5px}
/* 목록: 가운데 제목 · 분류 알약 · Total / 정렬 */
.list-title{font:500 20px var(--latin);text-transform:uppercase;padding-block:50px 26px;letter-spacing:0}
.og-subcats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 50px}
.og-subcats a{background:#F8F8F8;color:#6F6F6F;font:500 14px var(--latin);padding:10px 18px;border-radius:40px;text-decoration:none}
.og-subcats a:hover{color:var(--ink)}
.og-subcats a.on{background:var(--point);color:var(--topbar)}
.list-bar p{font-size:14px}
.list-bar p b{color:var(--ink);font-weight:400}
.filters{left:50% !important;right:auto !important;width:min(560px,100%);transform:translate(-50%,105%) !important}
.ft:checked ~ .filters{transform:translate(-50%,0) !important}
.item .nm{font-size:15px;font-weight:400}
/* 상세: 왼쪽 큰 사진 · 오른쪽 붙어 다니는 정보판 */
.pdp{grid-template-columns:minmax(0,1fr) 469px;gap:0 90px;max-width:none;padding-right:30px}
.pdp-page>.wrap{max-width:none;padding-inline:28px 88px}
.buy{top:110px}
.buy h1{font:500 23px/1.35 var(--body);margin:6px 0 16px}
.buy .price{font-size:20px;font-weight:700}
.buy .price s{font-size:14px;font-weight:400;color:#aaa}
.buy .price em{color:var(--sale);font-style:normal;margin-right:4px}
.pd-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:26px 0 18px;font:500 13px var(--latin)}
.pd-tabs a{padding:0 0 10px;color:#aaa;text-decoration:none;margin-bottom:-1px}
.pd-tabs a.on{color:var(--ink);border-bottom:2px solid var(--ink)}
.pd-desc{font-size:14px;line-height:1.9;color:#333;margin-bottom:24px}
.pd-desc p{margin:0}
.buy dl.info{display:none}
.opt-box{border:0;border-radius:0;overflow:visible}
.opt-box>summary{display:none}
.opt-box .field{padding:0 0 16px}
.opt-box .field label{display:block;font:600 12px var(--latin);text-transform:uppercase;margin-bottom:10px}
.opt-box select,.opt-box input[type=number]{border:1px solid var(--line);border-radius:6px;height:44px;padding:0 12px;width:100%}
.swatches{gap:10px;margin-bottom:12px}
.swatches button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line)}
.ship-note{border-radius:8px;padding:14px 16px}
.ship-note .ico{flex:none;width:34px;height:34px;padding:7px;border-radius:50%;background:var(--point);color:#fff}
.total span{font:700 13px var(--latin)}
.actions{gap:0}
.actions .btn{border-radius:0;font:600 13px var(--latin);letter-spacing:.02em;padding:16px}
.actions .btn:not(.primary){background:#fff;border:1px solid var(--line);color:var(--ink)}
@media (max-width:1000px){
  body:not(.home) .og-nav{display:none}
  .og-subcats{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;margin-bottom:24px}
  .og-subcats a{flex:none}
  .pdp{grid-template-columns:1fr;padding-right:0}
  .pdp-page>.wrap{padding-inline:16px}
  .filters{left:0 !important;width:100%;transform:translateY(105%) !important}
  .ft:checked ~ .filters{transform:none !important}
}
/* 상세: 오늘 조회 · 쿠폰받기 (참고 스킨의 「오늘 N명이 관심」 · 「쿠폰받기」 자리 — 숫자는 진짜 조회수) */
.pd-views{display:inline-block;margin:0 0 8px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:#555}
.pd-views b{color:var(--point)}
.pd-price{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.cp-btn{display:inline-flex;align-items:center;gap:4px;background:var(--point);color:#fff;font:600 12px var(--latin);padding:7px 12px;border-radius:4px;text-decoration:none;white-space:nowrap;margin-bottom:6px}
.cp-btn .ico{width:13px;height:13px;stroke-width:2.4}
/* 첫 화면: 동영상이 있으면 꽉 채우고, 없으면 사진이 천천히 확대된다 */
.og-video video{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:no-preference){
  .og-hero.slider .slide.on .slide-link img{animation:og-kb 14s ease-out infinite alternate}
  @keyframes og-kb{from{transform:scale(1)}to{transform:scale(1.12) translateY(-2%)}}
}

/* ═════════ OFFGRAY 구성 3 (2026-11-05): 메인을 참고 데모 실측값(1600px 화면)에 맞춤 ═════════
   화면 꽉 채움 · 양옆 30px · 줄 사이 150px · 제목 Pretendard 35px/900 · 상품 사진 정사각(1688 사진이 원래 정사각) */
.og-top .logo{transition:filter .2s}
.og-top .logo:hover{filter:blur(4px)} /* 참고: 로고에 마우스를 올리면 흐려진다 */
.og-hero{height:calc(100svh - 24px);margin-bottom:150px}
.og-hero-copy{left:30px;bottom:45px}
.og-hero-copy h1{font:800 clamp(24px,4vw,48px)/1.3 var(--body);letter-spacing:-.02em}
.og-hero-copy p{display:none}
.og-home .sec{max-width:none;padding:0 30px;margin:0 0 150px}
.og-home .sec-head{align-items:center;margin-bottom:20px}
.og-home .sec-head h2{font:900 35px/1 var(--body);letter-spacing:-.02em}
.og-home .sec-head h2 small{font:600 24px var(--body);margin-left:10px}
.og-home .arrows{gap:30px}
.og-home .arrows button{width:30px;height:30px;padding:0}
.og-home .arrows .ico{width:30px;height:30px;stroke-width:1.4}
.og-home .slide-x{grid-auto-columns:calc((100% - 60px)/4);gap:20px}
/* 분류: 3:4 사진만 (글자 없음) */
.og-cat .cat-img{margin:0}
/* 상품 카드: 정사각 사진 · 이름 14px · 「28% 43,000원 60,000원」 · 색 동그라미 15px · 리뷰 12px */
.item .ph{aspect-ratio:1;border-radius:10px;background:#fff}
.item .txt{gap:0;padding:20px 7px 0}
.item .nm{font-size:14px;font-weight:400;line-height:1.3;margin:0}
.item .pr{display:inline-flex;align-items:baseline;gap:5px;margin-top:8px;font-size:15px;font-weight:400}
.item .pr b{font-weight:400;order:1}
.item .pr em{order:0;font-weight:400;color:#C60008}
.item .pr s{order:2;font-size:13px;color:#bbb}
.item .cdots{gap:8px;margin:15px 0 10px}
.item .cdots i{width:15px;height:15px}
.item .rv,.item .rv small{font-size:12px;color:#000;margin-top:4px}
@media (hover:hover){.item .quick{opacity:0;transition:opacity .2s}.item:hover .quick{opacity:1}} /* 참고: 찜·담기 단추는 마우스를 올렸을 때만 */
/* THE ESSENTIAL EDIT: 왼쪽 사진(판 높이에 맞춰 꽉) · 오른쪽 #F7F7F7 판 */
.og-edit{gap:20px;min-height:600px}
.edit-ph{aspect-ratio:auto;position:relative}
.edit-ph img{position:absolute;top:0;left:-17%;width:134%;max-width:none;height:100%;object-fit:cover} /* 1688 정사각 사진의 양옆 흰 여백을 잘라 낸다 */
.edit-box{background:#F7F7F7;gap:50px;padding:70px}
.edit-box h2{font:700 23px var(--body)}
.edit-item{width:min(400px,100%);border-radius:0;background:none}
.edit-item img{mix-blend-mode:multiply} /* 사진 양옆 흰 여백이 회색 판에 녹아든다 */
.edit-box p{font-size:16px;line-height:1.5;color:#000;max-width:65%}
.edit-more{font:500 14px var(--body);color:#000;opacity:.5;margin-top:-30px;transition:opacity .3s}
.edit-more:hover{opacity:1}
/* RECOMMENDED: 9:14 세로 사진 + 아래 124px 상품 사진 · 오른쪽 글 */
.rec{gap:15px}
.rec-ph{aspect-ratio:9/14}
.rec-info{display:grid;grid-template-columns:124px 1fr;gap:15px;align-items:start}
.rec-info>img{width:124px;height:124px;border-radius:10px;background:#fff}
.rec-info span{padding-top:10px;gap:0}
.rec-info b{font-size:14px;font-weight:400;line-height:1.3}
.rec-info .pr{display:inline-flex;gap:5px;margin-top:8px;font-size:15px;font-weight:400}
.rec-info .pr b{order:1;font-weight:400}.rec-info .pr em{order:0;font-weight:400;color:#C60008}.rec-info .pr s{order:2;font-size:13px;color:#bbb}
.rec-info small{font-size:12px;color:#000;margin-top:6px}
/* 넓은 사진: 화면 끝까지 16:9, 글자 없음 */
.og-wide{margin:0 0 150px}
.og-wide a{height:auto;aspect-ratio:16/9}
/* FOLLOW US: 꽉 찬 5칸 줄 + 화살표 */
.og-insta .insta-row.slide-x{grid-template-columns:none;grid-auto-columns:calc((100% - 80px)/5);gap:20px}
@media (max-width:1000px){
  .og-hero{margin-bottom:70px}
  .og-hero-copy{left:10px;bottom:40px}
  .og-home .sec{padding:0 10px;margin-bottom:70px}
  .og-home .sec-head h2{font-size:20px;font-weight:800}
  .og-home .sec-head h2 small{font-size:15px}
  .og-home .slide-x{grid-auto-columns:46%;gap:10px}
  .og-home .rec-row.slide-x{grid-auto-columns:72%}
  .og-edit{display:flex;flex-direction:column;gap:10px}
  .edit-ph{aspect-ratio:3/4}
  .edit-box{gap:30px;padding:40px}
  .edit-box h2{font-size:16px}
  .edit-item{max-width:200px}
  .edit-box p{font-size:13px;max-width:100%}
  .rec-info{grid-template-columns:80px 1fr;gap:10px}.rec-info>img{width:80px;height:80px}
  .og-wide{margin-bottom:70px}
  .og-insta .insta-row.slide-x{grid-auto-columns:40%;gap:10px}
}

/* ═════════ OFFGRAY 구성 4 (2026-11-05): 참고 데모에 있고 우리에게 없던 것 — 위 띠 · SHOP 큰 메뉴 · 검색 창 · 구매 안내 상자 · 사진 팝업 ═════════ */
/* 맨 위 띠: 34px · 연노랑 · 검정 14px · 문구 사이 200px · 100초에 한 바퀴 */
.notice{background:#FFFDB6;color:#000;font:400 14px var(--body);letter-spacing:-.02em;padding:0;height:34px;display:flex;align-items:center}
.notice .mq{animation-duration:100s}
.notice .mq span{padding-right:200px}
.home .og-top{top:34px}
@media (min-width:1001px){.home .og-top .wrap{padding-top:30px}} /* 참고: 로고·메뉴가 띠 아래 30px (PC) */
.og-hero{height:calc(100svh - 34px)}
/* 펼친 메뉴: 흰 판 · 둥근 20px · 안쪽 32px · 「→ 글자」 (올리면 빨간 화살표가 나오고 글자가 밀린다) */
.og-panel{background:#fff;border-radius:20px;padding:32px;box-shadow:0 10px 40px rgba(0,0,0,.06);min-width:0;width:max-content;font:400 15px var(--body);letter-spacing:-.02em;color:#000}
.og-list{display:flex;flex-direction:column;gap:20px}
.og-panel .og-list a,.mg-pics a{position:relative;display:block;padding:0;font-size:15px;color:#000;text-decoration:none;white-space:nowrap}
.og-panel .ar{position:absolute;left:0;opacity:0;color:var(--point);font-weight:700;transition:opacity .2s}
.og-panel .tx{display:inline-block;transition:transform .3s}
.og-panel a:hover .ar{opacity:1}
.og-panel a:hover .tx{transform:translateX(20px)}
.og-panel a:hover{background:none;text-decoration:none}
.og-nav .dd-menu.og-panel{top:calc(100% + 20px)}
.og-nav .dd-menu.og-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px} /* 메뉴 글자 → 판 사이 빈틈에서 닫히지 않게 */
.og-nav .mega{position:static} /* 판을 알약 메뉴 전체의 가운데에 (참고 스킨) */
.og-nav .mega .dd-menu{left:50%;transform:translate(-50%,-10px);display:flex}
.og-nav .mega:hover .dd-menu,.og-nav .mega:focus-within .dd-menu{transform:translate(-50%,0)}
.mg-pics{display:flex;gap:40px;margin-left:32px;padding-left:32px;border-left:1px solid #000;align-items:center}
.mg-pics a{display:flex;flex-direction:column;align-items:center;gap:15px}
.mg-pics img{width:130px;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
.mg-pics a>span{position:relative}
/* 오른쪽 아이콘(계정·검색)의 판은 아이콘 왼쪽에 */
.og-dd .dd-menu.og-panel{max-height:calc(100vh - 100px);overflow:auto}
.og-dd .dd-menu.og-panel::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:14px}
.sd-panel{width:380px}
.sd-form{display:flex;align-items:center;border:1px solid var(--point);border-radius:50px;padding:3px 20px;margin-bottom:30px}
.sd-form input{flex:1;min-width:0;border:0;outline:0;font-size:15px;color:var(--point);background:none;padding:8px 0}
.sd-form input::placeholder{color:var(--point);opacity:.7}
.sd-form button{background:none;border:0;padding:0;cursor:pointer;color:var(--point);display:grid}
.sd-form .ico{width:22px;height:22px}
.sd-h{font-size:15px;font-weight:600;margin:0 0 20px}
.sd-line{margin-top:30px;padding-top:30px;border-top:1px dashed #000}
.sd-items{display:grid;grid-template-columns:1fr 1fr;gap:20px 10px}
.sd-items a{display:grid;gap:4px;text-align:center;color:#000;text-decoration:none;font-size:13px;min-width:0}
.sd-items img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:6px}
.sd-items b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-items .pr{font-size:13px;font-weight:400}
/* 메뉴를 펼치면 뒤 화면을 흐리게 (참고: rgba(251,248,244,.5) + blur 16px) */
body:has(.og-nav .dd:hover)::before,body:has(.og-ico .dd:hover)::before{content:"";position:fixed;inset:0;background:rgba(251,248,244,.5);backdrop-filter:blur(16px);z-index:29;pointer-events:none}
/* 메인 오른쪽 「구매시 참고해주세요!」 (PC 만 — 폰은 왼쪽 아래 「?」 단추) */
.faq-box{position:fixed;right:50px;bottom:280px;width:320px;max-height:450px;background:#fff;z-index:28;border:1px solid #000;display:flex;flex-direction:column;overflow:hidden;color:#000}
.faq-box[hidden]{display:none}
.fb-head{font-size:18px;font-weight:700;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}
.fb-head button{background:#000;color:#fff;border:0;width:24px;height:24px;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.fb-body{overflow-y:auto;padding:15px;font-size:14px}
.fb-item{margin-bottom:20px;line-height:1.5}
.fb-item b{display:block;font-weight:600;margin-bottom:5px}
.fb-item p{margin:0;padding-left:10px;white-space:pre-line}
@media (min-width:1001px){.home .faq-bot{display:none}}
@media (max-width:1000px){.faq-box{display:none !important}}
/* 사진 팝업: 둥근 25px · 위 사진 · 아래 글 + 빨간 버튼 · 오른쪽 위 ✕ = 오늘 하루 닫기 */
.og-pop .popup-box{position:relative;width:85vw;max-width:500px;border-radius:25px;overflow:hidden;padding:0;text-align:left;animation:pop-up .4s cubic-bezier(.25,1,.5,1)}
@keyframes pop-up{from{transform:translateY(60px);opacity:0}}
.og-pop .popup-box>img{display:block;width:100%;aspect-ratio:3/4;max-height:60vh;object-fit:cover} /* 1688 정사각 사진의 양옆 흰 여백을 잘라 낸다 */
.pop-body{padding:25px}
.og-pop .pop-body p{font-size:15px;line-height:1.6;color:#000;margin:0;white-space:normal}
.pop-btn{display:block;margin-top:16px;padding:12px 0;text-align:center;font-size:15px;background:var(--point);color:#fff;border-radius:10px;text-decoration:none}
.pop-x{position:absolute;top:20px;right:20px;z-index:2;background:rgba(0,0,0,.4);color:#fff;border:0;border-radius:50px;padding:4px;cursor:pointer;display:grid}
.pop-x .ico{width:18px;height:18px}
@media (max-width:1000px){
  .notice{height:30px;font-size:13px}
  .notice .mq span{padding-right:100px}
  .home .og-top{top:30px}
  .og-hero{height:calc(100svh - 30px)}
  .pop-x{top:15px;right:15px}
  .pop-body{padding:15px}
  .og-pop .pop-body p,.pop-btn{font-size:13px}
  .og-pop .popup-box{border-radius:20px}
}

/* ═════════ OFFGRAY 구성 5 (2026-11-06): 로고 · 알약 메뉴를 데모 실측값과 같게 ═════════
   로고 = 높이 50px 굵고 좁은 빨간 글자(Anton) · 메뉴 = 거의 투명한 알약(흐림 6px) + 15px 보통 굵기 ·
   첫 화면 위에선 흰 글씨 · 마우스를 올리면 빨간 글씨 + 뒤로 흰 알약이 미끄러진다(app.js .hover-bg) */
.og-top .logo,.home .og-top .logo{font:400 50px/50px "Anton","Outfit",sans-serif;letter-spacing:0;transform:none;color:var(--point)}
.og-top .og-nav,.home .og-top .og-nav,.home.scrolled .og-top .og-nav,body:not(.home) .og-top .og-nav{gap:0;padding:0;background:rgba(251,248,244,.1);backdrop-filter:blur(6px);font:400 15px var(--body);letter-spacing:-.02em}
.og-top .og-nav>a,.og-top .og-nav .dd>a,body:not(.home) .og-top .og-nav>a,body:not(.home) .og-top .og-nav .dd>a{position:relative;z-index:1;padding:16px 24px;border-radius:0;background:none;color:#000;transition:color .2s}
.og-top .og-nav>a:hover,.og-top .og-nav .dd:hover>a,body:not(.home) .og-top .og-nav>a:hover,body:not(.home) .og-top .og-nav .dd:hover>a{background:none;color:var(--point);text-decoration:none}
.og-nav .hover-bg{position:absolute;top:0;left:0;width:0;height:100%;background:#fff;border-radius:50px;opacity:0;pointer-events:none;z-index:0;transition:all .3s cubic-bezier(.25,.8,.25,1)}
.home:not(.scrolled) .og-top .og-nav>a,.home:not(.scrolled) .og-top .og-nav .dd>a{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.18)}
.home:not(.scrolled) .og-top .og-nav>a:hover,.home:not(.scrolled) .og-top .og-nav .dd:hover>a{color:var(--point);text-shadow:none}
@media (max-width:1000px){
  .og-top .logo,.home .og-top .logo{font-size:30px;line-height:30px;transform:translateX(-50%)}
}

/* ═════════ OFFGRAY 구성 6 (2026-11-06): 목록·검색 화면을 데모 실측값(1600px)과 같게 ═════════
   화면 꽉 채움 · 양옆 30px · 제목 20px/500 · 분류 알약 사이 20px · 4칸(칸 사이 가로 20 · 세로 40) · 정사각 사진 ·
   「Total 7 items」 숫자는 빨간 굵은 글씨 · 필터 단추는 PC 에서 숨김(데모에 없음, 폰은 그대로) */
@media (min-width:1001px){
  .og-listp>.wrap{max-width:none;padding:60px 30px 100px}
  .og-listp .list-title{padding-block:40px 30px}
  .og-listp .og-subcats{gap:20px;margin-bottom:60px}
  .og-listp .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px}
}
.og-listp .og-subcats a{font-family:var(--body)}
.og-listp .list-title{font-family:var(--body)}
.og-listp .list-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.og-listp .list-bar p{margin:0;font:400 14px var(--body)}
.og-listp .list-bar p b{color:var(--point);font-weight:700}
.og-listp .sort select{border:0;background-color:transparent;font:400 14px var(--body);padding:0 25px 0 9px;height:30px}
.og-listp .item .ph,.og-listp .item .ph img{aspect-ratio:1;width:100%;height:auto;object-fit:cover}
@media (min-width:1001px){.og-top .wrap{padding-top:30px}.og-listp>.wrap{padding-top:44px}} /* 참고: 로고·메뉴가 띠 아래 30px */

/* ═════════ OFFGRAY 구성 7 (2026-11-06): 상세 화면 사진 크기를 데모 실측값(1600px)과 같게 ═════════
   왼쪽 사진 820 : 오른쪽 구매 칸 671 · 사이 40px · 양옆 30px · 큰 사진은 정사각(전엔 세로 743:930 이라 너무 컸다) ·
   아래 작은 사진은 80px 줄 */
@media (min-width:1001px){
  .pdp-page>.wrap{padding-inline:30px}
  .pdp{grid-template-columns:minmax(0,820fr) minmax(0,671fr);gap:0 40px;padding-right:0}
  .pdp .main-img{aspect-ratio:1;border-radius:0}
  .pdp .thumbs{display:flex;flex-wrap:wrap;gap:0;margin-top:15px}
  .pdp .thumbs button{width:80px;height:80px;flex:none;border-radius:0}
}

/* ═════════ OFFGRAY 구성 8 (2026-11-06): ARCHIVE(룩북) = 데모처럼 2칸 · 가로 3:2 사진 · 아래 「lookbook no.001」 ═════════
   1688 사진은 정사각에 양옆 흰 여백 → 세로 3:4 로 잘라 두 장을 나란히 놓으면 딱 가로 3:2 가 된다 */
.look-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px;max-width:none}
.look-box{margin:0;border-radius:0;overflow:visible}
.look-ph{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:10px;background:#fff}
.look-ph>img{width:100%;height:100%;object-fit:cover}
.look-ph.pair{display:grid;grid-template-columns:1fr 1fr}
.look-box figcaption{position:static;color:#000;text-shadow:none;font:400 14px var(--body);text-align:center;padding:20px 7px 0}
.spot-editor:has(img+img){display:grid;grid-template-columns:1fr 1fr;max-width:560px}
.spot-editor:has(img+img) img{aspect-ratio:3/4;object-fit:cover;border-radius:0}
@media (max-width:1000px){.look-list{grid-template-columns:1fr;gap:30px}}

/* ═════════ 튜닝 2026-11-06 묶음 A: 뱃지 · 소재 · 사이즈 찾기 · 도착 예정 · 필터 ═════════ */
.ph-box{position:relative}
.badges{position:absolute;left:10px;top:10px;z-index:2;display:flex;gap:4px;pointer-events:none}
.badges i{font:700 10px/1 var(--body);font-style:normal;letter-spacing:.02em;padding:5px 7px;border-radius:4px;background:#fff;color:#000}
.badges .b-best{background:var(--point);color:#fff}
.n-dot{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:6px;border-radius:50%;background:var(--point);color:#fff;font:700 9px/1 var(--body);font-style:normal;vertical-align:2px}
.mat-icons{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0}
.mat-icons li{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:40px;background:#F8F8F8;font-size:13px;color:#333}
.mat-icons .ico{width:16px;height:16px;color:var(--point)}
.size-finder{margin:12px 0;border:1px solid #e5e5e5;border-radius:10px;padding:12px 14px}
.size-finder summary{cursor:pointer;font-weight:600;font-size:14px}
.sf-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;font-size:13px}
.sf-row input{width:70px;padding:6px 8px;border:1px solid #ddd;border-radius:6px;margin:0 4px}
.sf-out{margin:10px 0 0;font-size:14px}
.sf-out:empty{display:none}
.ship-note .arrive{display:block;color:#000}
.ship-note .arrive b{color:var(--point)}
.typo-fix{padding:12px 16px;background:#FFFDB6;border-radius:10px;font-size:14px}
.list-lead{text-align:center;color:#6F6F6F;margin:-14px 0 30px}
.og-listp .ft-btn{border:1px solid #e5e5e5;border-radius:40px;padding:6px 14px;font-size:13px;cursor:pointer;margin-left:auto;margin-right:12px}
/* 로고를 참고 스킨 폭(176px)에 가깝게 · 좁은 PC 화면에서 로고와 메뉴가 겹치지 않게 */
.og-top .logo,.home .og-top .logo{font-size:40px}
@media (min-width:1001px) and (max-width:1320px){.og-top .og-nav>a,.og-top .og-nav .dd>a,body:not(.home) .og-top .og-nav>a,body:not(.home) .og-top .og-nav .dd>a{padding:16px 14px}}
@media (min-width:1001px) and (max-width:1120px){.og-top .logo,.home .og-top .logo{font-size:30px}}

/* ═════════ 튜닝 2026-11-06 묶음 B ═════════ */
/* 47: 첫 화면 사진이 밝으면 메뉴 글씨 검정 */
.home.hero-light:not(.scrolled) .og-top .og-nav>a,.home.hero-light:not(.scrolled) .og-top .og-nav .dd>a{color:#000;text-shadow:none}
.home.hero-light:not(.scrolled) .og-top .og-nav>a:hover,.home.hero-light:not(.scrolled) .og-top .og-nav .dd:hover>a{color:var(--point)}
/* 48: 사진이 오기 전엔 회색 자리가 반짝인다 */
@keyframes sk{from{background-position:-200% 0}to{background-position:200% 0}}
.item .ph:not(:has(img.loaded)),.cat-img:not(:has(img.loaded)),.rec-ph:not(:has(img.loaded)),.look-ph:not(:has(img.loaded)),.main-img:not(:has(img.loaded)){background:linear-gradient(90deg,#f2f2f2 25%,#e9e9e9 50%,#f2f2f2 75%) 0 0/200% 100%;animation:sk 1.4s linear infinite}
/* 57: 등급 진행 막대 */
.g-bar{display:block;height:6px;border-radius:6px;background:#eee;margin-top:8px;max-width:320px;overflow:hidden}
.g-bar i{display:block;height:100%;background:var(--point);border-radius:6px}
/* 46: 메인 섹션 순서 */
.sec-sort{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px;max-width:420px}
.sec-sort li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;cursor:grab;font-size:14px}
.sec-sort li span{color:#999}
.sec-sort li button{margin-left:auto;font-size:12px;background:none;border:1px solid #ddd;border-radius:6px;padding:3px 8px;cursor:pointer}
.sec-sort li.off{opacity:.45;text-decoration:line-through}
.sec-sort li.drag{opacity:.5;border-style:dashed}
/* 69·70·61: 푸터 */
.of-ftc,.of-escrow a{color:#333;text-decoration:underline;text-underline-offset:3px}
.of-escrow{color:#333}
.of-install{margin-left:10px;background:none;border:1px solid #ccc;border-radius:40px;padding:3px 10px;font-size:11px;cursor:pointer}

/* ═════════ 튜닝 2026-11-06 묶음 C: 관리자 그래프 · 마진 계산기 ═════════ */
.chart14{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;align-items:end;height:160px;padding:10px;background:#fff;border:1px solid #eee;border-radius:10px}
.c14{display:grid;grid-template-rows:1fr auto;height:100%;text-align:center;gap:4px}
.c14 .bars{display:flex;gap:2px;align-items:flex-end;justify-content:center;height:100%}
.c14 i{display:block;width:40%;min-height:2px;border-radius:3px 3px 0 0}
.c14 i.s,.lg.s{background:var(--point)}
.c14 i.v,.lg.v{background:#9a9a9a}
.c14 small{font-size:10px;color:#888}
.lg{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px}
.margin-calc label{display:grid;gap:4px;font-size:13px}
.margin-calc input{padding:8px 10px;border:1px solid #ddd;border-radius:8px}

/* 튜닝 묶음 D: 결제수단 · 카카오 로그인 */
.pay-pick{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:12px}
.kakao-login{background:#FEE500;border-color:#FEE500;color:#191919;margin-top:12px}
.or-line{text-align:center;color:#999;font-size:13px;margin:14px 0}
/* 폰 화면 점검 (2026-11-06): 로고가 「CHERRY / ELLU」 두 줄로 깨지던 것 — 한 줄 · 높이 30px (참고 스킨 폰 로고 30px) */
.og-top .logo,.mm-head .logo{white-space:nowrap}
@media (max-width:1000px){
  .og-top .logo,.home .og-top .logo{font-size:30px;line-height:30px}
  .mm-head .logo{font:400 26px/30px "Anton","Outfit",sans-serif;color:var(--point);letter-spacing:0}
}
@media (hover:none){.og-top .logo:hover{filter:none}} /* 폰은 누를 때 흐려지지 않게 */
.toss-box{margin:14px -8px 0;min-height:120px}
/* 주문·결제 화면 머리 로고도 같은 글꼴 (2026-11-06) */
.order-top .logo{font:400 30px/30px "Anton","Outfit",sans-serif;color:var(--point);letter-spacing:0;white-space:nowrap}