/* 핏더팬 고객 화면 (A안: 기존 구성 그대로, 여백·글자·모서리·그림자만 정돈) */
:root {
  --ink: #1d1d1f;
  --ink-2: #86868b;
  --ink-3: #c7c7cc;
  --line: #e5e5ea;
  --line-2: #f2f2f2;
  --line-3: #d2d2d7;
  --bg-2: #f5f5f7;
  --outside: #eeeeee;
  --grad: linear-gradient(135deg, #C69BFF 0%, #FBB5FF 100%);
  --accent: #C69BFF;
  --red: #ff3b30;
  --green: #34c759;
  --orange: #ff9500;
  --sales: #ff6b00;
  --blue: #007aff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 2px 12px rgba(0, 0, 0, .06);
  --hd: 56px;
  --tab: 72px;
  --col: 500px;
  --font: 'Apple SD Gothic Neo', 'Pretendard Variable', Pretendard, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body { background: var(--outside); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--ink-2); }
.hidden { display: none !important; }

/* 가운데 한 칸 */
.col { position: relative; max-width: var(--col); min-height: 100vh; margin: 0 auto; background: #fff; padding-top: var(--hd); padding-bottom: calc(var(--tab) + env(safe-area-inset-bottom)); }
body.no-hd .col { padding-top: 0; }
.main { min-height: 50vh; }

/* 머리 */
.hd { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--col); height: var(--hd); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: #fff; z-index: 100; border-bottom: 1px solid transparent; }
.hd-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hd-logo img { display: block; height: 40px; width: auto; }
.hd-title { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-back { display: flex; margin-left: -6px; padding: 6px; }
.hd-right { display: flex; align-items: center; gap: 14px; }
.hd-right a, .hd-right button { display: flex; position: relative; }
.badge-dot { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; }

/* 하단 탭 */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--col); height: calc(var(--tab) + env(safe-area-inset-bottom)); padding: 8px 0 env(safe-area-inset-bottom); display: flex; background: #fff; border-top: 1px solid var(--line); z-index: 100; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: #b9bcbf; }
.tabbar a img { opacity: .5; }
.tabbar a.on { color: #181a1a; font-weight: 700; }
.tabbar a.on img { opacity: 1; }

/* 푸터 */
.ft { background: var(--bg-2); border-top: 1px solid var(--line); padding: 24px 16px 28px; font-size: 12px; color: var(--ink-2); }
.ft-sns { display: flex; gap: 12px; margin-bottom: 16px; }
.ft-sns img { display: block; border-radius: 50%; }
.ft-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; color: var(--ink); font-weight: 500; }
.ft-biz p { line-height: 1.7; }
.ft-copy { margin-top: 8px; }

/* 앱 카드 (넓은 화면만) */
.app-card { display: none; }
@media (min-width: 992px) {
  .app-card { display: block; position: fixed; top: 120px; left: calc(50% + var(--col) / 2 + 32px); width: 220px; padding: 24px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; font-size: 14px; }
  .app-card p { margin: 8px 0; }
  .app-stores { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
}

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 20px; border-radius: 12px; font-size: 16px; font-weight: 600; transition: transform .1s, opacity .1s; }
.btn:active { transform: scale(.98); opacity: .9; }
.btn-primary { background: var(--grad); color: #fff; }
.btn-line { background: #fff; border: 1px solid var(--line-3); }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.is-off { background: var(--ink-3); color: #fff; pointer-events: none; }
.pill { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line-3); font-size: 13px; background: #fff; }

/* 시트·사이드 메뉴 */
.sheet-dim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 900; }
body.dim .sheet-dim { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 50%; bottom: 0; width: 100%; max-width: var(--col); max-height: 85vh; overflow: auto; transform: translate(-50%, 100%); transition: transform .3s cubic-bezier(.32, .72, 0, 1); background: #fff; border-radius: 20px 20px 0 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); z-index: 950; }
.sheet.open { transform: translate(-50%, 0); }
.sheet-handle { width: 36px; height: 5px; border-radius: 3px; background: var(--line-3); margin: 0 auto 16px; }
.sheet-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.side { position: fixed; top: 0; bottom: 0; right: 0; width: 280px; max-width: 85vw; background: #fff; transform: translateX(100%); transition: transform .3s cubic-bezier(.32, .72, 0, 1); z-index: 950; padding: 16px 20px; overflow: auto; }
.side.open { transform: none; }
.side-head { display: flex; justify-content: space-between; align-items: center; height: 40px; margin-bottom: 12px; font-size: 18px; }
.x { font-size: 28px; line-height: 1; color: var(--ink-2); }
.side-guest { color: var(--ink-2); font-size: 14px; margin-bottom: 12px; }
.side-hello { font-size: 16px; margin-bottom: 16px; }
.side-login { display: flex; width: 100%; height: 46px; margin-bottom: 16px; }
.side-links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.side-sec { margin: 22px 0 10px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.side-flags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.side-flags button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 10px; font-size: 22px; }
.side-flags button span { font-size: 11px; color: var(--ink-2); }
.side-flags button.on { background: var(--bg-2); }

/* 배송 국가 / 언어 */
.lang-bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; border-bottom: 1px solid var(--line-2); font-size: 14px; text-align: left; }
.lang-bar > span:nth-child(2) { flex: 1; font-weight: 500; }
.lb-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line-3); font-size: 13px; }
.lang-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 12px; text-align: left; }
.lang-row.on { background: var(--bg-2); }
.lang-row .flag { font-size: 26px; }
.lr-main { flex: 1; display: flex; flex-direction: column; }
.lr-main small { color: var(--ink-2); font-size: 13px; }
.check { color: var(--accent); font-weight: 700; font-size: 18px; }

/* 토스트 */
.toast { position: fixed; left: 50%; bottom: calc(var(--tab) + 32px); transform: translate(-50%, 20px); max-width: calc(var(--col) - 40px); padding: 14px 24px; border-radius: 12px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 15px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10000; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 공통 섹션 */
.section { padding: 24px 16px; }
.section + .section { padding-top: 8px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.sec-title { font-size: 18px; font-weight: 700; }
.sec-more { font-size: 13px; color: var(--ink-2); }
.empty { padding: 48px 20px; text-align: center; color: var(--ink-2); font-size: 14px; }

/* 배너 (scroll-snap) */
.carousel { position: relative; }
.cr-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cr-track::-webkit-scrollbar { display: none; }
.cr-item { flex: 0 0 100%; scroll-snap-align: start; display: block; }
.cr-item img { display: block; width: 100%; height: auto; }
.cr-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.cr-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .6); transition: width .2s; }
.cr-dot.on { width: 16px; background: #fff; }
.sub-banner { padding: 12px 16px 0; }
.sub-banner .cr-track { flex-direction: column; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; border-radius: 12px; max-height: 120px; }
.sub-banner .cr-item { flex: 0 0 auto; }

/* 바로가기 (최애 그룹 줄) */
.favbar { display: flex; gap: 14px; overflow-x: auto; padding: 16px 16px 4px; scrollbar-width: none; min-height: 96px; }
.favbar::-webkit-scrollbar { display: none; }
.fb-item { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fb-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; overflow: hidden; font-size: 20px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-2); }
.fb-circle img { width: 100%; height: 100%; object-fit: cover; }
.fb-add .fb-circle { border: 1.5px dashed var(--line-3); background: #fff; font-weight: 400; font-size: 26px; }
.fb-label { font-size: 11px; font-weight: 500; line-height: 1.3; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 상품 카드 */
.pgrid { display: grid; gap: 20px 10px; }
.pgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
.pcard { display: block; min-width: 0; }
.pc-img { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--bg-2); overflow: hidden; margin-bottom: 8px; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard.off .pc-img img { opacity: .4; filter: grayscale(1); }
.pc-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pc-group { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; word-break: break-all; }
.pc-price { font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.pc-price .pr { font-weight: 700; }
.disc { color: var(--red); font-weight: 700; }
.reg { color: var(--ink-3); font-size: 12px; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 3px; font-size: 10px; font-weight: 600; color: #fff; }
.tag-grad { background: var(--grad); }
.tag-green { background: var(--green); }
.tag-sales { font-size: 11px; color: var(--sales); font-weight: 600; }
.pgrid-3 .pc-name { font-size: 12px; }
.pgrid-3 .pc-price { font-size: 13px; }

/* 리뷰 카드 */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.rcard { display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; min-width: 0; }
.rc-img { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); margin-bottom: 4px; }
.rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-stars { font-size: 11px; color: var(--orange); letter-spacing: 1px; }
.rc-meta { font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--ink-2); }
.rv-head .rc-stars { font-size: 14px; }
.rv-text { white-space: pre-wrap; font-size: 15px; line-height: 1.6; margin-bottom: 12px; word-break: break-word; }
.rv-photos { display: flex; flex-direction: column; gap: 8px; }
.rv-photos img { width: 100%; border-radius: 12px; display: block; }
.rv-product { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px; border-radius: 12px; background: var(--bg-2); font-size: 13px; }
.rv-product img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #fff; }

/* SNS 버튼 */
.fab-sns { position: fixed; right: max(16px, calc(50% - var(--col) / 2 + 16px)); bottom: calc(var(--tab) + 20px + env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fab { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(198, 155, 255, .45); }
.fab-list { display: none; flex-direction: column; gap: 8px; }
.fab-sns.open .fab-list { display: flex; }
.fab-list img { display: block; border-radius: 50%; box-shadow: var(--shadow); }

/* 팝업 */
.pop-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(0, 0, 0, .45); padding: 24px; }
.pop-box { width: 100%; max-width: 360px; border-radius: 14px; overflow: hidden; background: #fff; }
.pop-link img { display: block; width: 100%; }
.pop-btns { display: flex; border-top: 1px solid var(--line); }
.pop-btns button { flex: 1; height: 48px; font-size: 14px; }
.pop-btns button + button { border-left: 1px solid var(--line); font-weight: 600; }
.pop-small { position: fixed; left: max(12px, calc(50% - var(--col) / 2 + 12px)); bottom: calc(var(--tab) + 28px + env(safe-area-inset-bottom)); z-index: 90; width: 112px; }
.pop-small a { display: block; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.pop-small img { display: block; width: 100%; }
.pop-small .ps-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; line-height: 22px; text-align: center; }

/* 목록 머리 (카테고리 탭 · 품절 제외 · 정렬) */
.list-head { position: sticky; top: var(--hd); z-index: 50; background: #fff; border-bottom: 1px solid var(--line-2); transition: transform .2s; }
.list-head.hide { transform: translateY(-110%); }
.ctabs { display: flex; gap: 18px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; border-bottom: 1px solid var(--line-2); }
.ctabs::-webkit-scrollbar { display: none; }
.ctab { flex: 0 0 auto; height: 44px; display: flex; align-items: center; font-size: 15px; color: var(--ink-2); border-bottom: 2px solid transparent; }
.ctab.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.ctabs-sub { gap: 8px; padding: 10px 16px; border-bottom: 0; }
.ctabs-sub .ctab { height: 30px; padding: 0 12px; border-radius: 15px; background: var(--bg-2); border: 0; font-size: 13px; }
.ctabs-sub .ctab.on { background: var(--ink); color: #fff; font-weight: 600; }
.list-tools { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 16px; font-size: 13px; }
.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.chk-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-3); display: inline-grid; place-items: center; }
.chk.on { color: var(--ink); }
.chk.on .chk-box { background: var(--ink); border-color: var(--ink); }
.chk.on .chk-box::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.sort-btn { font-size: 13px; font-weight: 600; }
.list-body { padding-top: 16px; }
.more-sentinel { height: 1px; }
.loading-more { padding: 20px; text-align: center; color: var(--ink-2); font-size: 13px; }
.sheet-row { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 4px; font-size: 16px; border-bottom: 1px solid var(--line-2); }
.sheet-row.on { font-weight: 700; }

/* 상품 상세 */
.pd { padding-bottom: 24px; }
.pd-gallery .cr-item { aspect-ratio: 1; background: var(--bg-2); }
.pd-gallery .cr-item img { width: 100%; height: 100%; object-fit: cover; }
.pd-dday { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 8px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; }
.pd-info { padding: 18px 16px 20px; border-bottom: 8px solid var(--bg-2); }
.pd-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pd-group { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.pd-acts { display: flex; gap: 12px; }
.ic-btn { display: flex; padding: 2px; }
.pd-name { font-size: 18px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; word-break: break-word; }
.pd-price { font-size: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.pd-price .pr { font-weight: 800; }
.pd-price .reg { font-size: 14px; }
.pd-sales { margin-top: 6px; font-size: 13px; color: var(--sales); font-weight: 600; }
.pd-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pill-c, .pill-o { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 600; }
.pill-c { background: #e6f7fb; color: #0a8aa8; }
.pill-o { background: #fff3e5; color: #d97300; }
.no-cancel { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff0ef; color: var(--red); font-size: 13px; font-weight: 600; }
.pd-limit { margin-top: 10px; font-size: 13px; color: var(--red); font-weight: 600; }
.pd-banner { padding: 12px 16px 0; }
.pd-banner img { max-width: 100%; height: auto; }
.pd-tabs { position: sticky; top: var(--hd); z-index: 40; display: flex; background: #fff; border-bottom: 1px solid var(--line); margin-top: 8px; }
.pd-tabs button { flex: 1; height: 48px; font-size: 15px; color: var(--ink-2); border-bottom: 2px solid transparent; }
.pd-tabs button.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.pd-pane { padding: 16px; }
.pd-pane[data-pane="desc"] { padding: 0 0 16px; }
.desc-frame { display: block; width: 100%; height: 600px; border: 0; }
.rv-sum { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 15px; }
.rv-sum b { font-size: 22px; }
.rv-sum .rc-stars { font-size: 18px; }
.rv-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; margin-bottom: 14px; }
.notice { font-size: 13px; color: #6b6b70; }
.notice-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.notice-block { margin-bottom: 14px; }
.notice-block h4 { margin: 0 0 4px; font-size: 13px; color: var(--ink); }
.notice-block ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.buybar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--col); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); z-index: 110; }
body:has(.buybar) .tabbar { display: none; }
.opt-sheet { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.opt-limit { color: var(--red); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.opt-select { width: 100%; height: 48px; margin-bottom: 8px; padding: 0 12px; border: 1px solid var(--line-3); border-radius: 12px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
.opt-select:disabled { background: var(--bg-2); color: var(--ink-3); }
.opt-rows { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.opt-row { padding: 12px; border-radius: 12px; background: var(--bg-2); }
.or-label { font-size: 14px; margin-bottom: 8px; }
.or-line { display: flex; align-items: center; gap: 10px; }
.or-price { margin-left: auto; font-size: 15px; }
.or-x { font-size: 20px; color: var(--ink-2); padding: 0 2px; }
.stepper { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--line-3); border-radius: 10px; background: #fff; }
.stepper button { width: 34px; height: 32px; font-size: 18px; }
.stepper span { min-width: 30px; text-align: center; font-weight: 600; }
.opt-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.opt-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.opt-input { height: 44px; padding: 0 12px; border: 1px solid var(--line-3); border-radius: 10px; font: inherit; font-size: 15px; color: var(--ink); }
.opt-agree { padding: 12px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 10px; font-size: 14px; }
.opt-agree-title { font-weight: 700; margin-bottom: 6px; }
.opt-check { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.opt-check input { width: 18px; height: 18px; accent-color: #b07cff; }
.opt-agree-body { font-size: 12px; color: var(--ink-2); padding-left: 26px; white-space: pre-wrap; }
.opt-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; border-top: 1px solid var(--line-2); font-size: 15px; }
.opt-total b { font-size: 20px; }
.opt-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 검색 */
.search-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 6px; padding: 8px 16px 8px 10px; background: #fff; }
.search-form { flex: 1; }
.search-form input { width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--bg-2); font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.sec-title.sm { font-size: 16px; margin-bottom: 12px; }
.sgroups { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.sgroups::-webkit-scrollbar { display: none; }
.sgroup { flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; text-align: center; }
.sgroup img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }

/* 그룹 */
.grp-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px 16px; text-align: center; }
.grp-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.grp-head h1 { font-size: 20px; font-weight: 700; }

/* 기획전·이벤트 본문 */
.rich { font-size: 15px; line-height: 1.6; word-break: break-word; }
.rich img { max-width: 100%; height: auto; }
.rich p { margin: 0 0 8px; }
.ev-img { display: block; width: 100%; }
.ev-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.comments { border-top: 8px solid var(--bg-2); }
.cmt-login { display: block; padding: 14px; margin-bottom: 12px; border-radius: 12px; background: var(--bg-2); color: var(--ink-2); font-size: 14px; text-align: center; }
.cmt-list { list-style: none; margin: 0 0 12px; padding: 0; }
.cmt { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.cmt-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.cmt-head span { color: var(--ink-2); }
.cmt p { font-size: 14px; white-space: pre-wrap; word-break: break-word; }

/* 리뷰 모아보기 */
.rv-total { margin-bottom: 12px; font-size: 14px; }
.pager { display: flex; gap: 8px; margin-top: 20px; }
.pager .btn { flex: 1; }

/* 로그인·가입 */
.auth { padding: 24px 20px 40px; }
.auth-logo { display: block; margin: 8px auto 24px; height: 56px; width: auto; }
.auth-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.auth-desc { color: var(--ink-2); font-size: 14px; margin-bottom: 20px; }
.auth-err { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: #fff0ef; color: var(--red); font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-links { display: flex; justify-content: center; gap: 12px; margin-top: 20px; color: var(--ink-2); font-size: 14px; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }
.fld > span b { color: var(--red); }
.inp { height: 50px; padding: 0 14px; border: 1px solid var(--line-3); border-radius: 12px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; width: 100%; }
.inp:focus { outline: none; border-color: #b07cff; }
.inp-row { display: flex; gap: 8px; }
.inp-row .inp { flex: 1; min-width: 0; }
.inp-row .btn { height: 50px; flex: none; }
.fld-help { font-size: 12px; color: var(--ink-2); }
.fld-help.err { color: var(--red); }
.fld-help.ok { color: #0a8a4a; }
.social { margin-top: 28px; }
.social-title { text-align: center; color: var(--ink-2); font-size: 13px; margin-bottom: 12px; }
.social-btns { display: flex; justify-content: center; gap: 14px; }
.social-btns a { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: #fff; }
.social-btns .sb-kakao { background: #fee500; border-color: #fee500; color: #191919; }
.social-btns .sb-naver { background: #03c75a; border-color: #03c75a; color: #fff; }
.social-btns .sb-line { background: #06c755; border-color: #06c755; color: #fff; }
.social-btns .sb-apple { background: #000; border-color: #000; color: #fff; }
.agree { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; }
.agree-all { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-weight: 700; }
.agree-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 14px; }
.agree-row.sub { padding-left: 28px; }
.agree input, .agree-all input { width: 20px; height: 20px; accent-color: #b07cff; flex: none; }
.agree-row a { margin-left: auto; color: var(--ink-2); font-size: 13px; text-decoration: underline; }
.seg { display: flex; gap: 8px; }
.seg label { flex: 1; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--line-3); border-radius: 12px; font-size: 15px; color: var(--ink); }
.seg input:checked + span { border-color: #b07cff; color: #8a4fff; font-weight: 600; background: #f8f2ff; }
.pick { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 14px; border: 1px solid var(--line-3); border-radius: 12px; font-size: 16px; color: var(--ink-2); background: #fff; width: 100%; text-align: left; }
.pick.on { color: var(--ink); }
.grp-list { max-height: 50vh; overflow-y: auto; margin-top: 10px; }
.grp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; border-bottom: 1px solid var(--line-2); text-align: left; font-size: 15px; }
.grp-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
.done-ico { width: 72px; height: 72px; margin: 24px auto 16px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; }
.center { text-align: center; }
.steps { display: flex; gap: 6px; margin-bottom: 20px; list-style: none; padding: 0; }
.steps li { flex: 1; padding-top: 8px; border-top: 3px solid var(--line); font-size: 12px; color: var(--ink-3); }
.steps li.on { border-color: #b07cff; color: var(--ink); font-weight: 600; }
.steps li.done { border-color: #e2ccff; color: var(--ink-2); }
.timer { font-style: normal; color: var(--red); margin-left: 6px; }

/* 마이페이지 */
.my { padding-bottom: 24px; }
.my-prof { display: flex; align-items: center; gap: 14px; padding: 20px 16px; }
.my-hello { flex: 1; font-size: 17px; line-height: 1.4; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.avatar { border-radius: 50%; object-fit: cover; background: var(--bg-2); flex: none; }
.avatar-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); }
.my-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 16px; }
.my-tiles a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border-radius: 14px; background: var(--bg-2); font-size: 13px; }
.my-card { display: flex; align-items: center; gap: 12px; margin: 0 16px 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.my-card-title { font-size: 14px; color: var(--ink-2); flex: none; }
.my-point { margin-left: auto; font-size: 17px; }
.fav-card .fav-body { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.fav-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-2); flex: none; }
.fav-empty { display: inline-flex; align-items: center; justify-content: center; color: #ff6fae; }
.fav-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-sec { padding: 10px 16px; }
.my-sec-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.my-sec-title.pad { padding: 18px 16px 6px; margin: 0; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.order-mini { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); }
.om-top { display: flex; justify-content: space-between; font-size: 14px; }
.om-status { color: #8a4fff; font-weight: 600; }
.om-name { font-size: 15px; }
.empty-sm { color: var(--ink-2); font-size: 14px; padding: 12px 0; text-align: center; }
.empty { color: var(--ink-2); padding: 48px 16px; text-align: center; }
.menu-list { display: flex; flex-direction: column; border-top: 8px solid var(--bg-2); }
.menu-list > a, .menu-list > button, .menu-list > .menu-static { display: flex; align-items: center; gap: 8px; width: 100%; padding: 16px; border-bottom: 1px solid var(--line-2); font-size: 15px; text-align: left; }
.menu-list > * > span:first-child { flex: 1; }
.menu-val { color: var(--ink-2); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.cty-list { max-height: 60vh; overflow-y: auto; margin-top: 10px; }
.cty-list hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.cty-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; text-align: left; font-size: 15px; }
.cty-row.on { color: #8a4fff; font-weight: 600; }
.cty-name { flex: 1; }
.cty-name small { color: var(--ink-2); font-weight: 400; }
.cty-dial { color: var(--ink-2); font-size: 13px; }
.post { padding: 20px 16px 32px; }
.post-title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.post-meta { font-size: 13px; margin-bottom: 18px; }
.legal { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.7; color: var(--ink); }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list a { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-bottom: 1px solid var(--line-2); }
.post-list span { font-size: 13px; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { padding: 16px; font-size: 15px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-a { padding: 0 16px 16px; color: var(--ink-2); font-size: 14px; white-space: pre-wrap; }
.info-prof { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px 12px; }
.info-photo { position: relative; cursor: pointer; }
.info-cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.info-nick { font-size: 18px; display: flex; align-items: center; gap: 8px; }
.info-card { margin: 10px 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.info-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.info-row:last-child { border-bottom: 0; }
.info-label { width: 88px; flex: none; color: var(--ink-2); font-size: 14px; }
.info-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.info-edit { flex: none; padding: 4px 10px; border: 1px solid var(--line-3); border-radius: 8px; font-size: 13px; color: var(--ink); }
.info-foot { display: flex; justify-content: center; gap: 12px; padding: 20px; color: var(--ink-2); font-size: 14px; }
.lang-list.pad { padding: 8px 16px; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line-2); }
.switch-row > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.switch-row small { color: var(--ink-2); font-size: 13px; }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px; background: var(--ink-3); position: relative; flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch:checked { background: #b07cff; }
.switch:checked::after { transform: translateX(20px); }
.fg-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.fg-label { width: 100%; font-size: 14px; color: var(--ink-2); }
.fg-label b { color: var(--ink); margin-left: 4px; }
.fg-body { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.fg-body > span { display: flex; flex-direction: column; }
.fg-body small { color: var(--ink-2); font-size: 13px; }
.fg-extra { flex-direction: column; align-items: stretch; }
.fg-desc { font-size: 13px; margin: 0 0 4px; }
.fg-list { list-style: none; margin: 0; padding: 0; }
.fg-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.fg-list li span { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.chip { padding: 8px 14px; border: 1px solid var(--line-3); border-radius: 18px; font-size: 14px; }
.chip.on { border-color: #b07cff; color: #8a4fff; background: #f8f2ff; font-weight: 600; }
.info-sns { align-items: flex-start; }
.sns-list { display: flex; flex-direction: column; gap: 8px; }
.sns-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sns-item b { font-size: 14px; font-weight: 600; }
.note-ok { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #eefaf2; color: #0a8a4a; font-size: 14px; }
.wd-stats { display: flex; gap: 10px; margin: 16px 0; }
.wd-stats div { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: var(--bg-2); font-size: 13px; color: var(--ink-2); }
.wd-stats b { font-size: 18px; color: var(--ink); }
.wd-title { font-size: 15px; font-weight: 700; margin: 8px 0; }
.wd-notes { margin: 0 0 16px; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.alarm-list { list-style: none; margin: 0; padding: 0; }
.alarm { border-bottom: 1px solid var(--line-2); }
.alarm.new { background: #fbf7ff; }
.alarm summary { display: flex; gap: 12px; padding: 14px 16px; list-style: none; cursor: pointer; }
.alarm summary::-webkit-details-marker { display: none; }
.alarm-ico { font-size: 22px; line-height: 1; flex: none; }
.alarm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.alarm-msg { font-size: 14px; color: var(--ink-2); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.alarm details[open] .alarm-msg { display: block; }
.alarm details > .btn { margin: 0 16px 14px 50px; }
.alarm-main small { font-size: 12px; }
.like.on img { filter: invert(45%) sepia(89%) saturate(2800%) hue-rotate(330deg) brightness(102%); }
.my-grid { padding: 16px; }
.pc-wrap { position: relative; }
.pc-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); color: #ff4d6d; font-size: 16px; line-height: 30px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.addr-list { list-style: none; margin: 0; padding: 0; }
.addr { padding: 16px; border-bottom: 1px solid var(--line-2); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.addr-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.addr-acts { display: flex; gap: 14px; margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.pad16 { padding: 16px; }

.cmt-form { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.cmt-form textarea { flex: 1; height: auto; min-height: 50px; padding: 12px 14px; resize: none; line-height: 1.4; }
.cmt-form .btn { flex: none; }
.cmt-del { margin-left: 8px; font-size: 12px; color: var(--ink-2); text-decoration: underline; }
.att { padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 14px; }
.att-tabs { display: flex; gap: 8px; overflow-x: auto; }
.att-tabs a { flex: none; padding: 8px 14px; border-radius: 18px; background: var(--bg-2); font-size: 14px; }
.att-tabs a.on { background: var(--ink); color: #fff; }
.att-title { font-size: 19px; font-weight: 700; }
.att-streak { display: flex; align-items: baseline; gap: 8px; }
.att-streak b { font-size: 34px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.att-streak small { margin-left: auto; }
.att-desc { font-size: 14px; white-space: pre-wrap; }
.att-bar { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.att-bar span { display: block; height: 100%; background: var(--grad); }
.att-rewards h3, .att-cal h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.att-rewards ul { list-style: none; margin: 0; padding: 0; }
.att-rewards li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.att-rname { flex: 1; display: flex; flex-direction: column; }
.att-rname small { font-size: 12px; }
.att-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 13px; }
.att-dow { color: var(--ink-2); font-size: 12px; padding: 4px 0; }
.att-day { padding: 8px 0; border-radius: 50%; }
.att-day.on { background: var(--grad); color: #fff; font-weight: 700; }
.att-day.today { box-shadow: inset 0 0 0 2px #b07cff; }
.att-fans { font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.att-fan { width: 26px; height: 26px; border-radius: 50%; background: #f1e6ff; color: #8a4fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.fab-att { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); width: 100%; max-width: var(--col); padding: 0 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 90; pointer-events: none; }
.fab-att-btn { pointer-events: auto; padding: 10px 14px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); font-size: 14px; font-weight: 600; }
.list-tabs { display: flex; border-bottom: 1px solid var(--line); position: sticky; top: var(--hd); background: #fff; z-index: 40; }
.list-tabs a { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: var(--ink-2); border-bottom: 2px solid transparent; }
.list-tabs a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.list-tabs b { font-weight: 600; color: #8a4fff; }
.cpn-list { list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 90px; }
.cpn { display: flex; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cpn-main { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.cpn-value { font-size: 20px; font-weight: 800; color: #8a4fff; }
.cpn-name { font-size: 14px; font-weight: 600; }
.cpn-main small { font-size: 12px; }
.cpn-side { width: 110px; flex: none; padding: 12px; border-left: 1px dashed var(--line-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; text-align: center; background: #fbf7ff; }
.cpn-tag { display: inline-flex; padding: 2px 8px; border-radius: 6px; background: var(--bg-2); font-size: 11px; font-weight: 600; }
.fab-code { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); box-shadow: var(--shadow); z-index: 80; }
.pt-card { margin: 16px; padding: 20px; border-radius: 16px; background: var(--grad); color: #fff; display: flex; flex-direction: column; gap: 6px; }
.pt-card b { font-size: 26px; }
.pt-list, .myrv-list { list-style: none; margin: 0; padding: 0; }
.pt-list li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.pt-memo { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.pt-plus { color: #8a4fff; font-weight: 700; }
.pt-minus { color: var(--ink-2); font-weight: 700; }
.myrv { padding: 16px; border-bottom: 8px solid var(--bg-2); display: flex; flex-direction: column; gap: 8px; }
.myrv-prod { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.myrv-prod img { border-radius: 8px; object-fit: cover; }
.myrv-head { display: flex; align-items: center; gap: 8px; }
.myrv-text { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.myrv-photos { display: flex; gap: 6px; overflow-x: auto; }
.myrv-photos img { width: 88px; height: 88px; border-radius: 8px; object-fit: cover; flex: none; }
.qa-list { list-style: none; margin: 0; padding: 0; }
.qa { border-bottom: 1px solid var(--line-2); }
.qa summary { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa-top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.qa-wait { color: #d97300; font-weight: 700; }
.qa-done { color: #0a8a4a; font-weight: 700; }
.qa-title { font-size: 15px; }
.qa-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.qa-bubble { max-width: 85%; padding: 10px 12px; border-radius: 14px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.qa-bubble p { white-space: pre-wrap; word-break: break-word; }
.qa-bubble small { font-size: 11px; color: var(--ink-2); }
.qa-bubble.me { align-self: flex-end; background: #f3eaff; }
.qa-bubble.admin { align-self: flex-start; background: var(--bg-2); }
.qa-more { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; }
.qa-more textarea { flex: 1; height: auto; padding: 10px 12px; resize: none; }
.qa-cats { display: flex; flex-direction: column; gap: 6px; }
.qa-cats label { display: flex; }
.qa-cats input { position: absolute; opacity: 0; }
.qa-cats span { flex: 1; display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--line-3); border-radius: 12px; color: var(--ink); }
.qa-cats small { color: var(--ink-2); font-size: 12px; }
.qa-cats input:checked + span { border-color: #b07cff; background: #f8f2ff; }
.note-box { padding: 12px; border-radius: 12px; background: var(--bg-2); font-size: 13px; margin-bottom: 12px; }
#qnaSheet { max-height: 90vh; overflow-y: auto; }
.cart { padding-bottom: 110px; }
.cart-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.cart-bar .spacer { flex: 1; }
.cart-group { border-bottom: 8px solid var(--bg-2); }
.cart-gname { padding: 14px 16px 4px; font-size: 15px; font-weight: 700; }
.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); position: relative; }
.cart-line.off { opacity: .5; }
.cart-check input { width: 20px; height: 20px; accent-color: #b07cff; }
.cart-img img { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; background: var(--bg-2); }
.cart-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-right: 22px; }
.cart-name { font-size: 15px; font-weight: 600; }
.cart-opt { font-size: 13px; }
.cart-off { font-size: 12px; color: var(--red); font-weight: 700; }
.cart-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cart-sum { font-size: 15px; }
.cart-line .or-x { position: absolute; top: 10px; right: 12px; }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; }
.cart-total b { font-size: 18px; }
.ck { padding-bottom: 100px; }
.ck-sec { padding: 16px; border-bottom: 8px solid var(--bg-2); display: flex; flex-direction: column; gap: 10px; }
.ck-sec h2 { font-size: 16px; font-weight: 700; }
.ck-head { display: flex; justify-content: space-between; align-items: center; }
.ck-addr { display: flex; flex-direction: column; gap: 2px; font-size: 14px; padding: 12px; border-radius: 12px; background: var(--bg-2); }
.ck-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ck-lines li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ck-lines img { border-radius: 8px; object-fit: cover; background: var(--bg-2); }
.ck-ln { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ck-pays { display: flex; flex-direction: column; gap: 8px; }
.ck-pay { display: flex; }
.ck-pay input { position: absolute; opacity: 0; }
.ck-pay span { flex: 1; display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--line-3); border-radius: 12px; }
.ck-pay input:checked + span { border-color: #b07cff; background: #f8f2ff; }
.ck-sum > div { display: flex; justify-content: space-between; font-size: 14px; }
.ck-total { padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 16px !important; }
.ck-total b { font-size: 20px; }
.ck-errors { list-style: none; margin: 0; padding: 0 16px; color: var(--red); font-size: 14px; }
.ck-agree { padding: 12px 16px; }


/* ─────────────────────────────────────────────────────────────
   2026-10 리프레시: 인스타 감성 (구성·기능은 그대로, 겉모습만)
   - 브랜드 라벤더→핑크 그라데이션 하나만 강조색으로
   - 스토리 링(최애 그룹 줄), 유리 같은 머리·하단 탭, 둥근 카드, 촘촘한 사진 리뷰 격자
   ───────────────────────────────────────────────────────────── */
:root {
  --ink: #16131c;
  --ink-2: #8a8494;
  --ink-3: #cbc6d3;
  --line: #ece8f2;
  --line-2: #f4f1f8;
  --line-3: #dcd6e5;
  --bg-2: #f7f4fb;
  --outside: #f3eff9;
  --grad: linear-gradient(120deg, #a47cff 0%, #d98cff 48%, #ff9ec4 100%);
  --grad-soft: linear-gradient(120deg, #f3ecff 0%, #fdeefa 100%);
  --accent: #a47cff;
  --accent-ink: #7b4fe0;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 6px 24px rgba(92, 54, 160, .08);
  --shadow-pop: 0 10px 30px rgba(164, 124, 255, .28);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
body { background: var(--outside); letter-spacing: -.02em; }
.col { min-height: 100dvh; }
::selection { background: #eadcff; }

/* 머리·하단 탭: 반투명 유리 */
.hd { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(236, 232, 242, .7); }
.hd-title { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.badge-dot { background: #ff4f7b; box-shadow: 0 0 0 2px #fff; }
.tabbar { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid rgba(236, 232, 242, .7); }
.tabbar a { position: relative; font-size: 11px; color: #b4aebd; transition: color .2s var(--ease); }
.tabbar a img { transition: transform .25s var(--ease), opacity .2s; }
.tabbar a:active img { transform: scale(.88); }
.tabbar a.on { color: var(--ink); font-weight: 700; }
.tabbar a.on::after { content: ''; position: absolute; bottom: -2px; width: 4px; height: 4px; border-radius: 2px; background: var(--grad); }

/* 섹션 제목: 굵고 촘촘하게 */
.section { padding: 28px 16px; }
.sec-head { margin-bottom: 16px; }
.sec-title { font-size: 20px; font-weight: 800; letter-spacing: -.035em; }
.sec-more { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 4px 10px; border-radius: 999px; background: var(--bg-2); }
.empty { color: var(--ink-2); }

/* 배너: 피드 카드처럼 둥글게 */
.main-banner { padding: 10px 16px 0; }
.main-banner .cr-track { border-radius: 22px; box-shadow: var(--shadow); }
.cr-dots { bottom: 12px; }
.cr-dot { background: rgba(255, 255, 255, .55); }
.cr-dot.on { width: 18px; background: #fff; }
.sub-banner .cr-track { border-radius: 18px; }

/* 최애 그룹 줄 = 인스타 스토리 */
.favbar { gap: 16px; padding: 18px 16px 8px; min-height: 104px; }
.fb-item { flex: 0 0 68px; gap: 7px; }
.fb-circle { width: 66px; height: 66px; padding: 3px; border: 0; background: var(--grad); color: var(--accent-ink); transition: transform .2s var(--ease); }
.fb-circle img { border-radius: 50%; border: 2.5px solid #fff; background: #fff; }
.fb-item:active .fb-circle { transform: scale(.94); }
.fb-add .fb-circle { padding: 0; border: 1.5px dashed var(--line-3); background: #fff; color: var(--ink-2); }
.fb-label { font-size: 11.5px; color: var(--ink); }

/* 상품 카드 */
.pgrid { gap: 24px 12px; }
.pc-img { border-radius: 18px; margin-bottom: 10px; }
.pc-img img { transition: transform .45s var(--ease); }
.pcard:active .pc-img img { transform: scale(1.04); }
@media (hover: hover) { .pcard:hover .pc-img img { transform: scale(1.04); } }
.pc-badge { border-radius: 999px; background: rgba(22, 19, 28, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pc-group { font-size: 11.5px; font-weight: 700; color: var(--accent-ink); letter-spacing: -.01em; }
.pc-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.pc-price { font-size: 15px; }
.pc-price .pr { font-weight: 800; letter-spacing: -.03em; }
.disc { color: #ff4f7b; }
.tag { height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; }
.tag-grad { background: var(--grad); }
.tag-green { background: #e5f8ee; color: #138a4e; }
.tag-sales { color: #ff6a3d; }

/* 사진 리뷰: 프로필 격자처럼 촘촘하게 */
.rgrid, .rv-list { gap: 14px 4px; }
.rc-img { border-radius: 6px; margin-bottom: 6px; }
.rc-title { font-size: 12.5px; }
.rc-stars { color: #ffb020; }
.rv-photos img, .rv-product { border-radius: 16px; }

/* 버튼·칩 */
.btn { height: 52px; border-radius: 16px; font-weight: 700; letter-spacing: -.02em; transition: transform .15s var(--ease), box-shadow .2s, opacity .15s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad); box-shadow: var(--shadow-pop); }
.btn-line { background: #fff; border: 1px solid var(--line-3); }
.btn[disabled], .btn.is-off { background: var(--ink-3); box-shadow: none; }
.btn-sm { height: 34px; border-radius: 999px; }
.pill, .lb-btn { border-radius: 999px; border-color: var(--line); background: var(--bg-2); font-weight: 600; }
.chip { border-radius: 999px; border-color: var(--line); background: var(--bg-2); }
.chip.on { border-color: transparent; background: var(--ink); color: #fff; }
.fab { box-shadow: var(--shadow-pop); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 목록 머리 */
.list-head { background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ctab { position: relative; border-bottom: 0; transition: color .2s; }
.ctab.on { border-bottom: 0; }
.ctab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad); }
.ctabs-sub .ctab { border-radius: 999px; }
.ctabs-sub .ctab.on::after { display: none; }
.chk.on .chk-box { background: var(--accent); border-color: var(--accent); }

/* 상품 상세 */
.pd-info { padding: 20px 16px 22px; border-bottom: 10px solid var(--bg-2); }
.pd-group { color: var(--accent-ink); font-weight: 700; }
.pd-name { font-size: 20px; font-weight: 700; letter-spacing: -.035em; }
.pd-price { font-size: 22px; }
.pd-price .pr { letter-spacing: -.04em; }
.pd-dday { border-radius: 999px; background: #ff4f7b; box-shadow: 0 6px 16px rgba(255, 79, 123, .35); }
.pill-c { background: #eafaff; }
.pill-o { background: #fff4ea; }
.no-cancel, .pd-limit { border-radius: 14px; }
.pd-tabs { background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pd-tabs button { position: relative; border-bottom: 0; }
.pd-tabs button.on { border-bottom: 0; }
.pd-tabs button.on::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--grad); }
.buybar { background: rgba(255, 255, 255, .9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(236, 232, 242, .7); }
.opt-row { border-radius: 16px; }
.stepper { border-radius: 999px; border-color: var(--line); background: var(--bg-2); }

/* 시트·토스트·팝업 */
.sheet { border-radius: 28px 28px 0 0; }
.sheet-title { font-weight: 800; letter-spacing: -.03em; }
.toast { border-radius: 999px; background: rgba(22, 19, 28, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pop-box { border-radius: 24px; }

/* 입력칸: 테두리 없이 옅은 바탕 */
.inp, .opt-input, .opt-select, .pick, .search-form input { border-color: transparent; background: var(--bg-2); border-radius: 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.inp:focus, .opt-input:focus, .search-form input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(164, 124, 255, .14); }
.seg span, .ck-pay span, .qa-cats span { border-radius: 16px; border-color: var(--line); }
.seg input:checked + span, .ck-pay input:checked + span, .qa-cats input:checked + span { border-color: var(--accent); background: var(--grad-soft); }

/* 마이·카드류: 선 대신 옅은 바탕 */
.my-card, .info-card, .fg-card, .cpn { border-color: transparent; background: var(--bg-2); border-radius: 20px; }
.my-tiles a, .order-mini, .ck-addr, .note-box, .wd-stats div { border-radius: 18px; }
.my-tiles a { background: var(--grad-soft); font-weight: 600; }
.cpn-side { border-left-color: var(--line-3); }
.pt-card { border-radius: 24px; box-shadow: var(--shadow-pop); }
.avatar, .grp-avatar, .sgroup img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e9dcff; }
.grp-head h1, .post-title, .auth-title, .att-title, .ev-title { font-weight: 800; letter-spacing: -.035em; }
.qa-bubble { border-radius: 20px; }
.qa-bubble.me { background: var(--grad-soft); }
.cart-img img { border-radius: 14px; }
.att-day.on { box-shadow: 0 4px 12px rgba(164, 124, 255, .35); }

/* 움직임을 줄이는 설정이면 효과를 끈다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 상품 상세: 머리를 사진 위에 띄우고, 버튼은 반투명 원 (A안) */
body.hd-over .col { padding-top: 0; }
body.hd-over .hd { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .25s var(--ease), border-color .25s; }
body.hd-over .hd-back, body.hd-over .hd-right > a, body.hd-over .hd-right > button { width: 40px; height: 40px; margin: 0; padding: 0; justify-content: center; align-items: center; border-radius: 50%; background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 4px 16px rgba(92, 54, 160, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .25s, box-shadow .25s; }
body.hd-over .hd-right { gap: 8px; }
body.hd-over .hd-title { opacity: 0; transition: opacity .2s; margin-left: 8px; }
body.hd-over .hd.solid { background: rgba(255, 255, 255, .86); border-bottom-color: rgba(236, 232, 242, .7); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); }
body.hd-over .hd.solid .hd-back, body.hd-over .hd.solid .hd-right > a, body.hd-over .hd.solid .hd-right > button { background: transparent; border-color: transparent; box-shadow: none; }
body.hd-over .hd.solid .hd-title { opacity: 1; }
body.hd-over .pd-gallery .cr-dots { bottom: 32px; }
body.hd-over .pd-dday { top: auto; bottom: 32px; left: 16px; }
.pd-info { position: relative; margin-top: -20px; border-radius: 24px 24px 0 0; background: #fff; }

/* 마이페이지 포인트 카드 (A안) */
.my-pointcard { background: var(--grad); color: #fff; box-shadow: var(--shadow-pop); padding: 18px 20px; }
.my-pointcard .my-card-title { color: rgba(255, 255, 255, .9); font-weight: 600; }
.my-pointcard .my-point { font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.my-pointcard svg { stroke: #fff; color: #fff; }
.my-prof .avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #d9c4ff; }