/* ==========================================================================
   골만사 — 사이트 컴포넌트 (tokens.css 다음에 로드)
   토큰 값을 여기서 하드코딩으로 덮어쓰지 말 것
   ========================================================================== */

/* ── 접근성 ────────────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-primary); color: var(--white);
  padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--fw-bold);
}
.skip:focus { left: 0; }

/* ── 헤더 ──────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 64px;
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: none; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: var(--fw-bold); color: var(--color-primary); font-size: 1.1875rem; }
.brand__sub { font-size: 0.75rem; color: var(--color-text-muted); letter-spacing: .02em; }

.nav { display: none; gap: var(--space-6); }
@media (min-width: 768px) { .nav { display: flex; } }
.nav a {
  text-decoration: none; color: var(--color-text); font-weight: var(--fw-bold);
  font-size: var(--fs-ui); padding: var(--space-2) 0;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--color-primary); }
.nav a[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-highlight); }

/* 회원 로그인 버튼 (참여형 2단계에서 사용 — partials/header.html 주석 참조) */
.header__login {
  flex: none; text-decoration: none;
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--color-primary); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: 10px var(--space-4);
  min-height: 44px; display: inline-flex; align-items: center;
}

/* ── 하단 네비 (모바일) ────────────────────────────────────────────── */
.tabbar {
  /* left/right 를 반드시 같이 쓴다. inset-inline 만 두면 이를 모르는 브라우저에서
     width 가 shrink-to-fit(콘텐츠 폭)이 되어 마지막 항목이 화면 밖으로 나간다.
     실제로 4번째 '사진' 탭이 사라지는 증상이 있었다. */
  position: fixed; left: 0; right: 0; inset-inline: 0; bottom: 0;
  width: 100%; z-index: var(--z-bottombar);
  display: flex; background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-bar);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 768px) { .tabbar { display: none; } }
.tabbar a {
  /* min-width: 0 이 없으면 라벨이 긴 항목(우리 이야기)이 칸을 밀어내
     마지막 항목이 화면 밖으로 잘린다 */
  flex: 1 1 0; min-width: 0; min-height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none;
  font-size: 0.8125rem; font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  white-space: nowrap; padding-inline: 2px; overflow: hidden;
}
.tabbar a[aria-current="page"] { color: var(--color-primary); }
.tabbar svg { width: 22px; height: 22px; }
/* 탭바 실제 높이 = 58px + iOS 홈 인디케이터 영역(env). 58px 만 비우면
   그 차이만큼 푸터 마지막 줄이 탭바 뒤로 들어간다. 헤드리스 브라우저는 env() 를
   0 으로 계산하므로 자동 검수로는 잡히지 않고 실기기에서만 보인다. */
body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body { padding-bottom: 0; } }

/* ── 히어로 ────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  min-height: 72vh; display: grid; align-items: end;
  /* 책자 대각선 밴드를 면의 마감 모티프로만 계승 (최대 2곳 중 1) */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diagonal-h)), 0 100%);
  padding-bottom: var(--diagonal-h);
}
@media (min-width: 768px) { .hero { min-height: 62vh; } }
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero::after { z-index: -1; }
/* width:100% 가 없으면 배너 글이 본문 정렬선 밖으로 밀려난다 (외부 점검 2026-08-20, 🔴1).
   .hero 가 grid 인데 자식 .container 는 margin-inline:auto 를 가진다. grid 자식의 auto 마진은
   기본값 stretch 를 이기므로 박스가 fit-content 로 줄고 가운데로 밀린다. 그러면 배너 폭이
   「그 페이지 제목 글자 수」에 따라 정해져 페이지마다 시작 위치가 달라진다.
   실측 @1440: 배너 left 506 vs 본문 160 = 346px 어긋남 (5개 페이지 전부, 296~346px). */
.hero__body { padding-block: var(--space-16) var(--space-10); width: 100%; }
.hero__eyebrow {
  display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--color-highlight); letter-spacing: .06em; margin-bottom: var(--space-3);
}
.hero__title { margin: 0 0 var(--space-4); text-wrap: balance; }
.hero__lead {
  color: var(--white); font-size: var(--fs-lg); max-width: 30ch;
  margin: 0;
}

/* ── 하위 페이지 진입 배너 ─────────────────────────────────────────────
   제목 한 줄만 놓고 96px 패딩을 주면 화면 절반이 빈 공간이 된다.
   페이지를 열자마자 무슨 페이지인지가 시각적으로 보여야 한다. */
.pagehead {
  position: relative; isolation: isolate;
  min-height: 300px; display: grid; align-items: end;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diagonal-h)), 0 100%);
  padding-bottom: var(--diagonal-h);
}
@media (min-width: 768px) { .pagehead { min-height: 360px; } }
.pagehead__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.pagehead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--scrim-hero);
}
/* .hero__body 와 같은 이유로 width:100% (외부 점검 2026-08-20, 🔴1) */
.pagehead__body { padding-block: var(--space-12) var(--space-8); width: 100%; }
.pagehead__eyebrow {
  display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--color-highlight); letter-spacing: .06em; margin-bottom: var(--space-2);
}
.pagehead h1 {
  color: var(--white); font-size: var(--fs-3xl);
  margin: 0 0 var(--space-3); text-wrap: balance;
}
.pagehead__lead {
  color: var(--white); font-size: var(--fs-lg);
  margin: 0; max-width: 34ch; opacity: .95;
}

/* ── 슬로건 ────────────────────────────────────────────────────────── */
.slogan-band { background: var(--color-surface-alt); padding-block: var(--space-10); }
.slogan { margin: 0; max-width: none; text-align: center; font-size: var(--fs-xl); }

/* ── 통계 ──────────────────────────────────────────────────────────── */
.stats-wrap { position: relative; }

/* ── 섹션 공통 ─────────────────────────────────────────────────────── */
.section__lead { color: var(--color-text-muted); margin-bottom: var(--space-8); }
.wave { display: block; width: 68px; height: auto; margin-bottom: var(--space-4); }
.wave path { fill: var(--color-primary); }

.grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.routine__when {
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--color-text-muted); letter-spacing: .04em;
}
.routine__what {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  color: var(--color-primary); margin: var(--space-1) 0 var(--space-2);
}
.routine__note { font-size: var(--fs-ui); color: var(--color-text-muted); margin: 0; max-width: none; }

/* ── 일정 ──────────────────────────────────────────────────────────── */
.sched__toggle {
  display: inline-flex; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-6);
}
.sched__toggle button {
  min-height: 48px; padding-inline: var(--space-6);
  font-size: var(--fs-ui); font-weight: var(--fw-bold);
  background: var(--color-surface); color: var(--color-text-muted);
  border: 0; cursor: pointer;
}
.sched__toggle button[aria-pressed="true"] {
  background: var(--color-primary); color: var(--white);
}

.sched__group { margin-bottom: var(--space-10); }
.sched__group-title {
  font-size: var(--fs-ui); font-weight: var(--fw-bold);
  color: var(--color-text-muted); letter-spacing: .04em;
  padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.sched__item {
  display: grid; gap: var(--space-1);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider);
}
.sched__item:last-child { border-bottom: 0; }
.sched__date {
  font-size: var(--fs-ui); font-weight: var(--fw-bold); color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.sched__dday { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.sched__name { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.sched__place { font-size: var(--fs-ui); color: var(--color-text-muted); }
.sched__item--today {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md); padding: var(--space-5); border-bottom: 0;
}
.sched__empty {
  padding: var(--space-8) var(--space-5); text-align: center;
  background: var(--color-surface-alt); border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.sched__empty p { max-width: none; margin: 0; }

/* 월 달력 — 칸이 49px밖에 안 나오므로 글자 대신 점만 찍는다 */
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.cal__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-primary); margin: 0; }
.cal__nav { display: flex; gap: var(--space-2); }
.cal__nav button {
  /* width 고정이면 '오늘' 두 글자가 세로로 깨진다 */
  min-width: 48px; height: 48px; padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: var(--color-surface);
  color: var(--color-primary); font-size: 1.0625rem; font-weight: var(--fw-bold);
  white-space: nowrap; cursor: pointer;
}
.cal__nav button[data-cal-prev],
.cal__nav button[data-cal-next] { font-size: 1.375rem; padding-inline: 0; }
/* 달력은 넓힌다고 좋아지지 않는다. 한 칸이 커지면 날짜 사이 거리가 멀어져
   오히려 훑기 어려워진다. 폭을 묶고 칸 높이는 고정값으로 잡는다. */
.cal { max-width: 520px; }
.cal__grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px; align-items: stretch;
}
.cal__dow {
  text-align: center; font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--color-text-muted); padding-bottom: var(--space-2);
}
.cal__dow:first-child { color: var(--danger-600); }        /* 일요일 */
.cal__dow:last-child { color: var(--color-link); }         /* 토요일 */
.cal__cell {
  /* aspect-ratio:1 을 쓰면 데스크톱에서 칸이 160px 정사각이 되어 세로로 늘어진다 */
  min-height: 46px; padding: 4px 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--radius-xs); background: var(--color-surface);
  font-size: var(--fs-ui); font-variant-numeric: tabular-nums;
  border: 0; cursor: default; color: var(--color-text);
}
@media (min-width: 480px) { .cal__cell { min-height: 54px; } }
/* 지난달·다음달 날짜. 테두리색(gray-300)을 글자에 써서 1.5:1 이었다 — 읽히지 않는다.
   구분은 색의 진하기가 아니라 위계로 준다: 이번 달은 본문색, 인접 달은 보조 텍스트색. */
.cal__cell--other { color: var(--gray-600); }   /* 5.96:1 */
.cal__cell--has { cursor: pointer; }
.cal__cell--today { background: var(--color-surface-sunken); font-weight: var(--fw-bold); }
.cal__cell[aria-pressed="true"] { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.cal__dots { display: flex; gap: 3px; min-height: 8px; }
.cal__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.cal__dot--major { background: var(--color-primary); }
.cal__legend {
  display: flex; gap: var(--space-5); flex-wrap: wrap;
  margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--color-text-muted);
}
.cal__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ── 갤러리 ────────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }
.gallery a { display: block; border-radius: var(--radius-sm); overflow: hidden; }
.gallery a:focus-visible { outline-offset: 3px; }

/* ── 인용 ──────────────────────────────────────────────────────────── */
.quotebox { border-left: 3px solid var(--color-highlight); padding-left: var(--space-5); }
.quotebox p { font-size: var(--fs-lg); color: var(--color-text-strong); margin-bottom: var(--space-2); }
.quotebox cite { font-size: var(--fs-caption); color: var(--color-text-muted); font-style: normal; }

/* ── 오늘의 명언 ───────────────────────────────────────────────────── */
.today {
  background: var(--color-surface-navy); color: var(--color-text-on-navy);
  border-radius: var(--radius-md); overflow: hidden; display: grid;
}
@media (min-width: 768px) { .today { grid-template-columns: 1fr 1fr; } }
.today__img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; display: block; }
.today__body { padding: var(--space-8) var(--space-6); }
.today__label {
  font-size: var(--fs-caption); font-weight: var(--fw-bold);
  color: var(--color-highlight); letter-spacing: .06em;
  display: block; margin-bottom: var(--space-4);
}
.today__quote {
  font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.5;
  color: var(--white); margin: 0 0 var(--space-4); text-wrap: balance; max-width: none;
}
.today__who { font-size: var(--fs-ui); color: var(--color-text-on-navy-sub); margin: 0; max-width: none; }
.today__more {
  display: inline-block; margin-top: var(--space-6);
  color: var(--color-highlight); font-weight: var(--fw-bold); font-size: var(--fs-ui);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}
.today__list { margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.today__list[hidden] { display: none; }
.today__list li {
  color: var(--color-text-on-navy-sub); font-size: var(--fs-ui);
  margin-bottom: var(--space-4); line-height: 1.6;
}
.today__list b { color: var(--white); font-weight: var(--fw-bold); display: block; }

/* ── 문의 ──────────────────────────────────────────────────────────── */
.join { text-align: center; }
.join__policy { font-size: var(--fs-lg); max-width: 26ch; margin-inline: auto; }
.join__mail {
  display: inline-block; margin-top: var(--space-2);
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-primary);
}

/* ── 푸터 ──────────────────────────────────────────────────────────── */
.footer__inner { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
.footer p { max-width: none; }
.footer__name { font-weight: var(--fw-bold); font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.footer__meta { color: var(--color-text-on-navy-sub); margin: 0; }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.footer__nav a { font-weight: var(--fw-bold); }
.footer__notes { grid-column: 1 / -1; font-size: var(--fs-caption); line-height: 1.7; }
.footer__notes p { color: var(--color-text-on-navy-sub); margin-bottom: var(--space-2); }
.footer__dim { opacity: .8; }

/* ── 타임라인 (연혁) ───────────────────────────────────────────────── */
.tl { position: relative; padding-left: var(--space-6); border-left: 2px solid var(--color-border-strong); }
.tl__item { position: relative; padding-bottom: var(--space-8); }
.tl__item::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-6) - 6px); top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong);
}
.tl__item--major::before {
  left: calc(-1 * var(--space-6) - 8px); top: 6px;
  width: 12px; height: 12px; background: var(--color-highlight);
}
.tl__year {
  font-size: 1.375rem; font-weight: var(--fw-bold); color: var(--color-primary);
  font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--space-2);
}
.tl__item ul { margin: 0; padding-left: 1.6em; }
.tl__item li { margin-bottom: var(--space-2); }

/* ── 운영진 명단 ───────────────────────────────────────────────────── */
.staff { display: grid; gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.staff__row {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-4);
  background: var(--color-surface); padding: var(--space-4) var(--space-5);
  align-items: baseline;
}
@media (min-width: 640px) { .staff__row { grid-template-columns: 120px minmax(0, 1fr); } }
.staff__role { font-weight: var(--fw-bold); color: var(--color-primary); font-size: var(--fs-ui); }
.staff__names { color: var(--color-text); line-height: 1.8; }

/* ── 회칙 ──────────────────────────────────────────────────────────── */
.rules__section {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: var(--space-3); background: var(--color-surface);
}
.rules__title {
  cursor: pointer; padding: var(--space-4) var(--space-5);
  font-weight: var(--fw-bold); color: var(--color-primary); font-size: var(--fs-ui);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  min-height: 56px;
}
.rules__count { font-size: var(--fs-caption); color: var(--color-text-muted); font-weight: var(--fw-regular); flex: none; }
.rules__list { margin: 0; padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 1.6em); }
.rules__list li { margin-bottom: var(--space-3); line-height: 1.75; }

/* ── 본문 문서(처리방침 등) ────────────────────────────────────────── */
.doc h2 { margin-top: var(--space-12); }
.doc h3 { margin-top: var(--space-8); font-size: var(--fs-lg); }
.doc ul, .doc ol { max-width: var(--measure); padding-left: 1.6em; }
.doc li { margin-bottom: var(--space-2); }

/* 문서 본문 링크의 손가락 자리 (2026-08-20).
   처리방침에 요청 창구를 넣으면서 인라인 링크가 늘었는데 터치 높이가 24px 였다 —
   프로젝트 기준 --tap-min 48px, WCAG 2.5.5 는 44px. 주 사용층이 60대 이상이라
   「인라인 링크는 예외」라는 규정에 기대지 않는다.
   패딩으로 손가락 자리를 만들고 같은 크기의 음수 마진으로 되돌린다 —
   글자가 놓인 위치는 1px 도 움직이지 않고 누를 수 있는 넓이만 커진다.
   (min-height 나 inline-block 은 줄 간격을 무너뜨려 문단이 깨진다.) */
.doc p a, .doc li a {
  padding-block: 12px;
  margin-block: -12px;
}
.doc__updated { color: var(--color-text-caption); font-size: var(--fs-caption); }

/* ── 404 ───────────────────────────────────────────────────────────── */
.notfound { text-align: center; padding-block: var(--space-24); }
.notfound__code {
  font-size: var(--fs-stat); font-weight: var(--fw-bold);
  color: var(--color-border-strong); line-height: 1; display: block;
}