/* ===== 시안 C — 화이트 & 베이지 (White & Beige)
   흰 바탕을 기본 면으로 쓰고, 베이지를 포인트(구분 띠·태그·강조)로만 얹는다.
   원형 썸네일과 필 버튼은 그대로 유지한 가장 밝고 깨끗한 안. ===== */
:root {
  --page: #E8E1D5;              /* 폰 바깥 뷰어 배경 — 흰 화면이 떠 보이도록 베이지 */
  --vw-bar: rgba(255,255,255,.94);
  --vw-line: #E6DFD2;
  --vw-seg: #F4EEE4;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface2: #F7F2E8;          /* 베이지 포인트 면 */
  --line: #EFE8DB;
  --line-strong: #D8CDB8;

  --ink: #332E27;
  --ink2: #6B6459;
  --ink3: #A09889;

  --brand: #6E6151;             /* 진한 모카 — 버튼/강조 텍스트 (가독성 확보) */
  --brand-on: #FFFFFF;
  --brand-soft: #F3EADA;
  --accent: #A4885B;            /* 베이지 포인트 */
  --star: #C4A76F;

  --art-line: #7E756A;
  --ph-bg: #F4EEE3;
  --ph-ink: #C0B6A2;

  --promo-bg: #F1E7D5;          /* 프로모 카드도 베이지 면으로 */
  --promo-ink: #3A332A;
  --promo-key: #9C8052;
  --promo-sub: #7B7263;
  --promo-chip: #FFFFFF;
  --promo-chip-ink: #6E6151;

  --map-bg: #F7F3EB;
  --map-line: #EDE6D9;
  --map-road: #FFFFFF;
  --map-water: #E9EAE4;
  --map-green: #EFEADC;

  --warn-bg: #F8F1E1;
  --warn-ink: #806B45;

  --frame-line: #E2DACB;
  --frame-notch: #FFFFFF;

  --r-card: 16px;
  --r-btn: 999px;
  --r-tag: 999px;
  --r-thumb: 50%;
  --r-cat: 50%;
  --r-sheet: 20px;
  --r-chk: 50%;
  --r-pin: 999px;

  --card-shadow: 0 1px 3px rgba(90,70,40,.05);
  --card-border: 0;

  --font: Pretendard;
  --font-head: Pretendard;
}
/* 시안 C 고유 — 흰 면 + 베이지 포인트, 원형 썸네일 */
.thumb--wide, .photo, .photoadd { border-radius: 14px; }
/* 바탕이 흰색이라 카드는 그림자 대신 베이지 헤어라인으로 구분 */
.card, .shop, .course { box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); }
.bk--live { box-shadow: var(--card-shadow), inset 0 0 0 1.5px var(--brand); }
.cat__i { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line); }
.cat.is-on .cat__i { background: var(--brand); box-shadow: none; }
.catgrid, .promo { background: var(--bg); }
/* 섹션 사이는 베이지 띠로 끊어준다 */
.quick { background: var(--surface); border-bottom: 8px solid var(--surface2); }
.sec__h h2 { position: relative; padding-left: 12px; }
.sec__h h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
                     width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.chip, .tag { background: #F2E7D4; color: #7A6238; }
.tag--ghost { background: var(--surface2); color: var(--ink3); }
.tag--pick { background: var(--surface); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line); }
.tag--pick.is-on { background: #F2E7D4; color: #7A6238; box-shadow: inset 0 0 0 1.3px var(--accent); }
.badge--on { background: var(--accent); color: var(--brand-on); }
.day.is-on { background: #F2E7D4; }
.day.is-on b, .day.is-on i { color: #7A6238; }
.tabs__i.is-on::after { background: var(--brand); border-radius: 999px; }
.btn--primary { box-shadow: none; }