/* ═══════════════════════════════════════════════════════════
   BNSK LABS — Quiet Luxury Editorial
   축 1) 롱블랙: 읽히는 문장과 편집의 밀도
   축 2) Cartier: 여백과 이미지 중심의 절제
   축 3) Spyker: 제작 철학과 디테일을 차례로
   원칙: 한글은 이탤릭으로 만들지 않는다 · 본문은 화면에서 읽기 쉬운 산세리프
   타이포 체계(2026-09-29): 굵기 3단계 — 본문 400 · 본문 핵심어·버튼 600 · 제목·가격 700
   ═══════════════════════════════════════════════════════════ */

:root {
  --paper: #F7F5F1;
  --paper-deep: #EFEBE3;
  --ink: #171614;
  --text: #2E2B27;
  --soft: #6B655C;
  --line: #D9D3C7;
  --line-dark: #171614;
  --accent: #8C3B2E;

  --didone: "Bodoni Moda", serif;          /* 라틴 디스플레이 전용 */
  --kr-serif: "Nanum Myeongjo", serif;     /* 한글 제목 전용 — 이탤릭 금지 */
  --sans: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "Pretendard Variable", monospace;
  --pad: clamp(20px, 6vw, 96px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* 스티키 헤더에 가려지지 않도록 앵커 이동 시 여유 */
section[id] { scroll-margin-top: 96px; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;            /* 한글 단어 중간 줄바꿈 금지 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 날짜·금액·기간 등 짧은 정보 단위는 중간에서 끊기지 않게 */
.nw { white-space: nowrap; }
/* 의미 단위 줄바꿈 — 넓은 화면에선 자연 흐름, 좁은 화면(≤760px)에서만 개행 */
.br-m { display: inline; }
@media (min-width: 761px) { .br-m { display: none; } }
/* 숫자 범위 하이픈은 모바일에서도 또렷하게 — 디도체 대시는 가늘어 산세리프로 대체 */
.dash { font-family: var(--sans); font-weight: 900; }

::selection { background: var(--accent); color: var(--paper); }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
del { color: var(--soft); }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--soft);
}

.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ═══ HEADER — 조용한 고정 바 ═══════════════════════════ */
.site-head {
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px;
  padding: 12px var(--pad);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.head-mark {
  font-family: var(--didone); font-weight: 700; font-size: 19px;
  letter-spacing: .08em; color: var(--ink);
}
.head-nav { display: flex; gap: clamp(14px, 2.2vw, 30px); }
.head-nav a {
  font-size: 14px; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center;
  min-height: 44px;               /* 모바일 터치 영역 확보 */
  padding: 0 2px; position: relative;
}
.head-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 8px;
  width: 0; height: 1px; background: var(--accent);
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.head-nav a:hover::after { width: 100%; }
.head-offer { justify-self: end; color: var(--accent); white-space: nowrap; }

/* ═══ COVER — 고객의 필요가 먼저 보이는 첫 화면 ═════════ */
.cover {
  padding: clamp(44px, 7vh, 88px) var(--pad) clamp(44px, 6vh, 80px);
  text-align: center;
}
.cover-kicker {
  font-size: 15px; font-weight: 600; color: var(--ink);
  letter-spacing: .01em;
}
.cover-brand { margin: 8px 0 clamp(22px, 4vh, 44px); }

.cover-title {
  font-family: var(--kr-serif);
  font-weight: 400;
  font-size: clamp(29px, 7vw, 62px);
  line-height: 1.34;
  color: var(--ink);
  word-break: keep-all;
}
.cover-title strong { font-weight: 700; }

.cover-lede {
  font-size: clamp(16px, 1.5vw, 18.5px);
  color: var(--soft);
  margin-top: clamp(18px, 3vh, 30px);
  line-height: 1.85;
}
/* 신뢰 문구는 제목·가격에 강조를 내주고 조용히 뒤로 (09-30 검수 — 첫 화면 강조 집중) */
.cover-trust {
  font-size: 14px; font-weight: 400; color: var(--soft);
  margin-top: 14px;
}

.cover-cta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: clamp(20px, 3vh, 32px);   /* 본문-버튼 사이 여백 축소 */
}
.btn-line {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .08em;
  border: 1px solid var(--ink); color: var(--ink);
  padding: 16px 36px;
  transition: background .35s, color .35s;
}
.btn-line:hover { background: var(--ink); color: var(--paper); }

.cover-price {
  margin-top: 18px;
  font-size: 14.5px; color: var(--soft); line-height: 1.75;
}
.cover-price strong {
  display: block;
  font-weight: 700; color: var(--ink); font-size: 18px;
}

.cover-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4.5vh, 48px);
  border-top: 1px solid var(--line);
  padding-top: clamp(22px, 3.5vh, 32px);
}
.cover-meta li {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 13px; color: var(--soft); text-align: center;
}
.cover-meta .meta-label { order: 0; }
.cover-meta strong {
  order: 1;
  font-family: var(--didone);
  font-optical-sizing: auto;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700; color: var(--ink); line-height: 1.15;
}
/* 긴 값(포함 항목)은 같은 무게의 숫자 크기를 쓰면 스트립 균형이 깨진다 — 별도 스케일 */
.cover-meta strong.meta-long {
  font-family: var(--kr-serif);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.5; letter-spacing: .01em;
}
.cover-meta .meta-sub { order: 2; display: block; font-size: 11.5px; }
@media (max-width: 640px) {
  /* 항목 3개가 2+1로 엉키지 않게 세로 스택 — 각 항목이 하나의 정돈된 블록 */
  .cover-meta { flex-direction: column; align-items: center; gap: 22px; }
}

/* ═══ STUDIO STILL — 에디토리얼 이미지 밴드 ══════════════════
   모바일(≤640px): 전폭 이미지 + 오버레이 캡션(세로형 원본이라 대부분 표시됨)
   데스크톱(≥641px): 타이포 패널 + 원본 비율(2:3) 이미지 컬럼 — 잘림 0 */
.film {
  position: relative;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.film-media { position: relative; }
.film img {
  width: 100%; height: clamp(300px, 55vh, 620px);
  object-fit: cover; object-position: center 62%;
}
.film::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 110px;
  background: linear-gradient(to top, rgba(23, 22, 20, .48), transparent);
  pointer-events: none;
}
.film-cap {
  position: absolute; left: var(--pad); bottom: 18px;
  color: var(--paper); z-index: 1;
}
.film-text { display: none; }

@media (min-width: 641px) {
  .film {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }
  .film-media { border-left: 1px solid var(--line-dark); }
  .film img {
    width: auto;
    height: clamp(480px, 62vh, 680px);
    aspect-ratio: 2200 / 3300;   /* 원본 비율 — 크롭 없이 스틸라이프 전체 노출 */
  }
  .film::after { display: none; }
  .film-cap { display: none; }
  .film-text {
    display: flex; flex-direction: column; justify-content: center;
    gap: 20px;
    padding: clamp(36px, 6vw, 96px);
    min-height: 0;
  }
  .film-label { color: var(--accent); }
  .film-line {
    font-family: var(--kr-serif); font-weight: 700;
    font-size: clamp(24px, 2.6vw, 40px);
    line-height: 1.42; color: var(--ink); word-break: keep-all;
  }
}

/* ═══ SECTION SCAFFOLD ═══════════════════════════════════ */
.section { padding: clamp(72px, 11vh, 140px) var(--pad); }
.sec-head {
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 26px;
  margin-bottom: clamp(40px, 6vh, 72px);
  display: flex; flex-direction: column; gap: 14px;
}
.sec-no { color: var(--accent); }
.sec-title {
  font-family: var(--kr-serif);
  font-weight: 700;
  font-size: clamp(27px, 4.2vw, 52px);
  line-height: 1.26;
  color: var(--ink);
  word-break: keep-all;
}

/* ═══ 01 MANIFESTO → 03 THE FOUNDER — 수업 현장을 아는 사람이 만듭니다 ═══ */
.ed-article { max-width: 62ch; }
.ed-article p { font-size: clamp(16.5px, 1.35vw, 18px); line-height: 1.7; }
.ed-article p + p { margin-top: 1.4em; }
.ed-article .lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink); line-height: 1.7; }
.ed-article strong { font-weight: 700; color: var(--ink); }

/* ═══ 02 WORKS — 내 수업에 어울리는 사이트를 찾아보세요 ═══ */
.works-intro {
  max-width: 58ch;
  font-size: 15.5px;
  color: var(--soft);
  margin: -16px 0 clamp(28px, 5vh, 44px);
}
.works-intro strong { color: var(--ink); font-weight: 600; }

.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 5vh, 52px); }
.chip {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .04em;
  background: transparent; color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 22px;
  min-height: 44px;                /* 터치 영역 확보 */
  line-height: 1.1;
  cursor: pointer;
  transition: border-color .3s, background .3s, color .3s;
}
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.roster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
}

.work { transition: opacity .4s; }
.work.is-hidden { display: none; }
/* 기본은 대표 4종만 — '모두 보기' 또는 분야 필터 선택 시 전체 공개 */
.roster:not(.is-open):not(.is-filtered) .work.is-extra { display: none; }
/* 대표 4종은 2×2 (3열 고아 카드 방지) */
@media (min-width: 1081px) {
  .roster:not(.is-open):not(.is-filtered) { grid-template-columns: repeat(2, 1fr); }
}

.work-link {
  display: flex; flex-direction: column;
  aspect-ratio: auto; min-height: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 18px 20px 16px;
  position: relative;
  transition: border-color .4s, transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.work-link:hover {
  border-color: var(--ink);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -36px rgba(23,22,20,.4);
}
.work-link:hover .cov-field { box-shadow: inset 0 -2px 0 var(--accent); }
.work-link:hover .cov-foot i:last-child { color: var(--accent); }

.cov-no { color: var(--soft); }

.cov-shot {
  display: block;
  margin-top: 14px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-deep);
}
.cov-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  filter: grayscale(.85) sepia(.05) contrast(1.02);
  transition: filter .5s, transform .6s cubic-bezier(.22,1,.36,1);
}
.work-link:hover .cov-shot img { filter: none; transform: scale(1.035); }

.cov-field {
  font-family: var(--kr-serif);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--ink);
  word-break: keep-all;
  align-self: flex-start;
  margin: 16px 0 0;
  transition: box-shadow .3s;
}
.cov-desc { font-size: 13px; color: var(--soft); margin-top: 6px; }

.cov-foot {
  display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: 12px; margin-top: auto;
  font-size: 12px;
}
.cov-foot i { font-style: normal; }
.cov-foot i:last-child {
  color: var(--ink); display: inline-block;
  transition: color .3s, transform .35s cubic-bezier(.22,1,.36,1);
}
.work-link:hover .cov-foot i:last-child { color: var(--accent); transform: translateX(5px); }
.prem { color: var(--accent); }
.is-premium .cov-no { color: var(--accent); }

.roster-more { margin-top: clamp(24px, 4vh, 40px); text-align: center; }
.chip-more { padding: 13px 34px; }

/* 프리미엄 샘플 — 목록과 분리해 별도 비교 대상으로 */
.prem-show {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  border: 1px solid var(--line-dark);
  background: var(--paper-deep);
  padding: clamp(24px, 4vw, 48px);
  margin-top: clamp(12px, 2vh, 20px);
}
.prem-show .work { transition: none; }
.prem-label { color: var(--accent); display: block; margin-bottom: 12px; }
.prem-copy p {
  font-size: 15.5px; color: var(--text);
  max-width: 40ch; margin-bottom: 18px;
}
.prem-spec { margin-bottom: 22px; }
.prem-spec li {
  font-size: 11px; letter-spacing: .1em;
  padding: 5px 0 5px 16px; position: relative;
  color: var(--soft);
}
.prem-spec li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.prem-copy .btn-line { padding: 13px 28px; }

/* 사례 노트 — 자료가 적은 케이스의 받은 자료→정리→완성 흐름.
   프리미엄 박스(prem-show)와 달리 border-top 헤어라인 문법으로 구획 — 브라우징에서 이야기로 읽는 모드 전환 */
.case {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  border-top: 1px solid var(--line-dark);
  margin-top: clamp(36px, 6vh, 56px);
  padding-top: clamp(32px, 5vh, 48px);
}
.case-label { color: var(--accent); display: block; margin-bottom: 12px; }
.case-copy h3 {
  font-family: var(--kr-serif); font-weight: 700;
  font-size: clamp(21px, 2.1vw, 28px);
  color: var(--ink); word-break: keep-all;
  margin-bottom: 12px;
}
.case-lede { font-size: 15px; color: var(--soft); max-width: 52ch; }
.case-steps { margin-top: 18px; }
.case-steps li {
  border-top: 1px solid var(--line);
  padding: 14px 0 18px;
}
.case-steps .mono { color: var(--accent); display: block; margin-bottom: 7px; letter-spacing: .12em; }
.case-steps p { font-size: 14.5px; color: var(--text); line-height: 1.75; max-width: 54ch; }
.case-link {
  display: inline-flex; align-items: center;
  margin-top: 6px;
  font-size: 14px; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 4px;
  min-height: 44px;
  transition: color .3s;
}
.case-link:hover { color: var(--ink); }
.case-shot { margin: 0; }
.case-shot a { display: block; border: 1px solid var(--line); }
/* 공유 카드 원본 비율(1200×630) 무크롭 — height:auto로 HTML height 속성 힌트를 이겨야
   aspect-ratio가 살아나 좁은 화면에서도 원본 비율이 유지된다(시각 게이트 10-01) */
.case-shot img {
  width: 100%; height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover; object-position: center;
}
.case-shot figcaption { margin-top: 10px; }

@media (max-width: 880px) {
  .case { grid-template-columns: 1fr; }
}

.roster-note { margin-top: 30px; font-size: 13.5px; color: var(--soft); }

@media (max-width: 1080px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .prem-show { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .roster { grid-template-columns: 1fr; }
  .cover-lede br { display: none; }   /* 좁은 화면에선 자연 줄바꿈에 위임 (재작성 시 유실 복원) */
}
@media (max-width: 480px) {
  .cover-cta { flex-direction: column; align-items: stretch; }
  .cover-cta .btn-solid, .cover-cta .btn-line { text-align: center; }
}

/* ═══ 03 PRICE — 상품과 가격 ══════════════════════════════ */
.offer-strip {
  display: flex; align-items: baseline; gap: 22px;
  border: 1px solid var(--line);
  background: var(--paper-deep);
  padding: 18px 24px;
  margin-bottom: clamp(32px, 5vh, 52px);
}
.offer-tag { color: var(--accent); white-space: nowrap; }
.offer-strip p { font-size: 14.5px; color: var(--soft); }
.offer-strip strong { color: var(--ink); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.plan {
  border: 1px solid var(--line);
  padding: clamp(26px, 2.8vw, 40px);
  display: flex; flex-direction: column; gap: 13px;
  transition: border-color .4s, transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
.plan:hover { border-color: var(--ink); transform: translateY(-5px); box-shadow: 0 28px 56px -34px rgba(23,22,20,.35); }
.plan h3 {
  font-family: var(--kr-serif); font-weight: 700;
  font-size: clamp(22px, 2vw, 27px); color: var(--ink);
}
.plan-desc { font-size: 15.5px; color: var(--soft); min-height: 52px; }
.plan-price { font-family: var(--didone); line-height: 1.1; margin-top: 4px; }
.plan-price del { display: block; font-size: 17px; font-weight: 500; }
.plan-price ins { text-decoration: none; font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; color: var(--ink); }
.plan-price.care ins { font-size: clamp(21px, 2vw, 26px); }
.plan-note {
  font-size: 14px; letter-spacing: .02em;
  color: var(--text); line-height: 1.7;
}
.plan ul { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; }
.plan li { font-size: 13.5px; padding: 6px 0 6px 18px; position: relative; }
.plan li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

/* 프리미엄 포함 범위 한 줄 — 스탠다드 구성이 모두 들어간다는 것을 목록 앞에서 명시 */
.plan-inc { font-size: 13.5px; font-weight: 600; }
.plan-hi .plan-inc { color: #CE9B87; }

/* 케어 기대치 안내 문구 — 중요한 조건이라 본문 크기로 (09-30 검수: 12.5px → 14px) */
.plan-compare {
  font-size: 14px; line-height: 1.7; letter-spacing: .01em;
  color: var(--accent);
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}

.plan-hi { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.plan-hi h3, .plan-hi .plan-price ins { color: var(--paper); }
.plan-hi .plan-desc, .plan-hi .plan-note, .plan-hi del { color: rgba(247,245,241,.68); }
.plan-hi ul { border-color: rgba(247,245,241,.22); }
.plan-hi .plan-compare { color: #CE9B87; border-color: rgba(247,245,241,.22); }

/* 프리미엄 — 어떤 분께 맞는 상품인지 한 줄 + 결과물(P.16) 링크 */
.plan-who { font-size: 13.5px; line-height: 1.7; color: var(--soft); }
.plan-who a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
.plan-who a:hover { color: var(--ink); }
.plan-hi .plan-who { color: rgba(247,245,241,.68); }
.plan-hi .plan-who a { color: #CE9B87; }
.plan-hi .plan-who a:hover { color: var(--paper); }

/* 가격 카드 CTA — 재작성 시 유실됐던 규칙 복원(09-30 감사) */
.plan-cta {
  display: block; text-align: center;
  margin-top: 18px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--ink); color: var(--ink);
  padding: 13px 10px;
  transition: background .3s, color .3s, border-color .3s;
}
.plan-cta:hover { background: var(--ink); color: var(--paper); }
.plan-hi .plan-cta { border-color: var(--paper); color: var(--paper); }
.plan-hi .plan-cta:hover { background: var(--paper); color: var(--ink); }

/* 공통 안내 — 수정·납품·도메인 (견적서 유의사항 기준) */
.plans-common { margin-top: clamp(28px, 4vh, 44px); }
.plans-common > div {
  display: grid; grid-template-columns: 140px 1fr; gap: 18px;
  border-top: 1px solid var(--line);
  padding: 16px 2px;
}
.plans-common dt { color: var(--accent); padding-top: 3px; }
.plans-common dd { font-size: 14px; color: var(--soft); line-height: 1.75; }

@media (max-width: 960px) {
  .plans { grid-template-columns: 1fr; }
  .offer-strip { flex-direction: column; gap: 8px; }
}
@media (max-width: 640px) {
  .plans-common > div { grid-template-columns: 1fr; gap: 6px; }
}

/* ═══ 04 HERITAGE — 제작자 경험 ═══════════════════════════ */
.teaching { background: var(--paper-deep); }
.creed { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.4vw, 56px); margin-top: clamp(48px, 7vh, 80px); }
.creed-row { border-top: 1px solid var(--line-dark); padding-top: 24px; }
.creed-no {
  font-family: var(--didone);
  font-weight: 700; font-style: italic;
  font-size: clamp(30px, 3vw, 44px);
  color: var(--accent);
  display: block; margin-bottom: 14px;
}
.creed-row h3 {
  font-family: var(--kr-serif); font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink); margin-bottom: 12px; word-break: keep-all;
}
.creed-row p { font-size: 15.5px; }

/* 통합된 제작자 섹션 안에서 creed·heritage가 연달아 올 때의 호흡 */
.heritage { margin-top: clamp(48px, 7vh, 80px); }   /* sec-head와의 이중 헤어라인 규칙은 유지 불필요 — 이제 sec-head 바로 아래가 아님 */
.heritage-label { color: var(--accent); }
.heritage-line {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: 30px;
}
.heritage-line h4 {
  font-family: var(--kr-serif); font-weight: 700;
  font-size: clamp(20px, 2.1vw, 27px);
  color: var(--ink); margin: 8px 0 10px; word-break: keep-all;
}
.heritage-line p { font-size: 15px; }
.h-step { color: var(--soft); }
.heritage-sig {
  margin-top: clamp(40px, 6vh, 60px);
  font-family: var(--kr-serif); font-weight: 700;
  font-size: 26px; color: var(--ink);
  display: flex; align-items: baseline; gap: 16px;
}
.heritage-sig .mono { font-weight: 400; }

@media (max-width: 880px) {
  .creed, .heritage-line { grid-template-columns: 1fr; }
}

/* ═══ 05 THE MAKING — 제작은 이렇게 진행됩니다 ════════════ */
.chapters { }   /* 구분선은 sec-head가 담당 — 이중 헤어라인 방지 */
.chapter {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr;
  gap: clamp(20px, 3.4vw, 60px);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4.5vh, 46px) 0;
}
.ch-no {
  font-family: var(--didone);
  font-weight: 700; font-style: italic;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  color: var(--accent);
}
.ch-body h3 {
  font-family: var(--kr-serif);
  font-weight: 700; font-size: clamp(20px, 1.9vw, 25px);
  color: var(--ink);
  margin-bottom: 10px;
  word-break: keep-all;
}
.ch-body p { max-width: 62ch; font-size: clamp(15.5px, 1.2vw, 17px); }

@media (max-width: 640px) {
  .chapter { grid-template-columns: 1fr; gap: 8px; }
}

/* 케어는 표준 과정과 분리해 안내 */
.care-note {
  margin-top: clamp(36px, 6vh, 56px);
  border: 1px solid var(--line);
  background: var(--paper-deep);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.5vw, 40px);
}
.care-note h3 {
  font-family: var(--kr-serif); font-weight: 700;
  font-size: 19px; color: var(--ink); margin-bottom: 8px;
}
.care-note p { font-size: 15px; color: var(--text); }
.care-note a { color: var(--accent); font-weight: 600; }

/* ═══ 06 FAQ — 자주 묻는 질문 ═════════════════════════════ */
.faq-list { max-width: 880px; }   /* 구분선은 sec-head가 담당 */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  padding: clamp(18px, 3vh, 28px) 0;
  font-family: var(--kr-serif); font-weight: 700;
  font-size: clamp(17px, 1.7vw, 21px);
  color: var(--ink); word-break: keep-all;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "Q";
  font-family: var(--didone); font-style: italic; font-weight: 700;
  color: var(--accent); font-size: .95em; flex: none;
}
.faq-item summary::after {
  content: "+";
  margin-left: auto; flex: none;
  font-family: var(--didone); font-size: 1.25em; color: var(--ink);
  transition: transform .3s, color .3s;
}
.faq-item[open] summary::after { content: "–"; transform: rotate(360deg); color: var(--accent); }
.faq-item p {
  max-width: 62ch;
  font-size: 15.5px; color: var(--text);
  padding: 0 0 clamp(18px, 3vh, 28px) 28px;
}
.faq-item p a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.faq-item p a:hover { color: var(--ink); }

/* ═══ 07 CONTACT — 문의 ═══════════════════════════════════ */
.contact-inner { text-align: center; padding-top: clamp(10px, 3vh, 30px); }
.contact-big {
  font-family: var(--kr-serif); font-weight: 700;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.4; color: var(--ink); word-break: keep-all;
}
.contact-sub {
  max-width: 540px; margin: 20px auto 0;
  text-align: center;                  /* 제목·버튼과 같은 중심축 — 두 줄 문구도 중앙 정렬 */
  color: var(--soft); font-size: 15px; line-height: 1.8;
}
.btn-solid {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .08em;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 36px;
  transition: background .35s, border-color .35s;
}
.btn-solid:hover { background: var(--accent); border-color: var(--accent); }

.contact-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(24px, 4vh, 36px); }

/* 결정이 흩어지지 않게 — 주요 버튼(카톡) 1개만 크게, 나머지는 작은 보조 링크로 (09-30 검수) */
.contact-else {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 4px 30px;
  margin-top: 10px;
}
.contact-else a, .contact-else button {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--soft);
  background: none; border: 0; cursor: pointer;
  padding: 10px 4px; min-height: 44px;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line);
  transition: color .3s;
}
.contact-else a:hover, .contact-else button:hover { color: var(--accent); text-decoration-color: var(--accent); }

.prep-wrap {
  max-width: 780px;
  margin: clamp(32px, 5vh, 48px) auto 0;
  text-align: left;
}
.prep-intro { font-size: 15px; color: var(--ink); font-weight: 600; margin-bottom: 14px; }
.prep {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
}
.prep li { background: var(--paper); padding: 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.prep .mono { color: var(--accent); letter-spacing: .12em; }
.prep strong { font-family: var(--kr-serif); font-weight: 700; font-size: 17px; color: var(--ink); }
.prep em { font-style: normal; font-size: 12.5px; color: var(--soft); line-height: 1.6; }

.open-note { margin-top: 26px; font-size: 14.5px; color: var(--soft); }
.open-note strong { color: var(--ink); font-weight: 700; }

.copy-toast {
  margin-top: 18px; font-size: 12px; letter-spacing: .08em;
  color: var(--accent);
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s, transform .4s;
}
.copy-toast.is-on { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .prep { grid-template-columns: 1fr; }
  .contact-cta { flex-direction: column; align-items: stretch; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ═══ FOOTER ══════════════════════════════════════════════ */
.site-foot { border-top: 1px solid var(--line-dark); padding: clamp(44px, 7vh, 84px) var(--pad) 32px; }
.foot-sig {
  font-family: var(--kr-serif); font-weight: 700;
  font-size: clamp(18px, 2vw, 24px); color: var(--ink);
  text-align: center; margin-bottom: clamp(20px, 3vh, 32px);
}
.foot-mark { width: min(440px, 66%); margin: 0 auto clamp(32px, 5vh, 56px); mix-blend-mode: multiply; }
.foot-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); padding-top: 20px;
}
.foot-row a:hover { color: var(--accent); }

/* ═══ REVEAL ══════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
  .cov-shot img { transition: none; }
}

/* ═══ RESPONSIVE HEADER ═══════════════════════════════════ */
@media (max-width: 980px) {
  .site-head { grid-template-columns: 1fr auto; }
  .head-nav {
    order: 3; grid-column: 1 / -1;
    width: 100%; justify-content: space-between;
    border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px;
  }
  .head-offer { grid-column: 2; grid-row: 1; }
}
@media (max-width: 640px) {
  .site-head { padding: 10px var(--pad); gap: 12px; }
  .head-mark { font-size: 16px; }
  .mark-kr { display: none; }        /* 좁은 화면에서 로고 압축 */
  .head-nav a { font-size: 13.5px; }
}