@charset "utf-8";
/* ============================================================
   client 공통 스타일 — 토큰과 공통 부품이 사는 곳(공통 CSS 한 벌).
   페이지 전용은 css/pages/*.css 에 두고 여기 정한 토큰만 쓴다.

   이 사이트는 영어 한 벌이라 라틴 글꼴(Pretendard Std) 한 벌만 싣는다. 한글 조각 글꼴은 뺐다.
   font-display 는 optional — 제때 못 오면 그 화면은 시스템 글꼴로 끝까지 가고 도중에 바꾸지 않는다.
   ============================================================ */
@font-face {
  font-family: "Pretendard Std Variable";
  font-style: normal;
  font-weight: 45 920;
  font-display: optional;
  src: url("../fonts/pretendard-std/PretendardStdVariable.woff2") format("woff2-variations");
}

/* 웹폰트가 도착하기 전에 쓰이는 시스템 글꼴. 줄 높이 지표를 Pretendard 와
   똑같이 맞춰 둔다(원본 hhea: ascent 1950 / descent -494 / upem 2048).
   이렇게 해야 글꼴이 바뀌는 순간 줄 높이가 안 변하고, 문서 길이도 그대로다.
   문서 길이가 변하면 브라우저가 스크롤을 되돌려 화면이 밀린다. */
@font-face {
  font-family: "Pretendard Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  ascent-override: 95.21%;
  descent-override: 24.12%;
  line-gap-override: 0%;
}

/* ============================================================
   디자인 토큰 — 색·치수는 여기에만 정의한다. 페이지 CSS 는 var() 로만 쓴다.
   방향(docs/main-site.md, 2026-09-29 메인 재디자인): 기획안의 청록 계열을 짙은 청록(브랜드)으로 두고,
   포인트는 부인암 인식 색인 보라(iris)로 바꿨다 — 남색·금색의 kaslald 와 갈라지게 한다.
   구역은 경계선과 연한 바탕면으로 나누고, 그림자는 떠 있는 상자(받침·드롭다운·팝업)에만 쓴다.
   마우스를 올려 떠오른 카드도 그동안은 떠 있는 상자로 보고 옅은 그림자(--shadow-hover)를 깐다.
   ============================================================ */
:root {
  --color-brand: #0b5257;
  --color-brand-dark: #08434a;
  --color-brand-deep: #062c31;
  --color-brand-soft: #e5f1f0;
  --color-accent: #5b4bc4;
  --color-accent-light: #c3bbf4;
  --color-accent-dark: #4636a8;
  --color-accent-soft: #f1effc; /* 차분한 바탕면 — 옅은 보라 */
  --color-accent-line: #dcd6f6;

  --color-text: #15232a;
  --color-text-sub: #46545c;
  --color-text-muted: #75838b;
  --color-line: #e0e7e8;
  --color-line-strong: #c6d2d4;
  --color-bg: #ffffff;
  --color-bg-soft: #f4f8f8;
  --color-on-dark: #ffffff;
  --color-on-dark-sub: #bcd0d2;
  --color-on-dark-line: rgba(255, 255, 255, 0.18);
  --color-danger: #c0392b;
  --color-danger-soft: #fbeeec;

  --font-sans: "Pretendard Std Variable", "Pretendard Fallback",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-hero: 44px;
  --fs-h2: 28px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xs: 13px;

  --container: 1200px;
  --pad-x: 24px;
  --section-y: 60px;
  --util-h: 36px;
  --header-h: 100px;
  --radius: 6px;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* 스크롤 등장 연출. 대한신경면역학회 메인과 같은 속도다(docs/main-site.md) */
  --reveal-dur: 0.6s;
  --reveal-step: 120ms;
  --reveal-shift: 32px;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* 히어로 위 글자 뒤에 까는 어둠. 왼쪽이 짙고 오른쪽으로 걷힌다 */
  --hero-shade: linear-gradient(90deg, rgba(6, 44, 49, 0.92) 0%, rgba(6, 44, 49, 0.7) 45%, rgba(6, 44, 49, 0) 80%);
  /* 메인 배너는 그늘 방향을 배너마다 고른다(admin 히어로 배너). 왼쪽은 위의 --hero-shade 다 */
  --hero-shade-right: linear-gradient(270deg, rgba(6, 44, 49, 0.92) 0%, rgba(6, 44, 49, 0.7) 45%, rgba(6, 44, 49, 0) 80%);
  /* 눈에 띄게 그리는 화면(SiteMenu featured — Event Registration)의 하위 화면 머리: 보라 그늘과 둥근 고리 */
  --hero-shade-featured: linear-gradient(90deg, rgba(37, 27, 104, 0.95) 0%, rgba(70, 54, 168, 0.86) 45%, rgba(91, 75, 196, 0.42) 100%);
  --hero-ring-1: rgba(255, 255, 255, 0.06);
  --hero-ring-2: rgba(255, 255, 255, 0.035);
  --color-accent-pulse: rgba(91, 75, 196, 0.45);
  --hero-shade-center: linear-gradient(90deg, rgba(6, 44, 49, 0) 5%, rgba(6, 44, 49, 0.7) 30%, rgba(6, 44, 49, 0.88) 50%, rgba(6, 44, 49, 0.7) 70%, rgba(6, 44, 49, 0) 95%);
  /* 사진 아래쪽 캡션 뒤에 까는 어둠 */
  --photo-shade: linear-gradient(180deg, rgba(6, 44, 49, 0) 40%, rgba(6, 44, 49, 0.88) 100%);
  /* 떠 있는 상자(메인 팝업)에만 쓰는 그림자. 그 밖에는 그림자를 쓰지 않는다(docs/main-site.md 설계 원칙) */
  --shadow-float: 0 12px 32px rgba(6, 44, 49, 0.22);
  /* 호버 연출(docs/main-site.md "호버 연출과 화면 움직임") — 카드는 --hover-lift 만큼 떠오르며 --shadow-hover 를 깔고, 단추는 --shadow-btn 을 깐다.
     박자(--hover-dur)와 높이는 화면마다 다르게 정하지 않는다 */
  --shadow-hover: 0 18px 36px -22px rgba(6, 44, 49, 0.5);
  --shadow-btn: 0 10px 20px -12px rgba(6, 44, 49, 0.6);
  --hover-dur: 0.3s;
  --hover-lift: -4px;
  /* ── 학술대회 사전등록 미니사이트(congress.css) 전용 ──
     본 사이트(남색·금색)와 다른 행사 사이트로 보이게, 실제 심포지엄 포스터의 민트·청록·하늘색을 쓴다(docs/congress.md) */
  --cg-ink: #0b3440;
  --cg-ink-sub: #4d6770;
  --cg-primary: #0e7c86;
  --cg-primary-dark: #0a5f67;
  --cg-aqua: #2bb3a3;
  --cg-sky: #3d8fd6;
  --cg-violet: #6d6bd8;
  --cg-coral: #e0765f;
  --cg-bg: #f3f8f9;
  --cg-mint: #e3f4f2;
  --cg-sky-soft: #e6effb;
  --cg-line: #d8e7e8;
  --cg-card: #ffffff;
  --cg-gradient: linear-gradient(120deg, #0e7c86 0%, #2b9ec4 55%, #3d8fd6 100%);
  --cg-page-bg: linear-gradient(180deg, #eef7f7 0%, #f5f8fc 420px, #f6f9fb 100%);
  --cg-shadow: 0 10px 30px -18px rgba(11, 52, 64, 0.35);
  --cg-shadow-hover: 0 16px 36px -18px rgba(14, 124, 134, 0.55);
  --cg-hero-shade: linear-gradient(90deg, rgba(247, 251, 251, 0.96) 0%, rgba(247, 251, 251, 0.82) 42%, rgba(247, 251, 251, 0) 72%);
  /* 위지윅 에디터(CKEditor) 형광펜·글자색. 에디터 기본색과 같게 둬야 관리 화면에서 본 대로 나온다. */
  --cg-marker-yellow: #fdfd77;
  --cg-marker-green: #62f962;
  --cg-marker-pink: #fc7899;
  --cg-marker-blue: #72ccfd;
  --cg-pen-red: #e71313;
  --cg-pen-green: #128a00;

  /* 카드 구석에서 번지는 금빛 */
  --gold-glow: radial-gradient(circle at 100% 100%, rgba(176, 141, 87, 0.45) 0%, rgba(176, 141, 87, 0) 55%);

  /* ── 메인(pages/home.css)과 머리·바닥 ── */
  --radius-lg: 18px;
  /* 떠 있는 받침(메인 바로가기)·드롭다운에 까는 옅은 그림자 */
  --shadow-tray: 0 18px 40px -22px rgba(6, 44, 49, 0.45);
  /* 머리 색 판 위의 가는 사선 무늬와 오른쪽 아래에서 번지는 보라 빛 */
  --feature-texture: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 14px);
  --feature-glow: radial-gradient(circle at 100% 100%, rgba(91, 75, 196, 0.55) 0%, rgba(91, 75, 196, 0) 60%);
  /* 메인 칸·카드의 옅은 바탕색. 청록·보라에 장밋빛·호박색을 더해 칸마다 다른 색을 준다(docs/main-site.md) */
  --color-rose: #a8466d;
  --color-rose-soft: #fbedf2;
  --color-rose-line: #f1d3de;
  --color-amber: #a8660f;
  --color-amber-soft: #fdf3e2;
  --color-amber-line: #f3dfba;
  --color-brand-line: #c9e2df;
}

@media (max-width: 1023px) {
  :root {
    --fs-hero: 36px;
    --fs-h2: 24px;
    --section-y: 52px;
    --header-h: 84px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-hero: 28px;
    --fs-h2: 22px;
    --fs-body: 15px;
    --pad-x: 16px;
    --section-y: 44px;
    --header-h: 72px;
  }
}

/* ============================================================
   기본
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 한 요소가 넘쳐도 화면 전체가 옆으로 밀려 헤더 오른쪽(전체메뉴 버튼)이 잘리지 않게 한다.
     hidden 과 달리 clip 은 스크롤 영역을 만들지 않아 헤더의 sticky 가 그대로 동작한다 */
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--pad-x) * 2);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.skip-nav {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--color-brand);
  color: var(--color-on-dark);
}
.skip-nav:focus { top: 8px; }

/* 화면에는 안 보이고 화면 낭독기만 읽는다 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   공통 부품 — 버튼 · 더보기 · 섹션 머리
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease),
    box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
/* 칠한 단추는 호버 때 1px 떠오르고, 누르는 순간 살짝 눌린다 */
.btn--solid { background: var(--color-brand); color: var(--color-on-dark); }
.btn--solid:hover { background: var(--color-brand-dark); box-shadow: var(--shadow-btn); transform: translateY(-1px); }
.btn--line { border-color: var(--color-line-strong); color: var(--color-text); }
.btn--line:hover { border-color: var(--color-brand); color: var(--color-brand); }
.btn--gold { background: var(--color-accent); color: var(--color-on-dark); }
.btn--gold:hover { background: var(--color-accent-dark); box-shadow: var(--shadow-btn); transform: translateY(-1px); }
.btn--ghost { border-color: var(--color-on-dark-line); color: var(--color-on-dark); }
.btn--ghost:hover { border-color: var(--color-on-dark); background: var(--color-on-dark-line); }
.btn:active { box-shadow: none; transform: scale(0.98); }
/* 보내는 중에 잠긴 단추(FormUtils)는 떠오르거나 눌리지 않는다 */
.btn:disabled { box-shadow: none; transform: none; }
/* 저장 잠금(FormUtils — <form data-dirty>): 고친 것이 없으면 단추를 흐리게 하고 곁에 까닭을 적는다 */
.btn.is-dirty-locked { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.dirty-hint { align-self: center; font-size: var(--fs-xs); color: var(--color-text-muted); }

.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  transition: color 0.2s var(--ease);
}
.more::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.more:hover { color: var(--color-brand); }
/* 화살표가 가는 쪽으로 한 걸음 */
.more:hover::after { transform: translateX(3px) rotate(45deg); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}

.chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 600;
}
.chip--gold { background: var(--color-accent); color: var(--color-on-dark); }
/* 샘플 글 표시(정식 오픈 때 글과 함께 사라진다). 분류 칩과 헷갈리지 않게 바탕 없이 점선 테두리만 */
.chip--sample { border: 1px dashed currentColor; background: transparent; color: var(--color-text-muted); }

.section-head { margin-bottom: 32px; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.section-head__title {
  margin-top: 8px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}

/* ============================================================
   헤더 — 유틸줄 + 로고·GNB
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
}

/* 유틸줄 — 짙은 청록 띠. 왼쪽은 네 그룹 한 줄, 오른쪽은 로그인·가입(가입은 보라 알약) */
.util {
  height: var(--util-h);
  background: var(--color-brand-deep);
  color: var(--color-on-dark-sub);
  font-size: var(--fs-xs);
}
.util__inner { display: flex; align-items: center; height: 100%; gap: 20px; }
.util__tag { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0.02em; }
.util__list { margin-left: auto; display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.util__list a, .util__list button { transition: color 0.2s var(--ease), background-color 0.2s var(--ease); }
.util__list a:hover, .util__list button:hover { color: var(--color-on-dark); }
.util__name { color: var(--color-on-dark); }
.util__logout { margin: 0; }
.util__join { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--color-accent); color: var(--color-on-dark); font-weight: 600; }
.util__list .util__join:hover { background: var(--color-accent-dark); }

.header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: 32px;
}
.header__logo { flex: none; }
/* 로고는 지금 사이트 로고를 벡터로 다시 그린 SVG(docs/logo.md). 글자(EAGOT)가 위쪽에, 점 지도가 아래로 길게 내려와
   그대로 가운데에 두면 글자가 위로 붙어 보인다. 머리 높이에 여유를 두고 로고를 조금 내려 글자와 메뉴의 높이를 맞춘다 */
.header__logo img { display: block; width: auto; height: 60px; transform: translateY(3px); }
.gnb { margin-left: auto; height: 100%; }
.gnb__list { display: flex; height: 100%; }
.gnb__item { position: relative; display: flex; align-items: center; }
/* 대메뉴 이름이 길다(Publication and Resources). 한 줄에서 줄바꿈하지 않게 nowrap 으로 두고,
   여섯 개가 로고 옆에 다 들어가지 않는 폭(1279px 이하)에서는 전체메뉴 단추로 바꾼다(아래 미디어 쿼리). */
.gnb__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  font-size: 16px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-text);
  transition: color 0.2s var(--ease);
}
.gnb__link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease);
}
.gnb__item:hover .gnb__link,
.gnb__item:focus-within .gnb__link { color: var(--color-brand); }
.gnb__item:hover .gnb__link::after,
.gnb__item:focus-within .gnb__link::after { transform: scaleX(1); }

.gnb__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 200px;
  padding: 10px 0;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow-tray);
  /* 열릴 때 8px 위에서 내려앉는다 */
  transform: translate(-50%, -8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0.2s var(--ease), transform 0.25s var(--ease);
}
.gnb__item:hover .gnb__sub,
.gnb__item:focus-within .gnb__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* 맨 오른쪽 메뉴(Education)의 드롭다운은 가운데에 두면 1280 폭에서 화면 밖으로 나가 오른쪽 끝에 맞춘다 */
.gnb__item:last-child .gnb__sub { left: auto; right: 0; transform: translateY(-8px); }
.gnb__item:last-child:hover .gnb__sub,
.gnb__item:last-child:focus-within .gnb__sub { transform: none; }
.gnb__sub a {
  display: block;
  padding: 8px 22px;
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* 호버한 줄은 옅은 보라 바탕에 왼쪽 보라 띠 */
.gnb__sub a:hover { color: var(--color-accent-dark); background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent); }
/* 눈에 띄게 그리는 메뉴(SiteMenu featured, 2026-10-14) — 대메뉴 Meeting 은 보라 글자와 깜박이는 점,
   그 아래 Event Registration 은 보라 단추. 사전등록으로 가는 길을 다른 메뉴와 가른다 */
.gnb__item--featured .gnb__link,
.gnb__item--featured:hover .gnb__link,
.gnb__item--featured:focus-within .gnb__link { color: var(--color-accent-dark); }
.gnb__item--featured .gnb__link::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: featured-pulse 2.4s var(--ease) infinite;
}
@keyframes featured-pulse {
  0% { box-shadow: 0 0 0 0 var(--color-accent-pulse); }
  70%, 100% { box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .gnb__item--featured .gnb__link::before { animation: none; }
}
.gnb__sub a.gnb__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 12px 2px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-weight: 700;
}
.gnb__sub a.gnb__cta::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.gnb__sub a.gnb__cta:hover { color: var(--color-on-dark); background: var(--color-accent-dark); box-shadow: none; }
.gnb__sub a.gnb__cta:hover::after { transform: translateX(3px) rotate(45deg); }
/* 셋째 단계 — 둘째 단계 항목(Disease Site Committee) 아래에 들여 쓰고 왼쪽에 가는 줄을 긋는다 */
.gnb__sub2 { margin: 0 22px 6px 30px; border-left: 1px solid var(--color-line); }
.gnb__sub .gnb__sub2 a { padding: 6px 16px; font-size: var(--fs-xs); }

.header__menu {
  display: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
}
.header__menu-bar,
.header__menu-bar::before,
.header__menu-bar::after {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
/* 전체메뉴 단추 — 호버 때 청록으로, 위아래 줄이 조금 벌어진다 */
.header__menu:hover .header__menu-bar,
.header__menu:hover .header__menu-bar::before,
.header__menu:hover .header__menu-bar::after { background: var(--color-brand); }
.header__menu:hover .header__menu-bar::before { transform: translateY(-1px); }
.header__menu:hover .header__menu-bar::after { transform: translateY(1px); }
.header__menu-bar { top: 19px; }
.header__menu-bar::before, .header__menu-bar::after { content: ""; left: 0; }
.header__menu-bar::before { top: -7px; }
.header__menu-bar::after { top: 7px; }

@media (max-width: 1279px) {
  .gnb { display: none; }
  .header__menu { display: block; }
}

@media (max-width: 1023px) {
  .util { display: none; }
  .header__logo img { height: 50px; }
}

@media (max-width: 767px) {
  .header__logo img { height: 44px; }
}

/* ============================================================
   모바일 전체메뉴
   ============================================================ */
.sitemap {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  overflow-y: auto;
  animation: sitemap-in 0.25s var(--ease);
}
.sitemap[hidden] { display: none; }
/* 열 때마다 위에서 살짝 내려오며 나타난다 — hidden 이 풀려 다시 그려질 때마다 돈다 */
@keyframes sitemap-in {
  from { opacity: 0; transform: translateY(-12px); }
}

.sitemap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 var(--pad-x);
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-sub);
  font-size: var(--fs-small);
}
.sitemap__close { position: relative; width: 40px; height: 40px; }
.sitemap__close span::before,
.sitemap__close span::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 19px;
  width: 22px;
  height: 2px;
  background: var(--color-text);
}
.sitemap__close span::before { transform: rotate(45deg); }
.sitemap__close span::after { transform: rotate(-45deg); }

.sitemap__body { padding: 8px var(--pad-x) 24px; }
.sitemap__group { padding: 20px 0; border-bottom: 1px solid var(--color-line); }
.sitemap__title { font-size: var(--fs-h3); font-weight: 700; color: var(--color-brand); }
.sitemap__group ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-top: 12px; }
.sitemap__group a { display: block; padding: 6px 0; color: var(--color-text-sub); transition: color 0.2s var(--ease), transform 0.2s var(--ease); }
.sitemap__group a:hover { color: var(--color-brand); transform: translateX(3px); }
.sitemap__group a.sitemap__cta:hover { color: var(--color-on-dark); background: var(--color-accent-dark); transform: none; }
/* 눈에 띄게 그리는 메뉴(featured) — 모바일 전체메뉴에서도 GNB 와 같은 뜻으로 보라 제목·보라 단추 */
.sitemap__group--featured .sitemap__title { display: flex; align-items: center; gap: 8px; color: var(--color-accent-dark); }
.sitemap__group--featured .sitemap__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.sitemap__group a.sitemap__cta {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-weight: 700;
}
/* children 이 있는 항목(Disease Site Committee)은 한 줄을 다 쓰고, 셋째 단계를 그 아래 들여 쓴다 */
.sitemap__group li.has-sub { grid-column: 1 / -1; }
.sitemap__group .sitemap__sub { margin: 0 0 4px; padding-left: 14px; border-left: 1px solid var(--color-line); }

.sitemap__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding: 16px var(--pad-x) 24px;
}
.sitemap__foot > * { flex: 1; }
.sitemap__foot .btn { width: 100%; }

/* ============================================================
   푸터
   ============================================================ */
.footer {
  background: var(--color-brand-deep);
  color: var(--color-on-dark-sub);
  font-size: var(--fs-small);
}
/* 세 칸: 글자 로고와 사명 | 주 메뉴 다섯 | 사무국 연락처 */
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 40px;
  padding-top: 36px;
  padding-bottom: 24px;
}
.footer__brand img { display: block; width: auto; height: 56px; }
.footer__mission { max-width: 340px; margin-top: 16px; font-size: var(--fs-xs); line-height: 1.6; }

.footer__nav ul { display: grid; gap: 4px; }
/* 호버 때 글자 아래에 밑줄이 왼쪽에서 그어진다 */
.footer__nav a {
  color: var(--color-on-dark);
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color 0.2s var(--ease), background-size 0.3s var(--ease);
}
.footer__nav a:hover { color: var(--color-accent-light); background-size: 100% 1px; }

.footer__contact { display: grid; gap: 6px; }
.footer__contact div { display: flex; gap: 16px; }
.footer__contact dt { flex: none; width: 44px; color: var(--color-on-dark); }
/* 영문 사이트는 항목명(Address)이 길어 폭을 넓힌다 */
html[lang="en"] .footer__contact dt { width: 64px; }

.footer__bottom { padding-bottom: 20px; font-size: var(--fs-xs); }
/* 선은 글자 폭에 맞춘다. 컨테이너에 걸면 좌우 여백까지 선이 뻗는다 */
.footer__bottom p { padding-top: 16px; border-top: 1px solid var(--color-on-dark-line); }

@media (max-width: 1023px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__nav { display: none; }
}

@media (max-width: 767px) {
  .footer__inner { grid-template-columns: 1fr; gap: 20px; padding-top: 32px; padding-bottom: 24px; }
  .footer__brand img { height: 46px; }
}

/* ============================================================
   하위 화면 공통 — 머리(.subhero) · 탭(.subnav) · 본문(.subpage)
   부품: .content(긴 글) · .data-table · .board-list · .board-view · .board-search
         .pagination · .form-* · .empty-box · .lock-box
   화면 전용 모양은 css/pages/(화면).css 에 둔다. (docs/subpages.md)
   ============================================================ */
.subhero {
  position: relative;
  overflow: hidden;
  background: var(--color-brand-deep);
  color: var(--color-on-dark);
}
/* 화면마다 다른 배경 사진(SubHeroImage). 왼쪽에 제목이 얹히므로 메인 히어로와 같은 그늘을 깐다 */
.subhero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.subhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-shade);
  pointer-events: none;
}
.subhero__inner { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 60px; }
.subhero__group { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; color: var(--color-accent-light); }
.subhero__title { margin-top: 8px; font-size: 34px; font-weight: 700; line-height: 1.3; }
.subhero__crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: var(--fs-xs); color: var(--color-on-dark-sub); }
.subhero__crumbs li + li::before { content: "›"; margin-right: 6px; opacity: 0.6; }
.subhero__crumbs a:hover { color: var(--color-on-dark); }

/* 화면을 열면 배경 사진이 조금 크게 시작해 제자리로 물러나고, 글(대메뉴 → 제목 → 경로)과 안내 카드가 차례로 떠오른다.
   한 번만 돌고 끝나면 손을 뗀다(fill-mode backwards). 움직임을 줄이는 설정이면 돌리지 않는다 */
@media (prefers-reduced-motion: no-preference) {
  .subhero__bg { animation: subhero-zoom 1.4s var(--ease) backwards; }
  .subhero__text > *,
  .subhero__cta { animation: subhero-rise 0.6s var(--reveal-ease) backwards; }
  .subhero__text > :nth-child(2) { animation-delay: 80ms; }
  .subhero__text > :nth-child(3) { animation-delay: 160ms; }
  .subhero__cta { animation-delay: 240ms; }
}
@keyframes subhero-zoom {
  from { transform: scale(1.06); }
}
@keyframes subhero-rise {
  from { opacity: 0; transform: translateY(14px); }
}

.subnav { background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.subnav__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a {
  position: relative;
  display: block;
  padding: 18px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-sub);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.subnav__list a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease);
}
.subnav__list a:hover { color: var(--color-brand); }
/* 호버한 탭은 옅은 보라 밑줄이 가운데에서 펼쳐진다. 지금 화면의 탭은 짙은 보라 그대로 */
.subnav__list a:hover::after { background: var(--color-accent-light); transform: scaleX(1); }
.subnav__list a[aria-current] { color: var(--color-brand); }
.subnav__list a[aria-current]::after { background: var(--color-accent); transform: scaleX(1); }
/* featured 탭(Meeting 의 Event Registration) — 메뉴와 같은 보라 글자 */
.subnav__list a.is-featured { color: var(--color-accent-dark); }
/* 눈에 띄게 그리는 화면(featured — Event Registration)의 머리. 사진은 흑백으로 눌러 보라 그늘 아래 깔고,
   오른쪽에 둥근 고리 장식과 가장 가까운 학술대회로 가는 카드(.subhero__cta)를 둔다 */
.subhero__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.subhero--featured { background: var(--color-accent-dark); }
.subhero--featured .subhero__bg { filter: grayscale(1) contrast(1.1); }
.subhero--featured::after { background: var(--hero-shade-featured); }
.subhero--featured::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 8%;
  width: 360px;
  height: 360px;
  margin-top: -180px;
  border: 1px solid var(--color-on-dark-line);
  border-radius: 50%;
  box-shadow: 0 0 0 56px var(--hero-ring-1), 0 0 0 112px var(--hero-ring-2);
  pointer-events: none;
}
.subhero--featured .subhero__group { color: var(--color-accent-light); }
.subhero__cta {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 360px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-float);
  transition: transform var(--hover-dur) var(--ease), box-shadow var(--hover-dur) var(--ease);
}
.subhero__cta:hover { transform: translateY(var(--hover-lift)); box-shadow: 0 20px 40px rgba(6, 44, 49, 0.32); }
.subhero__cta:hover .subhero__cta-btn { background: var(--color-accent-dark); box-shadow: var(--shadow-btn); }
.subhero__cta-label { padding: 3px 10px; border-radius: 999px; background: var(--color-accent-soft); font-size: var(--fs-xs); font-weight: 700; color: var(--color-accent-dark); }
.subhero__cta-title { font-size: 18px; line-height: 1.4; }
.subhero__cta-meta { font-size: var(--fs-small); color: var(--color-text-muted); }
.subhero__cta-btn { margin-top: 8px; }

/* 둘째 줄 탭 — 셋째 단계(Disease Site Committee 의 네 위원회). 한 단 낮게 보이도록 바탕을 옅게, 글자를 작게 */
.subnav--sub { background: var(--color-bg-soft); }
.subnav--sub .subnav__list a { padding-block: 12px; font-size: var(--fs-small); font-weight: 500; }
.subnav--sub .subnav__list a[aria-current] { font-weight: 700; }
/* 넓은 화면은 탭이 많아도(About US 여덟 개) 모두 보이게 한다 — 옆 여백을 줄여 1440 폭에서 한 줄에 들이고,
   그보다 좁으면 줄을 바꾼다. 좁은 화면(1023px 이하)은 위처럼 가로로 민다 */
@media (min-width: 1024px) {
  .subnav__list { flex-wrap: wrap; overflow-x: visible; }
  .subnav__list a { padding-inline: 12px; }
  .subnav__list a::after { left: 12px; right: 12px; }
}

.subpage { padding-top: 56px; padding-bottom: 88px; }
.subpage--narrow { max-width: calc(760px + var(--pad-x) * 2); }

@media (max-width: 1023px) {
  .subhero__inner { flex-direction: column; align-items: flex-start; }
  .subhero__cta { width: 100%; max-width: 420px; }
  .subhero--featured::before { right: -120px; }
}

@media (max-width: 767px) {
  .subhero__inner { padding-top: 40px; padding-bottom: 36px; }
  .subhero__title { font-size: 26px; }
  .subhero__bg { object-position: 70% center; }
  .subnav__list a { padding: 14px 12px; font-size: var(--fs-small); }
  .subnav__list a::after { left: 12px; right: 12px; }
  .subpage { padding-top: 36px; padding-bottom: 64px; }
}

/* 본문 안의 작은 머리 */
.sub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sub-head__title { font-size: 22px; font-weight: 700; }
.sub-head__meta { font-size: var(--fs-small); color: var(--color-text-muted); }
.sub-head__meta strong { color: var(--color-brand); }

/* ── 긴 글(연구회 소개·회칙·게시글 본문) ── */
.content { font-size: var(--fs-body); line-height: 1.8; color: var(--color-text); }
.content > * + * { margin-top: 1em; }
.content h2 { margin-top: 2em; font-size: 22px; line-height: 1.4; }
.content h3 { margin-top: 1.6em; font-size: var(--fs-h3); line-height: 1.45; }
.content p, .content li { color: var(--color-text-sub); }
.content ul, .content ol { padding-left: 1.3em; }
.content ul { list-style: disc; }
.content ol { list-style: decimal; }
.content a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s var(--ease), text-underline-offset 0.2s var(--ease); }
.content a:hover { color: var(--color-accent-dark); text-underline-offset: 5px; }
.content img { max-width: 100%; height: auto; border-radius: var(--radius); }
/* 브라우저 기본 figure 좌우 40px 가 표 칸 안에서 그림을 눌러 모바일 가로 넘침을 만든다(옮긴 글의 후원사 로고 표) */
.content figure { margin-inline: 0; }
.content table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.content th, .content td { padding: 10px 12px; border: 1px solid var(--color-line); text-align: left; }
.content th { background: var(--color-bg-soft); }

/* ── 표 ── */
.data-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--color-brand); font-size: var(--fs-small); }
.data-table th, .data-table td { padding: 14px 12px; border-bottom: 1px solid var(--color-line); text-align: center; vertical-align: middle; }
.data-table th { background: var(--color-bg-soft); font-weight: 600; color: var(--color-text); }
.data-table td { color: var(--color-text-sub); transition: background-color 0.2s var(--ease); }
.data-table tbody tr:hover td { background: var(--color-bg-soft); }
.data-table .is-left { text-align: left; }
.table-scroll { overflow-x: auto; }

/* ── 게시판 목록 ── */
.board-search { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.board-search input[type="search"] { width: 240px; height: 42px; }

/* 검색 범위 — 제목·내용을 켜고 끄는 단추. 실제 값은 숨긴 checkbox 이고 label 전체가 단추다.
   켜짐은 색만이 아니라 상자 안의 체크 표시로도 보인다 */
.board-search__in { display: flex; flex: none; gap: 6px; margin: 0; padding: 0; border: 0; }
.board-search__toggle { position: relative; display: inline-flex; cursor: pointer; }
.board-search__toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.board-search__toggle span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-sub);
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.board-search__toggle span::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-line-strong);
  border-radius: 4px;
  background: var(--color-bg) center / 12px 12px no-repeat;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.board-search__toggle:hover span { border-color: var(--color-text-muted); }
.board-search__toggle input:checked + span { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand); }
.board-search__toggle input:checked + span::before {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.board-search__toggle input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.board-list { border-top: 2px solid var(--color-brand); }
.board-list li { border-bottom: 1px solid var(--color-line); }
.board-list a, .board-list__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 12px;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* 호버한 줄 — 옅은 바탕에 왼쪽 보라 띠, 제목이 청록으로 바뀌며 한 걸음 들어온다 */
.board-list a:hover,
.board-list a:focus-visible { background: var(--color-bg-soft); box-shadow: inset 3px 0 0 var(--color-accent); }
.board-list a .board-list__subject { transition: transform 0.25s var(--ease); }
.board-list a .board-list__title { transition: color 0.2s var(--ease); }
.board-list a:hover .board-list__subject,
.board-list a:focus-visible .board-list__subject { transform: translateX(4px); }
.board-list a:hover .board-list__title,
.board-list a:focus-visible .board-list__title { color: var(--color-brand); }
.board-list__no { flex: none; width: 56px; text-align: center; font-size: var(--fs-small); color: var(--color-text-muted); }
.board-list__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.board-list__meta { flex: none; display: flex; align-items: center; gap: 14px; font-size: var(--fs-small); color: var(--color-text-muted); }
.board-list .is-pinned { background: var(--color-bg-soft); }
.board-list .is-pinned .board-list__title { font-weight: 700; color: var(--color-brand); }

@media (max-width: 767px) {
  .board-search { flex-wrap: wrap; }
  .board-search__in { flex-basis: 100%; }
  .board-search input[type="search"] { flex: 1; width: auto; }
  .board-list a, .board-list__row { flex-wrap: wrap; gap: 4px 10px; padding: 14px 4px; }
  .board-list__no { display: none; }
  .board-list__title { flex-basis: 100%; white-space: normal; }
}

/* ── 게시글 보기 ── */
.board-view { border-top: 2px solid var(--color-brand); }
.board-view__head { padding: 24px 8px 20px; border-bottom: 1px solid var(--color-line); }
.board-view__title { font-size: 22px; font-weight: 700; line-height: 1.45; }
.board-view__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: var(--fs-small); color: var(--color-text-muted); }
.board-view__body { padding: 32px 8px 40px; border-bottom: 1px solid var(--color-line); }
.board-view__files { padding: 16px 8px; border-bottom: 1px solid var(--color-line); background: var(--color-bg-soft); }
.board-view__files li + li { margin-top: 6px; }
.board-view__files a { font-size: var(--fs-small); color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.board-view__nav li { display: flex; gap: 16px; padding: 14px 8px; border-bottom: 1px solid var(--color-line); font-size: var(--fs-small); }
.board-view__nav span { flex: none; width: 56px; color: var(--color-text-muted); }
.board-view__nav a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-view__actions { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }

/* ── 쪽 번호 ── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: 40px; }
.pagination__num, .pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  color: var(--color-text-sub);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.pagination a:hover { background: var(--color-bg-soft); color: var(--color-brand); transform: translateY(-2px); }
.pagination__num.is-current { background: var(--color-brand); color: var(--color-on-dark); }
.pagination__step { position: relative; }
.pagination__step::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.pagination__step--prev::before { transform: rotate(-135deg); }
.pagination__step--next::before { transform: rotate(45deg); }
.pagination__step.is-disabled { opacity: 0.3; }

/* ── 분류 칩 · 색 — 연구회 일정·연혁이 함께 쓴다. tone 이름은 EventSchedule·AboutHistory 의 CATEGORIES 가 정한다 ── */
.cat {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}
.cat--gold { background: var(--color-accent); color: var(--color-on-dark); }
.cat--brand { background: var(--color-brand); color: var(--color-on-dark); }
.cat--deep { background: var(--color-brand-deep); color: var(--color-accent-light); }
.cat--soft { background: var(--color-brand-soft); color: var(--color-brand); }
.cat--line { background: var(--color-bg-soft); color: var(--color-text-sub); box-shadow: inset 0 0 0 1px var(--color-line-strong); }

/* ── 빈 상태 · 잠김 ── */
.empty-box {
  padding: 72px 16px;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.lock-box {
  padding: 56px 16px;
  border-radius: 10px;
  background: var(--color-bg-soft);
  text-align: center;
}
.lock-box__title { font-size: var(--fs-h3); font-weight: 700; }
.lock-box__text { margin-top: 8px; font-size: var(--fs-small); color: var(--color-text-sub); }
.lock-box .btn { margin-top: 20px; }

/* ── 폼 (FormUtils 약속: .form-row · .form-error · .form-global-error) ── */
.form-card {
  padding: 40px;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-bg);
}
.form-grid { display: grid; gap: 20px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-row--full { grid-column: 1 / -1; }
.form-label { font-size: var(--fs-small); font-weight: 600; color: var(--color-text); }
.form-label .is-required { color: var(--color-accent-dark); }
.form-help { font-size: var(--fs-xs); color: var(--color-text-muted); }
.form-error { min-height: 0; font-size: var(--fs-xs); color: var(--color-danger); }
.form-error:empty { display: none; }
.form-global-error {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--fs-small);
}
.form-actions { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.form-actions .btn { min-width: 140px; }

.input, .select, .textarea,
.board-search input[type="search"] {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--color-text);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.textarea { min-height: 140px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
/* 입력칸에 마우스를 올리면 테두리가 한 단 짙어진다. 포커스·오류 테두리는 아래 규칙이 이긴다 */
.input:hover, .select:hover, .textarea:hover,
.board-search input[type="search"]:hover { border-color: var(--color-text-muted); }
.input:focus, .select:focus, .textarea:focus,
.board-search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}
.input[readonly] { background: var(--color-bg-soft); color: var(--color-text-sub); }
.form-row--error .input, .form-row--error .select, .form-row--error .textarea { border-color: var(--color-danger); }
.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--color-brand); }

@media (max-width: 767px) {
  .form-card { padding: 24px 18px; }
  .form-grid--2 { grid-template-columns: 1fr; }
  .form-actions .btn { flex: 1; min-width: 0; }
}

/* ── 알림 띠 (성공·안내) ── */
.notice-box {
  padding: 16px 18px;
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-bg-soft);
  font-size: var(--fs-small);
  color: var(--color-text-sub);
}

/* ============================================================
   눌러서 복사 — [data-copy] 버튼. 동작은 site.js 의 copyText()
   툴팁은 요소 위쪽에 뜬다. 문구는 data-tooltip 이고, 복사 뒤에는 JS 가 잠시 바꾼다.
   ============================================================ */
.copy {
  position: relative;
  /* 단추의 기본 가운데 정렬을 푼다 — 긴 주소가 좁은 화면에서 줄을 바꾸면 둘째 줄이 가운데로 가 첫 줄과 어긋났다 */
  text-align: left;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  cursor: copy;
  transition: color 0.2s var(--ease);
}
.copy:hover { color: var(--color-on-dark); }

.copy::before,
.copy::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s var(--ease), visibility 0.15s var(--ease);
}
.copy::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 10px);
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-xs);
  line-height: 1.4;
  white-space: nowrap;
  transform: translateX(-50%);
}
/* 말풍선 꼬리 */
.copy::before {
  content: "";
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: var(--color-bg);
  transform: translateX(-50%);
}
.copy:hover::before, .copy:hover::after,
.copy:focus-visible::before, .copy:focus-visible::after,
.copy.is-copied::before, .copy.is-copied::after {
  opacity: 1;
  visibility: visible;
}
.copy.is-copied::after { background: var(--color-accent); color: var(--color-on-dark); }
.copy.is-copied::before { border-top-color: var(--color-accent); }

/* ============================================================
   오류 화면 (영문 준비 중 안내도 같은 모양을 쓴다)
   ============================================================ */
.error-page { padding: 120px 0; text-align: center; }
.error-page__code {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent-dark);
}
.error-page__title { margin-top: 12px; font-size: var(--fs-h2); font-weight: 700; }
.error-page__text { margin-top: 12px; color: var(--color-text-sub); }
.error-page__id { margin-top: 8px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.error-page .btn { margin-top: 32px; }

/* ============================================================
   스크롤 등장 — [data-reveal] · [data-reveal-group]. 켜고 끄는 것은 site.js 의 reveal()
   html.js-motion 아래에서만 숨기므로 JS 가 없거나 실패하면 처음부터 다 보인다.
   opacity 와 transform 만 바꿔 문서 높이가 변하지 않는다.

   떠오르는 것은 transition 이 아니라 한 번짜리 animation 이다. 등장 규칙이 transition·transform 을 쥐고 있으면
   그 요소(사람 카드·회원 그룹 칸·지난 행사 카드)의 호버 연출 — 떠오르기, 테두리 색 전환 — 이 덮여 동작하지 않는다.
   animation 은 fill-mode backwards 라 기다리는 동안(형제 지연)만 첫 장면(숨김)을 지키고, 끝나면 손을 뗀다.
   ============================================================ */
html.js-motion [data-reveal]:not(.is-in) { opacity: 0; }
html.js-motion [data-reveal].is-in { animation: reveal-rise var(--reveal-dur) var(--reveal-ease) backwards; }
/* 첫 화면에 이미 보이는 것은 떠오르지 않고 제자리에 그린다 */
html.js-motion [data-reveal].is-instant { animation: none; }

@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(var(--reveal-shift)); }
}

/* 묶음 안에서 형제 순서대로 늦춘다. 인라인 스타일을 쓰지 않으려고 지연을 여기서 준다 */
html.js-motion [data-reveal-group] > [data-reveal]:nth-child(2) { animation-delay: calc(var(--reveal-step) * 1); }
html.js-motion [data-reveal-group] > [data-reveal]:nth-child(3) { animation-delay: calc(var(--reveal-step) * 2); }
html.js-motion [data-reveal-group] > [data-reveal]:nth-child(4) { animation-delay: calc(var(--reveal-step) * 3); }
html.js-motion [data-reveal-group] > [data-reveal]:nth-child(5) { animation-delay: calc(var(--reveal-step) * 4); }
html.js-motion [data-reveal-group] > [data-reveal]:nth-child(6) { animation-delay: calc(var(--reveal-step) * 5); }
html.js-motion [data-reveal-group] > [data-reveal]:nth-child(n+7) { animation-delay: calc(var(--reveal-step) * 6); }

@media print {
  html.js-motion [data-reveal] { opacity: 1 !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 준비 중 화면(templates/soon.php — 아직 만들지 않은 하위 화면) — 빈 상자에 제목 한 줄 */
.soon-box p + p { margin-top: 8px; }
.soon-box__title { margin-bottom: 12px; font-size: var(--fs-h2); font-weight: 700; color: var(--color-brand); }