/* layout.css — 6개 시안이 함께 쓰는 뼈대 */

/* ── 컨테이너 ─────────────────────────────────────
   내용 폭이 var(--container)가 되도록 좌우 패딩을 바깥에 더합니다.
   1320 = 648*2+24 = 424*3+24*2 = 315*4+20*3 */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--sp-side) * 2);
  margin-inline: auto;
  padding-inline: var(--sp-side);
}

/* ── 그리드 ───────────────────────────────────── */
.grid-2,
.grid-3,
.grid-4 { display: grid; }

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-2); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-3); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-4); }

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 섹션 ─────────────────────────────────────── */
.section {
  padding-block: var(--sp-section);
}

.section--alt { background: var(--paper); }

.section--dark {
  background: var(--heading);
  color: #FFFFFF;
}

.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #FFFFFF; }

.section--dark .muted { color: rgba(255, 255, 255, 0.72); }

/* ── 글자 도우미 ──────────────────────────────── */
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.muted { color: var(--muted); }

/* ── 사진 자리 ────────────────────────────────
   실제 사진은 넣지 않습니다. 자리만 표시합니다. */
.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--line);
  color: var(--muted);
  font-size: 14px;
  border-radius: var(--radius-img);
  width: 100%;
}

.photo-slot[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.photo-slot[data-ratio="4:3"]  { aspect-ratio: 4 / 3; }
.photo-slot[data-ratio="3:2"]  { aspect-ratio: 3 / 2; }
.photo-slot[data-ratio="1:1"]  { aspect-ratio: 1 / 1; }

.photo-slot--round { border-radius: 50%; }

/* ── 표 ───────────────────────────────────────
   세로 괘선 없음. 가로선만. */
.table-wrap { width: 100%; }

.table {
  width: 100%;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.table th,
.table td {
  padding: 15px 16px;
  /* 칸 안 행간은 normal. 1.9를 흘리면 행마다 10px씩 부풉니다. */
  line-height: normal;
  border-bottom: 1px solid var(--line);
  border-left: 0;
  border-right: 0;
}

.table thead th {
  background: var(--table-head);
  color: var(--heading);
  font-weight: 700;
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 라벨 열 고정 폭 (시설 정보 표) */
.table--label th[scope="row"] {
  width: 160px;
  background: var(--table-head);
  color: var(--heading);
  font-weight: 700;
}

@media (max-width: 768px) {
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table { min-width: 560px; }
  .table--label th[scope="row"] { width: 120px; }
}

/* ── 버튼 ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
}

.btn--primary { background: var(--primary); color: #FFFFFF; }
.btn--accent  { background: var(--accent); color: #FFFFFF; }
.btn--line    { background: var(--surface); color: var(--heading); border: 1px solid var(--line); }

/* ── 카드 ─────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--sp-card);
}

/* 카드 안쪽 행간은 normal로 두어 줄 간격이 벌어지지 않게 합니다. */
.card__title {
  font-size: var(--fs-h3);
  line-height: normal;
  color: var(--heading);
}

/* ── 타임라인 (하루 일과) ─────────────────────── */
.timeline { width: 100%; }

.timeline__row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 20px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}

.timeline__time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--primary);
  line-height: normal;
  padding-top: 2px;
}

.timeline__body { line-height: normal; }
.timeline__name { font-weight: 700; color: var(--heading); }

@media (max-width: 768px) {
  .timeline__row { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
}

/* ── 잡동사니 ─────────────────────────────────── */
.stack > * + * { margin-top: 12px; }
.center { text-align: center; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 자주 묻는 걱정 ──────────────────────────────
   다섯 항목이 저마다 다른 모양을 하도록 짰습니다. 좌우 반전만
   되풀이하면 다섯 개가 한 덩어리로 보여 눈이 미끄러집니다.
   그림자는 쓰지 않습니다 — 흰 면과 종이색, 1px 선으로만 나눕니다. */
.worry__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 28px;
}

.worry__item + .worry__item { margin-top: 14px; }

/* 흰색과 종이색을 번갈아 깝니다. */
.worry__item--paper { background: var(--paper); }

/* 좌우 2단 — 왼쪽 걱정, 오른쪽 답변 */
.worry__item--split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px;
  align-items: center;
}

/* 3번은 1번과 반대 방향으로 세웁니다. */
.worry__item--rev .worry__ask { order: 2; }

.worry__q {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--heading);
}

.worry__q--wide { max-width: none; }

.worry__sub { margin-top: 8px; color: var(--muted); line-height: 1.6; }

/* 1번 — 1주차 → 2주차 → 그 이후 */
.worry__steps {
  display: grid;
  gap: 10px;
}

.worry__steps li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.worry__steps li:last-child { border-bottom: 0; padding-bottom: 0; }

.worry__step-k {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: normal;
  color: var(--primary-dk);
}

.worry__step-v { font-size: var(--fs-sm); line-height: 1.6; }

/* 2번 — 법정 기준과 우리 센터를 나란히 */
.worry__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.worry__cell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-img);
  padding: 18px 20px;
}

.worry__cell--ours { border-color: var(--primary); }

.worry__cell-k { line-height: normal; color: var(--muted); }

.worry__cell-v {
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 700;
  line-height: normal;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin-top: 2px;
}

.worry__cell--ours .worry__cell-v { color: var(--primary-dk); }

.worry__cell-n { line-height: 1.6; margin-top: 6px; color: var(--muted); }

/* 3번 — 번호 매긴 목록 */
.worry__ol { counter-reset: worry; }

.worry__ol li {
  counter-increment: worry;
  position: relative;
  padding-inline-start: 34px;
  padding-block: 7px;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.worry__ol li::before {
  content: counter(worry);
  position: absolute;
  left: 0;
  top: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-dk);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

/* 4·5번 — 숫자 하나를 크게 */
.worry__big {
  font-family: var(--font-body);
  font-size: 46px;
  font-weight: 700;
  line-height: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--primary-dk);
  margin-top: 14px;
}

.worry__big-u {
  font-size: 20px;
  font-weight: 700;
  margin-inline-start: 3px;
}

.worry__big-k {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
}

.worry__note {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text);
  font-weight: 700;
  margin-top: 10px;
}

.worry__btn { margin-top: 14px; }

.worry__open .worry__big { margin-top: 0; }
.worry__open .worry__note { font-weight: 400; color: var(--muted); }

@media (max-width: 768px) {
  .worry__item { padding: 20px; }
  .worry__item--split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .worry__item--rev .worry__ask { order: 0; }
  .worry__compare { grid-template-columns: minmax(0, 1fr); }
  .worry__q { font-size: 19px; }
  .worry__big { font-size: 38px; }
}

/* 섹션 머리 기본값 — 시안이 따로 정하지 않았을 때를 위한 값입니다. */
.sec__head { margin-bottom: 18px; }

/* ── 센터 소식 ───────────────────────────────────
   운영 중에 글과 사진이 쌓이는 자리입니다. 태그 폭을 고정해
   제목 시작점이 카드마다 어긋나지 않게 합니다. */
.news__list { align-items: stretch; }

.news__item { display: flex; }

.news__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.news__link:hover { border-color: var(--primary); }

.news__photo {
  border-radius: 0;
  font-size: var(--fs-sm);
}

.news__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 0;
}

/* 폭 고정 — 글자 수가 달라도 제목이 같은 자리에서 시작합니다. */
.news__tag {
  flex: 0 0 auto;
  width: 66px;
  text-align: center;
  padding: 4px 0;
  border-radius: var(--radius-btn);
  background: var(--primary-lt);
  color: var(--primary-dk);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: normal;
}

.news__tag--2 { background: var(--accent-lt); color: var(--accent-dk); }
.news__tag--3 { background: var(--paper); color: var(--heading); }

.news__date {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  line-height: normal;
}

.news__title {
  padding: 8px 18px 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.45;
  color: var(--heading);
}

.news__excerpt {
  padding: 6px 18px 18px;
  line-height: 1.6;
  color: var(--muted);
  /* 발췌는 두 줄까지만 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news__more { margin-top: 22px; }

/* 압축 판(시안 6) — 카드 대신 세 줄 */
.news__rows { border-top: 1px solid var(--line); }

.news__row { border-bottom: 1px solid var(--line); }

.news__row .news__link {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0;
  padding-block: 12px;
}

.news__row .news__title {
  padding: 0;
  font-size: var(--fs-body);
  line-height: normal;
}

.news__row:hover .news__title { color: var(--primary-dk); }

@media (max-width: 768px) {
  .news__row .news__link { grid-template-columns: 66px minmax(0, 1fr); }
  .news__row .news__date { grid-column: 2; }
}

/* ── 헤더 메뉴 — 홈 안쪽 자리와 따로 있는 쪽 ─────────
   앞의 여섯은 홈 안에서 움직이는 자리이고, 뒤의 셋은 별도 쪽입니다.
   성격이 다르므로 사이에 얇은 선을 두어 눈으로 갈라 둡니다. */
.hd__nav-page:first-of-type {
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--line);
}

/* 지금 보고 있는 쪽을 메뉴에서 표시합니다. */
.hd__nav > [aria-current="page"] {
  color: var(--primary-dk);
  font-weight: 700;
}

.ft__map [aria-current="page"],
.ft__more [aria-current="page"] {
  color: #FFFFFF;
  font-weight: 700;
}

/* ── 헤더 메뉴 ────────────────────────────────
   데스크톱은 다섯 자리(센터 안내 ▾ / 비용 안내 / 자주 묻는 걱정 /
   센터 소식 ▾ / 버튼)입니다. 비용과 걱정은 보호자가 가장 먼저 찾는
   항목이라 드롭다운에 넣지 않고 한 번에 눌리게 둡니다.
   그림자는 쓰지 않습니다 — 1px 선과 흰 면으로만 나눕니다. */
.hd__nav {
  display: flex;
  align-items: center;
  /* 항목 사이 28, 로고·전화와는 최소 48을 띄웁니다. */
  gap: 28px;
  margin-inline: 48px;
  font-size: var(--fs-sm);
  line-height: normal;
  white-space: nowrap;
}

/* 메뉴가 남는 자리를 다 먹지 않도록 가운데로 밀어 둡니다. */
.hd__nav { margin-inline-start: auto; margin-inline-end: auto; }

.hd__link {
  padding: 8px 4px;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: normal;
  color: var(--text);
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.hd__link:hover { color: var(--primary-dk); }

.hd__drop { position: relative; }

.hd__drop-btn::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline-start: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* 열림 표시는 화살표 회전으로만 합니다 — 글자 색은 그대로 둡니다. */
.hd__drop:hover .hd__drop-btn::after,
.hd__drop:focus-within .hd__drop-btn::after,
.hd__drop.is-open .hd__drop-btn::after {
  transform: translateY(2px) rotate(225deg);
}

.hd__drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 100;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-img);
  padding: 6px 0;
  /* 열리기 전에는 자리만 잡아 두고 감춥니다. */
  visibility: hidden;
  opacity: 0;
}

/* 마우스를 올리거나, 탭으로 안에 들어오거나, 눌렀을 때 열립니다. */
.hd__drop:hover .hd__drop-menu,
.hd__drop:focus-within .hd__drop-menu,
.hd__drop.is-open .hd__drop-menu {
  visibility: visible;
  opacity: 1;
}

/* 버튼과 목록 사이가 떠 있으면 마우스가 지나갈 때 닫힙니다. 그 틈을 메웁니다. */
.hd__drop-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.hd__drop-menu a {
  display: block;
  padding: 12px 18px;
  font-size: var(--fs-sm);
  line-height: normal;
  color: var(--text);
  white-space: nowrap;
}

/* 드롭다운 항목은 전부 같은 모양입니다. 밑줄도 좌측 바도 색 강조도 없이
   배경만 바뀝니다. */
.hd__drop-menu a:hover,
.hd__drop-menu a:focus-visible {
  background: var(--paper);
  color: var(--text);
}

/* 지금 보고 있는 쪽만 글자색으로 표시합니다. 밑줄은 쓰지 않습니다. */
.hd__drop-menu a.is-current {
  color: var(--primary-dk);
  font-weight: 700;
}

/* ── 햄버거와 모바일 목록 ─────────────────────── */
.hd__burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-img);
  background: var(--surface);
  cursor: pointer;
}

.hd__burger span {
  display: block;
  height: 2px;
  background: var(--heading);
  border-radius: 2px;
}

.hd__burger span + span { margin-top: 5px; }
.hd__burger.is-open span:nth-child(2) { opacity: 0; }

.hd__mobile {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 14px 18px;
}

/* 모바일에서는 접지 않고 계단식으로 전부 폅니다. */
.hd__m-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: normal;
  color: var(--heading);
  padding-block: 10px 4px;
}

.hd__m-sub {
  display: block;
  padding: 11px 0 11px 14px;
  border-inline-start: 2px solid var(--line);
  margin-inline-start: 2px;
  font-size: var(--fs-sm);
  line-height: normal;
  color: var(--text);
}

.hd__m-sub:active { color: var(--primary-dk); }

.hd__m-book { display: block; margin-top: 16px; text-align: center; }

@media (max-width: 1024px) {
  /* 로고 · 전화 · 햄버거만 남깁니다. 이 연령대는 폼보다 전화를 씁니다. */
  .hd__nav,
  .hd__call,
  .hd__book { display: none; }

  .hd__burger { display: block; flex: 0 0 auto; }

  .hd__btns {
    width: auto;
    margin-inline-start: auto;
    gap: 8px;
  }

  .hd__btns .btn { flex: 0 0 auto; }
}

@media (min-width: 1025px) {
  .hd__mobile { display: none; }
}

/* 폭이 줄면 간격부터 좁히고, 더 줄면 햄버거로 넘깁니다. */
@media (max-width: 1200px) {
  .hd__nav { gap: 24px; margin-inline: 32px; }
}

/* ── 카드 공통 ────────────────────────────────
   글이 길어져도 카드 밖으로 흘러나오지 않게 잡습니다.
   고정 height 는 쓰지 않습니다 — 내용이 늘면 카드가 늘어야 합니다. */
.card,
.news__link,
.util__item,
.now__item,
.key__item,
.staff__card,
.steps__item,
.include__item,
.worry__item,
.post__nav-link {
  overflow: hidden;
  min-width: 0;
}

/* 카드 안 제목과 발췌는 두 줄에서 자릅니다. */
.card__title,
.news__title,
.news__excerpt,
.util__desc,
.steps__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* 소식 카드는 아래쪽 여백을 넉넉히 둡니다. */
.news__excerpt { padding-bottom: 20px; }

/* 압축 판(시안 6)의 한 줄 목록은 자르지 않습니다. */
.news__row .news__title {
  display: block;
  -webkit-line-clamp: none;
}

/* ── 색 전환기 (시안 전용) ────────────────────────
   좌측 아래에 둡니다. 오른쪽 아래는 실제로 납품되는 "맨 위로" 버튼
   자리라, 서로 다른 모서리에 두어야 위젯을 지워도 자리가 어긋나지
   않습니다. 그림자는 쓰지 않습니다. */
.pal {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 12px 14px;
}

.pal__note {
  font-size: var(--fs-xs);
  line-height: normal;
  color: var(--muted);
  margin-bottom: 8px;
  white-space: nowrap;
}

.pal__row { display: flex; gap: 8px; }

.pal__dot {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--dot);
  cursor: pointer;
}

.pal__dot[aria-pressed="true"] {
  outline: 2px solid var(--heading);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .pal { left: 12px; bottom: 12px; padding: 10px 12px; }
  .pal__dot { width: 24px; height: 24px; }
}

/* ── 맨 위로 가기 ─────────────────────────────────
   우측 아래 고정. 색 전환기는 좌측 아래에 있어 서로 겹치지 않습니다.
   이 버튼은 납품되는 요소라 .draft-only 로 감싸지 않습니다.
   그림자는 쓰지 않습니다. */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 190;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary-dk);
  cursor: pointer;

  /* 보이지 않을 때는 탭 순서에서도 빠집니다. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.to-top.is-on {
  visibility: visible;
  opacity: 1;
}

.to-top:hover { background: var(--paper); }

.to-top svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
  /* 아래쪽에 전화 버튼 같은 고정 요소가 생기면 그 위로 올라오도록
     여백을 변수로 빼 둡니다. */
  .to-top {
    width: 52px;
    height: 52px;
    right: 20px;
    bottom: calc(20px + var(--sticky-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* 시안 표시 배지 — 이 쪽이 예시임을 알리는 자리입니다.
   .draft-only 안에 있어 납품 때 한 줄로 사라집니다. */
/* 배지는 색 전환기 바로 위에 둡니다. 화면 위쪽은 헤더가 붙어 있어 자리가
   없고, 오른쪽 아래는 납품되는 "맨 위로" 버튼 자리입니다. 시안 표시끼리
   한 모서리에 모아 두면 .draft-only 한 줄로 함께 사라집니다. */
.draft-badge {
  position: fixed;
  left: 20px;
  bottom: 108px;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 5px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: normal;
  color: var(--muted);
}

@media (max-width: 768px) {
  .draft-badge { left: 12px; bottom: 96px; }
}

/* ── 시안 안내 띠 ─────────────────────────────────
   시안 하나만 보고 닫지 않도록 푸터 앞에 둡니다. 시안을 보시는 분을 위한
   자리이지 센터 사이트의 일부가 아니지만, .draft-only 로 감싸지 않습니다 —
   납품 때 함께 지우는 것은 색 전환기와 배지뿐입니다. */
.pitch {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-block: 44px;
}

.pitch__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

.pitch__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.45;
  color: var(--heading);
}

.pitch__lead {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--muted);
}

.pitch__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.pitch__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pitch__move {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  overflow: hidden;
}

.pitch__move:hover { border-color: var(--primary-dk); }

.pitch__move--next { text-align: right; }

.pitch__move-k { display: block; line-height: normal; color: var(--muted); }

.pitch__move-t {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--heading);
}

/* 상단 예시 고지 — 눈에 띄지 않게, 그러나 첫 화면에 있습니다. */
.draft-note {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 5px var(--sp-side);
  font-size: var(--fs-xs);
  line-height: normal;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 768px) {
  .pitch__in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pitch__nav { grid-template-columns: minmax(0, 1fr); }
  .pitch__move--next { text-align: left; }
}

/* 배지 옆 뒤로가기 — 시안 목록(/portfolio/)으로 돌아갑니다.
   배지와 함께 .draft-only 안에 있어 납품 때 같이 사라집니다. */
.draft-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
}

.draft-badge__back {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--heading);
  font-size: 14px;
  line-height: 1;
}

.draft-badge__back:hover { background: var(--primary-lt); color: var(--primary-dk); }

.draft-badge__no { font-weight: 700; }

/* ── 전화 버튼 안내 (시안 전용) ───────────────────
   지어낸 번호로 실제 전화가 걸리지 않게 막고, 무슨 일이 일어나는지
   알려 줍니다. 브라우저 기본 대화상자를 쓰지 않는 것은 그것이 이 사이트의
   글씨와 색을 하나도 따르지 않기 때문입니다. 그림자는 쓰지 않습니다. */
.telnote {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
}

.telnote__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.telnote__panel {
  position: relative;
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 28px;
  text-align: center;
}

.telnote__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.45;
  color: var(--heading);
}

.telnote__body {
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--muted);
}

.telnote__num {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 700;
  line-height: normal;
  font-variant-numeric: tabular-nums;
  color: var(--primary-dk);
}

.telnote__btns { margin-top: 18px; }
.telnote__btns .btn { width: 100%; }