/* 달콤한감동 — 디자인 시안 목업 공통 스타일 (잠정) */
:root{
  /* neutrals */
  --ink:#333333; --t2:#6F6469; --t3:#A9A0A3; --line:#ECE7E4; --white:#fff; --soft:#FAF7F5;
  /* tints */
  --cream:#FFF3EC; --pink-tint:#FFEAF1; --peach-tint:#FFF0E0;
  /* accents (톤다운 · 형광 금지) */
  --primary:#D6587F; --blossom:#EC8FB0; --tangerine:#E69150; --scarlet:#D2535F;
  --maxw:1180px;
  --kr:'SUIT Variable';
  --font:'Montserrat','SUIT Variable',system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A0A3' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='M21 16l-5-5L5 19'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);
     -webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.15}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.en{font-family:'Montserrat',sans-serif}
.hide{display:none !important}

/* preview notice */
.notice{background:var(--ink);color:#fff;text-align:center;font-size:12.5px;padding:7px 14px;letter-spacing:.01em}
.notice b{color:var(--blossom)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);
       border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:64px}
.logo{font-family:'Montserrat',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--primary)}
.logo small{display:block;font-family:var(--kr);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--t3);margin-top:-2px}
.gnb{display:flex;gap:22px;margin-left:8px;font-weight:600;font-size:15.5px}
.gnb a{padding:6px 2px;position:relative;transition:color .15s}
.gnb a span{color:var(--t3);font-weight:500;font-size:12.5px}
.gnb a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--primary);transition:right .25s}
.gnb a:hover,.gnb a.on{color:var(--primary)}
.gnb a:hover::after,.gnb a.on::after{right:0}
.util{margin-left:auto;display:flex;gap:14px;align-items:center;color:var(--t2);font-size:13px;font-weight:600}
.util .chip{border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.util .cart{background:var(--ink);color:#fff;border:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:.02em;
     padding:15px 26px;border-radius:2px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;
     cursor:pointer;transition:transform .15s, background .15s, color .15s}
.btn:hover{transform:translateY(-2px)}
.btn.alt{background:transparent;color:var(--ink)}
.btn.alt:hover{background:var(--ink);color:#fff}
.btn.pink{background:var(--primary);border-color:var(--primary)}
.btn.block{width:100%}

/* image placeholder (bordered, icon via ::before — no decorative shapes) */
.ph{position:relative;background:var(--soft);border:1px solid var(--line);border-radius:4px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--t3);overflow:hidden}
.ph::before{content:"";width:38px;height:38px;background:var(--icon) center/contain no-repeat;opacity:.7}
.ph span{font-size:12px;letter-spacing:.08em}
/* 실제 사진 채움 (app.js가 img/ 사진을 .ph에 삽입) — 배지는 유지, placeholder 아이콘·라벨 숨김 */
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph.hasimg::before{display:none}
.ph.hasimg>span:not(.badge){display:none}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);animation:up .7s .05s forwards cubic-bezier(.2,.7,.2,1)}
.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.28s}
@keyframes up{to{opacity:1;transform:none}}

/* hero (home) */
.hero{background:linear-gradient(180deg,var(--cream),#fff);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:64px 20px 70px}
.eyebrow{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.22em;
         color:var(--primary);text-transform:uppercase;margin-bottom:18px}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.08}
.hero h1 em{font-style:normal;color:var(--primary)}
.hero p{color:var(--t2);font-size:17px;margin:20px 0 30px;max-width:430px}
.hero .ph{aspect-ratio:4/3.4}

/* marquee */
.marquee{background:var(--pink-tint);color:var(--ink);overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee .track{display:inline-flex;gap:46px;padding:10px 0;animation:slide 22s linear infinite;font-weight:600;font-size:13.5px;letter-spacing:.02em}
.marquee .track span{display:inline-flex;align-items:center;gap:8px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* section */
section{padding:72px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:30px}
.sec-head .k{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.2em;color:var(--primary);text-transform:uppercase;margin-bottom:9px}
.sec-head h2{font-size:clamp(24px,3.4vw,34px)}
.sec-head p{color:var(--t2);font-size:14.5px;margin:8px 0 0}
.more{font-weight:700;font-size:14px;color:var(--t2);white-space:nowrap}
.more:hover{color:var(--primary)}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pillar{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:transform .18s, box-shadow .18s}
.pillar:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(51,51,51,.08)}
.pillar .ph{aspect-ratio:1/1;border:none;border-bottom:1px solid var(--line);border-radius:0}
/* 이미지 placeholder 슬롯 배경은 .ph 기본색(--soft #FAF7F5)으로 통일 — 카테고리별 틴트 제거(오너 요청) */
.pillar .body{padding:20px 20px 24px}
.pillar h3{font-size:20px}
.pillar h3 small{font-family:var(--kr);font-weight:600;font-size:13px;color:var(--t3);margin-left:6px}
.pillar p{color:var(--t2);font-size:14px;margin:9px 0 16px;min-height:40px}
.pillar .go{font-weight:700;font-size:14px;color:var(--primary)}

/* product card + carousel */
.car{position:relative}
.row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.card{display:block;background:#fff}
.row .card{flex:0 0 240px;scroll-snap-align:start}
.card .ph{aspect-ratio:1/1}
.card .badge{position:absolute;top:10px;left:10px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;
      letter-spacing:.04em;color:#fff;background:var(--primary);padding:4px 9px;border-radius:2px}
.card .badge.sale{background:var(--scarlet)} .card .badge.new{background:var(--tangerine)}
.card h4{font-size:15px;font-weight:600;margin:14px 0 7px;line-height:1.4;transition:color .15s}
.card:hover h4{color:var(--primary)}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price .now{font-weight:800;font-size:17px}
.price .was{color:var(--t3);text-decoration:line-through;font-size:13px}
.price .off{color:var(--scarlet);font-weight:800;font-size:14px}
.arrows{display:flex;gap:8px}
.arrows button{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;
      font-size:16px;color:var(--ink);transition:background .15s,color .15s}
.arrows button:hover{background:var(--ink);color:#fff}

/* editorial dark banner */
.editorial{background:linear-gradient(120deg,#3a2630,#5a2138);color:#fff;border-radius:12px;overflow:hidden;
      display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
.editorial .txt{padding:54px 46px}
.editorial .k{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.2em;font-size:12px;color:var(--blossom);text-transform:uppercase}
.editorial h2{color:#fff;font-size:clamp(26px,3.4vw,38px);margin:14px 0 12px}
.editorial p{color:rgba(255,255,255,.78);font-size:15px;margin:0 0 26px;max-width:380px}
.editorial .ph{aspect-ratio:1/1;min-height:100%;border-radius:0}
.editorial .btn{background:#fff;color:var(--ink);border-color:#fff}
.editorial .btn:hover{background:var(--blossom);border-color:var(--blossom);color:#fff}

/* breadcrumb + page head (list/detail) */
.crumb{font-size:13px;color:var(--t3);padding:22px 0 0}
.crumb a:hover{color:var(--primary)}
.crumb b{color:var(--t2);font-weight:600}
.phead{padding:18px 0 26px;border-bottom:1px solid var(--line);margin-bottom:26px}
.phead .k{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.2em;font-size:12px;color:var(--primary);text-transform:uppercase}
.phead h1{font-size:clamp(26px,4vw,38px);margin:8px 0 6px}
.phead p{color:var(--t2);font-size:14.5px;margin:0}

/* list toolbar (filter/sort) */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chipf{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--t2);cursor:pointer;transition:.15s}
.chipf:hover{border-color:var(--primary);color:var(--primary)}
.chipf.on{background:var(--ink);border-color:var(--ink);color:#fff}
.toolbar .sort{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--t3);font-size:13px}
.toolbar select{font:inherit;font-size:13.5px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:#fff;color:var(--ink)}
/* gamdong list — two-dimension filters (브랜드 + 품목, [[D11]]) */
.toolbar-gd{align-items:flex-start}
.filterset{display:flex;flex-direction:column;gap:10px}
.frow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.frow .flab{font-family:var(--kr);font-weight:700;font-size:12.5px;color:var(--t2);min-width:42px;flex:0 0 auto}
.toolbar-gd .sort{align-self:flex-start;margin-top:2px}

/* product grid (PLP) */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 22px}
.grid .card .ph{aspect-ratio:1/1}
.count{font-size:13px;color:var(--t3);margin-bottom:14px}

/* PDP */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:30px 0 10px;align-items:start}
.gallery .ph{aspect-ratio:1/1}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumbs .ph{aspect-ratio:1/1;border-radius:3px;cursor:pointer}
.thumbs .ph span{display:none}
.thumbs .ph::before{width:24px;height:24px}
.thumbs .ph.on{border-color:var(--primary);border-width:2px}
.pinfo .brand{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.12em;font-size:12px;color:var(--primary);text-transform:uppercase}
.pinfo h1{font-size:clamp(22px,3vw,30px);margin:10px 0 14px;line-height:1.25}
.pinfo .pprice{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.pinfo .pprice .now{font-size:26px;font-weight:800}
.pinfo .pprice .was{color:var(--t3);text-decoration:line-through;font-size:15px}
.pinfo .pprice .off{color:var(--scarlet);font-weight:800;font-size:17px}
.pinfo .ship{font-size:13px;color:var(--t2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:20px 0;line-height:1.9}
.pinfo .ship b{color:var(--ink)}
.optrow{margin:16px 0}
.optrow .lab{font-size:13px;font-weight:700;color:var(--t2);margin-bottom:9px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{border:1px solid var(--line);background:#fff;border-radius:3px;padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.15s}
.opt:hover{border-color:var(--primary)}
.opt.on{border-color:var(--ink);background:var(--ink);color:#fff}
.qtybar{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.qty button{width:40px;height:42px;border:none;background:#fff;font-size:18px;color:var(--ink);cursor:pointer}
.qty button:hover{background:var(--soft)}
.qty input{width:46px;height:42px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font:inherit;font-weight:700;color:var(--ink)}
.total{margin-left:auto;text-align:right}
.total .t1{font-size:12px;color:var(--t3)}
.total .t2{font-size:22px;font-weight:800}
.buybar{display:flex;gap:10px;margin-top:20px}
.buybar .btn{flex:1}
.wish{flex:0 0 52px !important;background:#fff !important;color:var(--t2) !important;border-color:var(--line) !important;font-size:18px}
.wish:hover{color:var(--primary) !important;border-color:var(--primary) !important;transform:none}

/* tabs + spec table */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin:54px 0 0}
.tab{padding:15px 22px;font-weight:700;font-size:15px;color:var(--t3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:.15s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--primary)}
.panel{display:none;padding:34px 0;font-size:14.5px;color:var(--t2);line-height:1.8}
.panel.on{display:block}
.panel .ph{aspect-ratio:16/8;max-width:640px;margin:0 auto 14px}
.spec{width:100%;border-collapse:collapse;font-size:13.5px;max-width:680px}
.spec th,.spec td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:170px;background:var(--soft);color:var(--ink);font-weight:700}
.spec td{color:var(--t2)}
.note{background:var(--cream);border-radius:8px;padding:14px 16px;font-size:13px;color:var(--t2);margin-top:16px}

/* footer */
footer{background:var(--soft);border-top:1px solid var(--line);margin-top:30px;padding:50px 0 60px;font-size:13px;color:var(--t2)}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:28px}
.foot-logo{font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;color:var(--ink)}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;font-weight:600;color:var(--ink)}
.foot-links a:hover{color:var(--primary)}
.biz{line-height:1.9;color:var(--t2);border-top:1px solid var(--line);padding-top:22px}
.biz b{color:var(--ink);font-weight:700}
.biz .row2{margin-top:4px}
.esc{margin-top:14px;font-size:12px;color:var(--t3)}
.cpy{margin-top:18px;font-size:12px;color:var(--t3)}

/* ============================================================
   확장 페이지 공통 컴포넌트 — 장바구니·주문·선물·검색·회원·마이·정책
   디자인 시스템 동일: 흰/중성 80%+, 포인트 절제, 기본텍스트 #333, 슬롯 #FAF7F5
   ============================================================ */

/* 두 필터 축 강조색 구분 — 브랜드=강한 ink / 품목=소프트 핑크 (오너 피드백: 겹침 제거) */
.frow.item .chipf.on{background:var(--pink-tint);border-color:var(--primary);color:var(--primary)}

/* 일반 페이지 상단 타이틀 */
.pagetitle{padding:6px 0 22px;border-bottom:1px solid var(--line);margin-bottom:24px}
.pagetitle .k{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.2em;font-size:12px;color:var(--primary);text-transform:uppercase;margin-bottom:7px}
.pagetitle h1{font-size:clamp(24px,3.4vw,32px)}
.pagetitle p{color:var(--t2);font-size:14px;margin:7px 0 0}

/* 검색바 */
.searchbar{display:flex;gap:10px;max-width:600px;margin-top:6px}
.searchbar input{flex:1;font:inherit;font-size:15px;border:1.5px solid var(--ink);border-radius:2px;padding:14px 16px;color:var(--ink)}
.searchbar input::placeholder{color:var(--t3)}
.kw{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 0;font-size:13px}
.kw .lab{color:var(--t3)}
.kw a{color:var(--t2);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.kw a:hover{border-color:var(--primary);color:var(--primary)}

/* 장바구니 / 주문 2단 레이아웃 */
.shop-layout{display:grid;grid-template-columns:1fr 340px;gap:30px;align-items:start;padding:6px 0 0}
.citems{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.citem{display:grid;grid-template-columns:92px 1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:center}
.citem .ph{width:92px;aspect-ratio:1/1}
.citem .ci-name{font-weight:600;font-size:15px}
.citem .ci-opt{font-size:12.5px;color:var(--t3);margin-top:5px}
.citem .ci-gift{display:inline-block;font-size:11.5px;color:var(--primary);margin-top:7px;font-weight:700;background:var(--pink-tint);padding:3px 9px;border-radius:999px}
.citem .ci-right{text-align:right;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.citem .ci-price{font-weight:800;font-size:16px}
.cdel{font-size:12px;color:var(--t3);cursor:pointer;background:none;border:none;padding:0}
.cdel:hover{color:var(--scarlet)}

/* 주문 요약 패널 */
.summary{border:1px solid var(--line);border-radius:10px;padding:22px;background:var(--soft);position:sticky;top:84px}
.summary h3{font-size:15px;margin-bottom:14px}
.sumrow{display:flex;justify-content:space-between;font-size:13.5px;color:var(--t2);padding:6px 0}
.sumrow b{color:var(--ink);font-weight:700}
.sumtotal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:10px;padding-top:14px}
.sumtotal .lab{font-weight:700;font-size:15px}
.sumtotal .val{font-weight:800;font-size:22px;color:var(--primary)}
.summary .btn{margin-top:16px}
.summary .mini{margin-top:12px;font-size:12px;color:var(--t2);background:var(--cream);border-radius:8px;padding:11px 13px}

/* 빈 상태 */
.empty{text-align:center;padding:72px 20px}
.empty .emj{font-size:38px}
.empty p{color:var(--t2);margin:14px 0 22px;font-size:15px}

/* 폼 */
.formsec{border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin-bottom:18px}
.formsec h3{font-size:15px;margin-bottom:16px}
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--t2);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:4px;padding:11px 13px;color:var(--ink);background:#fff}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--primary)}
.field textarea{resize:vertical;min-height:72px}
.field2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field2 .field{margin-bottom:0}

/* 결제수단 라디오 */
.pay-opts{display:flex;flex-direction:column;gap:9px}
.payopt{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:6px;padding:13px 15px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);transition:.15s}
.payopt:hover{border-color:var(--primary)}
.payopt.on{border-color:var(--ink)}
.payopt .dot{width:16px;height:16px;border-radius:999px;border:1.5px solid var(--line);flex:0 0 auto;transition:.15s}
.payopt.on .dot{border-color:var(--primary);border-width:5px}

/* 선물하기 박스 */
.giftbox{border:1px dashed var(--primary);border-radius:8px;padding:16px 18px;background:var(--pink-tint);margin-top:6px}
.giftbox .gh{font-weight:700;font-size:13.5px;color:var(--primary);margin-bottom:10px}

/* 약관동의 */
.agree{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--t2);padding:6px 0}
.agree input{margin-top:2px}
.agree a{color:var(--t2);text-decoration:underline}

/* 주문완료 */
.done{text-align:center;max-width:560px;margin:40px auto 0;padding:0 20px}
.done .chk{width:64px;height:64px;border-radius:999px;background:var(--pink-tint);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px}
.done h1{font-size:26px;margin-bottom:10px}
.done p{color:var(--t2);font-size:15px}
.done .ordbox{border:1px solid var(--line);border-radius:10px;padding:18px;margin:24px 0;background:var(--soft);font-size:13.5px;color:var(--t2);text-align:left}
.done .ordbox div{padding:4px 0}
.done .ordbox b{color:var(--ink)}
.done .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* 회원/로그인 */
.auth{max-width:400px;margin:24px auto 0}
.auth h1{font-size:24px;text-align:center;margin-bottom:6px}
.auth .sub{text-align:center;color:var(--t2);font-size:14px;margin-bottom:22px}
.authtabs{display:flex;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:20px}
.authtabs button{flex:1;border:none;background:none;padding:10px;border-radius:999px;font:inherit;font-weight:700;font-size:14px;color:var(--t2);cursor:pointer}
.authtabs button.on{background:var(--ink);color:#fff}
.sns{display:flex;flex-direction:column;gap:10px}
.snsbtn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;padding:13px;font-weight:700;font-size:14.5px;border:none;cursor:pointer}
.snsbtn.kakao{background:#FEE500;color:#3C1E1E}
.snsbtn.naver{background:#03C75A;color:#fff}
.divider{display:flex;align-items:center;gap:12px;color:var(--t3);font-size:12px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.guest{text-align:center;margin-top:18px;font-size:13px;color:var(--t2)}
.guest a{color:var(--primary);font-weight:700}

/* 마이페이지 */
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:4px 0 22px}
.mp-card{border:1px solid var(--line);border-radius:10px;padding:18px;text-align:center}
.mp-card .v{font-size:21px;font-weight:800;color:var(--primary)}
.mp-card .l{font-size:12.5px;color:var(--t2);margin-top:5px}
.order-row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:10px}
.order-row .ph{width:64px;aspect-ratio:1/1}
.order-row .o-st{font-size:12px;font-weight:700;color:var(--primary)}
.order-row .o-name{font-weight:600;font-size:14px;margin-top:3px}
.order-row .o-meta{font-size:12px;color:var(--t3);margin-top:3px}

/* 선물 코너 */
.gift-hero{background:linear-gradient(180deg,var(--pink-tint),#fff);border-radius:14px;padding:50px 30px;text-align:center;margin:14px 0 0}
.gift-hero .k{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.2em;font-size:12px;color:var(--primary);text-transform:uppercase}
.gift-hero h1{font-size:clamp(26px,4vw,40px);margin:12px 0 12px}
.gift-hero p{color:var(--t2);font-size:15.5px;max-width:480px;margin:0 auto}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{border:1px solid var(--line);border-radius:12px;padding:24px;background:#fff}
.step .num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;background:var(--primary);width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:16px;margin:14px 0 7px}
.step p{font-size:13.5px;color:var(--t2);margin:0 0 14px}

/* 정책/소개 프로즈 */
.prose{max-width:760px;font-size:14.5px;color:var(--t2);line-height:1.85;padding:8px 0 16px}
.prose h2{font-size:18px;color:var(--ink);margin:26px 0 10px}
.prose h3{font-size:14.5px;color:var(--ink);margin:18px 0 7px}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:18px}
.prose li{margin:5px 0}
.prose b{color:var(--ink)}
.prose .upd{font-size:12.5px;color:var(--t2);background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:18px}

/* about */
.about-hero{text-align:center;padding:44px 0 10px;max-width:680px;margin:0 auto}
.about-hero .k{font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:.2em;font-size:12px;color:var(--primary);text-transform:uppercase}
.about-hero h1{font-size:clamp(28px,4vw,42px);margin:12px 0 16px;line-height:1.2}
.about-hero p{color:var(--t2);font-size:16px;line-height:1.8}
.about-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.about-two .box{border:1px solid var(--line);border-radius:12px;padding:28px}
.about-two h3{font-size:19px;margin-bottom:8px}
.about-two h3 small{font-family:var(--kr);font-weight:600;font-size:13px;color:var(--t3);margin-left:6px}
.about-two p{color:var(--t2);font-size:14px;margin:0}

/* ============================================================
   확장 #3 — 리뷰·문의·신뢰·적립·상태·FAQ·공지·회원등급·배송추적
   기존 토큰/컴포넌트 재사용 · 동작 로직 = app.js
   ============================================================ */

/* 별점 (카드/상세 공통) */
.rating{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--t2);margin-top:7px}
.rating .st{color:var(--tangerine)}
.rating b{color:var(--ink);font-weight:800}
.rating .rc{color:var(--t3)}
.pinfo .rating{margin:2px 0 0;font-size:13.5px}

/* 토스트 */
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,18px);background:var(--ink);color:#fff;
  padding:13px 22px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:0 12px 32px rgba(51,51,51,.24);
  opacity:0;pointer-events:none;transition:.28s cubic-bezier(.2,.7,.2,1);z-index:300;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 적립/도착예정 + 신뢰 배지 (상세) */
.pmeta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--t2);margin:8px 0 2px}
.pmeta .earn b{color:var(--primary);font-weight:800}
.pmeta .eta b{color:var(--ink);font-weight:800}
.trust{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 2px}
.trust span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--t2);
  background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px}

/* 리뷰 박스 */
.reviewbox{display:grid;grid-template-columns:210px 1fr;gap:32px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:24px;background:var(--soft);margin-bottom:6px}
.rv-sum{text-align:center}
.rv-sum .big{font-size:42px;font-weight:800;line-height:1;color:var(--ink)}
.rv-sum .st{color:var(--tangerine);font-size:15px;letter-spacing:2px;display:block;margin:8px 0 5px}
.rv-sum .cnt{font-size:12.5px;color:var(--t3)}
.rv-dist{display:flex;flex-direction:column;gap:7px}
.rv-bar{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--t3)}
.rv-bar .lab{width:26px;text-align:right}
.rv-bar .bar{display:block;flex:1;height:7px;background:var(--line);border-radius:999px;overflow:hidden}
.rv-bar .fill{display:block;height:100%;background:var(--tangerine);border-radius:999px}
.rv-photos{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 4px}
.rv-photos .ph{width:82px;aspect-ratio:1/1;border-radius:7px;flex:0 0 auto}
.rv-photos .ph span{display:none}.rv-photos .ph::before{width:22px;height:22px}
.rvitem{border-top:1px solid var(--line);padding:18px 0}
.rvitem .rh{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:7px;flex-wrap:wrap}
.rvitem .st{color:var(--tangerine);letter-spacing:1px}
.rvitem .who{font-weight:700;color:var(--ink)}
.rvitem .ro{color:var(--t3);font-size:12px}
.rvitem .when{margin-left:auto;color:var(--t3);font-size:12px}
.rvitem p{margin:0;color:var(--t2);font-size:14px;line-height:1.7}
.rvitem .help{margin-top:9px;font-size:12px;color:var(--t3)}

/* Q&A 문의 */
.qa{border-top:1px solid var(--line)}
.qaitem{border-bottom:1px solid var(--line);padding:16px 2px}
.qaitem .qq2{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink)}
.tag{font-size:11px;font-weight:700;border-radius:3px;padding:3px 8px;flex:0 0 auto}
.tag.done{background:var(--pink-tint);color:var(--primary)}
.tag.wait{background:#fff;color:var(--t3);border:1px solid var(--line)}
.qaitem .meta{font-size:12px;color:var(--t3);margin-top:6px}
.qaitem .aa{margin-top:10px;background:var(--soft);border-radius:8px;padding:12px 14px;font-size:13.5px;color:var(--t2);line-height:1.7}
.qaitem .aa b{color:var(--primary)}

/* 빈 상태 보강 */
.empty h2{font-size:20px;margin:14px 0 6px}

/* FAQ 아코디언 */
.accord{border-top:1px solid var(--line);max-width:800px}
.acc{border-bottom:1px solid var(--line)}
.acc .qq{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:18px 4px;font:inherit;
  font-size:15px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:12px;align-items:center}
.acc .qq .mk{color:var(--primary);font-size:18px;transition:.2s;flex:0 0 auto}
.acc.on .qq .mk{transform:rotate(45deg)}
.acc .aa{display:none;padding:0 4px 18px;color:var(--t2);font-size:14px;line-height:1.8}
.acc.on .aa{display:block}

/* 공지 목록 */
.notice-list{border-top:1px solid var(--line);max-width:820px}
.nrow{border-bottom:1px solid var(--line);padding:16px 4px}
.nrow .tt{font-weight:600;color:var(--ink);font-size:15px}
.nrow .dd{font-size:12px;color:var(--t3);margin-top:5px}
.nrow .bd{margin-top:11px;color:var(--t2);font-size:13.5px;line-height:1.8}

/* 회원등급 */
.grade{display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,var(--cream),#fff);
  border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin-bottom:18px}
.grade .ico{font-size:34px;flex:0 0 auto}
.grade .g1{font-size:13px;color:var(--t2)}
.grade .g2{font-size:20px;font-weight:800}.grade .g2 em{font-style:normal;color:var(--primary)}
.grade .g3{font-size:12.5px;color:var(--t3);margin-top:4px}

/* 배송 단계 추적 */
.track{display:flex;margin:14px 0 2px}
.track .stp{flex:1;text-align:center;position:relative;font-size:12px;color:var(--t3)}
.track .stp::before{content:"";position:absolute;top:11px;right:50%;width:100%;height:2px;background:var(--line);z-index:0}
.track .stp:first-child::before{display:none}
.track .dot{width:24px;height:24px;border-radius:999px;background:var(--line);color:#fff;display:flex;
  align-items:center;justify-content:center;margin:0 auto 8px;position:relative;z-index:1;font-size:11px}
.track .stp.done .dot{background:var(--primary)}
.track .stp.done{color:var(--ink);font-weight:700}
.track .stp.done::before{background:var(--primary)}

/* 섹션 소제목 */
.subhead{font-size:16px;font-weight:800;margin:30px 0 14px}

@media(max-width:900px){
  .pdp{grid-template-columns:1fr;gap:28px}
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .hero-in{grid-template-columns:1fr;gap:26px;padding:42px 20px 48px}
  .hero .ph{aspect-ratio:16/10}
  .gnb,.util .chip{display:none}
  .pillars{grid-template-columns:1fr}
  .editorial{grid-template-columns:1fr}
  .editorial .ph{aspect-ratio:16/9}
  section{padding:52px 0}
}
@media(max-width:820px){
  .shop-layout{grid-template-columns:1fr}
  .summary{position:static}
  .steps{grid-template-columns:1fr}
  .about-two{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .reviewbox{grid-template-columns:1fr;gap:18px}
  .grade{flex-wrap:wrap;gap:12px}
  .tabs{overflow-x:auto}
  .mp-grid{grid-template-columns:repeat(2,1fr)}
  .field2{grid-template-columns:1fr}
  .citem{grid-template-columns:72px 1fr}
  .citem .ph{width:72px}
  .citem .ci-right{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;width:100%}
}