@charset "utf-8";
/* ==========================================================================
   이연순 명인떡 — 브랜드 홈페이지 스타일시트
   제작: 소통마케팅센터
   톤: 순백 / 미니멀 / 플랫 — 창억떡 레퍼런스 반영
   ========================================================================== */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  --white:      #FFFFFF;
  --bg:         #FFFFFF;
  --bg-section: #F8F9FC;
  --bg-warm:    #FDF8F3;
  --ink:        #222222;
  --ink-deep:   #000000;
  --sub:        #555555;
  --muted:      #6A6A6A;  /* 색 배경 위에서도 4.5:1 유지되도록 조정 */
  --light:      #999999;
  --line:       #EEEEEE;
  --line-dark:  #DDDDDD;

  /* 브랜드 컬러 — 체험관 간판 로고의 자주(플럼) 계열
     ⚠️ 실제 로고 색과 다르면 이 3줄만 고치면 사이트 전체에 반영됩니다 */
  --accent:     #713F55;
  --accent-deep:#4F2A3B;
  --accent-bg:  #F7EFF3;

  /* 식감·온기용 보조색 (가격·계절 등) */
  --gold:       #8A5E2B;
  --gold-bg:    #FBF4EA;
  --point:      #D4883A;
  --point-bg:   #FFF5EA;
  --green:      #5E7050;
  --green-bg:   #EEF2EA;

  /* 섹션별 배경 — 떡 종류에 맞춘 색 리듬 */
  --tint-danja: #F4F0E4;   /* 당귀잎 · 승검초단자 */
  --tint-season:#F3F6F1;   /* 제철 */
  --tint-order: #FBF4EA;   /* 주문떡 */
  --tint-exp:   #F7EFF3;   /* 체험관 */
  --tint-cafe:  #F6F1EC;   /* 떡카페 */

  --font-sans:  "Noto Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont,
                "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-title: "Noto Sans KR", var(--font-sans);

  --wrap:       1120px;
  --wrap-narrow: 680px;
  --header-h:   56px;
  --tabbar-h:   56px;
  --radius:     12px;
  --radius-sm:  8px;
}

/* ---------- 2. 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.7;
  letter-spacing: -.01em; word-break: keep-all; overflow-wrap: break-word;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; line-height: 1.35; letter-spacing: -.02em; }
p { margin: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 8px;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- 3. 레이아웃 ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding: 32px 0; }
.section--lg { padding: 48px 0; }
.section--bg { background: var(--bg-section); }
.section--warm { background: var(--bg-warm); }
.center { text-align: center; }

.section-header { padding: 0 16px 16px; }
.section-title {
  font-size: 19px; font-weight: 700; text-align: center; line-height: 1.4;
}
.section-sub {
  font-size: 13px; color: var(--muted); text-align: center; margin-top: 6px;
}
.section-divider { width: 100%; height: 8px; background: var(--bg-section); }

/* 섹션별 배경 색 리듬 — 떡은 눈으로도 먹는다 */
#products   { background: var(--tint-danja); }
#seasonal   { background: var(--tint-season); }
#order      { background: var(--tint-order); }
#experience { background: var(--tint-exp); }
#cafe       { background: var(--tint-cafe); }

/* ---------- 4. 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 20px;
  border-radius: 8px; font-size: 14px; font-weight: 700;
  transition: background-color .15s, border-color .15s;
}
.btn:active { opacity: .85; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #333; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); }
.btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line-dark); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 6px; }
.btn--full { width: 100%; }
.btn--round { border-radius: 999px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.center .btn-row { justify-content: center; }

/* ---------- 5. 헤더 (창억떡 PC: 로고 좌 + 검색 중앙 + 우측 아이콘) ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--line);
}
.header__row1 {
  height: var(--header-h); display: flex; align-items: center;
  padding: 0 16px; gap: 12px; max-width: var(--wrap); margin: 0 auto;
}
.logo { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.logo__mark { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-deep); white-space: nowrap; }
.logo__sub { font-size: 10px; color: var(--accent); font-weight: 600; letter-spacing: .08em; display: none; }

.header__search { flex: 1; min-width: 0; position: relative; display: none; }
.header__right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* 모바일: 검색 아이콘만 */
.search-toggle {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 8px; font-size: 18px;
}

/* 검색바 */
.search-box {
  position: relative; width: 100%;
}
.search-input-wrap {
  display: flex; align-items: center; height: 42px;
  border: 2px solid var(--line-dark); border-radius: 8px;
  background: #fff; overflow: hidden; transition: border-color .15s;
}
.search-input-wrap:focus-within { border-color: var(--accent); }
.search-input {
  flex: 1; height: 100%; border: 0; outline: 0; padding: 0 14px;
  font-size: 14px; font-family: inherit; color: var(--ink);
  background: transparent;
}
.search-input::placeholder { color: var(--light); }
.search-btn {
  flex: 0 0 42px; height: 100%; display: grid; place-items: center;
  font-size: 18px; color: var(--muted); transition: color .15s;
}
.search-btn:hover { color: var(--ink); }

/* 검색 드롭다운 (창억떡 동일) */
.search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line-dark); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  padding: 0; z-index: 110;
  display: none; overflow: hidden;
}
.search-dropdown.is-open { display: flex; }

.search-dropdown__left {
  flex: 1; padding: 20px;
  border-right: 1px solid var(--line);
}
.search-dropdown__right {
  flex: 0 0 200px; padding: 20px;
}

.search-dropdown__title {
  font-size: 12px; font-weight: 700; color: var(--muted);
  margin-bottom: 12px; letter-spacing: .02em;
}

/* 카테고리 태그 */
.search-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.search-tag {
  display: inline-block; padding: 7px 16px;
  border: 1px solid var(--line-dark); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--sub);
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap; cursor: pointer;
}
.search-tag:hover, .search-tag.is-active {
  border-color: var(--accent); color: var(--accent); background: var(--accent-bg);
}

/* 인기검색어 */
.popular-list { display: grid; gap: 0; }
.popular-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; font-size: 14px; color: var(--ink);
  transition: color .15s; cursor: pointer;
}
.popular-item:hover { color: var(--accent); }
.popular-rank {
  flex: 0 0 20px; font-size: 13px; font-weight: 800;
  color: var(--accent); text-align: center;
}
.popular-rank:nth-child(1) { color: var(--accent); }
.popular-text { font-weight: 500; }

/* 모바일 전체화면 검색 */
.search-fullscreen {
  position: fixed; inset: 0; z-index: 200;
  background: #fff; padding: 0;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .2s ease;
}
.search-fullscreen.is-open { transform: none; opacity: 1; pointer-events: auto; }
.search-fs__header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.search-fs__input {
  flex: 1; height: 40px; border: 0; outline: 0;
  font-size: 16px; font-family: inherit; color: var(--ink);
}
.search-fs__input::placeholder { color: var(--light); }
.search-fs__close {
  flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--muted);
  padding: 8px;
}
.search-fs__body { padding: 20px 16px; overflow-y: auto; max-height: calc(100vh - 62px); }
.search-fs__section { margin-bottom: 24px; }
.search-fs__title {
  font-size: 13px; font-weight: 700; color: var(--muted);
  margin-bottom: 12px; letter-spacing: .02em;
}

/* 햄버거 */
.nav-toggle {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 1px;
  position: relative; transition: .2s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: var(--ink); border-radius: 1px; transition: .2s;
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* PC 네비 (하단 서브바) */
.nav-bar {
  display: none; border-bottom: 1px solid var(--line);
  background: #fff;
}
.nav-bar__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; gap: 0; height: 44px;
}
.nav__link {
  display: block; padding: 10px 18px; font-size: 15px; font-weight: 600;
  color: var(--sub); transition: color .15s; white-space: nowrap;
  position: relative;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink-deep); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; bottom: 0; left: 18px; right: 18px;
  height: 2px; background: var(--ink-deep); border-radius: 1px;
}

/* 모바일 드로어 */
.drawer {
  position: fixed; inset: var(--header-h) 0 0; z-index: 99;
  background: #fff; padding: 0;
  transform: translateX(-100%); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.drawer.is-open { transform: none; opacity: 1; pointer-events: auto; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; font-size: 16px; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.drawer__link span:last-child { color: var(--light); font-size: 13px; }
.drawer__meta { padding: 20px; color: var(--muted); font-size: 13px; line-height: 2; }

/* ---------- 6. 히어로 배너 슬라이더 (창억떡 동일 구조) ---------- */
.hero { position: relative; overflow: hidden; background: #f5f0eb; }
.hero__slider { position: relative; width: 100%; overflow: hidden; }
.hero__slides {
  display: flex; transition: transform 0.4s ease;
  will-change: transform;
}
.hero__slide {
  flex: 0 0 100%; width: 100%; position: relative;
  height: 280px;
}
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}

/* 슬라이드 내 텍스트 오버레이 */
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,0) 100%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px 24px;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  background: rgba(255,255,255,.93); color: var(--accent);
  padding: 5px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  margin-bottom: 12px; backdrop-filter: blur(4px);
}
.hero__title {
  font-size: clamp(22px, 5.5vw, 42px); font-weight: 900; color: #fff;
  line-height: 1.3; text-shadow: 0 2px 12px rgba(0,0,0,.25);
  max-width: 520px;
}
.hero__title em { font-style: normal; color: #FFD89B; }
.hero__desc {
  font-size: clamp(13px, 3.2vw, 16px); color: #fff; margin-top: 10px;
  line-height: 1.6; text-shadow: 0 1px 6px rgba(0,0,0,.25);
  max-width: 440px;
}
.hero__cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.5);
  color: #fff; padding: 10px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 700; backdrop-filter: blur(4px);
  transition: background .2s, border-color .2s; align-self: flex-start;
}
.hero__cta:hover { background: rgba(255,255,255,.3); border-color: #fff; }

/* 밝은 사진용 오버레이 (창억떡 스타일: 좌측 어두운 텍스트 + 외곽선 버튼) */
/* 사진을 덮는 흰 막은 두지 않음 — 가독성은 글자 자체의 흰 테두리로 해결
   (창억떡은 문구가 이미지에 인쇄돼 있어 막이 필요 없는 구조) */
.hero__overlay--light { background: none; }
.hero__overlay--light .hero__badge {
  background: rgba(255,255,255,.9); color: var(--accent-deep);
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
/* 흰 막이 없으므로 글자 자체에 흰 테두리를 둬 어떤 배경에서도 읽히게
   (막과 달리 글자 주변만 밝히므로 사진 색이 그대로 살아남) */
.hero__overlay--light .hero__title,
.hero__overlay--light .hero__desc {
  text-shadow:
     1px  1px 0 rgba(255,255,255,.9), -1px  1px 0 rgba(255,255,255,.9),
     1px -1px 0 rgba(255,255,255,.9), -1px -1px 0 rgba(255,255,255,.9),
     0 0 6px rgba(255,255,255,1), 0 0 16px rgba(255,255,255,.95);
}
.hero__overlay--light .hero__title { color: var(--ink-deep); }
.hero__overlay--light .hero__title em { color: var(--accent); }
.hero__overlay--light .hero__desc { color: var(--ink); }
.hero__overlay--light .hero__cta {
  background: rgba(255,255,255,.92); border: 1px solid var(--ink);
  border-radius: 2px; color: var(--ink); backdrop-filter: none;
  font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.hero__overlay--light .hero__cta:hover {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

/* 좁은 화면: 3:1 배너가 가로로 잘려 피사체 위에 글이 올라감
   → 텍스트를 하단으로 내리고 세로 스크림으로 가독성 확보 */
@media (max-width: 719px) {
  .hero__slide { height: 380px; }
  .hero__overlay { justify-content: flex-end; padding: 24px 20px 62px; }
}

/* 좌우 화살표 (창억떡 동일) */
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.7); backdrop-filter: blur(4px);
  display: grid; place-items: center;
  font-size: 18px; color: var(--ink); border: 0; padding: 0; cursor: pointer;
  opacity: 0; transition: opacity .25s, background .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.hero:hover .hero__arrow { opacity: 1; }
.hero__arrow:hover { background: rgba(255,255,255,.95); }
.hero__arrow--prev { left: 12px; }
/* 우측은 플로팅 SNS 레일(.sns-float)이 쓰므로 그만큼 안쪽으로 */
.hero__arrow--next { right: 64px; }

/* 하단 인디케이터 (도트 + 카운터) */
.hero__indicator {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px);
  border-radius: 999px; padding: 6px 14px;
}
.hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.45); border: 0; padding: 0; cursor: pointer;
  transition: background .25s, width .25s, border-radius .25s;
}
.hero__dot.is-active { background: #fff; width: 22px; border-radius: 4px; }
.hero__counter {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8);
  margin-left: 4px; letter-spacing: .02em; white-space: nowrap;
}

/* 자동재생 일시정지 */
.hero__pause {
  position: absolute; bottom: 16px; right: 64px; z-index: 5;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.3); backdrop-filter: blur(4px);
  display: grid; place-items: center;
  font-size: 12px; color: #fff; border: 0; cursor: pointer;
  opacity: 0; transition: opacity .25s;
}
.hero:hover .hero__pause { opacity: 1; }

/* 플로팅 SNS 버튼 (화면 우측 고정 — 스크롤해도 따라옴) */
.sns-float {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 8px;
}
/* 평소엔 아이콘만 — 본문을 가리지 않도록. 마우스/포커스 시 라벨 펼침 */
.sns-float__btn {
  display: flex; align-items: center; gap: 0;
  padding: 6px; border-radius: 12px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  text-decoration: none;
  transition: gap .2s ease, box-shadow .2s, padding .2s ease;
}
.sns-float__btn:hover, .sns-float__btn:focus-visible {
  gap: 8px; padding-right: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.sns-float__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; flex: 0 0 32px;
}
.sns-float__icon--insta {
  background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4);
}
.sns-float__icon--youtube {
  background: #FF0000;
}
/* 네이버 원색(#03C75A)은 흰 글자 대비 2.98 로 미달 → 진하게 조정 */
.sns-float__icon--blog {
  background: #02914A; color: #fff;
  font-size: 16px; font-weight: 900; font-family: inherit;
}
.sns-float__label {
  font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .2s ease, opacity .15s ease;
}
.sns-float__btn:hover .sns-float__label,
.sns-float__btn:focus-visible .sns-float__label { max-width: 90px; opacity: 1; }

/* 모바일: 아이콘만 (터치에는 hover가 없으므로 라벨 고정 숨김) */
@media (max-width: 600px) {
  .sns-float { right: 10px; gap: 6px; }
  .sns-float__btn { padding: 6px; border-radius: 10px; }
  .sns-float__btn:hover { padding-right: 6px; gap: 0; }
  .sns-float__label { display: none; }
  .sns-float__icon { width: 28px; height: 28px; border-radius: 7px; }
  .sns-float__icon svg { width: 16px; height: 16px; }
  .sns-float__icon--blog { font-size: 14px; }
}

/* 슬라이드 미디어 (사진 / 영상 공통) */
.hero__slide > img,
.hero__slide > video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  /* 떡은 눈으로도 먹는다 — 색이 선명하게 보이도록 소폭 보정 */
  filter: saturate(1.14) contrast(1.04);
}

/* 미디어 준비 전 — 슬라이드별 색감으로 대체 */
.hero__slide.is-pending > img,
.hero__slide.is-pending > video { display: none; }
.hero__slide--t1 { background: linear-gradient(135deg, #8A6E3F 0%, #C6A468 100%); }
.hero__slide--t2 { background: linear-gradient(135deg, #4E5F44 0%, #869A73 100%); }
.hero__slide--t3 { background: linear-gradient(135deg, #8C4A45 0%, #C88676 100%); }
.hero__slide--t4 { background: linear-gradient(135deg, #6B4A34 0%, #B08A62 100%); }
.hero__slide--t5 { background: linear-gradient(135deg, #3F5464 0%, #7C97A8 100%); }

/* 준비 중 표시 태그 (우측 상단 — 좌측 정렬 카피와 겹치지 않는 자리) */
.hero__shot {
  position: absolute; right: 64px; top: 12px; z-index: 6;
  display: none; align-items: center; gap: 6px;
  max-width: calc(100% - 200px);
  background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
  color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.25);
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero__slide.is-pending .hero__shot { display: inline-flex; }
/* 태그 자리 확보 — 준비중일 때만 오버레이 콘텐츠를 아래로 */
.hero__slide.is-pending .hero__overlay { padding-top: 68px; }

/* ---------- 7. 카테고리 아이콘 바 (가운데 정렬) ---------- */
.icon-bar {
  padding: 20px 0; overflow: visible;
  border-bottom: 1px solid var(--line);
}
.icon-scroll {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 0; padding: 0 12px;
  max-width: 960px; margin: 0 auto;
}
.icon-item {
  flex: 0 0 auto; width: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 0; text-decoration: none;
}
.icon-item__img {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-section); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 22px;
  transition: background .15s, border-color .15s, transform .15s;
}
.icon-item:hover .icon-item__img,
.icon-item:active .icon-item__img { background: var(--accent-bg); border-color: var(--accent); transform: translateY(-2px); }
.icon-item__label { font-size: 11px; font-weight: 600; color: var(--sub); text-align: center; white-space: nowrap; }
.icon-bar__track { display: none; }
.icon-bar__thumb { display: none; }

/* ---------- 8. 상품 카드 / 그리드 (창억 스타일: 플랫, 2열) ---------- */
.prd-grid {
  display: flex; flex-wrap: wrap; padding: 0 10px;
}
.prd-item {
  width: calc(50% - 7px); margin-right: 14px; margin-bottom: 20px;
  display: flex; flex-direction: column;
}
.prd-item:nth-child(2n) { margin-right: 0; }
.prd-item__media { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: var(--bg-section); }
.prd-item__media img { width: 100%; height: 100%; object-fit: cover; }
.prd-item__badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 4px;
}
.prd-item__body { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 3px; }
.prd-item__name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.prd-item__desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.prd-item__price { font-size: 16px; font-weight: 800; color: var(--ink-deep); margin-top: 4px; }
.prd-item__price small { font-size: 12px; font-weight: 500; color: var(--muted); }
.prd-item__buy {
  display: block; width: 100%; height: 36px; margin-top: 8px;
  background: var(--ink); color: #fff; border-radius: 6px;
  font-size: 13px; font-weight: 700; text-align: center; line-height: 36px;
  transition: background .15s;
}
.prd-item__buy:hover { background: #333; }

/* ---------- 8-2. 승검초단자 히어로 ---------- */
.section--warm { background: var(--bg-warm); }
.danja-hero {
  padding: 0 16px; display: flex; flex-direction: column; gap: 24px;
}
.danja-hero__media {
  position: relative; width: 100%; aspect-ratio: 4/3;
  border-radius: var(--radius); overflow: hidden; background: var(--bg-section);
}
.danja-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.danja-hero__name { font-size: 20px; font-weight: 900; color: var(--ink); margin-bottom: 8px; }
.danja-hero__desc { font-size: 13px; color: var(--sub); line-height: 1.8; margin-bottom: 16px; }
/* 보관 온도 배지 (냉동 / 상온) — 상품명에 "(냉동)" 을 붙이면 단서처럼 읽혀
   정보성 아이콘으로 표시해 거부감을 줄임 */
.temp-badge {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; color: #fff; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.temp-badge__ico { font-size: 17px; line-height: 1; }
.temp-badge__label { font-size: 11px; font-weight: 800; letter-spacing: -.02em; }
/* 흰 글씨 4.5:1 을 만족하도록 레퍼런스보다 진하게 */
.temp-badge--cold { background: #3D6E9C; }   /* 냉동 */
.temp-badge--room { background: #A8602A; }   /* 상온 */

/* 상품 카드용 축소 버전 */
.prd-item__media .temp-badge {
  width: 40px; height: 40px; top: 8px; right: 8px;
}
.prd-item__media .temp-badge__ico { font-size: 13px; }
.prd-item__media .temp-badge__label { font-size: 9.5px; }

/* 재료·차별점 배지 */
.spec-list {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.spec {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.spec__ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-bg); display: grid; place-items: center; font-size: 17px;
}
.spec__body { display: flex; flex-direction: column; min-width: 0; }
.spec__body b { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.spec__body small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

.danja-options { list-style: none; padding: 0; margin: 0 0 20px; }
.danja-option {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.danja-option:first-child { border-top: 1px solid var(--line); }
.danja-option__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.danja-option__price { font-size: 16px; font-weight: 800; color: var(--gold); }
.btn--lg { padding: 14px 28px; font-size: 15px; font-weight: 800; border-radius: 8px; }
.btn--accent { background: var(--accent); color: #fff; transition: background .15s; }
.btn--accent:hover { background: var(--accent-deep); }

/* ---------- 8-3. 계절별 떡 ---------- */
.season-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; padding: 0 16px;
  /* 카드를 펼쳤을 때 같은 줄의 닫힌 카드가 함께 늘어나지 않도록 */
  align-items: start;
}
.season-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); text-align: center; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
/* 카드 전체가 눌리는 버튼 */
.season-card__btn {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; padding: 20px 16px; background: none; border: 0;
  cursor: pointer; text-align: center;
  transition: background .15s;
}
.season-card__btn:hover { background: var(--accent-bg); }
.season-card__btn:active { background: var(--accent-bg); transform: scale(.99); }
.season-card:has(.season-card__btn[aria-expanded="true"]) {
  border-color: var(--accent); box-shadow: 0 2px 12px rgba(113,63,85,.12);
}
.season-card__more {
  margin-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--accent);
  display: inline-flex; align-items: center; gap: 3px;
}
.season-card__more::after { content: "▾"; font-size: 10px; transition: transform .2s; }
.season-card__btn[aria-expanded="true"] .season-card__more::after { transform: rotate(180deg); }

.season-card__detail {
  padding: 0 16px 18px; text-align: left;
  border-top: 1px solid var(--line);
}
.season-card__detail p { font-size: 12.5px; color: var(--sub); line-height: 1.65; margin-top: 14px; }
.season-card__note { color: var(--muted) !important; }
.season-card__detail .btn { margin-top: 12px; }
.season-card.is-now {
  border-color: var(--accent); box-shadow: 0 2px 12px rgba(139,110,59,.12);
}
.season-card__icon { font-size: 32px; margin-bottom: 8px; }
.season-card__season { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.season-card__months { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.season-card__name { font-size: 14px; font-weight: 700; color: var(--accent-deep); }
.season-card.is-now .season-card__name::after {
  content: " · 지금 주문 가능"; font-size: 11px; font-weight: 600; color: var(--green);
}
.season-note {
  text-align: center; font-size: 13px; color: var(--muted);
  padding: 12px 16px 0; font-weight: 500;
}

/* ---------- 8-4. 주문떡 ---------- */
.order-table-wrap { padding: 0 16px; overflow-x: auto; }
.order-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.order-table th {
  background: var(--accent); color: #fff; font-weight: 700;
  padding: 12px 14px; text-align: left;
}
.order-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.order-table tr:last-child td { border-bottom: 0; }
.order-table tr:hover td { background: var(--accent-bg); }
.order-notice {
  text-align: center; padding: 20px 16px 0;
  font-size: 14px; color: var(--sub); line-height: 1.7;
}
.order-notice .btn { margin-top: 12px; display: inline-block; }

/* ---------- 9. 정보 카드 (브랜드 요약) ---------- */
.brand-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px; }
.brand-card {
  background: var(--bg-section); border-radius: var(--radius);
  padding: 20px 16px; text-align: center;
}
.brand-card__icon { font-size: 28px; margin-bottom: 8px; }
.brand-card__title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.brand-card__desc { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------- 10. 브랜드 스토리 (수상 이력) ---------- */
.story-block { padding: 0 16px; }
.story-top { display: flex; flex-direction: column; gap: 18px; }
.story-media { width: 100%; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--bg-section); position: relative; margin-bottom: 20px; }

/* 명인 요약 지표 */
.story-stats {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.story-stats li {
  background: var(--accent-bg); border-radius: var(--radius-sm);
  padding: 12px 8px; text-align: center;
}
.story-stats b { display: block; font-size: 17px; font-weight: 900; color: var(--accent-deep); line-height: 1.2; }
.story-stats small { display: block; font-size: 11px; color: var(--sub); margin-top: 3px; }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-text { font-size: 14px; color: var(--sub); line-height: 1.85; margin-bottom: 20px; }

.award-list { display: grid; gap: 0; }
.award-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.award-row:last-child { border-bottom: 0; }
.award-year {
  flex: 0 0 50px; font-size: 13px; font-weight: 800;
  color: var(--accent); letter-spacing: -.01em;
}
.award-text { font-size: 14px; font-weight: 600; color: var(--ink); }
.award-text small,
.detail-value small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 1px; }

/* 스토리 섹션 소제목 */
.story-sub {
  font-size: 15px; font-weight: 800; color: var(--accent-deep);
  margin: 24px 0 8px; padding-bottom: 6px;
  border-bottom: 2px solid var(--accent-bg);
}

/* 접이식 상세 (전체 이력 등) */
.more { margin-top: 20px; }
.more__summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-dark); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--sub);
  transition: border-color .15s, color .15s;
}
.more__summary::-webkit-details-marker { display: none; }
.more__summary::after { content: "▾"; margin-left: auto; font-size: 12px; }
.more[open] .more__summary::after { content: "▴"; }
.more__summary:hover { border-color: var(--accent); color: var(--accent); }
.more__body { padding: 4px 2px 0; }
.more__title {
  font-size: 13px; font-weight: 800; color: var(--muted);
  margin: 18px 0 2px; letter-spacing: .02em;
}

/* 제조 과정 */
.process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px; }
.process-step {
  background: var(--bg-section); border-radius: var(--radius);
  padding: 18px 14px; position: relative;
}
.process-num {
  font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: .1em;
  margin-bottom: 6px;
}
.process-step h3 { font-size: 14px; margin-bottom: 4px; }
.process-step p { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------- 11. 떡카페 ---------- */
.cafe-block { padding: 0 16px; }
.cafe-media { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--bg-section); position: relative; margin-bottom: 16px; }
.cafe-media img { width: 100%; height: 100%; object-fit: cover; }
/* 사진 갤러리 (크로스페이드 순환) — 체험관 등 여러 장 보여줄 때 */
.gallery {
  position: relative; width: 100%; aspect-ratio: 4/3;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-section); margin-bottom: 16px;
}
.gallery > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity .6s ease;
  filter: saturate(1.10) contrast(1.03);
}
.gallery > img.is-active { opacity: 1; }
.gallery__dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.34); backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: 999px;
}
.gallery__dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; border: 0;
  background: rgba(255,255,255,.5); cursor: pointer;
  transition: background .25s, width .25s, border-radius .25s;
}
.gallery__dot.is-active { background: #fff; width: 18px; border-radius: 4px; }
.gallery__count {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85);
  margin-left: 4px; white-space: nowrap;
}

.cafe-info-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--green-bg); color: var(--green);
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  margin-bottom: 10px;
}
.cafe-text { font-size: 14px; color: var(--sub); line-height: 1.85; margin-bottom: 18px; }

.menu-table { width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.menu-table th, .menu-table td { padding: 12px 16px; font-size: 14px; }
.menu-table thead th {
  background: var(--bg-section); color: var(--muted);
  font-size: 12px; font-weight: 700; text-align: left;
}
.menu-table thead th:last-child { text-align: right; }
.menu-table tbody tr + tr { border-top: 1px solid var(--line); }
.menu-table td { background: #fff; }
.menu-table td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }

/* ---------- 12. FAQ ---------- */
.faq { display: grid; gap: 0; padding: 0 16px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 36px 16px 0;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 300; color: var(--light);
}
.faq__item[open] .faq__q::after { content: "−"; color: var(--accent); }
.faq__item[open] .faq__q { color: var(--accent); }
.faq__a { padding: 0 0 16px; font-size: 13px; color: var(--muted); line-height: 1.8; }

/* ---------- 13. 오시는 길 ---------- */
.visit-block { padding: 0 16px; }
.map-frame {
  width: 100%; aspect-ratio: 4/3; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--bg-section);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.map-links .btn { font-size: 12px; height: 36px; }

/* 지도 앱 열기 — 지도 서비스가 iframe 삽입을 막아 링크 방식으로 제공 */
.map-open {
  background: var(--bg-section); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 18px; text-align: center;
}
.map-open__addr { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.map-open__hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.map-open__btns {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 16px;
}
.map-open__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border: 1px solid var(--line-dark); border-radius: var(--radius-sm);
  padding: 14px 6px; font-size: 12.5px; font-weight: 700; color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.map-open__btn:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.map-open__ico {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 900; color: #fff;
}
/* 네이버 원색(#03C75A)은 흰 글자 대비 2.98 로 미달 → 진하게 조정 */
.map-open__btn--naver  .map-open__ico { background: #02914A; }
.map-open__btn--kakao  .map-open__ico { background: #3C1E1E; }
.map-open__btn--google .map-open__ico { background: #34649A; }

.detail-list { margin-top: 20px; }
.detail-row {
  display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.detail-row:last-child { border-bottom: 0; }
.detail-label { flex: 0 0 70px; font-size: 13px; font-weight: 700; color: var(--accent); }
.detail-value { font-size: 14px; color: var(--ink); }
.detail-value small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- 14. 하단 탭바 (창억 스타일) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  box-shadow: 0 -2px 10px rgba(0,0,0,.05);
}
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10px; font-weight: 600; color: var(--muted);
  transition: color .15s; text-decoration: none;
}
.tabbar__item:active, .tabbar__item.is-active { color: var(--ink-deep); }
.tabbar__icon { font-size: 20px; line-height: 1; }

/* ---------- 15. 푸터 (창억 스타일: 밝은 그레이) ---------- */
.footer { background: var(--bg-section); color: var(--muted); padding: 32px 0 24px; }
.footer__brand { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.footer__desc { font-size: 12px; line-height: 2; color: var(--muted); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0; font-size: 12px; font-weight: 600; }
.footer__nav a { color: var(--sub); }
.footer__nav a:hover { color: var(--ink); }
.footer__bottom { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; font-size: 11px; color: var(--muted); line-height: 1.9; }
.footer__bottom strong { color: var(--sub); font-weight: 700; }
.footer a:hover { color: var(--ink); }

/* ---------- 16. 이미지 자리표시자 ---------- */
.ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center;
  background: var(--bg-section); color: var(--muted);
}
.ph__icon { font-size: 24px; opacity: .4; }
.ph__text { font-size: 11px; font-weight: 700; line-height: 1.5; max-width: 200px; }
.ph__hint { font-size: 10px; color: var(--muted); }
.ph-host { position: relative; }
.ph-host > img.is-missing { visibility: hidden; }

/* ---------- 17. 알림 배너 ---------- */
.notice {
  background: var(--point-bg); border: 1px solid #F0DCC4;
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 13px; color: #7E5C28; display: flex; gap: 8px; align-items: flex-start;
  margin: 0 16px;
}
.notice::before { content: "ⓘ"; font-weight: 800; }

/* ---------- 18. 반응형 ---------- */
/* 좁은 화면: 화살표가 보이지 않으면서 히어로 텍스트 위 터치를 가로챔 — 스와이프로 대체
   (기본 .hero__arrow 규칙보다 뒤에 와야 적용됨) */
@media (max-width: 719px) {
  .hero__arrow { display: none; }
  /* 좌우가 크게 잘리므로 피사체(오른쪽)가 남도록 크롭 위치 조정
     (기본 .hero__slide > img 규칙보다 뒤에 와야 적용됨) */
  .hero__slide--t1 > img { object-position: 62% center; }
  .hero__slide--t3 > img { object-position: 58% center; }
}

@media (min-width: 600px) {
  .prd-grid { padding: 0 16px; }
  .prd-item { width: calc(33.333% - 10px); margin-right: 14px; }
  .prd-item:nth-child(2n) { margin-right: 14px; }
  .prd-item:nth-child(3n) { margin-right: 0; }
  .process-grid { grid-template-columns: repeat(4, 1fr); }
  .brand-cards { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 860px) {
  :root { --header-h: 64px; }
  body { padding-bottom: 0; font-size: 15px; }
  .wrap { padding: 0 24px; }
  .section { padding: 48px 0; }
  .section--lg { padding: 72px 0; }
  .nav-bar { display: block; }
  .nav-toggle, .drawer { display: none !important; }
  .search-toggle { display: none; }
  .tabbar { display: none; }

  .header__search { display: block; }
  .logo__sub { display: block; margin-top: -2px; }

  .hero__slide { height: 480px; }
  .hero__arrow { opacity: .6; }
  .hero__pause { opacity: .5; }
  .section-title { font-size: 24px; }

  .prd-item { width: calc(25% - 11px); margin-right: 14px; }
  .prd-item:nth-child(2n), .prd-item:nth-child(3n) { margin-right: 14px; }
  .prd-item:nth-child(4n) { margin-right: 0; }

  /* 본문도 헤더와 같은 폭(--wrap)으로 제한 — 넓은 화면에서 끝까지 늘어나
     가격표 같은 양끝정렬 요소가 과도하게 벌어지던 문제 해결
     좌우 여백 72px 는 우측 고정 SNS 레일(약 62px)이 본문을 덮지 않도록 확보 */
  .section-header, .prd-grid, .danja-hero, .season-grid, .season-note,
  .order-table-wrap, .order-notice, .brand-cards, .story-block,
  .process-grid, .cafe-block, .faq, .visit-block {
    max-width: var(--wrap); margin-inline: auto; padding-inline: 72px;
  }
  .notice { max-width: var(--wrap); margin-inline: auto; }

  .danja-hero { flex-direction: row; align-items: flex-start; }
  /* 대표 사진이 4:3 이라 프레임도 맞춤 (1:1 이면 좌우 25% 가 잘림) */
  .danja-hero__media { flex: 0 0 520px; aspect-ratio: 4/3; }

  /* 명인 프로필은 사진 + 소개를 2단으로 (전체폭이면 사진이 800px 로 과하게 커짐) */
  .story-top { flex-direction: row; align-items: flex-start; gap: 28px; }
  .story-media { flex: 0 0 360px; margin-bottom: 0; }
  .story-intro { flex: 1; min-width: 0; }
  .danja-hero__info { flex: 1; }

  .season-grid { grid-template-columns: repeat(4, 1fr); }

  .split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .split-layout--reverse > :first-child { order: 2; }
}

@media (min-width: 1024px) {
  .hero__overlay { padding: 56px 60px; }
  .hero__title { font-size: 42px; }
}

/* 화면이 충분히 넓으면 본문이 중앙에 모이므로 좌우 여백을 헤더와 맞춤
   (이 폭부터는 SNS 레일이 본문 바깥에 위치해 여백을 크게 둘 필요가 없음) */
@media (min-width: 1300px) {
  .section-header, .prd-grid, .danja-hero, .season-grid, .season-note,
  .order-table-wrap, .order-notice, .brand-cards, .story-block,
  .process-grid, .cafe-block, .faq, .visit-block {
    padding-inline: 24px;
  }
}

/* 넓은 화면에서 히어로가 너무 납작해지면(4:1 이상) 사진 위아래가 과하게 잘림
   → 화면이 넓어질수록 높이를 키워 잘림을 줄임 */
@media (min-width: 1600px) { .hero__slide { height: 560px; } }
@media (min-width: 2000px) { .hero__slide { height: 620px; } }

/* ---------- 19. 접근성 / 인쇄 ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .header, .tabbar, .drawer, .btn, .search-fullscreen, .sns-float { display: none !important; }
  body { padding: 0; background: #fff; }
}

/* ---------- 20. 스크롤 등장 ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 21. 블로그 (명인의 이야기) ---------- */
.blog-hero { padding-bottom: 8px; }

.blog-list { display: grid; gap: 14px; padding: 0 16px; }
.blog-card {
  display: block; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.blog-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}
.blog-card-date { font-size: 12px; color: var(--muted); font-weight: 600; }
.blog-card-title {
  font-size: 17px; font-weight: 800; color: var(--ink);
  line-height: 1.45; margin: 6px 0 8px;
}
.blog-card-summary { font-size: 13.5px; color: var(--sub); line-height: 1.7; }
.blog-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.blog-tag {
  font-size: 11.5px; font-weight: 700; color: var(--accent);
  background: var(--accent-bg); border-radius: 999px; padding: 4px 10px;
}
.blog-empty { text-align: center; padding: 48px 16px; color: var(--muted); font-size: 14px; }

.blog-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0 16px; }

/* 글 페이지 */
.blog-container { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.blog-post-header { padding: 8px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.blog-post-header h1 {
  font-size: 24px; font-weight: 900; color: var(--ink-deep);
  line-height: 1.4; letter-spacing: -.02em;
}
.blog-post-meta { font-size: 12.5px; color: var(--muted); margin-top: 10px; font-weight: 600; }

.blog-post-content { font-size: 15px; color: var(--ink); line-height: 1.9; }
.blog-post-content h2 {
  font-size: 19px; font-weight: 800; color: var(--accent-deep);
  margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--accent-bg);
}
.blog-post-content h3 { font-size: 16px; font-weight: 800; margin: 24px 0 8px; }
.blog-post-content p { margin: 0 0 16px; }
.blog-post-content ul, .blog-post-content ol { margin: 0 0 16px; padding-left: 20px; }
.blog-post-content li { list-style: disc; margin-bottom: 6px; }
.blog-post-content ol li { list-style: decimal; }
.blog-post-content img {
  width: 100%; height: auto; border-radius: var(--radius);
  margin: 8px 0 20px; display: block;
}
.blog-post-content strong { font-weight: 800; color: var(--ink-deep); }
.blog-post-content a { color: var(--accent); text-decoration: underline; }
.blog-post-content table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.blog-post-content th {
  background: var(--accent); color: #fff; font-weight: 700;
  padding: 10px 12px; text-align: left;
}
.blog-post-content td { padding: 10px 12px; border-bottom: 1px solid var(--line); }

.blog-post-nav { display: flex; gap: 8px; margin-top: 32px; }
.blog-post-nav .btn { flex: 1; }

@media (min-width: 860px) {
  .blog-list { grid-template-columns: repeat(2, 1fr); max-width: var(--wrap); margin-inline: auto; padding-inline: 72px; }
  .blog-container { padding: 0 24px; }
  .blog-post-header h1 { font-size: 30px; }
  .blog-post-content { font-size: 16px; }
}
@media (min-width: 1300px) {
  .blog-list { padding-inline: 24px; }
}