/* 공통 섹션 틀 + section03~06 — 값은 레퍼 1600 디자인 px (calc(N * var(--u))) */
:root {
  --shine-t: 2.8s;              /* 환급 약속 줄 반짝 주기 */
  --shine-gold: #FFE08A;        /* 환급 약속 강조 글씨 */
  --ink: #111;                 /* 한지 위 글씨 */
  --hanji-line: #d9d4ca;       /* 한지 위 얇은 선 */
  --dim: brightness(.3) saturate(.8);   /* 어두운 사진 바탕 */
  --shadow-card: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(60, 20, 10, .14);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sec { position: relative; max-width: var(--max); margin: 0 auto; padding: calc(150 * var(--u)) 0; overflow: hidden; }
.sec > * { position: relative; }
.sec img { height: auto; }   /* width·height 속성은 비율 예약용 — 실제 높이는 폭을 따름 */
.sec.dark { background: #0d0b0a; }
.sec.dark[style]::before { content: ''; position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; filter: var(--dim); }
.bg_hanji { background: #f1eee8 url(../img/bg_hanji.jpg) center / cover no-repeat; }
.bg_hanji_jar { background: #f1eee8 url(../img/bg_hanji_jar.jpg) center bottom / cover no-repeat; }
.bg_ink { background: #0d0b0a url(../img/bg_ink.jpg) center top / cover no-repeat; }
.inner { width: calc(1400 * var(--u)); margin: 0 auto; }

/* 제목 세트 보강 (기본은 s02.css .sec_txt) */
.sec_txt.center { text-align: center; }
.light .sec_txt p { color: var(--ink); }
.light .sec_txt .title, .sec_txt .title_r { color: var(--red); }
.sec_txt .title.black { color: var(--ink); margin-bottom: calc(10 * var(--u)); }
.sec_txt .title span { color: var(--white); }
.sec_txt .desc_2 { margin-top: calc(40 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 300; }
.sec_txt .title_b { font-size: calc(75 * var(--u)); line-height: calc(95 * var(--u)); font-weight: 500; }
.sec_txt .title_b b { font-weight: 800; }
.sec_txt .title_r { font-size: calc(65 * var(--u)); line-height: calc(95 * var(--u)); font-weight: 800; }
.js .reveal { opacity: 0; }

/* 흐르는 띠 (레퍼 flow-ani-wrap: UL 두 벌을 -100% 로 흘림, 속도는 JS가 px/s 로 맞춤) */
.flow { display: flex; overflow: hidden; }
.flow ul { display: flex; flex: none; align-items: center; list-style: none; animation: flowAni var(--dur, 40s) linear infinite; }
.flow.re ul { animation-name: flowAni_re; }
@keyframes flowAni { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@keyframes flowAni_re { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.marquee.left .marquee_track { animation-direction: reverse; }

/* ---------- section03 할매의 묵은지 (레퍼: 좌 돌판 누끼 낙하 + 우 특허증) ---------- */
#section03 { padding: calc(180 * var(--u)) 0 calc(140 * var(--u)); }
.s03_img_wrap { position: relative; margin-top: calc(60 * var(--u)); height: calc(640 * var(--u)); }
.s03_jar_wrap { position: absolute; left: calc(140 * var(--u)); top: 0; width: calc(640 * var(--u)); filter: drop-shadow(0 calc(30 * var(--u)) calc(30 * var(--u)) rgba(60, 25, 10, .3)); }
.s03_seal_wrap { position: absolute; right: calc(120 * var(--u)); top: calc(40 * var(--u)); width: calc(439 * var(--u)); }   /* 액자 없이 사진만 + 아래 날짜·장소 */
.s03_seal_wrap img { box-shadow: var(--shadow-card); }
.s03_seal_wrap figcaption { margin-top: calc(16 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 500; color: #6b6661; letter-spacing: -.01em; }
.s03_seal_wrap time { margin-right: calc(10 * var(--u)); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- section04 좌 사진 슬라이더 60% + 우 검정 패널 40% ---------- */
#section04 { display: flex; padding: 0; }
.s4_img { width: 60%; flex: none; }
#s4_swiper { height: 100%; }
#s4_swiper img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 960 / 1152; }
.s4_nav { position: absolute; z-index: 5; bottom: 0; width: calc(71 * var(--u)); height: calc(71 * var(--u)); border: 0; display: grid; place-items: center; color: #fff; font-size: calc(30 * var(--u)); cursor: pointer; transition: transform 160ms ease-out; }
.s4_nav:active { transform: scale(.97); }
.s4_prev { right: calc(71 * var(--u)); background: #000; }
.s4_next { right: 0; background: var(--red); }
.s4_txt { position: relative; flex: 1; padding: calc(150 * var(--u)) calc(70 * var(--u)) 0 calc(80 * var(--u)); background: #0d0b0a url(../img/bg_ink.jpg) center top / cover no-repeat; }
.s04_main_txt { position: absolute; left: calc(-120 * var(--u)); top: calc(50 * var(--u)); z-index: 10; font-size: calc(88 * var(--u)); color: #fff; }
.s04_main_txt .bk { display: block; width: 1em; height: auto; aspect-ratio: var(--ar); filter: drop-shadow(calc(3 * var(--u)) calc(3 * var(--u)) 0 #000) drop-shadow(0 0 calc(24 * var(--u)) rgba(0, 0, 0, .6)); }   /* 산돌 광야 세로쓰기 SVG */
.s04_tit_wrap { margin-bottom: calc(100 * var(--u)); }
.s04_tit { font-size: calc(68 * var(--u)); line-height: 1.35; }
.s04_tit .bk { display: block; height: 1.35em; width: auto; aspect-ratio: var(--ar); }   /* 산돌 광야 SVG */
.s04_desc { font-size: calc(23 * var(--u)); font-weight: 500; line-height: calc(46 * var(--u)); letter-spacing: -.025em; }
.s04_desc b { font-weight: 800; }
.s04_desc .color { background: var(--red); padding: calc(2 * var(--u)) calc(5 * var(--u)); font-weight: 800; }
.s04_desc.mt { margin-top: calc(60 * var(--u)); }

/* ---------- section05 숫자 카드 흐름 (레퍼 테이블 단가 카드 516×251) ---------- */
#section05 { padding-bottom: calc(150 * var(--u)); }   /* 10-15 숫자 카드 흐름 삭제 */
#section05 { --dim: brightness(.2) saturate(.7) blur(2px); }   /* 메뉴 모음컷이 밝고 복잡해 글 뒤를 한 번 더 누름 */
.s05_flow { margin-top: calc(120 * var(--u)); }
.s05_card { width: calc(516 * var(--u)); margin-right: calc(80 * var(--u)); }
.s05_card p { height: calc(92 * var(--u)); display: grid; place-items: center; background: var(--red); font-size: calc(32 * var(--u)); font-weight: 700; letter-spacing: -.03em; }
.s05_card b { height: calc(159 * var(--u)); display: flex; align-items: baseline; justify-content: center; padding-top: calc(36 * var(--u)); background: #fff; color: var(--ink); font-size: calc(86 * var(--u)); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.s05_card small { font-size: calc(38 * var(--u)); font-weight: 700; margin-left: calc(6 * var(--u)); }

/* ---------- section06 같은 가게 전후 비교 (레퍼: 센터 슬라이더 1083×406, 대각 리본) ---------- */
#s06_swiper { margin-top: calc(100 * var(--u)); overflow: visible; }
.s06_card { position: relative; width: calc(1083 * var(--u)); height: calc(406 * var(--u)); padding: calc(50 * var(--u)) calc(60 * var(--u)); background: #fff; border: 1px solid var(--hanji-line); box-shadow: var(--shadow-card); overflow: hidden; opacity: .35; transition: opacity .5s ease; }
.s06_card.swiper-slide-active { opacity: 1; }
.s06_store { font-size: calc(36 * var(--u)); font-weight: 800; color: var(--ink); letter-spacing: -.04em; }
.s06_store small { margin-left: calc(8 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 500; color: #888; }
.s06_cmp { display: flex; align-items: center; gap: calc(30 * var(--u)); margin-top: calc(40 * var(--u)); }
.s06_cmp > div { flex: 1; height: calc(214 * var(--u)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(20 * var(--u)); }   /* 숫자·글이 박스에 꽉 차 보이지 않게 여백 */
.s06_cmp span { font-size: calc(22 * var(--u)); font-weight: 600; letter-spacing: -.03em; }
.s06_cmp b { font-size: calc(52 * var(--u)); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.s06_cmp small { font-size: calc(24 * var(--u)); font-weight: 700; margin-left: calc(4 * var(--u)); }
.s06_cmp .before { background: #ecebe8; color: #8a8784; filter: grayscale(1); }
.s06_cmp .after { background: var(--red); color: #fff; }
.s06_cmp > i { font-size: calc(44 * var(--u)); color: var(--red); }
.ribbon { position: absolute; right: calc(-66 * var(--u)); top: calc(38 * var(--u)); width: calc(260 * var(--u)); padding: calc(8 * var(--u)) 0; rotate: 45deg; background: var(--ink); color: #fff; text-align: center; font-style: normal; font-size: calc(24 * var(--u)); font-weight: 800; letter-spacing: -.02em; }
.s06_note { margin-top: calc(50 * var(--u)); text-align: center; font-size: calc(16 * var(--u)); color: #6b6661; }

/* ---------- 모바일 (레퍼 768 기준) ---------- */
@media (max-width: 768px) {
  .inner { width: 100%; padding: 0 calc(30 * var(--u)); }
  .sec > .sec_txt { padding: 0 calc(30 * var(--u)); }
  .sec_txt .slogan { font-size: calc(58 * var(--u)); }
  .sec_txt .title { font-size: calc(95 * var(--u)); margin-bottom: calc(50 * var(--u)); line-height: 1.1; }
  .sec_txt .desc { font-size: calc(35 * var(--u)); line-height: calc(50 * var(--u)); }
  .sec_txt .desc_2 { font-size: calc(28 * var(--u)); line-height: calc(42 * var(--u)); margin-top: calc(50 * var(--u)); }
  .sec_txt .title_b { font-size: calc(85 * var(--u)); line-height: calc(98 * var(--u)); }
  .sec_txt .title_r { font-size: calc(70 * var(--u)); line-height: calc(87 * var(--u)); }
  .sec_txt .desc br, .sec_txt .desc_2 br { display: none; }
  .sec_txt .desc br.m_keep { display: inline; }   /* 모바일에서도 살리는 줄바꿈 */
  #section03 { padding: calc(150 * var(--u)) 0 calc(160 * var(--u)); }
  .s03_img_wrap { height: auto; display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--u)); }   /* 장독대·할머니 사진 나란히 */
  .s03_jar_wrap { position: relative; left: auto; flex: 0 0 calc(370 * var(--u)); width: calc(370 * var(--u)); }
  .s03_seal_wrap { position: relative; right: auto; top: auto; flex: 0 0 calc(310 * var(--u)); width: calc(310 * var(--u)); margin: 0; }
  .s03_seal_wrap figcaption { font-size: calc(20 * var(--u)); }
  #section04 { flex-direction: column; }
  .s4_img { width: 100%; }
  .s4_nav { width: calc(90 * var(--u)); height: calc(90 * var(--u)); font-size: calc(38 * var(--u)); }
  .s4_prev { right: calc(90 * var(--u)); }
  .s4_txt { padding: calc(150 * var(--u)) calc(30 * var(--u)) calc(220 * var(--u)); text-align: center; }
  .s04_main_txt { display: none; }
  .s04_tit { font-size: calc(80 * var(--u)); }
  .s04_tit .bk { margin: 0 auto; }
  .s04_desc { font-size: calc(32 * var(--u)); line-height: calc(60 * var(--u)); }
  .s05_flow { margin-top: calc(150 * var(--u)); }
  .s05_card { width: calc(440 * var(--u)); margin-right: calc(40 * var(--u)); }
  .s05_card p { height: calc(84 * var(--u)); font-size: calc(32 * var(--u)); }
  .s05_card b { height: calc(150 * var(--u)); font-size: calc(80 * var(--u)); }
  .s06_card { width: 90%; height: auto; padding: calc(50 * var(--u)) calc(40 * var(--u)); }
  .s06_store { font-size: calc(40 * var(--u)); }
  .s06_cmp { flex-direction: column; gap: calc(22 * var(--u)); }
  .s06_cmp > div { width: 100%; height: auto; padding: calc(40 * var(--u)) 0; gap: calc(16 * var(--u)); }
  .s06_cmp > i { rotate: 90deg; }
  .s06_cmp span { font-size: calc(24 * var(--u)); }
  .s06_cmp b { font-size: calc(54 * var(--u)); }
  .ribbon { font-size: calc(26 * var(--u)); }
  .s06_note { font-size: calc(22 * var(--u)); }
}

#section06 .nw { white-space: nowrap; }   /* 10-16 모바일 「말고,」 혼자 떨어짐 방지 */