/* 꿀달달 마켓 디자인 시안 — 공통 뼈대 (2026-10-24 작성)
   색·글꼴·모서리 같은 값은 시안별 theme.css의 변수로 바꾼다.
   모바일 화면을 먼저 만들고, 넓은 화면은 아래쪽 @media에서 맞춘다. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--outer, var(--bg)); line-height: 1.5; word-break: keep-all; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.ico { width: 20px; height: 20px; flex: none; }
.hint { font-size: 13px; color: var(--sub); margin: 8px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.hint .ico { width: 16px; height: 16px; margin-top: 2px; }
.mono { font-family: ui-monospace, Consolas, monospace; }

/* ---------- 로고 ---------- */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-mark { width: 28px; height: 28px; }
.logo-text { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 19px; letter-spacing: -.02em; color: var(--brand-text, var(--text)); }

/* ---------- 버튼 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--btn-h); padding: 0 20px; border-radius: var(--r-btn); font-size: 16px; font-weight: 700; white-space: nowrap; transition: transform .08s, filter .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--btn-shadow, none); }
.btn-primary:hover { filter: brightness(1.04); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1.5px solid var(--line); }
.btn-lg { height: calc(var(--btn-h) + 4px); font-size: 17px; }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn-sm .ico { width: 16px; height: 16px; }
.btn-block { width: 100%; }
.btn-icon { width: calc(var(--btn-h) + 4px); padding: 0; flex: none; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; }
.icon-btn .ico { width: 24px; height: 24px; }
.dot { position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* ================= 고객 화면 ================= */
.shop { max-width: 480px; margin: 0 auto; background: var(--bg); min-height: 100vh; position: relative; padding-bottom: 88px; box-shadow: 0 0 0 1px var(--line); }
.notice-bar { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 8px 12px; background: var(--notice-bg, var(--honey)); color: var(--notice-text, var(--text)); }
.notice-bar .ico { width: 15px; height: 15px; }
.top { position: sticky; top: 0; z-index: 20; height: 58px; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 16px; background: var(--top-bg, var(--bg)); border-bottom: 1px solid var(--top-line, transparent); }
.top:has(> .icon-btn:first-child) { padding-left: 4px; }
.top-title { font-size: 18px; font-weight: 800; margin: 0; flex: 1; }
.top-right { margin-left: auto; display: flex; }

.sec { padding: 24px 16px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sec-head a { font-size: 14px; color: var(--sub); display: flex; align-items: center; }
.sec-head a .ico { width: 16px; height: 16px; }
.sec-title { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 20px; letter-spacing: -.02em; margin: 0; }
.sec-head .sec-title { margin: 0; }
.sec > .sec-title { margin-bottom: 14px; }
.sec-title.sm { font-size: 17px; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 14px; margin: 0 -16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 40px; padding: 0 16px; border-radius: var(--r-chip); background: var(--surface); border: 1.5px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--sub); }
.chip.on { background: var(--chip-on, var(--primary)); color: var(--chip-on-text, var(--on-primary)); border-color: transparent; }

/* 상품 그림(상품권 모양) */
.thumb { --tw: 170px; position: relative; aspect-ratio: 1; border-radius: var(--r-thumb); overflow: hidden; background: linear-gradient(140deg, var(--c1), var(--c2)); color: #4A2E12; display: flex; flex-direction: column; justify-content: flex-end; padding: 11%; }
.thumb-brand { position: absolute; top: 9%; left: 11%; display: flex; align-items: center; gap: 4px; font-size: max(9px, calc(var(--tw) * .075)); font-weight: 800; opacity: .85; }
.thumb-brand .logo-mark { width: 1.6em; height: 1.6em; --honey: #fff; --logo-drop: #E39A00; }
.thumb-short { font-size: max(9px, calc(var(--tw) * .09)); font-weight: 700; opacity: .8; }
.thumb-big { font-family: var(--font-head); font-size: calc(var(--tw) * .22); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; }
.thumb-hex { position: absolute; right: -14%; top: -10%; width: 62%; fill: rgba(255, 255, 255, .28); }
.thumb-sold { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(60, 40, 20, .45); color: #fff; font-weight: 800; font-size: max(12px, calc(var(--tw) * .11)); }
.thumb.xs { --tw: 64px; width: 64px; flex: none; border-radius: calc(var(--r-thumb) * .6); }
.thumb.sm { --tw: 96px; width: 96px; flex: none; }
.thumb.lg { --tw: 390px; border-radius: 0; }
.thumb.xs .thumb-brand, .thumb.xs .thumb-short { display: none; }
.thumb.xs { padding: 9%; }

.plist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 12px; }
.pcard { display: block; }
.pcard-body { padding-top: 10px; }
.pcard-name { font-size: 14.5px; font-weight: 600; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.soldout .pcard-name, .soldout .price { opacity: .5; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price strong { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.price-off { color: var(--accent); font-weight: 800; font-size: 16px; }
.price del { color: var(--sub); font-size: 12.5px; }
.price.lg strong { font-size: 26px; }
.price.lg .price-off { font-size: 24px; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.badge { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: var(--r-badge, 6px); background: var(--badge-bg, var(--surface2)); color: var(--text); }
.badge.warn { background: #FFE3D3; color: #B4470F; }
.badge.gray { background: #EEE8DF; color: #7A6A58; }
.badge.line { background: transparent; border: 1px solid var(--line); color: var(--sub); }
.badge .ico { width: 12px; height: 12px; }

.plist-rows { display: flex; flex-direction: column; gap: 12px; }
.prow { display: grid; grid-template-columns: 96px 1fr 64px; gap: 14px; align-items: center; background: var(--surface); border-radius: var(--r-card); padding: 12px; box-shadow: var(--shadow); }
.prow-body .pcard-name { display: -webkit-box; }
.prow-buy { height: 64px; border-radius: var(--r-btn); background: var(--primary); color: var(--on-primary); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; }
.prow-buy.off { background: #EEE8DF; color: #9C8B78; }

.trust { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trust li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 6px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.trust .ico { width: 26px; height: 26px; color: var(--honey-deep); margin-bottom: 4px; }
.trust b { font-size: 13.5px; }
.trust span { font-size: 11.5px; color: var(--sub); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.steps li { background: var(--surface); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.steps i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: var(--honey); color: var(--text); font-weight: 900; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.steps b { font-size: 15px; }
.steps span { font-size: 12.5px; color: var(--sub); }

.coupon-banner { margin: 8px 16px; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-card); background: var(--coupon-bg, var(--text)); color: var(--coupon-text, #fff); }
.coupon-banner > span { width: 44px; height: 44px; border-radius: 50%; background: var(--honey); color: var(--text); display: flex; align-items: center; justify-content: center; flex: none; }
.coupon-banner div { flex: 1; display: flex; flex-direction: column; }
.coupon-banner b { font-size: 16px; }
.coupon-banner small { opacity: .75; }

.foot { padding: 28px 16px 24px; border-top: 1px solid var(--line); margin-top: 16px; font-size: 12.5px; color: var(--sub); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0; color: var(--text); font-size: 13.5px; }
.biz { line-height: 1.75; margin: 0 0 10px; }
.biz a { text-decoration: underline; }
.copy { margin: 0; }

.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--tab-bg, var(--surface)); border-top: 1px solid var(--line); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--sub); }
.tabbar a.on { color: var(--tab-on, var(--text)); }
.tabbar a.on .ico { color: var(--tab-on-icon, var(--honey-deep)); }
.tabbar .ico { width: 24px; height: 24px; }

.buybar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; z-index: 30; display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.buybar .btn-lg:not(.btn-icon) { flex: 1; }

.search-box { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: var(--r-input); background: var(--surface); border: 1.5px solid var(--line); margin: 8px 16px 14px; }
.search-box .ico { color: var(--sub); }
.search-box input { border: 0; outline: 0; background: none; flex: 1; font-size: 15.5px; min-width: 0; }
main > .chips { margin: 0; padding: 2px 16px 10px; }
.sortbar { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 14px; font-size: 13.5px; color: var(--sub); }
.sort { display: flex; gap: 2px; }
.sort button { padding: 6px 8px; font-size: 13px; color: var(--sub); }
.sort button.on { color: var(--text); font-weight: 800; }
main > .plist-grid, main > .plist-rows { padding: 0 16px 24px; }

/* 상세 */
.detail-info { padding: 20px 16px 8px; }
.detail-cat { font-size: 13px; color: var(--sub); margin: 0 0 4px; font-weight: 600; }
.detail-name { font-size: 21px; line-height: 1.35; margin: 0 0 6px; font-weight: 800; letter-spacing: -.02em; }
.detail-meta { display: flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--sub); margin: 0 0 12px; }
.detail-meta .ico { width: 16px; height: 16px; color: var(--honey-deep); fill: var(--honey-deep); }
.ship-box { margin-top: 16px; border-radius: var(--r-card); background: var(--surface2); padding: 4px 14px; }
.ship-box > div { display: flex; gap: 10px; padding: 11px 0; align-items: center; }
.ship-box > div + div { border-top: 1px dashed var(--line); }
.ship-box .ico { color: var(--honey-deep); }
.ship-box span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--sub); }
.ship-box b { font-size: 14.5px; color: var(--text); }
.opt-sec { padding-bottom: 8px; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt { position: relative; border: 2px solid var(--line); border-radius: var(--r-input); padding: 12px 8px; text-align: center; display: flex; flex-direction: column; background: var(--surface); cursor: pointer; }
.opt input { position: absolute; opacity: 0; }
.opt-label { font-weight: 800; font-size: 16px; }
.opt-price { font-size: 13px; color: var(--sub); }
.opt:has(input:checked) { border-color: var(--opt-on, var(--honey-deep)); background: var(--opt-on-bg, var(--surface2)); }
.opt.off { opacity: .45; cursor: not-allowed; }
.refund { border-radius: var(--r-card); padding: 14px 16px; background: #FFF4EA; border: 1.5px solid #F5C9A3; font-size: 13.5px; color: #5A3415; }
.refund.strong { border-width: 2px; border-color: #E9874A; }
.refund p { margin: 0 0 6px; }
.refund p:last-child { margin: 0; }
.refund-title { display: flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 800; color: #B4470F; }
.tabs { position: sticky; top: 58px; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg); border-bottom: 1px solid var(--line); }
.tabs button { height: 50px; font-size: 14.5px; font-weight: 700; color: var(--sub); border-bottom: 3px solid transparent; }
.tabs button.on { color: var(--text); border-color: var(--tab-line, var(--honey-deep)); }
.desc-html { font-size: 15px; }
.desc-html h3 { font-size: 19px; margin: 0 0 8px; }
.desc-html p { margin: 0 0 12px; }
.desc-html ul { padding-left: 20px; margin: 0 0 12px; }
.desc-html img { display: block; border-radius: 12px; margin: 0 0 12px; }
.desc-pic { margin: 0 0 12px; max-width: 260px; }
.desc-pic .thumb { --tw: 260px; }
.phone .thumb.lg { --tw: 300px; }
.howto { padding-left: 20px; margin: 0 0 12px; font-size: 15px; line-height: 1.9; }
.rev-sum { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rev-sum strong { font-size: 30px; font-weight: 900; }
.stars { color: var(--honey-deep); letter-spacing: 1px; }
.rev-sum small { color: var(--sub); }
.rev { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.rev p { margin: 0; }
.rev-top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px !important; font-size: 13px; }
.rev-top small { color: var(--sub); }
.rev + .btn { margin-top: 14px; }

/* 장바구니 */
.cart { padding: 0 16px 24px; }
.cart-note { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-radius: var(--r-card); background: var(--surface2); font-size: 14px; font-weight: 600; margin: 8px 0 16px; }
.cart-note .ico { color: var(--honey-deep); }
.check-all { display: flex; gap: 8px; align-items: center; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--check, var(--honey-deep)); flex: none; margin: 0; }
.citem { display: grid; grid-template-columns: 22px 64px 1fr 32px; gap: 12px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.citem-opt { display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--sub); margin: 0 0 10px; }
.citem-opt .ico { width: 13px; height: 13px; }
.citem-row { display: flex; justify-content: space-between; align-items: center; }
.citem-row strong { font-size: 16.5px; }
.citem-del { width: 32px; height: 32px; color: var(--sub); }
.citem-del .ico { width: 18px; height: 18px; }
.stepper { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-input); height: 38px; background: var(--surface); }
.stepper button { width: 38px; height: 100%; display: flex; align-items: center; justify-content: center; }
.stepper .ico { width: 16px; height: 16px; }
.stepper span { min-width: 28px; text-align: center; font-weight: 700; }
.summary { margin-top: 18px; padding: 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); font-size: 14.5px; }
.summary > div { display: flex; justify-content: space-between; padding: 5px 0; color: var(--sub); }
.summary .total { color: var(--text); font-weight: 800; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; align-items: center; }
.summary .total strong { font-size: 22px; color: var(--total, var(--text)); }
.summary .minus { color: var(--accent); }

/* 주문 */
.order { padding: 4px 16px 24px; }
.progress { display: flex; gap: 6px; margin: 4px 0 14px; }
.progress span { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; padding: 7px 0; border-radius: var(--r-chip); background: var(--surface); color: var(--sub); border: 1px solid var(--line); }
.progress span.on { background: var(--honey); color: var(--text); border-color: transparent; }
.box { background: var(--surface); border-radius: var(--r-card); padding: 18px 16px; margin-bottom: 12px; box-shadow: var(--shadow); border: var(--box-border, 0); }
.box-title { display: flex; align-items: center; gap: 6px; font-size: 16.5px; font-weight: 800; margin: 0 0 4px; }
.box-title .ico { color: var(--honey-deep); }
.box-title em { font-style: normal; font-size: 11.5px; color: var(--accent); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; margin-left: 2px; }
.box-desc { font-size: 13.5px; color: var(--sub); margin: 0 0 12px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13.5px; font-weight: 700; }
.field > span { color: var(--sub); }
.field small { font-weight: 400; }
.field input, .field select, .field textarea { height: 54px; padding: 0 14px; border-radius: var(--r-input); border: 1.5px solid var(--line); background: var(--input-bg, #fff); font-size: 16.5px; font-weight: 500; outline: 0; width: 100%; }
.field textarea { height: auto; padding: 12px 14px; font-size: 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--honey-deep); box-shadow: 0 0 0 3px var(--focus, rgba(255, 190, 40, .3)); }
.match { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; margin: -2px 0 0; }
.match .ico { width: 18px; height: 18px; }
.match.ok { color: #2E8B57; }
.match.bad { color: #D2452B; }
.fold summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary span { flex: 1; }
.fold[open] summary .ico { transform: rotate(180deg); }
.mini { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; }
.mini span { flex: 1; display: flex; flex-direction: column; }
.mini small { color: var(--sub); }
.select-row { width: 100%; display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 14px; border-radius: var(--r-input); border: 1.5px solid var(--line); margin-top: 8px; text-align: left; }
.select-row span { flex: 1; }
.select-row b { color: var(--accent); }
.pays { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pay { height: 54px; border-radius: var(--r-input); border: 1.5px solid var(--line); font-weight: 700; font-size: 15px; background: var(--surface); }
.pay.on { border: 2px solid var(--opt-on, var(--honey-deep)); background: var(--opt-on-bg, var(--surface2)); }
.agree { margin-top: 14px; display: flex; flex-direction: column; }
.agree label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: 14px; }
.agree label span { flex: 1; }
.agree label a { color: var(--sub); text-decoration: underline; font-size: 13px; }
.agree em { font-style: normal; color: var(--accent); font-weight: 800; margin-right: 2px; }
.agree-all { border-bottom: 1px solid var(--line); padding-bottom: 12px !important; margin-bottom: 4px; font-size: 15.5px !important; }
.sheet-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(40, 25, 10, .45); display: none; align-items: flex-end; justify-content: center; }
.sheet-wrap.open { display: flex; }
.sheet { width: 100%; max-width: 480px; background: var(--surface); border-radius: 24px 24px 0 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); text-align: center; }
.sheet-grip { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 18px; }
.sheet h2 { margin: 0 0 12px; font-size: 20px; }
.sheet-email { font-size: 22px; font-weight: 900; padding: 16px; border-radius: var(--r-card); background: var(--surface2); border: 2px dashed var(--honey-deep); margin: 0 0 12px; word-break: break-all; }
.sheet-desc { font-size: 14px; color: var(--sub); margin: 0 0 18px; }
.sheet-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }

/* ================= 관리자 화면 ================= */
.adm { min-height: 100vh; background: var(--adm-bg, var(--bg)); padding-bottom: 76px; }
.side { display: none; }
.adm-top { position: sticky; top: 0; z-index: 20; height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; background: var(--adm-top-bg, var(--bg)); border-bottom: 1px solid var(--line); }
.adm-top-logo .logo-text { display: none; }
.adm-top h1 { font-size: 19px; margin: 0; flex: 1; font-weight: 800; }
.adm-top-right { display: flex; align-items: center; gap: 8px; }
.hide-m { display: none !important; }
.adm-body { padding: 16px; }
.adm-tab { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-top: 1px solid var(--line); }
.adm-tab a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: var(--sub); }
.adm-tab a.on { color: var(--text); }
.adm-tab a.on .ico { color: var(--honey-deep); }
.adm-tab .ico { width: 24px; height: 24px; }
.adm-tab em { position: absolute; top: 10px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.h2 { font-size: 17px; margin: 4px 0 12px; font-weight: 800; }
.h3 { font-size: 16px; margin: 0 0 12px; font-weight: 800; }
.h3 small { font-weight: 500; color: var(--sub); font-size: 13px; margin-left: 4px; }
.card { background: var(--surface); border-radius: var(--r-card); padding: 18px 16px; margin-bottom: 14px; box-shadow: var(--shadow); border: var(--box-border, 0); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-head .h3 { margin: 0; }
.card-head > a { font-size: 13.5px; color: var(--sub); display: flex; align-items: center; }
.card-head > a .ico { width: 16px; height: 16px; }
.todo { display: grid; gap: 10px; margin-bottom: 16px; }
.todo-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); border-left: 5px solid; }
.todo-card > .ico { width: 26px; height: 26px; }
.todo-card div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.todo-card b { font-size: 16px; }
.todo-card div span { font-size: 13px; color: var(--sub); }
.todo-card.red { border-color: #E0533A; } .todo-card.red > .ico { color: #E0533A; }
.todo-card.orange { border-color: #F2A13A; } .todo-card.orange > .ico { color: #E08A1E; }
.todo-card.green { border-color: #3FA56B; } .todo-card.green > .ico { color: #3FA56B; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.kpis.three { grid-template-columns: repeat(3, 1fr); }
.kpi { background: var(--surface); border-radius: var(--r-card); padding: 14px; box-shadow: var(--shadow); border: var(--box-border, 0); display: flex; flex-direction: column; gap: 2px; }
.card .kpi { background: var(--surface2); box-shadow: none; border: 0; }
.kpi span { font-size: 13px; color: var(--sub); font-weight: 600; }
.kpi b { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.kpi b.ok { color: #2E8B57; } .kpi b.bad { color: #D2452B; } .kpi b.warn { color: #C7741A; }
.kpi small { font-size: 12px; color: var(--sub); }
.kpi small.up { color: #2E8B57; } .kpi small.down { color: #D2452B; }
.grid2 { display: grid; gap: 0; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 20px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.bar span { width: 100%; max-width: 40px; background: var(--bar, var(--surface2)); border-radius: 8px 8px 3px 3px; position: relative; }
.bar.on span { background: var(--honey); }
.bar i { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; font-style: normal; color: var(--sub); white-space: nowrap; }
.bar b { font-size: 12px; color: var(--sub); }
.recent { list-style: none; margin: 0; padding: 0; }
.recent li { display: grid; grid-template-columns: 46px 1fr auto; grid-template-areas: "t n b" "t p p"; gap: 2px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: center; }
.recent li:last-child { border: 0; }
.recent .t { grid-area: t; color: var(--sub); font-size: 13px; }
.recent .n { grid-area: n; font-weight: 600; }
.recent .pill { grid-area: p; justify-self: start; }
.recent b { grid-area: b; }
.rank { list-style: none; margin: 0; padding: 0; }
.rank li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 14px; }
.rank em { font-style: normal; font-weight: 900; width: 20px; color: var(--honey-deep); }
.rank span { flex: 1; font-weight: 600; }
.rank .thumb.xs { --tw: 48px; width: 48px; }
.pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.pill.sent, .pill.ok { background: #E3F4E8; color: #23744A; }
.pill.fail, .pill.none { background: #FDE4DE; color: #C23A22; }
.pill.paying { background: #E8EEF8; color: #3D5F94; }
.pill.refund { background: #EEE8DF; color: #6E5D4B; }
.pill.low { background: #FFEBD2; color: #B0600E; }

.seg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; height: 42px; padding: 0 14px; border-radius: var(--r-chip); background: var(--surface); border: 1.5px solid var(--line); font-weight: 700; font-size: 14px; color: var(--sub); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button em { font-style: normal; font-size: 12px; background: var(--surface2); color: var(--text); padding: 1px 7px; border-radius: 99px; }
.seg button.red em { background: #FDE4DE; color: #C23A22; }
.seg button.on { background: var(--chip-on, var(--primary)); color: var(--chip-on-text, var(--on-primary)); border-color: transparent; }
.seg button.on em { background: rgba(255, 255, 255, .35); color: inherit; }
.seg.sm { margin-bottom: 0; }
.seg.sm button { height: 36px; font-size: 13px; padding: 0 12px; }
.seg.full { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.seg.full button { width: 100%; }
.filter { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.filter .search-box { margin: 0; }
.alert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: var(--r-card); margin-bottom: 14px; font-size: 13.5px; }
.alert > .ico { width: 24px; height: 24px; flex: none; }
.alert > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.alert b { font-size: 15px; }
.alert.red { background: #FDECE8; color: #7A2414; } .alert.red > .ico { color: #D2452B; }
.alert.orange { background: #FFF1DE; color: #7A4510; } .alert.orange > .ico { color: #E08A1E; }
.alert.info { background: var(--surface2); color: var(--text); } .alert.info > .ico { color: var(--honey-deep); }
.alert .btn { flex: none; }

.olist { display: flex; flex-direction: column; gap: 10px; }
.ohead { display: none; }
.orow { background: var(--surface); border-radius: var(--r-card); padding: 14px; box-shadow: var(--shadow); border: var(--box-border, 0); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "no time" "item price" "mail mail" "st st" "act act" "det det"; gap: 4px 8px; font-size: 14px; }
.orow.fail { box-shadow: inset 4px 0 0 #E0533A, var(--shadow); }
.o-time { grid-area: time; color: var(--sub); font-size: 13px; }
.o-no { grid-area: no; font-size: 12.5px; color: var(--sub); font-family: ui-monospace, Consolas, monospace; }
.o-item { grid-area: item; font-weight: 700; font-size: 15.5px; }
.o-price { grid-area: price; font-weight: 800; }
.o-mail { grid-area: mail; color: var(--sub); display: flex; align-items: center; gap: 6px; }
.o-st { grid-area: st; margin-top: 4px; }
.o-act { grid-area: act; display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.o-act .btn { flex: 1; }
.o-detail { grid-area: det; border-top: 1px dashed var(--line); margin-top: 12px; padding-top: 12px; }
.o-detail h4 { margin: 0 0 8px; font-size: 14.5px; }
.o-detail-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.o-detail-btns .btn { flex: 1; }
.link-btn { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--text); text-decoration: underline; }
.link-btn .ico { width: 14px; height: 14px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; font-size: 13.5px; }
.timeline li { position: relative; padding: 0 0 10px 20px; border-left: 2px solid var(--line); }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.timeline li.ok::before { background: #3FA56B; }
.timeline li.bad::before { background: #E0533A; }
.timeline li.bad { color: #C23A22; font-weight: 700; }
.timeline b { font-family: ui-monospace, Consolas, monospace; font-weight: 600; margin-right: 6px; color: var(--sub); }

.page-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.page-actions > div { display: flex; gap: 8px; }
.page-actions .hint { margin: 0; }
.back { display: flex; align-items: center; gap: 2px; font-weight: 700; color: var(--sub); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.unit { position: relative; }
.unit i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--sub); }
.uploads { display: flex; gap: 10px; flex-wrap: wrap; }
.uploads .thumb.xs { --tw: 88px; width: 88px; }
.drop { width: 88px; height: 88px; border: 2px dashed var(--line); border-radius: var(--r-input); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--sub); cursor: pointer; background: var(--surface2); }
.drop.big { width: 100%; height: auto; padding: 28px 16px; text-align: center; gap: 6px; }
.drop.big .ico { width: 34px; height: 34px; color: var(--honey-deep); }
.drop.big b { color: var(--text); font-size: 15px; }
.mode { margin: 4px 0 12px; }
.mode button { height: 50px; font-size: 15px; }
.ed { border: 1.5px solid var(--line); border-radius: var(--r-input); overflow: hidden; background: #fff; }
.ed-bar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface2); overflow-x: auto; }
.ed-bar button, .ed-img { flex: none; height: 38px; padding: 0 12px; border-radius: 8px; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; background: transparent; }
.ed-bar button:hover, .ed-img:hover { background: rgba(0, 0, 0, .06); }
.ed-img .ico { width: 16px; height: 16px; }
.ed-area { min-height: 240px; padding: 14px; outline: 0; font-size: 15px; }
.ed-area h3 { font-size: 19px; margin: 0 0 8px; }
.ed-area p { margin: 0 0 10px; }
.html-ed textarea { width: 100%; min-height: 280px; border-radius: var(--r-input); border: 0; padding: 14px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.6; background: #2B1D10; color: #FFE7A8; outline: 0; resize: vertical; }
#cleanMsg { margin: 12px 0 0; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 14px; }
.switch-row span:first-child { display: flex; flex-direction: column; font-size: 15px; }
.switch-row small { color: var(--sub); font-size: 12.5px; }
.switch { width: 52px; height: 30px; border-radius: 15px; background: var(--line); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.switch.on { background: #3FA56B; }
.switch.on::after { left: 25px; }
.lockbox { display: flex; gap: 10px; padding: 14px; border-radius: var(--r-input); background: var(--surface2); font-size: 13px; color: var(--sub); }
.lockbox .ico { color: var(--honey-deep); }
.lockbox span { display: flex; flex-direction: column; }
.lockbox b { color: var(--text); font-size: 14.5px; }
.card.fold summary { margin: -2px 0; }
.card.fold summary .h3 { margin: 0; flex: 1; }
.card.fold[open] summary { margin-bottom: 14px; }
.preview { display: none; }
.preview.open { display: flex; position: fixed; inset: 0; z-index: 60; background: rgba(40, 25, 10, .6); flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 10px; }
.preview-head { display: flex; align-items: center; justify-content: space-between; width: 320px; color: #fff; }
.preview-head .icon-btn { color: #fff; }
.phone { width: 320px; height: min(620px, 80vh); border: 10px solid #2B1D10; border-radius: 38px; overflow: hidden; background: var(--bg); box-shadow: 0 20px 50px rgba(40, 25, 10, .3); }
.phone-in { height: 100%; overflow-y: auto; }
.pv-top { height: 48px; display: flex; align-items: center; padding: 0 14px; }
.pv-top .logo-mark { width: 22px; height: 22px; }
.pv-top .logo-text { font-size: 15px; }
.pv-body { padding: 14px; }
.pv-name { font-weight: 800; font-size: 16px; margin: 0; }
.pv-price { font-weight: 900; font-size: 20px; margin: 2px 0 14px; }
.savebar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 25; display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.adm-body:has(.savebar) { padding-bottom: 90px; }

.stock-grid { display: grid; gap: 10px; margin-bottom: 14px; }
.scard { background: var(--surface); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow); border: var(--box-border, 0); }
.scard.none { box-shadow: inset 0 0 0 2px #F0B4A6, var(--shadow); }
.scard.low { box-shadow: inset 0 0 0 2px #F5CC95, var(--shadow); }
.scard-top { display: flex; justify-content: space-between; align-items: center; }
.scard-num { display: flex; align-items: baseline; gap: 4px; margin: 6px 0 8px; }
.scard-num strong { font-size: 34px; font-weight: 900; letter-spacing: -.03em; }
.scard.none .scard-num strong { color: #D2452B; }
.scard-num span { color: var(--sub); font-weight: 600; }
.scard .hint { margin-bottom: 12px; }
.meter { height: 8px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--honey); border-radius: 4px; }
.meter.big { height: 14px; border-radius: 7px; margin-top: 6px; }
.scard.low .meter span { background: #F2A13A; }
.check-line { display: flex; align-items: center; gap: 6px; color: #2E8B57; font-weight: 700; font-size: 14px; margin: -4px 0 12px; }
.check-line .ico { width: 18px; height: 18px; }
.items { list-style: none; margin: 12px 0 0; padding: 0; }
.items li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.items small { grid-column: 1 / -1; color: var(--sub); font-size: 12.5px; }
.errs { font-size: 13px; border: 1px solid var(--line); border-radius: var(--r-input); overflow: hidden; margin-bottom: 14px; }
.errs > div { display: grid; grid-template-columns: 54px 64px 1fr; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); }
.errs > .errs-head { border: 0; background: var(--surface2); font-weight: 800; }
.errs > div span:first-child { font-family: ui-monospace, Consolas, monospace; color: #C23A22; font-weight: 700; }
.errs .hint { padding: 8px 12px 10px; margin: 0; border-top: 1px solid var(--line); }
.errs .hint a { text-decoration: underline; color: var(--text); }
.btn-row { display: flex; gap: 8px; }
.btn-row .btn-primary { flex: 1; white-space: normal; line-height: 1.25; }
.progress-line { display: flex; justify-content: space-between; font-size: 15px; }
.batches { list-style: none; padding: 0; margin: 0; }
.batches li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n n" "p b"; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.batches li > span:first-child { grid-area: n; display: flex; flex-direction: column; }
.batches small { color: var(--sub); font-size: 12.5px; }
.batches .pill { grid-area: p; justify-self: start; }
.batches li > :last-child { grid-area: b; }
.rv-list { list-style: none; padding: 0; margin: 0; }
.rv-list li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.rv-list li > div:first-child { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.rv-list p { margin: 0; width: 100%; }
.rv-list small { color: var(--sub); }
.rv-list .hidden-rv > div:first-child { opacity: .5; }
.rv-act { display: flex; gap: 6px; }
.rv-act .btn { flex: 1; }
.danger { color: #C23A22 !important; }

/* ---------- 넓은 화면 (PC) ---------- */
@media (min-width: 900px) {
  .adm { padding-bottom: 0; }
  .side { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: 236px; padding: 20px 14px; background: var(--side-bg, var(--surface)); color: var(--side-text, var(--text)); border-right: 1px solid var(--line); z-index: 40; }
  .side-logo { display: flex; align-items: center; gap: 8px; padding: 0 8px 22px; }
  .side-logo .logo-text { color: var(--side-text, var(--text)); }
  .side-tag { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: var(--honey); color: #3A2410; }
  .side-nav { display: flex; flex-direction: column; gap: 2px; }
  .side-nav a { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-radius: var(--r-btn); font-weight: 700; font-size: 15px; opacity: .78; }
  .side-nav a span { flex: 1; }
  .side-nav a em { font-style: normal; font-size: 12px; min-width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
  .side-nav a em.warn { background: #F2A13A; }
  .side-nav a.on { opacity: 1; background: var(--side-on-bg, var(--surface2)); color: var(--side-on-text, inherit); }
  .side-nav a:hover { opacity: 1; }
  .side-foot { margin-top: auto; display: flex; gap: 8px; font-size: 12px; opacity: .8; padding: 12px 8px 0; }
  .side-foot .ico { width: 18px; height: 18px; color: #3FA56B; }
  .side-foot a { text-decoration: underline; }
  .adm-main { margin-left: 236px; }
  .adm-top { height: 68px; padding: 0 32px; }
  .adm-top-logo { display: none; }
  .adm-top h1 { font-size: 22px; }
  .hide-m { display: inline-flex !important; }
  .adm-tab { display: none; }
  .adm-body { padding: 24px 32px 40px; max-width: 1240px; }
  .todo { grid-template-columns: repeat(3, 1fr); }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .kpis.three { grid-template-columns: repeat(3, 1fr); }
  .grid2 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .filter { flex-direction: row; align-items: center; }
  .filter .search-box { flex: 1; max-width: 420px; }
  .ohead, .orow { display: grid; grid-template-columns: 60px 168px 1fr 200px 90px 190px 230px; grid-template-areas: "time no item mail price st act" "det det det det det det det"; gap: 0 12px; align-items: center; }
  .ohead { padding: 10px 16px; font-size: 13px; font-weight: 800; color: var(--sub); }
  .orow { padding: 12px 16px; }
  .o-st, .o-act { margin-top: 0; }
  .o-act .btn { flex: none; }
  .o-item { font-size: 14.5px; }
  .olist { gap: 8px; }
  .o-detail { padding-left: 72px; }
  .o-detail-btns .btn { flex: none; }
  .prod-grid { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
  .preview { display: flex; flex-direction: column; align-items: center; gap: 10px; position: sticky; top: 92px; }
  .preview.open { position: sticky; inset: auto; background: none; padding: 0; }
  .preview-head { color: var(--text); }
  .preview-head .icon-btn { display: none; }
  #pvBtn { display: none; }
  .savebar { display: none; }
  .adm-body:has(.savebar) { padding-bottom: 40px; }
  .stock-grid { grid-template-columns: repeat(3, 1fr); }
  .batches li { grid-template-columns: 1fr 220px 140px; grid-template-areas: "n p b"; }
  .rv-list li { flex-direction: row; align-items: center; }
  .rv-list li > div:first-child { flex: 1; }
  .rv-act .btn { flex: none; }
}

/* ---------- 2026-10-24 대표님 수정 요청 반영 ---------- */
/* 메인 맨 위 안내 띠(자동 발송·배송비 없음)를 머리띠와 함께 위에 고정 */
.sticky-head { position: sticky; top: 0; z-index: 25; }
.sticky-head .top { position: static; }
/* 주문창: 이메일 오타 안내를 부드럽게 강조 */
.typo-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 2px; padding: 12px 14px; border-radius: var(--r-input); background: var(--surface2); border: 1.5px solid var(--honey); font-size: 13.5px; color: var(--text); }
.typo-tip .ico { width: 20px; height: 20px; color: var(--honey-deep); margin-top: 1px; }
.typo-tip p { margin: 0; line-height: 1.6; }
.typo-tip b { font-size: 14.5px; }
.typo-tip .dom { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-weight: 800; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
/* 주문창: 상품마다 작은 빼기(×) */
.mini { align-items: stretch; }
.mini > span { justify-content: center; }
.mini-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; }
.mini-del { width: 24px; height: 24px; margin: -2px -4px 0 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sub); }
.mini-del:hover { background: var(--surface2); color: var(--text); }
.mini-del .ico { width: 15px; height: 15px; }
/* 작은 상품 그림에서 "12개월" 글자가 넘치지 않게 */
.thumb.xs .thumb-big { font-size: calc(var(--tw) * .17); white-space: nowrap; letter-spacing: -.05em; }
/* 2026-10-24 대표님 요청: 오타 안내 상자 안에 스팸함 확인을 작게 */
.typo-tip .spam { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--sub); }
.sheet-desc b { color: var(--text); font-size: 15.5px; }
/* 2026-10-24 대표님 요청: 주문창 안내 상자·환불 안내·동의 칸을 덜 부담스럽게 조금씩 줄임 */
.typo-tip { padding: 9px 12px; gap: 8px; font-size: 13px; }
.typo-tip p { line-height: 1.5; }
.typo-tip b { font-size: 13.5px; }
.typo-tip .ico { width: 17px; height: 17px; }
.typo-tip .dom { font-size: 12px; padding: 0 5px; }
.typo-tip .spam { margin-top: 4px; padding-top: 4px; font-size: 12px; }
.refund { padding: 11px 13px; font-size: 12.5px; line-height: 1.5; border-width: 1px; }
.refund.strong { border-width: 1.5px; border-color: #F1B48A; }
.refund p { margin: 0 0 4px; }
.refund-title { font-size: 14px; gap: 5px; }
.refund-title .ico { width: 17px; height: 17px; }
.agree { margin-top: 10px; }
.agree label { padding: 6px 0; font-size: 13px; gap: 8px; }
.agree label a { font-size: 12px; }
.agree input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; }
.agree-all { font-size: 14px !important; padding-bottom: 9px !important; }
/* 장바구니가 비었을 때 */
.cart-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 0; color: var(--sub); }
.cart-empty .ico { width: 44px; height: 44px; color: var(--honey-deep); }
.cart-empty b { color: var(--text); font-size: 17px; }
/* 2026-10-24 대표님: 상품 두 가지 고르기, 결제 수단 하나, 맨 위 띠의 24시간 표시 */
.opts.two { grid-template-columns: 1fr 1fr; }
.pays.one { grid-template-columns: 1fr; }
.nb-24 { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 99px; background: var(--text); color: var(--honey); font-size: 11px; font-weight: 800; margin-right: 2px; }
/* 2026-10-24 대표님: 상품 상세 "받는 방법" 단계 그림 */
.flow { list-style: none; margin: 4px 0 18px; padding: 0; }
.flow li { position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.flow li:last-child { padding-bottom: 0; }
.flow li:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 50px; bottom: 4px; border-left: 2px dashed var(--honey); }
.flow-ico { position: relative; flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--surface2); color: var(--honey-deep); display: flex; align-items: center; justify-content: center; }
.flow li:last-child .flow-ico { background: var(--honey); color: var(--on-primary); }
.flow-ico .ico { width: 24px; height: 24px; }
.flow-ico em { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--honey); font-style: normal; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.flow li > div { padding-top: 3px; }
.flow b { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.flow b small { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: #E3F4E8; color: #23744A; }
.flow p { margin: 2px 0 0; font-size: 13.5px; color: var(--sub); line-height: 1.5; }
.flow-tip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.flow-tip > .ico { color: var(--honey-deep); flex: none; }
.flow-tip div { flex: 1; min-width: 0; }
.flow-tip b { font-size: 14px; }
.flow-tip p { margin: 1px 0 0; font-size: 12.5px; color: var(--sub); line-height: 1.45; }
.flow-tip .btn { flex: none; }
/* 2026-10-24 대표님: 환불 규정 탭 그림 */
.rf-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin: 4px 0 18px; }
.rf-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 8px; border-radius: var(--r-card); }
.rf-step .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; box-sizing: content-box; }
.rf-step b { font-size: 15.5px; }
.rf-step span { font-size: 12.5px; font-weight: 700; }
.rf-step.ok { background: #E8F6EC; color: #23744A; }
.rf-step.ok .ico { background: #fff; }
.rf-step.no { background: #F3EEE7; color: #7A6A58; }
.rf-step.no .ico { background: #fff; }
.rf-step.ok b, .rf-step.no b { color: var(--text); }
.rf-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--honey-deep); }
.rf-mid .ico { width: 22px; height: 22px; }
.rf-mid small { font-size: 11px; font-weight: 800; color: var(--sub); white-space: nowrap; }
.rf-mid i { width: 2px; height: 10px; border-left: 2px dashed var(--honey); }
.rf-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rf-list li { display: flex; gap: 14px; align-items: flex-start; }
.rf-list .flow-ico { width: 42px; height: 42px; border-radius: 14px; }
.rf-list .flow-ico .ico { width: 21px; height: 21px; }
.rf-list b { font-size: 15px; }
.rf-list p { margin: 2px 0 0; font-size: 13px; color: var(--sub); line-height: 1.5; }
.more-link { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--sub); }
.more-link .ico { width: 16px; height: 16px; }
/* 약관 팝업 */
.doc-wrap { position: fixed; inset: 0; z-index: 70; background: rgba(40, 25, 10, .5); display: none; align-items: flex-end; justify-content: center; }
.doc-wrap.open { display: flex; }
.doc { width: 100%; max-width: 480px; max-height: 86vh; background: var(--surface); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; }
.doc-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px 6px 20px; border-bottom: 1px solid var(--line); }
.doc-head h2 { margin: 0; font-size: 18px; }
.doc-body { position: relative; overflow-y: auto; padding: 6px 20px 16px; font-size: 14px; line-height: 1.7; color: var(--text); }
.doc-body h3 { font-size: 15px; margin: 18px 0 6px; padding: 4px 8px; margin-left: -8px; border-radius: 8px; }
.doc-body p, .doc-body ul, .doc-body ol { margin: 0 0 6px; }
.doc-body ul, .doc-body ol { padding-left: 20px; }
.doc-body li { margin-bottom: 4px; }
.doc-body .doc-note { margin-top: 10px; font-size: 12.5px; color: var(--sub); background: var(--surface2); padding: 6px 10px; border-radius: 8px; }
.doc-body .doc-date { margin-top: 16px; font-size: 12.5px; color: var(--sub); }
.doc-hit { background: var(--surface2); box-shadow: inset 4px 0 0 var(--honey); }
.doc-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
@media (min-width: 700px) { .doc-wrap { align-items: center; } .doc { border-radius: 22px; } }
/* 로그인·회원가입·마이페이지 */
.login-hello { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 0 18px; text-align: center; }
.login-hello .logo-mark { width: 44px; height: 44px; }
.login-hello .logo-text { font-size: 24px; color: var(--text); }
.login-hello p { margin: 0; color: var(--sub); font-size: 14px; }
.login-links { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; font-size: 14px; font-weight: 700; }
.login-links span { width: 1px; height: 12px; background: var(--line); }
.join-gift { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--coupon-bg, var(--text)); color: var(--coupon-text, #fff); margin: 8px 0 12px; }
.join-gift > .ico { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--honey); color: var(--text); box-sizing: border-box; flex: none; }
.join-gift span { display: flex; flex-direction: column; font-size: 13px; opacity: .9; }
.join-gift b { font-size: 15.5px; opacity: 1; }
.my-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); margin: 8px 0 18px; }
.my-card div { display: flex; flex-direction: column; }
.my-card b { font-size: 18px; }
.my-card small { color: var(--sub); }
.my-coupon { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 99px; background: var(--surface2); font-weight: 800; font-size: 13px; }
.my-coupon .ico { width: 16px; height: 16px; color: var(--honey-deep); }
.my-title { margin: 0 0 10px; }
.my-order-top { display: flex; justify-content: space-between; align-items: center; }
.my-order-top small { color: var(--sub); }
.my-order .mini { margin: 10px 0 12px; }
.my-order .btn .ico { width: 18px; height: 18px; }
.logout { margin-top: 14px; color: var(--sub); }
.thumb.xs { padding: 6%; align-items: center; } .thumb.xs .thumb-hex { opacity: .6; }
/* 2026-10-24 대표님: 메인 "이렇게 받아요" 가로 4단계 그림 */
.steps2 { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 20px 10px 14px; }
.steps2 ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.steps2 li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.steps2 li:not(:last-child)::after { content: ""; position: absolute; top: 25px; left: calc(50% + 30px); right: calc(-50% + 30px); border-top: 2px dashed var(--honey); }
.s2-ico { position: relative; width: 50px; height: 50px; border-radius: 16px; background: var(--surface2); color: var(--honey-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.steps2 li:last-child .s2-ico { background: var(--honey); color: var(--on-primary); }
.s2-ico .ico { width: 24px; height: 24px; }
.s2-ico em { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--honey); font-style: normal; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.steps2 b { font-size: 13.5px; white-space: nowrap; }
.steps2 small { font-size: 11.5px; color: var(--sub); white-space: nowrap; }
.s2-time { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--sub); }
.s2-time .ico { width: 16px; height: 16px; color: var(--honey-deep); }
.s2-time b { color: var(--text); }
/* 2026-10-24 대표님: 관리자 더보기·쇼핑몰 설정(가게 정보·약관 고치기) */
.seg .seg-a { flex: none; height: 42px; padding: 0 14px; border-radius: var(--r-chip); background: var(--surface); border: 1.5px solid var(--line); font-weight: 700; font-size: 14px; color: var(--sub); display: inline-flex; align-items: center; }
.seg .seg-a.on { background: var(--chip-on, var(--primary)); color: var(--chip-on-text, var(--on-primary)); border-color: transparent; }
.more-list { list-style: none; padding: 6px 16px; }
.more-list li + li { border-top: 1px solid var(--line); }
.more-list a { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.more-list a > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.more-list b { font-size: 16px; }
.more-list small { font-size: 12.5px; color: var(--sub); }
.more-list a > .ico { color: var(--sub); }
.more-list .flow-ico { width: 44px; height: 44px; border-radius: 14px; }
.foot-preview { border: 1px dashed var(--line); border-radius: var(--r-input); padding: 16px; background: var(--bg); font-size: 12.5px; color: var(--sub); margin-bottom: 14px; }
.foot-preview .fp-links { color: var(--text); font-size: 13px; margin: 10px 0; }
.foot-preview .fp-biz { line-height: 1.75; margin: 0; }
.doc-grid .ed { margin-bottom: 12px; }
.ed-area.doc-body { max-height: 460px; overflow-y: auto; padding: 6px 16px 14px; }
.versions { list-style: none; margin: 0; padding: 0; }
.versions li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.versions li > span:first-child { display: flex; flex-direction: column; }
.versions small { color: var(--sub); font-size: 12.5px; }
.versions li.now b { color: var(--honey-deep); }
@media (min-width: 900px) { .doc-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.foot-preview .logo-text { color: var(--text); }
/* 2026-10-24 대표님: 관리자 상품 등록 할인가 미리보기 */
.price-pv { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px; border-radius: var(--r-input); background: var(--surface2); margin-bottom: 4px; }
.price-pv > span { font-size: 13px; font-weight: 700; color: var(--sub); }
.price-pv .price.lg strong { font-size: 22px; }
.price-pv .price.lg .price-off { font-size: 20px; }
input[readonly] { background: var(--surface2) !important; color: var(--sub); }

/* 2026-10-24 대표님 요청: 새 꿀단지 로고. 기본은 밝은 바탕용, 진갈색 머리띠·관리자 왼쪽 메뉴에서는 어두운 바탕용 */
.logo-img { display: block; height: 34px; width: auto; }
.logo .on-dark { display: none; }
.top .logo .on-light, .side .logo .on-light { display: none; }
.top .logo .on-dark, .side .logo .on-dark { display: block; }
.side-logo .logo-img { height: 40px; }
.pv-top .logo-img { height: 24px; }
.login-hello .logo-img { height: 64px; }
.foot .logo-img { height: 30px; }.top .logo-img { height: 44px; }  /* 2026-10-24: 머리글 로고(꿀단지 + 한 줄 글자) 높이 */

/* 2026-10-24 대표님 요청: 바닥글 전화·이메일에 밑줄·링크 색이 붙지 않게(휴대폰이 저절로 링크로 바꾼 경우도) */
.foot .biz a[x-apple-data-detectors], .foot .biz a[href^="tel:"], .foot .biz a[href^="mailto:"] { color: inherit !important; text-decoration: none !important; pointer-events: none; }