@charset "utf-8";

/* =========================================================
   웹폰트 — Pretendard 가변 폰트를 자체 호스팅한다.
   이름만 참조하면 폰트가 설치된 기기에서만 보이므로 직접 얹는다.
   font-display: swap 으로 로딩 전에는 폴백으로 즉시 표시한다.
   ========================================================= */
@font-face {
  font-family: "Pretendard";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/PretendardVariable.woff2") format("woff2");
}

/* =========================================================
   디자인 토큰
   색상·간격·타이포는 여기서만 정의하고 아래에서는 참조만 한다.
   ========================================================= */
:root {
  /* 브랜드 골드는 간판 색상번호(CMYK 0 / 32.16 / 92.16 / 0)를 로고 원본에서
     추출한 값이다. 흰 배경 대비가 2.02:1 이므로 텍스트에 쓰면 안 된다.
     - 흰 배경 위 텍스트에는 --color-gold-deep (4.86:1)
     - 어두운 배경 위에는 --color-gold (8.84:1) 또는 --color-gold-soft
     - 골드 배경 버튼에는 잉크 텍스트 (8.84:1) */
  --color-gold: #d6b349;
  --color-gold-deep: #8c6d1f;
  --color-gold-soft: #e3cc85;
  --color-gold-pale: #f2e6c4;

  --color-ink: #1a1714;
  --color-ink-soft: #5b5149;
  /* 어두운 배경 위 보조 텍스트 */
  --color-ink-inverse-soft: #a49b93;

  --color-surface: #ffffff;
  --color-surface-muted: #fbf7ef;
  --color-paper: #f3ead9;
  --color-border: #e6ded2;
  --color-border-dark: #3a322c;

  /* 강조 숫자용 빨강. 크림 배경 대비 약 4.9:1 */
  --color-accent: #c0392b;
  /* 네이버 브랜드 그린. 흰 글자를 얹으면 대비가 2.25:1 로 큰 글자 기준(3:1)도
     못 넘긴다. 그래서 라벨은 잉크색(7.92:1)으로 쓴다.
     N 심볼만 흰색인데, 로고는 명도 대비 기준의 예외다. */
  --color-naver: #03c75a;
  --color-naver-dark: #02a349;

  /* 종이 질감. 외부 이미지 없이 SVG 노이즈를 깐다. */
  --texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

  /* 간격 — 4px 배수 스케일 */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* 타이포 — clamp 로 뷰포트에 따라 연속적으로 변한다. */
  --font-body: "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --text-2xl: clamp(1.875rem, 1.2rem + 2.8vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.3rem + 4vw, 4rem);
  --leading-tight: 1.25;
  --leading-normal: 1.75;

  /* 형태 */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(26, 23, 20, 0.04), 0 8px 24px rgba(26, 23, 20, 0.06);
  --shadow-rail: 0 8px 32px rgba(26, 23, 20, 0.18);
  --container-max: 1120px;
  --container-narrow: 680px;

  /* 모션 */
  --reveal-distance: 2rem;
  --reveal-duration: 0.7s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 모바일 하단 고정 바 높이. body 여백 확보에 재사용한다. */
  --cta-bar-height: 3.75rem;

  /* 고정 레일 폭 + 좌우 여백. 본문이 레일 밑으로 들어가지 않게 확보한다. */
  --rail-width: 7.5rem;
  --rail-space: calc(var(--rail-width) + var(--space-md) * 2);
}

/* =========================================================
   기본 설정
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;

  /* 하단 고정 바에 푸터가 가리지 않도록 확보한다. */
  padding-bottom: var(--cta-bar-height);
}

h1, h2, h3 {
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  word-break: keep-all; /* 한글이 단어 중간에서 끊기지 않게 한다 */
}

p { margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl, dd { margin: 0; }

figure, blockquote { margin: 0; }

address { font-style: normal; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--color-gold-deep);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* sticky 헤더에 제목이 가리지 않게 한다 */
}

/* 레일이 나타나는 구간에서는 본문 오른쪽을 비워 둔다.
   레일은 position:fixed 라 문서 흐름을 밀지 않으므로, 본문이 직접 자리를 양보해야 한다.
   컨테이너(1120px) 양옆 여백이 레일보다 넓어지는 90em 부터는 필요 없다. */
@media (min-width: 64em) {
  body {
    padding-bottom: 0;
    padding-right: var(--rail-space);
  }

  /* 레일이 없는 페이지(개인정보 처리방침 등)는 오른쪽 여백을 비우지 않는다. */
  body.no-rail { padding-right: 0; }
}

@media (min-width: 90em) {
  body { padding-right: 0; }
}

/* =========================================================
   스크롤 등장 연출 (밑에서 위로)
   JS 가 data-reveal 요소에 is-visible 을 붙인다.
   JS 실패 시에도 내용이 보이도록, 숨김은 .js-reveal 이 붙은 뒤에만 적용한다.
   ========================================================= */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--ease-out),
    transform var(--reveal-duration) var(--ease-out);
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* 같은 그룹 안에서 순차적으로 올라오게 한다 */
.js-reveal [data-reveal]:nth-child(2) { transition-delay: 0.1s; }
.js-reveal [data-reveal]:nth-child(3) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* 인쇄할 때는 스크롤이 없어 등장 연출이 발동하지 않는다.
   이 규칙이 없으면 본문이 통째로 빈 페이지로 출력된다. */
@media print {
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .cta-rail,
  .cta-bar,
  .site-header { display: none; }

  body { padding-bottom: 0; }
}

/* =========================================================
   유틸리티
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-gold-deep);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

.container--narrow { max-width: var(--container-narrow); }

@media (min-width: 48em) {
  .container { padding-inline: var(--space-md); }
}

/* 모바일 전용 줄바꿈. 48em 이상에서는 줄바꿈을 없앤다. */
@media (min-width: 48em) {
  br.br-m { display: none; }
}

/* 섹션 위에 붙는 작은 라벨 */
.eyebrow {
  margin-bottom: var(--space-sm);
  color: var(--color-gold-deep);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* 굵은 디스플레이 제목. 상하 괘선으로 감싼다. */
.display {
  display: inline-block;
  padding-block: var(--space-xs);
  border-block: 3px solid currentColor;
  font-size: var(--text-2xl);
  font-weight: 800;
}

/* 글자 뒤를 채우는 하이라이트. 잉크 텍스트와 대비 8.84:1.
   줄바꿈되어도 각 줄에 배경과 안쪽 여백이 유지되도록 box-decoration-break 를 쓴다. */
.marker {
  padding-inline: 0.15em;
  background-color: var(--color-gold);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  /* 골드 배경 위 잉크 글자라 히어로 제목의 그림자는 오히려 지저분해 없앤다. */
  text-shadow: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* =========================================================
   버튼
   ========================================================= */
.button {
  display: inline-block;
  padding: 0.875rem var(--space-lg);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.button:hover { transform: translateY(-2px); }

/* 골드 배경 + 잉크 텍스트. 대비 8.84:1 로 WCAG AA 를 넘는다. */
.button--primary {
  background-color: var(--color-gold);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}

.button--primary:hover { background-color: var(--color-gold-deep); color: var(--color-surface); }

.button--ghost {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.button--ghost:hover { background-color: var(--color-ink); color: var(--color-surface); }

/* 강조용 큰 버튼 */
.button--lg {
  padding: 1rem var(--space-xl);
  font-size: var(--text-lg);
}

/* =========================================================
   헤더 / 내비게이션
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 4.25rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-decoration: none;
}

/* 로고 심볼은 원본 비율(264x256)을 유지한다. */
.logo__mark {
  width: auto;
  height: 1.75rem;
  flex-shrink: 0;
}

/* 간판에서 추출한 로고 락업. 상호가 이미지 안에 있다. */
.logo__lockup {
  width: auto;
  height: 1.75rem;
}

@media (min-width: 48em) {
  .logo__lockup { height: 2.125rem; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* 네이버 블로그 버튼 */
.naver-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.25rem;
  padding: 0 0.75rem 0 0.5rem;
  background-color: var(--color-naver);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.naver-btn:hover { background-color: var(--color-naver-dark); }

.naver-btn__mark {
  width: 1.125rem;
  height: 1.125rem;
  color: #fff; /* 로고 심볼. 대비 기준 예외 */
}

.nav-toggle {
  width: 2.75rem; /* 터치 목표 최소 44px */
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: var(--color-ink);
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: relative;
}

.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 4px; }

/* 기본값은 '보임'이다. JS 가 로드되면 data-open="false" 를 붙여 접는다.
   JS 가 실패해도 메뉴가 사라지지 않도록 하기 위한 순서다. */
.nav { flex-basis: 100%; }

.nav[data-open="false"] { display: none; }

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
}

.nav__list a {
  display: block;
  padding-block: var(--space-2xs);
  font-weight: 600;
  text-decoration: none;
}

.nav__list a:hover { color: var(--color-gold-deep); }

@media (min-width: 48em) {
  .nav-toggle { display: none; }

  .nav,
  .nav[data-open="false"] {
    display: block;
    flex-basis: auto;
  }

  /* 모바일에서는 로고 옆(오른쪽 끝)에 있던 네이버 버튼을
     데스크톱에서는 메뉴 오른쪽으로 옮긴다. */
  .logo { order: 1; }
  .nav { order: 2; margin-left: auto; }
  .header-actions { order: 3; margin-left: var(--space-lg); }

  .nav__list {
    flex-direction: row;
    gap: var(--space-lg);
    padding-block: 0;
  }

  .nav__list a { padding-block: 0; }
}

/* =========================================================
   고정 문의 레일 (데스크톱) / 하단 바 (모바일)
   ========================================================= */
.cta-rail { display: none; }

@media (min-width: 64em) {
  .cta-rail {
    display: block;
    position: fixed;
    top: 50%;
    right: var(--space-md);
    z-index: 15;
    width: 7.5rem;
    padding: var(--space-md) var(--space-xs);
    transform: translateY(-50%);
    background-color: var(--color-ink);
    /* 흰 테두리(투명도 90%) + 그림자로 밝은/어두운 섹션 어디서도 뜨게 한다.
       특히 수상내역(어두운 배경) 위에서 묻히지 않도록. */
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
    text-align: center;
  }

  .cta-rail__label {
    color: var(--color-gold);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.2;
  }

  /* 전화문의 / 온라인문의 두 버튼. */
  .cta-rail__btn {
    display: block;
    margin-top: var(--space-sm);
    padding: 0.4rem var(--space-2xs);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  /* 전화문의 — 골드 채움(잉크 글자, 대비 8.84:1). 번호는 한 줄. */
  .cta-rail__btn--tel {
    background-color: var(--color-gold);
    color: var(--color-ink);
  }

  .cta-rail__btn--tel:hover { background-color: var(--color-gold-soft); }

  .cta-rail__btn-label {
    display: block;
    font-size: var(--text-sm);
  }

  .cta-rail__num {
    display: block;
    margin-top: 0.05rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }

  /* 온라인문의 — 골드 테두리(어두운 배경 위 골드 글자 8.84:1). */
  .cta-rail__btn--online {
    margin-top: var(--space-xs);
    border-color: var(--color-gold);
    color: var(--color-gold);
    font-size: var(--text-sm);
  }

  .cta-rail__btn--online:hover {
    background-color: var(--color-gold);
    color: var(--color-ink);
  }
}

.cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: var(--cta-bar-height);
  border-top: 1px solid var(--color-border-dark);
}

.cta-bar a {
  display: grid;
  place-items: center;
  font-weight: 700;
  text-decoration: none;
}

.cta-bar__tel {
  background-color: var(--color-gold);
  color: var(--color-ink);
}

.cta-bar__mail {
  background-color: var(--color-ink);
  color: var(--color-gold);
}

@media (min-width: 64em) {
  .cta-bar { display: none; }
}

/* =========================================================
   히어로
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  color: var(--color-surface);
  /* 하단은 바로가기 바가 여백 없이 붙는다. */
  padding-block: var(--space-2xl) 0;
}

/* 배경 사진. img 로 두어 브라우저가 미리 받아 LCP 를 앞당긴다. */
/* 꽈배기 접시는 원본 오른쪽에 있다. 좁은 화면에서 가운데를 잡으면
   도마와 수저만 남아 음식이 사라진다. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 76% 38%;
}

@media (min-width: 64em) {
  .hero__bg { object-position: center 40%; }
}

/* 어두운 갈색 오버레이. 이 값(0.68)은 배경에서 가장 밝은 지점 기준으로
   흰 글자 대비 4.5:1 을 넘도록 계산한 것이다. 함부로 낮추지 않는다. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(46, 32, 18, 0.68) 0%,
    rgba(46, 32, 18, 0.72) 100%
  );
}

.hero__inner {
  display: grid;
  gap: var(--space-lg);
  min-height: 60vh;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding-bottom: var(--space-2xl);
}

.hero__copy {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
}

.hero__logo {
  width: auto;
  height: 3.5rem;
}

.hero__trademark {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold-soft);
}

/* 어두운 오버레이 위에서는 빨강(#c0392b)이 묻힌다. 금색 계열로 강조한다. */
.hero__trademark strong {
  color: var(--color-gold);
  font-weight: 800;
}

.hero__title {
  font-size: var(--text-3xl);
  font-weight: 800;
  /* 사진 위 글자라 얇은 그림자로 경계를 살린다. */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__lead {
  max-width: 34em;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-lg);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  word-break: keep-all; /* '전수창 / 업입니다' 처럼 단어 중간에서 끊기지 않게 */
}

/* 어두운 히어로 위 강조 — 밝은 금색 볼드. */
.hero__hl {
  color: var(--color-gold-soft);
  font-weight: 800;
}

/* 수상·인증을 한 줄 칩으로. 근거를 짧게 보여 준다. */
/* 모바일에서는 스티커 3개를 세로로 가지런히 쌓는다(2+1 로 어색하게 접히지 않도록).
   48em 이상에서는 한 줄(가로)로 배치한다. */
.hero__chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

@media (min-width: 48em) {
  .hero__chips {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
  }
}

/* 로고 자리에 올린 수상·인증 스티커. 사진 위 가독성을 위해 반투명 배경을 깐다. */
.hero__chips li {
  padding: 0.25rem 0.6rem;
  background-color: rgba(26, 23, 20, 0.45);
  border: 1px solid rgba(214, 179, 73, 0.6);
  border-radius: var(--radius-pill);
  color: var(--color-gold-soft);
  font-size: 0.7rem; /* 모바일 스티커 글자는 작게 */
  font-weight: 700;
  backdrop-filter: blur(2px);
}

/* PC 에서는 스티커 글자를 1pt 줄인다. */
@media (min-width: 64em) {
  .hero__chips li { font-size: calc(var(--text-sm) - 1pt); }
}

/* 히어로 안의 상담전화·온라인 문의 버튼은 모바일에서 숨긴다(하단 고정 바가 대신).
   48em 이상에서만 보인다. */
.hero__actions {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

@media (min-width: 48em) {
  .hero__actions { display: flex; }
}

/* 상담전화. 사진 위에서는 골드 바탕이 가장 잘 읽힌다(잉크 대비 8.84:1). */
.hero__call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.875rem var(--space-lg);
  background-color: var(--color-gold);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero__call:hover {
  transform: translateY(-2px);
  background-color: var(--color-gold-soft);
}

/* 온라인 문의. 보조 동선이라 테두리만 준다. */
.hero__inquiry {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem var(--space-lg);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-pill);
  color: var(--color-surface);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hero__inquiry:hover {
  transform: translateY(-2px);
  background-color: var(--color-surface);
  color: var(--color-ink);
}

.hero__call-label {
  padding-right: var(--space-sm);
  border-right: 1px solid rgba(26, 23, 20, 0.35);
  font-weight: 700;
}

.hero__call-num {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
}

@media (min-width: 64em) {
  .hero__inner { min-height: 66vh; }
}

/* =========================================================
   히어로 하단 바로가기 바
   ========================================================= */
.quicklinks {
  /* 모바일에서는 히어로 상·하 여백을 맞추기 위해 상단 마진을 두지 않는다. */
  margin-top: 0;
  background-color: var(--color-gold);
  border-top: 1px solid rgba(26, 23, 20, 0.12);
}

@media (min-width: 48em) {
  .quicklinks { margin-top: var(--space-xl); }
}

.quicklinks__list {
  display: grid;
  grid-template-columns: 1fr;
}

.quicklinks li + li { border-top: 1px solid rgba(26, 23, 20, 0.18); }

.quicklinks a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  color: var(--color-ink); /* 골드 위 잉크, 대비 8.84:1 */
  font-size: var(--text-lg);
  font-weight: 800;
  text-decoration: none;
}

/* 아이콘 + 라벨 묶음 */
.quicklinks__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.quicklinks__ico {
  width: 1.35em;
  height: 1.35em;
  flex-shrink: 0;
}

/* GO 는 단순한 화살표로. 호버 시 살짝 오른쪽으로 움직인다. */
.quicklinks__go {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-ink);
  transition: transform 0.2s ease;
}

.quicklinks__go svg {
  width: 1.4rem;
  height: 1.4rem;
}

.quicklinks a:hover .quicklinks__go { transform: translateX(4px); }

@media (min-width: 48em) {
  .quicklinks__list { grid-template-columns: repeat(3, 1fr); }

  .quicklinks li + li {
    border-top: 0;
    border-left: 1px solid rgba(26, 23, 20, 0.18);
  }

  .quicklinks a {
    justify-content: center;
    padding-block: var(--space-lg);
  }
}

/* =========================================================
   섹션 공통
   ========================================================= */
.section { padding-block: var(--space-xl); }

.section--paper {
  background-image: var(--texture-paper), linear-gradient(var(--color-surface-muted), var(--color-surface-muted));
}

.section--gold {
  background-image:
    var(--texture-paper),
    linear-gradient(160deg, var(--color-paper) 0%, var(--color-gold-pale) 100%);
}

.section--dark {
  background-color: var(--color-ink);
  background-image: var(--texture-paper);
  color: var(--color-surface-muted);
}

/* 장점 카드(01·02·03) 배경 — 관리자(브랜드 소개)에서 카드별 이미지를 등록하면
   li.feature 인라인 style 의 --feature-photo 변수로 걸린다.
   본문 글자가 묻히지 않게 흰 반투명 레이어를 얹는다. */
.feature--photo {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.9)),
    var(--feature-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 수상내역 배경 — 시상식 사진 위에 어두운 레이어를 얹는다.
   넓은 화면에서는 background-attachment:fixed 로 패럴럭스를 준다
   (모바일은 fixed 렌더가 불안정해 스크롤로 둔다). */
#awards {
  background-color: var(--color-ink);
  background-image:
    linear-gradient(rgba(18, 14, 10, 0.9), rgba(18, 14, 10, 0.92)),
    url("../assets/award-photo-1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 48em) {
  #awards { background-attachment: fixed; }
}

@media (prefers-reduced-motion: reduce) {
  #awards { background-attachment: scroll; }
}

.section__head { margin-bottom: var(--space-xl); }

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* 읽기 좋은 줄 길이(36em) 제한은 설명문에만 건다.
   제목까지 묶으면 긴 제목이 PC 에서 불필요하게 줄바꿈된다. */
.section__head--center .eyebrow,
.section__head--center .section__lead {
  max-width: 36em;
  margin-inline: auto;
}

/* 어두운 배경에서는 진한 금색이 묻히므로 밝은 금색으로 바꾼다 */
.section--dark .eyebrow { color: var(--color-gold); }

.section__lead {
  margin-top: var(--space-md);
  color: var(--color-ink-soft);
}

.section--dark .section__lead { color: var(--color-gold-soft); }

@media (min-width: 48em) {
  .section { padding-block: var(--space-2xl); }
}

/* =========================================================
   장점 카드
   ========================================================= */
.feature-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.feature {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* 카드 우상단에 크게 깔리는 번호 */
.feature__num {
  position: absolute;
  top: -0.3em;
  right: 0.1em;
  color: var(--color-paper);
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

/* 헤드라인 포인트 컬러 — 배너 아래 띠(골드) 계열. 흰 배경 대비를 위해
   텍스트용 진한 골드(--color-gold-deep, 4.86:1)를 쓴다. */
.feature__title {
  position: relative;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-gold-deep);
}

.feature__desc {
  position: relative;
  margin-top: var(--space-xs);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* =========================================================
   슬로건 인용
   ========================================================= */
.pullquote {
  margin-top: var(--space-xl);
  text-align: center;
}

.pullquote blockquote {
  display: inline-block;
  padding-block: var(--space-sm);
  border-block: 2px solid var(--color-gold);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* =========================================================
   제조 과정 영상
   원본이 720x840 세로형이라 넓게 늘리면 뭉갠다. 원본 폭을 넘기지 않는다.
   ========================================================= */
.video-card {
  max-width: 26rem;
  margin: var(--space-xl) auto 0;
}

.video-card__player {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.video-card__caption {
  margin-top: var(--space-sm);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  text-align: center;
}

/* 과장으로 읽힐 수 있는 문구 아래 붙는 단서. 작지만 읽히는 크기를 유지한다. */
.disclaimer {
  max-width: 44em;
  margin: var(--space-lg) auto 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  text-align: center;
}

.disclaimer--dark { color: var(--color-ink-inverse-soft); }

/* =========================================================
   수상내역
   ========================================================= */
.award-list {
  max-width: 52rem;
  margin-inline: auto;
  border-top: 1px solid var(--color-border-dark);
}

.award {
  position: relative; /* award__link::after 의 기준 */
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border-dark);
  transition: background-color 0.2s ease;
}

.award:hover { background-color: rgba(214, 179, 73, 0.08); }

.award__year {
  color: var(--color-gold);
  font-size: var(--text-lg);
  font-weight: 800;
}

.award__name {
  font-size: var(--text-xl);
  font-weight: 700;
}

.award__link {
  text-decoration: none;
}

/* 행 전체를 클릭 영역으로 넓힌다. 링크 이름은 제목 텍스트만 유지된다. */
.award__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.award__link:hover { text-decoration: underline; }

/* 행 전체에 포커스 링을 그린다.
   :has() 를 못 쓰는 브라우저에서는 링크 자체의 기본 포커스 링이 남아야 하므로,
   outline 제거는 :has() 가 동작할 때만 적용한다. */
@supports selector(:has(*)) {
  .award__link:focus-visible { outline: none; }

  .award:has(.award__link:focus-visible) {
    outline: 3px solid var(--color-gold);
    outline-offset: -3px;
    border-radius: var(--radius-sm);
  }
}

.award__part {
  color: var(--color-gold-soft);
  font-size: var(--text-sm);
}

/* 기사 보기 — 골드 테두리 버튼. 행 전체가 링크라(cue 는 장식),
   행에 호버하면 버튼이 채워지고 화살표가 움직여 동적으로 반응한다. */
.award__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  justify-self: start;
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-pill);
  color: var(--color-gold);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.award__cue-arrow { transition: transform 0.25s ease; }

.award:hover .award__cue {
  background-color: var(--color-gold);
  color: var(--color-ink);
}

.award:hover .award__cue-arrow { transform: translate(2px, -2px); }

@media (min-width: 48em) {
  .award {
    grid-template-columns: 6rem 1fr auto;
    gap: var(--space-md) var(--space-lg);
    align-items: center;
    padding-block: var(--space-lg);
    padding-inline: var(--space-sm);
  }
}

/* 시상식 사진. 본문 옆에서 크게 끌지 않도록 작게 둔다. */
.award-photos {
  display: grid;
  gap: var(--space-md);
  max-width: 52rem;
  margin: var(--space-xl) auto 0;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* 원본 비율이 서로 달라(800x467, 800x360) 그대로 두면 아랫단이 어긋난다. */
.award-photos img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.award-photos figcaption {
  margin-top: var(--space-xs);
  color: var(--color-ink-inverse-soft);
  font-size: var(--text-sm);
  text-align: center;
}

/* =========================================================
   지점현황
   ========================================================= */
.store-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.store {
  /* 카드가 조금 더 얇아 보이도록 세로 여백을 줄인다. */
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.store--hq { border: 2px solid var(--color-gold); }

/* 배치를 보여 주기 위한 예시 카드. 실제 지점이 들어오면 통째로 지운다.
   점선 테두리와 흐린 글자로 '진짜가 아님'을 화면에서도 알 수 있게 한다. */
.store--sample {
  border-style: dashed;
  box-shadow: none;
  background: none;
  color: var(--color-ink-soft);
}

.store__badge {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 0.125rem var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-gold);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* 기본 배지 뒤에 와야 한다. 앞에 두면 .store__badge 가 나중에 나와 덮어쓴다. */
.store__badge--sample {
  background-color: transparent;
  border: 1px dashed var(--color-ink-soft);
  color: var(--color-ink-soft);
  font-weight: 600;
}

.store__name {
  font-size: var(--text-xl);
  font-weight: 800;
}

/* 주소·전화 앞에 아이콘. 여러 줄이 되어도 아이콘은 첫 줄에 맞춘다. */
.store__addr,
.store__tel {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
}

.store__addr {
  margin-top: var(--space-xs);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.store__tel {
  margin-top: var(--space-sm);
  font-weight: 800;
}

.store__ico {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  margin-top: 0.12em;
  color: var(--color-gold-deep);
}

.store--sample .store__ico { color: var(--color-ink-soft); }

.store-note {
  margin-top: var(--space-lg);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  text-align: center;
}

/* 지점 더보기 — 무JS 시 모두 보이고, JS 가 접었을 때만 추가 카드를 숨긴다. */
.store-grid[data-collapsed="true"] .store--extra { display: none; }

.store-more {
  margin-top: var(--space-lg);
  text-align: center;
}

/* =========================================================
   연혁 타임라인
   왼쪽 세로 축 하나에 연도·내용을 매다는 단순한 형태.
   화면 폭과 무관하게 같은 구조를 쓴다(모바일 우선).
   ========================================================= */
.timeline {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
  padding-left: 1.75rem;
}

/* 세로 축. 첫 점과 마지막 점 사이에만 걸치도록 위아래를 조금 들인다. */
.timeline::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.375rem;
  width: 2px;
  background-color: var(--color-gold);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-lg);
}

.timeline__item:last-child { padding-bottom: 0; }

/* 축 위의 점. 점은 li(본문 시작선) 기준으로 잡히므로, 축(ol 좌측 0.4375rem)에
   맞추려면 padding 만큼 왼쪽으로 당긴다. -1.75rem = li 좌측이 곧 ol 좌측. */
.timeline__item::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.45rem;
  width: 0.875rem;
  height: 0.875rem;
  background-color: var(--color-surface);
  border: 2px solid var(--color-gold-deep);
  border-radius: 50%;
}

.timeline__year {
  color: var(--color-gold-deep);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.timeline__text {
  margin-top: var(--space-2xs);
  font-weight: 600;
  word-break: keep-all;
}

@media (min-width: 48em) {
  /* 넓은 화면에서는 연도를 축 왼쪽 여백으로 빼서 내용과 한 줄에 나란히 둔다.
     연도는 흐름에서 빠지므로(절대배치) 본문은 padding-left 만큼 오른쪽에서 시작한다. */
  .timeline { padding-left: 7rem; }

  .timeline::before { left: 5.9375rem; }

  /* 축(6rem)에 점 중심을 맞춘다. li 좌측 기준 -1.4375rem 지점. */
  .timeline__item::before { left: -1.4375rem; }

  /* 연도를 여백(li 좌측 -7rem)으로 옮겨 축 쪽으로 오른쪽 정렬한다. */
  .timeline__year {
    position: absolute;
    left: -7rem;
    top: 0;
    width: 5rem;
    text-align: right;
  }

  .timeline__text { margin-top: 0; }
}

/* 연혁 항목 안의 작은 링크 버튼 (예: 상표등록증 보기).
   paper 배경 위 텍스트라 골드-딥으로 대비를 확보한다(4.86:1). */
.cert-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  margin-left: var(--space-xs);
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--color-gold-deep);
  border-radius: var(--radius-pill);
  color: var(--color-gold-deep);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cert-link:hover {
  background-color: var(--color-gold-deep);
  color: var(--color-surface);
}

/* =========================================================
   브랜드 이야기 — 3단 카드 (참고 시안: 가운데 반전 강조 + 하단 아이콘)
   모바일은 1단, 62em 이상에서 3단. 카드 높이는 grid 가 맞춰 준다.
   ========================================================= */
.story-cards {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  /* 세 카드 높이를 가장 긴 카드에 맞춰 동일하게 늘린다(기본 stretch). */
}

@media (min-width: 62em) {
  .story-cards { grid-template-columns: repeat(3, 1fr); }

  /* 세 카드 높이를 360px 로 고정한다. 본문이 들어가도록 여백·행간을 조인다. */
  .story-card {
    height: 360px;
    padding: var(--space-md);
  }

  .story-card__desc { line-height: 1.5; }

  /* 영상은 제목·캡션을 뺀 남은 공간(420px 기준)을 채우고 세로를 잘라 맞춘다. */
  .story-card__video {
    flex: 1;
    min-height: 0;
    margin-top: var(--space-sm);
    object-fit: cover;
  }
}

.story-card {
  position: relative; /* 우상단 일러스트의 기준 */
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* 일러스트가 우상단에 오므로, 겹치지 않게 머리말·제목 오른쪽을 비운다. */
.story-card__eyebrow {
  padding-right: 3.5rem;
  color: var(--color-gold-deep);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.story-card__title {
  margin-top: var(--space-sm);
  padding-right: 3.5rem;
  font-size: var(--text-xl);
  font-weight: 800;
}

.story-card__desc {
  margin-top: var(--space-sm);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* 본문 내 포인트 강조 — 밝은 카드는 진한 골드, 반전(어두운) 카드는 밝은 골드. */
.story-card__desc strong {
  color: var(--color-gold-deep);
  font-weight: 800;
}

.story-card--feature .story-card__desc strong { color: var(--color-gold); }

/* 특별 강조(예: 75개 업소) — 레이아웃을 밀지 않는 형광펜 밑줄. */
.story-hl {
  color: var(--color-gold-deep);
  font-weight: 800;
  background: linear-gradient(transparent 58%, var(--color-gold-soft) 0);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 일러스트는 카드 우상단에 고정한다(세 카드 통일). */
.story-card__icon {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  color: var(--color-gold);
}

.story-card__icon svg {
  width: 3rem;
  height: 3rem;
}

/* 가운데 강조 카드 — 어두운 배경으로 반전. 사이트의 다른 어두운 섹션과 색을 맞춘다. */
.story-card--feature {
  background-color: var(--color-ink);
  background-image: var(--texture-paper);
  border-color: var(--color-border-dark);
  color: var(--color-surface-muted);
}

.story-card--feature .story-card__eyebrow { color: var(--color-gold); }
.story-card--feature .story-card__desc { color: var(--color-gold-soft); }
.story-card--feature .story-card__icon { color: var(--color-gold); }

/* 영상 카드 — 모바일에서는 4:3 로 잘라 높이를 줄여 다른 카드와 비슷하게 맞춘다.
   데스크톱(3단)에서는 카드 높이에 맞춰 남은 공간을 채운다(아래 62em 미디어쿼리). */
.story-card__video {
  margin-top: var(--space-md);
  width: 100%;
  height: 15rem;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-ink);
}

.story-card__caption {
  margin-top: var(--space-sm);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* =========================================================
   대표의 말 — 포스터 세 컷을 한 줄로 나란히 + 아래 텍스트
   ========================================================= */
.poster-collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.poster-collage__item {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease-out);
}

.poster-collage__item img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 48em) {
  .poster-collage { gap: var(--space-md); }

  /* 호버하면 살짝 떠오른다(동적 반응). */
  .poster-collage__item:hover {
    transform: translateY(-0.4rem) scale(1.03);
    z-index: 2;
  }
}

.founder-note {
  max-width: 44rem;
  margin-inline: auto;
}

/* 제목 아래 골드 플러리시(물결 장식) */
.flourish {
  display: block;
  margin-top: var(--space-md);
  color: var(--color-gold);
}

.flourish svg {
  width: 6rem;
  height: auto;
}

.founder-note__body > p {
  margin-top: var(--space-md);
  color: var(--color-ink-soft);
}

/* 첫 문장은 헤드라인처럼 크고 분명하게 — 포인트 컬러(진한 골드).
   모바일에서는 2pt 줄이고, 48em 이상에서 원래 크기로 복원한다. */
.founder-note__body > p:first-child {
  margin-top: 0;
  margin-bottom: var(--space-md);
  color: var(--color-gold-deep);
  font-size: calc(var(--text-xl) - 2pt);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

@media (min-width: 48em) {
  .founder-note__body > p:first-child { font-size: var(--text-xl); }
}

.founder-note__body strong {
  color: var(--color-ink);
  font-weight: 800;
}

.founder-note__sign {
  margin-top: var(--space-md);
  font-weight: 800;
  text-align: right;
}

.founder-note__cta {
  margin-top: var(--space-lg);
  text-align: center;
}

/* =========================================================
   문의
   ========================================================= */
.contact-card {
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.contact-card__tel {
  display: inline-block;
  color: var(--color-ink);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.contact-card__hint {
  margin-top: var(--space-2xs);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* =========================================================
   창업상담 폼
   서버가 없어 제출 시 메일 앱을 연다. js/main.js 의 initContactForm 참고.
   ========================================================= */
.contact-form {
  display: grid;
  gap: var(--space-md);
  text-align: left;
}

.field {
  display: grid;
  gap: var(--space-2xs);
}

.field label {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 700;
}

.field__req { color: var(--color-accent); }

.field input,
.field textarea {
  width: 100%;
  padding: 0.75rem var(--space-sm);
  font: inherit;
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.field textarea { resize: vertical; }

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--color-gold-deep);
  outline-offset: 0;
}

.field [aria-invalid="true"] { border-color: var(--color-accent); }

/* 체크박스는 라벨을 옆에 두고, 터치 목표를 확보한다. */
.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-xs);
}

.field--check input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--color-gold-deep);
}

.field--check label {
  color: var(--color-ink);
  font-weight: 500;
  line-height: 1.6;
}

/* 동의 문구 + '개인정보 처리방침' 버튼 묶음. */
.field-check__text { line-height: 1.6; }

/* 모바일에서는 동의 문구 아래 줄에 블록으로 두어 잘리지 않고 보이게 한다.
   40em 이상에서는 문구 옆 인라인으로 붙인다. */
.privacy-link {
  display: block;
  width: fit-content;
  margin-top: var(--space-xs);
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--color-gold-deep);
  border-radius: var(--radius-pill);
  color: var(--color-gold-deep);
  font-size: calc(var(--text-sm) - 2pt); /* 기본보다 2pt 작게 */
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 40em) {
  .privacy-link {
    display: inline-block;
    margin-top: 0;
    margin-left: 0.4em;
  }
}

.privacy-link:hover {
  background-color: var(--color-gold-deep);
  color: var(--color-surface);
}

.contact-form__error {
  padding: var(--space-xs) var(--space-sm);
  background-color: #fdecea;
  border-radius: var(--radius-sm);
  color: #8c1d13; /* 연한 빨강 배경 위 대비 7.4:1 */
  font-size: var(--text-sm);
  font-weight: 600;
}

.contact-form__note,
.contact-form__fallback {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.contact-form button { justify-self: center; }

@media (min-width: 40em) {
  .contact-form { grid-template-columns: 1fr 1fr; }

  .field--full { grid-column: 1 / -1; }

  .contact-form__error,
  .contact-form__note { grid-column: 1 / -1; }
}

.contact-list {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  text-align: left;
}

.contact-list__row {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.contact-list dt {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 700;
}

.contact-list dd { font-weight: 500; }

@media (min-width: 40em) {
  .contact-card { padding: var(--space-xl); }

  .contact-list__row {
    grid-template-columns: 7rem 1fr;
    gap: var(--space-md);
    align-items: baseline;
  }
}

/* =========================================================
   하위 페이지 머리말
   ========================================================= */
.page-head {
  padding-block: var(--space-xl);
  background-image:
    var(--texture-paper),
    linear-gradient(180deg, var(--color-paper) 0%, var(--color-surface-muted) 100%);
  border-bottom: 1px solid var(--color-border);
}

.page-head__title {
  font-size: var(--text-2xl);
  font-weight: 800;
}

.page-head__lead {
  margin-top: 20px; /* 제목과의 간격을 20px 로 고정 */
  color: var(--color-ink-soft);
}

/* =========================================================
   게시판
   시안 단계라 정적 목록이다. 실제 글은 백엔드가 붙어야 한다.
   ========================================================= */
.board-notice {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.board { border-top: 2px solid var(--color-ink); }

.board__row {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.board__row--pinned { background-color: var(--color-surface-muted); }

.board__tag {
  justify-self: start;
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  color: var(--color-gold-deep);
  font-size: var(--text-sm);
  font-weight: 700;
}

.board__title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.board__title a { text-decoration: none; }

.board__title a:hover { text-decoration: underline; }

.board__meta {
  display: flex;
  gap: var(--space-md);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

@media (min-width: 48em) {
  .board__row {
    grid-template-columns: 5rem 1fr auto;
    gap: var(--space-md);
    align-items: center;
    padding-inline: var(--space-sm);
  }

  .board__tag { justify-self: center; }
}

/* =========================================================
   페이지네이션
   ========================================================= */
.pagination { margin-top: var(--space-xl); }

.pagination__list {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
}

.pagination a {
  display: grid;
  place-items: center;
  min-width: 2.75rem; /* 터치 목표 최소 44px */
  min-height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.pagination a:hover { border-color: var(--color-gold); }

.pagination a[aria-current="page"] {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-surface);
}

/* =========================================================
   공지 상세(글 보기) / 개인정보 처리방침
   ========================================================= */
.post__head {
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-ink);
}

.post__tag {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  color: var(--color-gold-deep);
  font-size: var(--text-sm);
  font-weight: 700;
}

.post__title {
  font-size: var(--text-2xl);
  font-weight: 800;
}

.post__meta {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* 본문 프로즈 — 공지 상세와 처리방침이 공유한다. */
.post__body,
.legal {
  margin-top: var(--space-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}

.post__body > * + *,
.legal > * + * { margin-top: var(--space-md); }

.legal h2 {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  font-weight: 800;
}

.post__body ul,
.legal ul {
  padding-left: 1.2em;
  list-style: disc;
}

.post__body li,
.legal li { margin-top: var(--space-2xs); }

.legal__foot,
.post__actions {
  margin-top: var(--space-xl);
  text-align: center;
}

/* 이전/다음 글 */
.post-nav {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.post-nav__item:hover { border-color: var(--color-gold); }

.post-nav__item--next { text-align: right; }

.post-nav__dir {
  color: var(--color-gold-deep);
  font-size: var(--text-sm);
  font-weight: 700;
}

.post-nav__title { font-weight: 600; }

@media (min-width: 48em) {
  .post-nav { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   푸터
   ========================================================= */
.site-footer {
  padding-block: var(--space-lg);
  background-color: var(--color-ink);
  color: var(--color-surface-muted);
}

.site-footer__top {
  display: grid;
  gap: var(--space-lg);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* HACCP 마크는 흰 배경째 잘라낸 이미지라, 어두운 푸터에서 흰 판 위에 올린다. */
/* HACCP 인증 — 전체적으로 작게. */
.footer-cert {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  justify-self: start;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-ink);
}

.footer-cert img {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.footer-cert span {
  font-size: 0.75rem;
  line-height: 1.45;
}

.footer-cert strong {
  display: block;
  font-weight: 800;
}

@media (min-width: 48em) {
  .site-footer__top {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.biz-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

.biz-info > div {
  display: flex;
  gap: var(--space-xs);
}

.biz-info dt {
  color: var(--color-gold-soft);
  font-weight: 600;
}

.site-footer__copy {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-dark);
  color: var(--color-ink-inverse-soft);
}