/* 기멱기멱 독립몰 공통 스타일
   브랜드 컬러는 gimeok-live/public/player.css 와 동일 (--gimeok / --gimeok2)
   레이아웃은 기멱아지트(selfit-secret) 메인 구성 명세를 그대로 따름. 모바일 우선 440px. */
:root{
  --gimeok:#f97316; --gimeok2:#ef4444;
  --ink:#111827; --ink2:#1f2937; --muted:#6b7280; --line:#e5e7eb;
  --bg:#ffffff; --soft:#f8fafc; --grey:#f3f4f6;
  --hot:#ff3b1f; --band:#fff7f4; --band-line:#ffd8cf;
  --pink:#ff4d8d; --pink-bg:rgba(255,235,244,.96);
  --wrap:440px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:#f5f5f7;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;background:var(--bg);min-height:100dvh;position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.07)}
.pad{padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.hide{display:none !important}

/* ── 탑배너 = 전광판 (문장 개수 제한 없음) ──
   문구의 주인은 몰의 data/notice-bar.json 이고, 관리자(4600) 배너관리에서 고친다.
   ★ 예전에는 문장 2개를 CSS keyframes(-16px 고정)로 굴렸다. 문장이 3개가 되는 순간
     세 번째가 영영 안 보였고, 문장이 길면 한 줄에서 잘렸다.
     → 높이·이동거리를 common.js 가 실제 글자 높이를 재서 정한다(--tb-h).
        칸 높이는 '가장 긴 문장' 에 맞춰 한 번만 정해지므로, 굴러갈 때 페이지가 들썩이지 않는다. */
/* ★ 위아래 여백(9px)을 padding 으로 주면 안 된다.
   overflow:hidden 은 'padding 상자' 까지만 자르기 때문에, 아래쪽 9px 자리에
   다음 문장의 머리 9px 이 항상 비쳐 보였다(핸드폰 375px 에서 두 줄이 겹쳐 보이던 자리).
   → 여백은 common.js 가 .tb-line 높이 안에 넣어 준다(한 칸 = 글자높이 + 18). */
.topbanner{background:linear-gradient(95deg,var(--gimeok),var(--gimeok2));color:#fff;
  font-size:12px;font-weight:800;text-align:center;padding:0 12px;overflow:hidden;position:relative;
  min-height:34px}
.topbanner[hidden]{display:none}
.tb-track{transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform}
.tb-line{display:flex;align-items:center;justify-content:center;min-height:16px;line-height:1.4;
  word-break:keep-all;overflow-wrap:anywhere;white-space:normal}
@media (prefers-reduced-motion:reduce){ .tb-track{transition:none} }

/* ── 헤더 ── */
header#header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:8px;padding:11px 14px}
.logo{font-size:20px;font-weight:900;letter-spacing:-1px;
  background:linear-gradient(95deg,var(--gimeok),var(--gimeok2));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{display:block;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#9ca3af;-webkit-text-fill-color:#9ca3af}
.head-sp{flex:1}
.hbtn{position:relative;background:none;border:none;font-size:19px;padding:4px 5px;line-height:1}
.hbadge{position:absolute;top:-1px;right:-3px;min-width:17px;height:17px;border-radius:9px;background:var(--gimeok2);
  color:#fff;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 4px}
.searchbar{display:flex;gap:6px;padding:0 14px 11px}
.searchbar input{flex:1;min-width:0;border:1px solid var(--line);background:var(--soft);border-radius:999px;
  padding:10px 14px;font-size:13px;outline:none}
.searchbar input:focus{border-color:var(--gimeok)}
.searchbar button{border:none;background:var(--ink);color:#fff;border-radius:999px;padding:0 16px;font-weight:800;font-size:13px}

/* ── 전체메뉴 드로어 ── */
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.on{display:block}
.drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.drawer-body{position:absolute;top:0;right:0;bottom:0;width:82%;max-width:330px;background:#fff;
  padding:18px 18px 30px;overflow:auto;animation:slidein .22s}
@keyframes slidein{from{transform:translateX(100%)}}
.drawer-body h3{margin:0 0 4px;font-size:17px;font-weight:900}
.mini-shop{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0 18px}
.mini-shop .g{display:flex;align-items:center;gap:8px;font-weight:900;font-size:15px}
.mini-shop .sub{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.7}
.drawer nav a{display:block;padding:12px 4px;border-bottom:1px solid #f1f2f4;font-size:14.5px;font-weight:700}
.drawer nav a:last-child{border-bottom:none}
.drawer .close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;color:#888}

/* ── 스티키 탭바 ── */
.gazit-tabs-wrap{background:#fff;padding:10px 0;border-bottom:1px solid #f1f2f4;position:sticky;top:56px;z-index:20}
.gazit-tabs-wrap.is-fixed{background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}
.gazit-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none}
.gazit-tabs::-webkit-scrollbar{display:none}
.gazit-tabs a{flex:0 0 auto;white-space:nowrap;color:var(--ink2);background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:10px 16px;font-size:13.5px;font-weight:900}
.gazit-tabs a.is-active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 4px 10px rgba(17,24,39,.28)}

/* ── 히어로 ── */
.gazit-hero{background:#111;color:#fff;border-radius:28px;padding:38px 22px;text-align:center;margin-bottom:22px}
.gazit-hero .badge{display:inline-block;background:var(--hot);border-radius:999px;font-weight:900;font-size:11px;
  padding:6px 12px;letter-spacing:.4px}
.gazit-hero h1{font-size:32px;font-weight:900;letter-spacing:-2px;line-height:1.25;margin:14px 0 10px}
.gazit-hero p{margin:0;color:#cbd5e1;font-size:13.5px}

/* ── 섹션 타이틀 ── */
section{padding:26px 0 6px;scroll-margin-top:112px}
.gazit-title{display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 14px;padding:0 16px}
.gazit-title h2{font-size:22px;font-weight:900;letter-spacing:-1px;margin:0}
.gazit-title a{font-size:12.5px;font-weight:800;color:var(--muted);white-space:nowrap}

/* ── 배너 블록 (타임세일/예약 공용) ── */
.gazit-banner{background:var(--band);border:1px solid var(--band-line);border-radius:24px;padding:20px;margin:16px 16px 20px}
.gazit-banner .tag{display:inline-block;background:var(--hot);color:#fff;border-radius:999px;padding:6px 12px;
  font-size:12px;font-weight:900}
.gazit-banner h2{font-size:23px;font-weight:900;line-height:1.35;letter-spacing:-1px;margin:11px 0 6px}
.gazit-banner p{font-size:13.5px;color:#555;line-height:1.7;margin:0}
.gazit-progress{height:14px;background:#ffe1da;border-radius:999px;overflow:hidden;margin-top:14px}
.gazit-progress span{display:block;height:100%;background:var(--hot);border-radius:999px;transition:width .9s linear}
.gazit-progress-text{display:flex;justify-content:space-between;font-size:13px;font-weight:900;margin-top:9px}
.gazit-progress-text b{font-variant-numeric:tabular-nums}

/* ── 상품 카드 ── */
/* ── [담당: 탭4종 + 가로 스와이프] 손가락으로 미는 상품 띠 ─────────────────
   원본 카페24(기멱아지트) 실측(화면폭 375px):
     방송 인기 상품 = 슬라이드 4장 · 카드폭 275px · 컨테이너 344px  → 1.2장 + 다음장 살짝
   우리 카드폭도 274px 라 폭은 원본과 같습니다. "손으로 밀어도 안 넘어간다" 의 원인은
   폭이 아니라 아래 세 가지였습니다.
     1) scroll-snap-type 이 mandatory — 살짝 민 손가락을 원래 카드로 도로 끌어다 놓아서
        화면이 제자리로 돌아옵니다. 손님 눈에는 "안 움직인다" 로 보입니다 → proximity.
     2) overscroll-behavior-x 가 기본값 — 띠 맨 앞에서 오른쪽으로 밀면 브라우저 '뒤로가기'
        제스처가 가로챕니다(아이폰 사파리에서 특히) → contain 으로 띠 안에 가둡니다.
     3) 카드가 <a> 태그라 끌면 링크 드래그가 시작되면서 스크롤이 죽습니다 → user-drag:none.
   스크롤바는 숨기되(::-webkit-scrollbar) 스크롤 자체는 그대로 됩니다. */
.rail{display:flex;gap:12px;overflow-x:auto;padding:0 16px 8px;scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scroll-padding-left:16px}
.rail::-webkit-scrollbar{display:none}
.rail > .card{flex:0 0 auto;width:calc((100% - 14px) / 1.2);scroll-snap-align:start;
  -webkit-user-drag:none;-webkit-user-select:none;user-select:none}

/* 띠를 감싸는 껍데기 — common.js 가 아니라 index.html 이 실행 시점에 씌웁니다.
   (마크업을 고정하지 않아야 다른 담당이 섹션을 다시 써도 스와이프가 유지됩니다.) */
.railwrap{position:relative}
/* 오른쪽 끝 흐림 = "옆에 더 있어요" 신호. 끝까지 밀면 사라집니다. */
.railwrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:22px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.82));
  opacity:1;transition:opacity .2s}
.railwrap.at-end::after,.railwrap.no-scroll::after{opacity:0}
/* 좌우 화살표 — 마우스로는 밀기 어려우니 PC 에서만 띄웁니다. 손가락 화면에는 안 나옵니다. */
.railnav{position:absolute;top:38%;transform:translateY(-50%);z-index:4;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.97);
  color:var(--ink);font-size:21px;font-weight:900;line-height:1;padding:0;
  display:none;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.16)}
.railnav.prev{left:4px}
.railnav.next{right:4px}
.railnav[disabled]{opacity:.25;box-shadow:none;cursor:default}
@media (min-width:760px) and (hover:hover) and (pointer:fine){
  .railwrap .railnav{display:flex}
  .railwrap.no-scroll .railnav{display:none}   /* 밀 것이 없으면 화살표도 없앱니다 */
  .railwrap::after{display:none}
}
/* 띠에 넣을 상품이 없을 때 (예: 예약구매 0건) — 없는 상품을 지어내지 않고 안내만 합니다. */
.rail-empty{margin:0 16px;padding:30px 18px;border:1px dashed var(--line);border-radius:18px;
  background:var(--soft);text-align:center}
.rail-empty .e-emo{font-size:34px;line-height:1}
.rail-empty .e-tit{margin-top:8px;font-size:16px;font-weight:900;color:var(--ink)}
.rail-empty .e-txt{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.7}
.rail-empty .btn{margin-top:14px}
/* ── [담당: 탭4종 + 가로 스와이프] 끝 ───────────────────────────────────── */

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0 16px}
.card{position:relative;display:block}
.thumb{position:relative;width:100%;aspect-ratio:1/1.16;border-radius:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:54px;color:#fff}
.thumb .emo{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.card.sold .thumb::after{content:"SOLD OUT";position:absolute;inset:0;background:rgba(17,17,17,.62);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;letter-spacing:1px}

/* 좌상단 뱃지 (재고 / 추가할인) */
.badge-row{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:6px;z-index:3;align-items:flex-start}
.b-stock{background:rgba(17,17,17,.86);color:#fff;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900}
.b-extra{display:inline-flex;align-items:center;gap:4px;background:var(--pink-bg);color:var(--pink);
  border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900}
.b-extra svg{width:15px;height:15px;flex:none}
/* 추가배송비(냉동/대형/신선) 뱃지 — 결제 전에 미리 알리는 게 원칙 */
.b-extra2{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.94);color:#0369a1;
  border:1px solid #bae6fd;border-radius:999px;padding:4px 9px;font-size:10.5px;font-weight:900}

/* 품절 상품 재입고 알림 버튼 (SOLD OUT 오버레이 위) */
.restock-wrap{position:absolute;right:0;bottom:12px;left:0;z-index:4;display:flex;justify-content:center}
.restock-wrap .restock{margin-top:0;box-shadow:0 4px 12px rgba(0,0,0,.3)}

/* ══ [담당: 예약구매 · 재입고 알림신청] ══════════════════════════
   사장님 원문: "재고가 없으면 솔드아웃으로 썸네일에 표기가 되는것처럼
                 여기는 알림신청으로 표기가 되면돼."
   → 예약구매(section:reservation) 상품이 재고 0 이면 덮개 글씨가 '알림신청' 이 됩니다.
     재고가 생기면 .sold 가 사라지므로 덮개도 같이 사라져 자동으로 '구매' 화면이 됩니다. */
.card.sold.alarm .thumb::after{content:"🔔 알림신청";background:rgba(190,24,93,.66);
  font-size:17px;letter-spacing:0;align-items:flex-start;padding-top:34%}
/* 오버레이형(방송·예약) 카드는 썸네일 아래쪽에 상품명·가격이 깔려 있습니다.
   버튼을 bottom 에 두면 375px 에서 가격을 덮어버립니다 → 덮개 글씨 바로 아래로 올립니다. */
.card.overlay .restock-wrap{top:53%;bottom:auto}
/* 일반(격자) 카드는 덮개 글씨가 가운데라 버튼을 조금 더 내려 둡니다 */
.card.plain.sold.alarm .thumb::after{padding-top:30%}

/* 오버레이형 (방송/예약) */
.card.overlay .desc{position:absolute;right:0;bottom:0;left:0;padding:40px 14px 14px;z-index:2;
  background:linear-gradient(180deg,rgba(17,17,17,0) 0%,rgba(17,17,17,.72) 40%,rgba(17,17,17,.92) 100%);color:#fff}
.card.overlay .name{color:#fff;font-size:15px;font-weight:800;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.overlay .spec{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.card.overlay .now{color:#fff;font-size:18px;font-weight:900;order:1}
.card.overlay .list{color:rgba(255,255,255,.68);font-size:13px;font-weight:700;text-decoration:line-through;order:2}
.card.overlay .rate{color:#ff8b73;font-size:19px;font-weight:900}
.card.reserve .rate{color:#9ae4ff}

/* 일반형 (타임세일/전체상품/목록) */
.card.plain .desc{padding:9px 2px 0}
.card.plain .name{font-size:13.5px;font-weight:700;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.card.plain .spec{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:5px}
.card.plain .rate{color:var(--gimeok);font-size:16px;font-weight:900}
.card.plain .now{font-size:16px;font-weight:900;color:#000}
.card.plain .list{font-size:12px;color:#bbb;text-decoration:line-through}
.card.plain .meta{display:flex;gap:6px;align-items:center;margin-top:5px;font-size:11px;color:var(--muted)}
.card .rate span{font-size:12px}
.star{color:#ff5a1f;font-weight:800}

/* 타임세일 롤링 띠 — '20,000원 할인' 과 '남은시간 00:49:53' 이 번갈아 올라옵니다.
   ★ 예전 규칙은 `.roll div{...}` 였다. 이 선택자는 두 줄(.d/.t)뿐 아니라 그 둘을 감싼
     .roll-in 까지 같이 잡아서, .roll-in 이 display:flex(가로줄)가 돼 버렸다.
     그래서 두 문장이 위아래가 아니라 '옆으로' 붙어 한 칸(165px)에 욱여넣어졌고,
     사장님 폰 375px 에서 "20,000원 할" 처럼 글자가 잘렸다.
     (타임특가 편성이 0건이라 이 카드를 아무도 못 봐서 여태 안 드러났던 자리다)
     → 줄 두 개만 콕 집어 지정한다. .roll-in 은 그냥 세로로 쌓인 통이어야 한다. */
.roll{position:absolute;right:0;bottom:0;left:0;height:32px;background:rgba(17,17,17,.82);overflow:hidden;z-index:3}
.roll-in{animation:rollup 4s infinite}
.roll .d,.roll .t{height:32px;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:900;white-space:nowrap;padding:0 8px}
.roll .d{color:#ffd5e5}
.roll .t{color:#fff0a8;font-variant-numeric:tabular-nums}
@keyframes rollup{0%,42%{transform:translateY(0)}50%,92%{transform:translateY(-32px)}100%{transform:translateY(0)}}

/* 예약 오픈시각 오버레이 */
.sched{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;text-align:center;
  border-radius:20px;background:rgba(17,17,17,.8);backdrop-filter:blur(8px);color:#fff;padding:14px 20px}
.sched .day{font-size:15px;font-weight:900}
.sched .time{font-size:24px;font-weight:900;letter-spacing:-.04em;margin-top:2px}
.restock{display:inline-flex;align-items:center;justify-content:center;min-height:32px;border-radius:999px;
  background:#fff;color:#111;font-weight:900;font-size:12px;padding:0 14px;border:none;margin-top:8px}

/* ── 소통하기 ── */
.social-bg-box{background:var(--grey);padding:26px 20px;border-radius:26px;margin:26px 16px 0}
.social-bg-box h2{font-size:21px;font-weight:900;margin:0 0 4px;letter-spacing:-.8px}
.social-bg-box p{margin:0;color:var(--muted);font-size:12.5px}
.gazit-social{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:16px}
.gazit-social a{border-radius:20px;padding:18px 10px;text-align:center;font-size:15px;font-weight:900;color:#fff}
.gazit-social .grib{background:#ff6b00}
.gazit-social .tiktok{background:#111}
.gazit-social .youtube{background:#ff0000}
.gazit-social .insta{background:linear-gradient(45deg,#833ab4,#fd1d1d,#fcb045)}

/* ── 리뷰 ── */
.review-head{text-align:center;margin-bottom:14px}
.review-head h3{font-size:22px;font-weight:900;letter-spacing:-1px;margin:0}
.review-head p{margin:5px 0 0;color:var(--muted);font-size:12.5px}
.review-roll{height:246px;overflow:hidden;margin:0 16px;border-top:1px solid var(--line)}
.review-item{display:flex;gap:11px;padding:13px 2px;border-bottom:1px solid #f1f2f4;height:82px;align-items:center}
.review-item .th{width:54px;height:54px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff}
.review-item .c{flex:1;min-width:0}
.review-item .sj{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-item .ct{font-size:12px;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.review-item .mt{font-size:11px;color:#9ca3af;margin-top:3px}
.review-item .rt{flex:none;text-align:right;font-size:11px;color:var(--muted);white-space:nowrap}

/* ── 하단 3카드 ── */
.index_ban_500{display:grid;gap:11px;padding:24px 16px 8px}
.index_ban_500 a{display:block;border:1px solid var(--line);border-radius:18px;padding:17px 18px;background:#fff}
.index_ban_500 .p1{font-size:15px;font-weight:900;color:#000}
.index_ban_500 .p2{font-size:12.5px;color:#777;margin-top:4px}

/* ── 푸터 ── */
footer#footer{margin-top:30px;background:#111827;color:#9ca3af;padding:24px 16px 90px;font-size:11.5px;line-height:1.9}
footer#footer b{color:#fff;font-size:14px;display:block;margin-bottom:8px}
footer .flinks{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
footer .flinks a{color:#e5e7eb;font-weight:700;font-size:12px}

/* ── 하단 고정 탭바 ── */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:40;max-width:var(--wrap);margin:0 auto;
  background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);
  padding:7px 0 calc(7px + env(safe-area-inset-bottom))}
.tabbar a{text-align:center;font-size:10.5px;font-weight:700;color:#9ca3af}
.tabbar a i{display:block;font-size:19px;font-style:normal;margin-bottom:2px}
.tabbar a.on{color:var(--gimeok)}
.tabbar a .tb-badge{position:absolute;transform:translate(9px,-4px);background:var(--gimeok2);color:#fff;
  font-size:9px;font-weight:900;border-radius:9px;padding:1px 5px}

/* ── 공통 UI ── */
.btn{display:block;width:100%;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:900;text-align:center}
.btn.primary{background:linear-gradient(160deg,var(--gimeok),var(--gimeok2));color:#fff}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:var(--soft);border:1px solid var(--line);color:var(--ink)}
.btn:disabled{opacity:.4}
.row-btns{display:flex;gap:9px}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:900}
.empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:13.5px;line-height:2}
.pagehead{padding:16px 16px 6px}
.pagehead h1{font-size:23px;font-weight:900;letter-spacing:-1px;margin:0}
.pagehead p{margin:5px 0 0;color:var(--muted);font-size:12.5px}
.box{border:1px solid var(--line);border-radius:18px;padding:16px;margin:12px 16px;background:#fff}
.kv{display:flex;justify-content:space-between;padding:6px 0;font-size:13.5px}
.kv b{font-weight:900}
.kv.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:16px}
.kv.total b{color:var(--gimeok2);font-size:19px}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:rgba(17,17,17,.92);color:#fff;
  padding:12px 18px;border-radius:999px;font-size:13px;font-weight:700;z-index:80;animation:tup .25s;max-width:88%;text-align:center}
@keyframes tup{from{transform:translate(-50%,12px);opacity:0}}

/* 모달 */
.modal{position:fixed;inset:0;z-index:70;display:none}
.modal.on{display:block}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.modal-body{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:var(--wrap);
  background:#fff;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:up .24s;max-height:86%;overflow:auto}
@keyframes up{from{transform:translate(-50%,100%)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal-head h3{margin:0;font-size:17px;font-weight:900}
.modal-head button{background:none;border:none;font-size:19px;color:#999}

/* ── 헤더 로고 (brand.js logoSVG 가 그린 <svg> 가 들어온다) ── */
.logo{display:flex;align-items:center;min-width:0}
.logo svg{display:block;height:auto;max-width:44vw}

/* ── 푸터: 전자상거래법 제10조 사업자 신원정보 상시노출 ── */
footer#footer .fbiz{margin-top:4px}
footer#footer .fname{color:#fff;font-size:15px;font-weight:900;display:block;margin-bottom:2px}
footer#footer .fname small{font-size:10px;font-weight:700;letter-spacing:1.2px;color:#6b7280}
footer#footer .ftag{margin:0 0 12px;font-size:11.5px;color:#9ca3af}
footer#footer .frow{display:flex;gap:8px;padding:3px 0;font-size:11.5px;line-height:1.7;flex-wrap:wrap}
footer#footer .frow > span{flex:0 0 104px;color:#6b7280;font-weight:700}
footer#footer .frow > b{flex:1 1 180px;min-width:0;color:#d1d5db;font-weight:600;word-break:break-word}
footer#footer .frow em{font-style:normal;color:#6b7280;font-size:11px}
footer#footer .todo{color:#fca5a5;background:rgba(248,113,113,.12);border-radius:5px;padding:0 5px}
footer#footer .fcs{margin:12px 0 0;font-size:11.5px;color:#9ca3af}
footer#footer .fnote{margin:12px 0 0;padding-top:12px;border-top:1px solid #1f2937;font-size:11px;line-height:1.85;color:#9ca3af}
footer#footer .fnote b{display:inline;color:#e5e7eb;font-size:11px;margin:0}
footer#footer .fcopy{margin:10px 0 0;font-size:10.5px;color:#4b5563}
footer .flinks a.strong{color:#fff;font-weight:900}

/* 법정 표시항목 미입력 경고 (개발/오픈 전용) */
.legal-warn{position:fixed;left:50%;transform:translateX(-50%);bottom:74px;z-index:90;
  max-width:min(92vw,var(--wrap));background:#7f1d1d;color:#fee2e2;border:1px solid #b91c1c;
  border-radius:12px;padding:10px 12px;font-size:12px;font-weight:700;line-height:1.6;
  display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.legal-warn button{margin-left:auto;background:none;border:none;color:#fecaca;font-size:14px;flex:none}

/* ── 약관·방침 등 문서 페이지 ── */
.doc{padding:4px 16px 40px}
.doc .updated{font-size:11.5px;color:var(--muted);border:1px solid var(--line);background:var(--soft);
  border-radius:12px;padding:10px 12px;margin-bottom:18px;line-height:1.8}
.doc h2{font-size:16px;font-weight:900;margin:26px 0 8px;padding-top:16px;border-top:1px solid var(--line);letter-spacing:-.4px}
.doc h2:first-of-type{border-top:none;padding-top:0;margin-top:6px}
.doc h3{font-size:13.5px;font-weight:900;margin:16px 0 6px;color:var(--ink2)}
.doc p,.doc li{font-size:13px;line-height:1.95;color:#374151}
.doc p{margin:0 0 9px}
.doc ul,.doc ol{margin:0 0 10px;padding-left:19px}
.doc li{margin-bottom:3px}
.doc .todo{color:#b91c1c;background:#fef2f2;border-radius:5px;padding:0 5px;font-weight:800}
.doc .callout{border:1px solid var(--band-line);background:var(--band);border-radius:14px;padding:14px;margin:14px 0}
.doc .callout p:last-child{margin-bottom:0}
.doc .callout.warn{border-color:#fecaca;background:#fef2f2}
.doc .callout b{color:var(--gimeok2)}
.doc .tocbox{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:18px;background:var(--soft)}
.doc .tocbox a{display:block;font-size:12.5px;font-weight:700;padding:4px 0;color:var(--ink2)}

/* 문서용 표 — 좁은 화면에서 가로스크롤은 표 안에서만 */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;margin:10px 0 16px}
.tablewrap table{width:100%;min-width:460px;border-collapse:collapse;font-size:12px;background:#fff}
.tablewrap th,.tablewrap td{padding:9px 10px;text-align:left;border-bottom:1px solid #f1f2f4;line-height:1.65;vertical-align:top}
.tablewrap thead th{background:var(--soft);font-weight:900;font-size:11.5px;white-space:nowrap}
.tablewrap tr:last-child td{border-bottom:none}
.tablewrap td b{font-weight:900}

/* ── 회원가입 동의 ── */
.agree{border:1px solid var(--line);border-radius:16px;padding:4px 14px;margin:0 0 14px}
.agree .aitem{display:flex;align-items:flex-start;gap:10px;padding:13px 0;border-bottom:1px solid #f1f2f4}
.agree .aitem:last-child{border-bottom:none}
.agree .aitem.all{border-bottom:2px solid var(--line)}
.agree .aitem.all label{font-size:14.5px;font-weight:900}
.agree input[type=checkbox]{width:21px;height:21px;flex:none;margin:0;accent-color:var(--gimeok);cursor:pointer}
.agree label{flex:1;min-width:0;font-size:13px;font-weight:700;line-height:1.55;cursor:pointer}
.agree label .req{color:var(--gimeok2)}
.agree label .opt{color:var(--muted)}
.agree .aitem a{flex:none;font-size:11.5px;color:var(--muted);text-decoration:underline;padding:2px 0}
.agree .hintline{font-size:11.5px;color:var(--muted);line-height:1.7;padding:0 0 12px;margin-top:-4px}
.field{margin-bottom:13px}
.field label{display:block;font-size:12.5px;font-weight:900;margin-bottom:5px;color:var(--ink2)}
.field label .req{color:var(--gimeok2)}
.field input,.field select{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px;
  font-size:14px;outline:none;background:#fff;font-family:inherit}
.field input:focus,.field select:focus{border-color:var(--gimeok)}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.field.bad input{border-color:var(--gimeok2);background:#fff7f6}
.formmsg{font-size:12.5px;font-weight:800;color:var(--gimeok2);margin:0 0 12px;line-height:1.6}

/* 후기 사진 */
.rvphotos{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.rvphotos img{width:78px;height:78px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--grey)}
.norev{color:var(--muted)}

/* ── 후기 (쓰기 · 목록 · 사진 크게보기) ─────────────────────────
   ★ 후기는 실제 구매자만 씁니다. 아래는 그 화면의 옷일 뿐, 후기를 만들어 내지 않습니다. */
.rvitem .rvbadge{font-style:normal;background:#eef6ff;color:#1d4ed8;border-radius:999px;
  padding:1px 7px;margin-left:5px;font-weight:800;font-size:10.5px;white-space:nowrap}
.rvitem .rvprodlink{display:block;font-size:11.5px;color:var(--muted);font-weight:800;margin-top:5px}
.rvitem .rvreply{margin-top:10px;background:var(--soft);border-radius:11px;padding:11px;
  font-size:12.5px;color:#333;line-height:1.7;white-space:pre-wrap}
.rvitem .rvreply b{color:var(--gimeok)}
.rvitem .rvact{margin-top:9px;display:flex;gap:8px}
.rvitem .rvact button{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:6px 13px;font-size:11.5px;font-weight:800;color:#555}

/* 후기 요약(별점 분포) */
.rvsum{display:flex;gap:16px;align-items:center;background:var(--soft);border-radius:16px;
  padding:14px;margin-bottom:12px;flex-wrap:wrap}
.rvsum .big{font-size:30px;font-weight:900;line-height:1;color:var(--ink)}
.rvsum .big small{display:block;font-size:11.5px;color:var(--muted);font-weight:700;margin-top:5px}
.rvsum .bars{flex:1;min-width:170px}
.rvsum .barrow{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin-bottom:3px}
.rvsum .barrow .bg{flex:1;height:7px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.rvsum .barrow .bg span{display:block;height:100%;background:#ff5a1f;border-radius:999px}
.rvsum .barrow .n{width:26px;text-align:right;font-weight:800}

/* 후기 정렬 칩 */
.rvsort{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.rvsort button{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:7px 14px;font-size:12px;font-weight:800;color:#666}
.rvsort button.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* 후기 유도 박스 (0건일 때 · 구매자에게) */
.rvcta{border:1px dashed var(--band-line);background:var(--band);border-radius:16px;
  padding:16px;text-align:center;font-size:13px;color:#8a7a75;font-weight:700;line-height:1.7}
.rvcta b{color:var(--hot)}
.rvcta .btn{margin-top:11px}

/* 후기 쓰기 창 */
.rvmodal .modal-body{max-height:88vh;overflow-y:auto}
.rvprod{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:14px;padding:10px;margin-bottom:12px}
.rvprod .th{width:46px;height:46px;border-radius:11px;background:#fff;display:flex;align-items:center;
  justify-content:center;font-size:21px;flex:none;overflow:hidden;border:1px solid var(--line)}
.rvprod .th img{width:100%;height:100%;object-fit:cover}
.rvprod .nm{flex:1;min-width:0;font-size:13px;font-weight:800;line-height:1.45}
.rvstars{display:flex;align-items:center;gap:2px;margin-bottom:11px}
.rvstars button{border:none;background:none;font-size:31px;line-height:1;padding:0 2px;color:#d8dade;cursor:pointer}
.rvstars button.on{color:#ff5a1f}
.rvstars-n{margin-left:9px;font-size:13px;font-weight:900;color:var(--ink2)}
.rvmodal input[type=text],.rvmodal #rvSubject,.rvmodal textarea{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13.5px;
  font-family:inherit;background:#fff;box-sizing:border-box;margin-bottom:9px;outline:none}
.rvmodal textarea{resize:vertical;line-height:1.7}
.rvmodal input:focus,.rvmodal textarea:focus{border-color:var(--gimeok)}
.rvphotobar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.rvaddphoto{border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:12.5px;
  font-weight:800;background:#fff;cursor:pointer;white-space:nowrap}
.rvhint{font-size:11.5px;color:var(--muted);font-weight:700}
.rvthumbs{display:flex;gap:7px;flex-wrap:wrap}
.rvthumbs:not(:empty){margin-bottom:10px}
.rvthumb{position:relative;width:70px;height:70px}
.rvthumb img{width:100%;height:100%;object-fit:cover;border-radius:11px;border:1px solid var(--line)}
.rvthumb button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(17,17,17,.86);color:#fff;font-size:11px;line-height:22px;padding:0}
.rvreward{background:var(--band);border:1px solid var(--band-line);border-radius:12px;padding:11px;
  font-size:12.5px;color:#8a7a75;font-weight:700;margin-bottom:9px;line-height:1.6}
.rvreward b{color:var(--hot);font-weight:900}
.rverr{background:#fff1f0;border:1px solid #fecaca;color:#b91c1c;border-radius:12px;padding:11px;
  font-size:12.5px;font-weight:800;margin-bottom:9px;line-height:1.6}

/* 사진 크게보기 */
.photoview{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.9);
  display:flex;align-items:center;justify-content:center}
.photoview img{max-width:94vw;max-height:82vh;object-fit:contain;border-radius:8px}
.photoview .pv-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;
  border:none;background:rgba(255,255,255,.16);color:#fff;font-size:17px}
.photoview .pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;
  border:none;background:rgba(255,255,255,.14);color:#fff;font-size:30px;border-radius:12px}
.photoview .pv-nav.prev{left:10px}
.photoview .pv-nav.next{right:10px}
.photoview .pv-n{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:12.5px;font-weight:800;background:rgba(0,0,0,.45);border-radius:999px;padding:6px 14px}

/* 메인 포토 후기 띠 */
/* [담당: 탭4종 + 가로 스와이프] .rail 과 같은 이유로 proximity·contain·user-drag 를 맞췄습니다.
   후기 카드도 <a> 라 끌면 링크 드래그가 시작돼 손가락으로 밀리지 않았습니다. */
.photorail{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 6px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-padding-left:16px;
  scrollbar-width:none}
.photorail::-webkit-scrollbar{display:none}
.photorail .pcard{flex:0 0 150px;scroll-snap-align:start;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:#fff;text-decoration:none;color:inherit;
  -webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.photorail .pcard .im{width:100%;aspect-ratio:1/1;background:var(--grey) center/cover no-repeat;display:block}
.photorail .pcard .bd{display:block;padding:9px 10px 11px}
.photorail .pcard .st{display:block;font-size:11.5px;font-weight:900;color:#ff5a1f}
.photorail .pcard .tx{font-size:12px;font-weight:700;line-height:1.5;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.photorail .pcard .mt{display:block;font-size:10.5px;color:var(--muted);margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 마이페이지 — 후기 쓸 수 있는 주문 */
.rvtodo{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:16px;
  padding:12px;margin:0 16px 10px}
.rvtodo .th{width:48px;height:48px;border-radius:12px;background:var(--soft);flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:21px}
.rvtodo .th img{width:100%;height:100%;object-fit:cover}
.rvtodo .i{flex:1;min-width:0}
.rvtodo .n{font-size:12.5px;font-weight:800;line-height:1.45}
.rvtodo .c{font-size:11px;color:var(--muted);margin-top:3px}
.rvtodo button{border:none;background:var(--ink);color:#fff;border-radius:999px;padding:9px 14px;
  font-size:11.5px;font-weight:900;white-space:nowrap}
.pointlog{margin:0 16px}
.pointlog .prow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-bottom:1px solid #f1f2f4;padding:11px 2px;font-size:12.5px}
.pointlog .prow .r{color:#444;font-weight:700}
.pointlog .prow .d{font-size:10.5px;color:var(--muted);margin-top:2px}
.pointlog .prow .a{font-weight:900;white-space:nowrap}
.pointlog .prow .a.plus{color:#0f766e}
.pointlog .prow .a.minus{color:#b91c1c}

/* ── 반응형: 가로스크롤 0 보장 ── */
html,body{overflow-x:hidden;max-width:100%}
.wrap{overflow-x:clip}
.doc img,.doc table{max-width:100%}
pre,code{word-break:break-word;white-space:pre-wrap}

/* 태블릿 */
@media (min-width:600px){
  .doc{padding:4px 24px 48px}
  .rvphotos img{width:96px;height:96px}
  .photorail .pcard{flex:0 0 176px}
}

/* 데스크톱에서도 깨지지 않게 */
@media (min-width:760px){
  body{background:#eef0f3}
  :root{--wrap:900px}
  .wrap{max-width:900px}
  .rail > .card{width:calc((100% - 36px) / 3.2)}
  .grid2{grid-template-columns:repeat(4,1fr)}
  .gazit-hero h1{font-size:46px}
  .gazit-hero{border-radius:34px;padding:56px 28px}
  .gazit-title h2{font-size:30px}
  .gazit-social{grid-template-columns:repeat(4,1fr)}
  .index_ban_500{grid-template-columns:repeat(3,1fr)}
  .tabbar{max-width:900px}
  .doc{padding:8px 40px 56px;max-width:760px;margin:0 auto}
  .doc h2{font-size:18px}
  .doc p,.doc li{font-size:13.5px}
  footer#footer{padding:30px 40px 90px}
  footer#footer .frow > span{flex:0 0 132px}
  .logo svg{max-width:none}
}

/* ══ [담당: 예약구매 · 재입고 알림신청] 알림신청 창 ══════════════
   손님이 성함·연락처를 넣는 창입니다 (public/restock.js 가 띄웁니다).
   ★ 375px 세로 화면 기준으로 잡았습니다 — 아래에서 올라오는 시트 모양이라
     키보드가 올라와도 [알림 신청하기] 버튼이 가려지지 않습니다. */
.rsmask{position:fixed;inset:0;z-index:300;background:rgba(17,17,17,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:0}
.rspop{width:100%;max-width:var(--wrap,520px);background:#fff;border-radius:22px 22px 0 0;
  max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 -10px 30px rgba(0,0,0,.24);animation:rsup .22s ease-out}
@keyframes rsup{from{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}
.rshead{display:flex;align-items:center;gap:8px;padding:16px 18px 10px;border-bottom:1px solid var(--line)}
.rshead b{font-size:16px;font-weight:900;flex:1}
.rsx{border:none;background:transparent;font-size:26px;line-height:1;color:var(--muted);
  width:40px;height:40px;flex:none}
.rsbody{padding:14px 18px 6px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rsprod{font-size:13.5px;font-weight:800;line-height:1.45;color:var(--ink);
  background:var(--soft);border-radius:12px;padding:10px 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rslead{margin:10px 0 14px;font-size:13px;color:var(--muted);line-height:1.6}
.rslb{display:block;font-size:12.5px;font-weight:800;color:var(--ink2);margin:12px 0 6px}
.rsin{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;font-size:16px;font-weight:700;background:#fff;color:var(--ink)}
.rsin:focus{outline:none;border-color:var(--gimeok);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.rsin[readonly]{background:var(--soft);color:var(--ink2)}
.rsalt{margin-top:7px;border:none;background:transparent;color:var(--gimeok);
  font-size:12.5px;font-weight:800;padding:4px 0;text-decoration:underline}
.rsagree{display:flex;align-items:flex-start;gap:9px;margin:16px 0 8px;font-size:13px;
  font-weight:700;line-height:1.5;color:var(--ink)}
.rsagree input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--gimeok)}
.rsagree b{color:var(--gimeok)}
.rsnote{font-size:11.5px;line-height:1.7;color:var(--muted);background:var(--soft);
  border-radius:12px;padding:10px 12px}
.rsnote b{color:var(--ink2);font-weight:800}
.rserr{display:none;margin-top:10px;font-size:12.5px;font-weight:800;line-height:1.55;
  color:#b91c1c;background:#fee2e2;border-radius:11px;padding:10px 12px}
.rserr.on{display:block}
.rsfoot{display:flex;gap:9px;padding:12px 18px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.rsfoot .btn{flex:1;margin:0}
.rsfoot .btn.ghost{flex:0 0 92px}
@media (min-width:760px){
  .rsmask{align-items:center}
  .rspop{border-radius:22px;max-width:460px}
}

/* 손으로 끌어서 미는 띠 (index.html makeSwipe) */
.rail,.photorail,.gazit-tabs{cursor:grab}
.rail.dragging,.photorail.dragging,.gazit-tabs.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rail.dragging a,.photorail.dragging a,.rail.dragging img,.photorail.dragging img{pointer-events:none}