/* 시안 C — 앱형 대담 (2026-10-24 작성)
   수트 글꼴 굵게 + 진갈색 머리띠 + 큰 네모 버튼 + 목록마다 '바로 구매'. 쇼핑 앱처럼 빠르게 사는 느낌. */
/* 2026-10-25 대표님 요청: 글꼴을 바깥 서버(jsdelivr) 대신 가게 안에서 불러온다(SUIT, OFL 사용 허가 — static/fonts/SUIT-LICENSE.txt) */
@font-face { font-family: 'SUIT Variable'; font-weight: 100 900; font-display: swap; src: url('/static/fonts/SUIT-Variable.woff2') format('woff2-variations'), url('/static/fonts/SUIT-Variable.woff2') format('woff2'); }
:root {
  --bg: #FFFBF0; --outer: #F3E6C4; --surface: #FFFFFF; --surface2: #FFF3D1;
  --text: #33200D; --sub: #8B7258; --line: #F0E2C4;
  --honey: #FFB800; --honey-deep: #F29D00; --primary: #FFB800; --on-primary: #2B1A0A;
  --accent: #F0532B; --logo-drop: #33200D;
  --r-card: 18px; --r-btn: 14px; --r-chip: 12px; --r-thumb: 14px; --r-input: 14px; --r-badge: 6px;
  --font: 'SUIT Variable', SUIT, 'Pretendard Variable', 'Malgun Gothic', sans-serif;
  --font-head: 'SUIT Variable', SUIT, 'Malgun Gothic', sans-serif; --head-weight: 900;
  --shadow: 0 2px 12px rgba(90, 60, 10, .07);
  --btn-h: 58px;
  --chip-on: #33200D; --chip-on-text: #FFD15C;
  --notice-bg: #FFB800; --notice-text: #2B1A0A;
  --top-bg: #33200D; --brand-text: #FFE7A3;
  --coupon-bg: #33200D; --coupon-text: #FFF3D1;
  --side-bg: #33200D; --side-text: #FFF3D1; --side-on-bg: #FFB800; --side-on-text: #2B1A0A; --bar: #FFE6A6;
  --total: #F0532B;
}
.top { color: #FFE7A3; }
.top .logo-mark { --honey: #FFB800; --logo-drop: #33200D; }
.top-title { color: #FFF3D1; }
.detail-name, .sec-title { font-weight: 900; }
.price strong { font-weight: 900; }
.btn { font-weight: 800; }

.hero { background: #33200D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17z' fill='none' stroke='%23FFB800' stroke-opacity='.13' stroke-width='2'/%3E%3C/svg%3E") repeat; background-size: 42px 48px; color: #FFF3D1; padding: 20px 16px 64px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; padding: 5px 10px; border-radius: 8px; background: rgba(255, 184, 0, .16); color: #FFD15C; font-size: 12.5px; font-weight: 800; }
.hero-eyebrow .ico { width: 14px; height: 14px; }
.hero h2 { font-size: 38px; line-height: 1.12; font-weight: 900; letter-spacing: -.04em; margin: 0 0 8px; color: #FFB800; }
.hero-sub { margin: 0 0 18px; font-size: 15px; opacity: .85; }
.hero-pick { display: flex; gap: 14px; align-items: center; background: #fff; color: var(--text); border-radius: 18px; padding: 12px; }
.hero-pick > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-pick em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent); }
.hero-pick b { font-size: 14.5px; line-height: 1.35; }
.quick { margin: -44px 16px 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: #fff; border-radius: 18px; padding: 14px 8px; box-shadow: 0 8px 24px rgba(51, 32, 13, .12); }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; }
.quick .ico { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--surface2); color: var(--honey-deep); }
.tabbar a.on { color: var(--text); }
.prow .pcard-name { font-size: 15px; }
.summary .total strong { font-size: 24px; }
.foot .logo-text { color: var(--text); }
.hero-pick .thumb-brand { display: none; }
/* 2026-10-24 대표님: 첫 화면 위쪽을 시안 A의 꿀단지 배너 모양으로, 색은 시안 C(진갈색·진한 꿀색)에 맞춤 */
.hero { padding-top: 16px; }
.hero-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 4px; margin-bottom: 14px; padding: 22px 18px 20px; border-radius: 22px; background: linear-gradient(150deg, #FFD54A, #FFB800); color: #33200D; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.hero-banner::after { content: ""; position: absolute; right: -34px; bottom: -44px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.hero-banner .hero-text { flex: 1; position: relative; z-index: 1; min-width: 0; }
.hero-banner .hero-eyebrow { display: inline-block; margin: 0 0 10px; padding: 4px 11px; border-radius: 99px; background: #33200D; color: #FFD15C; font-size: 12px; font-weight: 800; }
.hero-banner h2 { margin: 0 0 6px; font-size: 25px; line-height: 1.25; font-weight: 900; letter-spacing: -.04em; color: #33200D; white-space: nowrap; }
.hero-banner .hero-sub { margin: 0 0 14px; font-size: 13.5px; color: #5A3412; opacity: 1; }
.hero-btn { background: #33200D; color: #FFD15C; height: 42px; padding: 0 16px; border-radius: 12px; }
.hero-btn .ico { width: 16px; height: 16px; }
.hero-banner .hero-jar { width: 92px; flex: none; position: relative; z-index: 1; }
.hero-pick .thumb { --tw: 84px; }
/* 2026-10-24 대표님: 배너 아래 안내 3칸을 진갈색 배경 끝에 걸치게 (빠른 메뉴 자리) */
.hero + .trust { margin-top: -44px; position: relative; padding-top: 0; }
.hero + .trust li { box-shadow: 0 8px 24px rgba(51, 32, 13, .12); }
/* 2026-10-24 대표님: 진갈색 배경이 아래로 갈수록 크림색으로 자연스럽게 바뀌게 */
.hero { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17z' fill='none' stroke='%23FFB800' stroke-opacity='.13' stroke-width='2'/%3E%3C/svg%3E") repeat top / 42px 48px,
  linear-gradient(180deg, #33200D 0%, #33200D 58%, #6E4A22 76%, #D9B77A 90%, #FFFBF0 100%);
  padding-bottom: 72px; }
/* 2026-10-24 대표님: 상품 목록 글씨 조금 작게 */
.prow .pcard-name { font-size: 14px; }
.prow .price strong { font-size: 15.5px; }
.prow .price-off { font-size: 14.5px; }
.prow .price del { font-size: 12px; }
.prow .badge { font-size: 11px; padding: 2px 6px; }
/* 벌집 무늬도 아래로 갈수록 흐려지게 (무늬가 크림색 위에서 뚝 끊기지 않게) */
.hero { position: relative; background: linear-gradient(180deg, #33200D 0%, #33200D 58%, #6E4A22 76%, #D9B77A 90%, #FFFBF0 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17z' fill='none' stroke='%23FFB800' stroke-opacity='.13' stroke-width='2'/%3E%3C/svg%3E") repeat top / 42px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 85%); mask-image: linear-gradient(180deg, #000 55%, transparent 85%); }
.hero > * { position: relative; }