/* ==========================================================================
   골만사 재설계 v2 — 스코어카드 괘선 (2026-08-14)

   핵심 장치: 골프 스코어카드의 조판 문법을 사이트 전체 뼈대로 쓴다.
     ① 괘선 격자  ② 라벨이 값 위  ③ 섹션마다 홀 번호  ④ 자릿수 정렬
   고른 이유 — 골프 고유라 어디와도 겹치지 않고, 대충 만든 스코어카드는
   존재하지 않아 정교함이 즉시 전달되며, 사진 없이도 성립한다.

   tokens.css → site.css → 이 파일 순서로 로드한다. 앞의 규칙을 덮어쓴다.
   구 규칙은 site.css에 그대로 남아 있으니 되돌릴 땐 이 파일만 걷어내면 된다.
   ========================================================================== */

/* ── 표제 세리프 + 브론즈 ──────────────────────────────────────────
   명문 클럽 사이트 조사에서 3/3 이 세리프 표제를 쓰고 있었다.
   단일 산세리프 + 굵기만으로 만든 위계가 "조잡하다"의 가장 큰 단일 원인이었다.

   웹폰트를 새로 받지 않고 시스템 명조 스택을 쓴다 —
   외부 요청 0, 로딩 지연 0. 표제(h1·h2·히어로)에만 적용하고
   본문 18px 이하는 산세리프를 유지해 가독성을 지킨다. */
:root {
  --font-serif: 'Noto Serif KR', 'Nanum Myeongjo', AppleMyungjo,
                'Apple SD Gothic Neo', Batang, 바탕, serif;
  /* 흰 바탕용 액센트. 라임(#C8D63C)은 흰 위 1.60:1 이라 글자로 못 쓴다.
     조사한 클럽들이 쓰던 금속성 브론즈 계열 — 흰 위 5.94:1 */
  --bronze-700: #8A5A22;
  --bronze-50:  #F6EFE4;
}

.hero__title,
.pagehead h1,
.sec-head h2,
.trophy h2,
.doc h1,
.places__head h3,
.manner__title { font-family: var(--font-serif); letter-spacing: -0.005em; }

/* 세리프는 같은 크기에서 산세리프보다 작아 보인다 */
.hero__title { font-size: clamp(2.25rem, 7vw, 3.125rem); }
.sec-head h2 { font-size: clamp(1.75rem, 4.6vw, 2.25rem); }

/* 흰 바탕에서 쓰이던 라임 → 브론즈 */
.sec-head__no { color: var(--bronze-700); }
.quotebox::before { color: var(--bronze-700); }
.sec-head::after { background: var(--rule); }

/* ── 지면 반전 ────────────────────────────────────────────────────
   데스크톱에서 화면의 48.6%가 순백이었다(본문 폭 576px vs 컨테이너 1120px).
   질감을 깔아도 그 자리는 여전히 "글이 안 온 자리"다.
   기본 지면을 크림으로 두고 카드·표·달력만 순백으로 올리면,
   순백이 "올라온 면"이라는 직무를 얻는다. */
body { background: var(--cream-50); }
.section { background: transparent; }
.section--alt { background: var(--white); }
.card, .staff, .news-list, .glossary, .fortune__grid, .cal__grid, .term, .zodiac {
  background: var(--white);
}
.manner__item, .fortune__panel { background: var(--white); }

/* 크림 위 보조 텍스트 — gray-700 은 크림 위 6.89:1 로 AAA 7:1 에 0.11 미달 */
.section__lead, .routine__note, .doc__updated, .giving__detail { color: #454C59; }

/* ── 헤더 ──────────────────────────────────────────────────────────
   흰 띠 64px 이 sticky 로 화면에 100% 상주하는데, 768px 미만에서는 .nav 가
   숨겨져 오른쪽 250px 가 통째로 비어 있었다. 사이트에서 가장 오래 보이는 요소가
   가장 비어 있던 셈이다.
   짙은 면으로 바꾸면 여백이 "여유"로 읽히고, 히어로와 같은 색이라
   최상단에서는 경계가 사라졌다가 본문에 들어서면 라임 괘선으로 분리된다. */
.header {
  background: var(--navy-975);
  border-bottom: 3px solid var(--lime-400);
  min-height: 64px;
}
@media (min-width: 768px) { .header__inner { min-height: 72px; } }
/* 링크 자체 색도 바꿔야 한다. 자식만 흰색으로 두면 a 요소가 네이비 위 네이비가 된다 */
.brand { color: var(--white); }
.brand__name { color: var(--white); }
.brand__sub { color: var(--navy-200); }        /* 9.69:1 */
.brand__mark {
  border-radius: 50%;
  /* 딥그린 로고가 네이비 위에서 묻히지 않게 라임 링. 이미지 추가 없이 CSS로 */
  box-shadow: 0 0 0 2px var(--navy-975), 0 0 0 4px var(--lime-400);
}
.nav a { color: var(--navy-200); border-bottom: 0; border-top: 3px solid transparent; }
.nav a:hover { color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); border-top-color: var(--lime-400); }

/* 오른쪽 빈 칸에 신원을 적는다. 헤더의 일은 이동이 아니라 신원 제시다. */
.header__meta {
  display: none; flex: none;
  padding-left: var(--space-4);
  border-left: 1px solid var(--rule-lime);
  font-size: 0.9375rem; letter-spacing: .06em;   /* 15px 하한 */
  color: var(--navy-200); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 380px 부터 켰더니 390·412·430px(요즘 폰 대부분)에서 헤더가 69px 넘쳐
   전 페이지에 가로 스크롤이 생겼다. 실측한 최소 필요 폭이 459px 이므로 480px 부터 켠다.
   그보다 좁은 화면에서는 브랜드 밑줄("골프로 만난 사람들 · SINCE 2013")이 같은 일을 한다. */
@media (min-width: 480px) { .header__meta { display: block; } }
@media (min-width: 768px) { .nav ~ .header__meta { display: block; } }

/* 하단 탭바도 같은 면으로 묶는다 */
.tabbar {
  background: var(--navy-975);
  border-top: 3px solid var(--lime-400);
  box-shadow: none;
}
.tabbar a { color: var(--navy-200); }
.tabbar a[aria-current="page"] { color: var(--lime-400); }

/* ── 라임 회수 ────────────────────────────────────────────────────
   라임이 15곳에서 겸직하고 있었다. 전부를 강조하면 아무것도 강조하지 못한다.
   직무를 3개로 제한한다: 헤더 괘선 / 숫자 단위 / 짙은 면 위 현재위치. */
.sec-head__no { color: var(--navy-600); }      /* 라임 계열 #5F6A0F 는 브랜드 6번째 색이었다 */
.quotebox::before { color: var(--navy-300); }
.tl__item--major::before { background: var(--navy-600); }
.pill { background: var(--navy-50); color: var(--color-primary); }
.manner__cat { background: var(--navy-50); }
.fortune__kw { background: var(--navy-700); color: var(--white); }
.giving__amount { background: var(--navy-700); color: var(--white); }
.slogan { border-left-color: var(--navy-600); }
.slogan-band { border-block-color: var(--rule-strong); }

/* ── 손그림 물결 삭제 ──────────────────────────────────────────────
   index 2곳에만 있었고 스코어카드 문법과 무관하다.
   "가볍고 캐주얼" 신호는 12년 조직과 반대다. */
.wave { display: none; }

/* ── 모서리 반경 정리 — 5종 + 비대칭 2종 → 3종 ────────────────────
   스코어카드에 라운드는 없다. 면·카드·표는 각지게. */
.card, .stats, .today, .staff, .news-list, .glossary, .fortune__grid,
.cal__grid, .manner__item, .fortune__panel, .rules__section, .term, .zodiac {
  border-radius: 0;
}
.photo, .gallery, .gallery a, .btn, .trophy__img { border-radius: 6px; }

/* ── 섹션 헤딩 — 32×3px 라임 밑줄 대신 홀 번호 + 전폭 괘선 ─────────── */
.sec-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-4);
  margin: 0 0 var(--stack);
}
.sec-head__no {
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: .14em;
  color: var(--lime-700);      /* 5.91:1 — 라임 원색은 흰 바탕 1.60:1이라 글자로 못 쓴다 */
  font-variant-numeric: tabular-nums;
}
.sec-head h2 { margin: 0; }
.sec-head::after {
  content: ""; grid-column: 1 / -1; height: 1px;
  background: var(--rule); margin-top: var(--space-4);
}
.section__lead { margin: var(--space-5) 0 var(--stack-loose); }

/* ── 히어로 — AI 풍경 전면 노출을 그만두고 색면 + 질감으로 ─────────── */
.hero {
  min-height: min(78vh, 620px);
  background: var(--navy-975);
  clip-path: none;             /* 사선 폐기 — 얻는 것 없이 제약만 만든다 */
  padding-bottom: 96px;        /* 숫자 밴드가 겹칠 자리 */
}
@media (min-width: 768px) { .hero { min-height: min(62vh, 560px); } }
/* 사진을 죽이면 그냥 어두운 색면 덩어리가 된다.
   사진은 보이되 글자가 읽혀야 하므로, 밝기는 살리고 스크림을 아래쪽에만 깐다. */
.hero__bg {
  opacity: 1;
  mix-blend-mode: normal;
  filter: saturate(.92) contrast(1.06) brightness(.92);
}
.hero::after {
  background:
    linear-gradient(180deg,
      rgba(10,18,36,.55) 0%,
      rgba(10,18,36,.30) 34%,
      rgba(10,18,36,.72) 78%,
      rgba(10,18,36,.92) 100%);
}
.hero__eyebrow { position: relative; padding-top: var(--space-5); }
.hero__eyebrow::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; background: var(--lime-400);
}
.hero__title { font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.hero__lead { color: var(--navy-200); }

/* 하위 페이지 배너도 같은 문법으로 */
.pagehead {
  background: var(--navy-975);
  clip-path: none; padding-bottom: 0;
}
.pagehead__bg {
  opacity: 1; mix-blend-mode: normal;
  filter: saturate(.92) contrast(1.06) brightness(.90);
}
.pagehead::after {
  background: linear-gradient(180deg,
    rgba(10,18,36,.45) 0%, rgba(10,18,36,.28) 38%, rgba(10,18,36,.86) 100%);
}
.pagehead__eyebrow { position: relative; padding-top: var(--space-5); }
.pagehead__eyebrow::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; background: var(--lime-400);
}
.pagehead h1 { font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.pagehead__lead { color: var(--navy-200); }

/* ── 숫자 밴드 — 이 사이트의 상품은 사진이 아니라 숫자다 ───────────── */
.stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  background: var(--navy-950);
  border: 0; border-radius: 14px;
  overflow: hidden; position: relative;
  margin-top: -56px;           /* 히어로 위로 겹침 */
  z-index: 2;
}
/* 4칸 한 줄은 1100px 부터 (외부 점검 2026-08-20, 🔴2).
   이전: @media (min-width: 768px) { .stats { grid-template-columns: 1.35fr 1fr 1fr 1fr; } }
   문제 두 가지가 겹쳐 있었다.
     ① 맨 1fr — 칸의 최소 폭이 '내용 크기'가 되어 큰 숫자가 그리드를 밀어낸다.
        tokens.css 375행 주석이 「minmax(0,1fr) 이어야 한다」고 적어 둔 바로 그 함정.
     ② 768px 에 4칸은 애초에 좁다. minmax 만 넣으면 잘림 대신 글자가 칸을 최대 101px 넘어
        옆 괘선을 침범한다(실측).
   실측 잘림: 768px 162px / 900px 127px / 1000px 27px — /activity 「119,127게임」이
   768px 에서 「11」로 잘렸다. 「숫자로 보는 13년」의 가장 큰 숫자가 사라지는 자리다.
   → 768~1099px 는 모바일과 같은 2×2 를 유지한다(잘림 0 · 넘침 0). 아이패드 세로가 이 구간이다. */
@media (min-width: 1100px) {
  /* 첫 칸에 위계를 주되 1.35fr 은 과했다. minmax(0,…) 로 칸을 가둔 순간 나머지 세 칸이
     「119,127게임」을 담지 못해 이번엔 데스크톱에서 51~56px 잘렸다(실측).
     1.15fr 이면 1100~1920px 전 구간 잘림 0. 나머지 두 줄(여백·글자 상한)은 .stat 본 정의
     뒤에 있다 — 미디어쿼리는 명시도를 올려 주지 않아 여기 적으면 뒤 규칙에 그대로 진다. */
  .stats { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)); }
}
.stat {
  display: flex; flex-direction: column;
  background: transparent;
  padding: 28px var(--space-6) 32px;
  text-align: left;
  border-top: 1px solid var(--rule-on-navy);
}
/* 괘선 방향은 그리드 모양을 따라간다. 위 .stats 를 1100px 로 옮겼으므로 여기도 같이 옮긴다 —
   768~1099px 는 2×2 인데 세로 괘선을 그으면 3번째 칸 왼쪽에도 선이 생겨 표가 어긋나 보인다. */
@media (min-width: 1100px) {
  .stat { border-top: 0; border-left: 1px solid var(--rule-lime); }
  .stat:first-child { border-left: 0; }
}
.stat__label {
  order: -1;                   /* 라벨이 값 위 — 스코어카드는 헤더가 위에 온다 */
  margin: 0 0 var(--space-2);
  font-size: 0.9375rem;        /* 15px — 40~60대 캡션 하한. 14px 이하 금지 */
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  color: var(--navy-200);      /* 9.69:1 */
}
.stat__value {
  /* 상한 68px 이면 「2,690회」가 칸(209px)을 넘어 단위가 줄바꿈된다.
     4자리 숫자 + 단위가 한 줄에 들어가는 크기가 상한이다. */
  font-size: clamp(2.5rem, 6.4vw, 3.5rem);
  font-weight: var(--fw-heavy);
  line-height: 1.02; letter-spacing: -0.025em;
  color: var(--white);         /* 17.74:1 */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat__unit {
  font-size: .40em; font-weight: var(--fw-bold);
  color: var(--lime-400);      /* 11.10:1 */
  margin-left: .14em;
}
/* 4칸 한 줄 구간의 마무리 (외부 점검 2026-08-20, 🔴2).
   .stat / .stat__value 본 정의보다 뒤에 있어야 실제로 먹는다.
   실측(1100·1200·1280·1440·1920): 이 조합에서만 전 구간 잘림 0 이고 숫자가 48px 로 남는다.
   상한을 3.5rem 으로 되돌리면 1440px 에서 다시 14px 잘린다. */
@media (min-width: 1100px) {
  .stat { padding-inline: var(--space-5); }
  .stat__value { font-size: clamp(2.25rem, 3.3vw, 3rem); }
}
.stat__asof {
  grid-column: 1 / -1;
  padding: 0 var(--space-6) var(--space-5);
  margin-top: 0;
  text-align: right; font-size: 0.9375rem;   /* 15px 하한 */
  color: var(--navy-200); background: var(--navy-950);
}

/* ── 슬로건 — 중앙정렬 폐기 ─────────────────────────────────────────── */
.slogan-band {
  background: var(--white);
  border-block: 2px solid var(--lime-400);
  padding-block: var(--space-10);
}
.slogan {
  text-align: left;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  max-width: 22ch;
  padding-left: var(--space-5);
  border-left: 4px solid var(--lime-400);
}

/* ── 카드 — 테두리 대신 상단 캡 ───────────────────────────────────────
   지면이 크림이므로 카드는 순백이어야 "올라온 면"으로 읽힌다.
   크림 위 크림이면 카드가 사라진다. */
.card {
  background: var(--white);
  border: 0; border-top: 3px solid var(--navy-700);
  border-radius: 0;
  padding: 28px var(--space-6) 32px;
}
/* 흰 배경 섹션(.section--alt) 안에서는 반대로 크림 카드가 떠 보인다 */
.section--alt .card,
.section--alt .manner__item,
.section--alt .rounds__sum,
.section--alt .round,
.section--alt .term { background: var(--cream-50); }
.grid { gap: var(--gap-card); }

/* ── 갤러리 — 괘선으로 나뉜 하나의 판 ──────────────────────────────── */
.gallery {
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.gallery a { border-radius: 0; }
.gallery img {
  aspect-ratio: 1;             /* 3:2 → 정방형 */
  filter: saturate(.88) contrast(1.04);   /* 색온도를 하나로 묶는 용도 */
}

/* ── 인용 ──────────────────────────────────────────────────────────── */
.quotebox { border-left: 0; padding-left: 0; }
.quotebox::before {
  content: "\201C"; display: block;
  font-size: 72px; line-height: .8;
  color: var(--lime-400); margin-bottom: var(--space-2);
}
.quotebox p { font-size: 1.5rem; max-width: 24ch; }
.quotebox cite {
  display: block; margin-top: var(--space-5);
  padding-top: var(--space-4); border-top: 1px solid var(--rule);
}

/* ── 오늘의 명언 — 이미지 칸 자체를 없앤다 ────────────────────────────
   1fr 1fr 로 반을 나누는 순간 이미지가 "채울 구멍"이 되는 것이 근본 원인이었다.
   HTML의 <img class="today__img"> 는 그대로 두고 CSS로만 끈다.
   실제 모임 사진이 생기면 아래 display:none 한 줄만 지우면 된다. */
.today {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--navy-950); border-radius: 14px;
}
@media (min-width: 640px) {
  .today { grid-template-columns: 120px minmax(0, 1fr); }
}
/* 이미지 칸을 되살린다. 다만 "반반으로 나눠 한쪽을 채우는" 방식이 아니라
   날짜 컬럼 옆 좁은 띠로 두어, 비어 보이지 않으면서 명언이 주인공이 되게 한다. */
@media (min-width: 900px) {
  /* 날짜 칸이 200px 이었는데 들어가는 것은 "8.14"와 요일뿐이라 오른쪽 절반이 빈 채로 남았다.
     가장 긴 날짜(12.31)에 좌우 여백을 더해도 120px 이면 충분하다.
     640~899px 구간의 날짜 칸도 120px 이라 폭이 일정해진다. */
  .today { grid-template-columns: 150px 120px minmax(0, 1fr); }
  .today__img { display: block; width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 899px) { .today__img { display: none; } }
.today__date {
  padding: var(--space-8) var(--space-5);
  border-bottom: 1px solid var(--rule-lime);
  font-variant-numeric: tabular-nums;
  color: var(--white); font-weight: var(--fw-bold);
}
@media (min-width: 640px) {
  .today__date { border-bottom: 0; border-right: 1px solid var(--rule-lime); }
}
.today__date small { display: block; color: var(--lime-400); font-size: 0.8125rem; }
.today__body { padding: var(--space-10) var(--space-8); position: relative; z-index: 1; }
.today__quote {
  font-size: clamp(1.5rem, 4.2vw, 2.125rem);
  font-weight: var(--fw-heavy); max-width: 26ch;
}
.today::before {                /* 사진 대신 타이포 장식 */
  content: "\201C"; position: absolute; top: -.28em; right: .04em;
  font-size: 240px; line-height: 1;
  color: var(--lime-400); opacity: .10;
  pointer-events: none; z-index: 0;
}

/* ── 달력 — 괘선 격자 ──────────────────────────────────────────────── */
.cal { max-width: 560px; }
.cal__grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;                      /* 2px 갭 폐기 → 괘선으로 나눈다 */
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cal__dow, .cal__cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cal__dow { background: var(--navy-50); padding: 10px 0; }
.cal__cell {
  aspect-ratio: auto;
  min-height: 56px; padding: 8px 0 6px;
  justify-content: flex-start; gap: 4px;
}

/* ── 트로피 섹션 — 이 사이트의 「한 방」 ────────────────────────────
   AI 결함은 장면에서 나오고 사물에서는 나오지 않는다.
   트로피는 딥네이비 벨벳 스튜디오 컷 + 우리 로고 각인이라 결함이 나올 구조가 없고,
   스튜디오 제품컷은 원래 렌더처럼 보이는 게 정상이라 "AI 티"라는 개념이 성립하지 않는다. */
.trophy {
  background: var(--navy-975);
  padding-block: var(--space-16);
  overflow: hidden;
}
.trophy__inner {
  display: grid; gap: var(--space-8);
  align-items: center;
}
@media (min-width: 768px) {
  .trophy__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--space-16); }
}
.trophy__img {
  display: block; width: 100%; max-width: 420px;
  margin-inline: auto; border-radius: var(--radius-md);
}
@media (min-width: 768px) { .trophy__img { max-width: 480px; } }
.trophy__label {
  display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--lime-400); letter-spacing: .06em;
  padding-top: var(--space-4); position: relative; margin-bottom: var(--space-3);
}
.trophy__label::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; background: var(--lime-400);
}
.trophy h2 {
  color: var(--white); font-weight: var(--fw-heavy);
  letter-spacing: -0.02em; margin: 0 0 var(--space-4);
}
.trophy p {
  color: var(--navy-200); max-width: 30ch; margin: 0 0 var(--space-8);
}
.trophy__facts {
  display: flex; gap: var(--space-8); flex-wrap: wrap;
  padding-top: var(--space-5); border-top: 1px solid var(--rule-lime);
}
.trophy__fact { display: flex; flex-direction: column; gap: 2px; }
.trophy__fact b {
  font-size: 1.75rem; font-weight: var(--fw-heavy); color: var(--white);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.trophy__fact span { font-size: var(--fs-caption); color: var(--navy-200); letter-spacing: .04em; }

/* ── 진입 플레이트 하단 숫자 3개 ────────────────────────────────────
   사진은 "골프다"를 3초에 전달하지만 "제대로 굴러간다"는 전달하지 못한다.
   예쁜 코스 사진은 어느 골프 사이트에나 있기 때문이다. 그건 숫자가 한다. */
.plate__facts {
  display: flex; gap: var(--space-6) var(--space-10); flex-wrap: wrap;
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--rule-lime);
}
.plate__fact { display: flex; flex-direction: column; gap: 2px; }
.plate__fact b {
  font-size: 1.375rem; font-weight: var(--fw-heavy); color: var(--white);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
/* ★ 직계 자식만 (2026-08-20). photoband 와 같은 함정 —
   그냥 `span` 이면 <b><span data-years>13</span>년</b> 의 13 까지 잡아
   큰 숫자 자리에 작고 흐린 부제 글씨가 박힌다(/manners 「13년 · 쌓인 습관」에서 실제로 그랬다). */
.plate__fact > span { font-size: 0.9375rem; color: var(--navy-200); letter-spacing: .03em; }

/* ── 띠별 오늘의 운세 — 스코어카드 격자를 그대로 쓴다 ──────────────── */
.fortune__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (min-width: 640px) { .fortune__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.zodiac {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 84px; padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.zodiac:hover { background: var(--navy-50); }
.zodiac[aria-pressed="true"] { background: var(--navy-950); }
.zodiac__hanja {
  font-size: 1.375rem; font-weight: var(--fw-bold);
  color: var(--color-primary); line-height: 1.1;
}
.zodiac__name {
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--color-text);
}
/* .zodiac__years — 카드에서 연도를 뺐다(main.js). 연도는 패널에서 나이와 함께 나온다.
   되살릴 일이 생기면 15px 이상으로. 12px 은 읽히지 않는다.
.zodiac__years {
  font-size: 0.9375rem; color: var(--color-text-caption);
  font-variant-numeric: tabular-nums; line-height: 1.35;
}
*/
.zodiac[aria-pressed="true"] .zodiac__hanja { color: var(--lime-400); }
.zodiac[aria-pressed="true"] .zodiac__name { color: var(--white); }
.zodiac[aria-pressed="true"] .zodiac__years { color: var(--navy-200); }

.fortune__panel {
  margin-top: var(--space-6);
  padding: var(--space-8) var(--space-6);
  background: var(--paper);
  border-top: 3px solid var(--navy-700);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.fortune__panel[hidden] { display: none; }
.fortune__head {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.fortune__zname {
  font-size: var(--fs-lg); font-weight: var(--fw-heavy);
  color: var(--color-primary);
}
.fortune__hanja {
  font-size: var(--fs-lg); color: var(--color-text-caption);
}
.fortune__line {
  font-size: clamp(1.25rem, 3.4vw, 1.625rem);
  font-weight: var(--fw-bold); color: var(--color-text-strong);
  margin: 0 0 var(--space-6); max-width: 30ch; line-height: 1.55;
}
/* 연도마다 올해 나이를 붙인다. 본인 띠를 찾을 때 나이가 가장 확실한 단서다. */
.fortune__years {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius-xs); overflow: hidden;
}
.fortune__year {
  flex: 1 1 auto; min-width: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  font-variant-numeric: tabular-nums;
}
.fortune__year b {
  font-size: 1.125rem; font-weight: var(--fw-bold); color: var(--color-primary);
}
.fortune__year small { font-size: 0.8125rem; color: var(--color-text-caption); }
.fortune__kw {
  background: var(--lime-400); color: var(--navy-900);
  font-weight: var(--fw-bold); font-size: var(--fs-caption);
  padding: 3px 12px; border-radius: var(--radius-pill);
  margin-left: auto;
}
.fortune__hint { font-size: var(--fs-caption); color: var(--color-text-caption); margin-top: var(--space-4); }

/* ── 트로피 크기 ───────────────────────────────────────────────────
   세로 2:3 이미지라 모바일에서 화면을 통째로 먹고, 정작 핵심인
   「골 만 사」 명판이 화면 밖으로 밀려났다. 높이를 묶어 전체가 들어오게 한다. */
.trophy__img {
  /* 원본 1024×1536(2:3). height:auto 가 없으면 비율이 깨진다 */
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 56vh;
  margin-inline: auto;
  aspect-ratio: 1024 / 1536;
  object-fit: contain;
}
@media (min-width: 768px) {
  .trophy__img { max-height: 440px; }
}
.trophy { padding-block: var(--space-12); }
@media (min-width: 768px) { .trophy { padding-block: var(--space-16); } }

/* ── 「한 달」 운영 판 ─────────────────────────────────────────────
   스코어카드 그 자체. 칸 안에 라벨과 값이 정렬돼 있어야 정교해 보인다. */
.rounds__summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-bottom: var(--space-8);
}
@media (min-width: 640px) { .rounds__summary { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rounds__sum {
  background: var(--white); padding: var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.rounds__sum b {
  font-size: 1.75rem; font-weight: var(--fw-heavy); color: var(--color-primary);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.rounds__sum span { font-size: 0.9375rem; color: var(--color-text-muted); }

.rounds__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
@media (min-width: 768px) { .rounds__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.round {
  background: var(--white);
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--space-4) var(--space-4) var(--space-5);
  text-align: left; cursor: pointer; min-height: 108px;
  border-top: 3px solid transparent;
  transition: background-color var(--dur) var(--ease);
}
.round:hover { background: var(--navy-50); }
.round[aria-pressed="true"] {
  background: var(--navy-950);
  border-top-color: var(--lime-400);
  color: var(--white);   /* 버튼 자체 색. 자식만 바꾸면 button 이 네이비 위 짙은 회색이 된다 */
}
.round__kind {
  font-size: 0.8125rem; font-weight: var(--fw-bold);
  color: var(--color-text-muted); letter-spacing: .06em;
}
.round__course {
  font-size: var(--fs-ui); font-weight: var(--fw-bold); color: var(--color-primary);
  line-height: 1.35;
}
.round__when {
  font-size: 0.9375rem; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; margin-top: auto;
}
.round__dday {
  font-size: 0.9375rem; font-weight: var(--fw-bold); color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.round[aria-pressed="true"] .round__kind { color: var(--navy-200); }
.round[aria-pressed="true"] .round__course { color: var(--white); }
.round[aria-pressed="true"] .round__when { color: var(--navy-200); }
.round[aria-pressed="true"] .round__dday { color: var(--lime-400); }

.rounds__panel[hidden] { display: none; }
.round-detail {
  margin-top: var(--space-6);
  background: var(--white);
  border-top: 3px solid var(--navy-700);
  padding: var(--space-6);
}
.round-detail__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-5);
}
.round-detail__head b { font-size: var(--fs-lg); color: var(--color-primary); }
.round-detail__tag {
  background: var(--navy-50); color: var(--color-primary);
  font-size: 0.9375rem; font-weight: var(--fw-bold);
  padding: 2px 10px;
}
.round-detail__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5); margin: 0;
}
@media (min-width: 640px) { .round-detail__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.round-detail__grid dt {
  font-size: 0.9375rem; color: var(--color-text-muted);
  letter-spacing: .04em; margin-bottom: 2px;
}
.round-detail__grid dd {
  margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--color-text-strong); font-variant-numeric: tabular-nums;
}
.round-detail__grid small {
  font-size: 0.9375rem; font-weight: var(--fw-regular); color: var(--color-text-muted);
}
.rounds__rules {
  margin: var(--space-6) 0 0; padding-left: 1.6em;
  color: var(--color-text-muted); font-size: var(--fs-ui);
}
.rounds__rules li { margin-bottom: var(--space-2); }

/* ── 시작은 열여덟 ─────────────────────────────────────────────────
   350보다 시작이 18이었다는 사실이 더 세다. */
.origin { background: var(--navy-975); padding-block: var(--space-16); overflow: hidden; }
.origin__inner { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 860px) {
  .origin__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
}
.origin__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1536 / 1024; object-fit: cover;
  border-radius: 6px;
}
.origin__label {
  display: inline-block; position: relative; padding-top: var(--space-4);
  font-size: 0.9375rem; font-weight: var(--fw-bold);
  color: var(--lime-400); letter-spacing: .06em; margin-bottom: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.origin__label::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; background: var(--lime-400);
}
.origin__line {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin: 0 0 var(--space-5); max-width: none;
}
.origin__line b {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 12vw, 5.5rem); font-weight: var(--fw-heavy);
  color: var(--white); line-height: 1; letter-spacing: -0.03em;
}
.origin__line span { font-size: var(--fs-lg); color: var(--navy-200); }
.origin__text { color: var(--navy-200); max-width: 34ch; margin-bottom: var(--space-8); }
.origin__text b { color: var(--white); }
.origin__steps {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  padding-top: var(--space-5); border-top: 1px solid var(--rule-lime);
}
.origin__steps span {
  flex: 1 1 auto; min-width: 62px;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-2) var(--space-3);
  font-variant-numeric: tabular-nums;
}
.origin__steps b { font-size: 1.375rem; font-weight: var(--fw-bold); color: var(--navy-200); }
.origin__steps small { font-size: 0.9375rem; color: var(--navy-300); }
.origin__now b { color: var(--lime-400); }
.origin__now small { color: var(--navy-200); }

/* ── 다녀온 곳 ────────────────────────────────────────────────────── */
.places { display: grid; gap: var(--space-10); }
.places__group { border-top: 2px solid var(--navy-700); padding-top: var(--space-5); }
.places__group--hi { border-top-color: var(--lime-400); }
.places__head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.places__head h3 {
  margin: 0; font-size: var(--fs-lg); color: var(--color-primary);
  font-weight: var(--fw-heavy);
}
.places__n {
  font-size: 0.9375rem; font-weight: var(--fw-bold);
  color: var(--color-text-caption); font-variant-numeric: tabular-nums;
}
.places__lead { color: var(--color-text-muted); margin: 0 0 var(--space-5); max-width: 46ch; }
.places__chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.place {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 8px var(--space-4);
  font-size: var(--fs-ui);
}
.place b { color: var(--color-text-strong); font-weight: var(--fw-bold); }
.place span {
  font-size: 0.9375rem; color: var(--color-text-caption);
  font-variant-numeric: tabular-nums;
}
.places__group--hi .place {
  background: var(--navy-950); border-color: var(--navy-950);
}
.places__group--hi .place b { color: var(--white); }

/* ── 이웃과 함께 (봉사·나눔) ──────────────────────────────────────── */
.giving-list { list-style: none; margin: 0; padding: 0; }
.giving {
  display: grid; grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.giving:last-child { border-bottom: 0; }
.giving__year {
  font-size: 1.125rem; font-weight: var(--fw-heavy);
  color: var(--color-primary); font-variant-numeric: tabular-nums;
}
.giving__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.giving__body b { font-size: var(--fs-base); color: var(--color-text-strong); }
.giving__amount {
  background: var(--lime-400); color: var(--navy-900);
  font-weight: var(--fw-bold); font-size: 0.9375rem;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.giving__detail { color: var(--color-text-muted); font-size: 0.9375rem; flex-basis: 100%; }

/* 언론 보도 — 저작권상 제목·날짜·매체·링크만 */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; }
.news {
  display: grid; gap: var(--space-1);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  text-decoration: none; min-height: 44px;
}
@media (min-width: 640px) {
  .news { grid-template-columns: 92px 96px minmax(0, 1fr); align-items: baseline; gap: var(--space-4); }
}
a.news:hover { background: var(--navy-50); }
.news__date { font-size: 0.9375rem; color: var(--color-text-caption); font-variant-numeric: tabular-nums; }
.news__outlet { font-size: 0.9375rem; font-weight: var(--fw-bold); color: var(--color-primary); }
.news__title { color: var(--color-text); }
a.news .news__title { text-decoration: underline; text-underline-offset: 3px; }

/* ── 골프 매너 ─────────────────────────────────────────────────────── */
.manner { margin-bottom: var(--space-16); }
.manner__title {
  font-size: var(--fs-xl); color: var(--color-primary);
  margin: 0 0 var(--space-2); font-weight: var(--fw-heavy);
}
.manner__lead { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.manner__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-card); }
@media (min-width: 768px) { .manner__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.manner__item {
  background: var(--paper);
  border-top: 3px solid var(--navy-700);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.manner__cat {
  align-self: flex-start;
  background: var(--navy-50); color: var(--color-primary);
  font-size: 0.9375rem; font-weight: var(--fw-bold);
  padding: 2px 10px; border-radius: var(--radius-pill);
}
.manner__item b { font-size: var(--fs-base); color: var(--color-text-strong); }
.manner__item span:last-child { color: var(--color-text-muted); }

/* 용어 */
.glossary { display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; margin: 0; }
@media (min-width: 768px) { .glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.term { background: var(--color-surface); padding: var(--space-4) var(--space-5); }
.term dt { font-weight: var(--fw-bold); color: var(--color-primary); margin-bottom: 2px; }
.term dd { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; }

/* ── 푸터 ──────────────────────────────────────────────────────────── */
.footer { background: var(--navy-975); padding-block: var(--space-16) var(--space-10); }
.footer__inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand {
  display: flex; align-items: center; gap: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--rule-lime);
  grid-column: 1 / -1;
}
.footer__logo { width: 72px; height: 72px; flex: none; }
.footer__sign {
  grid-column: 1 / -1;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-lime);
  font-size: 0.9375rem; font-variant-numeric: tabular-nums;
  color: var(--navy-200); letter-spacing: .04em;
}

/* 헤더 부제 — 12px 은 읽히지 않는다 */
.brand__sub { font-size: 0.9375rem; }
.brand { min-height: 48px; }          /* 로고 링크 터치 타겟 */

/* 푸터 메뉴 터치 타겟 — 31×36px 이었다 */
.footer__nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding-block: var(--space-1);
}
.footer__notes p { font-size: 0.9375rem; }

/* 섹션 끝의 「더 보기」 링크 — 글자 높이 그대로라 24px 이었다.
   inline-block + 위아래 여백으로 44px 을 만든다. inline-flex 로 하면
   밑줄이 터치 영역 바닥으로 내려가 글자에서 떨어진다. */
.more-link {
  display: inline-block;
  padding-block: 10px;
  font-weight: var(--fw-bold);
  color: var(--bronze-700);
  text-underline-offset: 4px;
}
.more-link::after { content: " →"; }
.more-link:hover { text-decoration-thickness: 2px; }

/* 일정 그룹 제목은 눌러서 접었다 펴는 것이다. 37px 이었다. */
.sched__group-title {
  min-height: 44px;
  display: flex; align-items: center;
  cursor: pointer;
}

/* ── 매너 — 오늘 한 가지 + 상황별 접기 ──────────────────────────────
   56가지를 늘어놓으면 모바일에서 23화면이 된다. 아무도 끝까지 내리지 않는다.
   오늘 것 하나만 읽어도 남는 게 있고, 궁금한 상황만 펼치게 한다. */
.manner-today {
  background: var(--navy-975);
  border-radius: 14px;
  padding: var(--space-7) var(--space-6) var(--space-6);
  margin-bottom: var(--stack);
  border-top: 3px solid var(--lime-400);
}
.manner-today__label {
  display: block;
  font-size: 0.9375rem; font-weight: var(--fw-bold);
  letter-spacing: .1em; color: var(--lime-400);
  margin-bottom: var(--space-3);
}
.manner-today .manner__cat {
  background: transparent;
  border: 1px solid var(--rule-lime);
  color: var(--navy-200);
}
.manner-today__title {
  margin: var(--space-3) 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 4.6vw, 1.75rem);
  line-height: 1.35; font-weight: var(--fw-bold);
  color: var(--white); text-wrap: balance;
}
.manner-today__body {
  margin: 0; color: var(--navy-200);
  font-size: 1.0625rem; line-height: 1.75;
}
.manner-today__note {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule-on-navy);
  font-size: 0.9375rem; color: var(--navy-200);   /* 9.69:1 — navy-300 은 대비 미검증 */
}

.manner-group { border-bottom: 1px solid var(--color-divider); }
.manner-group__title {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px;            /* 손가락으로 여는 것이다 */
  cursor: pointer;
  list-style: none;
}
.manner-group__title::-webkit-details-marker { display: none; }
.manner-group__title::after {
  content: "＋";
  margin-left: auto;
  font-size: 1.25rem; color: var(--bronze-700);
  font-weight: var(--fw-bold);
}
.manner-group[open] > .manner-group__title::after { content: "－"; }
.manner-group__count {
  font-size: 0.9375rem; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.manner-group .manner__list { padding-bottom: var(--space-5); }

/* ── 빈 자리 채우기 ────────────────────────────────────────────────
   좁은 화면에서 글이 짧은 구역이 허전하다는 지적. 다만 그림을 더 넣으면
   지금도 전부 제작 이미지라는 문제가 커지고, 손그림 물결은 이미 걷어냈다
   ("가볍고 캐주얼"은 12년 조직과 반대다).
   그래서 이 사이트가 이미 쓰는 문법 — 스코어카드의 괘선 — 을 배경으로 쓴다.
   그림이 아니라 종이의 결이라 내용과 다투지 않고, 빈 곳이 방치가 아니라
   의도로 읽힌다. 칸을 아홉으로 나눈 것은 아웃 9홀이다. */
.slogan-band {
  /* 좁은 화면에서 아홉 칸은 53px 간격이라 촘촘해 어지럽다. 폭에 따라 칸을 늘린다. */
  --holes: 4;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 calc(100% / var(--holes) - 1px),
      var(--rule) calc(100% / var(--holes) - 1px) calc(100% / var(--holes)));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
@media (min-width: 640px)  { .slogan-band { --holes: 6; } }
@media (min-width: 1024px) { .slogan-band { --holes: 9; } }   /* 아웃 9홀 */
.slogan { position: relative; }

/* 가입·문의 — 짧은 문장 넷이 넓은 흰 면에 흩어져 있었다.
   네이비 면으로 묶어 하나의 카드로 만들고, 로고를 옅게 깔아 바닥을 채운다. */
.join {
  background: var(--navy-975);
  border-top: 3px solid var(--lime-400);
  position: relative; overflow: hidden;
}
.join::before {
  /* 배지(logo-badge)는 원형 글자 링이 있어 본문 글자와 겹치면 읽기를 방해한다.
     링 없는 마크를 쓰고, 글이 없는 아래쪽에 크게 깔아 바닥만 채운다. */
  content: "";
  position: absolute; inset: 0;
  background: url("/img/logo-mark.webp") no-repeat center bottom -22% / min(320px, 62%) auto;
  opacity: .08;
  pointer-events: none;
}
.join > .container { position: relative; }
.join .section-title,
.join h3 { color: var(--white); }
.join__policy { color: var(--white); }
.join .section__lead { color: var(--navy-200); }   /* 9.69:1 */
.join__mail {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--rule-lime);
  color: var(--lime-400);                          /* 11.10:1 */
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  letter-spacing: .04em;
}
/* 가입 안내와 문의 사이를 괘선으로 끊는다. 성격이 다른 두 이야기다. */
.join h3 {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule-on-navy);
}

/* ── 목록 접기 — 나눔·기사처럼 "몇 건인지"가 증명인 목록에 쓴다.
   접힌 쪽에도 건수를 적어 두므로 접어도 증명력은 줄지 않는다. */
.fold { margin-top: var(--space-2); }
.fold__toggle {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 48px;
  font-size: 1.0625rem; font-weight: var(--fw-bold);
  color: var(--bronze-700);
  cursor: pointer; list-style: none;
}
.fold__toggle::-webkit-details-marker { display: none; }
.fold__toggle::before {
  content: "＋"; font-size: 1.125rem;
}
.fold[open] > .fold__toggle::before { content: "－"; }
.fold[open] > .fold__toggle { margin-bottom: var(--space-2); }

/* 명언에 나오는 골프 말의 뜻을 찾아갈 자리.
   용어 풀이는 /manners 에만 있는데 그 페이지는 주 메뉴에도 하단 탭에도 없어
   푸터 링크 하나로만 닿았다. 모르는 말을 만난 그 자리에 길을 놓는다. */
.today__aside {
  margin: var(--space-5) 0 0;
  text-align: right;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
}
.today__aside .more-link { margin-left: var(--space-2); }

/* ── 404 ──────────────────────────────────────────────────────────
   재설계에서 빠뜨린 자리. 버튼이 옛 초록(--color-accent)으로 남아 있어
   이 페이지만 다른 사이트처럼 보였다. 404 숫자도 테두리색을 글자에 써서
   1.5:1 이었다 — 달력 인접 달 날짜와 같은 실수다. */
.notfound__code {
  color: var(--rule-strong);
  font-family: var(--font-serif);
  letter-spacing: .06em;
}
.notfound .btn-primary {
  background: var(--navy-975);
  color: var(--white);
  border-color: var(--navy-975);
}
.notfound .btn-primary:hover { background: var(--navy-700, #262878); }
/* 길을 잃은 사람에게 필요한 것은 홈으로 가는 단추 하나가 아니라
   "여기 뭐가 있는지"다. 주요 페이지를 함께 놓는다. */
.notfound__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
.notfound__links a {
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--bronze-700); font-weight: var(--fw-bold);
  text-underline-offset: 4px;
}

/* ── 월례회 — 정기행사의 최상단 (오너 지시 2026-08-18) ─────────────
   한 달의 모든 활동이 이 자리로 모인다. 네이비 면으로 묶어
   "라운드 8칸"보다 위계가 높아 보이게 한다. */
.monthly {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding: var(--space-8);
  background: var(--navy-975);
  border-radius: 10px;
  color: var(--white);
}
@media (max-width: 767px) {
  .monthly { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); gap: var(--space-6); }
}
.monthly__label {
  display: inline-block;
  font-size: 0.875rem;
  letter-spacing: .12em;
  color: var(--lime-400);
  font-weight: var(--fw-bold);
}
.monthly__title {
  margin: var(--space-3) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4.2vw, 2rem);
  color: var(--white);
}
.monthly__text {
  margin-top: var(--space-4);
  color: var(--navy-100, #D9DCF2);
  line-height: 1.75;
}
.monthly__next {
  margin-top: var(--space-5);
  font-size: 1.0625rem;
  color: var(--white);
}
.monthly__next b { color: var(--lime-400); }
.monthly__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-content: center;
}
.monthly__fact {
  border-left: 2px solid var(--navy-600);
  padding-left: var(--space-4);
}
.monthly__fact b { display: block; font-size: 1.0625rem; color: var(--white); }
.monthly__fact span { font-size: 0.875rem; color: var(--navy-200); }

/* ── 네이버 밴드 바로가기 카드 (오너 지시 2026-08-18) ───────────────
   QR은 데스크톱에서만 보인다 — 자기 화면을 자기 폰으로 못 찍는다.
   밴드 민트색은 이 버튼 하나에만 쓴다. */
.bandcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  max-width: 640px;
  margin: var(--space-10) auto 0;
  padding: var(--space-8);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  text-align: left;
}
@media (min-width: 768px) {
  .bandcard { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
/* 로고 자리 — BAND 워드마크(밴드 로고는 초록 바탕의 흰 BAND 글자다).
   비상업 안내 링크라 그대로 쓴다(오너 판단 2026-08-18). 여기 초록은 그래픽이라 진짜 밴드색을 쓴다 */
.bandcard__head { display: flex; align-items: flex-start; gap: var(--space-5); }
.bandcard__mark {
  flex: none;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: #00C73C; border-radius: 14px;
  color: #FFFFFF;
  font-size: 0.8125rem; font-weight: 800; letter-spacing: .04em;
}
.bandcard__label {
  display: block;
  font-size: 0.875rem;
  letter-spacing: .1em;
  font-weight: var(--fw-bold);
  color: var(--navy-600);
}
.bandcard__text { margin-top: var(--space-2); }
/* 버튼 — 이전엔 밝은 밴드색 위에 딥그린 글자 + 2px 테두리라 손대다 만 것처럼 보였다.
   글자는 흰색으로 되돌리고, 대신 흰 글자가 4.5:1 을 넘는 깊은 초록으로 바닥을 낮춘다(5.35:1).
   밴드 원색은 위 로고 자리가 담당하므로 브랜드 인상은 그대로 남는다. */
.bandcard__btn {
  display: flex;
  align-items: center; justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  margin-top: var(--space-6);
  padding: 0 var(--space-6);
  background: #097C26;
  color: #FFFFFF;
  border: 0;
  border-radius: 8px;
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
@media (min-width: 480px) { .bandcard__btn { width: auto; display: inline-flex; } }
.bandcard__btn:hover { background: #0B8F2C; color: #FFFFFF; }
.bandcard__arrow { font-size: 1.0625rem; }
.bandcard__note {
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.bandcard__qr {
  display: none;                 /* 모바일 기본 숨김 */
}
@media (min-width: 768px) {
  .bandcard__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  .bandcard__qr img {
    width: 160px; height: 160px;
    padding: var(--space-2);
    background: #FFFFFF;
    border: 1px solid var(--rule);
    border-radius: 6px;
  }
  .bandcard__qrlabel {
    font-size: 0.875rem;
    text-align: center;
    color: var(--color-text-muted);
    line-height: 1.5;
  }
  .bandcard__qrlabel b { color: var(--navy-600); }
}

/* 일정 목록에서 월례회 행을 강조 — 달력의 점 구분(cal__dot--major)과 짝 */
.sched__item--monthly { border-left: 3px solid var(--navy-600); }
.sched__item--monthly .sched__name { font-weight: var(--fw-bold); color: var(--navy-700, #262878); }

/* ── 함께하는 업체 (후원) ──────────────────────────────────────────
   스코어카드 괘선 격자(rounds__grid)와 같은 방식 — 1px 간격에 괘선 색을 깔고
   칸을 흰 배경으로 덮는다. 사이트 전체가 이 결이라 새 문법을 들이지 않는다.
   로고가 있는 업체와 글자만 있는 업체가 섞여도 칸 높이가 흔들리지 않게 min-height 고정. */
.sponsors {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
@media (min-width: 768px) { .sponsors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sponsor { display: flex; }
.sponsor__link {
  background: var(--white);
  flex: 1; min-width: 0;                    /* 긴 상호가 칸을 밀어내지 않게 */
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-5) var(--space-4);
  min-height: 116px;
  text-decoration: none; color: inherit;
}
a.sponsor__link:hover { background: var(--color-surface-alt); }
a.sponsor__link:hover .sponsor__name { text-decoration: underline; }

.sponsor__logo { width: auto; height: 40px; object-fit: contain; align-self: flex-start; }
.sponsor__name {
  font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--color-text-strong);
  line-height: 1.35;
}
.sponsor__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.sponsor__cat {
  font-size: 0.8125rem; font-weight: var(--fw-bold);
  color: var(--navy-700, #262878); background: var(--navy-50);
  padding: 2px 8px; border-radius: 3px;
}
.sponsor__area { font-size: 0.875rem; color: var(--color-text-caption); }
.sponsor__support {
  margin-top: auto;                          /* 칸 높이가 달라도 바닥에 정렬 */
  font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.5;
}

/* 예시 데이터일 때만 나가는 고지 — 실제 명단이 들어오면 JSON 에서 빠지며 사라진다 */
.sponsor__notice { margin-top: var(--space-5); }

/* 되풀이 주기 표기 — "매월 넷째 주 금요일". 날짜 옆이 아니라 아래 줄에 둔다.
   날짜와 나란히 두면 "8월 28일 매월 넷째 주 금요일"로 읽혀 한 번 더 생각해야 한다. */
.sched__every {
  font-size: var(--fs-ui);
  font-weight: var(--fw-bold);
  color: var(--navy-700, #262878);
  letter-spacing: -0.005em;
}

/* 후원처 상세 판 — 정기 라운드 상세(.round-detail)와 같은 문법.
   상호를 가장 크게 먼저 놓는다. 이 자리의 목적이 상호를 보이게 하는 것이다. */
.sponsor__link {
  width: 100%; text-align: left; font: inherit;
  border: 0; cursor: pointer;
}
.sponsor__link[aria-pressed="true"] {
  background: var(--color-surface-sunken);
  box-shadow: inset 3px 0 0 var(--navy-700);
}
.sponsor-detail {
  margin-top: var(--space-6);
  background: var(--white);
  border-top: 3px solid var(--navy-700);
  padding: var(--space-6);
}
.sponsor-detail__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-5);
}
.sponsor-detail__name {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  color: var(--color-primary); line-height: 1.25;
}
.sponsor-detail__tag {
  background: var(--navy-50); color: var(--color-primary);
  font-size: 0.9375rem; font-weight: var(--fw-bold);
  padding: 2px 10px;
}
.sponsor-detail__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5); margin: 0;
}
@media (min-width: 640px) { .sponsor-detail__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sponsor-detail__grid dt {
  font-size: 0.9375rem; color: var(--color-text-muted);
  letter-spacing: .04em; margin-bottom: 2px;
}
.sponsor-detail__grid dd {
  margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.sponsor-detail__link {
  display: inline-block; margin-top: var(--space-5);
  font-weight: var(--fw-bold); color: var(--color-link);
}

/* ── 문의 연락처 카드 (오너 지시 2026-08-18) ────────────────────────
   네이비 면 위라 라임 괘선 + 흰 글자. 이름을 먼저 크게 놓고 연락 수단을 아래에 깐다.
   전화·메일 칸은 통째로 누르는 면 — 60대 이상이 주 사용층이라 글자만 링크로 두지 않는다.
   구 표기(.join__mail "연락처 준비 중")는 site.css·redesign.css 에 그대로 남겨 둔다. */
.contactcard {
  max-width: 36rem;
  margin: var(--space-6) auto 0;
  border: 1px solid var(--rule-lime);
  background: rgba(255, 255, 255, .04);
  text-align: left;
  overflow: hidden;                 /* 사진이 카드 모서리 밖으로 새지 않게 */
}
/* 사진이 카드 위쪽을 통째로 쓴다.
   ★ 원형 크롭 폐기(2026-08-18): 정사각으로 오리면 태극기·명패 같은 배경이 전부 잘려
     "누구인지"를 말해 주는 정보가 사라지고 얼굴만 작아졌다. 자르지 않고 폭을 꽉 채운다. */
.contactcard__photo {
  margin: 0;
  border-bottom: 3px solid var(--lime-400);
  background: var(--navy-950);
}
.contactcard__photo img {
  display: block;
  width: 100%; height: auto;        /* 원본 923×590 비율 그대로 — 크롭 없음 */
}
.contactcard__id {
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--rule-on-navy);
}
.contactcard__role {
  display: inline-block; margin-bottom: 4px;
  font-size: 0.9375rem; font-weight: var(--fw-bold);
  color: var(--navy-975); background: var(--lime-400);
  padding: 2px 10px;
}
.contactcard__name {
  display: block;
  font-family: "Nanum Brush", var(--font-serif);
  font-size: clamp(1.875rem, 6vw, 2.375rem);
  color: var(--white); letter-spacing: .02em; line-height: 1.25;
}
.contactcard__ways { display: grid; gap: var(--space-3); padding: var(--space-6); }
.contactcard__way {
  display: flex; align-items: baseline; gap: var(--space-4);
  min-height: 48px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule-on-navy);
  color: var(--white); text-decoration: none;
  font-variant-numeric: tabular-nums;
  word-break: break-all;               /* 긴 메일 주소가 좁은 화면을 밀어내지 않게 */
}
.contactcard__way:hover { background: rgba(255, 255, 255, .07); }
.contactcard__way b { font-size: 1.0625rem; font-weight: var(--fw-bold); }
.contactcard__way--tel b { font-size: 1.1875rem; }   /* 전화가 첫 수단 */
.contactcard__waylabel {
  flex: none; min-width: 2.5rem;
  font-size: 0.9375rem; color: var(--navy-200);      /* 9.69:1 */
}

/* ── 붓글씨 캘리 (오너 지시 2026-08-18) ─────────────────────────────
   산목에서 쓰던 나눔브러시 KS X 1001 서브셋(544KB)을 그대로 가져왔다.
   외부 요청 0 — 자체 호스팅이라 구글 폰트 서버를 타지 않는다.

   ⚠ 어디에 거는가가 전부다. 나눔브러시는 x-height 가 작아 작은 글자에서 급격히 읽기 어려워지는데
   이 사이트의 주 사용층은 60대 이상이다. 그래서 규칙을 좁게 못 박는다:
     ① 짧은 한 문장 ② 24px 이상 ③ 본문·메뉴·숫자·날짜·표에는 절대 걸지 않는다.
   font-display:swap 이라 폰트가 늦게 와도 글자는 먼저 보인다(빈 화면 없음). */
@font-face {
  font-family: "Nanum Brush";
  src: url("/assets/fonts/nanum-brush-ks.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+AC00-D7A3, U+0020-007E, U+00B7, U+2014, U+2018-201D, U+2026;
}

/* 붓글씨는 세리프보다 작아 보여 같은 자리에서 한 단계 키운다 */
.calli {
  font-family: "Nanum Brush", var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
}

/* ① 히어로 표제 — 첫 화면의 인상 */
.hero__title.calli {
  font-size: clamp(2.75rem, 9vw, 4rem);
  line-height: 1.2;
  letter-spacing: .01em;
}

/* ② 슬로건 밴드 — 공식 슬로건 한 줄. 이 사이트에서 가장 붓글씨다운 자리 */
.slogan.calli { font-size: clamp(1.625rem, 5.4vw, 2.375rem); line-height: 1.5; }
.slogan.calli .slogan__brand,
.slogan.calli .slogan__region { font-weight: 400; }
/* 라임 밑선은 산세리프 베이스라인에 맞춰 -0.32em 에 그어 두었다. 붓글씨는 x-height 가 작고
   획이 아래로 흘러 그 자리가 글자 한가운데를 가로지른다 → 붓글씨일 때만 아래로 내린다. */
.slogan.calli .slogan__region { box-shadow: inset 0 -0.12em 0 var(--color-highlight); }

/* ③ 오늘의 명언 — 짧은 한 문장이라 붓글씨의 본령 */
.today__quote.calli { font-size: clamp(1.5rem, 5vw, 2.125rem); line-height: 1.45; }

/* ④ 발간사 인용 — 사이트에 하나뿐인 인용문 */
/* 발간사 인용 — 붓글씨는 획이 가늘고 글자 높이(x-height)가 작아 같은 크기로도 훨씬 작아 보인다.
   주 사용층이 60대 이상이라 여기서 아끼면 안 읽힌다(오너 지적 2026-08-18).
   22~28px → 30~40px. 폭도 24ch 로는 일곱 줄로 쪼개져 읽는 흐름이 끊겨 넓힌다. */
.quotebox.calli p { font-family: "Nanum Brush", var(--font-serif); font-weight: 400;
  font-size: clamp(1.875rem, 5.4vw, 2.5rem); line-height: 1.55;
  max-width: 34ch; color: var(--color-text-strong); }
/* 출처는 붓글씨를 상속받으면 안 된다 — 짧고 작은 글이라 붓으로 쓰면 그때부터 못 읽는다.
   .calli 를 blockquote 에 걸어 두어 cite 까지 따라간 것이라 여기서 되돌린다. */
.quotebox.calli cite {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1.0625rem;
  color: var(--color-text-muted);
}

/* ⑤ 섹션 표제 — 홀 번호 옆 제목. 세리프 대신 붓으로 바꿔 지면 전체의 결을 바꾼다.
   제목은 길어야 여덟 자라 읽기에 문제가 없다. */
.sec-head h2.calli { font-size: clamp(1.875rem, 5vw, 2.5rem); line-height: 1.3; }

/* ⑥ 월례회 블록 표제 — 네이비 면 위 흰 붓글씨 */
.monthly__title.calli { font-size: clamp(1.5rem, 4.6vw, 2rem); line-height: 1.35; }

/* ⑦ 트로피 섹션 표제 */
.trophy h2.calli { font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.3; }

/* ── 운영진 조직도 (오너 지시 2026-08-18) ───────────────────────────
   회장 한 칸을 맨 위에 두고, 그 아래로 고문·자문·이사·부장이 단으로 펼쳐진다.
   계통선은 가상요소로 긋는다 — 이미지도 SVG 도 쓰지 않아 어느 폭에서도 깨지지 않는다.
   가로 배치(부모-자식 트리)를 쓰지 않은 이유: 19명을 한 줄에 늘어놓으면 390px 에서
   글자가 3px 가 되거나 가로 스크롤이 생긴다. 단(段)으로 쌓으면 좁은 화면이 오히려 자연스럽다. */
.org { margin-top: var(--stack); }
.org__top { display: flex; justify-content: center; }
.org__row {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* minmax(0, 1fr) 이었다 → 360px 에서 auto-fit 이 인원수만큼 칸을 만들어(고문 6명 = 6칸)
     한 칸이 40px 까지 눌렸다. 최소 폭을 주면 좁은 화면에서 자동으로 줄바꿈된다.
     .org__item 의 max-width 가 9rem 이므로 7rem 이면 칸이 사진보다 좁아지지 않는다. */
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-6) var(--space-4);
  justify-items: center;
}
.org__row--lead { grid-template-columns: minmax(0, 1fr); }

/* 회장 칸에서 아래 단으로 내려오는 줄기 */
.org__stem {
  width: 2px; height: 40px;
  margin: var(--space-5) auto var(--space-2);
  background: var(--rule-strong);
}

.org__tier { margin-top: var(--space-8); }
.org__tierhead {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
  font-size: 1rem; letter-spacing: .1em;
}
.org__tierhead span { font-weight: var(--fw-bold); color: var(--color-primary); }
.org__tierhead b {
  font-size: 0.875rem; font-weight: var(--fw-bold);
  color: var(--color-text-caption); font-variant-numeric: tabular-nums;
}
.org__tierhead b::after { content: "명"; margin-left: 1px; }

.org__item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-align: center; max-width: 9rem;
}
.org__face {
  /* height 를 88px 로 못 박아 두었더니 좁은 화면에서 타원이 됐다.
     tokens.css 의 전역 `img { max-width: 100% }` 가 width 를 이겨 폭만 줄고
     높이는 88px 로 남았기 때문이다(360px 실측 39.7×88 — 세로로 2배 넘게 늘어난 얼굴).
     aspect-ratio 만 넣으면 안 된다 — <img height> 속성이 aspect-ratio 를 이기므로
     height: auto 를 함께 주어야 원이 유지된다. 사진첩에서 겪은 것과 같은 함정. */
  width: 88px; height: auto; aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--rule);
  background: var(--color-surface-alt);
}
.org__face--none {
  display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 2rem; color: var(--color-text-caption);
}
.org__name {
  font-size: 1.0625rem; font-weight: var(--fw-bold);
  color: var(--color-text-strong); line-height: 1.3;
}
.org__title { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.35; }

/* 회장 칸은 크게 — 조직도에서 가장 먼저 읽혀야 하는 한 사람 */
.org__item--lead { max-width: 15rem; gap: var(--space-3); }
.org__item--lead .org__face {
  width: 128px; height: auto;
  border-width: 3px;
  box-shadow: 0 0 0 2px var(--navy-600);
}
.org__item--lead .org__name { font-family: var(--font-serif); font-size: 1.5rem; }
.org__item--lead .org__title {
  font-size: 0.875rem; font-weight: var(--fw-bold); letter-spacing: .1em;
  color: var(--navy-975); background: var(--lime-400);
  padding: 2px 12px;
}

@media (min-width: 480px) { .org__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .org__row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
  .org__row--lead { grid-template-columns: minmax(0, 1fr); }
  .org__face { width: 104px; height: auto; }
  .org__item--lead .org__face { width: 168px; height: auto; }
}

/* 후원처 「더 보기」 — 「이웃과 함께」 접기와 같은 방식 */
.sponsors__more { margin-top: var(--space-5); }
.sponsors__more > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  border: 1px solid var(--rule-strong);
  font-weight: var(--fw-bold); color: var(--color-primary);
}
.sponsors__more > summary::-webkit-details-marker { display: none; }
.sponsors__more > summary::after { content: "▾"; font-size: 0.875rem; }
.sponsors__more[open] > summary::after { content: "▴"; }
.sponsors--more { margin-top: var(--space-5); border-top-width: 1px; }

/* 푸터 맨 아래 제작자 표기.
   오너 지시(2026-08-18): 자세히 봐야만 보이게. 바탕(네이비 975)에 거의 묻히는 색으로 둔다.
   대비가 낮은 것이 여기서는 결함이 아니라 의도다 —
   정보가 아니라 서명이고, 읽지 못해도 잃는 것이 없다. 그래서 검수에서도 제외한다(data-logotype).
   커서는 그대로 두어 눌러 볼 수 있다는 힌트만 남긴다(이스터에그). */
.footer__made {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: .06em;
  color: #171B2E;                    /* 네이비 975(#0F1424) 위 — 눈에 띄지 않는 정도 */
  cursor: default;
  user-select: none;
}
.footer__made:hover { color: #232948; }

/* 다섯 번 눌렀을 때 나오는 팝업.
   푸터에 한 줄로 붙였더니 어두운 바닥에 묻혀 찾은 보람이 없었다 → 화면 한가운데로. */
.egg {
  border: 0; padding: 0;
  background: transparent;
  max-width: min(92vw, 26rem);
}
.egg::backdrop { background: rgba(8, 12, 24, .82); }
.egg > * { animation: eggIn .45s ease-out; }
.egg {
  padding: var(--space-10) var(--space-8) var(--space-8);
  background: var(--navy-975);
  border: 1px solid var(--rule-lime);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.egg__logo { display: block; margin: 0 auto var(--space-5); }
.egg__title {
  margin: 0;
  font-family: "Nanum Brush", var(--font-serif);
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--lime-400); line-height: 1.35;
}
.egg__text { margin: var(--space-3) 0 0; color: var(--navy-200); }
.egg__close {
  margin-top: var(--space-8);
  min-height: 48px; padding: 0 var(--space-8);
  background: transparent;
  border: 1px solid var(--rule-lime);
  border-radius: 6px;
  color: var(--lime-400);
  font-weight: var(--fw-bold); font-size: 1rem;
  cursor: pointer;
}
.egg__close:hover { background: rgba(200, 214, 60, .12); }
/* 사진이 들어가는 이스터에그 (로고 5연타, 2026-08-20).
   글자만 있는 .egg 보다 넓어야 얼굴이 보인다. 사진은 자르지 않는다 —
   원본 비율 그대로 넣어야 태극기와 명패("회장 류인식")가 살아 있고, 그게 이 사진의 전부다. */
.egg--photo { max-width: min(90vw, 30rem); padding: var(--space-6); }
.egg__photo {
  display: block; width: 100%; height: auto;   /* height:auto 없으면 width 속성이 비율을 이긴다 */
  border-radius: 8px;
  margin-bottom: var(--space-5);
}
@keyframes eggIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .egg > * { animation: none; }
}

/* ── 사진 카드 (2026-08-18) ─────────────────────────────────────────
   글자만 있던 카드 위에 사진을 얹는다. 「연탄과 이웃」이라 써 놓고 연탄 사진이 없으면
   읽는 사람 머릿속에 아무것도 남지 않는다.
   비율을 16:10 으로 못 박는 이유: 원본 비율이 제각각이면 네 칸의 글 시작선이 어긋난다. */
.card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;   /* 원본이 16:9 라 그대로 — 예약 공간이 틀리면 로드 중 화면이 밀린다 */
  object-fit: cover;
}
.card--photo .card__body { padding: var(--space-6); }
.card--photo .routine__what { margin-top: var(--space-3); }

/* ── 풀블리드 사진 띠 (2026-08-18) ──────────────────────────────────
   페이지 사이사이에 크게 깔리는 사진. 여기가 "화려함"을 담당한다.
   ★ 100vw 금지 — 스크롤바 폭만큼 넘쳐 전 페이지에 가로 스크롤이 생겼던 전례가 있다.
     width:100% + 컨테이너 밖 배치로 같은 효과를 낸다.
   ★ 모바일에서는 숨긴다(오너 지시) — 좁은 화면에서 큰 사진은 화려함이 아니라
     스크롤 부담이다. 데이터도 아낀다. loading=lazy 라 숨겨진 동안 내려받지도 않는다. */
.photoband { display: none; }
@media (min-width: 768px) {
  .photoband {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    background: var(--navy-975);
    overflow: hidden;
  }
  /* ★ .photoband img 로 쓰면 안 된다 — 위에 얹는 로고도 <img> 라 같이 걸려
     100% 폭으로 부풀어 사진을 통째로 덮는다(실제로 그렇게 났다).
     배경 사진만 고르도록 자식 직계 + 첫 요소로 좁힌다. */
  .photoband > img:first-child {
    display: block;
    width: 100%; height: auto;
    max-height: 620px;              /* 원본 소프트닝이 드러나지 않는 상한 */
    object-fit: cover;
  }
  .photoband__cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--space-10) var(--space-6) var(--space-6);
    background: linear-gradient(180deg, rgba(10, 18, 36, 0) 0%, rgba(10, 18, 36, .82) 100%);
    color: var(--white);
    text-align: center;
  }
  .photoband__cap b {
    display: block;
    font-family: "Nanum Brush", var(--font-serif);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 400; line-height: 1.3;
  }
  /* ★ 직계 자식만 잡는다 (2026-08-20).
     그냥 `span` 이면 제목 <b> 안에 들어간 <span data-years> 까지 잡아
     「울산에서 13년째」의 13 만 작고 흐린 부제 글씨가 되고, display:block 탓에
     「울산에서 / 13 / 년째」 세 줄로 깨졌다. 오너가 화면에서 먼저 발견. */
  .photoband__cap > span {
    display: block; margin-top: var(--space-2);
    font-size: 1rem; color: var(--navy-200);
  }
  /* 로고를 사진 위 한쪽에 작게 얹는다 — 곳곳에 브랜드가 남게(오너 지시) */
  img.photoband__logo {
    position: absolute; top: var(--space-6); left: var(--space-6);
    width: 56px; height: 56px; max-height: none;
    object-fit: contain; opacity: .92;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
  }
}

/* 사진첩 카테고리 묶음 (2026-08-18) — 격자 사이에 홀 번호 제목을 넣어 끊어 읽게 한다 */
.gal + .gal { margin-top: var(--space-12); }

/* 구장 이름을 누르면 그 골프장 공식 홈페이지로 (2026-08-18).
   링크가 있는 칩만 눌리는 면으로 보이게 한다 — 링크 없는 칩과 구별되지 않으면
   눌러 보고 아무 일도 안 일어나는 경험이 생긴다. */
.place--link { padding: 0; }
.place--link > a {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  min-height: 44px; padding: 8px var(--space-4);
  color: inherit; text-decoration: none;
}
.place--link > a::after {
  content: "↗";
  font-size: 0.8125rem; color: var(--color-link);
}
.place--link:hover { border-color: var(--navy-600); background: var(--navy-50); }
.place--link > a:hover b { text-decoration: underline; }

/* ── 연혁 (2026-08-18) ──────────────────────────────────────────────
   해마다 한 덩어리. 요약은 늘 보이고 상세는 접어 둔다.
   열네 해치 상세가 600줄이 넘어 그대로 늘어놓으면 읽는 문서가 아니라 스크롤 벽이 된다. */
.hist { display: grid; gap: var(--space-6); }
.hist__year {
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--navy-600);
  padding: var(--space-6);
}
.hist__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.hist__no {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4.4vw, 1.875rem);
  font-weight: var(--fw-heavy);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.hist__badge {
  font-size: 0.875rem; font-weight: var(--fw-bold);
  color: var(--navy-975); background: var(--lime-400);
  padding: 2px 10px;
}
.hist__sum { margin: 0; padding-left: 1.6em; }
.hist__sum li { margin-bottom: var(--space-2); line-height: 1.6; }
.hist__more { margin-top: var(--space-5); border-top: 1px solid var(--rule); padding-top: var(--space-4); }
.hist__more > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  font-weight: var(--fw-bold); color: var(--color-link);
  font-size: var(--fs-ui);
}
.hist__more > summary::-webkit-details-marker { display: none; }
.hist__more > summary b { font-weight: var(--fw-regular); color: var(--color-text-caption); }
.hist__more > summary::after { content: "▾"; font-size: 0.8125rem; }
.hist__more[open] > summary::after { content: "▴"; }
.hist__detail {
  margin: var(--space-3) 0 0; padding-left: 1.6em;
  color: var(--color-text-muted); font-size: var(--fs-ui);
}
.hist__detail li { margin-bottom: 6px; line-height: 1.65; }

/* ── 운영 규정 (2026-08-18) ─────────────────────────────────────────
   회칙 아코디언(.rules__section)의 문법을 그대로 쓴다. 표는 좁은 화면에서
   가로로만 스크롤되게 감싼다 — 페이지 전체가 밀리면 안 된다. */
.ops__lead { margin: var(--space-4) 0 var(--space-3); color: var(--color-text-muted); }
.ops__list { margin: 0; padding-left: 1.6em; }
.ops__list li { margin-bottom: var(--space-3); line-height: 1.7; }
.ops__tablewrap { margin-top: var(--space-5); overflow-x: auto; }
.ops__table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-ui); min-width: 22rem;
}
.ops__table th, .ops__table td {
  border: 1px solid var(--rule);
  padding: var(--space-3) var(--space-4);
  text-align: left; vertical-align: top;
}
.ops__table th {
  background: var(--navy-50); color: var(--color-primary);
  font-weight: var(--fw-bold); white-space: nowrap;
}
.ops__table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 사진 확대 보기 (2026-08-18) ────────────────────────────────────
   사진을 누르면 페이지를 떠나지 않고 그 자리에 겹쳐 뜬다. ✕ 로 그 사진만 닫는다.
   전에는 이미지 파일로 이동해 버려서 뒤로가기를 하면 읽던 자리를 잃었다. */
.lb {
  width: min(96vw, 1400px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lb::backdrop { background: rgba(8, 12, 24, .92); }
.lb__figure {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4);
}
.lb__img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: var(--navy-975);
}
.lb__cap {
  color: #FFFFFF;
  font-size: var(--fs-ui);
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3); align-items: baseline;
}
.lb__count { color: var(--navy-200); font-variant-numeric: tabular-nums; }

/* 버튼은 손가락으로 누를 크기(48px+)로. 사진 위에 겹치므로 항상 대비가 있어야 한다. */
.lb__close, .lb__nav {
  position: fixed;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(8, 12, 24, .72);
  color: #FFFFFF;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.lb__close:hover, .lb__nav:hover { background: rgba(8, 12, 24, .95); border-color: #FFFFFF; }
.lb__close { top: var(--space-5); right: var(--space-5); font-size: 1.25rem; }
.lb__nav { top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lb__nav--prev { left: var(--space-4); }
.lb__nav--next { right: var(--space-4); }
@media (max-width: 479px) {
  .lb__nav { width: 48px; height: 48px; }
  .lb__nav--prev { left: 6px; }
  .lb__nav--next { right: 6px; }
}

/* 네이비 면 위 「더 보기」 링크 — 브론즈(#8A5A22)는 어두운 면에서 2.0:1 로 묻힌다 */
.more-link--on-navy { color: var(--lime-400); }        /* 네이비 위 11.10:1 */
.origin__more { margin-top: var(--space-6); }

/* 명언 카드 사진 칸 — 150px 로는 사진이 세로 띠처럼 잘려 무엇인지 알 수 없었다 */
@media (min-width: 900px) {
  .today { grid-template-columns: 260px 120px minmax(0, 1fr); }
}

/* ── 지난 명언 목록 (2026-08-18) ────────────────────────────────────
   카드 밖으로 뺐다. 카드 안에 두었더니 목록이 늘 때마다 카드가 길어지고
   왼쪽 사진이 그 높이를 따라 늘어나며 세로 띠로 잘렸다.
   여기는 흰 바탕(section--alt)이라 카드 안의 밝은 글자색을 그대로 쓸 수 없다. */
.quotes-more { margin-top: var(--space-8); }
.quotes-more__list {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: grid; gap: var(--space-5);
}
.quotes-more__list li {
  padding-left: var(--space-5);
  border-left: 2px solid var(--rule-strong);
  font-size: var(--fs-ui); color: var(--color-text-caption);
  line-height: 1.6;
}
.quotes-more__list li b {
  display: block; margin-bottom: 4px;
  font-size: 1.0625rem; font-weight: var(--fw-bold);
  color: var(--color-text-strong); line-height: 1.5;
}
@media (min-width: 768px) {
  .quotes-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-8); }
}
.quotes-more__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  color: var(--color-primary);
  font-weight: var(--fw-bold); font-size: var(--fs-ui);
  cursor: pointer;
}
.quotes-more__btn::after { content: "▾"; font-size: 0.8125rem; }
.quotes-more__btn:hover { background: var(--navy-50); border-color: var(--navy-600); }

/* ── 찬조·협찬 명함 (2026-08-18) ────────────────────────────────────
   명함 63장을 그대로 건다. 명함은 가로 3:2 로 규격이 거의 같아 격자가 흔들리지 않는다.
   흰 명함이 크림 지면에 묻히지 않게 흰 카드 + 1px 괘선으로 띄운다. */
.bcards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .bcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bcard { display: flex; flex-direction: column; gap: var(--space-2); }
.bcard__link {
  display: block;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: var(--space-2);
  line-height: 0;                    /* 이미지 아래 여백 제거 */
}
.bcard__link:hover { border-color: var(--navy-600); box-shadow: 0 6px 18px rgba(15, 20, 36, .12); }
.bcard__img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;               /* 명함 규격. 원본이 887×592 라 거의 정확히 3:2 */
  object-fit: contain;               /* 명함은 잘리면 안 된다 — 상호가 끝에 걸린 것이 있다 */
  background: var(--white);
}
.bcard__name {
  font-size: 0.9375rem; font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* 「모두 보기」 — 63장을 한 번에 쏟지 않고 접어 둔다 */
.bcards__more { margin-top: var(--space-8); }
.bcards__more > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: baseline; gap: var(--space-3);
  min-height: 48px; padding: 0 var(--space-6);
  border: 1px solid var(--rule-strong);
  background: var(--white);
  font-weight: var(--fw-bold); color: var(--color-primary);
}
.bcards__more > summary::-webkit-details-marker { display: none; }
.bcards__more > summary b { color: var(--bronze-700); font-variant-numeric: tabular-nums; }
.bcards__more > summary span {
  font-size: 0.875rem; font-weight: var(--fw-regular); color: var(--color-text-caption);
}
.bcards__more > summary::after { content: "▾"; font-size: 0.8125rem; }
.bcards__more[open] > summary::after { content: "▴"; }
.bcards--all { margin-top: var(--space-6); }

/* ── 실제 모임 사진 스트림 ─────────────────────────────────────────────
   격자를 쓰지 않는다. 단체사진은 가로로 길어(최대 2.04:1) 정사각 격자에 넣으면
   좌우 절반이 잘리고, 그 절반에 서 있던 사람들이 통째로 사라진다.
   한 장씩 폭을 꽉 채워 쌓고 아래에 날짜·행사·장소를 적는다.

   폭을 940px 로 묶은 이유: 받은 사진이 전부 카톡 전송본(긴 변 1280px)이라
   그보다 크게 띄우면 늘어나 흐려진다. */
.photostream { --stream-w: 940px; }
.stream__item {
  margin: 0 auto var(--space-10);
  max-width: var(--stream-w);
}
.stream__img {
  display: block;
  width: 100%;
  height: auto;               /* <img height> 속성이 비율을 이기는 함정 방지 */
  border-radius: var(--radius-sm);
  background: var(--navy-50); /* 로드 전 빈 칸이 흰 구멍으로 보이지 않게 */
}
.stream__cap {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.stream__date {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--bronze-700);
  white-space: nowrap;
}
.stream__title { color: var(--color-text); }
.stream__place { font-size: 0.9375rem; color: var(--color-text-caption); }

/* 연도 구분선 — 쭉 훑어도 지금 어디쯤인지 알게 하는 것이 전부다 */
.stream__year {
  max-width: var(--stream-w);
  margin: var(--space-10) auto var(--space-8);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.stream__year::after {
  content: "";
  height: 1px;
  background: var(--rule-strong);
}
.stream__item + .stream__year { margin-top: var(--space-8); }
.photostream > .stream__year:first-child { margin-top: 0; }

@media (max-width: 767px) {
  .stream__item { margin-bottom: var(--space-8); }
  .stream__year { font-size: 1.25rem; margin: var(--space-8) auto var(--space-6); }
  .stream__cap { gap: 2px var(--space-3); }
}

/* ── 「코스 풍경 보기」 — 실사를 다 본 뒤에 나타나는 문 ────────────────
   상단 탭으로 두지 않은 이유: 탭은 페이지에 들어오자마자 「둘 중 뭘 볼래?」를 묻는다.
   버튼은 사진을 다 본 사람에게만 보이므로 고르는 일이 끝에 한 번으로 미뤄진다. */
.gal-more__end {
  margin: var(--space-10) 0 var(--space-5);
  max-width: none;   /* 전역 p{max-width:36rem} 때문에 마감선이 절반만 그어졌다 */
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule-strong);
  text-align: center;
  color: var(--color-text-caption);
}
.gal-more { margin-top: 0; }
.gal-more > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: 56px; padding: 0 var(--space-6);
  border: 1px solid var(--rule-strong);
  border-bottom: 3px solid var(--color-highlight);   /* 페이지 끝에서 묻히지 않게 라임 한 줄 */
  border-radius: var(--radius-sm);
  background: var(--white);
  font-weight: var(--fw-bold); color: var(--color-primary);
  text-align: center;
}
.gal-more > summary::-webkit-details-marker { display: none; }
.gal-more > summary span {
  font-size: 0.875rem; font-weight: var(--fw-regular); color: var(--color-text-caption);
  font-variant-numeric: tabular-nums;
}
.gal-more > summary::after { content: "▾"; font-size: 0.8125rem; }
.gal-more[open] > summary::after { content: "▴"; }
.gal-more__lead {
  margin: 0 0 var(--space-6);
  max-width: none;
  text-align: center;
  color: var(--color-text-caption);
}
.gal-more__body { margin-top: var(--space-8); }

/* ── 달력 공휴일 (2026-08-20) ──────────────────────────────────────────
   오너 지적: "빨간날이 표기가 안 되니 너무 없어 보인다."
   날짜는 data/holidays.json 에서 온다 — 음력 명절과 대체공휴일은 해마다 달라
   손으로 적으면 반드시 틀린다. 출처와 갱신법은 그 파일 머리말에.

   한국 달력 관행대로 공휴일과 일요일은 빨강, 토요일은 파랑.
   ★ 일정이 없는 날은 <button disabled> 라 흐리게 깔린다. 공휴일 색이 그것에 지지 않도록
     disabled 보다 뒤에 두고 색을 직접 지정한다. */
.cal__cell--sun > span:first-child,
.cal__cell--hol > span:first-child { color: var(--danger-600); font-weight: var(--fw-bold); }
.cal__cell--sat > span:first-child { color: var(--color-link); }
/* 인접 달은 이번 달과 위계를 나눠야 하므로 빨강도 흐리게 */
.cal__cell--other > span:first-child { color: var(--gray-600); font-weight: var(--fw-regular); }
.cal__cell--other.cal__cell--hol > span:first-child,
.cal__cell--other.cal__cell--sun > span:first-child { color: #BF4A44; }   /* 흰 배경 4.9:1 — #C98A8A 는 2.8:1 로 AA 미달이었다 */

/* 이달의 공휴일 한 줄 — 칸 안에 이름을 넣으려니 11px 까지 내려갔다.
   주 사용층이 60대 이상이라 12px 미만은 쓰지 않는다(렌더 검수가 잡는다).
   칸에서는 숫자만 빨갛게 하고, 이름은 여기서 읽을 수 있는 크기로 보여 준다. */
.cal__hols {
  max-width: none;
  margin: var(--space-3) 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  font-size: 0.9375rem;
  color: var(--color-text-caption);
}
.cal__hols b { color: var(--danger-600); font-variant-numeric: tabular-nums; }
.cal__hols-label {
  font-weight: var(--fw-bold); color: var(--color-primary);
  margin-right: var(--space-1);
}
.cal__hols-sep { color: var(--rule-strong); }
.sched__holtag {
  margin-left: var(--space-2);
  font-size: 0.875rem; font-weight: var(--fw-bold);
  color: var(--danger-600);
}
.cal__legend-hol::before {
  content: "";
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--danger-600);
  display: inline-block;
}

/* ── 다가오는 일정 「더 보기」 (2026-08-20) ────────────────────────────
   오너 지적: 하단 스크롤이 너무 길다. 앞의 다섯 건만 펼치고 나머지는 접는다.
   자르는 것이 아니라 접는 것이다 — 끝까지 볼 길은 남겨 둔다. */
.sched__more { margin-top: var(--space-4); }
.sched__more > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-weight: var(--fw-bold); color: var(--color-primary);
  font-size: 0.9375rem;
}
.sched__more > summary::-webkit-details-marker { display: none; }
.sched__more > summary::after { content: "▾"; font-size: 0.8125rem; }
.sched__more[open] > summary::after { content: "▴"; }
.sched__more[open] > summary { margin-bottom: var(--space-2); }

/* ── 통계 밴드와 집계 주석을 한 덩어리로 (2026-08-20) ──────────────────
   오너 지적: "위는 둥근데 아래는 각져서 붙어 있으니 어색하다."
   원인 — .stats 는 radius-md 로 둥근 네이비 상자인데, 바로 아래 .stat__asof 가
   같은 네이비 배경에 각진 띠로 붙어 두 도형이 어긋난 채 맞물려 있었다.
   → 주석을 상자 안으로 들여 하나의 도형으로 만든다. 감싸는 자리에만 적용되므로
     주석 없이 쓰는 다른 통계 밴드는 그대로다. */
.statblock { border-radius: 14px; overflow: hidden; }   /* .stats 의 14px 과 같은 값 */
.statblock .stats { margin-top: 0; }
.statblock .stats { border-radius: 0; border: 0; }
.statblock .stat__asof {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-navy);
  color: var(--color-text-on-navy-sub);
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: right;
}
@media (max-width: 767px) { .statblock .stat__asof { text-align: center; } }

/* ── 목록 불릿이 상자 밖으로 나오던 문제 (2026-08-20) ──────────────────
   오너 지적: "왼쪽 점 라인들이 줄에 튀어나와 있다."
   원인 — `list-style-position: outside` 인 마커는 li 의 content box **왼쪽 바깥**에
   그려진다. ul 의 padding-inline-start 를 1.1~1.2em 으로 좁혀 두었더니
   그 자리가 모자라 마커가 카드·패널 테두리를 넘어 나갔다.
   → 자리를 1.6em 으로 넓혔다(16px 본문에서 25.6px, 18px 에서 28.8px).
   `tools/check-list-markers.mjs` 가 실제 브라우저로 전 페이지를 재서 다시 좁아지면 잡는다.

   ⚠️ `list-style-position: inside` 로 바꾸는 방법은 쓰지 않았다 — 두 줄 넘어가는 항목에서
      둘째 줄이 마커 아래로 파고들어 글머리 정렬이 무너진다. 이 사이트 목록은 대부분 두 줄이다. */