/* styles.css — 더큰수산 v2 「네 조각의 항해」
   브랜드 기준: 브랜드북 rev.3 (컬러 5색 · Noto Serif KR · 붓글씨는 극소 구역)
   지면 규칙: 남색 = 바다(가업·원물), 한지 = 식탁(스팀팩·연구). 장이 바뀌면 지면 색이 천천히 바뀐다.
   붓글씨(영양군 음식디미방체)는 표지 제목 · 네 조각 이름 · 제품명에만 쓴다. 버튼·카드·그림자·알약 없음 — 괘선과 여백으로 나눈다. */

@font-face {
  font-family: 'Dimibang';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.1/dimibang_new.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --navy: #004067; /* PANTONE 2188 C */
  --mist-shallow: #c3d8e7; /* 파랑 위 보조·라벨 5.0:1 */
  --navy-deep: #00263f; /* 2188 C 의 짙은 단 — 02장 「배」 한 장만. 면의 명도로 흐름에 강약을 준다 */
  --blue: #015991; /* PANTONE 6126 C */
  --sky: #8bc1df; /* PANTONE 2905 C */
  --sand: #d5d1c3; /* PANTONE 7527 C */
  --taupe: #95816d; /* PANTONE 4049 C — 장식 전용 */
  --taupe-ink: #6b5a48; /* 종이 위 작은 글자용(대비 4.5:1 이상) */
  --paper: #f5f3ee;
  /* 글자 위계는 투명도가 아니라 고정 단계로 — 남색 면 3단, 한지 면 3단 */
  --mist-1: #dce8f1; /* 남색 위 본문 8.7:1 */
  --mist-2: #a8c4d8; /* 남색 위 보조·라벨 6.0:1 */
  --ink-1: #2f3d48; /* 한지 위 본문 10:1 */
  --ink-2: #5f6b75; /* 한지 위 보조·라벨 4.9:1 */
  --white: #ffffff;

  --serif: 'Noto Serif KR', 'AppleMyungjo', 'Nanum Myeongjo', 'Batang', serif;
  /* 영문·숫자·라벨·UI 는 산세리프 한 벌로. 브랜드북은 국문 기본 서체(Noto Serif KR)만 정하고 영문은 비워 두었다 */
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --latin: var(--sans);
  --brush: 'Dimibang', 'Noto Serif KR', serif;

  --gutter: clamp(20px, 5.6vw, 80px);
  --max: 1440px;
  --header-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 지면 톤: 각 구역이 data-tone 으로 고른다.
   바다 면은 세 단 — 서문 shallow(6126 C 파랑) → 01장 sea(2188 C 남색) → 02장 deep(짙은 남색). 내려갈수록 깊어지고 03장 한지(식탁)로 올라온다 */
[data-tone='sea'],
[data-tone='shallow'],
[data-tone='deep'] {
  --bg: var(--navy);
  --fg: var(--white);
  --fg-2: var(--mist-1);
  --fg-3: var(--mist-2);
  --accent: var(--sky);
  --caption: var(--mist-2);
  --line: rgba(139, 193, 223, 0.3);
  --line-strong: rgba(139, 193, 223, 0.6);
  --ghost: rgba(139, 193, 223, 0.42);
  --dim: rgba(139, 193, 223, 0.36);
}
[data-tone='shallow'] {
  --bg: var(--blue);
  --fg-3: var(--mist-shallow);
  --caption: var(--mist-shallow);
  --line: rgba(195, 216, 231, 0.34);
}
[data-tone='deep'] {
  --bg: var(--navy-deep);
  --line: rgba(139, 193, 223, 0.24);
}
[data-tone='paper'] {
  --bg: var(--paper);
  --fg: var(--navy);
  --fg-2: var(--ink-1);
  --fg-3: var(--ink-2);
  --accent: var(--blue);
  --caption: var(--ink-2);
  --line: rgba(0, 64, 103, 0.14);
  --line-strong: rgba(0, 64, 103, 0.5);
  --ghost: rgba(1, 89, 145, 0.36);
  --dim: rgba(0, 64, 103, 0.28);
}

/* ---------------------------------------------------------------- base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.9;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 영문판은 본문까지 산세리프 — 로마자 명조는 굵은 영문 제목과 어긋난다. 붓글씨 구역은 .brush 가 따로 지정 */
/* 일본어·번체판: 본문 명조는 그 언어의 Noto Serif, 산세리프는 Pretendard 뒤에 그 언어의 Noto Sans 를 둔다(가나·번체 한자) */
html[lang='ja'] {
  --serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans: 'Pretendard Variable', Pretendard, 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}
html[lang='zh-Hant'] {
  --serif: 'Noto Serif TC', 'PMingLiU', serif;
  --sans: 'Pretendard Variable', Pretendard, 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}
/* keep-all 은 띄어쓰기 없는 일본어·중국어에서 줄바꿈 자리를 없앤다 — 일본어는 문절 단위(auto-phrase), 번체는 글자 단위 */
html[lang='ja'] body,
html[lang='zh-Hant'] body {
  line-height: 1.95;
  line-break: strict;
  word-break: normal;
}
html[lang='ja'] body {
  word-break: auto-phrase;
}
html[lang='ja'] .cover-tagline-en,
html[lang='zh-Hant'] .cover-tagline-en {
  font-family: var(--sans);
}
html[lang='ja'] .lineup-title.latin,
html[lang='zh-Hant'] .lineup-title.latin {
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: -0.02em;
}
html[lang='en'] body {
  font-family: var(--sans);
  line-height: 1.7;
  letter-spacing: -0.005em;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.42em;
}
a:hover {
  color: var(--accent);
}
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}
[data-tone='paper'] :focus-visible {
  outline-color: var(--blue);
}
p,
h1,
h2,
h3,
h4,
figure,
dl,
dd,
ol,
ul,
blockquote {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.brush {
  font-family: var(--brush);
  font-weight: normal;
  letter-spacing: 0.01em;
}
.latin {
  font-family: var(--latin);
  letter-spacing: -0.01em;
}
.label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--fg-3);
}
/* 산세리프 역할: 메뉴·라벨·번호·캡션·데이터. 국문 제목·본문·선언은 명조(브랜드 서체)로 남긴다 */
.nav a,
.store-link,
.menu-links,
.label,
.cover-place,
.cover-cue,
.sum-meaning,
.stage-kw,
.ceo-title,
.ruled li,
.ruled-dl dt,
.ruled-dl dd,
.route-name,
.fig figcaption,
.field-list figcaption,
.eq-note,
.features h3,
.ledger-src,
.note-head,
.note-list,
.map-links,
.abroad,
.big-link,
.to-lineup,
.pack-kind,
.contact-list dt,
.contact-list dd,
.facts dd,
.footer-brand,
.footer-info,
.copyright,
.lang-hint {
  font-family: var(--sans);
  letter-spacing: -0.01em;
}
.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--white);
  color: var(--navy);
}
.skip-link:focus {
  top: 12px;
}
.arrow {
  display: inline-block;
  margin-left: 0.3em;
  font-family: var(--serif);
  font-weight: 400;
  transition: transform 0.3s var(--ease);
}
a:hover .arrow {
  transform: translate(2px, -2px);
}

/* 등장 효과(자바스크립트가 있을 때만 숨긴다) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  color: var(--fg);
  transition:
    background-color 0.6s var(--ease),
    color 0.6s var(--ease),
    border-color 0.6s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: var(--bg);
  border-bottom-color: var(--line);
}
.header-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.brand {
  display: flex;
  position: relative;
}
.brand-logo {
  height: 40px;
  width: auto;
  transition: opacity 0.5s var(--ease);
}
.brand-logo--dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.site-header[data-tone='paper'] .brand-logo--light {
  opacity: 0;
}
.site-header[data-tone='paper'] .brand-logo--dark {
  opacity: 1;
}
.nav ol {
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
}
.nav a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  line-height: 1;
  color: var(--fg-2);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  font-weight: 500;
}
.nav a:hover {
  color: var(--fg);
}
.nav a[aria-current] {
  color: var(--fg);
  border-bottom-color: var(--fg);
}
.nav-no {
  font-family: var(--latin);
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 600;
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 26px;
}
.lang-link {
  font-family: var(--latin);
  font-size: 14px;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--fg-2);
  font-weight: 600;
}
.store-link {
  font-size: 15px;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 7px;
  font-weight: 600;
}
.menu-btn,
.menu-close {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.menu-bars,
.menu-bars::before {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}
.menu-bars {
  position: relative;
  transform: translateY(-4px);
}
.menu-bars::before {
  content: '';
  position: absolute;
  top: 8px;
}
.menu-x {
  position: relative;
  width: 22px;
  height: 22px;
}
.menu-x::before,
.menu-x::after {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}
.menu-x::after {
  transform: rotate(-45deg);
}

/* 모바일 메뉴 */
.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--navy);
  color: var(--white);
  overflow-y: auto;
}
.menu[hidden] {
  display: none;
}
.menu-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}
.menu-top {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-top img {
  height: 28px;
  width: auto;
}
.menu-close {
  display: flex;
}
.menu-list {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.menu-list a {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 20px;
}
.menu-no {
  font-family: var(--latin);
  font-size: 12px;
  color: var(--mist-2);
}
.menu-piece {
  font-size: 26px;
  line-height: 1;
  color: var(--sky);
}
.menu-links {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 16px;
}
body.menu-open {
  overflow: hidden;
}

/* 가장자리 조각 계기판 */
.gauge {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--fg);
  opacity: 0;
  transition:
    opacity 0.6s var(--ease),
    color 0.6s var(--ease);
}
.gauge.is-on {
  opacity: 1;
}
.gauge-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 18px;
}
.gauge-label {
  display: none;
}
.gauge-piece {
  width: 32px;
  height: 16px;
  color: var(--ghost);
  fill: currentColor;
  transition: color 0.5s var(--ease);
}
.gauge-item.is-done .gauge-piece {
  color: var(--fg);
}
.gauge-item.is-current .gauge-piece {
  transform: scale(1.18);
}
.gauge-piece {
  transition:
    color 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.gauge-item.is-done .piece--plus {
  color: var(--sky);
}

/* ---------------------------------------------------------------- 표지 */
.cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
.cover-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 48, 78, 0.42);
}
@media (prefers-reduced-motion: no-preference) {
  .cover-photo img {
    animation: slow-tide 26s var(--ease) both;
  }
}
@keyframes slow-tide {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
.sea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--sky);
  pointer-events: none;
}
.cover .sea {
  opacity: 0.62;
}
.sea-line {
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
  .sea-line {
    animation: sea-drift var(--dur, 14s) ease-in-out var(--delay, 0s) infinite alternate;
  }
}
@keyframes sea-drift {
  from {
    transform: translateX(calc(var(--dx, 8px) * -1));
  }
  to {
    transform: translateX(var(--dx, 8px));
  }
}
.sea--tall {
  display: none;
}
.cover-inner {
  position: relative;
  min-height: inherit;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: var(--header-h) auto 1fr auto;
  column-gap: 40px;
  padding-bottom: 48px;
}
.cover-intro {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cover-tagline {
  font-size: 20px;
  font-weight: 600;
  color: var(--sky);
  letter-spacing: -0.02em;
}
.cover-title {
  grid-column: 2;
  grid-row: 2 / 4;
  justify-self: center;
  margin-top: 36px;
  writing-mode: vertical-rl;
  font-size: clamp(56px, 9.6vh, 100px);
  line-height: 1.28;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--white);
}
.cover-title span {
  display: block;
}
.cover-slogan {
  grid-column: 2;
  grid-row: 2 / 4;
  justify-self: center;
  position: relative;
  margin-top: 36px;
  font-weight: 400;
}
.cover-slogan .cover-title {
  margin-top: 0;
  display: block;
}
.cover-translation {
  position: absolute;
  top: 18px;
  left: calc(100% + 20px);
  width: 128px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--fg-2);
  text-wrap: balance;
}
.cover-lede {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: start;
  margin-top: 64px;
  max-width: 360px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--fg-2);
  text-wrap: pretty;
}
.cover-place {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}
.cover-place .latin {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--white);
  font-weight: 700;
}
.cover-cue {
  grid-column: 2;
  grid-row: 4;
  align-self: end;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
  text-shadow:
    0 0 6px var(--navy),
    0 0 14px var(--navy);
}
.cue-line {
  display: block;
  width: 1px;
  height: 40px;
  background: var(--sky);
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .cue-line {
    animation: cue 2.4s var(--ease) infinite;
  }
}
@keyframes cue {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  51% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/* ---------------------------------------------------------------- 서문 */
.prologue {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(96px, 16vh, 180px) clamp(96px, 14vh, 160px);
}
.manifesto {
  font-size: clamp(23px, 2.35vw, 34px);
  font-weight: 300;
  line-height: 1.62;
  color: var(--fg);
  text-wrap: pretty;
}
.manifesto--lead {
  margin-top: 28px;
  max-width: 1120px;
  font-size: clamp(27px, 3.1vw, 46px);
  line-height: 1.55;
}
[data-scrub] .w {
  transition: opacity 0.25s linear;
}
.js [data-scrub] .w {
  opacity: clamp(0.26, calc(0.26 + (var(--p, 0) * (var(--n) + 4) - var(--i)) * 0.19), 1);
}
.prologue-intro {
  margin-top: 36px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.95;
  color: var(--fg-2);
}
.sum {
  margin-top: clamp(64px, 10vh, 110px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.05fr);
  column-gap: 24px;
  align-items: start;
}
.sum-pieces {
  display: contents;
}
.sum-item,
.sum-result {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 40px;
}
.sum-fig {
  height: 130px;
  display: flex;
  align-items: flex-end;
  color: var(--fg);
  margin-bottom: 8px;
}
.sum-piece {
  fill: currentColor;
  height: 100%;
  width: auto;
}
.sum-fig--waves .sum-piece {
  height: 58%;
}
.sum-fig--vessel .sum-piece {
  height: 76%;
}
.sum-fig--plus {
  color: var(--sky);
}
.sum-fig--plus .sum-piece {
  height: 66%;
}
.sum-solid {
  height: 100%;
  width: auto;
  fill: var(--white);
}
.sum-solid .solid-plus {
  fill: var(--sky);
}
.sum-no {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--fg-3);
  font-weight: 600;
}
.sum-name {
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1;
}
.sum-name--latin {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.sum-gloss {
  font-family: var(--latin);
  font-size: 14px;
  color: var(--fg-2);
  font-weight: 500;
}
.sum-meaning {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-2);
}
.sum-kw {
  font-size: 14px;
  color: var(--fg-3);
  font-weight: 600;
}
.sum-op {
  position: absolute;
  right: 0;
  top: 45px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.op-plus {
  width: 24px;
  height: 24px;
  fill: var(--sky);
}
.op-eq {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}
.op-eq span {
  display: block;
  height: 3px;
  background: var(--fg);
}

/* ---------------------------------------------------------------- 네 장: 고정 무대 */
.voyage {
  position: relative;
  background-color: var(--bg);
  color: var(--fg);
  transition:
    background-color 0.9s var(--ease),
    color 0.9s var(--ease);
}
.voyage-paper,
.lineup::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('graphic/hanji-dark.webp') repeat;
  background-size: 460px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
}
.voyage[data-tone='paper'] .voyage-paper {
  opacity: 0.55;
}
.voyage-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 5.6vw, 80px);
}
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  align-self: start;
  display: flex;
  align-items: center;
}
.stage-inner {
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(20px, 4vh, 44px);
  padding-top: var(--header-h);
}
.stage-heads {
  position: relative;
  display: grid;
}
.stage-head {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.stage-head.is-active {
  opacity: 1;
  transform: none;
}
.stage-no {
  font-size: 15px;
  letter-spacing: 0;
  color: var(--fg-3);
  font-weight: 600;
}
.stage-no span,
.chapter-no span {
  opacity: 0.55;
}
.stage-name {
  font-size: clamp(88px, 10.4vw, 156px);
  line-height: 1.02;
  color: var(--fg);
}
.stage-kw {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  color: var(--fg-3);
  font-weight: 500;
}
.stage-kw .latin {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.stage-figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.stage-figure::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.6);
  background: url('graphic/pattern-02.webp') center / 300px repeat;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.5) 36%, transparent 66%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.5) 36%, transparent 66%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 1.2s var(--ease),
    transform 1.6s var(--ease);
}
.voyage[data-active='3'] .stage-figure::before {
  opacity: 0.3;
  transform: translate(-50%, -50%) scale(1);
}
.stage-svg {
  width: auto;
  height: min(46vh, 430px);
  overflow: visible;
}
.stage-svg .ghost {
  fill: none;
  stroke: var(--ghost);
  stroke-width: 0.16;
  stroke-dasharray: 0.6 0.5;
  transition:
    opacity 0.5s var(--ease),
    stroke 0.9s var(--ease);
}
.stage-svg .part--circle,
.stage-svg .vessel-line {
  fill: none;
  stroke: var(--fg);
  stroke-width: 0.34;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.9s var(--ease);
}
.stage-svg .vessel-line {
  stroke-width: 0.22;
}
.stage-svg .part--waves,
.stage-svg .vessel-fill {
  fill: var(--fg);
  transition: fill 0.9s var(--ease);
}
.stage-svg .part--plus {
  fill: var(--sky);
}

/* 장(章) */
.chapters {
  min-width: 0;
}
.chapter {
  padding-block: clamp(120px, 22vh, 220px) clamp(40px, 8vh, 90px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 60px);
}
.chapter:first-child {
  padding-top: calc(clamp(120px, 22vh, 220px) + 38vh);
}
.chapter:last-child {
  padding-bottom: clamp(120px, 20vh, 200px);
}
.chapter-head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.chapter-head h2 {
  font-weight: normal;
}
.body-copy {
  max-width: 620px;
  font-size: 17px;
  line-height: 1.95;
  color: var(--fg-2);
  text-wrap: pretty;
}
.question {
  font-size: 19px;
  line-height: 1.6;
  color: var(--accent);
  margin-bottom: -28px;
}
.fig {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fig img {
  width: 100%;
  object-fit: cover;
}
.fig figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--caption);
}
.fig--wide img {
  aspect-ratio: 700 / 330;
}
.fig--cinema img {
  aspect-ratio: 16 / 9;
}
/* 현장 기록: 실제 사진은 작게, 기록처럼 */
.field-notes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.field-list figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field-list img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.field-list figcaption {
  font-size: 12px;
  line-height: 1.5;
  color: var(--caption);
}
.fig-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;
}
.fig-pair .fig img {
  aspect-ratio: 338 / 380;
}
.fig-pair--plant {
  grid-template-columns: 2fr 1fr;
}
.fig-pair--plant .fig--plant img {
  aspect-ratio: 460 / 300;
}
.fig-pair--plant .fig--packing img {
  aspect-ratio: 220 / 300;
}
.fig-pair--cook {
  grid-template-columns: 1.75fr 1fr;
}
.fig-pair--cook .fig--open img {
  aspect-ratio: 430 / 290;
}
.fig-pair--cook .fig--micro img {
  aspect-ratio: 250 / 200;
  object-position: left center;
}
.promise {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.to-lineup {
  align-self: flex-start;
  font-size: 16px;
  color: var(--fg);
  text-underline-offset: 8px;
}
.to-lineup span {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.3s var(--ease);
}
.to-lineup:hover span {
  transform: translateY(3px);
}
.promise-text {
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.6;
  color: var(--fg);
}
.ceo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px;
}
.ceo-id {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ceo-name {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3;
}
.ceo-title {
  font-size: 15px;
  color: var(--fg-3);
}
.ruled li {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
}
.ruled li:last-child {
  border-bottom: 1px solid var(--line);
}
.ruled-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.ruled-dl > div:last-child {
  border-bottom: 1px solid var(--line);
}
.ruled-dl dt {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
}
.ruled-dl dd {
  font-size: 15px;
  line-height: 1.85;
  color: var(--fg-2);
}

/* 생산 공정: 뱃길 */
.route {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.route-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.route-steps::before {
  content: '';
  position: absolute;
  left: 6px;
  right: calc(20% - 6px);
  top: 7px;
  border-top: 1.5px dashed var(--line-strong);
}
.route-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.route-mark {
  height: 15px;
  display: flex;
  align-items: center;
}
.route-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--bg);
}
.route-plus {
  width: 15px;
  height: 15px;
  fill: var(--sky);
}
.route-no {
  font-size: 12px;
  letter-spacing: 0;
  color: var(--fg-3);
  font-weight: 600;
}
.route-name {
  font-size: 16px;
  line-height: 1.5;
}

/* 스팀팩의 식 */
.equation {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-block: 34px 40px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.eq-body {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.eq-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px clamp(16px, 2vw, 28px);
}
.eq-term {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eq-word {
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
}
.eq-note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--caption);
  white-space: nowrap;
}
.eq-op {
  height: clamp(34px, 3.5vw, 52px);
  display: flex;
  align-items: center;
}
.eq-plus {
  width: clamp(22px, 2vw, 30px);
  height: clamp(22px, 2vw, 30px);
  fill: var(--sky);
}
[data-tone='paper'] .eq-plus {
  fill: var(--blue);
}
.eq-eq {
  height: clamp(34px, 3.5vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}
.eq-eq span {
  display: block;
  width: clamp(22px, 2vw, 30px);
  height: 4px;
  background: var(--fg);
}
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.features li {
  padding-top: 18px;
  border-top: 1px solid var(--fg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.features h3 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}
.features p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--fg-2);
}
.safety {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ledger li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
}
.ledger li:last-child {
  border-bottom: 1px solid var(--line);
}
.ledger-title {
  font-weight: 500;
}
.ledger-desc {
  color: var(--fg-2);
}
.ledger-src {
  font-size: 14px;
  color: var(--caption);
}

/* 연구 노트 */
.specimens {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 36px);
}
.specimen {
  height: clamp(110px, 12vw, 170px);
  width: auto;
}
.specimen--dasima {
  height: clamp(92px, 10vw, 140px);
}
.notes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.notes-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.notes-list li {
  padding-top: 16px;
  border-top: 1px solid var(--fg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.note-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-3);
  font-weight: 600;
}
.note-head .latin {
  letter-spacing: 0;
}
.notes-list h4 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}
.note-desc {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--fg-2);
}
.note-list {
  font-size: 13px;
  line-height: 1.7;
  color: var(--caption);
}
.offline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.offline-name {
  margin-top: 8px;
  font-size: 36px;
  line-height: 1.1;
}
.offline-name-en {
  margin-top: 6px;
  font-size: 15px;
  color: var(--caption);
  font-weight: 600;
}
.offline-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--fg-2);
}
.offline-addr {
  color: var(--fg);
}
.map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-size: 14px;
}
.text-link {
  color: var(--fg);
}
.abroad {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  font-size: 14px;
  color: var(--caption);
}
.abroad a {
  font-family: var(--latin);
  font-size: 17px;
  color: var(--fg);
  font-weight: 600;
}

/* ---------------------------------------------------------------- 완성 */
.signature {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-top: clamp(120px, 18vh, 200px);
  overflow: hidden;
  text-align: center;
}
.sig-horizon {
  position: relative;
  margin-top: clamp(56px, 9vh, 110px);
  height: clamp(260px, 44vh, 500px);
  overflow: hidden;
}
.sig-horizon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;
}
/* 위쪽은 남색 지면에서 이어져 내려오고, 아래로 갈수록 해돋이가 드러난다 */
.sig-horizon::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, var(--navy) 0%, rgba(0, 64, 103, 0.55) 30%, rgba(0, 64, 103, 0) 62%);
}
.sea--band {
  z-index: 2;
  inset: auto 0 0;
  height: 60%;
  opacity: 0.3;
}
.signature-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5vh, 44px);
}
.sig-eq {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  color: var(--fg-2);
}
.sig-plus {
  width: 14px;
  height: 14px;
  fill: var(--sky);
}
.sig-eqs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 14px;
}
.sig-eqs span {
  display: block;
  height: 2px;
  background: var(--fg);
}
.sig-logo {
  height: clamp(170px, 26vh, 230px);
  width: auto;
}
.sig-closing {
  max-width: 800px;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 300;
  line-height: 1.75;
  text-wrap: balance;
}
.sig-slogan {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.2;
  color: var(--sky);
}
.sig-slogan-pair {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.sig-translation {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--fg-2);
}
.sig-tagline {
  margin-top: -24px;
  font-size: 16px;
  color: var(--fg-3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- 제품 */
.lineup {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(110px, 16vh, 170px) clamp(90px, 14vh, 150px);
}
.lineup::before {
  opacity: 0.55;
}
.lineup > .wrap {
  position: relative;
}
.lineup-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.lineup-titles {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lineup-title {
  font-size: clamp(48px, 5.4vw, 80px);
  line-height: 1.05;
  font-weight: normal;
}
.lineup-title.latin {
  font-weight: 700;
  font-size: clamp(38px, 4vw, 60px);
  letter-spacing: -0.035em;
}
.lineup-side {
  max-width: 470px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  text-align: right;
}
.lineup-note {
  font-size: 15px;
  line-height: 1.85;
  color: var(--fg-2);
  text-wrap: balance;
}
.big-link {
  font-size: 20px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 9px;
}
.rail {
  margin-top: clamp(56px, 9vh, 100px);
}
.rail-list {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.rail-list::-webkit-scrollbar {
  display: none;
}
.pack {
  flex: 1 0 200px;
  max-width: 250px;
  scroll-snap-align: start;
}
.pack figure {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pack-img {
  position: relative;
  aspect-ratio: 230 / 356;
}
.pack-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  box-shadow: 0 1px 0 rgba(0, 64, 103, 0.06);
  transition: transform 0.6s var(--ease);
}
.pack:hover .pack-img img {
  transform: translateY(-6px);
}
.pack figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--fg);
}
.pack-kind {
  font-size: 12px;
  color: var(--caption);
}
.pack-name {
  font-size: 30px;
  line-height: 1.15;
}
.pack-en {
  font-size: 13px;
  color: var(--caption);
  font-weight: 500;
}
.rail-ctrl {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.rail-ctrl[hidden] {
  display: none;
}
.rail-btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-size: 18px;
}
.rail-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---------------------------------------------------------------- 문의 · 푸터 */
.contact {
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(110px, 16vh, 170px) clamp(80px, 12vh, 130px);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 56px;
}
.contact-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-title {
  font-size: clamp(29px, 3.1vw, 44px);
  font-weight: 300;
  line-height: 1.45;
}
.contact-lead {
  max-width: 520px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--fg-2);
}
.facts {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.facts dl > div,
.contact-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.facts dl > div:last-child,
.contact-list > div:last-child {
  border-bottom: 1px solid var(--line);
}
.facts dt,
.contact-list dt {
  font-size: 14px;
  color: var(--fg-3);
  font-weight: 500;
}
.facts dd {
  font-size: 15px;
  color: var(--fg-2);
}
.contact-list {
  align-self: start;
  margin-top: 36px;
}
.contact-list > div {
  padding: 18px 0;
}
.contact-list dd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
}
.contact-list dd a {
  text-decoration: none;
}
.contact-list dd a:hover {
  text-decoration: underline;
}
.contact-list .map-links a {
  text-decoration: underline;
}
.site-footer {
  background: var(--bg);
  color: var(--fg);
  padding-block: 48px 56px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  font-size: 13px;
  color: var(--fg-2);
}
.footer-brand img {
  height: 32px;
  width: auto;
}
.footer-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 32px;
  font-size: 13px;
  line-height: 1.7;
}
.footer-info > div {
  display: flex;
  gap: 12px;
}
.footer-info dt {
  flex: 0 0 auto;
  color: var(--fg-3);
}
.footer-info dd {
  color: var(--fg-2);
}
.copyright-side {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}
.copyright .credit {
  color: inherit;
  text-decoration: none;
}
.copyright .credit:hover,
.copyright .credit:focus-visible {
  color: var(--fg-2, inherit);
  text-decoration: underline;
}
.copyright .credit .arrow {
  margin-left: 2px;
}
.copyright {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  font-size: 12px;
  color: var(--fg-3);
}

/* 영문 안내 */
.lang-hint {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 20px;
  background: var(--white);
  color: var(--navy);
  border: 1px solid rgba(0, 64, 103, 0.2);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}
.lang-hint[hidden] {
  display: none;
}
.lang-hint a {
  font-weight: 500;
}
.lang-hint button {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 20px;
}

/* 404 */
.page-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  text-align: center;
}
.nf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;
}
.nf h1 {
  margin-top: 16px;
  font-size: 40px;
  line-height: 1.2;
}
.nf .latin {
  color: var(--sky);
  font-weight: 500;
}
.nf-links {
  margin-top: 16px;
  display: flex;
  gap: 24px;
}

/* ---------------------------------------------------------------- 좁은 화면 */
@media (min-width: 1024px) and (max-width: 1280px) {
  .cover-translation {
    top: 55%;
  }
}

@media (max-width: 1180px) {
  .nav ol {
    gap: 18px;
  }
  .nav-no {
    display: none;
  }
}
@media (max-width: 1023px) {
  :root {
    --header-h: 60px;
  }
  body {
    font-size: 16px;
  }
  .nav,
  .store-link {
    display: none;
  }
  .menu-btn {
    display: flex;
  }
  .header-tools {
    gap: 6px;
  }
  .lang-link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .brand-logo {
    height: 30px;
  }
  .gauge {
    display: none;
  }

  /* 표지: 세로 제목을 가운데 두고, 바다는 아래 */
  .sea--wide {
    display: none;
  }
  .sea--tall {
    display: block;
  }
  .cover-inner {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) auto auto 1fr auto;
    padding-bottom: 32px;
  }
  .cover-title {
    grid-column: 1;
    grid-row: 2;
    margin-top: 20px;
    font-size: clamp(40px, 6.4vh, 58px);
  }
  .cover-intro {
    grid-column: 1;
    grid-row: 3;
    margin-top: 26px;
    gap: 10px;
  }
  .cover-tagline {
    font-size: 17px;
  }
  .cover-slogan {
    grid-column: 1;
    grid-row: 2;
    margin-top: 20px;
  }
  .cover-translation {
    top: 8px;
    left: calc(100% + 12px);
    width: min(84px, calc((100vw - 100%) / 2 - 24px));
    font-size: 12px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
  .cover-lede {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    align-self: start;
    margin-top: 14px;
    font-size: 15px;
  }
  .cover-place {
    order: 9;
    position: absolute;
    left: var(--gutter);
    bottom: 28px;
    flex-direction: row;
    gap: 12px;
    align-items: baseline;
  }
  .cover-cue {
    display: none;
  }

  .sum {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 44px;
  }
  .sum-item,
  .sum-result {
    padding-right: 36px;
  }
  .sum-item:nth-child(2) .sum-op {
    display: none;
  }
  .sum-result {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    column-gap: 18px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
  }
  .sum-result .sum-fig {
    height: 96px;
    width: 100%;
  }
  .sum-fig {
    height: 96px;
  }

  /* 네 장: 무대는 머리 아래에 붙는 띠가 된다 */
  .voyage-grid {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }
  .stage {
    top: var(--header-h);
    z-index: 30;
    height: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transition: background-color 0.9s var(--ease);
  }
  .stage-inner {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding: 0 var(--gutter);
    height: 56px;
  }
  .stage-figure {
    flex: 0 0 auto;
  }
  .stage-svg {
    height: 42px;
  }
  .stage-heads {
    flex: 1;
  }
  .stage-head {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
  .stage-name {
    font-size: 26px;
    line-height: 1;
  }
  .stage-no {
    font-size: 12px;
    order: -1;
  }
  .stage-kw {
    font-size: 12px;
  }
  .stage-kw .latin {
    font-size: 14px;
  }
  .chapters {
    padding-inline: var(--gutter);
  }
  .chapter,
  .chapter:first-child {
    padding-block: 56px 56px;
    gap: 36px;
  }
  .stage-figure::before {
    display: none;
  }
  .chapter-head {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .chapter-head h2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .chapter-no {
    font-size: 13px;
    color: var(--accent);
  }
  .chapter-name {
    font-size: clamp(72px, 22vw, 108px);
    line-height: 1;
  }
  .chapter-kw {
    font-size: 13px;
    color: var(--accent);
  }
  .chapter-kw .latin {
    font-size: 15px;
  }
  .question {
    margin-bottom: -14px;
    font-size: 17px;
  }
  .ceo,
  .ruled-dl > div,
  .offline {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .features,
  .notes-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .ledger li {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ledger-src {
    grid-column: 1 / -1;
    margin-top: -8px;
  }
  .route-steps {
    grid-template-columns: repeat(5, minmax(56px, 1fr));
    overflow-x: auto;
  }
  .route-name {
    font-size: 14px;
  }
  .field-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fig--cinema,
  .fig--wide {
    margin-inline: calc(var(--gutter) * -1);
  }
  .fig--cinema figcaption,
  .fig--wide figcaption {
    padding-inline: var(--gutter);
  }

  .contact-grid,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-list {
    margin-top: 0;
  }
  .footer-info {
    grid-template-columns: minmax(0, 1fr);
  }
  .lineup-side {
    align-items: flex-start;
    text-align: left;
  }
  .pack {
    flex: 0 0 min(64vw, 240px);
  }
}
@media (max-width: 560px) {
  .fig-pair {
    gap: 14px;
  }
  .fig-pair--plant,
  .fig-pair--cook {
    grid-template-columns: minmax(0, 1fr);
  }
  .fig-pair--plant .fig--packing img,
  .fig-pair--cook .fig--micro img {
    aspect-ratio: 16 / 10;
  }
  .eq-word {
    font-size: 30px;
  }
  .sig-eq {
    font-size: 15px;
    gap: 10px;
  }
  .lang-hint {
    left: 12px;
    right: 12px;
    transform: none;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .stage-head,
  .voyage,
  .site-header {
    transition: none;
  }
}

/* ---------------------------------------------------------------- 4개 언어 전환 */
.lang-list,
.menu-langs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.lang-list {
  gap: 14px;
}
.lang-item {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--fg-3);
}
a.lang-item:hover {
  color: var(--fg);
  text-decoration: underline;
}
.lang-item.is-current {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.menu-langs {
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
}
.menu-langs .lang-item {
  font-size: 16px;
}
@media (max-width: 1023px) {
  .header-tools .lang-list {
    display: none;
  }
}

/* ---------------------------------------------------------------- 검토본 표시
   예시: 고객 확인 전 사실(HANDOVER 2절 번호). 번호를 확인 목록과 맞춰 본다. 알약 아닌 각진 괘선 상자.
   연출: 생성 이미지임을 캡션·사진 구석에 늘 밝힌다. */
.ex {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 5px 0;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  color: #b4431f;
  background: #fff4ec;
  vertical-align: 0.15em;
  white-space: nowrap;
  text-decoration: none;
}
[data-tone='sea'] .ex,
[data-tone='shallow'] .ex,
[data-tone='deep'] .ex,
.site-footer .ex {
  color: #ffd2b8;
  background: rgba(180, 67, 31, 0.35);
}
.contact-list dd .ex,
.menu-inner > .ex,
.lineup-side .ex,
.product-specs .ex {
  align-self: flex-start;
  justify-self: start;
  width: max-content;
}
.ex-no {
  font-weight: 500;
  opacity: 0.85;
}
.staged-tag {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--line-strong);
  font-family: var(--sans);
  color: var(--caption);
  white-space: nowrap; /* 'AI-generated image'가 중간에서 꺾이지 않게 한 덩어리로 넘긴다 */
}
.photo-tag {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.cover .photo-tag {
  bottom: auto;
  top: calc(var(--header-h) + 10px);
}
/* 좁은 화면에서는 세로 슬로건 옆 번역과 붙으므로 표지 아래 오른쪽으로 내린다 (261013) */
@media (max-width: 767px) {
  .cover .photo-tag {
    top: auto;
    bottom: 12px;
  }
}
.sig-horizon {
  position: relative;
}
.tbd {
  color: var(--fg-3);
}

/* ---------------------------------------------------------------- 제품 레일 → 제품 화면 링크 */
.pack-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.pack-name--local {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pack .pack-name--local {
  font-size: 24px;
}
html[lang='en'] .pack-name--local {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.pack-more {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.pack-link:hover .pack-more,
.pack-link:focus-visible .pack-more {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ---------------------------------------------------------------- 제품 화면 */
.product-hero,
.product-detail,
.product-others {
  background: var(--bg);
  color: var(--fg);
}
.product-hero {
  padding-block: calc(var(--header-h) + clamp(48px, 9vh, 96px)) clamp(56px, 9vh, 96px);
}
.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
}
.crumbs {
  margin: 0 0 clamp(36px, 6vh, 64px);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-3);
}
.crumbs a {
  color: var(--fg-2);
}
.crumbs .latin span {
  color: var(--fg-3);
}
.product-kind {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.product-title {
  margin: 0;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  font-weight: normal;
}
.product-title.pack-name--local {
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1.1;
}
.product-en {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-3);
}
.product-lead {
  margin: clamp(32px, 5vh, 48px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--fg);
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.55;
  color: var(--fg);
}
.product-desc {
  margin: 14px 0 0;
  font-size: 17px;
  color: var(--fg-2);
  max-width: 34em;
}
.product-buy {
  margin: clamp(28px, 5vh, 44px) 0 0;
}
.product-figure {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.product-fish {
  position: absolute;
  left: 0;
  top: 34%;
  width: 100%;
  max-width: none;
  opacity: 0.32;
  pointer-events: none;
}
.product-pack {
  position: relative;
  width: min(100%, 380px);
}
.product-pack img {
  width: 100%;
  box-shadow: 0 1px 0 rgba(0, 64, 103, 0.06);
}
.product-figure figcaption {
  position: relative;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--caption);
}
.product-detail {
  padding-block: clamp(40px, 7vh, 80px) clamp(80px, 12vh, 130px);
  border-top: 1px solid var(--line);
}
.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 110px);
}
.product-detail h2.label {
  margin: 0 0 18px;
}
.product-specs {
  margin: 0;
  border-top: 1px solid var(--fg);
}
.product-specs > div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 15px;
}
.product-specs dt {
  color: var(--fg-3);
  font-weight: 600;
}
.product-specs dd {
  margin: 0;
  color: var(--fg);
}
.product-note {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
  color: var(--fg-3);
}
.product-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--fg);
}
.product-steps li {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
}
.product-steps .latin {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.product-points {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.product-points h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
}
.product-points p {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg-2);
}
.product-others {
  padding-block: clamp(56px, 9vh, 96px) clamp(80px, 12vh, 130px);
  border-top: 1px solid var(--line);
}
.product-others-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 15px;
}
.product-others-head .label {
  margin: 0;
}
.others-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.others-list a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: end;
  padding-top: 16px;
  border-top: 1px solid var(--line-strong);
  text-decoration: none;
  color: var(--fg);
}
.others-list img {
  grid-row: 1 / 3;
  width: 72px;
  aspect-ratio: 230 / 356;
  object-fit: contain;
}
.other-name {
  font-size: 24px;
  line-height: 1.1;
}
.other-name.pack-name--local {
  font-size: 18px;
}
.other-en {
  font-size: 12px;
  color: var(--fg-3);
}
.others-list a:hover .other-name {
  text-decoration: underline;
  text-underline-offset: 6px;
}
@media (max-width: 1023px) {
  .product-grid,
  .product-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-figure {
    order: -1;
  }
  .product-pack {
    width: min(64%, 300px);
  }
  .others-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .crumbs {
    margin-bottom: 28px;
  }
  .product-desc,
  .product-steps li {
    font-size: 16px;
  }
  .others-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .others-list a {
    padding-block: 14px;
    border-top-color: var(--line);
  }
}

/* ---------------------------------------------------------------- 제품 연출 사진(shot-*) — 있으면 포장 도안 대신 쓴다 */
.pack-img--shot img {
  object-fit: cover;
  object-position: center 40%;
  box-shadow: none;
}
.product-figure--shot .product-pack {
  width: min(100%, 520px);
}
.product-figure--shot .product-pack img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  box-shadow: none;
}
.fig-pair--shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.fig-pair--shots .fig img {
  aspect-ratio: 3 / 2;
}
.product-plate {
  background: var(--bg);
  color: var(--fg);
  padding-bottom: clamp(40px, 7vh, 80px);
}
@media (max-width: 1023px) {
  .product-figure--shot .product-pack {
    width: min(100%, 420px);
  }
}
@media (max-width: 560px) {
  .fig-pair--shots {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------- 영덕 바다 실사(임에바) — 단색 면 사이의 사진 띠·배경 */
.photo-band {
  position: relative;
  margin: 0;
  height: clamp(320px, 62vh, 680px);
  overflow: hidden;
  background: var(--navy);
}
.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.photo-band figcaption {
  position: absolute;
  right: var(--gutter);
  bottom: 16px;
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.contact--photo {
  position: relative;
  overflow: hidden;
}
.contact-photo {
  position: absolute;
  inset: 0;
}
.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* 글자 대비를 위해 남색 덮개를 두껍게 — 등대 윤곽만 비친다 */
.contact-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 38, 63, 0.94) 0%, rgba(0, 64, 103, 0.86) 55%, rgba(0, 64, 103, 0.72) 100%);
}
.contact--photo .contact-grid {
  position: relative;
  z-index: 1;
}
.contact--photo > .photo-tag {
  top: auto;
  bottom: 14px;
  right: var(--gutter);
}