/* ============================================================
   인조이풀 in:JOYFULL — v5 "아이가 다녀간 교정지"
   2레이어 시스템:
   · 인쇄층 = 수평, 명조, 잉크. 절대 기울지 않는다.
   · 손층   = 형광펜·테이프·손글씨·낙서. 이 층만 기울고 색을 가진다(±2°).
   브랜드 색(로고): 블루 #0066B3 · 버터옐로우 #FFD971.
   블루는 크림 위 텍스트 가능(5.7:1), 옐로우는 면·형광펜 전용(잉크 11.6:1).
   ============================================================ */

:root {
  --blue:   #0066B3;
  --yellow: #FFD971;
  --bg:     #FFFDF6;   /* 옐로우가 밴 따뜻한 종이 */
  --paper:  #FFFDF9;
  --ink:    #26211C;
  --ink-soft: #5C5348;
  --hairline: rgba(38, 33, 28, 0.22);

  --serif: "Gowun Batang", "Apple Myungjo", serif;
  --sans:  "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --hand:  "Gaegu", "Apple SD Gothic Neo", sans-serif;

  --gutter: clamp(1.25rem, 6vw, 4rem);
  --measure: 40rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }  /* 앵커는 즉시 점프 — 긴 스크롤 여행 금지 */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;          /* 18px — 전연령 가독성 */
  line-height: 1.8;
  word-break: keep-all;
  overflow-x: hidden;
}

/* 접근성 */
.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--bg);
  padding: 0.6em 1em; z-index: 20;
}
.skip:focus { left: 0; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.serif { font-family: var(--serif); }
.hand  { font-family: var(--hand); }

h1, h2, h3 { line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 1.2rem; }
h2 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); font-weight: 700; letter-spacing: 0; }

/* 쌍점 글리프 — in:JOYFULL의 콜론. 위 블루, 아래 옐로우 */
.glyph {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.24em;
  vertical-align: 0.34em;
  padding: 0 0.18em;
}
.glyph i { width: 0.3em; height: 0.3em; border-radius: 1px; display: block; }
.glyph i:first-child { background: var(--blue); }
.glyph i:last-child  { background: var(--yellow); border: 1px solid rgba(38,33,28,0.35); }
.glyph--big { font-size: clamp(2rem, 5vw, 3.2rem); padding: 0.2em 0.18em; }

/* 형광펜 스윕 — 버터옐로우, 잉크 글자 뒤 */
.sweep {
  font-style: normal;
  background: linear-gradient(transparent 40%, rgba(255, 217, 113, 0.75) 40%, rgba(255, 217, 113, 0.75) 92%, transparent 92%);
  padding: 0 0.1em;
}

/* ---------- 매스트헤드 (인쇄층) ---------- */
.mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.mast__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 0.6rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
}
.mast__logo img { display: block; }
.mast__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2.5vw, 1.5rem);
  flex-wrap: wrap;
}
.mast__nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;           /* 전연령 탭 영역 */
}
.mast__nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--blue); }
.mast__cta {
  background: var(--blue);
  color: #FFFFFF !important;
  padding: 0 1.25em;
  border-radius: 999px;
}
.mast__cta:hover { text-decoration: none !important; background: #005596; }

/* ---------- 커버 — 사진 위 타이포 ---------- */
.cover {
  position: relative;
  min-height: calc(100svh - 5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vh, 3.5rem) var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
  color: #FFFDF6;
  overflow: hidden;
}
.cover__bg { position: absolute; inset: 0; }
.cover__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.cover__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(24, 20, 16, 0.78) 0%,
    rgba(24, 20, 16, 0.42) 34%,
    rgba(24, 20, 16, 0.58) 62%,
    rgba(24, 20, 16, 0.82) 100%);
}
.cover > *:not(.cover__bg) { position: relative; }
.cover__kicker {
  margin: 0 0 2rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  color: rgba(255, 253, 246, 0.95);
  text-shadow: 0 1px 12px rgba(24, 20, 16, 0.55);
}
.cover__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 10.5vw, 6.8rem);
  line-height: 1.18;
  letter-spacing: 0;
  display: grid;
}
.cover__title .l2 { margin-left: 0.5ch; }
.cover__title .l3 { margin-left: 1.25ch; }
.cover__title .l4 { margin-left: 0.5ch; }
@media (min-width: 700px) {
  .cover__title .l2 { margin-left: 1ch; }
  .cover__title .l3 { margin-left: 2.5ch; }
  .cover__title .l4 { margin-left: 1ch; }
}
.cover__title { text-shadow: 0 2px 22px rgba(24, 20, 16, 0.45); }
.cover__title em { font-style: normal; position: relative; display: inline-block; color: var(--yellow); }
/* 손그림 밑줄 — 로드 시 그려지는 첫인상 */
.scrawl {
  position: absolute;
  left: -2%; right: -2%; bottom: -0.12em;
  width: 104%; height: 0.16em;
  overflow: visible;
}
.scrawl path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s ease-out 0.4s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.cover__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.cover__note {
  margin: 0;
  font-size: 1.35rem;
  color: var(--yellow);
  transform: rotate(-1deg);
  text-shadow: 0 1px 10px rgba(24, 20, 16, 0.6);
}
.cover__scroll {
  margin: 0;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: rgba(255, 253, 246, 0.9);
  text-shadow: 0 1px 10px rgba(24, 20, 16, 0.6);
}

/* ---------- 마스킹테이프 띠 (손층) ---------- */
.tape-wrap { overflow: hidden; width: 100%; padding: 1.2rem 0; }
.tape {
  width: 110%;
  margin-left: -5%;
  transform: rotate(-0.5deg);
  background: rgba(255, 217, 113, 0.5);
  border-top: 1px solid rgba(38, 33, 28, 0.15);
  border-bottom: 1px solid rgba(38, 33, 28, 0.15);
  padding: 0.65rem 0;
  overflow: hidden;
}
.tape__track {
  display: flex;
  width: max-content;
  animation: flow 28s linear infinite;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--ink);
}
@keyframes flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 섹션 공통 (인쇄층) ---------- */
.sec {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2.8rem, 6.5vh, 4.2rem) var(--gutter);
}
.sec__mark {
  margin: 0 0 2.2rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.prose { max-width: var(--measure); margin: 0 0 1.8rem; }
.prose--soft { color: var(--ink-soft); }
.prose:last-child { margin-bottom: 0; }

/* 본문 8 + 여백주석 4 */
.duo { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 2fr 1fr; align-items: start; }
}
.duo__side {
  margin: 0;
  font-size: 1.25rem;
  color: var(--blue);
  transform: rotate(-1deg);
  align-self: center;
}

/* ---------- 아지트 선언 — 파란 칠판 ---------- */
.board {
  position: relative;
  background: var(--blue);
  color: #FFFFFF;
  text-align: center;
  padding: clamp(3.8rem, 9vh, 5.5rem) var(--gutter);
  overflow: hidden;
}
.board__poem {
  position: relative;
  margin: 0;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.75;
}
.board__poem strong { color: var(--yellow); font-weight: 700; }
.board__colon { margin: 0 0 2rem; display: flex; justify-content: center; gap: 0; }
.board__colon i {
  width: 0.75rem; height: 0.75rem; border-radius: 50%; display: block; margin: 0 0.3rem;
}
.board__colon i:first-child { background: #FFFFFF; }
.board__colon i:last-child  { background: var(--yellow); }
.board__doodle {
  position: absolute;
  width: clamp(3rem, 8vw, 5.5rem);
  height: auto;
  opacity: 0.3;
}
.board__doodle path { fill: none; stroke: #FFFDF6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.board__doodle--star   { top: 12%; left: 8%; transform: rotate(-10deg); }
.board__doodle--spiral { bottom: 14%; right: 9%; transform: rotate(8deg); }

/* ---------- 후기 메모지 벽 ---------- */
.sec--letters h2 { margin-bottom: 2.5rem; }
.memos {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 780px) {
  .memos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .memo:nth-child(2) { margin-top: 2.2rem; }
  .memo:nth-child(4) { margin-top: 2.2rem; }
  .memo--wide { grid-column: 1 / -1; max-width: 46rem; justify-self: center; width: 100%; }
}
.memo {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 2rem 1.6rem 1.6rem;
}
.memo:nth-child(odd)  { transform: rotate(-0.4deg); }
.memo:nth-child(even) { transform: rotate(0.35deg); }
/* 테이프 조각 */
.memo::before {
  content: "";
  position: absolute;
  top: -0.7rem; left: 50%;
  width: 4rem; height: 1.3rem;
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(4% 0, 96% 6%, 100% 100%, 0 94%);
  border: 1px solid rgba(38, 33, 28, 0.12);
}
.memo--y::before { background: rgba(255, 217, 113, 0.85); }
.memo--b::before { background: rgba(0, 102, 179, 0.4); }
.memo:nth-child(even)::before { transform: translateX(-50%) rotate(2.5deg); }
.memo__when { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--blue); }
.memo blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  line-height: 1.6;
}
/* 스크롤 등장 (JS 있을 때만) */
.js .memo { opacity: 0; translate: 0 12px; transition: opacity 0.5s ease, translate 0.5s ease; }
.js .memo.in { opacity: 1; translate: 0 0; }
.letters__tail { margin-top: 1rem; }

/* ---------- 자리값 티켓 ---------- */
.sec--visit h2 { margin-bottom: 1.6rem; }
.ticket {
  position: relative;
  max-width: 30rem;
  margin: 2.4rem 0;
  border: 2px dashed var(--ink);   /* 점선은 사이트 전체에서 여기뿐 */
  background: var(--paper);
  padding: 2rem 2.4rem;
  text-align: center;
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--bg);
  border: 2px dashed var(--ink);
  transform: translateY(-50%);
}
.ticket::before { left: -0.9rem; clip-path: inset(0 0 0 50%); border-left: none; }
.ticket::after  { right: -0.9rem; clip-path: inset(0 50% 0 0); border-right: none; }
.ticket__label {
  margin: 0 0 0.3rem;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  color: var(--blue);
}
.ticket__price {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1.15;
}
.ticket__price span { font-size: 0.5em; font-weight: 700; }
.ticket__unit { margin: 0.3rem 0 0; font-weight: 700; }

.visit__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.6rem 0 0; }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.4em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  font-weight: 800;
}
.btn:hover { background: var(--yellow); }
.btn--blue { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.btn--blue:hover { background: #005596; }

/* ---------- 이름의 뜻 ---------- */
.sec--name { text-align: left; }
.namebook {
  margin: 0 0 2.5rem;
  border-top: 1.5px solid var(--ink);
  max-width: var(--measure);
}
.namebook > div {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
}
.namebook dt {
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.1;
  color: var(--blue);
}
.namebook dd { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.4rem); font-weight: 700; }
.namebook__colon dt { display: flex; align-items: center; }
.name__hinge {
  margin: 2.5rem 0 0;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- 어른의 문 ---------- */
.sec--doors h2 { margin-bottom: 2.5rem; }
.doors {
  border-top: 1.5px solid var(--ink);
  margin: 0 0 2.2rem;
}
.door {
  border-bottom: 1.5px solid var(--ink);
}
.door summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.2rem);
  padding: 1.6rem 0.4rem;
  min-height: 44px;
}
.door summary::-webkit-details-marker { display: none; }
.door summary:hover { background: rgba(255, 217, 113, 0.18); }
.door summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.door__no {
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--blue);
}
.door__head { display: flex; flex-direction: column; gap: 0.1rem; }
.door__name {
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.3;
}
.door__type {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.door__toggle {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue);
  transition: transform 0.25s ease;
}
.door[open] .door__toggle { transform: rotate(180deg); }
/* 펼친 방 — 넉넉하게 */
.door__room {
  padding: 0.6rem 0.4rem 2.6rem;
  display: grid;
  gap: 1.2rem;
}
@media (min-width: 860px) {
  .door__room {
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: start;
    padding-left: clamp(3rem, 6vw, 4.6rem);
  }
  .door__room > .door__go,
  .door__room > .door__go--soon { grid-column: 2; }
}
.door--y[open] { background: rgba(255, 217, 113, 0.16); }
.door--b[open] { background: rgba(0, 102, 179, 0.05); }
.door__line {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.55;
}
.door__desc {
  margin: 0;
  color: var(--ink-soft);
  max-width: 32rem;
}
.door__go {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 800;
  color: var(--blue);
  text-decoration: none;
}
.door__go:hover { text-decoration: underline; text-underline-offset: 6px; }
.door__go span { transition: transform 0.25s ease; }
.door__go:hover span { transform: translateX(4px); }
.door__go--soon {
  justify-self: start;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: 0.5em 1.1em;
}
.doors__tail { margin-top: 0.5rem; }

/* ---------- 콜로폰 ---------- */
.colophon {
  background: var(--ink);
  color: #E9E0D2;
  text-align: center;
  padding: 3.5rem var(--gutter) 3.75rem;
}
.colophon__logo { display: block; margin: 0 auto 1rem; }
.colophon__name {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 1.6rem;
  color: #FFFFFF;
}
.colophon__name span {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--yellow);
  margin-left: 0.5rem;
}
.colophon__line { margin: 0 0 1.6rem; color: #C9BCA8; }
.colophon__sns {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.colophon__sns a {
  color: var(--yellow);
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.3rem;
}
.colophon__sns a:hover { text-decoration: underline; text-underline-offset: 5px; }
.colophon__copy { margin: 0; font-size: 0.85rem; color: #A6998A; }

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tape__track { animation: none; }
  .scrawl path { animation: none; stroke-dashoffset: 0; }
  a.door__go span { transition: none; }
}

/* ============================================================
   v6 — 교육사업 허브 확장 (관문 · 표현의 언어 · PSC · 프로그램 ·
   FAQ · 만드는 사람). 리서치 반영: 3분기 관문, 1인칭 목소리,
   가격 한 점 공개, 자작 낙서 SVG.
   ============================================================ */

/* 자작 낙서 SVG (손층) */
.doodle {
  width: 2.6rem; height: 2.6rem;
  margin-bottom: 0.4rem;
}
.doodle path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 관문: 3분기 ---------- */
.gate { display: grid; gap: 1.1rem; }
@media (min-width: 820px) { .gate { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.gate__card {
  display: flex;
  flex-direction: column;
  border: 0;
  border-top: 1.5px solid var(--ink);
  background: transparent;
  padding: 1.1rem 0.2rem 0.9rem;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease;
}
.gate__card:nth-child(1) .doodle { transform: rotate(-3deg); }
.gate__card:nth-child(2) .doodle { transform: rotate(2deg); }
.gate__card:nth-child(3) .doodle { transform: rotate(-2deg); }
.gate__card:hover { background: rgba(255, 217, 113, 0.16); }
.gate__card h2 { font-size: 1.25rem; margin: 0 0 0.25rem; font-weight: 700; }
.gate__card p { margin: 0 0 0.6rem; color: var(--ink-soft); line-height: 1.6; font-size: 1rem; }
.gate__go {
  margin-top: auto;
  font-weight: 800;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
}
.gate__go i { font-style: normal; transition: transform 0.25s ease; }
.gate__card:hover .gate__go i { transform: translateX(4px); }

/* ---------- 칠판: 아이의 말 ---------- */
.board__quote {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.45;
}
.board__quote strong { color: var(--yellow); font-weight: 700; }
.board__cite {
  margin: 0 0 3rem;
  font-family: var(--hand);
  font-size: 1.15rem;
  color: rgba(255, 253, 246, 0.94);
}
.board .board__poem { font-size: clamp(1.15rem, 2.6vw, 1.5rem); }

/* ---------- 세 가지 표현의 언어 ---------- */
.langs {
  list-style: none;
  margin: 2.2rem 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  border-top: 1.5px solid var(--ink);
}
@media (min-width: 820px) { .langs { grid-template-columns: repeat(2, 1fr); gap: 0; } }
.langs li { padding: 1.5rem 0.2rem 1.7rem; border-bottom: 1px solid var(--hairline); }
@media (min-width: 820px) {
  .langs li { padding: 1.8rem 1.4rem; border-bottom: 1.5px solid var(--ink); }
  .langs li + li { border-left: 1px solid var(--hairline); }
}
.langs__name {
  margin: 0 0 0.2rem;
  font-weight: 700;
  font-size: 1.5rem;
}
.langs__what { margin: 0 0 0.7rem; font-weight: 800; font-size: 1.05rem; }
.langs__how { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }

/* ---------- PSC ---------- */
.psc {
  list-style: none;
  margin: 2.2rem 0 2.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 44rem;
}
@media (min-width: 700px) { .psc { grid-template-columns: repeat(4, 1fr); } }
.psc li {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 1.2rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  text-align: center;
}
.psc li:nth-child(even) { transform: rotate(0.7deg); }
.psc li:nth-child(odd)  { transform: rotate(-0.7deg); }
.psc b {
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.2;
}
.psc__ko { font-weight: 800; }
.psc__en { font-size: 0.8rem; letter-spacing: 0.18em; color: var(--ink-soft); }

/* ---------- 프로그램 목차 ---------- */
.prog {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  border-top: 1.5px solid var(--ink);
}
.prog__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 4vw, 2.4rem);
  align-items: start;
  padding: 1.9rem 0.3rem;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 860px) {
  .prog__row { grid-template-columns: auto 1fr auto; align-items: center; }
}
.prog__no {
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--blue);
  min-width: 2.1em;
}
.prog__label {
  margin: 0 0 0.15rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.prog__body h3 {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 1.8rem);
}
.prog__desc { margin: 0; color: var(--ink-soft); max-width: 36rem; }
.prog__price { margin: 0.7rem 0 0; font-weight: 800; font-size: 1.15rem; }
.prog__cta {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-weight: 800;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 860px) { .prog__cta { grid-column: auto; } }
.prog__cta:hover { text-decoration: underline; text-underline-offset: 6px; }
.prog__cta span { transition: transform 0.25s ease; }
.prog__cta:hover span { transform: translateX(4px); }
.prog__soon {
  grid-column: 2;
  justify-self: start;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: 0.45em 1.1em;
}
@media (min-width: 860px) { .prog__soon { grid-column: auto; } }
.prog__row--soon .prog__no,
.prog__row--soon h3 { opacity: 0.6; }

/* ---------- FAQ ---------- */
.faq { max-width: 46rem; border-top: 1.5px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0.3rem;
  font-weight: 800;
  font-size: 1.08rem;
  min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: rgba(255, 217, 113, 0.18); }
.faq__item summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.faq__item summary span { color: var(--blue); transition: transform 0.25s ease; }
.faq__item[open] summary span { transform: rotate(180deg); }
.faq__item p {
  margin: 0;
  padding: 0 0.3rem 1.4rem;
  color: var(--ink-soft);
  max-width: 40rem;
}

/* ---------- 만드는 사람 ---------- */
.sec--why { text-align: left; }
.why__quote {
  margin: 0 0 1.6rem;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.6;
  max-width: 46rem;
}
.why__quote strong {
  font-weight: 700;
  background: linear-gradient(transparent 40%, rgba(255, 217, 113, 0.75) 40%, rgba(255, 217, 113, 0.75) 92%, transparent 92%);
}
.why__sign { margin: 0 0 1.8rem; font-size: 1.05rem; }
.why__sign strong { font-size: 1.2rem; }
.why__sign span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.why__lab { font-size: 0.98rem; }

/* ---------- 프로그램: 키즈팝+올드팝 앰퍼샌드 ---------- */
.prog__amp { color: var(--blue); font-weight: 400; }

/* ---------- 만드는 사람: 올리의 인사 (사진 + 목소리) ---------- */
.why { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 820px) {
  .why { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; }
}
.why__photo {
  margin: 0;
  position: relative;
}
.why__photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1.5px solid var(--ink);
  transform: rotate(-1.5deg);
  background: var(--paper);
}
/* 마스킹테이프 조각 */
.why__photo::before {
  content: "";
  position: absolute;
  top: -0.7rem; left: 1.4rem;
  width: 5rem; height: 1.4rem;
  background: rgba(255, 217, 113, 0.85);
  border: 1px solid rgba(38, 33, 28, 0.12);
  transform: rotate(-4deg);
  clip-path: polygon(3% 0, 97% 5%, 100% 100%, 0 95%);
  z-index: 1;
}
.why__photo figcaption {
  margin-top: 0.6rem;
  font-size: 1.15rem;
  color: var(--blue);
  transform: rotate(-1.5deg);
}
/* 사진 파일이 아직 없으면 사진 칸 자체를 숨긴다 (깨진 이미지 아이콘 방지) */
.why__photo.is-empty { display: none; }
.why__hi { font-size: clamp(1.7rem, 4.5vw, 2.4rem); margin-bottom: 1.4rem; }
.why__hi strong { color: var(--blue); font-weight: 700; }
.why__wish {
  margin: 2rem 0;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.8vw, 1.55rem);
  line-height: 1.85;
  padding-left: 1.2rem;
  border-left: 3px solid var(--yellow);
}
.why__wish strong { font-weight: 700; background: linear-gradient(transparent 40%, rgba(255,217,113,0.75) 40%, rgba(255,217,113,0.75) 92%, transparent 92%); }
.why__sign { margin: 0 0 1.6rem; font-size: 1.05rem; }
.why__sign strong { font-size: 1.2rem; }
.why__sign span {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

/* ---------- 작업 사진 밴드 (테이프로 붙인 컷) ---------- */
.sec--film { padding-top: clamp(3rem, 7vh, 4.5rem); padding-bottom: clamp(3rem, 7vh, 4.5rem); }
.film {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.2rem 1.4rem;
}
@media (min-width: 780px) { .film { grid-template-columns: repeat(3, 1fr); } }
.film__shot { margin: 0; }
.film__shot figure {
  position: relative;
  margin: 0;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 0.8rem 0.8rem 0.5rem;
}
.film__shot:nth-child(odd)  figure { transform: rotate(-0.5deg); }
.film__shot:nth-child(even) figure { transform: rotate(0.4deg); margin-top: 1.4rem; }
/* 테이프 조각 */
.film__shot figure::before {
  content: "";
  position: absolute;
  top: -0.7rem; left: 50%;
  width: 4.2rem; height: 1.3rem;
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(4% 0, 96% 6%, 100% 100%, 0 94%);
  border: 1px solid rgba(38, 33, 28, 0.12);
}
.film__shot--y figure::before { background: rgba(255, 217, 113, 0.85); }
.film__shot--b figure::before { background: rgba(0, 102, 179, 0.4); }
.film__shot:nth-child(even) figure::before { transform: translateX(-50%) rotate(2.5deg); }
.film__shot img {
  display: block;
  width: 100%;
  height: 15rem;
  object-fit: cover;
  background: var(--bg-soft, #F6EEE1);
}
@media (min-width: 780px) { .film__shot img { height: 17rem; } }
.film__shot figcaption {
  margin-top: 0.5rem;
  font-size: 1.15rem;
  color: var(--blue);
  text-align: center;
}

/* ---------- 만드는 사람: 인사 사진 ---------- */
.why { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 860px) { .why { grid-template-columns: 20rem 1fr; gap: 3rem; } }
.why__photo {
  position: relative;
  margin: 0;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 0.8rem 0.8rem 0.5rem;
  transform: rotate(-1.5deg);
  max-width: 20rem;
}
.why__photo::before {
  content: "";
  position: absolute;
  top: -0.7rem; left: 50%;
  width: 4.2rem; height: 1.3rem;
  transform: translateX(-50%) rotate(2deg);
  background: rgba(255, 217, 113, 0.85);
  clip-path: polygon(4% 0, 96% 6%, 100% 100%, 0 94%);
  border: 1px solid rgba(38, 33, 28, 0.12);
}
.why__photo img { display: block; width: 100%; height: auto; }
.why__photo figcaption {
  margin-top: 0.5rem;
  font-size: 1.15rem;
  color: var(--blue);
  text-align: center;
}
/* 사진 파일이 없으면 슬롯 자체를 감춘다 */
.why__photo.is-empty { display: none; }

/* ---------- 프로그램 정보표 (전달력 우선 — 현대百 이벤트 페이지 문법) ---------- */
.spec {
  margin: 0.9rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.65;
}
.spec dt {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--blue);
  padding-top: 0.15em;
}
.spec dd { margin: 0; }
.spec dd span { color: var(--ink-soft); font-size: 0.9rem; }

.prog__contact {
  margin: 2rem 0 0;
  padding: 1.1rem 1.3rem;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-weight: 700;
  max-width: 46rem;
}
.prog__contact a {
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.prog__contact a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- 가나다.시간 — 찢은 종이 콜라주 (손층) ---------- */
.torn-stack {
  position: relative;
  max-width: 34rem;
  margin: 2.4rem 0 2.2rem;
}
/* 뒤에 깔린 노란 종이 조각 */
.torn-stack::before {
  content: "";
  position: absolute;
  top: 0.9rem; left: -0.8rem; right: 0.9rem; bottom: -0.9rem;
  background: rgba(255, 217, 113, 0.55);
  transform: rotate(1.4deg);
  clip-path: polygon(3% 2%, 15% 0%, 28% 3%, 43% 1%, 58% 4%, 72% 0%, 86% 3%, 98% 1%, 100% 14%, 97% 29%, 100% 45%, 98% 61%, 100% 77%, 97% 92%, 99% 100%, 84% 97%, 69% 100%, 53% 98%, 38% 100%, 23% 97%, 9% 100%, 0% 95%, 2% 79%, 0% 62%, 3% 45%, 0% 28%, 2% 12%);
}
/* 찢은 흰 종이 위의 시 */
.torn {
  position: relative;
  margin: 0;
  background: #FFFFFF;
  padding: 2.4rem 2.2rem;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.9;
  transform: rotate(-0.8deg);
  clip-path: polygon(2% 4%, 9% 1%, 22% 3%, 34% 0%, 47% 3%, 61% 1%, 74% 4%, 88% 1%, 98% 5%, 99% 18%, 97% 33%, 100% 47%, 98% 62%, 100% 76%, 97% 90%, 99% 97%, 88% 99%, 74% 96%, 60% 100%, 45% 97%, 30% 100%, 16% 97%, 5% 99%, 1% 90%, 3% 74%, 0% 58%, 2% 40%, 0% 24%);
  filter: drop-shadow(0 1px 0 rgba(38, 33, 28, 0.28)) drop-shadow(0 -0.5px 0 rgba(38, 33, 28, 0.15));
}
.torn strong {
  font-weight: 700;
  background: linear-gradient(transparent 40%, rgba(255, 217, 113, 0.75) 40%, rgba(255, 217, 113, 0.75) 92%, transparent 92%);
}
/* 테이프 조각 */
.torn-stack::after {
  content: "";
  position: absolute;
  top: -0.75rem; left: 14%;
  width: 4.2rem; height: 1.3rem;
  transform: rotate(-4deg);
  background: rgba(0, 102, 179, 0.35);
  border: 1px solid rgba(38, 33, 28, 0.12);
  clip-path: polygon(4% 0, 96% 6%, 100% 100%, 0 94%);
}
.torn__cite {
  margin: 1rem 0 0 0.4rem;
  font-size: 1.15rem;
  color: var(--blue);
  transform: rotate(-1deg);
}
.ganada__go {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
}
.ganada__go:hover { text-decoration: underline; text-underline-offset: 6px; }
.ganada__go span { transition: transform 0.25s ease; }
.ganada__go:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ganada__go span { transition: none; } }


/* ---------- PSC 한 줄 (구 PSC 섹션 통합) ---------- */
.psc-line {
  margin: 2rem 0 0.8rem;
  font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  letter-spacing: 0.02em;
}
.psc-line b { color: var(--blue); font-weight: 700; margin-right: 0.1em; }
.psc-line span { color: var(--hairline); }

/* ============================================================
   THEME B — 갤러리 화이트 · 미니멀 (2026-07-24 한나님 선택)
   아래 오버라이드가 위 규칙을 덮는다. 성실하고 담백하게.
   ============================================================ */
:root {
  --bg: #FFFFFF;
  --paper: #FFFFFF;
  --ink: #141414;
  --ink-soft: #6E6E6E;
  --hairline: #E6E4DF;
}
body { font-weight: 400; line-height: 1.9; background: #FFFFFF; }
h2 { font-weight: 400; letter-spacing: 0.01em; }
.serif { font-weight: 400; }
h2 strong, .serif strong { font-weight: 700; }

/* 형광펜 → 파란 강조 (담백) */
.sweep { background: none; padding: 0; font-weight: 700; color: var(--blue); }

/* 손글씨 → 담백한 캡션 */
.hand {
  font-family: var(--sans) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em;
  color: var(--ink-soft) !important;
  transform: none !important;
}

/* 매스트헤드 */
.mast { border-bottom: 1px solid var(--hairline); }
.mast__logo { font-weight: 700; font-size: 1.15rem; }

/* 커버 — 텍스트 우선, 흰 배경 */
.cover {
  min-height: 0;
  color: var(--ink);
  overflow: visible;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(4rem, 9vh, 6rem) var(--gutter) clamp(2.5rem, 5vh, 3.5rem);
  display: block;
}
.cover__bg { display: none; }
.cover__kicker {
  color: var(--ink-soft);
  text-shadow: none;
  letter-spacing: 0.28em;
  font-size: 0.8rem;
  margin-bottom: 2.4rem;
}
.cover__title {
  color: var(--ink);
  text-shadow: none;
  font-weight: 400;
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  line-height: 1.5;
}
.cover__title .l2, .cover__title .l3, .cover__title .l4 { margin-left: 0; }
.cover__title em { color: inherit; border-bottom: 0; }
.scrawl { display: none; }
.cover__sub {
  margin: 2rem 0 0;
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 1.02rem;
}

/* 대표 사진 — 액자 없이, 여백으로 */
.lead-photo {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(2.5rem, 5vh, 3.5rem);
}
.lead-photo img { width: 100%; height: auto; display: block; }
.lead-photo figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* 관문 — 옅은 헤어라인 */
.gate__card { border-top: 1px solid var(--ink); }
.gate__card:hover { background: #F8F7F4; }
.gate__card h2 { font-size: 1.2rem; }

/* 칠판 → 화이트 인용 (담백한 블루 강조) */
.board {
  background: #FFFFFF;
  color: var(--ink);
  text-align: left;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 4.5rem) var(--gutter);
}
.board__doodle { display: none; }
.board__colon { justify-content: flex-start; margin-bottom: 1.6rem; }
.board__colon i { width: 0.55rem; height: 0.55rem; }
.board__colon i:first-child { background: var(--blue); }
.board__colon i:last-child { background: var(--yellow); border: 1px solid rgba(20,20,20,.2); }
.board__quote { font-weight: 400; font-size: clamp(1.6rem, 5.5vw, 2.3rem); line-height: 1.65; }
.board__quote strong { color: var(--blue); font-weight: 700; }
.board__cite { color: var(--ink-soft); margin-bottom: 2.2rem; }
.board__poem { font-weight: 400; font-size: clamp(1.05rem, 2.6vw, 1.25rem); color: var(--ink-soft); }
.board__poem strong { color: var(--ink); font-weight: 700; }

/* 사진 밴드 — 액자·테이프·기울기 제거 */
.film__shot figure,
.film__shot:nth-child(odd) figure,
.film__shot:nth-child(even) figure {
  transform: none;
  border: 0;
  padding: 0;
  background: none;
  margin-top: 0;
}
.film__shot figure::before { display: none; }
.film__shot figcaption {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: left;
  margin-top: 0.6rem;
}

/* 메모지 벽 → 갤러리 인용 리스트 */
.memos { grid-template-columns: 1fr !important; gap: 0 !important; max-width: 40rem; }
.memo, .memo:nth-child(odd), .memo:nth-child(even) {
  transform: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  padding: 1.5rem 0.1rem 1.6rem;
  margin-top: 0 !important;
}
.memos { border-bottom: 1px solid var(--hairline); }
.memo::before { display: none; }
.memo--wide { max-width: none !important; }
.memo__when { margin-bottom: 0.3rem; }
.memo blockquote { font-weight: 400; font-size: 1.3rem; line-height: 1.65; }
.memo blockquote em { font-style: normal; color: var(--blue); font-weight: 700; }
.js .memo { opacity: 1; translate: none; transition: none; }

/* 찢은 종이 → 담백한 인용 */
.torn-stack::before, .torn-stack::after { display: none; }
.torn {
  clip-path: none;
  filter: none;
  background: none;
  transform: none;
  padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--blue);
  font-weight: 400;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  line-height: 1.85;
}
.torn strong { background: none; font-weight: 700; }
.torn__cite { margin-left: 1.4rem; }

/* 프로그램 — 옅은 룰 */
.prog { border-top: 1px solid var(--ink); }
.prog__row { border-bottom: 1px solid var(--hairline); }
.prog__body h3 { font-weight: 700; }
.spec dt { letter-spacing: 0.1em; }
.prog__contact { border: 1px solid var(--hairline); background: #FAFAF8; font-weight: 500; }

/* FAQ · 문 */
.faq { border-top: 1px solid var(--ink); }
.faq__item summary:hover { background: #F8F7F4; }
.doors { border-top: 1px solid var(--ink); }
.door { border-bottom: 1px solid var(--hairline); }
.door summary:hover { background: #F8F7F4; }
.door--y[open], .door--b[open] { background: #FAFAF8; }

/* 인사 사진 — 액자·기울기 제거 (2026-07-25: 사진은 반듯하게) */
.why__photo { border: 0; padding: 0; transform: none; background: none; }
.why__photo::before { display: none; }
.why__photo img { border: 0; transform: none; background: none; }
.why__photo figcaption { text-align: left; margin-top: 0.6rem; transform: none; }
.why__quote, .why__wish { font-weight: 400; }
.why__wish strong, .why__quote strong { font-weight: 700; background: none; color: var(--blue); }

/* 콜로폰 → 라이트 */
.colophon {
  background: #FFFFFF;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  padding: 2.8rem var(--gutter) 3rem;
}
.colophon__name { color: var(--ink); font-weight: 700; font-size: 1.3rem; }
.colophon__name span { color: var(--ink-soft); }
.colophon__line { color: var(--ink-soft); }
.colophon__sns a { color: var(--blue); font-weight: 700; }
.colophon__copy { color: var(--ink-soft); }

/* 섹션 오버라인 — 영문(진하게)+한글(연하게), 갤러리 목차 톤 */
.sec__mark {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.sec--film + .sec .sec__mark { margin-top: 0; }

/* 오버라인 내부: 영문(진하게) / 한글(연하게) 분리 */
.sec__mark { text-transform: none; letter-spacing: 0; }
.mk-en { font-weight: 700; letter-spacing: 0.22em; color: var(--ink); }
.mk-ko { font-weight: 400; letter-spacing: 0.02em; color: var(--ink-soft); margin-left: 0.15em; }

/* ---------- PSCR 네 걸음 ---------- */
.steps { list-style: none; margin: 2rem 0 2.4rem; padding: 0; border-top: 1px solid var(--ink); max-width: 44rem; }
.steps li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 1.2rem;
  padding: 1.4rem 0.1rem;
  border-bottom: 1px solid var(--hairline);
}
.steps__no {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--blue);
}
.steps h3 {
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0;
}
.steps h3 span {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-left: 0.5em;
}
.steps p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.steps__result { font-size: 1.05rem; }
.steps__result strong { font-weight: 500; }

/* ============================================================
   V2 MAIN — v2 시안 승격 (2026-07-24 한나님 확정)
   로고 합체 인트로 · 좌측 라벨 그리드 · 비대칭 사진 · v2 타이포
   ============================================================ */
:root {
  --ink-soft: #6B6B6B;
  --hairline: #E8E6E1;
  --lw: min(86vw, 34rem);   /* 로고 표시 폭 */
}
body { font-size: 1.0625rem; line-height: 1.95; letter-spacing: 0.005em; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.7; letter-spacing: -0.005em; }
h2 strong, h2 b { font-weight: 700; }

/* ── 내브 (v2) ── */
.mast { padding: 1.3rem var(--gutter); }
.mast__logo { font-family: var(--sans); font-weight: 500; font-size: 1.02rem; letter-spacing: 0.05em; }
.mast__logo img { width: 26px; height: 26px; }
.mast__nav a { color: var(--ink-soft); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.02em; }
.mast__nav a:hover { color: var(--ink); text-decoration: none; }
.mast__cta { background: none; color: var(--blue) !important; font-weight: 500 !important; padding: 0; border-radius: 0; }
.mast__cta:hover { background: none; text-decoration: underline !important; text-underline-offset: 6px; }

/* ── 커버: 로고 합체 인트로 ── */
.cover { max-width: 78rem; padding: clamp(2.8rem, 7vh, 5rem) var(--gutter) clamp(2.5rem, 6vh, 4rem); }
.assemble {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 4.5vw, 2.6rem);
  animation: merge 0.8s cubic-bezier(.3,.7,.2,1) 2.1s forwards;
}
@keyframes merge { to { gap: 0; } }
.piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 0;
  transform: translateY(14px);
  animation: rise2 0.8s cubic-bezier(.2,.7,.3,1) forwards;
}
.p1 { animation-delay: 0.15s; }
.p2 { animation-delay: 0.5s; }
.p3 { animation-delay: 0.85s; }
@keyframes rise2 { to { opacity: 1; transform: none; } }
.piece i {
  display: block;
  height: calc(var(--lw) * 553 / 1600);
  background-image: url("photos/logo-wide.png");
  background-size: var(--lw) auto;
  background-repeat: no-repeat;
}
.p1 i { width: calc(var(--lw) * 0.200); background-position: 0 0; }
.p2 i { width: calc(var(--lw) * 0.484); background-position: calc(var(--lw) * -0.200) 0; }
.p3 i { width: calc(var(--lw) * 0.316); background-position: calc(var(--lw) * -0.684) 0; }
.piece b {
  font-weight: 500;
  font-size: clamp(0.85rem, 2.4vw, 1rem);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  animation: capfade 0.5s ease 2.0s forwards;
}
@keyframes capfade { to { opacity: 0; visibility: hidden; } }
.assemble__line {
  margin: 0.4rem 0 0;
  font-size: clamp(0.98rem, 2.6vw, 1.1rem);
  color: var(--ink-soft);
  opacity: 0;
  animation: rise2 0.9s cubic-bezier(.2,.7,.3,1) 2.9s forwards;
}
.assemble__line strong { color: var(--blue); font-weight: 500; }

/* v2 헤드라인 + 순환 메시지 */
.head {
  margin: clamp(2.2rem, 6vh, 3.6rem) 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.05rem, 7.2vw, 3.75rem);
  line-height: 1.62;
  letter-spacing: -0.005em;
}
.head span { display: block; opacity: 0; transform: translateY(14px); animation: rise2 0.95s cubic-bezier(.2,.7,.3,1) forwards; }
.head span:nth-child(1) { animation-delay: 3.4s; }
.head span:nth-child(2) { animation-delay: 3.65s; }
.head span:nth-child(3) { animation-delay: 3.9s; }
.head em { font-style: normal; color: var(--blue); }
.cover .cover__sub {
  margin: 2rem 0 0;
  max-width: 26rem;
  opacity: 0;
  animation: rise2 0.95s cubic-bezier(.2,.7,.3,1) 4.3s forwards;
}
/* 바뀌는 문장 위 따옴표 — 아이들이 '말한 문장'으로 읽히게 */
.ticker__q {
  margin: 2rem 0 -0.55rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 0.62;
  color: rgba(38, 33, 28, 0.26);
  opacity: 0;
  animation: rise2 0.9s ease 4.6s forwards;
}
.ticker {
  margin: 0;
  height: 1.8em;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: rise2 0.9s ease 4.7s forwards;
}
.ticker span {
  position: absolute; inset: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  opacity: 0;
  animation: cycle2 36s infinite;  /* 문장 8개 × 4.5s */
  animation-delay: calc(4.7s + var(--d, 0s));
}
.ticker span:nth-child(1) { --d: 0s; }
.ticker span:nth-child(2) { --d: 4.5s; }
.ticker span:nth-child(3) { --d: 9s; }
.ticker span:nth-child(4) { --d: 13.5s; }
.ticker span:nth-child(5) { --d: 18s; }
.ticker span:nth-child(6) { --d: 22.5s; }
.ticker span:nth-child(7) { --d: 27s; }
.ticker span:nth-child(8) { --d: 31.5s; }
.ticker b { color: var(--blue); font-weight: 500; }
@keyframes cycle2 {
  0% { opacity: 0; transform: translateY(8px); }
  1.5%, 10.9% { opacity: 1; transform: none; }
  12.4%, 100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .assemble, .piece, .piece b, .assemble__line, .head span, .cover .cover__sub, .ticker, .ticker__q { animation: none; }
  .assemble { gap: 0; }
  .piece { opacity: 1; transform: none; }
  .piece b { opacity: 0; visibility: hidden; }
  .assemble__line, .head span, .cover .cover__sub, .ticker, .ticker__q { opacity: 1; transform: none; }
  .ticker { height: auto; }
  .ticker span { position: static; opacity: 1; display: block; animation: none; }
  .ticker span + span { display: none; }
}

/* ── 대표 사진: 비대칭 ── */
/* 사진은 잘라내지 않는다 — 아이의 머리도, 빛이 든 종이도 다 보여야 함(2026-07-25) */
.lead-photo { max-width: none; padding: 0; margin: clamp(1.5rem, 4vh, 2.5rem) 0 0; }
.lead-photo img { height: auto; }
@media (min-width: 700px) {
  .lead-photo { max-width: 40rem; margin-left: var(--gutter); }
}
@media (min-width: 900px) {
  .lead-photo { margin-left: calc(var(--gutter) + 8rem); }
}
/* 캡션은 항상 사진 왼쪽 선에 맞춘다 — 700px↑에선 사진이 이미 gutter만큼 들어와 있으므로 0 */
.lead-photo figcaption { padding: 0.85rem var(--gutter) 0; }
@media (min-width: 700px) { .lead-photo figcaption { padding-left: 0; } }

/* ── 섹션: 좌측 라벨 그리드 ── */
@media (min-width: 900px) {
  .sec {
    display: grid;
    grid-template-columns: 10rem 1fr;
    column-gap: 3.5rem;
    align-items: start;
  }
  .sec > .sec__mark { grid-column: 1; margin: 0.45rem 0 0; }
  .sec > *:not(.sec__mark) { grid-column: 2; }
  .sec__mark .mk-en { display: block; line-height: 1.7; }
  .sec__mark .mk-ko { display: block; margin-left: 0; line-height: 1.7; color: #A5A29B; }
  .sec__mark .mk-dash { display: none; }   /* 좌측 라벨일 땐 대시를 빼서 왼쪽 선을 맞춘다 */
  .sec__mark .glyph { display: none; }
}
.sec__mark .mk-en { letter-spacing: 0.26em; font-size: 0.74rem; }
.sec__mark .mk-ko { font-size: 0.82rem; }

/* 칠판(VOICE) — v2 인용 스타일 */
.board { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding-top: clamp(3rem, 7vh, 4.5rem); padding-bottom: clamp(3rem, 7vh, 4.5rem); max-width: 72rem; }
.board__in { min-width: 0; }
.board__quote { margin-bottom: 1rem; }
.board__cite { margin-bottom: 2rem; }

/* ── 푸터 (v2) ── */
.colophon { text-align: left; padding: 3rem var(--gutter) 2.6rem; }
.colophon__grid { display: grid; gap: 1.4rem; max-width: 72rem; margin: 0 auto 1.8rem; }
/* 가로형 — 링크가 세로로 쌓이지 않고 한 줄로 흐른다 (2026-07-25) */
@media (min-width: 700px) {
  .colophon__grid { grid-template-columns: auto 1fr; gap: 1rem 3rem; align-items: baseline; }
  .colophon__brand { grid-row: span 2; align-self: start; }
}
.colophon__name {
  margin: 0 0 0.7rem;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--ink);
}
.colophon__name img { display: block; }
.colophon__name span { font-family: var(--sans); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.18em; color: var(--ink-soft); }
.colophon__line { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.ft-label { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.26em; color: var(--ink-soft); }
/* 라벨 + 링크가 한 줄로 — 세로 길이를 줄인다 */
.colophon__col { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.4rem; }
.colophon__col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 1.5rem;
}
.colophon__col li a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--ink); text-decoration: none; font-size: 0.95rem;
}
.colophon__col li a:hover { color: var(--blue); }
.colophon__col li a em { font-style: normal; font-size: 0.76rem; color: #A5A29B; margin-left: 0.5em; }
.colophon__copy { max-width: 72rem; margin: 0 auto; border-top: 1px solid var(--hairline); padding-top: 1.3rem; font-size: 0.82rem; letter-spacing: 0.04em; }

/* 푸터 링크 탭 영역 44px 보장 (전연령) */
.colophon__col ul a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
.mast__nav a { min-width: 44px; justify-content: center; }

/* ── Popfolio 밴드 — 어른의 문에서 분리, '누구나'의 자리 (2026-07-25) ── */
.pop { max-width: var(--measure); }
.pop h2 { margin-bottom: 1.4rem; }
.pop__soon {
  display: inline-block;
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: 0.5em 1.1em;
}

/* ============================================================
   프로그램 카드 — 조약돌 (2026-07-25 한나님)
   "모양이 다른 조약돌. 아이들 모두가 다 다른데, 존중해주자 인정해주자."
   → 도형을 찍어내지 않는다. 카드마다 다른 형태의 돌.
   색이 대상을 말한다: 블루 = 아이 / 버터옐로우 = 어른 / 테두리 = 여는 판.
   ============================================================ */
.pgrid {
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 2.8rem 2rem;
}
@media (min-width: 700px)  { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
.pgrid--open { margin-top: 3.4rem; padding-top: 3rem; border-top: 1px solid var(--hairline); }
@media (min-width: 1040px) { .pgrid--open { grid-template-columns: repeat(2, 1fr); } }

.pcard { display: flex; flex-direction: column; align-items: flex-start; }
.pcard__who {
  margin: 0 0 0.6rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.pcard__name {
  position: relative; z-index: 0;
  margin: 0 0 1.1rem;
  font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
}
.pcard__name span {
  position: relative;
  display: inline-block;
  padding: 0.42em 0.8em 0.48em;
}
.pcard__name span::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--pebble, transparent);
  border: var(--pebble-line, 0);
  /* 조약돌 — 카드마다 아래에서 다시 깎는다 */
  border-radius: 58% 42% 63% 37% / 47% 58% 42% 53%;
}
/* 돌 일곱 개, 하나도 같은 모양이 없게 */
.pgrid .pcard:nth-child(1) .pcard__name span::before { border-radius: 61% 39% 52% 48% / 44% 61% 39% 56%; }
.pgrid .pcard:nth-child(2) .pcard__name span::before { border-radius: 38% 62% 66% 34% / 57% 41% 59% 43%; transform: rotate(-1.5deg); }
.pgrid .pcard:nth-child(3) .pcard__name span::before { border-radius: 55% 45% 36% 64% / 62% 38% 62% 38%; transform: rotate(1deg); }
.pgrid .pcard:nth-child(4) .pcard__name span::before { border-radius: 44% 56% 58% 42% / 39% 55% 45% 61%; transform: rotate(-1deg); }
.pgrid .pcard:nth-child(5) .pcard__name span::before { border-radius: 67% 33% 47% 53% / 55% 46% 54% 45%; transform: rotate(1.5deg); }
/* 아래 두 돌도 제 모양으로 — 위 그리드와 번호가 겹치지 않게 */
.pgrid--open .pcard:nth-child(1) .pcard__name span::before { border-radius: 47% 53% 41% 59% / 66% 34% 63% 37%; transform: rotate(0.8deg); }
.pgrid--open .pcard:nth-child(2) .pcard__name span::before { border-radius: 63% 37% 59% 41% / 36% 64% 37% 61%; transform: rotate(-1.2deg); }

.pcard--kid   { --pebble: #0066B3; }
.pcard--kid   .pcard__name span { color: #FFFFFF; }   /* 5.9:1 */
.pcard--grown { --pebble: #FFD971; }                   /* 잉크 11.6:1 */
.pcard--open  { --pebble: transparent; --pebble-line: 1.5px solid var(--hairline); }

.pcard__desc { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.75; }
.pcard .spec { margin: 0 0 1.4rem; }
.pcard .prog__cta { margin-top: auto; }
/* 키즈팝 — 정보량이 가장 많은 대표 멤버십이라 두 칸 */
@media (min-width: 1040px) {
  .pcard--wide { grid-column: span 2; }
  .pcard--wide .spec { column-count: 2; column-gap: 2rem; }
}
/* 보조 설명은 표 아래로 — 값 옆에 붙어 줄을 깨뜨리지 않게 (2026-07-25) */
.pcard__note {
  margin: -0.6rem 0 1.4rem;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ── 프로그램 카드 = 네모칸(잡지 카탈로그) 2026-07-25 ──
   조약돌은 그대로 두고, 카드마다 면을 깔아 '고를 수 있는 목록'으로 읽히게. */
.pcard {
  padding: 1.7rem 1.5rem 1.6rem;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background: #FFFFFF;
}
.pcard--kid   { background: rgba(0, 102, 179, 0.045); border-color: rgba(0, 102, 179, 0.16); }
.pcard--grown { background: rgba(255, 217, 113, 0.20); border-color: rgba(214, 168, 60, 0.30); }
.pcard--open  { background: #FFFFFF; }
.pgrid { gap: 1.5rem; }
.pgrid--open { margin-top: 2.6rem; padding-top: 2.6rem; }

/* ============================================================
   타이포 시스템 (2026-07-25 한나님: "고딕은 더 고딕답게,
   정보들은 자간을 활용해서")
   · 본문 자간 = 0. 전역 0.005em은 한글 본문을 흐리게만 함 → 제거.
   · 고딕(산세리프)은 무게 + 좁은 자간으로 또렷하게.
   · 정보 라벨은 넓은 자간으로 '표'처럼, 숫자는 자릿수 정렬.
   ============================================================ */
:root {
  --t-cap:   0.875rem;   /* 14 — 캡션·주석 */
  --t-label: 0.78rem;    /* 12.5 — 정보 라벨 */
  --t-micro: 0.72rem;    /* 11.5 — 섹션 마커 */
  --ls-label: 0.16em;
  --ls-micro: 0.26em;
}
body { letter-spacing: 0; }

/* 고딕답게 — 굵고 좁게 */
.langs__what, .gate__go, .prog__cta, .door__go, .door__go--soon,
.mast__cta, .faq__item summary, .pop__soon {
  letter-spacing: -0.01em;
}

/* 정보 라벨 = 넓은 자간 (비용·시간·구성·참고 / 대상 / 종류) */
.spec dt, .pcard__who, .door__type, .ft-label {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
}
.sec__mark .mk-en, .colophon__name span { letter-spacing: var(--ls-micro); }

/* 숫자는 표처럼 — 자릿수 정렬 + 살짝 좁게 */
.spec dd, .prog__contact, .pcard__note { font-variant-numeric: tabular-nums; }
.spec dd { letter-spacing: -0.005em; }

/* 캡션·주석 크기 통일 (13.1~14.4px가 흩어져 있던 것) */
.pcard__note, .lead-photo figcaption, .film figcaption, .spec dd span { font-size: var(--t-cap); }

/* ============================================================
   이번 시즌 밴드 — 2026 여름 '감각 다이빙'
   계절마다 이 색과 낱말만 갈아끼운다. 낱말은 조약돌(모양이 다 다름).
   ============================================================ */
.season {
  background: #0066B3;
  color: #FFFFFF;              /* 5.9:1 */
  padding: clamp(2.8rem, 7vh, 4.4rem) var(--gutter);
  margin: clamp(2rem, 5vh, 3rem) 0;
  position: relative;
  overflow: hidden;
}
/* 물결 — 포스터의 가는 파도선, 오른쪽 위에 세 줄 */
.season::after {
  content: "";
  position: absolute; top: 1.6rem; right: -2rem;
  width: 15rem; height: 6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M2 13 Q 17 3 32 13 T 62 13 T 92 13 T 122 13' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/7.5rem 1.7rem repeat-y;
  opacity: 0.9;
  pointer-events: none;
}
@media (max-width: 620px) { .season::after { display: none; } }
.season__in { max-width: 72rem; margin: 0 auto; position: relative; z-index: 1; }

.season__tag {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.42em 1.1em;
  border-radius: 999px;
  background: #FFFFFF;
  color: #0066B3;
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.1em;
}
.season__en {
  margin: 0 0 0.2rem;
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.34em;
  color: rgba(255,255,255,0.82);
}
.season__title {
  margin: 0 0 0.7rem;
  font-family: var(--sans);
  font-size: clamp(2.1rem, 7.5vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;   /* 고딕답게 — 굵고 좁게 */
  line-height: 1.12;
}
.season__lead { margin: 0 0 1.8rem; font-size: 1.05rem; color: rgba(255,255,255,0.92); }
.season__lead strong { font-weight: 800; }

/* 여덟 낱말 = 조약돌 여덟 개, 하나도 같은 모양이 없다 */
.season__words { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.season__words li {
  padding: 0.5em 1.05em;
  border: 1.5px solid rgba(255,255,255,0.55);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 58% 42% 63% 37% / 47% 58% 42% 53%;
}
.season__words li:nth-child(1) { border-radius: 62% 38% 54% 46% / 45% 60% 40% 55%; }
.season__words li:nth-child(2) { border-radius: 39% 61% 65% 35% / 58% 42% 58% 42%; }
.season__words li:nth-child(3) { border-radius: 54% 46% 37% 63% / 63% 37% 63% 37%; }
.season__words li:nth-child(4) { border-radius: 45% 55% 59% 41% / 38% 56% 44% 62%; }
.season__words li:nth-child(5) { border-radius: 66% 34% 46% 54% / 56% 45% 55% 44%; }
.season__words li:nth-child(6) { border-radius: 48% 52% 40% 60% / 65% 35% 62% 38%; }
.season__words li:nth-child(7) { border-radius: 60% 40% 58% 42% / 37% 63% 38% 62%; }
.season__words li:nth-child(8) { border-radius: 35% 65% 50% 50% / 52% 48% 60% 40%; }
.season__note { margin: 0 0 2rem; font-size: var(--t-cap); color: rgba(255,255,255,0.8); }

.season__spec {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.5rem 1.2rem; margin: 0 0 0.7rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.3);
  max-width: 34rem;
}
.season__spec dt { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.season__spec dt span {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.72); margin-left: 0.4em;
}
.season__spec dd { margin: 0; font-size: 1rem; color: rgba(255,255,255,0.92); font-variant-numeric: tabular-nums; }
.season__fine { margin: 0 0 2rem; font-size: var(--t-cap); color: rgba(255,255,255,0.78); }

.season__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin: 0; }
.season__go {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 1.5em; border-radius: 999px;
  background: #FFD971; color: #141414;      /* 잉크 11.6:1 */
  font-weight: 800; letter-spacing: -0.01em; text-decoration: none;
}
.season__go:hover { background: #FFE49A; }
.season__ask {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #FFFFFF; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: underline; text-underline-offset: 5px;
}
.season a:focus-visible { outline: 3px solid #FFD971; outline-offset: 3px; }

/* ============================================================
   사진 밴드 = 잡지 판면 (2026-07-28 한나님 레퍼런스: 크림 바탕 + 블루,
   사진이 면 안에 '얹혀' 있고 캡션은 여백에)
   · 사진을 자르지 않는다(원본 비율 유지).
   · 면이 사진을 감싸고, 캡션은 면 안 여백에 작게.
   ============================================================ */
:root { --cream: #F5EFDD; }

.sec--film { max-width: 72rem; }
.film { gap: clamp(1.2rem, 3vw, 2rem); }
@media (min-width: 780px) {
  .film { grid-template-columns: repeat(2, 1fr); align-items: start; }
  /* 비대칭 — 둘째 칸을 아래로 내려 판면에 리듬을 준다 */
  .film__shot:nth-child(even) { margin-top: 3.5rem; }
}

/* 앞선 레이어의 .film__shot:nth-child(odd/even) figure(0,3,0)를 이기려면 같은 무게로 */
.sec--film .film__shot figure {
  padding: clamp(1rem, 2.6vw, 1.6rem);
  border-radius: 4px;
  background: var(--cream);
}
.sec--film .film__shot--b figure { background: #0066B3; }   /* 한 칸은 블루 판 */

.film__shot img {
  width: 100%;
  height: auto;          /* 자르지 않는다 */
  display: block;
  border-radius: 2px;
}
@media (min-width: 780px) { .film__shot img { height: auto; } }

.sec--film .film__shot figcaption {
  margin-top: 0.9rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: #5A554A;               /* 크림 위 6.5:1 */
}
.sec--film .film__shot--b figcaption { color: rgba(255, 255, 255, 0.92); }  /* 블루 판 위 */

/* ============================================================
   판(FIELD) 시스템 — 2026-07-28 "재미가 없어"
   문제: 섹션 12개가 전부 같은 구조(라벨→제목→본문)에 같은 흰 바탕.
   스크롤에 리듬이 없었다.
   해법: ① 바탕을 크림으로 내리고 흰 면을 '종이'로 올린다(관계 역전)
        ② 섹션마다 판을 교차 — 크림 / 흰 종이 / 색면
        ③ 섹션에 인덱스 숫자를 얹어 잡지 목차처럼
        ④ 아이의 말 = 버터옐로우 대형 스프레드(감정의 정점)
   ============================================================ */
:root { --field: #F7F2E4; --paper-w: #FFFFFF; }

body { background: var(--field); }

/* ── ② 판 교차 ── */
/* 흰 종이 판 — 방법론·증거·사람 */
#pscr, #letters, #why, .sec--doors {
  background: var(--paper-w);
  border-top: 1px solid rgba(38,33,28,0.07);
  border-bottom: 1px solid rgba(38,33,28,0.07);
  max-width: none;
  padding-left: max(var(--gutter), calc((100% - 72rem) / 2));
  padding-right: max(var(--gutter), calc((100% - 72rem) / 2));
}

/* ── ③ 섹션 인덱스 — 잡지 목차 ── */
.sec { position: relative; }
.sec__mark { position: relative; }
.sec__mark .mk-en::before {
  content: attr(data-no);
  display: block;
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: rgba(0, 102, 179, 0.22);
  margin-bottom: 0.35rem;
}

/* ── ④ 아이의 말 = 버터옐로우 스프레드 ── */
.board {
  background: #FFD971;
  max-width: none;
  padding: clamp(3.2rem, 9vh, 5.5rem) var(--gutter);
  margin: clamp(2rem, 5vh, 3rem) 0;
}
.board .board__in { max-width: 72rem; margin: 0 auto; }
.board .sec__mark { color: rgba(20,20,20,0.62); }
.board .mk-en { color: #141414; }
.board .mk-en::before { color: rgba(20,20,20,0.28); }
.board .board__quote {
  font-size: clamp(2rem, 6.4vw, 3.6rem);
  line-height: 1.35;
  margin: 0 0 1.2rem;
  color: #141414;
}
.board .board__quote strong { font-weight: 700; }
.board .board__cite { color: rgba(20,20,20,0.66); margin-bottom: 2rem; }
.board .board__poem { color: #141414; font-size: 1.1rem; }
.board .board__poem strong { color: #0B4C86; }   /* 옐로우 위 블루 6.1:1 */

/* ── 크림 바탕 위에서 흰 카드가 '떠 보이게' ── */
.pcard--open, .sec--film .film__shot--y figure { background: var(--paper-w); }
.pcard { border-color: rgba(38,33,28,0.12); }
.pcard--kid   { background: #FFFFFF; border-color: rgba(0,102,179,0.22); }
.pcard--grown { background: #FFFFFF; border-color: rgba(214,168,60,0.42); }
.gate__card:hover { background: var(--paper-w); }
/* 인덱스 숫자가 마커 역할을 하므로 쌍점 글리프는 내린다 */
.sec__mark .glyph { display: none; }
.sec__mark .mk-en::before { font-size: clamp(1.9rem, 5.4vw, 2.6rem); }

/* 라벨·본문 행간 조이기 (2026-07-28 한나님: "문장 간격들도 조금 더 줄여줘") */
.sec__mark .mk-en, .sec__mark .mk-ko { line-height: 1.32; }
.mk-dash { font-style: normal; }
body { line-height: 1.75; }
.prose { margin-bottom: 1.35rem; }
.board .board__poem { line-height: 1.7; }
/* 크림 판 위에서 라벨이 너무 옅어 대비 미달(2.28:1) → 조임 */
.sec__mark .mk-ko { color: #6B6459; }

/* ── PSCR = 철학 (2026-07-28) ──
   "순서대로 밟는 과정"으로 읽히던 01–04 번호를 걷어내고
   네 낱말을 조약돌에 앉힌다. 넷 다 다른 모양 — 아이마다 다르게 일어나니까. */
.steps__lede { margin-bottom: 2.2rem; }
.steps--stones { list-style: none; margin: 0 0 2.4rem; padding: 0; display: grid; gap: 1.6rem 2.2rem; }
@media (min-width: 820px) { .steps--stones { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 3rem; } }
.steps--stones > li { display: block; padding: 0; border: 0; }
.steps__name {
  position: relative; z-index: 0;
  margin: 0 0 0.7rem;
  font-family: var(--serif);
  font-size: 1.25rem; font-weight: 700; line-height: 1.3;
}
.steps__name b {
  position: relative;
  display: inline-block;
  padding: 0.38em 0.85em 0.44em;
  font-weight: 700;
}
.steps__name b::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: 1.5px solid rgba(0, 102, 179, 0.5);
  border-radius: 58% 42% 63% 37% / 47% 58% 42% 53%;
}
/* 넷 다 다른 돌 */
.steps--stones > li:nth-child(1) .steps__name b::before { border-radius: 63% 37% 51% 49% / 43% 62% 38% 57%; }
.steps--stones > li:nth-child(2) .steps__name b::before { border-radius: 37% 63% 67% 33% / 58% 40% 60% 42%; transform: rotate(-1.4deg); }
.steps--stones > li:nth-child(3) .steps__name b::before { border-radius: 56% 44% 35% 65% / 64% 36% 63% 37%; transform: rotate(1.2deg); }
.steps--stones > li:nth-child(4) .steps__name b::before { border-radius: 43% 57% 60% 40% / 37% 57% 43% 63%; transform: rotate(-0.8deg); }
.steps__name span {
  font-family: var(--sans);
  font-size: var(--t-label); font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--ink-soft);
  margin-left: 0.5em;
}
.steps--stones > li p { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--ink); }

/* ── PSCR 네 낱말 = 색면 카드 (2026-07-28 레퍼런스 반영) ──
   색면 위에 굵은 글씨 · 얇은 선 · 작은 영문 캡션.
   조약돌 원칙은 '모서리'로 이어간다 — 넷 다 다른 곡률. */
.steps--stones { grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 620px)  { .steps--stones { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
@media (min-width: 1040px) { .steps--stones { gap: 1.4rem; } }

.steps--stones > li {
  padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 1.8rem) clamp(1.6rem, 3.4vw, 2.2rem);
  text-align: center;
  display: flex; flex-direction: column;
}
/* 넷 다 다른 모서리 — 찍어내지 않는다 */
.steps--stones > li:nth-child(1) { background: #0066B3; border-radius: 34px 10px 30px 12px; }
.steps--stones > li:nth-child(2) { background: #FFD971; border-radius: 12px 32px 10px 36px; }
.steps--stones > li:nth-child(3) { background: #FFD971; border-radius: 30px 14px 34px 10px; }
.steps--stones > li:nth-child(4) { background: #0066B3; border-radius: 10px 36px 12px 30px; }

/* 조약돌 외곽선은 이제 카드가 대신하므로 해제 */
.steps__name b::before { display: none; }
.steps__name { margin: 0; }
.steps__name b {
  display: block;
  padding: 0;
  font-family: var(--sans);
  font-size: clamp(1.9rem, 5.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.steps__name span {
  display: block;
  margin: 0.9rem auto 0;
  padding-top: 0.85rem;
  max-width: 8rem;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;   /* 자간 때문에 오른쪽으로 쏠리는 것 보정 */
}
.steps--stones > li p { margin: 1.3rem 0 0; font-size: 0.98rem; line-height: 1.7; }

/* 블루 판 */
.steps--stones > li:nth-child(1) .steps__name b,
.steps--stones > li:nth-child(4) .steps__name b { color: #FFD971; }
.steps--stones > li:nth-child(1) .steps__name span,
.steps--stones > li:nth-child(4) .steps__name span { color: rgba(255,255,255,0.82); border-top: 1px solid rgba(255,255,255,0.4); }
.steps--stones > li:nth-child(1) p,
.steps--stones > li:nth-child(4) p { color: #FFFFFF; }

/* 옐로우 판 */
.steps--stones > li:nth-child(2) .steps__name b,
.steps--stones > li:nth-child(3) .steps__name b { color: #0B4C86; }
.steps--stones > li:nth-child(2) .steps__name span,
.steps--stones > li:nth-child(3) .steps__name span { color: rgba(20,20,20,0.66); border-top: 1px solid rgba(20,20,20,0.28); }
.steps--stones > li:nth-child(2) p,
.steps--stones > li:nth-child(3) p { color: #141414; }

/* ── PSCR 카드: 왼쪽 정렬 + 크기 축소 (2026-07-28 "이렇게 클 필요도 없어서") ── */
.steps--stones > li { text-align: left; padding: 1.5rem 1.4rem 1.4rem; }
.steps__name b { font-size: clamp(1.35rem, 3vw, 1.7rem); }
.steps__name span { margin: 0.65rem 0 0; padding-top: 0.6rem; max-width: none; border-top-width: 1px; text-indent: 0; }
.steps--stones > li:nth-child(n) .steps__name span { display: inline-block; padding-right: 1.4rem; }
.steps--stones > li p { margin-top: 0.9rem; font-size: 0.95rem; }


/* ── 줄무늬(어닝 스트라이프) — 푸터 어깨에 한 줄 ── */
.colophon { position: relative; border-top: 0; }
.colophon::before {
  content: "";
  display: block;
  height: 12px;
  margin: 0 0 2.4rem;
  background: repeating-linear-gradient(90deg,
    #0066B3 0 14px, transparent 14px 28px);
  opacity: 0.85;
}

/* ============================================================
   푸터 재설계 (2026-07-28 한나님: "라인으로 나누기보다 전체적으로
   라인 패턴 색깔은 다운시켜서" + "레이아웃 구조는 식상해" + "심플하게!")
   → 잘라내는 띠 대신 블루 판 전체에 아주 옅은 세로 패턴.
   → 브랜드/CONTACT/FAMILY 3단 그리드 폐기 — 문장 하나 + 링크 한 줄.
   ============================================================ */
.colophon {
  background: #0066B3;
  color: #F7F2E4;
  padding: clamp(3rem, 7vh, 4.5rem) var(--gutter) 2.4rem;
  position: relative;
  overflow: hidden;
}
/* 패턴 = 판 전체에, 색은 다운 */
.colophon::before {
  content: "";
  position: absolute; inset: 0;
  height: auto; margin: 0; opacity: 1;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.055) 0 14px, transparent 14px 28px);
  pointer-events: none;
}
.colophon > * { position: relative; }

.colophon__grid { display: block; max-width: 72rem; margin: 0 auto; }
.colophon__brand { margin-bottom: 2.2rem; }
.colophon__name { color: #FFFFFF; font-size: 1.05rem; margin-bottom: 1.1rem; }
.colophon__name img { display: none; }   /* 블루 로고는 블루 판에서 사라짐 */
.colophon__name span { color: rgba(255,255,255,0.75); }
.colophon__line {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  line-height: 1.55;
  color: #F7F2E4;
}

/* 라벨은 내리고, 링크는 한 줄로 흐르게 */
.ft-label { display: none; }
.colophon__col { display: contents; }
.colophon__grid { }
.colophon__brand + .colophon__col ul,
.colophon__col ul {
  display: flex; flex-wrap: wrap; gap: 0 1.8rem;
  margin: 0; padding: 0; list-style: none;
}
.colophon__col li a { color: #FFFFFF; }
.colophon__col li a:hover { color: #FFD971; }
.colophon__col li a em { color: rgba(255,255,255,0.85); }

.colophon__copy {
  max-width: 72rem; margin: 1.8rem auto 0;
  border-top: 1px solid rgba(255,255,255,0.28);
  padding-top: 1.2rem;
  color: rgba(255,255,255,0.9);
}

/* ── PSCR: 구분선 제거, 한글+영문 한 줄 왼쪽 정렬 (2026-07-29) ── */
.steps__name { margin-bottom: 0.55rem; }
.steps__name b { display: inline; }
.steps--stones > li:nth-child(n) .steps__name span {
  display: inline;
  border-top: 0;
  padding: 0;
  margin: 0 0 0 0.6em;
}

/* ── 조약돌 정리 (2026-07-29 한나님: "너무 아이 느낌이 아니어야") ── */
/* 어른·기관 카드(공간 대여 · 출강·협업)는 조약돌 없이 이름만 */
.pgrid--open .pcard__name span { padding: 0; }
.pgrid--open .pcard__name span::before { display: none; }
/* 두 줄 이름(올드팝/시니어팝)은 돌이 세로로 감싸게 */
.pcard__name span { line-height: 1.24; }

/* ============================================================
   조약돌 = 포인트 (2026-07-29 한나님)
   "글자를 다 덮는 것보다, 작은 조약돌이 첫 글자와 약간 겹치게 포인트 주듯"
   → 이름은 잉크색 그대로 두고, 작은 돌이 첫 글자 왼쪽 위에 살짝 걸친다.
   ============================================================ */
.pcard__name span {
  padding: 0;
  color: var(--ink);
  margin-left: 0.34em;      /* 돌이 왼쪽으로 삐져나갈 자리 */
}
.pcard--kid .pcard__name span { color: var(--ink); }   /* 흰 글자 해제 */

.pcard__name span::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.3em;
  top: -0.2em;
  width: 1.02em;
  height: 1.02em;
  border: 0;
  background: var(--pebble-dot, #0066B3);
}
.pcard--kid   { --pebble-dot: #0066B3; }
.pcard--grown { --pebble-dot: #FFD971; }

/* 돌 네 개, 하나도 같은 모양이 아니게 */
.pgrid .pcard:nth-child(1) .pcard__name span::before { border-radius: 62% 38% 54% 46% / 45% 60% 40% 55%; }
.pgrid .pcard:nth-child(2) .pcard__name span::before { border-radius: 39% 61% 65% 35% / 58% 42% 58% 42%; }
.pgrid .pcard:nth-child(3) .pcard__name span::before { border-radius: 54% 46% 37% 63% / 63% 37% 63% 37%; }
.pgrid .pcard:nth-child(4) .pcard__name span::before { border-radius: 45% 55% 59% 41% / 38% 56% 44% 62%; }

/* ── 조약돌 색 = 버터옐로우로 통일 + 돌 없는 카드는 들여쓰기 해제 (2026-07-29) ── */
.pcard--kid   { --pebble-dot: #FFD971; }   /* 블루 → 버터옐로우 (잉크 13.5:1) */
.pcard--grown { --pebble-dot: #FFD971; }
/* 돌이 없는 어른·기관 카드는 이름이 왼쪽 선에 딱 맞게 */
.pgrid--open .pcard__name span { margin-left: 0; }

/* ── PSCR 위 가로선 제거 (2026-07-29 한나님 "라인 빼줘") ── */
.steps--stones { border-top: 0; }

/* ── PROOF: 성장·어른의 말 블록 ── */
.proof__lead {
  margin: 2.6rem 0 1rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--ink-soft);
}
.memos--plain .memo__when { display: none; }
.memos--plain blockquote { margin: 0; }

/* 올드팝 카드: CTA 두 개 나란히 */
.pcard__cta2 { display: flex; flex-wrap: wrap; gap: 0 1.6rem; margin: auto 0 0; }

/* ── 프로그램 카드 배치 (2026-07-29 한나님) ──
   윗줄 = 키즈팝 · 올드팝(대표 과정) / 아랫줄 = 토들러팝 · 크리디팝
   → 3열 + span2 조합을 2열 균등으로 단순화. */
@media (min-width: 700px)  { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pcard--wide { grid-column: auto; }
  .pcard--wide .spec { column-count: 1; }
}

/* ── 언어 전환 (2026-07-29) ── */
.mast__lang {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px; justify-content: center;
  padding: 0 0.7em;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink) !important;
  text-decoration: none;
}
.mast__lang:hover { border-color: var(--blue); color: var(--blue) !important; }


/* ── 만드는 사람: 직함 + 신조 (2026-07-31, 나만시 대문에서 이관) ── */
.why__role {
  color: var(--blue, #2B2622);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
/* 본문과 다른 서체로 결을 달리함 — Being만 이탤릭·강조 */
.why__creed {
  margin: 0 0 1.4rem;
  font-family: "Cormorant Garamond", "Gowun Batang", serif;
  font-weight: 300;
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink, #2B2622);
  opacity: .82;
}
.why__creed em {
  font-style: italic;
  font-weight: 500;
  font-size: 1.22em;
  opacity: 1;
  white-space: nowrap;
}

/* ============================================================
   히어로 — 사진이 먼저 (2026-08-02)
   Zara식: 사진은 바뀌고, 로고는 그 자리에 그대로.
   사진은 얼굴이 나오지 않는 컷만 쓴다(손·활동·빛·공간).
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  min-height: clamp(24rem, 68vh, 38rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.hero__frames { position: absolute; inset: 0; z-index: 0; }
.hero__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroCycle 21s cubic-bezier(.4,0,.3,1) infinite;
}
.hero__frame:nth-child(1) { animation-delay: -0.7s; object-position: 42% 55%; }
.hero__frame:nth-child(2) { animation-delay: 6.3s;  object-position: 82% 40%; }
.hero__frame:nth-child(3) { animation-delay: 13.3s; object-position: 38% 42%; }
@keyframes heroCycle {
  0%          { opacity: 0; }
  3%, 36.5%   { opacity: 1; }
  39.5%, 100% { opacity: 0; }
}
/* 전체 크림 스크림 — 사진은 살리고 브랜드 톤으로 묶는다 */
.hero__frames::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(247, 242, 228, 0.34) 0%,
    rgba(247, 242, 228, 0.16) 42%,
    rgba(247, 242, 228, 0.30) 74%,
    rgba(247, 242, 228, 0.86) 100%);
}
/* 로고가 앉는 자리에만 크림을 한 겹 더 — 사진 가장자리는 선명하게 둔다 */
.hero__over {
  position: relative;
  z-index: 1;
  width: min(46rem, 100%);
  padding: clamp(2.4rem, 7vh, 4rem) var(--gutter);
  text-align: center;
  background: radial-gradient(128% 108% at 50% 50%,
    rgba(247, 242, 228, 0.94) 0%,
    rgba(247, 242, 228, 0.92) 52%,
    rgba(247, 242, 228, 0.42) 74%,
    rgba(247, 242, 228, 0) 88%);
}
.hero__over .assemble { margin-inline: auto; }
.hero__over .assemble__line { margin: 0.9rem auto 0; max-width: 34rem; }
/* 캡션 — 사진 왼쪽 아래, 조용하게 */
.hero__cap {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(0.9rem, 2.4vh, 1.4rem);
  z-index: 1;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(38, 33, 28, 0.78);
  text-shadow: 0 1px 10px rgba(247, 242, 228, 0.9);
}
/* 히어로가 대표 사진 역할을 하므로 커버는 글자만 */
.cover { padding-top: clamp(2.6rem, 6vh, 4rem); }

@media (min-width: 900px) {
  .hero__cap { left: max(var(--gutter), calc(50vw - 22rem)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__frame { animation: none; opacity: 0; }
  .hero__frame:nth-child(1) { opacity: 1; }
}

/* 좁은 화면 — 로고 자리 크림을 세로로 좁혀 사진이 더 보이게 */
@media (max-width: 699px) {
  .hero { min-height: clamp(26rem, 74vh, 34rem); }
  .hero__over {
    padding-block: clamp(1.6rem, 4.5vh, 2.4rem);
    background: radial-gradient(150% 66% at 50% 47%,
      rgba(247, 242, 228, 0.94) 0%,
      rgba(247, 242, 228, 0.90) 48%,
      rgba(247, 242, 228, 0.36) 74%,
      rgba(247, 242, 228, 0) 90%);
  }
  .hero__cap { font-size: 0.72rem; letter-spacing: 0.12em; }
}

/* ============================================================
   시안 B 히어로 (/v2/) — 2026-08-03
   Zara식: 계절 사진 6장이 흐르고, 로고는 멈춰 있다.
   로고의 스마일(:J)이 항상 또렷해야 한다.
   ============================================================ */
.hero2 {
  position: relative;
  width: 100%;
  min-height: min(64svh, 34rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #F7F2E4;
  isolation: isolate;
}
.hero2__frames { position: absolute; inset: 0; z-index: 0; }
.hero2__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: hero2Cycle 65s cubic-bezier(.4,0,.3,1) infinite;
}
.hero2__frame:nth-child(1) { animation-delay: -0.5s; object-position: 50% 40%; }
.hero2__frame:nth-child(2) { animation-delay: 6s; object-position: 28% 45%; }
.hero2__frame:nth-child(3) { animation-delay: 12.5s; object-position: 45% 50%; }
.hero2__frame:nth-child(4) { animation-delay: 19s; object-position: 30% 45%; }
.hero2__frame:nth-child(5) { animation-delay: 25.5s; object-position: 50% 45%; }
.hero2__frame:nth-child(6) { animation-delay: 32s; object-position: 50% 50%; }
.hero2__frame:nth-child(7) { animation-delay: 38.5s; object-position: 28% 50%; }
.hero2__frame:nth-child(8) { animation-delay: 45s; object-position: 30% 45%; }
.hero2__frame:nth-child(9) { animation-delay: 51.5s; object-position: 38% 55%; }
.hero2__frame:nth-child(10) { animation-delay: 58s; object-position: 14% 50%; }
@keyframes hero2Cycle {
  0%          { opacity: 0; }
  1.6%, 11.6% { opacity: 1; }
  13.2%, 100% { opacity: 0; }
}
/* 로고는 움직이지 않는다 — 오른쪽 사이드, 배경 없이 사진 위에 바로 */
.hero2__brand {
  position: absolute;
  z-index: 1;
  right: clamp(1.2rem, 6vw, 5rem);
  bottom: clamp(1.6rem, 6vh, 3rem);
  text-align: right;
  max-width: min(40vw, 26rem);
  padding: 1.6rem 1.8rem;
  background: radial-gradient(closest-side,
    rgba(247, 242, 228, 0.72) 0%,
    rgba(247, 242, 228, 0.52) 55%,
    rgba(247, 242, 228, 0) 100%);
}
.hero2__logo {
  display: block;
  width: clamp(12rem, 26vw, 21rem);
  height: auto;
  margin: 0 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(38, 33, 28, 0.25))
          drop-shadow(0 0 16px rgba(247, 242, 228, 0.9));
}
.hero2__line {
  margin: 1rem 0 0 auto;
  max-width: 23rem;
  text-wrap: balance;
  font-size: clamp(0.9rem, 2.2vw, 1rem);
  color: var(--ink);
  text-shadow: 0 0 4px rgba(247, 242, 228, 0.95), 0 1px 14px rgba(247, 242, 228, 0.9);
}
.hero2__line strong { color: var(--blue); font-weight: 500; }
@media (max-width: 699px) {
  .hero2 { min-height: min(56svh, 27rem); }
  .hero2__brand { right: var(--gutter); bottom: 4.6rem; max-width: 78vw; }
  .hero2__logo { width: min(11.5rem, 54vw); }
  .hero2__line { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero2__frame { animation: none; opacity: 0; }
  .hero2__frame:nth-child(1) { opacity: 1; }
}
/* 시안 비교 필 */
.ab-pill {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(38, 33, 28, 0.25);
}
.ab-pill:hover { background: var(--blue); }

/* ============================================================
   v3 — 흰 바탕 + 인조이풀 색이 주인공 (2026-08-08)
   한나님: "아이보리를 빼야 할 것 같아. 인조이풀 컬러가 돋보이게.
   클릭할 수 있다는 느낌. 키즈 분위기!"
   ============================================================ */
body { background: #FFFFFF; }
.hero2 { background: #FFFFFF; }
#pscr, #letters, #why, .sec--doors {
  border-top-color: rgba(0, 102, 179, 0.10);
  border-bottom-color: rgba(0, 102, 179, 0.10);
}

/* ── 내브바: 한글 크게 + 옅은 영문, 눌리는 알약 ── */
.mast--v3 { background: #FFFFFF; }
.mast--v3 .mast__nav { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.nv {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.42rem 0.95rem;
  border: 1.5px solid rgba(0, 102, 179, 0.25);
  border-radius: 999px;
  text-decoration: none;
  line-height: 1.15;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.nv b { font-weight: 700; font-size: 0.95rem; color: var(--ink); letter-spacing: 0.01em; }
.nv span { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.18em; color: rgba(38, 33, 28, 0.42); }
.nv:hover, .nv:focus-visible {
  background: #FFD971;
  border-color: #FFD971;
  transform: translateY(-2px);
  text-decoration: none;
}
.nv--go { background: var(--blue); border-color: var(--blue); }
.nv--go b { color: #FFFFFF; }
.nv--go span { color: rgba(255, 255, 255, 0.72); }
.nv--go:hover, .nv--go:focus-visible { background: #005699; border-color: #005699; transform: translateY(-2px); }
.nv--go:hover b { color: #FFFFFF; }
.nv--now { background: rgba(0, 102, 179, 0.08); }
@media (max-width: 699px) {
  .nv { padding: 0.36rem 0.8rem; }
  .nv b { font-size: 0.88rem; }
}

/* ── 답 밴드: "여기 뭐 하는 곳이야?" — 버터옐로우, 키즈 에너지 ── */
.answer {
  background: #FFD971;
  padding: clamp(2.6rem, 7vh, 4.2rem) var(--gutter);
}
.answer__in { max-width: 72rem; margin: 0 auto; }
.answer__what {
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.6vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #141414;
}
.answer__what strong { color: #0B4C86; }
.answer__how { margin: 0 0 1.6rem; font-size: clamp(1rem, 2.6vw, 1.15rem); line-height: 1.75; color: rgba(20, 20, 20, 0.82); }
.answer__how strong { font-weight: 700; color: #141414; }
.answer__cta { margin: 0; display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* 공용 버튼 — 눌리는 느낌 */
.abtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1.5px solid rgba(38, 33, 28, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.abtn:hover, .abtn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(38, 33, 28, 0.16);
  text-decoration: none;
}
.abtn--blue { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.abtn--blue:hover { background: #005699; color: #FFFFFF; }

/* ── 랜딩 프로그램 티저: 통카드 링크, 호버가 말해준다 ── */
.tez {
  list-style: none;
  margin: 1.8rem 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
@media (max-width: 699px) { .tez { grid-template-columns: 1fr; } }
.tez__card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name arrow" "who arrow" "line arrow";
  align-items: center;
  column-gap: 0.8rem;
  padding: 1.25rem 1.4rem;
  border: 1.5px solid rgba(0, 102, 179, 0.22);
  border-radius: 1.1rem;
  background: #FFFFFF;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.tez__card b { grid-area: name; font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.tez__card i { grid-area: who; font-style: normal; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; color: var(--blue); margin-top: 0.2rem; }
.tez__card em { grid-area: line; font-style: normal; font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.45rem; }
.tez__card span { grid-area: arrow; font-size: 1.3rem; color: rgba(0, 102, 179, 0.5); transition: transform 0.16s ease, color 0.16s ease; }
.tez__card--grown { border-color: rgba(214, 168, 60, 0.5); }
.tez__card--grown i { color: #8a6b1f; }
.tez__card:hover, .tez__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0, 102, 179, 0.14);
  background: #F2F8FE;
  border-color: var(--blue);
  text-decoration: none;
}
.tez__card--grown:hover, .tez__card--grown:focus-visible { background: #FFF6DC; border-color: #D6A83C; box-shadow: 0 10px 26px rgba(214, 168, 60, 0.2); }
.tez__card:hover span { transform: translateX(4px); color: var(--blue); }
.tez__more { margin: 0; }

/* ── 프로그램 허브(/programs/) ── */
.pv3 { background: #FFFFFF; }
.phead {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2.4rem, 6vh, 4rem) var(--gutter) 0.5rem;
}
.phead h1 {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.2rem);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}
.phead__en { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; color: rgba(0, 102, 179, 0.55); }
.phead__lede { margin: 0 0 1.6rem; font-size: clamp(1.02rem, 2.7vw, 1.2rem); line-height: 1.8; }
.phead__lede strong { color: var(--blue); }
.phead__note { margin: 1.2rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 102, 179, 0.25);
  background: #FFFFFF;
  text-decoration: none;
  line-height: 1.2;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.chip b { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.chip span { font-size: 0.68rem; color: var(--ink-soft); }
.chip:hover, .chip:focus-visible { background: #FFD971; border-color: #FFD971; transform: translateY(-2px); text-decoration: none; }
.sec--ptable { padding-top: 1.6rem; }
/* 카드 호버 — 커서가 닿으면 떠오르고 물든다 */
.pv3 .pcard { transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease; }
.pv3 .pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 102, 179, 0.13);
}
.pv3 .pcard--kid:hover { background: #F2F8FE; border-color: var(--blue); }
.pv3 .pcard--grown:hover { background: #FFF6DC; border-color: #D6A83C; box-shadow: 0 12px 30px rgba(214, 168, 60, 0.18); }
.pv3 .pcard--open:hover { background: #FAFAF7; border-color: rgba(38, 33, 28, 0.3); box-shadow: 0 12px 30px rgba(38, 33, 28, 0.1); }
.pv3 .pcard { scroll-margin-top: 6rem; }
.pfoot {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.2rem var(--gutter) 3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-top: 1px solid rgba(0, 102, 179, 0.12);
}
.pfoot a { font-weight: 700; color: var(--blue); }
@media (prefers-reduced-motion: reduce) {
  .nv, .abtn, .tez__card, .chip, .pv3 .pcard { transition: none; }
  .nv:hover, .abtn:hover, .tez__card:hover, .chip:hover, .pv3 .pcard:hover { transform: none; }
}

/* ============================================================
   v3.1 — 타이포 히어로 · 드롭다운 · 스크롤 리빌 · 콜라주 후기
   (2026-08-08, dasiflow 참고 — 텍스트가 움직이고, 사진은 영상이 올 때까지 쉼)
   ============================================================ */

/* ── 타이포 히어로 ── */
.hero3 {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  padding: clamp(3.2rem, 9vh, 6rem) var(--gutter) clamp(2.6rem, 7vh, 4.5rem);
}
.hero3__media { position: absolute; inset: 0; z-index: 0; }   /* 영상 슬롯 */
.hero3__media video { width: 100%; height: 100%; object-fit: cover; }
.hero3__in { position: relative; z-index: 2; max-width: 72rem; margin: 0 auto; }
.hero3__kicker {
  margin: 0 0 1.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--blue);
  opacity: 0;
  animation: h3fade 0.6s ease 0.1s forwards;
}
.hero3__head { margin: 0 0 1.4rem; font-family: var(--sans); }
.hero3__head .l { display: block; overflow: hidden; }
.hero3__head .l b {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(2.1rem, 7vw, 4.2rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--ink);
  transform: translateY(115%);
  animation: h3rise 0.85s cubic-bezier(.2,.75,.25,1) forwards;
}
.hero3__head .l:nth-child(1) b { animation-delay: 0.22s; }
.hero3__head .l:nth-child(2) b { animation-delay: 0.42s; }
.hero3__head em { font-style: normal; color: var(--blue); }
.hero3__head .l:nth-child(2) em {
  color: var(--ink);
  background: linear-gradient(transparent 62%, #FFD971 62%, #FFD971 94%, transparent 94%);
}
.hero3__sub {
  margin: 0 0 1.8rem;
  font-size: clamp(1rem, 2.6vw, 1.18rem);
  color: var(--ink-soft);
  opacity: 0;
  animation: h3fade 0.7s ease 0.85s forwards;
}
.hero3__sub strong { color: var(--blue); font-weight: 500; }
.hero3__cta {
  margin: 0;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: h3fade 0.7s ease 1.05s forwards;
}
.hero3 .ticker__q { margin-top: 2.4rem; animation-delay: 1.3s; }
.hero3 .ticker { animation-delay: 1.35s; }
.hero3 .ticker span { animation-delay: calc(1.35s + var(--d, 0s)); }
@keyframes h3rise { to { transform: none; } }
@keyframes h3fade { to { opacity: 1; } }

/* 떠다니는 조약돌 — 사진 대신 색으로 키즈 에너지 */
.hero3__blobs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero3__blobs i {
  position: absolute;
  display: block;
  opacity: 0.5;
  animation: blobFloat 11s ease-in-out infinite alternate;
}
.hero3__blobs i:nth-child(1) {
  width: clamp(7rem, 16vw, 13rem); height: clamp(7rem, 16vw, 13rem);
  right: -2rem; top: -2.5rem;
  background: #FFD971;
  border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
}
.hero3__blobs i:nth-child(2) {
  width: clamp(4.5rem, 9vw, 7.5rem); height: clamp(4.5rem, 9vw, 7.5rem);
  right: clamp(6rem, 18vw, 16rem); bottom: 8%;
  border: 3px solid rgba(0, 102, 179, 0.35);
  border-radius: 47% 53% 44% 56% / 55% 45% 55% 45%;
  animation-duration: 14s;
}
.hero3__blobs i:nth-child(3) {
  width: clamp(2.6rem, 5vw, 4rem); height: clamp(2.6rem, 5vw, 4rem);
  right: clamp(2rem, 7vw, 6rem); top: 42%;
  background: rgba(0, 102, 179, 0.16);
  border-radius: 52% 48% 60% 40% / 46% 54% 46% 54%;
  animation-duration: 9s;
}
.hero3__blobs i:nth-child(4) {
  width: 1.5rem; height: 1.5rem;
  left: 55%; bottom: 12%;
  background: #C0788A00;
  border: 3px solid rgba(255, 217, 113, 0.8);
  border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
  animation-duration: 12s;
}
@keyframes blobFloat {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-0.9rem, 1.1rem) rotate(9deg); }
}
@media (max-width: 699px) {
  .hero3__blobs i:nth-child(2) { right: 1rem; bottom: 4%; }
}

/* ── 내브 드롭다운 ── */
.nvd { position: relative; display: inline-flex; }
.nvd__menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 13.5rem;
  padding: 0.5rem;
  background: #FFFFFF;
  border: 1.5px solid rgba(0, 102, 179, 0.18);
  border-radius: 1rem;
  box-shadow: 0 14px 34px rgba(38, 33, 28, 0.14);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}
.nvd:hover .nvd__menu, .nvd:focus-within .nvd__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nvd__menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.8rem;
  border-radius: 0.6rem;
  text-decoration: none;
  white-space: nowrap;
}
.nvd__menu a b { font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.nvd__menu a span { font-size: 0.72rem; color: var(--ink-soft); }
.nvd__menu a:hover, .nvd__menu a:focus-visible { background: #FFD971; text-decoration: none; }
@media (max-width: 899px) { .nvd__menu { display: none; } }  /* 모바일: 탭하면 바로 이동 */

/* ── 스크롤 리빌 ── */
.rv { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1); }
.rv-in { opacity: 1; transform: none; }
.memos .memo.rv:nth-child(2) { transition-delay: 0.08s; }
.memos .memo.rv:nth-child(3) { transition-delay: 0.16s; }
.memos .memo.rv:nth-child(4) { transition-delay: 0.24s; }
.memos .memo.rv:nth-child(5) { transition-delay: 0.32s; }
.tez .rv:nth-child(2) { transition-delay: 0.08s; }
.tez li:nth-child(2) .rv { transition-delay: 0.08s; }
.tez li:nth-child(3) .rv { transition-delay: 0.16s; }
.tez li:nth-child(4) .rv { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero3__head .l b { transform: none; animation: none; }
  .hero3__kicker, .hero3__sub, .hero3__cta { opacity: 1; animation: none; }
  .hero3__blobs i { animation: none; }
}

/* ── 후기 = 콜라주 보드 (테이프 + 삐뚤빼뚤) ── */
.memos { gap: 1.4rem 1.2rem; }
.memo {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(38, 33, 28, 0.1);
  border-radius: 0.35rem;
  box-shadow: 0 8px 22px rgba(38, 33, 28, 0.1);
}
.memo::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 50%;
  width: 4.4rem;
  height: 1.5rem;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 217, 113, 0.85);
  opacity: 0.9;
}
.memo.memo--b::before { background: rgba(0, 102, 179, 0.28); transform: translateX(-50%) rotate(2.5deg); }
.memos .memo:nth-child(odd)  { rotate: -1.6deg; }
.memos .memo:nth-child(even) { rotate: 1.3deg; }
.memos .memo:nth-child(3n)   { rotate: 2.1deg; }
.memos .memo:nth-child(5n)   { rotate: -2.3deg; }
.memo.memo--y { background: #FFFBEE; }
.memo.memo--b { background: #F4F9FE; }
.memo:hover { rotate: 0deg; transition: rotate 0.25s ease; }
.rv.rv-in.memo { transform: none; }

/* ── 흰 바탕 위 섹션 분리 보강 ── */
.sec--letters { background: #FFFFFF; }

/* 콜라주 보강 — 메모지는 조각조각, 테이프는 또렷하게 */
.memos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)) !important;
  gap: 1.6rem 1.2rem !important;
  align-items: start;
  max-width: none;
  border-bottom: none;
}
.memos .memo { max-width: none; padding: 1.5rem 1.3rem 1.2rem; }
.memos .memo--wide { grid-column: 1 / -1; max-width: 34rem; justify-self: center; }
.memos .memo:nth-child(even) { margin-top: 0.9rem; }
.memos .memo:nth-child(3n)   { margin-top: 0.35rem; }
.memo::before {
  box-shadow: 0 2px 6px rgba(38, 33, 28, 0.14);
  border-left: 1px dashed rgba(255, 255, 255, 0.55);
  border-right: 1px dashed rgba(255, 255, 255, 0.55);
}
.memos .memo:nth-child(odd)  { rotate: -2.2deg; }
.memos .memo:nth-child(even) { rotate: 1.8deg; }
.memos .memo:nth-child(4n)   { rotate: -1.2deg; }
.memos .memo:nth-child(5n)   { rotate: 2.6deg; }

/* ============================================================
   v3.2 — 균일한 박자 · 행 링크 · 왼쪽 정렬 (2026-08-08)
   "스크롤이 지치지 않도록" — 모든 박자의 호흡을 같게
   ============================================================ */
.sec, .beat {
  padding-top: clamp(3rem, 8vh, 4.6rem);
  padding-bottom: clamp(3rem, 8vh, 4.6rem);
}
.beat { border-top: 1px solid rgba(0, 102, 179, 0.1); max-width: 72rem; margin: 0 auto; }
#programs, #letters { border-top: 1px solid rgba(0, 102, 179, 0.1); }

/* 행 링크 — dasiflow 문법: 라벨 · 제목 · 설명 · 화살표 */
.rows { margin-top: 0.6rem; }
.rowlink {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  grid-template-areas: "label title arrow" "label sub arrow";
  align-items: baseline;
  column-gap: 1.6rem;
  padding: 1.35rem 0.4rem;
  border-bottom: 1px solid rgba(38, 33, 28, 0.12);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.18s ease, padding-left 0.18s ease;
}
.rows .rowlink:first-child { border-top: 1px solid rgba(38, 33, 28, 0.12); }
.rowlink i {
  grid-area: label;
  align-self: start;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--blue);
}
.rowlink b { grid-area: title; font-size: clamp(1.15rem, 3vw, 1.45rem); font-weight: 700; letter-spacing: -0.01em; }
.rowlink span { grid-area: sub; font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.25rem; }
.rowlink em {
  grid-area: arrow;
  align-self: center;
  font-style: normal;
  font-size: 1.25rem;
  color: rgba(0, 102, 179, 0.45);
  transition: transform 0.18s ease, color 0.18s ease;
}
.rowlink:hover, .rowlink:focus-visible {
  background: linear-gradient(90deg, rgba(255, 217, 113, 0.35), rgba(255, 217, 113, 0));
  padding-left: 0.9rem;
  text-decoration: none;
}
.rowlink:hover b { color: var(--blue); }
.rowlink:hover em { transform: translate(3px, -3px); color: var(--blue); }
@media (max-width: 699px) {
  .rowlink { grid-template-columns: 1fr auto; grid-template-areas: "label arrow" "title arrow" "sub arrow"; }
  .rowlink i { margin-bottom: 0.2rem; }
}

/* 왼쪽 정렬 통일 — 시즌 밴드 포함 */
.season__in { text-align: left; }
.season__in .season__cta { justify-content: flex-start; }

/* 어바웃 페이지도 같은 박자 */
.pv3 .sec { max-width: 72rem; margin-inline: auto; }

/* 모집 상태 칩 — 프로그램 카드 (2026-08-08) */
.pcard__stat { margin: 0 0 0.7rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.stat {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.stat--open   { background: var(--blue); color: #FFFFFF; }
.stat--always { background: rgba(0, 102, 179, 0.1); color: var(--blue); }
.stat--soon   { background: rgba(255, 217, 113, 0.55); color: #6b5310; }

/* ============================================================
   리얼 후기 — 월드비전식 스탯 카드 + 스와이프 (2026-08-08, 설문 근거)
   ============================================================ */
.wv {
  list-style: none;
  margin: 1.8rem 0 0.5rem;
  padding: 0.4rem 0.2rem 1rem;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wv::-webkit-scrollbar { display: none; }
.wv__card {
  flex: 0 0 min(21rem, 82vw);
  scroll-snap-align: start;
  padding: 1.6rem 1.6rem 1.4rem;
  border: 1.5px solid rgba(38, 33, 28, 0.12);
  border-radius: 1.2rem;
  background: #FFFFFF;
  box-shadow: 0 6px 20px rgba(38, 33, 28, 0.06);
}
.wv__chip {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1.5px solid rgba(0, 102, 179, 0.35);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 1rem;
}
.wv__num {
  display: block;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue);
  margin-bottom: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.wv__num i { font-style: normal; font-size: 0.45em; font-weight: 800; margin-left: 0.1em; }
.wv__card p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); }
.wv__card p strong { color: var(--ink); }
.wv__card:nth-child(2) .wv__num { color: #D6A83C; }
.wv__card:nth-child(2) .wv__chip { border-color: rgba(214, 168, 60, 0.5); color: #8a6b1f; }
.wv__hint { margin: 0 0 1.6rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(38, 33, 28, 0.4); }
@media (min-width: 900px) { .wv__card { flex-basis: 26rem; } }

/* 어머니들의 문장 — 가로 스와이프 카드 */
.qcar {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0.4rem 0.2rem 1rem;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qcar::-webkit-scrollbar { display: none; }
.qcar li {
  flex: 0 0 min(26rem, 86vw);
  scroll-snap-align: start;
  padding: 1.5rem 1.6rem;
  background: #FFFBEE;
  border: 1px solid rgba(214, 168, 60, 0.28);
  border-radius: 0.4rem 1.4rem 1.4rem 1.4rem;
  box-shadow: 0 6px 18px rgba(38, 33, 28, 0.07);
}
.qcar li:nth-child(even) { background: #F4F9FE; border-color: rgba(0, 102, 179, 0.2); border-radius: 1.4rem 0.4rem 1.4rem 1.4rem; }
.qcar blockquote { margin: 0; font-family: var(--serif); font-size: 1.02rem; line-height: 1.75; color: var(--ink); }
.qcar blockquote strong { color: var(--blue); }

/* ============================================================
   왼쪽 기준선 통일 (2026-08-08) — 화면 폭이 바뀌어도
   모든 섹션의 글 시작점이 한 줄에 선다
   기준: .sec = 가운데 72rem 상자 + 안쪽 거터
   ============================================================ */
/* 풀블리드 흰 판 — 거터 하나가 빠져 있던 계산식 보정 */
#pscr, #letters, #why, .sec--doors {
  padding-left: max(var(--gutter), calc((100% - 72rem) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - 72rem) / 2 + var(--gutter)));
}
/* 풀블리드 밴드의 안쪽 상자 — 내용 폭을 (72rem − 거터×2)로 맞춰 같은 선에 */
.hero3__in,
.answer__in,
.season__in,
.board .board__in {
  max-width: calc(72rem - 2 * var(--gutter));
}

/* 섹션 번호 제거 (2026-08-08 한나님 — 페이지가 나뉜 뒤로 번호는 혼란만) */
.sec__mark .mk-en::before { content: none; }

/* ============================================================
   놀이판 — 답이 없는 판 (2026-08-08)
   방문이 곧 아트활동: 재료 조각을 직접 끌어서 놓는다
   ============================================================ */
.play__board {
  position: relative;
  height: clamp(20rem, 48vh, 26rem);
  margin: 1.8rem 0 1.2rem;
  border: 1.5px solid rgba(38, 33, 28, 0.14);
  border-radius: 1.4rem;
  background:
    radial-gradient(rgba(38, 33, 28, 0.1) 1.3px, transparent 1.3px) 0 0 / 22px 22px,
    #FDFBF4;   /* 페그보드 점 + 따뜻한 종이 */
  overflow: hidden;
  touch-action: none;
}
.pm {
  position: absolute;
  display: block;
  cursor: grab;
  transform: rotate(var(--r, 0deg));
  transition: box-shadow 0.15s ease, scale 0.15s ease;
  box-shadow: 0 3px 8px rgba(38, 33, 28, 0.18);
}
.pm--held { cursor: grabbing; scale: 1.12; box-shadow: 0 10px 22px rgba(38, 33, 28, 0.26); z-index: 5; }
/* 재료들 — 폼폼 · 조약돌 · 막대 · 단추 · 고리 · 클레이 · 조각 · 구슬 */
.pm--pompom  { width: 3rem;   height: 3rem;   border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFE79E, #FFD971); }
.pm--pompom2 { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #7FB3DC, #0066B3); }
.pm--pebble  { width: 4.2rem; height: 3.3rem; border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%; background: linear-gradient(135deg, #D98E4F, #c77b3c); }
.pm--pebble2 { width: 3.4rem; height: 2.8rem; border-radius: 42% 58% 45% 55% / 58% 45% 55% 45%; background: linear-gradient(135deg, #C0788A, #ad6175); }
.pm--stick   { width: 5.2rem; height: 1.1rem; border-radius: 999px; background: linear-gradient(90deg, #E8D5AE, #d9c294); }
.pm--stick2  { width: 4.2rem; height: 1rem;   border-radius: 999px; background: linear-gradient(90deg, #4E9084, #3f7a6f); }
.pm--button  { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #8C9A4E; box-shadow: inset 0 0 0 0.55rem #8C9A4E, inset 0 0 0 0.7rem #FDFBF4, 0 3px 8px rgba(38,33,28,0.18); }
.pm--ring    { width: 3.1rem; height: 3.1rem; border-radius: 50%; background: transparent; border: 0.62rem solid #0066B3; box-sizing: border-box; }
.pm--clay    { width: 3.8rem; height: 2.6rem; border-radius: 47% 53% 60% 40% / 55% 45% 60% 40%; background: linear-gradient(135deg, #B9A6E0, #9d86cf); }
.pm--clay2   { width: 2.9rem; height: 2.9rem; border-radius: 60% 40% 45% 55% / 45% 60% 40% 55%; background: linear-gradient(135deg, #FFD971, #f2c44f); }
.pm--tri     { width: 0; height: 0; border-left: 1.5rem solid transparent; border-right: 1.5rem solid transparent; border-bottom: 2.6rem solid #4E9084; background: none; box-shadow: none; filter: drop-shadow(0 3px 5px rgba(38,33,28,0.2)); }
.pm--bead    { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #f0a8b8, #C0788A); }
.play__foot { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.play__foot a { font-weight: 700; color: var(--blue); }
@media (max-width: 699px) {
  .play__board { height: 19rem; }
  .pm { scale: 0.88; }
  .pm--held { scale: 1; }
}

/* ============================================================
   프로그램 아코디언 — 한 화면 목록, 눌러서 펼치기 (2026-08-08)
   ============================================================ */
.sec--acc { padding-top: 0.6rem; }
.acc__group {
  margin: 2.4rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.acc__group span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; color: rgba(0, 102, 179, 0.5); margin-left: 0.5rem; }
.acc { border-bottom: 1px solid rgba(38, 33, 28, 0.12); }
.acc:first-of-type, .acc__group + .acc { border-top: 1px solid rgba(38, 33, 28, 0.12); }
.acc summary {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 1.2fr) auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0.4rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.16s ease, padding-left 0.16s ease;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 400;
  color: rgba(0, 102, 179, 0.55);
  transition: transform 0.2s ease;
  justify-self: end;
}
.acc[open] summary::after { transform: rotate(45deg); }
.acc summary b { font-size: clamp(1.1rem, 2.6vw, 1.35rem); font-weight: 700; letter-spacing: -0.01em; }
.acc summary i { font-style: normal; font-size: 0.85rem; color: var(--ink-soft); }
.acc summary em { font-style: normal; font-size: 0.85rem; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.acc summary .stat { white-space: nowrap; }
.acc summary:hover, .acc summary:focus-visible { outline: none; }
.acc__body { padding: 0.3rem 0.4rem 1.6rem; max-width: 46rem; }
.acc__body > p:first-child { margin-top: 0.2rem; }
.acc__body .spec { margin: 1rem 0; }
.acc__note { font-size: 0.88rem; color: var(--ink-soft); }
.acc__cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
@media (max-width: 799px) {
  .acc summary {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name chip" "who chip" "price chip";
    row-gap: 0.15rem;
  }
  .acc summary b { grid-area: name; }
  .acc summary i { grid-area: who; }
  .acc summary em { grid-area: price; }
  .acc summary .stat { grid-area: chip; align-self: start; }
  .acc summary::after { display: none; }
}

/* ============================================================
   프로그램 포스터 타일 — 6장이 한 화면에 (2026-08-08)
   접힘 = 포스터 그리드 · 펼침 = 가로 배너
   ============================================================ */
.phead--slim { padding-bottom: 0; }
.phead--slim h1 { margin-bottom: 0.4rem; }
.phead__hint { font-size: 0.85rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.pgrid2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 1.2rem;
}
.pgrid2 .acc { border: none !important; }
.pgrid2 .acc[open] { grid-column: 1 / -1; }
.pgrid2 .acc summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.22rem;
  min-height: clamp(9rem, 20vh, 11.5rem);
  padding: 1.1rem 3rem 1.1rem 1.2rem;
  border-radius: 1.1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.pgrid2 .acc summary:hover, .pgrid2 .acc summary:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(38, 33, 28, 0.18);
  filter: saturate(1.06);
}
.pgrid2 .acc summary::after { position: absolute; right: 1rem; bottom: 0.85rem; justify-self: unset; }
.pgrid2 .acc summary u {
  position: absolute;
  left: 1.2rem; top: 1rem;
  text-decoration: none;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  opacity: 0.65;
}
.pgrid2 .acc summary b { font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.2; }
.pgrid2 .acc summary i { font-size: 0.9rem; font-weight: 700; opacity: 1; }
.pgrid2 .acc summary em { font-size: 0.8rem; font-weight: 400; opacity: 0.9; }
.pgrid2 .acc summary .stat { position: absolute; right: 1rem; top: 0.85rem; }
/* 포스터 색 — 파랑·버터가 주인공 */
.t-kids    summary { background: var(--blue); }
.t-kids    summary b, .t-kids summary i, .t-kids summary u { color: #FFFFFF; }
.t-kids    summary em { color: #FFD971; }
.t-kids    summary::after { color: rgba(255,255,255,0.8); }
.t-toddler summary { background: #FFD971; }
.t-toddler summary b, .t-toddler summary i, .t-toddler summary u { color: #141414; }
.t-toddler summary em { color: #0B4C86; }
.t-cred    summary { background: #DCEBFA; }
.t-cred    summary b { color: #0B4C86; }
.t-cred    summary em { color: var(--blue); }
.t-old     summary { background: #F6E3B4; }
.t-old     summary b { color: #6b5310; }
.t-old     summary em { color: #8a6b1f; }
.t-rent    summary { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(38,33,28,0.16); }
.t-partner summary { background: #26211C; }
.t-partner summary b, .t-partner summary u { color: #FFFFFF; }
.t-partner summary i { color: rgba(255,255,255,0.75); }
.t-partner summary em { color: #FFD971; }
.t-partner summary::after { color: rgba(255,255,255,0.7); }
/* 타일 위 상태칩 가독 */
.t-kids .stat--open { background: #FFD971; color: #141414; }
.t-partner .stat--always { background: rgba(255,255,255,0.16); color: #FFD971; }
/* 펼친 배너의 본문 */
.pgrid2 .acc[open] summary { min-height: 0; flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pgrid2 .acc[open] summary u { position: static; }
.pgrid2 .acc[open] summary .stat { position: static; margin-left: auto; }
.pgrid2 .acc__body {
  padding: 1.2rem 1.2rem 1.5rem;
  border: 1.5px solid rgba(38, 33, 28, 0.12);
  border-top: none;
  border-radius: 0 0 1.1rem 1.1rem;
  max-width: none;
}
.pgrid2 .acc[open] summary { border-radius: 1.1rem 1.1rem 0 0; }
@media (max-width: 799px) {
  .pgrid2 { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .pgrid2 .acc summary { min-height: 8.6rem; padding: 0.9rem 1rem; grid-template-areas: none; display: flex; }
  .pgrid2 .acc summary::after { display: block; }
  .pgrid2 .acc summary .stat { position: absolute; right: 0.8rem; top: 0.8rem; scale: 0.9; }
}

/* ── 만드는 사람 — 랜딩 두 번째 박자 (2026-08-08) ── */
.maker {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.maker__in {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.6rem, 5vw, 3.5rem);
  align-items: center;
}
.maker__role { font-size: 0.95rem; font-weight: 700; color: var(--blue); margin: 0.2rem 0 1rem; }
.maker__creed {
  font-family: "Cormorant Garamond", var(--serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.maker__creed em { font-style: italic; color: var(--blue); }
.maker__photo { margin: 0; }
.maker__photo img {
  width: 100%;
  max-width: 20rem;
  height: auto;
  display: block;
  margin-left: auto;
  border-radius: 0.9rem;
  border: 4px solid #FFD971;
}
@media (max-width: 799px) {
  .maker__in { grid-template-columns: 1fr; }
  .maker__photo img { max-width: 13rem; margin: 0; }
  .maker__photo { order: -1; }
}

/* 내브 로고 — 마크를 크게, 꽉 차게 (2026-08-08) */
.mast--v3 .mast__logo { gap: 0.55rem; font-size: 1.12rem; font-weight: 700; }
.mast--v3 .mast__logo img { width: 42px; height: 42px; }
@media (max-width: 699px) { .mast--v3 .mast__logo img { width: 36px; height: 36px; } }

/* ============================================================
   로고 사용 규칙 (2026-08-08)
   마크(mark.png, 정사각) = 좁은 자리의 서명 — 내브·파비콘·앱 아이콘
   가로형(logo-wide.png) = 브랜드를 온전히 — 푸터·워터마크·공유 카드
   ============================================================ */
.mast--v3 .mast__logo img { border-radius: 0.35rem; }
.colophon__wordmark {
  width: min(15rem, 62vw);
  height: auto;
  display: block;
  margin: 0 0 0.9rem;
}
.colophon__name { margin-bottom: 0.6rem; display: block; }
.colophon__wordmark { flex: none; }

/* 어바웃 — 사진 높이를 본문 블록에 맞춘다 (2026-08-08) */
.sec--why .why__hi { margin: 0 0 1.6rem; }
.sec--why .why { align-items: stretch; }
.sec--why .why__photo { display: flex; flex-direction: column; margin: 0; }
.sec--why .why__photo img {
  width: 100%;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: 0.9rem;
}
.sec--why .why__photo figcaption { margin-top: 0.7rem; flex: none; }
@media (max-width: 899px) {
  .sec--why .why__photo img { height: auto; max-height: 22rem; }
}

/* ============================================================
   v3.3 — 라인 내브 · 타입 비율 축소 (2026-08-08 한나님)
   ============================================================ */
/* 내브: 알약 → 라인. 밑줄이 자라나는 언더라인 인디케이터 */
.mast--v3 .mast__nav { gap: clamp(0.9rem, 2.2vw, 1.7rem); }
.mast--v3 .nv {
  border: none;
  border-radius: 0;
  padding: 0.25rem 0.1rem;
  background: none;
  align-items: flex-start;
  gap: 0.14rem;
  position: relative;
}
.mast--v3 .nv::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15rem;
  height: 2px;
  width: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1);
}
.mast--v3 .nv:hover, .mast--v3 .nv:focus-visible { background: none; transform: none; }
.mast--v3 .nv:hover::after, .mast--v3 .nv:focus-visible::after, .mast--v3 .nv--now::after { transform: scaleX(1); }
.mast--v3 .nv--now { background: none; }
/* 한글·영문 비율 — 영문을 한 단계 키우고 같은 왼끝 */
.mast--v3 .nv b { font-size: 0.98rem; }
.mast--v3 .nv span { font-size: 0.66rem; letter-spacing: 0.13em; color: rgba(38, 33, 28, 0.48); }
/* 예약만 채운 알약 유지 (유일한 액션 강조) */
.mast--v3 .nv--go {
  background: var(--blue);
  border-radius: 999px;
  padding: 0.42rem 1.05rem;
  align-items: center;
}
.mast--v3 .nv--go::after { content: none; }
.mast--v3 .nv--go:hover { background: #005699; transform: translateY(-2px); }

/* 타입 비율 축소 — "글자들이 많이 큰 것 같아" */
.hero3__head .l b { font-size: clamp(1.9rem, 5.6vw, 3.3rem); }
.hero3__sub { font-size: clamp(0.95rem, 2.3vw, 1.08rem); }
.answer__what { font-size: clamp(1.3rem, 3.7vw, 2rem); }
.beat h2.serif, .sec--letters h2.serif, .maker h2.serif { font-size: clamp(1.4rem, 3.4vw, 2rem); }
.phead h1 { font-size: clamp(1.8rem, 4.6vw, 2.6rem); }
.wv__num { font-size: clamp(2.2rem, 5.6vw, 3rem); }
.tez__card b { font-size: 1.22rem; }

/* 어바웃 사진 — 얼굴 없는 컷 2장 스택 (2026-08-08: 아이 얼굴 원칙 준수) */
.sec--why .why { grid-auto-rows: 1fr; }
.why__photo--duo { gap: 0.8rem; height: 100%; min-height: 0; }
.sec--why .why__photo--duo img {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}
@media (min-width: 900px) {
  .sec--why .why__photo--duo { max-height: calc(100% - 0px); overflow: hidden; }
}

/* 쪼이 서명 + 맛 팔레트 (2026-08-08, 블로그 '몰입의 맛 ①' 반영) */
.ticker__by { margin: 0.7rem 0 0; font-size: 0.78rem; font-weight: 700; color: rgba(38, 33, 28, 0.55); }
.ticker__by span { font-weight: 400; color: rgba(38, 33, 28, 0.42); }
.colophon__line em { font-style: italic; font-family: "Cormorant Garamond", var(--serif); font-size: 1.1em; }
.taste { font-weight: 700; padding-bottom: 0.1em; }
.taste--y { background: linear-gradient(transparent 68%, rgba(255, 217, 113, 0.85) 68%); }
.taste--g { background: linear-gradient(transparent 68%, rgba(140, 154, 78, 0.45) 68%); }
.taste--b { background: linear-gradient(transparent 68%, rgba(0, 102, 179, 0.3) 68%); }

/* 설문 출처 각주 (2026-08-08) */
.wv__src { margin: -0.9rem 0 1.4rem; font-size: 0.72rem; letter-spacing: 0.06em; color: rgba(38, 33, 28, 0.38); }
@media (min-width: 900px) { .wv__src { margin-top: 0.2rem; } }

/* 월드비전식 캐러셀 컨트롤 — 카운터 · 진행바 · 화살표 (2026-08-08) */
.cnav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.2rem 0 1.6rem;
}
.cnav__count { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 3.2em; }
.cnav__bar {
  flex: 1;
  height: 3px;
  background: rgba(38, 33, 28, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.cnav__bar b { display: block; height: 100%; width: 33%; background: var(--blue); border-radius: 999px; transition: width 0.25s ease; }
.cnav__btn {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 102, 179, 0.35);
  background: #FFFFFF;
  color: var(--blue);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.cnav__btn:hover { background: #FFD971; border-color: #FFD971; color: var(--ink); transform: translateY(-2px); }

/* ============================================================
   만나요 — 사이트의 단일 행동 (2026-08-08)
   월드비전의 '후원하기'처럼, 모든 길이 여기로 모인다
   ============================================================ */
.meet {
  background: var(--blue);
  padding: clamp(3rem, 8vh, 5rem) var(--gutter);
}
.meet__in { max-width: calc(72rem - 2 * var(--gutter)); margin: 0 auto; }
.meet h2 {
  margin: 0 0 0.7rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.meet__sub { margin: 0 0 2rem; font-size: clamp(0.98rem, 2.4vw, 1.1rem); color: rgba(255, 255, 255, 0.85); }
.meet__doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
@media (max-width: 799px) { .meet__doors { grid-template-columns: 1fr; } }
.meet__door {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.3rem 1.4rem;
  background: #FFFFFF;
  border-radius: 1.1rem;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.meet__door i { font-style: normal; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--blue); }
.meet__door b { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.meet__door span { font-size: 0.85rem; color: var(--ink-soft); }
.meet__door:hover, .meet__door:focus-visible {
  transform: translateY(-4px);
  background: #FFD971;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
.meet__door:hover i { color: #141414; }
/* 푸터 주소 (2026-08-08) */
.colophon__addr { font-style: normal; margin-top: 0.6rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   플로팅 독 — 맨위로 + 만나요 (2026-08-08, 월드비전 2단 구조)
   ============================================================ */
.dock {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}
.dock__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
/* 맨 위로 — 작은 흰 원 */
.dock__btn--top {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid rgba(0, 102, 179, 0.25);
  color: var(--blue);
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(38, 33, 28, 0.14);
}
.dock__btn--top:hover { background: #FFD971; border-color: #FFD971; color: var(--ink); transform: translateY(-2px); }
/* 만나요 — 스마일 알약 */
.dock__btn--meet {
  gap: 0.5rem;
  padding: 0.6rem 1rem 0.6rem 0.65rem;
  border-radius: 999px;
  background: var(--blue);
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 46, 81, 0.3);
}
.dock__btn--meet::before {
  content: "";
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  background: url("smile.png") center / contain no-repeat;
}
.dock__btn--meet span { font-size: 0.76rem; font-weight: 700; line-height: 1.25; }
.dock__btn--meet:hover { transform: translateY(-2px); background: #005699; color: #FFFFFF; }
@media (max-width: 699px) {
  .dock__btn--meet { padding: 0.5rem; gap: 0; }
  .dock__btn--meet span { display: none; }
  .dock__btn--meet::before { width: 2rem; height: 2rem; }
  .dock__btn--top { width: 2.2rem; height: 2.2rem; }
}
/* 하위 페이지 제목 옆 마크 */
.phead__mark { display: block; width: 3rem; height: 3rem; margin-bottom: 0.6rem; }
/* 만나요 문 — 행동 안내 줄 */
.meet__door u { text-decoration: none; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700; color: var(--blue); }
.meet__door:hover u { color: #141414; }
.meet__note { margin: 1.4rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); }
.meet__note a { color: #FFD971; font-weight: 700; }
.meet__mark { display: block; width: 3.2rem; height: 3.2rem; margin-bottom: 0.9rem; }