/* 쇼핑몰 기본 레이아웃 — 색 · 둥글기 · 그림자는 테마 파일(/shop-theme.css)의 변수로 정함 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--c-bg); color:var(--c-ink); font-family:var(--font); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; letter-spacing:-.01em}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4{margin:0; letter-spacing:-.025em; line-height:1.25}
:focus-visible{outline:2px solid var(--c-brand); outline-offset:2px}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.num{font-variant-numeric:tabular-nums}
.hide{display:none!important}

/* 상단 안내 띠 */
.notice{background:var(--c-brand-deep); color:#E6F0E8; font-size:12.5px; text-align:center; padding:7px 12px}
.notice b{color:#fff}

/* 헤더 */
.hd{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--c-bg) 88%,transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--c-line)}
.hd .wrap{display:flex; align-items:center; gap:28px; height:72px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; letter-spacing:-.04em; white-space:nowrap}
.logo-mark{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:#fff}
.logo small{display:block; font-size:10px; font-weight:700; letter-spacing:.18em; color:var(--c-ink-3); margin-top:-3px}
.gnb{display:flex; gap:22px; font-weight:600; font-size:15px; color:var(--c-ink-2)}
.gnb a{padding:6px 0; border-bottom:2px solid transparent}
.gnb a:hover,.gnb a.on{color:var(--c-ink); border-color:var(--c-brand)}
.hd-r{margin-left:auto; display:flex; align-items:center; gap:6px}
.hd-link{font-size:13.5px; font-weight:600; color:var(--c-ink-2); padding:8px 10px; border-radius:10px; white-space:nowrap; background:none; border:0}
.hd-link:hover{background:var(--c-soft); color:var(--c-ink)}
.hd-cart{position:relative}
.hd-cart .cnt{position:absolute; top:2px; right:0; background:var(--c-accent); color:#2B1B00; font-size:10.5px; font-weight:800; min-width:17px; height:17px; border-radius:99px; display:grid; place-items:center; padding:0 4px}
.btn-sol{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:8px 13px; border-radius:10px; border:1.5px solid var(--c-ink); color:var(--c-ink); background:transparent; white-space:nowrap}
.btn-sol:hover{background:var(--c-ink); color:var(--c-bg)}
.burger{display:none; border:0; background:none; font-size:22px; padding:6px}

/* 버튼 */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15px; padding:13px 22px; border-radius:var(--radius-sm); border:1.5px solid transparent; background:var(--c-brand); color:var(--c-brand-ink); transition:transform .12s, background .12s}
.btn:hover{background:var(--c-brand-deep)} .btn:active{transform:translateY(1px)}
.btn.line{background:transparent; color:var(--c-ink); border-color:var(--c-line)} .btn.line:hover{border-color:var(--c-ink-3); background:var(--c-surface)}
.btn.ghost{background:var(--c-soft); color:var(--c-brand-deep)} .btn.ghost:hover{background:color-mix(in srgb,var(--c-soft) 70%,var(--c-brand) 12%)}
.btn.accent{background:var(--c-accent); color:#2B1B00} .btn.accent:hover{filter:brightness(.96)}
.btn.sm{padding:8px 14px; font-size:13.5px; border-radius:10px}
.btn.block{width:100%}
.btn:disabled{opacity:.5; cursor:default}

/* 히어로 */
.hero{background:var(--hero-bg); border-bottom:1px solid var(--c-line); overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; min-height:520px; padding-top:40px; padding-bottom:40px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--c-brand); background:#fff; border:1px solid var(--c-line); padding:6px 12px; border-radius:99px}
.eyebrow i{width:7px; height:7px; border-radius:50%; background:var(--c-accent); display:block}
.hero h1{font-size:clamp(34px,4.6vw,58px); font-weight:800; margin:18px 0 18px; letter-spacing:-.045em; line-height:1.12}
.hero h1 em{font-style:normal; color:var(--c-brand); position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; left:-2px; right:-2px; bottom:4px; height:14px; background:var(--c-accent-soft); z-index:-1; border-radius:4px}
.hero p.lead{font-size:17px; color:var(--c-ink-2); max-width:470px; margin:0 0 28px}
.hero .ctas{display:flex; gap:10px; flex-wrap:wrap}
.hero-stats{display:flex; gap:28px; margin-top:36px}
.hero-stats b{display:block; font-size:22px; letter-spacing:-.03em}
.hero-stats span{font-size:12.5px; color:var(--c-ink-3)}
.hero-art{position:relative; aspect-ratio:1/1; max-width:520px; justify-self:center; width:100%}
.hero-art .disc{position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff 0%, var(--c-soft) 55%, color-mix(in srgb,var(--c-soft) 60%,var(--c-brand) 25%) 100%)}
.hero-art .p{position:absolute; filter:drop-shadow(0 26px 24px rgba(20,50,30,.22))}
.hero-art .p1{left:6%; bottom:10%; width:46%} .hero-art .p2{left:34%; bottom:16%; width:40%; z-index:2} .hero-art .p3{right:2%; bottom:6%; width:38%}
.hero-art .chip{position:absolute; background:#fff; border:1px solid var(--c-line); border-radius:14px; padding:10px 14px; font-size:12.5px; box-shadow:var(--shadow); display:flex; gap:10px; align-items:center; z-index:3}
.hero-art .chip b{display:block; font-size:13.5px} .hero-art .chip span{color:var(--c-ink-3)}
.hero-art .chip .ic{width:30px; height:30px; border-radius:9px; background:var(--c-soft); display:grid; place-items:center; color:var(--c-brand); font-weight:800}
.hero-art .c1{left:0; top:14%} .hero-art .c2{right:0; top:4%}

/* 신뢰 띠 */
.trust{border-bottom:1px solid var(--c-line); background:var(--c-surface)}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.trust .it{display:flex; gap:14px; align-items:center; padding:22px 18px; border-right:1px solid var(--c-line)}
.trust .it:last-child{border-right:0}
.trust .ic{width:44px; height:44px; border-radius:14px; background:var(--c-soft); color:var(--c-brand); display:grid; place-items:center; flex-shrink:0}
.trust b{display:block; font-size:14.5px} .trust span{font-size:12.5px; color:var(--c-ink-3)}

/* 섹션 */
.sec{padding:72px 0}
.sec.tint{background:var(--c-soft-2)}
.sec-h{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px}
.sec-h .k{font-size:13px; font-weight:800; color:var(--c-brand); letter-spacing:.12em; text-transform:uppercase}
.sec-h h2{font-size:clamp(24px,2.6vw,34px); font-weight:800; margin-top:6px}
.sec-h p{margin:8px 0 0; color:var(--c-ink-3)}
.more{font-weight:700; font-size:14px; color:var(--c-ink-2); white-space:nowrap} .more:hover{color:var(--c-brand)}

/* 카테고리 타일 */
.cats{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.cat{background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius); padding:22px 14px 18px; text-align:center; transition:transform .15s, box-shadow .15s}
.cat:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.cat .ic{width:58px; height:58px; margin:0 auto 12px; border-radius:50%; background:var(--c-soft); display:grid; place-items:center; color:var(--c-brand)}
.cat b{font-size:14.5px} .cat span{display:block; font-size:12px; color:var(--c-ink-3)}

/* 상품 카드 */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.card{display:flex; flex-direction:column; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; transition:transform .15s, box-shadow .15s; position:relative}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card .art{background:var(--c-soft-2); aspect-ratio:1/1; display:grid; place-items:center; position:relative}
.card .art svg{width:78%}
.card .tag{position:absolute; left:12px; top:12px; font-size:11px; font-weight:800; letter-spacing:.06em; padding:4px 9px; border-radius:8px; background:var(--c-ink); color:#fff}
.card .tag.BEST{background:var(--c-accent); color:#2B1B00} .card .tag.NEW{background:var(--c-brand)} .card .tag.GIFT{background:var(--c-sale)}
.card .bd{padding:16px 16px 18px; display:flex; flex-direction:column; gap:4px; flex:1}
.card .cat-l{font-size:12px; color:var(--c-ink-3); font-weight:600}
.card h3{font-size:16px; font-weight:700; line-height:1.35}
.card .sum{font-size:13px; color:var(--c-ink-3); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.price{display:flex; align-items:baseline; gap:7px; margin-top:auto; padding-top:10px; flex-wrap:wrap}
.price .rate{color:var(--c-sale); font-weight:800; font-size:16px}
.price b{font-size:19px; font-weight:800; letter-spacing:-.03em}
.price s{color:var(--c-ink-3); font-size:13px}
.card .add{position:absolute; right:12px; top:12px; width:38px; height:38px; border-radius:50%; border:0; background:#fff; box-shadow:0 6px 16px -8px rgba(0,0,0,.35); display:grid; place-items:center; color:var(--c-brand); opacity:0; transform:translateY(-4px); transition:.15s}
.card:hover .add{opacity:1; transform:none}
.hff{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:3px 8px; border-radius:7px}

/* 배너 */
.promo{display:grid; grid-template-columns:1.2fr 1fr; gap:22px}
.pbox{border-radius:calc(var(--radius) + 6px); padding:38px; position:relative; overflow:hidden; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end}
.pbox.a{background:linear-gradient(135deg,var(--c-brand-deep),var(--c-brand)); color:#fff}
.pbox.b{background:var(--c-accent-soft); color:#3B2A08}
.pbox .k{font-size:12.5px; font-weight:800; letter-spacing:.12em; opacity:.85}
.pbox h3{font-size:28px; font-weight:800; margin:8px 0 10px; position:relative; z-index:1}
.pbox p{margin:0 0 18px; opacity:.85; max-width:320px; position:relative; z-index:1}
.pbox .deco{position:absolute; right:-10px; top:-10px; width:52%; opacity:.95}

/* 루틴 */
.routine{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.rt{background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius); padding:26px}
.rt .time{display:inline-block; font-size:12px; font-weight:800; padding:4px 10px; border-radius:99px; background:var(--c-soft); color:var(--c-brand-deep)}
.rt h4{font-size:19px; margin:14px 0 6px} .rt p{margin:0 0 14px; color:var(--c-ink-3); font-size:14px}
.rt ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.rt li a{display:flex; justify-content:space-between; gap:8px; font-size:14px; font-weight:600; padding:9px 12px; border-radius:10px; background:var(--c-bg)}
.rt li a:hover{background:var(--c-soft)}

/* 목록 화면 */
.page-h{padding:44px 0 22px}
.page-h h1{font-size:32px; font-weight:800}
.page-h p{color:var(--c-ink-3); margin:6px 0 0}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.tabs button{border:1px solid var(--c-line); background:var(--c-surface); padding:9px 16px; border-radius:99px; font-weight:600; font-size:14px; color:var(--c-ink-2)}
.tabs button.on{background:var(--c-ink); color:var(--c-bg); border-color:var(--c-ink)}

/* 상세 */
.pd{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:40px 0 30px}
.pd .art{background:var(--c-soft-2); border-radius:calc(var(--radius) + 8px); aspect-ratio:1/1; display:grid; place-items:center; position:sticky; top:96px}
.pd .art svg{width:70%}
.pd .cat-l{font-size:13px; font-weight:700; color:var(--c-brand)}
.pd h1{font-size:32px; font-weight:800; margin:8px 0 8px}
.pd .sum{font-size:16px; color:var(--c-ink-2); margin:0 0 18px}
.pd .price b{font-size:30px} .pd .price .rate{font-size:22px}
.pd .meta{margin:22px 0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:14px 0; display:grid; gap:8px; font-size:14px}
.pd .meta div{display:grid; grid-template-columns:110px 1fr; gap:10px} .pd .meta dt{color:var(--c-ink-3)} .pd .meta dd{margin:0; font-weight:600}
.qty{display:inline-flex; align-items:center; border:1px solid var(--c-line); border-radius:12px; overflow:hidden; background:var(--c-surface)}
.qty button{border:0; background:none; width:42px; height:44px; font-size:18px} .qty input{width:46px; text-align:center; border:0; height:44px; font-weight:700; background:transparent}
.pd .buy{display:flex; gap:10px; margin-top:18px} .pd .buy .btn{flex:1}
.pd .total{display:flex; justify-content:space-between; align-items:center; margin-top:18px; font-size:15px} .pd .total b{font-size:24px}
.info-tabs{border-top:1px solid var(--c-line); margin-top:30px; padding-top:30px; display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.ibox{background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius); padding:24px}
.ibox h4{font-size:16px; margin-bottom:12px; display:flex; gap:8px; align-items:center}
.ibox ul{margin:0; padding-left:18px; display:grid; gap:6px; color:var(--c-ink-2); font-size:14.5px}
.ibox p{margin:0; color:var(--c-ink-2); font-size:14.5px}
.ibox.full{grid-column:1/-1}
.legal{font-size:12.5px; color:var(--c-ink-3); background:var(--c-soft-2); border-radius:12px; padding:14px 16px; margin-top:18px}

/* 장바구니 · 주문 */
.two{display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:start; padding-bottom:60px}
.panel{background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius); padding:24px}
.panel h3{font-size:18px; margin-bottom:16px}
.line{display:grid; grid-template-columns:84px 1fr auto auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--c-line)}
.line:last-child{border-bottom:0}
.line .art{background:var(--c-soft-2); border-radius:12px; aspect-ratio:1/1; display:grid; place-items:center} .line .art svg{width:80%}
.line b{display:block} .line span{font-size:13px; color:var(--c-ink-3)}
.line .rm{border:0; background:none; color:var(--c-ink-3); font-size:13px; text-decoration:underline}
.sum-box{position:sticky; top:96px}
.sum-row{display:flex; justify-content:space-between; padding:6px 0; font-size:14.5px; color:var(--c-ink-2)}
.sum-row.tot{border-top:1px solid var(--c-line); margin-top:10px; padding-top:14px; color:var(--c-ink); font-weight:800; font-size:18px}
.field{display:grid; gap:6px; margin-bottom:14px}
.field label{font-size:13px; font-weight:700; color:var(--c-ink-2)}
.field input,.field select{border:1px solid var(--c-line); border-radius:11px; padding:12px 14px; background:var(--c-surface); width:100%}
.field input:focus{outline:2px solid color-mix(in srgb,var(--c-brand) 40%,transparent); border-color:var(--c-brand)}
.pay-opt{display:flex; gap:12px; align-items:center; border:2px solid var(--c-brand); border-radius:14px; padding:14px 16px; background:color-mix(in srgb,var(--c-soft) 50%,#fff)}
.pay-opt .ic{width:40px; height:28px; border-radius:6px; background:var(--c-ink); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center}
.pay-opt b{display:block} .pay-opt span{font-size:12.5px; color:var(--c-ink-3)}
.seller-card{display:flex; gap:12px; align-items:center; background:var(--c-soft); border-radius:14px; padding:14px 16px}
.seller-card .av{width:42px; height:42px; border-radius:50%; background:var(--c-brand); color:#fff; display:grid; place-items:center; font-weight:800}
.seller-card b{display:block} .seller-card span{font-size:12.5px; color:var(--c-ink-3)}
.note{font-size:12.5px; color:var(--c-ink-3); margin-top:12px; line-height:1.6}
.empty{text-align:center; padding:80px 20px; color:var(--c-ink-3)} .empty b{display:block; font-size:18px; color:var(--c-ink); margin-bottom:6px}

/* 결과 · 내 주문 */
.result{max-width:560px; margin:60px auto 80px; text-align:center}
.result .mk{width:76px; height:76px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; font-size:34px; background:var(--c-soft); color:var(--c-brand)}
.result.bad .mk{background:#FBE7E4; color:var(--c-sale)}
.result h1{font-size:28px; margin-bottom:8px} .result p{color:var(--c-ink-3); margin:0 0 22px}
.result .panel{text-align:left; margin-bottom:20px}
.kv{display:grid; grid-template-columns:110px 1fr; gap:8px 12px; font-size:14px} .kv dt{color:var(--c-ink-3)} .kv dd{margin:0; font-weight:600}
.orders{display:grid; gap:16px; padding-bottom:60px}
.ord{background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden}
.ord-h{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--c-line); background:var(--c-bg); flex-wrap:wrap}
.ord-h b{font-size:15px} .ord-h span{font-size:13px; color:var(--c-ink-3)}
.ord-b{padding:18px 22px; display:grid; gap:14px}
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.steps div{text-align:center; font-size:12px; color:var(--c-ink-3); position:relative; padding-top:18px}
.steps div::before{content:""; position:absolute; top:4px; left:0; right:0; height:4px; border-radius:4px; background:var(--c-line)}
.steps div.on{color:var(--c-brand-deep); font-weight:700} .steps div.on::before{background:var(--c-brand)}
.st-pill{font-size:12px; font-weight:800; padding:4px 10px; border-radius:99px; background:var(--c-soft); color:var(--c-brand-deep)}
.st-pill.warn{background:var(--c-accent-soft); color:#7A4A00} .st-pill.mute{background:#EEE; color:#777}
.ord-items{display:grid; gap:10px}
.ord-items .it{display:flex; gap:12px; align-items:center} .ord-items .it .art{width:54px; border-radius:10px; background:var(--c-soft-2); flex-shrink:0} .ord-items .it .art svg{width:100%}
.ord-items .it span{color:var(--c-ink-3); font-size:13px}
.ord-f{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding:0 22px 18px}
.trk{border:1px solid var(--c-line); border-radius:14px; padding:16px 18px; background:var(--c-bg)}
.trk-h{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:8px}
.trk-h b{font-size:15px}
.trk .big{font-size:20px; font-weight:800; color:var(--c-brand-deep); margin:4px 0}
.trk .sb{display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:6px; background:var(--c-accent-soft); color:#7A4A00}
.tl{list-style:none; margin:12px 0 0; padding:0 0 0 6px}
.tl li{position:relative; padding:0 0 14px 20px; border-left:2px solid var(--c-line); font-size:13.5px}
.tl li:last-child{border-left-color:transparent; padding-bottom:0}
.tl li::before{content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--c-line)}
.tl li.on::before{background:var(--c-brand); border-color:var(--c-brand)}
.tl li b{display:block} .tl li span{color:var(--c-ink-3); font-size:12.5px}

/* 로그인 */
.auth{max-width:440px; margin:60px auto 80px}
.auth .panel{padding:32px}
.auth h1{font-size:26px; margin-bottom:6px} .auth p.s{color:var(--c-ink-3); margin:0 0 22px}
.demo-acc{margin-top:20px; padding-top:16px; border-top:1px dashed var(--c-line)}
.demo-acc .k{font-size:12.5px; font-weight:700; color:var(--c-ink-3); margin-bottom:8px}
.demo-acc .row{display:flex; gap:8px; flex-wrap:wrap}
.err{background:#FBE7E4; color:#9B2A20; border-radius:10px; padding:10px 12px; font-size:13.5px; margin-bottom:14px}

/* 모달 · 토스트 */
.mbg{position:fixed; inset:0; background:rgba(15,25,20,.45); z-index:80; display:grid; place-items:center; padding:20px}
.modal{background:var(--c-surface); border-radius:var(--radius); width:100%; max-width:520px; max-height:88vh; overflow:auto; padding:26px; box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.modal h3{font-size:20px; margin-bottom:6px} .modal .sub{color:var(--c-ink-3); font-size:13.5px; margin-bottom:16px}
.modal textarea{width:100%; border:1px solid var(--c-line); border-radius:11px; padding:12px; min-height:90px}
.modal .acts{display:flex; gap:8px; justify-content:flex-end; margin-top:16px}
.toasts{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:90; display:grid; gap:8px}
.toast{background:var(--c-ink); color:#fff; padding:12px 18px; border-radius:12px; font-size:14px; box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.toast.bad{background:var(--c-sale)}

/* 푸터 */
.ft{background:#16201A; color:#AAB8AE; padding:50px 0 40px; font-size:13px}
.ft .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.ft .logo{color:#fff; margin-bottom:12px} .ft .logo small{color:#7F8F84}
.ft h5{color:#fff; font-size:14px; margin:0 0 12px}
.ft ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.ft .demo{margin-top:16px; color:#E9C98A}

/* 휴대폰 */
@media (max-width:960px){
  .gnb{display:none} .gnb.open{display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0; background:var(--c-surface); border-bottom:1px solid var(--c-line); padding:8px 24px 16px}
  .gnb.open a{padding:12px 0; border-bottom:1px solid var(--c-line)}
  .burger{display:block}
  .hero .wrap{grid-template-columns:1fr; min-height:0; padding-top:30px} .hero-art{max-width:380px}
  .trust .wrap{grid-template-columns:repeat(2,1fr)} .trust .it:nth-child(2){border-right:0} .trust .it{border-bottom:1px solid var(--c-line)}
  .cats{grid-template-columns:repeat(3,1fr)} .grid{grid-template-columns:repeat(2,1fr); gap:14px}
  .promo,.routine,.pd,.two,.info-tabs,.ft .wrap{grid-template-columns:1fr} .pd{gap:24px} .pd .art{position:static}
  .sum-box{position:static} .hd .wrap{gap:12px} .hd-link.hide-m{display:none} .btn-sol{padding:7px 9px; font-size:12px}
  .sec{padding:50px 0}
}
@media (max-width:520px){ .wrap{padding:0 16px} .line{grid-template-columns:64px 1fr; } .line > :nth-child(3), .line > :nth-child(4){grid-column:2} .logo small{display:none} }

/* 결제수단 (1.1.0) */
.pay-methods{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px}
.pm{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px 12px; border:1.5px solid var(--c-line); border-radius:14px; background:var(--c-surface); font-size:14px}
.pm .ic{width:40px; height:26px; border-radius:6px; background:var(--c-soft); color:var(--c-brand-deep); font-size:10px; font-weight:800; display:grid; place-items:center}
.pm em{position:absolute; top:6px; right:6px; font-style:normal; font-size:10px; font-weight:800; padding:1px 6px; border-radius:6px; background:var(--c-soft-2); color:var(--c-ink-3)}
.pm.on{border-color:var(--c-brand); background:color-mix(in srgb,var(--c-soft) 50%,#fff)} .pm.on .ic{background:var(--c-brand); color:#fff}
.bank-box{background:var(--c-bg); border:1px dashed var(--c-line); border-radius:14px; padding:16px 18px}
.soon{background:var(--c-soft-2); border-radius:14px; padding:16px 18px; font-size:14px; color:var(--c-ink-2)} .soon b{display:block; color:var(--c-ink); margin-bottom:4px}
.wait-note{background:var(--c-accent-soft); color:#6A4300; border-radius:12px; padding:12px 14px; font-size:14px}
@media (max-width:520px){ .pay-methods{grid-template-columns:repeat(2,1fr)} }