/* ==========================================================
   모아사 MOASA 반응형 스타일 (모바일 우선 · 샴페인 골드)
   · PC: 가로 전체(풀사이즈) + 본문 최대 1200px
   · 900px 미만(태블릿·휴대폰): 헤더가 ☰ + 로고 + 장바구니, 아래에 옆으로 넘기는 카테고리
   · 디자인 보강 시 아래 :root 토큰부터 바꾸세요
   ========================================================== */
:root {
  /* 모아사 브랜드 색 — 샴페인 골드 · 크림 · 소프트 테라코타 (밝고 고급스럽게, 짙은 색 최소화) */
  --brand: #b8975a;          /* 메인 컬러 (버튼·링크) — 트러스트 블루 */
  --brand-dark: #5b4a2e;     /* 진한 색 (로고·푸터·제목) — 딥 네이비 */
  --brand-soft: #f8f2e4;     /* 연한 세이지 (칸 배경) */
  --brand-ink: #ffffff;      /* 메인 컬러 위 글자 */
  --sage: #d4b77a;           /* 밝은 블루 (진행바·배지) */
  --gold: #c9785a;           /* 강조 (마감임박·할인율) — 에너지 코랄 */
  --accent: #c9785a;
  --sky: #d4b77a;            /* 진행바 */
  --lav: #efe5cc;            /* 형광펜 강조 */
  --bg: #ffffff;
  --bg-soft: #faf8f2;
  --cream: #fdfbf7;
  --ivory: #f8f4ea;
  --line: #ece6d8;
  --text: #3b352c;
  --muted: #8a8274;
  --ok: #0ca678;
  --warn: #b7791f;
  --danger: #c0392b;
  --radius: 16px;
  --radius-sm: 10px;
  --header-bg: #ffffff;
  --strip-bg: #5b4a2e;       /* 맨 위 고정 홍보띠 배경 */
  --strip-ink: #f8f4ea;
  --wrap: 1200px;
  --hd-h: 72px;
  --tab-h: 60px;
  --font: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --en: "Manrope", "Pretendard", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 150px; }
html.no-scroll { overflow: hidden; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); word-break: keep-all; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
small { font-size: 12px; }
.muted { color: var(--muted); font-size: 13px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.pc-only { display: none; }
@media (min-width: 900px) { .pc-only { display: inline; } }

/* ── 맨 위 고정 영역 (홍보줄 + 헤더) ── */
.site-top { position: sticky; top: 0; z-index: 40; background: var(--header-bg); transition: box-shadow .2s; }
.site-top.scrolled { box-shadow: 0 6px 20px rgba(0, 0, 0, .10); }

/* 상단 홍보줄 (관리자 > 상단홍보줄) */
.event-strip { width: 100%; background: var(--strip-bg); color: var(--strip-ink); font-size: 13.5px; line-height: 1.3; letter-spacing: -.01em; }
.event-strip > a, .event-strip > span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  max-width: var(--wrap); margin: 0 auto; padding: 9px 16px; color: inherit; white-space: nowrap;
}
.event-strip .strip-hot { flex: none; width: 44px; height: 18px; display: block; }
.event-strip .strip-txt { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.event-strip a .strip-txt::after { content: " ›"; opacity: .7; }
.event-strip a:hover .strip-txt { text-decoration: underline; text-underline-offset: 3px; }

/* 헤더 */
.hd { background: var(--header-bg); border-bottom: 1px solid #ece6d8; }
.hd-in { display: flex; align-items: center; gap: 24px; height: var(--hd-h); }
.hd-in .hd-menu { display: none; }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo img { width: auto; }
.logo .logo-ico { height: 46px; width: 46px; border-radius: 50%; border: 2px solid var(--brand); background: #fff; }
.logo .logo-word { height: 30px; }
.drawer-logo { height: 24px; width: auto; }
.ft-logo { height: 26px; width: auto; margin-bottom: 4px; }
.logo-mark { font-size: 30px; font-weight: 900; letter-spacing: -.04em; color: var(--brand-dark); line-height: 1; }
.logo-mark b { color: var(--gold); font-weight: 900; }
.logo-sub { font-size: 12.5px; font-weight: 600; color: var(--brand); letter-spacing: -.02em; white-space: nowrap; }
.gnb { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; justify-content: safe center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.gnb::-webkit-scrollbar { display: none; }
.gnb a { position: relative; padding: 10px 11px; font-size: 15.5px; font-weight: 600; white-space: nowrap; color: #3b352c; border-radius: 8px; transition: color .15s; }
.gnb a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--brand); transform: scaleX(0); transition: transform .2s; }
.gnb a:hover { color: var(--brand); }
.gnb a:hover::after, .gnb a.on::after { transform: scaleX(1); }
.gnb a.on { color: var(--brand); font-weight: 800; }
.hd-right { display: flex; align-items: center; gap: 4px; flex: none; }
.hd-link { position: relative; display: grid; justify-items: center; gap: 1px; padding: 4px 8px; font-size: 11.5px; color: #6b6457; }
.hd-link:hover { color: var(--brand); }
.icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; color: var(--text); }
.icon-btn svg, .hd-link svg, .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.badge {
  position: absolute; top: 0; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; font-style: normal;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.mnav { display: none; }

/* 검색창 (PC: 헤더 안 / 휴대폰: 돋보기 → 헤더 아래 한 줄) */
.hd-search { position: relative; flex: none; width: 260px; }
.hd-search input {
  width: 100%; height: 42px; padding: 0 44px 0 16px; border: 1.5px solid var(--line); border-radius: 99px;
  background: var(--bg-soft); font-size: 14px; outline: none; transition: border-color .15s, background .15s;
}
.hd-search input:focus { border-color: var(--brand); background: var(--bg); }
.hd-search input::-webkit-search-cancel-button { cursor: pointer; }
.hd-search button { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hd-search svg, .hd-search-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hd-search-btn { display: none; border: 0; background: none; cursor: pointer; }
.hd-search-btn svg { width: 24px; height: 24px; stroke-width: 1.7; }
.m-search { display: none; }

/* PC 폭이 좁아지면 메뉴 글자 줄이기 */
@media (max-width: 1320px) and (min-width: 900px) {
  .hd-in { gap: 14px; }
  .logo-sub { display: none; }
  .logo-mark { font-size: 26px; }
  .gnb a { padding: 10px 7px; font-size: 14.5px; }
  .hd-link span { display: none; }
  .hd-link { padding: 8px 6px; }
  .gnb a::after { left: 8px; right: 8px; }
}

/* ── 900px 미만: 헤더가 휴대폰형으로 바뀜 ── */
@media (max-width: 899px) {
  :root { --hd-h: 56px; }
  .hd-in { gap: 4px; padding: 0 8px; }
  .hd-in .hd-menu { display: grid; }
  .logo { position: absolute; left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 2px; }
  .hd-in { position: relative; }
  .logo-mark { font-size: 24px; }
  .logo-sub { font-size: 10px; }
  .logo { flex-direction: row; gap: 6px; }
  .logo .logo-ico { height: 34px; width: 34px; }
  .logo .logo-word { height: 21px; }
  .gnb { display: none; }
  .hd-right { margin-left: auto; }
  .hd-link span { display: none; }
  .hd-link { padding: 8px; }
  .hd-link:not(.hd-cart):not(.hd-search-btn) { display: none; }
  .hd-search { display: none; }
  .hd-search-btn { display: grid; }
  .m-search { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
  .m-search[hidden] { display: none !important; }
  .m-search input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1.5px solid var(--brand); border-radius: 99px; font-size: 16px; outline: none; }
  .m-search .btn { height: 40px; border-radius: 99px; padding: 0 16px; }
  .mnav { display: block; border-top: 1px solid var(--line); }
  .mnav-in { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mnav-in::-webkit-scrollbar { display: none; }
  .mnav a { flex: none; padding: 6px 13px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: #6b6457; background: var(--bg-soft); }
  .mnav a.on { background: var(--brand); color: var(--brand-ink); }
  .event-strip { font-size: 12.5px; }
  .event-strip a, .event-strip span { padding: 7px 12px; justify-content: flex-start; }
}
@media (max-width: 360px) { .logo-sub { display: none; } }

/* ── 휴대폰 전체메뉴 (☰) ── */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer-dim { position: absolute; inset: 0; background: rgba(8, 30, 22, .45); opacity: 0; transition: opacity .2s; }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(84vw, 320px); background: var(--bg); overflow-y: auto;
  transform: translateX(-100%); transition: transform .22s ease; padding-bottom: 24px;
}
.drawer.open .drawer-dim { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px 12px 20px; border-bottom: 1px solid var(--line); }
.drawer-label { padding: 18px 20px 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.drawer-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 16px; }
.drawer-cats a { padding: 12px 12px; border-radius: 10px; background: var(--bg-soft); font-weight: 600; font-size: 14.5px; }
.drawer-links { display: grid; padding: 0 20px; }
.drawer-links a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }

/* ── 본문 ── */
.page { min-height: 50vh; }
.page > :not(.full) { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.page-narrow > :not(.full) { max-width: 760px; }
.page-head { padding: 32px 20px 18px; }
.page-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.page-head + .form-block, .page-head + form > .form-block:first-child, .page-head + .chips { border-top: 0; }
@media (max-width: 899px) {
  .page { padding-bottom: calc(var(--tab-h) + 96px + env(safe-area-inset-bottom)); }
  .page-head { padding: 18px 16px 6px; }
  .page-head h1 { font-size: 20px; }
}

/* ── 휴대폰 하단 메뉴 (PC 숨김) ── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg); border-top: 1px solid var(--line);
}
.tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--muted); border: 0; background: none; padding: 0; cursor: pointer; }
.tabbar .on { color: var(--brand); font-weight: 700; }
@media (min-width: 900px) { .tabbar { display: none; } }

/* ── 홈: 상단 소개 (가로 전체) — 오빠믿어봐 큰 로고 ── */
.hero {
  position: relative; overflow: hidden; color: var(--text);
  background:
    radial-gradient(70% 90% at 10% 0%, #fbf7ee 0%, transparent 60%),
    radial-gradient(60% 80% at 92% 30%, #f8f2e4 0%, transparent 65%),
    #fdfcf9;
  border-bottom: 1px solid var(--line);
}
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(260px, 420px); align-items: center; gap: 40px; padding-top: 48px; padding-bottom: 48px; }
.hero-logo { width: 100%; height: auto; justify-self: center; }
.hero-kicker { font-size: 12px; letter-spacing: .22em; font-weight: 800; color: var(--accent); margin-bottom: 14px; }
.hero-title { font-size: clamp(30px, 4vw, 48px); line-height: 1.25; font-weight: 900; letter-spacing: -.03em; }
.hero-title em { font-style: normal; background: linear-gradient(transparent 62%, var(--lav) 62%); }
.hero-sub { margin-top: 16px; font-size: 16px; color: #6b6457; line-height: 1.7; }
.hero-cta { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.hero-cta .btn { height: 52px; padding: 0 22px; border-radius: 99px; font-size: 16px; }
.hero-cta .btn small { color: var(--lav); font-weight: 800; margin-left: 4px; }
.hero-badges { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 10px; }
.hero-badges li { display: grid; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.hero-badges b { font-size: 15px; }
.hero-badges span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 899px) {
  .hero-in { grid-template-columns: 1fr; gap: 6px; padding: 18px 18px 24px; }
  .hero-logo { order: -1; width: min(70%, 300px); }
  .hero-text { text-align: center; }
  .hero-title { font-size: 26px; }
  .hero-sub { font-size: 14px; margin-top: 10px; }
  .hero-cta { margin-top: 16px; justify-content: center; }
  .hero-cta .btn { height: 46px; font-size: 14.5px; flex: 1 1 auto; }
  .hero-badges { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
  .hero-badges li { padding: 9px 6px; text-align: center; }
  .hero-badges b { font-size: 13px; }
  .hero-badges span { font-size: 11px; }
}

/* 홈: 카테고리 칸 */
.cat-entry { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 16px; padding: 36px 20px 8px; }
@media (min-width: 900px) {
  .cat-entry .cat { flex-direction: row; justify-content: center; gap: 14px; padding: 22px 16px; }
  .cat-entry .cat strong { font-size: 17px; }
}
.cat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 6px 16px; border-radius: var(--radius); text-align: center; background: var(--brand-soft); transition: transform .2s, box-shadow .2s; }
.cat:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .10); }
.cat strong { font-size: 14.5px; }
.cat-ico { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--brand); }
.cat-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cat:nth-child(even) { background: #f4f6fb; }
.cat:nth-child(even) .cat-ico { color: var(--accent); }
@media (max-width: 899px) {
  .cat-entry { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px 14px 6px; }
  .cat { padding: 12px 2px 10px; gap: 6px; }
  .cat strong { font-size: 12.5px; }
  .cat-ico { width: 40px; height: 40px; }
  .cat-ico svg { width: 21px; height: 21px; }
}

.block { padding: 44px 20px 8px; }
.block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.block-head h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.block-head .hot-ico { width: 56px; height: 21px; }
.block-head a { font-size: 14px; color: var(--muted); }
.block-head a:hover { color: var(--brand); }
@media (max-width: 899px) {
  .block { padding: 22px 16px 8px; border-top: 8px solid var(--bg-soft); margin-top: 14px; }
  .block-head h3 { font-size: 18px; }
  .block-head { margin-bottom: 14px; }
}
.lead { margin-bottom: 12px; color: var(--muted); }

/* ── 상품 그리드 ── */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 10px; }
.page > .grid { padding: 0 16px 20px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.tag { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 4px; background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.tag-event { background: var(--accent); }
.soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.7); font-weight: 800; color: var(--muted); }
.card-name { margin-top: 8px; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-price { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.card-price em, .pd-price em { color: var(--accent); font-style: normal; font-weight: 800; }
.card-price del, .pd-price del { color: var(--muted); font-size: 12px; }
.card-price small { color: var(--muted); }

.ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: rgba(0,0,0,.18); }


.chip { flex: none; padding: 4px 10px; border-radius: 99px; background: var(--bg-soft); font-size: 12px; white-space: nowrap; }


/* PC 4줄 · 태블릿 3줄 · 휴대폰 2줄 */
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 28px 16px; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 36px 20px; } .page > .grid { padding: 0 20px 40px; } }
.thumb img { transition: transform .35s ease; }
.card a:hover .thumb img { transform: scale(1.04); }
.card a:hover .card-name { color: var(--brand); }
.ph { color: rgba(0, 0, 0, .16); }
.ph-c1 { background: #f8f2e4; }
.ph-c2 { background: #f8f4ea; }
.ph-c3 { background: #fbf3ee; }
.card-name { font-size: 14.5px; }
@media (min-width: 900px) { .card-name { font-size: 15.5px; margin-top: 12px; } .card-price b { font-size: 17px; } }

/* 상품 목록: 카테고리는 상단 헤더 메뉴로 이동 */
.page-list > .chips { display: none; }
.list-bar { padding-top: 6px; }
@media (min-width: 900px) { .list-bar { padding: 6px 20px 18px; font-size: 14px; } }

/* ── 상품 상세 (PC: 왼쪽 사진 · 오른쪽 정보+구매 / 휴대폰: 위아래 + 하단 구매바) ── */
.pd-top { display: grid; }
.pd-image { aspect-ratio: 1; background: var(--bg-soft); overflow: hidden; }
.pd-image img, .pd-image .ph { width: 100%; height: 100%; object-fit: cover; font-size: 64px; }
.pd-info { padding: 18px 16px; }
.pd-cat { display: inline-block; font-size: 13px; color: var(--brand); font-weight: 600; margin-bottom: 6px; }
.pd-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.pd-summary { margin-top: 4px; color: var(--muted); font-size: 14px; }
.pd-price { margin-top: 12px; display: flex; align-items: baseline; gap: 6px; font-size: 20px; }
.pd-ship { margin-top: 6px; font-size: 13px; color: var(--muted); }
.pd-detail { padding: 20px 16px; border-top: 8px solid var(--bg-soft); }
.pd-detail h3 { font-size: 16px; margin-bottom: 12px; }
.pd-desc { color: #6b6457; }
.pd-notice { margin-top: 24px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--muted); font-size: 13px; line-height: 1.65; }

/* 구매바: 휴대폰은 화면 아래 고정 */
.buybar {
  position: fixed; left: 0; right: 0; z-index: 25;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--line);
}
.buy-sheet { display: grid; gap: 10px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.qty-row { display: flex; justify-content: space-between; align-items: center; }
.sheet-total { text-align: right; }

@media (min-width: 900px) {
  .pd-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; padding: 40px 20px 20px; align-items: start; }
  .pd-image { border-radius: var(--radius); border: 1px solid var(--line); }
  .pd-side { position: sticky; top: calc(var(--hd-h) + 60px); }
  .pd-info { padding: 8px 0 22px; border-bottom: 1px solid var(--line); }
  .pd-name { font-size: 28px; line-height: 1.3; }
  .pd-summary { font-size: 16px; margin-top: 8px; }
  .pd-price { font-size: 30px; margin-top: 22px; }
  .pd-price del { font-size: 16px; }
  .pd-ship { font-size: 14px; }
  .pd-detail { border-top: 1px solid var(--line); padding: 40px 20px 60px; margin-top: 30px; }
  .pd-detail h3 { font-size: 20px; }
  /* PC 는 구매 영역이 정보 바로 아래 (옵션·수량 처음부터 보임) */
  .buybar { position: static; padding: 22px 0 0; border: 0; background: none; z-index: auto; }
  .buy-sheet[hidden] { display: grid !important; }
  .buybar .btn { height: 56px; font-size: 16px; }
  .sheet-total b { font-size: 22px; color: var(--brand); }
}

/* 장바구니·주문서 하단 버튼: PC 는 본문 안 */
@media (min-width: 900px) {
  .page-narrow .buybar { padding: 20px 20px 40px; }
  .page-narrow .buybar .btn { height: 56px; font-size: 16px; }
}
/* ── 목록 상단 ── */
.seg { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.seg a { text-align: center; padding: 14px 0; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
.seg a.on { color: var(--text); border-color: var(--text); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; }
.chips a.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.list-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 12px; font-size: 13px; color: var(--muted); }
.list-bar select { border: 0; background: none; font-size: 13px; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); display: grid; gap: 16px; justify-items: center; }


/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 50px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--brand);
  background: var(--bg); color: var(--text); font-weight: 700; cursor: pointer;
}
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-line { background: var(--bg); }
.btn-block { width: 100%; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.btn:disabled { background: var(--line); border-color: var(--line); color: var(--muted); }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-stack { display: grid; gap: 8px; padding: 16px; }

.stepper { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.stepper button { width: 36px; height: 36px; border: 0; background: var(--bg-soft); font-size: 18px; cursor: pointer; }
.stepper input { width: 44px; border: 0; text-align: center; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── 장바구니 ── */
.line-items { list-style: none; margin: 0; padding: 0 16px; }
.line { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.line-thumb { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; }
.line-thumb img, .line-thumb .ph { width: 100%; height: 100%; object-fit: cover; font-size: 22px; }
.line-name { font-size: 14px; }
.line-opt { font-size: 12px; color: var(--muted); }
.line-foot { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.line-del { border: 0; background: none; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }

.summary { margin: 0; padding: 16px; display: grid; gap: 8px; border-top: 8px solid var(--bg-soft); }
.summary > div { display: flex; justify-content: space-between; gap: 12px; }
.summary dt { color: var(--muted); flex: none; }
.summary dd { margin: 0; text-align: right; }
.summary .total { padding-top: 10px; border-top: 1px solid var(--line); font-size: 17px; font-weight: 800; }
.summary .total dt { color: var(--text); }
.hint { font-size: 12px; color: var(--accent); text-align: right; }

/* ── 폼 ── */
.form-block { padding: 20px 16px; border-top: 8px solid var(--bg-soft); display: grid; gap: 12px; }
.page > .form-block:first-child, .page > form:first-child > .form-block:first-child { border-top: 0; }
@media (min-width: 900px) { .form-block { border-top-width: 1px; border-top-color: var(--line); padding: 26px 20px; } .summary { border-top-width: 1px; border-top-color: var(--line); padding: 20px; } .line-items { padding: 0 20px; } }
.form-block h3 { font-size: 16px; }
.form-block h3 small { color: var(--muted); font-weight: 400; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--bg); font-size: 16px; /* iOS 확대 방지 */
}
.field input[readonly] { background: var(--bg-soft); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.addr-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.addr-row .btn { height: 48px; }
.err { color: var(--danger); font-size: 13px; margin-top: -6px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.check a { text-decoration: underline; }
.notice { padding: 0 16px 16px; font-size: 13px; color: var(--muted); }

.paymethods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm input, .time input { position: absolute; opacity: 0; pointer-events: none; }
.pm span, .time span {
  display: grid; place-items: center; min-height: 48px; padding: 6px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 14px; text-align: center; cursor: pointer;
}
.pm input:checked + span, .time input:checked + span { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.pm input:focus-visible + span, .time input:focus-visible + span { outline: 2px solid var(--accent); }

.mini-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mini-items li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.mini-items li > span:first-child { display: grid; }
.mini-items small { color: var(--muted); }
.mini-items li > span:last-child { flex: none; color: var(--muted); }

/* ── 결과/주문 ── */
.result { padding: 36px 20px 24px; text-align: center; display: grid; gap: 10px; }
.result h2 { font-size: 21px; }
.result p { color: var(--muted); }
.order-no b { color: var(--text); }
.status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; background: var(--bg-soft); }
.s-paid, .s-reserved, .s-delivered, .s-visited { color: var(--ok); }
.s-bank_wait, .s-pending, .s-preparing, .s-shipped { color: var(--warn); }
.s-cancelled, .s-failed { color: var(--danger); }
.order-list { list-style: none; margin: 0; padding: 0; }
.order-list a { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.order-list a > div { display: grid; }
.order-list .right { text-align: right; justify-items: end; }
.order-list small { color: var(--muted); }


/* ── 문서/푸터 ── */
.doc { padding: 20px 16px; display: grid; gap: 10px; }
.doc h3 { font-size: 15px; margin-top: 10px; }
.site-footer { margin-top: 60px; padding: 44px 0 40px; font-size: 13px; color: rgba(255, 255, 255, .62); background: var(--brand-dark); }
.ft-in { display: grid; gap: 18px; }
.ft-brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ft-brand .logo-mark { color: #fff; font-size: 26px; }
.ft-brand p { color: rgba(255, 255, 255, .75); font-size: 13.5px; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; color: rgba(255, 255, 255, .85); }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.ft-cols { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; line-height: 1.8; }
.ft-cs { display: grid; gap: 2px; text-align: right; }
.ft-cs a { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.ft-note { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12px; }
.ft-copy { opacity: .7; font-size: 12px; }
@media (max-width: 899px) {
  .site-footer { margin-top: 24px; padding: 28px 0 calc(var(--tab-h) + 110px); font-size: 12px; }
  .ft-in { padding: 0 18px; }
  .ft-cs { text-align: left; }
  .ft-cs a { font-size: 20px; }
}

.toast {
  position: fixed; left: 50%; top: 130px; transform: translateX(-50%); z-index: 50;
  max-width: calc(100% - 32px); width: max-content; padding: 10px 18px; border-radius: 99px;
  background: rgba(22, 22, 22, .92); color: #fff; font-size: 14px; animation: toast 2.6s forwards;
}
@keyframes toast { 0%,85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* ── 결제 이동 화면 ── */
.paying { display: grid; place-items: center; min-height: 100vh; background: var(--bg); }
.paying-box { display: grid; gap: 14px; justify-items: center; text-align: center; padding: 24px; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ── 무통장입금 안내 ── */
.bank-box { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-sm); background: var(--bg-soft); }
.bank-box .field input { background: var(--bg); }

/* ── 결제창(새창) 진행 오버레이 ── */
.pay-overlay {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; max-width: none;
  background: rgba(20, 16, 14, .55);
}
.pay-overlay[hidden] { display: none; }
.pay-overlay-box {
  width: 100%; max-width: 360px; padding: 28px 22px 20px; border-radius: var(--radius);
  background: var(--bg); text-align: center; display: grid; gap: 10px; justify-items: center;
}
.pay-overlay-box h3 { font-size: 17px; }
.pay-overlay-box .btn { margin-top: 2px; }

/* 결제 새창 안에서는 사이트 메뉴 숨김 */
.popup-only { display: none !important; }
.in-popup .popup-only { display: inline-flex !important; }
.in-popup .no-popup, .in-popup .tabbar, .in-popup .site-footer, .in-popup .topbar .icon-btn { display: none !important; }
.in-popup .page { padding-bottom: 24px; min-height: 100vh; }

/* ── 무통장입금 안내 (내김치와 같은 구성) ── */
:root { --notice: #fff8e5; --notice-line: #f0dfae; }
.bank { background: var(--notice); border: 1px solid var(--notice-line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; }
.bank h3 { font-size: 16px; }
.bank dl { display: grid; grid-template-columns: 72px 1fr; gap: 6px 10px; margin: 0; font-size: 16px; }
.bank dt { color: var(--muted); }
.bank dd { margin: 0; font-weight: 700; }
.bank dd.point { color: var(--accent); }
.bank .acct { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer; }
.bank ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.bank .sos { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--notice-line); font-size: 15px; }
.bank .sos b { color: var(--accent); font-size: 17px; letter-spacing: .02em; }
.bank-wrap { padding: 0 16px 16px; }
.card-note { padding: 14px; border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 14px; line-height: 1.6; }


/* ── PC 좌·우 여백 배너 (관리자 > 배너) ──
   가로 1680px 이상(본문 1200px 양옆)에서만 보임. 휴대폰·태블릿에서는 app.js 가 아예 붙이지 않음 */
.side-rail { display: none; }
@media (min-width: 1680px) {
  :root { --rail-w: clamp(200px, calc((100vw - var(--wrap)) / 2 - 56px), 300px); --rail-gap: 24px; }
  .side-rail {
    display: grid; gap: 12px; align-content: start;
    position: fixed; top: calc(50% + 60px); transform: translateY(-50%); /* 고정 헤더 아래 세로 가운데 */
    z-index: 15; width: var(--rail-w); max-width: none; margin: 0;
    max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: none;
  }
  .side-rail::-webkit-scrollbar { display: none; }
  .side-left { right: calc(50% + var(--wrap) / 2 + var(--rail-gap)); }
  .side-right { left: calc(50% + var(--wrap) / 2 + var(--rail-gap)); }
  .rail-item { border-radius: var(--radius); overflow: hidden; background: var(--bg); box-shadow: 0 4px 18px rgba(0, 0, 0, .10); }
  .rail-item img, .rail-item video { display: block; width: 100%; height: auto; }
  .rail-item a { display: block; }
  .rail-yt { position: relative; aspect-ratio: 16 / 9; background: #000; }
  .rail-yt.is-short { aspect-ratio: 9 / 16; }
  .rail-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .rail-more { padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--brand); text-align: center; }
  /* 슬라이드: 한 장씩 */
  .side-rail[data-mode="slide"] { display: block; }
  .side-rail[data-mode="slide"] .rail-item { display: none; animation: railFade .5s ease; }
  .side-rail[data-mode="slide"] .rail-item.on { display: block; }
  .rail-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 2px; }
  .rail-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); cursor: pointer; }
  .rail-dots button.on { background: var(--brand); width: 20px; border-radius: 4px; }
  .in-popup .side-rail { display: none !important; }
}
@keyframes railFade { from { opacity: 0; } to { opacity: 1; } }


/* ── 휴대폰 홈 화면 배너 (관리자 > 배너 > '휴대폰에도 표시') — PC 에서는 숨김 ── */
.m-banner { padding: 24px 20px 0; }
@media (max-width: 899px) { .m-banner { padding: 14px 16px 4px; } }
.m-track {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; transition: height .3s ease;
  scrollbar-width: none; border-radius: var(--radius); -webkit-overflow-scrolling: touch;
}
.m-track::-webkit-scrollbar { display: none; }
.m-track > .rail-item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.m-banner .rail-item a { display: block; }
.m-banner .rail-item img, .m-banner .rail-item video { display: block; width: 100%; height: auto; }
.m-banner .rail-yt { position: relative; aspect-ratio: 16 / 9; background: #000; }
.m-banner .rail-yt.is-short { aspect-ratio: 9 / 16; width: min(100%, 300px); margin: 0 auto; }
.m-banner .rail-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m-banner .rail-more { display: block; padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--brand); text-align: center; background: var(--bg-soft); }
.m-dots { display: flex; justify-content: center; gap: 6px; padding-top: 8px; }
.m-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: var(--line); cursor: pointer; transition: width .2s; }
.m-dots button.on { width: 16px; background: var(--brand); }
@media (min-width: 1680px) { .m-banner { display: none; } }
@media (prefers-reduced-motion: reduce) { .m-dots button { transition: none; } }


/* ── 첫 화면 팝업 (관리자 > 팝업) — 넷플랜과 같은 방식 ── */
.gp-pop { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.gp-pop[hidden] { display: none; }
.gp-pop-dim { position: absolute; inset: 0; background: rgba(8, 30, 22, .45); pointer-events: auto; }
.gp-pop-track { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 16px; max-width: calc(100% - 40px); pointer-events: auto; }
.gp-pop-item { width: var(--w, 400px); max-width: 100%; flex: none; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(8, 30, 22, .35); animation: popIn .3s ease; }
@keyframes popIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gp-pop-img img { display: block; width: 100%; height: auto; }
.gp-pop-img a { display: block; }
.gp-pop-foot { display: flex; background: var(--brand-dark); }
.gp-pop-foot button { flex: 1; border: 0; background: none; color: #fff; font-size: 14px; font-weight: 600; padding: 13px 8px; cursor: pointer; }
.gp-pop-foot button + button { border-left: 1px solid rgba(255, 255, 255, .18); }
.gp-pop-foot button:hover { background: rgba(255, 255, 255, .08); }
.gp-pop-dots { display: none; }
@media (min-width: 769px) { .gp-pop-dim { display: none; } }
@media (max-width: 768px) {
  .gp-pop-track { top: 50%; left: 0; right: 0; transform: translateY(-50%); max-width: none; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 6vw; }
  .gp-pop-track::-webkit-scrollbar { display: none; }
  .gp-pop-item { width: 88vw; margin-right: 4vw; scroll-snap-align: center; }
  .gp-pop-item:last-child { margin-right: 6vw; }
  .gp-pop-item.pc-only { display: none; }
  .gp-pop-img img { max-height: 68vh; object-fit: contain; background: #fff; }
  .gp-pop-dots { display: flex; justify-content: center; gap: 7px; position: absolute; left: 0; right: 0; bottom: calc(50% - 40vh - 24px); pointer-events: none; }
  .gp-pop-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
  .gp-pop-dots i.on { background: #fff; width: 18px; border-radius: 4px; }
}

/* ── 맨 위로 가기 버튼 (즐겨찾기 버튼과 같은 모양, 그 위에 위치) ── */
.to-top {
  position: fixed; z-index: 40; right: 16px; bottom: 156px; width: 56px; height: 56px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; background: #fff; color: var(--brand-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: 700 10px/1 var(--font); letter-spacing: .02em;
  opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:active { transform: scale(.92); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { color: var(--brand); }
.in-popup .to-top { display: none; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ── 히어로 '내돈내산 후기 보러가기' 버튼 ── */
.hero-cta .btn-review { height: 56px; padding: 0 26px; font-size: 17px; border-radius: 99px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); transition: transform .15s, box-shadow .15s; }
.hero-cta .btn-review:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
.hero-cta .btn-review svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hero-cta .btn-review small { font-size: 13px; font-weight: 600; opacity: .75; }
@media (max-width: 899px) { .hero-cta .btn-review { height: 50px; font-size: 15px; padding: 0 20px; width: 100%; } }
.gnb .gnb-review { color: var(--accent); }
.gnb .gnb-review::after { background: var(--accent); }

/* ── 내돈내산 후기 ── */
.stars { color: #f5a623; letter-spacing: 1px; font-size: 14px; white-space: nowrap; }
.stars i { font-style: normal; color: #e9e2d2; }
.rv-badge { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--brand-soft); color: var(--brand); font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.rv-badge.best { background: #fdecea; color: var(--accent); }

.rv-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; margin: 4px 20px 0; padding: 26px 28px; border-radius: var(--radius); background: var(--bg-soft); }
.rv-score { display: flex; align-items: center; gap: 12px; }
.rv-score > b { font-size: 46px; font-weight: 800; line-height: 1; color: var(--brand-dark); }
.rv-score div { display: grid; gap: 4px; }
.rv-score .stars { font-size: 20px; }
.rv-score small { color: var(--muted); font-size: 13px; }
.rv-lead { color: #6b6457; font-size: 14.5px; line-height: 1.7; }
.rv-write-btn { border-radius: 99px; padding: 0 24px; }
.rv-write-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.rv-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 22px 20px 16px; }
.rv-tabs a { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: #6b6457; }
.rv-tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.rv-tabs .rv-clear { border-style: dashed; color: var(--muted); font-weight: 500; }

.rv-list { list-style: none; margin: 0; padding: 0 20px 20px; columns: 3 300px; column-gap: 18px; }
.rv-card { break-inside: avoid; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.rv-photo { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--bg-soft); cursor: zoom-in; }
.rv-photo img { width: 100%; max-height: 420px; object-fit: cover; }
.rv-count { position: absolute; right: 10px; bottom: 10px; padding: 2px 9px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; }
.rv-body { padding: 14px 16px 12px; display: grid; gap: 7px; }
.rv-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-prod { font-size: 13px; color: var(--brand); font-weight: 600; }
.rv-text { font-size: 14.5px; line-height: 1.65; color: #2c3833; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; word-break: break-word; }
.rv-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); padding-top: 4px; }
.rv-del { border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 4px; }
.rv-del:hover { color: var(--danger); text-decoration: underline; }
.pager { display: flex; justify-content: center; gap: 6px; padding: 10px 20px 40px; }
.pager a { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); font-weight: 600; }
.pager a.on { background: var(--brand); border-color: var(--brand); color: #fff; }

@media (max-width: 899px) {
  .rv-top { grid-template-columns: 1fr; gap: 12px; margin: 4px 16px 0; padding: 18px; }
  .rv-score > b { font-size: 38px; }
  .rv-lead { font-size: 13.5px; }
  .rv-write-btn { width: 100%; }
  .rv-tabs { padding: 16px 16px 12px; }
  .rv-tabs a { padding: 7px 13px; font-size: 13px; }
  .rv-list { padding: 0 16px 16px; }
  .rv-list { columns: 2 160px; column-gap: 10px; }
  .rv-card { margin-bottom: 10px; }
  .rv-body { padding: 10px 11px 8px; gap: 5px; }
  .rv-text { font-size: 13.5px; -webkit-line-clamp: 4; }
  .rv-photo img { max-height: 260px; }
  .stars { font-size: 12.5px; }
}

/* 후기 크게 보기 · 삭제 창 */
.rv-modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px; }
.rv-modal[hidden] { display: none; }
.rv-modal-dim { position: absolute; inset: 0; background: rgba(8, 20, 15, .7); }
.rv-modal-box { position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--bg); border-radius: 16px; }
.rv-modal-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); font-size: 18px; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.rv-gallery { position: relative; background: #111; }
.rv-gallery img { width: 100%; max-height: 64vh; object-fit: contain; margin: 0 auto; }
.rv-gallery button { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); font-size: 26px; line-height: 1; cursor: pointer; }
.rv-prev { left: 10px; } .rv-next { right: 10px; }
.rv-gallery.single button, .rv-gallery.single .rv-idx { display: none; }
.rv-idx { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 10px; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
.rv-modal-body { padding: 18px 22px 24px; display: grid; gap: 8px; }
.rv-full { white-space: pre-line; line-height: 1.75; font-size: 15px; word-break: break-word; }
.rv-del-box { max-width: 360px; padding: 22px; display: grid; gap: 12px; }
.rv-del-box h3 { font-size: 18px; }

/* 후기 쓰기 */
.rv-form { padding-bottom: 20px; }
.rv-form .form-block h3 { margin-top: 4px; }
.form-err { margin: 12px 16px 0; padding: 10px 14px; border-radius: 8px; background: #fdecea; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.star-pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 2px; }
.star-pick input { position: absolute; opacity: 0; pointer-events: none; }
.star-pick label { font-size: 38px; line-height: 1; color: #e9e2d2; cursor: pointer; transition: color .1s, transform .1s; }
.star-pick label:hover, .star-pick label:hover ~ label, .star-pick input:checked ~ label { color: #f5a623; }
.star-pick input:focus-visible + label { outline: 2px solid var(--brand); border-radius: 4px; }
.star-pick .star-txt { order: -1; margin-left: 12px; font-size: 14px; font-weight: 600; color: var(--muted); }
.field textarea { resize: vertical; line-height: 1.6; min-height: 150px; }
.count { justify-self: end; color: var(--muted); }
.photo-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-add { position: relative; width: 88px; height: 88px; border: 1.5px dashed #d8cdb5; border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 2px; color: var(--muted); cursor: pointer; font-size: 12px; background: var(--bg-soft); }
.photo-add:hover { border-color: var(--brand); color: var(--brand); }
.photo-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-add svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.photo-thumbs { display: contents; }
.photo-thumb { position: relative; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; cursor: pointer; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .cols2 { grid-template-columns: 1fr; } }

/* 상품 상세: 후기 */
.pd-rv { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.pd-rv:hover { color: var(--brand); }
.pd-reviews .block-head { margin-bottom: 14px; }
.pd-reviews .block-head h3 { font-size: 20px; }
.pd-rv-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.pd-rv-list li { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.pd-rv-list img { width: 84px; height: 84px; flex: none; object-fit: cover; border-radius: 8px; }
.pd-rv-list div { display: grid; gap: 4px; min-width: 0; }
.pd-rv-text { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 899px) { .pd-reviews .block-head h3 { font-size: 16px; } }

/* ══════════════════════════════════════════════════════════
   회원 · 공동구매 (trustme)
   ══════════════════════════════════════════════════════════ */
.center { text-align: center; }
.u { text-decoration: underline; }
.h-link { float: right; font-size: 13px; font-weight: 400; color: var(--muted); text-decoration: underline; }
.chip-on { background: var(--brand); color: var(--brand-ink); font-style: normal; }
.block-head h3 small { font-size: 12px; font-weight: 600; color: var(--accent); margin-left: 4px; }


/* 회원 전용 가격 */
.members-only { display: inline-flex; align-items: center; gap: 4px; color: var(--accent) !important; font-weight: 700; font-size: 13px; }
.members-only svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.members-box { margin-top: 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--cat2); display: grid; gap: 10px; font-size: 14px; }
.card-price .gb-lv, .pd-price .gb-lv { color: var(--muted); font-size: 12px; }

/* 공동구매 */
.tag-inline { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.gb-bar { height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.gb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--accent)); }
.gb-bar-lg { height: 12px; border-radius: 6px; }
.gb-mini { margin-top: 6px; display: grid; gap: 4px; }
.gb-mini p { font-size: 12px; color: var(--muted); }
.gb-mini b { color: var(--accent); }
.gb-mini span { color: var(--text); font-weight: 700; }
.gb-box { padding: 20px 16px; border-top: 8px solid var(--bg-soft); display: grid; gap: 14px; }
.gb-box h3 { font-size: 16px; }
.gb-now { padding: 16px; border-radius: var(--radius); background: linear-gradient(135deg, #fbf7ee, #fbf7ee); display: grid; gap: 10px; }
.gb-now-head { font-size: 15px; }
.gb-now-head small { color: var(--muted); }
.gb-badge { display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; margin-right: 4px; }
.gb-count { font-size: 14px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.gb-count b { font-size: 18px; color: var(--accent); }
.gb-count span { margin-left: auto; font-weight: 800; }
.gb-timer { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.gb-closed { padding: 14px; border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 14px; }
.gb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gb-step { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.gb-step-no { font-weight: 900; font-size: 15px; }
.gb-step-price b { font-size: 17px; }
.gb-step-state { text-align: right; font-size: 13px; display: grid; }
.gb-step-state small { color: var(--muted); }
.gb-step.is-open { border: 2px solid var(--accent); background: #fdfbf6; }
.gb-step.is-open .gb-step-state b { color: var(--accent); }
.gb-step.is-done { opacity: .6; }
.gb-how { padding: 14px; border-radius: var(--radius-sm); background: var(--bg-soft); font-size: 14px; display: grid; gap: 6px; }
.gb-how ol, .gb-guide ol { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.gb-guide { margin: 0 16px 14px; padding: 14px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #fbf7ee, #fbf7ee); font-size: 13px; display: grid; gap: 6px; }
.sheet-note { text-align: right; }
.gb-pay { margin: 0 16px 16px; padding: 16px; border-radius: var(--radius); border: 2px solid var(--accent); background: #fdfbf6; display: grid; gap: 10px; font-size: 14px; }
.gb-pay h3 { font-size: 16px; }
.calc { margin: 4px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-soft); display: grid; gap: 6px; font-size: 14px; }
.calc > div { display: flex; justify-content: space-between; }
.calc dd { margin: 0; font-weight: 700; }
.calc .total { padding-top: 6px; border-top: 1px dashed var(--line); font-size: 16px; }
.calc .total dd { color: var(--accent); }

/* 로그인 · 가입 */
.auth { padding: 20px 20px 8px; display: grid; gap: 14px; }
.auth-logo { width: 150px; height: auto; margin: 0 auto; }
.auth-lead { text-align: center; color: var(--muted); font-size: 14px; }
.auth-form { display: grid; gap: 12px; }
.auth-links { display: flex; justify-content: center; gap: 18px; font-size: 13px; color: var(--muted); }
.auth-links a + a::before { content: ""; display: inline-block; width: 1px; height: 10px; background: var(--line); margin-right: 18px; }
.auth-join { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; text-align: center; font-size: 14px; color: var(--muted); }
.big-id { font-size: 26px; font-weight: 900; color: var(--text) !important; letter-spacing: .04em; }
.check-all { padding: 12px; border-radius: var(--radius-sm); background: var(--bg-soft); }
.agree-list { display: grid; gap: 10px; padding: 0 4px; }
.hint-line { font-size: 13px; min-height: 0; }
.hint-line:empty { display: none; }
.hint-line.good { color: var(--ok); }
.hint-line.bad { color: var(--danger); }
.join .addr-row .btn, .field .addr-row .btn { height: 48px; }

/* 마이페이지 */
.my-card { display: flex; align-items: center; gap: 12px; padding: 20px 16px; }
.my-card img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--brand); }
.my-card > div { flex: 1; }
.my-name { font-size: 18px; }
.my-alert { display: flex; align-items: center; gap: 6px; margin: 0 16px 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-size: 14px; }
.my-alert span { margin-left: auto; font-size: 18px; }
.my-status { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 16px; padding: 14px 0; border-radius: var(--radius); background: var(--bg-soft); text-align: center; }
.my-status a { display: grid; gap: 2px; }
.my-status a + a { border-left: 1px solid var(--line); }
.my-status b { font-size: 20px; }
.my-status small { color: var(--muted); }
.my-menu { display: grid; margin-top: 12px; border-top: 8px solid var(--bg-soft); }
.my-menu a { display: flex; align-items: center; gap: 6px; padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.my-menu a span { margin-left: auto; color: var(--muted); }
.my-menu em { font-style: normal; font-size: 12px; font-weight: 800; color: #fff; background: var(--accent); border-radius: 99px; padding: 0 7px; }
.my-orders { list-style: none; margin: 0; padding: 0 16px 16px; display: grid; gap: 12px; }
.mo { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 8px; }
.mo-head { display: flex; justify-content: space-between; font-size: 14px; }
.mo-head small { color: var(--accent); font-weight: 700; margin-left: 4px; }
.mo-name { font-weight: 700; }
.mo-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.mo-note { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--bg-soft); }
.addr-list { list-style: none; margin: 0; padding: 0 16px; }
.addr-list li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-size: 14px; }
.addr-act { display: flex; gap: 6px; margin-top: 6px; }
.addr-book { display: grid; gap: 8px; }
.addr-pick input { position: absolute; opacity: 0; pointer-events: none; }
.addr-pick span { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; }
.addr-pick span small { color: var(--muted); }
.addr-pick span em { font-style: normal; font-size: 11px; color: var(--accent); font-weight: 800; }
.addr-pick input:checked + span { border: 2px solid var(--brand); padding: 9px 11px; }
.notice-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   회원가 · 포인트 · go100 합치기 추가분
   ══════════════════════════════════════════════════════════ */
.mprice { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.mprice svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mprice b { color: var(--accent); font-weight: 800; }
.mprice.on { color: var(--accent); font-weight: 700; }
.mprice.on span { padding: 1px 6px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 11px; }
.mprice.on b { font-size: 15px; }
.pd-price + .mprice { font-size: 15px; margin-top: 6px; }
.pd-price + .mprice.on b { font-size: 22px; }
.mprice-cta { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); color: #7a6235; font-size: 14px; }
.mprice-cta svg, .member-nudge svg, .members-box-t svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mprice-note { margin-top: 8px; font-size: 14px; color: var(--accent); }
.pd-point { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.pd-point b { color: var(--accent); }
.member-nudge { display: flex; align-items: center; gap: 6px; margin: 12px 16px; padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); color: #7a6235; font-size: 14px; }
.member-nudge b { color: var(--accent); }
.summary .saved dd, .summary .saved dt { color: var(--accent); font-weight: 700; }
.buy-guest { display: grid; gap: 10px; }
.members-box-t { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.points-box .addr-row input { min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 16px; }
.my-points { display: grid; gap: 2px; margin: 0 16px 12px; padding: 16px 18px; border-radius: var(--radius); background: var(--brand); color: #fff; }
.my-points span { font-size: 13px; opacity: .8; }
.my-points b { font-size: 26px; font-weight: 900; color: var(--lav); }
.my-points small { font-size: 12.5px; opacity: .8; }
.my-points.big { margin: 16px; }
.pt-list { list-style: none; margin: 0; padding: 0; }
.pt-list li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pt-list li > div { display: grid; }
.pt-list small { color: var(--muted); }
.pt-list .right { text-align: right; }
.pt-list .plus { color: var(--accent); }
.pt-list .minus { color: var(--text); }
.drawer-me { display: grid; gap: 2px; margin: 12px 16px 4px; padding: 14px; border-radius: 12px; background: var(--brand); color: #fff; }
.drawer-me span { font-size: 13px; color: var(--lav); }
.drawer-auth { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin: 12px 16px 4px; }
.cat-entry .cat-gb { background: #5b4a2e; color: #fff; }
.cat-entry .cat-gb .cat-ico { color: var(--accent); }
.cat-entry .cat small { font-size: 11.5px; opacity: .75; }
.cat-entry .cat:nth-child(2) { background: #f8f4ea; }
.block-gb { background: linear-gradient(180deg, #fdfbf6, transparent 240px); }
.block-head h3 small { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-left: 6px; }
.gnb a.gnb-gb { color: var(--accent); }
.hd-link.hd-join { color: var(--accent); }
.lookup-member { padding: 4px 20px 16px; font-size: 14px; color: var(--muted); }
.pmb.mem { background: #f2e9d4; color: #8d7240; }
.pmb.guest { background: #f5f1e7; color: #6b6457; }
@media (max-width: 899px) {
  .hd-link.hd-my, .hd-link.hd-login { display: grid !important; }
}
.auth, .my-card, .my-status, .my-menu, .my-orders, .addr-list { max-width: 560px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .page-narrow .my-card, .page-narrow .my-points, .page-narrow .my-alert, .page-narrow .my-status { margin-left: auto; margin-right: auto; max-width: 560px; }
}

/* ── v31 레이아웃 보정 ── */
.site-footer .ft-logo { filter: brightness(0) invert(1); opacity: .92; }
@media (max-width: 1560px) and (min-width: 900px) {
  .hd-in { gap: 12px; }
  .hd-search { width: 190px; }
  .gnb a { padding: 10px 7px; font-size: 15px; }
  .gnb a::after { left: 8px; right: 8px; }
  .hd-link { padding: 8px 6px; }
}
@media (max-width: 1180px) and (min-width: 900px) { .hd-search { width: 150px; } .logo .logo-word { height: 24px; } .gnb a { padding: 10px 5px; font-size: 14px; } .hd-lookup { display: none; } }
@media (max-width: 899px) {
  .hd-right .hd-login, .hd-right .hd-my { display: none !important; }
}
@media (max-width: 420px) {
  .logo .logo-ico { height: 30px; width: 30px; }
  .logo .logo-word { height: 18px; }
}
/* 공동구매 제목 옆 엄지척 */
.block-head h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.block-head .thumb-ico { width: 34px; height: 34px; flex: none; transform-origin: 40% 80%; animation: thumbUp 1.6s ease-in-out infinite; }
@keyframes thumbUp { 0%, 60%, 100% { transform: rotate(0) scale(1); } 15% { transform: rotate(-14deg) scale(1.12); } 30% { transform: rotate(8deg) scale(1.05); } 45% { transform: rotate(-4deg); } }
@media (max-width: 899px) { .block-head .thumb-ico { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .block-head .thumb-ico { animation: none; } }
/* 비회원 공동구매 가격 비공개 */
.gb-locked { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: var(--accent); }
.gb-locked svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.gb-locked span { color: #555; font-weight: 600; font-size: .9em; }
.gb-locked b { color: var(--accent); font-weight: 800; }
.gb-locked .gb-lv { color: #888; }
.pd-price.gb-locked { font-size: 20px; }
.gb-lock { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 700; }
.gb-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
/* 가격 아래 '회원가입 추가할인' 표기 */
.mprice:not(.on) { color: #7a6235; font-weight: 700; }
.mprice:not(.on) span { white-space: nowrap; }
.mprice.on span { white-space: nowrap; }
/* 옵션·수량 선택창이 열려 있을 때 즐겨찾기 버튼이 금액을 가리지 않게 */
@media (max-width: 899px) { body:has(.buy-sheet:not([hidden])) .moa-bm { display: none !important; } }
/* 휴대폰 첫 화면: 맨 아래 배너와 푸터 사이 여백 줄이기 (하단 메뉴 공간은 푸터가 이미 확보) */
@media (max-width: 899px) {
  .page-home { padding-bottom: 0; }
  .page-home .m-banners-bottom .m-banner { padding-bottom: 0; }
  .page-home .m-banners-bottom + * , .page-home ~ .site-footer { margin-top: 16px; }
}

/* 상세 이미지 (가로·세로 아무 크기 → 폭에 맞춤) */
.pd-imgs { margin-top: 16px; display: flex; flex-direction: column; align-items: center; }
.pd-imgs img { display: block; width: 100%; max-width: 860px; height: auto; }
.pd-desc + .pd-imgs { margin-top: 20px; }
@media (max-width: 899px) { .pd-imgs { margin-left: -16px; margin-right: -16px; } }
/* 배송/교환/반품 안내 */
.ship-info { font-size: 14px; line-height: 1.7; color: #444; background: var(--bg-soft, #faf8f2); border-radius: 12px; padding: 16px 18px; }
.ship-info h4 { font-size: 15px; font-weight: 800; color: #5b4a2e; margin: 14px 0 4px; }
.ship-info h4:first-child { margin-top: 0; }
.ship-info p { margin: 0; }
/* TOP · 즐겨찾기 버튼: 오빠믿어봐 보라색 */
.to-top, .moa-bm { background: var(--accent, #c9785a) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(184, 151, 90, .38), 0 0 0 1px rgba(255, 255, 255, .25) inset !important; }
.to-top:hover { color: #fff; background: #b5654a !important; }
.moa-bm svg { fill: #fff !important; stroke: #fff !important; }
/* TOP · 즐겨찾기 위치: 풀헤어처럼 TOP 이 오른쪽 맨 아래 모서리, 즐겨찾기는 그 바로 위 (자리는 app.js 가 계산) */
.to-top, html body .moa-bm {
  right: var(--fl-r, 22px) !important; width: var(--fl-size, 52px) !important; height: var(--fl-size, 52px) !important;
}
.to-top { bottom: var(--fl-top-b, 26px) !important; }
html body .moa-bm { bottom: var(--fl-bm-b, 88px) !important; }
.to-top svg { width: 20px; height: 20px; }
html body .moa-bm svg { width: 20px !important; height: 20px !important; }
.to-top > span, html body .moa-bm > span { font-size: 9px; }
/* 투명 배경 배너: 칸 바탕·그림자·모서리 없이 이미지만 (풀헤어와 같음) */
.rail-item.is-clear { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.m-banner .rail-item.is-clear { background: transparent !important; }
.m-track:has(.is-clear) { border-radius: 0; }
/* 모든 이미지 배너: 뒤쪽 그림자·바탕·둥근 칸 없이 이미지만 (네 모서리 그림자 안 보이게) */
.rail-item, .m-banner .rail-item { background: transparent !important; box-shadow: none !important; }
.rail-item.is-clear, .m-track:has(.is-clear) { border-radius: 0 !important; }
.m-track { box-shadow: none !important; background: transparent !important; }

/* ==========================================================
   모아사 전용 (공동구매 3구분 · 희망상품 · 쿠폰 · 설치안내)
   ========================================================== */
body { background: #fff; }
h1, h2, h3, .hero-title, .block-head h3 { color: var(--brand-dark); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-danger { background: #fff; color: var(--danger); border: 1px solid #e8b9b2; }
.link-btn { border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px; }
.u { text-decoration: underline; text-underline-offset: 3px; }
.ok { color: var(--ok); }
.req { color: var(--accent); font-style: normal; }

/* 로고 */
.logo-svg { display: block; height: 38px; width: auto; }
.drawer-logo .logo-svg { height: 30px; }
.ft-logo .logo-svg { height: 34px; }
.auth-logo { display: block; margin: 0 auto 10px; width: max-content; }
.auth-logo .logo-svg { height: 48px; }
@media (max-width: 899px) { .logo .logo-svg { height: 30px; } }
.hd { border-bottom-color: var(--line); }
.gnb a { font-size: 15px; }
.gnb a.on, .gnb a:hover { color: var(--brand); }
.gnb a.gnb-gb { color: var(--brand-dark); }
.gnb a.gnb-gb::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 2px; animation: msPulse 1.6s infinite; }
@keyframes msPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.mnav a.on { color: var(--brand-dark); }

/* 히어로 */
.hero { background: linear-gradient(160deg, var(--cream) 0%, #f8f2e4 55%, #f4ecd9 100%); }
.hero-in { grid-template-columns: 1fr minmax(280px, 440px); }
.hero-kicker { color: var(--sage); font-family: var(--en); }
.hero-title em { background: linear-gradient(transparent 60%, #f3dccf 60%); }
.hero-gift { margin-top: 16px; font-size: 14px; color: var(--brand-dark); background: rgba(255,255,255,.7); border: 1px dashed #e9dcbd; padding: 10px 14px; border-radius: 12px; width: fit-content; }
.hero-gift b { color: var(--accent); }
.hero-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-steps li { position: relative; display: grid; gap: 2px; padding: 16px 14px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(91,74,46,.06); }
.hero-steps i { font-style: normal; font-family: var(--en); font-weight: 800; font-size: 12px; color: #fff; background: var(--sage); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; }
.hero-steps li:last-child i { background: var(--accent); }
.hero-steps b { font-size: 15px; color: var(--brand-dark); }
.hero-steps span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 899px) {
  .hero-in { padding: 22px 16px 22px; gap: 18px; }
  .hero-title { font-size: 28px; }
  .hero-sub { font-size: 14.5px; }
  .hero-cta { margin-top: 18px; }
  .hero-cta .btn { flex: 1; height: 48px; font-size: 15px; padding: 0 12px; }
  .hero-steps { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .hero-steps li { padding: 10px 6px; text-align: center; justify-items: center; }
  .hero-steps b { font-size: 12.5px; }
  .hero-steps span { font-size: 10.5px; line-height: 1.3; }
}

/* 첫 화면 바로가기 */
.phase-entry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 24px 20px 0; max-width: var(--wrap); margin: 0 auto; }
.phase { display: flex; flex-direction: column; gap: 2px; padding: 16px 14px; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line); }
.phase strong { font-size: 15px; color: var(--brand-dark); }
.phase small { font-size: 12.5px; color: var(--muted); }
.phase-live { background: var(--brand-dark); border-color: var(--brand-dark); }
.phase-live strong, .phase-live small { color: #fff; }
.phase-live small { opacity: .8; }
.phase-soon { background: #f8f2e4; }
.phase-wish { background: #fbf3ee; border-color: #f0dccf; }
@media (max-width: 899px) {
  .phase-entry { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 14px 12px 0; }
  .phase { padding: 12px 6px; text-align: center; border-radius: 12px; }
  .phase strong { font-size: 12.5px; line-height: 1.3; word-break: keep-all; }
  .phase small { font-size: 11px; }
}

/* 섹션 */
.block { max-width: var(--wrap); margin: 0 auto; }
.block-head h3 small { color: var(--muted); font-weight: 500; }
.block-live .block-head h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: msPulse 1.6s infinite; }
.block-soon .block-head h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sage); }
.block-ended .block-head h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #cfc6b3; }
@media (max-width: 899px) {
  .block { padding: 30px 14px 4px; }
  .block-head { margin-bottom: 12px; }
  .block-head h3 { font-size: 19px; flex-wrap: wrap; row-gap: 0; }
  .block-head h3 small { display: block; width: 100%; font-size: 12px; margin-left: 0; }
}
.empty-sm { padding: 28px 16px; border-radius: 14px; background: var(--bg-soft); }

/* 카드 */
.card .thumb { border-radius: 14px; }
.tag { border-radius: 99px; padding: 3px 9px; font-size: 11px; }
.tag-live { background: var(--brand-dark); }
.tag-soon { background: var(--sage); }
.tag-ended { background: #a59c8a; }
.tag-inst { left: auto; right: 8px; top: auto; bottom: 8px; position: absolute; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--brand-dark); font-size: 11px; font-weight: 700; border: 1px solid var(--line); }
.tag-dday { position: absolute; right: 8px; top: 8px; padding: 3px 8px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; font-family: var(--en), var(--font); }
.tag-dday.soon { background: #fff; color: var(--brand); border: 1px solid #e9dcbd; }
.card.is-ended .thumb img, .card.is-ended .thumb .ph { filter: grayscale(.6); opacity: .8; }
.card .card-price b { color: var(--brand-dark); }
.card-dep { margin-top: 2px; font-size: 12px; color: var(--muted); }
.gb-mini { margin-top: 8px; }
.gb-mini p { font-size: 12px; color: var(--muted); margin-top: 4px; }
.gb-mini b { color: var(--brand-dark); }
.gb-mini span { float: right; color: var(--accent); font-weight: 700; }
.gb-mini-note { margin-top: 8px; font-size: 12px; color: var(--brand); font-weight: 600; }
.card.is-ended .gb-mini-note { color: var(--muted); }
.gb-bar i { background: linear-gradient(90deg, var(--sage), var(--brand-dark)); }
.ph-c1 { background: #f8f2e4; } .ph-c2 { background: #f8f4ea; } .ph-c3 { background: #fbf3ee; } .ph-c4 { background: #f3ecdc; }
.ph span { color: rgba(91,74,46,.25); }
@media (max-width: 599px) { .grid { gap: 22px 10px; } .card-name { font-size: 14px; } }

/* 희망상품 띠 (첫 화면) */
.wish-band { max-width: calc(var(--wrap) - 40px); margin: 40px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; border-radius: 20px; background: var(--brand-dark); color: #fff; }
.wish-band h3 { color: #fff; font-size: 21px; margin: 4px 0 6px; }
.wish-band p { color: rgba(255,255,255,.82); font-size: 14px; }
.wish-band b { color: #efd2c3; }
.wish-band-k { font-family: var(--en); font-size: 12px; letter-spacing: .2em; color: #ead9b3 !important; font-weight: 800; }
.wish-band-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.wish-band-list small { color: #efd2c3; margin-left: 4px; }
.wish-band .btn { flex: none; background: #fff; color: var(--brand-dark); border-color: #fff; }
@media (max-width: 899px) { .wish-band { margin: 30px 14px 0; flex-direction: column; align-items: stretch; padding: 22px 18px; border-radius: 16px; } .wish-band .btn { width: 100%; } }

/* 후기 띠 */
.rv-strip { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rv-strip::-webkit-scrollbar { display: none; }
.rv-strip li { scroll-snap-align: start; }
.rv-strip a { display: grid; gap: 6px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--cream); height: 100%; }
.rv-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.rv-strip-t { font-size: 13.5px; line-height: 1.55; }
@media (max-width: 899px) { .rv-strip { grid-auto-columns: 72%; } }

/* 목록: 진행중/예정/완료 탭 */
.phase-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 20px 12px; border-radius: 12px; background: var(--bg-soft); padding: 4px; border: 1px solid var(--line); }
.phase-tabs:has(a:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.phase-tabs a { text-align: center; padding: 10px 4px; border-radius: 9px; font-size: 14.5px; font-weight: 700; color: var(--muted); }
.phase-tabs a small { font-family: var(--en); font-weight: 700; margin-left: 2px; }
.phase-tabs a.on { background: #fff; color: var(--brand-dark); box-shadow: 0 2px 8px rgba(91,74,46,.1); }
.phase-tabs a.on.pt-live small { color: var(--accent); }
@media (max-width: 899px) { .phase-tabs { margin: 10px 14px 8px; } }
.gb-guide { margin: 0 20px 12px; padding: 16px; border-radius: 14px; background: #f8f2e4; font-size: 14px; display: grid; gap: 8px; }
.gb-guide .btn-row { justify-content: flex-start; }
@media (max-width: 899px) { .gb-guide { margin: 0 14px 10px; } }

/* 상품 상세 */
.pd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.pd-tags .tag-inline { margin: 0; }
.tag-inline.tag-live { background: var(--brand-dark); }
.tag-inline.tag-soon { background: var(--sage); }
.tag-inline.tag-ended { background: #a59c8a; }
.tag-inline.tag-inst { background: #fbf3ee; color: #a0583c; }
.pd-image { position: relative; }
.pd-stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); padding: 10px 22px; border: 3px solid var(--brand-dark); color: var(--brand-dark); background: rgba(255,255,255,.88); font-weight: 900; font-size: 22px; border-radius: 10px; }
.pd-facts { margin: 14px 0 0; display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: var(--cream); border: 1px solid var(--line); font-size: 14px; }
.pd-facts div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.pd-facts dt { color: var(--muted); }
.pd-facts dd { margin: 0; }
.pd-facts small { color: var(--muted); }
.gb-now { margin-top: 14px; padding: 14px; border-radius: 12px; border: 1px solid #e9dcbd; background: #f6f9f3; }
.gb-now.gb-soon { background: #fff; border-style: dashed; }
.gb-now.gb-ended { background: var(--bg-soft); border-color: var(--line); }
.gb-badge { background: var(--brand-dark); color: #fff; }
.gb-timer { font-family: var(--en), var(--font); font-weight: 800; color: var(--accent); margin-top: 6px; font-size: 15px; }
.btn-soon { background: #f8f2e4; color: var(--brand); border-color: #e9dcbd; opacity: 1; }
.btn-join { height: 54px; font-size: 16px; }

/* 설치 안내 */
.inst-box { border: 1px solid #f0dccf; background: #fdf8f4; border-radius: 14px; }
.pd-detail.inst-box { padding: 18px; margin-top: 18px; }
.inst-box h3 { display: flex; align-items: center; gap: 6px; color: #a0583c; font-size: 16px; }
.inst-box h3 svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.inst-box ul { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: #5b3a2e; }
.inst-box .inst-extra { color: var(--brand-dark); font-weight: 600; }
.inst-box .check { margin-top: 12px; }
.summary .inst-row dd { color: #a0583c; font-size: 13px; }
@media (max-width: 899px) { .pd-detail.inst-box { margin: 14px 14px 0; } section.form-block.inst-box { margin: 10px 12px; } }

/* 참여 화면 */
.join-item { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; margin: 6px 0 12px; }
.join-thumb { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.join-thumb img, .join-thumb .ph { width: 100%; height: 100%; object-fit: cover; font-size: 22px; }
.join-name { font-weight: 700; }
.join-dep b { color: var(--accent); font-size: 17px; }
.join-gifts { list-style: none; padding: 14px; margin: 16px auto 0; display: grid; gap: 6px; border-radius: 12px; background: #f8f2e4; text-align: left; max-width: 420px; font-size: 14px; }

/* 무통장 계좌 안내 — 사이트 색 */
.bank { background: #fbf7ee !important; border: 1px solid #e9dcbd !important; border-radius: 14px !important; }
.bank h3 { color: var(--brand-dark) !important; }
.bank dt { color: var(--muted); }
.bank dd.acct span { font-family: var(--en), var(--font); font-weight: 800; color: var(--brand-dark); letter-spacing: .02em; }
.bank dd.point { color: var(--accent) !important; font-weight: 800; }
.bank .copy { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
.bank ul { color: #6b6457; }
.bank .sos { background: #fff !important; border: 1px solid #e9dcbd !important; color: var(--brand-dark) !important; }

/* 마이페이지 지갑 · 쿠폰 */
.my-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 16px 0; }
.my-wallet .my-points { margin: 0; }
.my-coupons { background: #fbf3ee !important; }
.my-coupons b { color: #a0583c !important; }
.coupon-help { margin: 0 16px 12px; }
.coupon-list { list-style: none; margin: 0 16px 24px; padding: 0; display: grid; gap: 10px; }
.coupon { display: grid; grid-template-columns: 92px 1fr; border-radius: 14px; overflow: hidden; border: 1px solid #e9dcbd; background: #fff; }
.coupon-amt { display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 13px; padding: 14px 6px; border-right: 2px dashed rgba(255,255,255,.6); }
.coupon-amt b { font-family: var(--en); font-size: 22px; font-weight: 800; }
.coupon-body { padding: 12px 14px; display: grid; gap: 2px; }
.coupon-name { font-weight: 700; }
.coupon.off { opacity: .55; filter: grayscale(1); }

/* 공구 희망상품 */
.wish-top { margin: 0 20px 14px; padding: 18px; border-radius: 16px; background: linear-gradient(150deg, #fbf3ee, #f8f2e4); display: grid; gap: 12px; font-size: 14.5px; line-height: 1.65; }
.wish-top b { color: var(--brand-dark); }
.wish-top .btn { justify-self: start; }
.wish-list { list-style: none; margin: 0 20px; padding: 0; display: grid; gap: 12px; }
.wish { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.wish:target { border-color: var(--sage); box-shadow: 0 0 0 3px #f8f2e4; }
.wish-ph { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.wish:not(:has(.wish-ph)) { grid-template-columns: 1fr auto; }
.wish-body { display: grid; gap: 4px; min-width: 0; }
.wish-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wish-name { font-weight: 800; font-size: 16px; color: var(--brand-dark); word-break: break-all; }
.wish-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.wish-meta b { color: var(--brand-dark); }
.wish-meta a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.wish-memo { font-size: 14px; color: #6b6457; white-space: normal; }
.wish-reply { margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: #f8f2e4; font-size: 13.5px; }
.wish-reply b { color: var(--brand); font-size: 12px; }
.wish-body .btn { justify-self: start; margin-top: 4px; }
.wish-side { display: grid; align-content: start; justify-items: center; gap: 4px; }
.wish-like { display: grid; justify-items: center; gap: 0; width: 72px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--cream); color: var(--muted); cursor: pointer; font: inherit; }
.wish-like svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wish-like b { font-family: var(--en); font-size: 16px; color: var(--brand-dark); }
.wish-like small { font-size: 11px; white-space: nowrap; }
.wish-like.on { border-color: var(--accent); background: #fbf0ea; color: var(--accent); }
.wish-like.on svg { fill: var(--accent); }
.ws { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); }
.ws-review { background: #fff8e5; color: #8a6414; border-color: #f0dfae; }
.ws-open { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.ws-no { background: #f3f3f1; color: #9a9a95; }
.wish-form { margin: 24px 20px 30px !important; border: 1px solid var(--line) !important; border-radius: 16px; }
@media (max-width: 899px) {
  .wish-top { margin: 0 14px 12px; }
  .wish-list { margin: 0 14px; }
  .wish { gap: 10px; padding: 14px; }
  .wish-ph { width: 60px; height: 60px; }
  .wish-like { width: 60px; }
  .wish-form { margin: 20px 14px 24px !important; }
}

/* 이용안내 */
.guide { max-width: 760px; margin: 0 auto; padding: 0 16px 30px; display: grid; gap: 16px; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.guide-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 16px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); }
.guide-steps i { font-style: normal; font-family: var(--en); font-weight: 800; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sage); color: #fff; }
.guide-steps b { color: var(--brand-dark); font-size: 16px; }
.guide-steps p { font-size: 14px; color: #6b6457; margin-top: 2px; }
.guide-box { padding: 18px; border-radius: 14px; border: 1px solid var(--line); }
.guide-box h3 { font-size: 16px; margin-bottom: 8px; }
.guide-box ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.75; }
.guide-box p { font-size: 14px; line-height: 1.7; }

/* 푸터 */
.to-top, .moa-bm { background: var(--brand) !important; box-shadow: 0 6px 18px rgba(91, 74, 46, .28) !important; }
.to-top:hover { background: var(--brand-dark) !important; }
.tabbar a.on, .tabbar button.on { color: var(--brand-dark); }
.tabbar a.on svg { stroke: var(--brand); }
.tabbar { padding-bottom: env(safe-area-inset-bottom); }
.chips a.on { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.chips a small { opacity: .7; font-family: var(--en); }
.status.s-paid { background: #e3f8ef; color: #087f5b; }
.warn { color: var(--warn); }

/* ── PC 풀사이즈 · 모바일 가독성 ── */
:root { --wrap: 1440px; }
@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(5, 1fr); gap: 40px 22px; }
  .hero-in { padding-top: 64px; padding-bottom: 64px; }
  .hero-title { font-size: 52px; }
  .block { padding: 56px 32px 8px; }
  .phase-entry { padding: 28px 32px 0; }
  .wish-band { max-width: calc(var(--wrap) - 64px); }
  .wrap { padding: 0 32px; }
}
@media (max-width: 899px) {
  body { font-size: 15.5px; line-height: 1.6; }
  .muted { font-size: 13.5px; }
  .card-name { font-size: 14.5px; line-height: 1.45; }
  .card-price b { font-size: 16.5px; }
  .card-dep, .gb-mini p, .gb-mini-note { font-size: 12.5px; }
  .btn { min-height: 46px; }
  .btn-sm { min-height: 38px; }
  .field input, .field select, .field textarea { font-size: 16px; min-height: 48px; } /* 16px = 아이폰 확대 방지 */
  .field textarea { min-height: 96px; }
  .check span { font-size: 14.5px; line-height: 1.55; }
  .mnav a { font-size: 15px; padding: 11px 13px; }
  .tabbar a, .tabbar button { font-size: 11.5px; }
  .pd-name { font-size: 21px; line-height: 1.4; }
  .pd-facts { font-size: 14.5px; }
  .gb-step-price b { font-size: 16px; }
  .chips a { padding: 8px 14px; font-size: 14px; }
  .summary .total dd { font-size: 20px; }
  .buybar .btn { height: 54px; font-size: 16.5px; }
}
.tabbar { grid-template-columns: repeat(5, 1fr) !important; }
@media (max-width: 899px) {
  .hero-in { grid-template-columns: 1fr; text-align: left; }
  .hero-text { text-align: left; }
  .hero-kicker { letter-spacing: .14em; margin-bottom: 8px; }
  .hero-sub { line-height: 1.65; }
  .hero-gift { width: 100%; }
}
.ship-sum { list-style: none; margin: 0 0 14px; padding: 14px; display: grid; gap: 6px; border-radius: 12px; background: var(--cream); border: 1px solid var(--line); font-size: 14px; }
.ship-sum li { display: grid; grid-template-columns: 76px 1fr; gap: 8px; }
.ship-sum span { color: var(--muted); }
.ship-sum b { color: var(--brand-dark); font-weight: 600; }

.site-footer .ft-logo { filter: none; opacity: 1; }
.site-footer .ft-logo .logo-ko { fill: #fff; } .site-footer .ft-logo .logo-en { fill: #ead9b3; }
.page-list > .chips { display: flex; }
/* 목록 화면 안쪽 상자들: 화면 양옆 여백 유지 (PC 는 가운데 정렬) */
.page > .phase-tabs, .page > .gb-guide, .page > .wish-top, .page > .wish-list, .page > .wish-form, .page > .coupon-list, .page > .coupon-help, .page > .my-wallet {
  width: calc(100% - 40px); margin-left: auto !important; margin-right: auto !important;
}
@media (max-width: 899px) {
  .page > .phase-tabs, .page > .gb-guide, .page > .wish-top, .page > .wish-list, .page > .wish-form, .page > .coupon-list, .page > .coupon-help, .page > .my-wallet { width: calc(100% - 28px); }
}
@media (min-width: 900px) { .hero .hero-in { padding-top: 56px; padding-bottom: 56px; } }
@media (min-width: 1280px) { .hero .hero-in { padding: 72px 32px; } }

/* 진행바 · 강조 보정 (블루 테마) */
.gb-bar i { background: linear-gradient(90deg, #d4b77a, #b8975a); }
.hero { background: radial-gradient(1200px 400px at 85% 0%, #f4ecd9 0%, transparent 60%), linear-gradient(160deg, #fdfbf7 0%, #f8f2e4 100%); }
.hero-title em { background: linear-gradient(transparent 60%, #f3dccf 60%); }
/* 휴대폰 메뉴: 진행상품 · 예정상품 · 완료상품 · 희망상품 · 후기 — 한 줄에 고르게 (옆으로 넘기지 않음) */
@media (max-width: 899px) {
  .mnav-in { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr .72fr; gap: 6px; padding: 8px 10px 10px; overflow: visible; }
  .mnav a { flex: initial; padding: 10px 2px; border-radius: 10px; font-size: 14px; font-weight: 700; text-align: center; white-space: nowrap; letter-spacing: -.03em; color: #6b6457; background: var(--bg-soft); }
  .mnav a.on { background: var(--brand); color: #fff; }
}
@media (max-width: 359px) { .mnav a { font-size: 12.5px; } }

/* 목록 분류 버튼: 휴대폰은 옆으로 넘기지 않고 두세 줄로 모두 보이기 */
.chips.cat-chips { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
@media (max-width: 899px) {
  .page > .chips.cat-chips { padding: 4px 14px 10px; gap: 8px 6px; }
  .chips.cat-chips a { padding: 8px 13px; font-size: 14px; }
}

.perk-note { margin: 8px 0 6px; padding: 8px 12px; border-radius: 10px; background: #fbf3ee; color: #a0583c; font-size: 13.5px; }
.perk-note b { color: #a0583c; }
.perk-inline { color: #a0583c; font-weight: 600; }

/* ==========================================================
   샴페인 골드 테마 — 짙은 바탕 대신 연하고 고급스러운 색
   ========================================================== */
:root {
  --gold-1: #fbf6ea;   /* 아주 연한 골드 (바탕) */
  --gold-2: #f3e8cf;   /* 연한 골드 (선택된 메뉴·배지) */
  --gold-3: #e3cd9c;   /* 골드 (버튼) */
  --gold-4: #c9a96a;   /* 진한 골드 (테두리·아이콘) */
  --gold-ink: #6b5527; /* 골드 위 글자 */
  --strip-bg: #f6eedb; --strip-ink: #7a6235;
}
h1, h2, h3, .hero-title, .block-head h3 { color: #4a3f2e; }
.btn-primary { background: linear-gradient(135deg, #ecdcb2 0%, #dcc28a 100%); border-color: #d6bb80; color: #5a4520; box-shadow: 0 4px 14px rgba(184,151,90,.22); }
.btn-primary:hover { background: linear-gradient(135deg, #e6d29f 0%, #d2b473 100%); border-color: #c9a96a; color: #4d3a19; }
.btn-line { border-color: #dcc9a0; color: #6b5527; background: #fff; }
.event-strip { background: var(--strip-bg); color: var(--strip-ink); border-bottom: 1px solid #ecdfc0; }
.mnav a.on, .gnb a.on { color: var(--gold-ink); }
@media (max-width: 899px) { .mnav a.on { background: var(--gold-2); color: var(--gold-ink); box-shadow: inset 0 0 0 1px #e3cd9c; } }
.chips a.on { background: var(--gold-2); border-color: #e3cd9c; color: var(--gold-ink); }
.phase-tabs a.on { color: var(--gold-ink); }
.tag, .tag-live, .tag-inline, .tag-inline.tag-live, .gb-badge, .ws-open { background: var(--gold-2); color: var(--gold-ink); border: 1px solid #e6d3a6; }
.tag-soon, .tag-inline.tag-soon { background: #fff; color: #8d7240; border: 1px solid #e6d3a6; }
.tag-ended, .tag-inline.tag-ended { background: #f3f0ea; color: #8a8274; border: 1px solid #e6e0d4; }
.tag-dday { background: #f6e3d9; color: #a0583c; border: 1px solid #ecc9b8; }
.phase-live { background: linear-gradient(135deg, #f6ecd4, #ecdab0); border-color: #e3cd9c; }
.phase-live strong, .phase-live small { color: var(--gold-ink); }
.hero { background: radial-gradient(1100px 380px at 85% 0%, #f6ecd4 0%, transparent 60%), linear-gradient(160deg, #fdfbf7 0%, #faf3e3 100%); }
.hero-kicker { color: #b08d4f; }
.hero-title em { background: linear-gradient(transparent 60%, #f1dfb8 60%); }
.hero-gift b { color: #a0583c; }
.hero-steps i { background: #ead9b3; color: var(--gold-ink); }
.hero-steps li:last-child i { background: #f3dccf; color: #a0583c; }
.gb-bar i { background: linear-gradient(90deg, #e9d29c, #c9a96a); }
.gb-timer, .card-price em, .pd-price em, .gb-mini span { color: #b5654a; }
.wish-band { background: linear-gradient(135deg, #fbf5e6, #f4e7c9); color: #4a3f2e; border: 1px solid #ecdcb5; }
.wish-band h3 { color: #4a3f2e; } .wish-band p { color: #6b6457; } .wish-band b { color: #a0583c; }
.wish-band-k { color: #b08d4f !important; } .wish-band-list small { color: #a0583c; }
.wish-band .btn { background: linear-gradient(135deg, #ecdcb2, #dcc28a); color: #5a4520; border-color: #d6bb80; }
.coupon { border-color: #e6d3a6; } .coupon-amt { background: linear-gradient(160deg, #f3e6c6, #e3cd9c); color: var(--gold-ink); border-right-color: rgba(255,255,255,.8); }
.bank { background: #fdf9ef !important; border-color: #ecdcb5 !important; }
.bank .copy { background: #ecdcb2 !important; color: #5a4520 !important; border-color: #d6bb80 !important; }
.bank dd.acct span { color: #5a4520; }
.hd-search button { background: #e3cd9c; color: #5a4520; }
.hd-search button svg { stroke: #5a4520; }
.to-top, .moa-bm { background: linear-gradient(135deg, #e9d6a8, #d2b473) !important; color: #5a4520 !important; box-shadow: 0 6px 16px rgba(184,151,90,.3) !important; }
.gnb a.gnb-gb::before, .block-live .block-head h3::before { background: #d08a6a; }
.block-soon .block-head h3::before { background: #d4b77a; }
.status.s-paid { background: #f3ecdc; color: #6b5527; }
.ws-review { background: #fbf3e2; color: #8a6414; }
.drawer-me { background: var(--gold-1); }
/* 푸터: 아주 연한 크림 */
.site-footer { background: #fdfbf6; color: #8a8274; border-top: 1px solid #efe7d6; }
.site-footer a, .footer-links { color: #6b5f48; }
.footer-links a:hover { color: #4a3f2e; }
.ft-brand p { color: #a39a88; }
.ft-cs a { color: #7a6235; }
.ft-note { border-top-color: #efe7d6; color: #a39a88; }
.site-footer .ft-logo .logo-ko { fill: #5b4a2e; } .site-footer .ft-logo .logo-en { fill: #c9a96a; }
@media (max-width: 899px) { .logo .logo-svg { height: 34px; } }
@media (min-width: 900px) { .logo .logo-svg { height: 46px; } }

/* 홍보띠 HOT: 투명 바탕 + 짙은 골드 (반짝임) */
.event-strip .strip-hot-txt, .strip-preview .strip-hot-txt {
  flex: none; width: auto; height: auto; display: inline-flex; align-items: center;
  padding: 1px 7px; border: 1.5px solid #a8843e; border-radius: 99px; background: transparent;
  color: #a8843e; font-family: var(--en); font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.4;
  animation: hotGlow 1.8s ease-in-out infinite;
}
@keyframes hotGlow { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .event-strip .strip-hot-txt { animation: none; } }
.event-strip .strip-hot-txt { margin: 0; max-width: none; }
.event-strip .strip-txt { color: var(--strip-ink); }

/* 카카오 · 네이버 간편 로그인 */
.social-btns { display: grid; gap: 8px; margin: 4px 0 6px; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 12px; font-weight: 700; font-size: 15.5px; border: 0; }
.btn-social svg { width: 20px; height: 20px; }
.btn-kakao { background: #FEE500; color: #191600; }
.btn-kakao:hover { background: #f5dc00; color: #191600; }
.btn-naver { background: #03C75A; color: #fff; }
.btn-naver svg { width: 15px; height: 15px; }
.btn-naver:hover { background: #02b351; color: #fff; }
.social-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--muted); font-size: 13px; }
.social-or::before, .social-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social-hello { margin: 0 16px 6px; padding: 12px 14px; border-radius: 12px; background: var(--gold-1); font-size: 14px; }
.social-hello.social-kakao b { background: #FEE500; padding: 1px 6px; border-radius: 6px; }
.social-hello.social-naver b { background: #03C75A; color: #fff; padding: 1px 6px; border-radius: 6px; }

/* 첫 화면 큰 글씨·작은 글씨 줄바꿈: 입력한 줄 그대로 + 긴 줄은 단어 단위로 보기 좋게 */
.hero-title, .hero-sub { word-break: keep-all; overflow-wrap: break-word; }
.hero-title .hl, .hero-sub .hl { text-wrap: balance; }
.hero-sub { max-width: 36em; }
.hero-sub b { color: #4a3f2e; }
@media (max-width: 899px) { .hero-sub { max-width: none; } .hero-sub .hl { text-wrap: pretty; } }
.hero-title .hl, .hero-sub .hl { display: block; text-wrap: balance; }
@media (max-width: 899px) { .hero-sub .hl { text-wrap: balance; } .hero-sub .hl + .hl { margin-top: 2px; } }