@charset "utf-8";
/* ==========================================================================
   한국이사서비스협회 — 공통 스타일
   디자인 시안의 인라인 스타일을 토큰 + 컴포넌트로 재구성했습니다.
   시안에 없던 반응형(1024 / 768 / 560)을 추가했습니다.
   ========================================================================== */

/* --------------------------------------------------------------
   1. 토큰
   -------------------------------------------------------------- */
:root {
  --navy-900: #0a2438;
  --navy:     #0f3556;
  --gold:     #c08a3e;
  --gold-dk:  #9c6b2b;

  --ink:      #16202b;
  --text:     #4a5563;
  --muted:    #5a6672;
  --muted-2:  #8a929c;
  --muted-3:  #a3a9b2;

  --line:     #e6e2da;
  --line-2:   #e0dcd3;
  --line-3:   #f0eee8;
  --line-4:   #ece9e3;

  --bg-soft:  #f6f5f2;
  --bg-card:  #fcfcfa;
  --bg-hover: #faf9f6;

  --danger:   #b8452f;

  /* 글꼴
     --display 는 제목용입니다. 예전에는 Noto Serif KR(명조)을 썼는데
     한글 명조는 화면에서 예스러운 인상이 강해 협회가 낡아 보였습니다.
     Pretendard 로 바꿔 제목·본문을 같은 계열로 통일했습니다.
     굵기(700)와 자간(-.03em)으로 위계를 만듭니다.

     Pretendard 가 로드되지 않아도 기기 기본 한글 글꼴로 자연스럽게 떨어집니다. */
  --display: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
             system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --sans:    'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
             system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --inner: 1280px;
  --gut: 40px;
  --header-h: 84px;

  --placeholder: repeating-linear-gradient(45deg, #eceae4 0 12px, #f4f2ed 12px 24px);
}

/* --------------------------------------------------------------
   2. 기본
   -------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold-dk); }

img { max-width: 100%; height: auto; vertical-align: middle; }
address { font-style: normal; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--navy); color: #fff; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* 스크린리더 전용 / 본문 바로가기 */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* 환경 배지 — local/dev 에서만 출력됩니다 (운영에는 없음) */
.env-badge {
  position: fixed; left: 0; bottom: 0; z-index: 90;
  background: var(--danger); color: #fff;
  padding: 5px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; font-family: var(--mono);
  pointer-events: none; opacity: .85;
}

.inner { max-width: var(--inner); margin: 0 auto; padding: 0 var(--gut); }

/* 공통 타이포 */
.eyebrow {
  font-size: 12.5px; letter-spacing: .16em; color: var(--gold);
  font-weight: 500; margin-bottom: 18px;
}
.eyebrow-light {
  font-size: 12.5px; letter-spacing: .16em; color: #9fb4c8; margin-bottom: 16px;
}
.h-serif {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.55;
}
.rule-gold { display: block; width: 44px; height: 2px; background: var(--gold); }

.lead { font-size: 17px; line-height: 2.05; color: var(--text); font-weight: 300; }
.desc { font-size: 15.5px; line-height: 1.9; color: var(--muted); font-weight: 300; }
.note { font-size: 13.5px; color: var(--muted-2); line-height: 1.9; }

/* 이미지 자리표시자
   사선 무늬는 "아직 안 만든 화면"처럼 보입니다. 이미지가 준비되기 전에도
   완성된 화면으로 보이도록, 사이트 배경색과 어우러지는 면으로 둡니다.
   안내 문구는 관리자에게만 출력합니다. */
.ph {
  background: var(--bg-soft); border: 1px solid var(--line-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 16px;
}
/* 방문자에게 보이는 문구 — 담백하게 "준비 중" 한 줄 */
.ph-label { font-size: 14px; color: var(--muted-2); letter-spacing: -.01em; }
/* 관리자에게만 보이는 운영 안내 */
.ph-hint {
  font-size: 12px; color: var(--muted-3); line-height: 1.7;
  border: 1px dashed var(--line-2); padding: 6px 10px;
}

/* 스크롤 등장 */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------
   3. 버튼
   -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; padding: 15px 28px;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap; transition: background .18s, color .18s, border-color .18s;
}
.btn-navy         { background: var(--navy); color: #fff; }
.btn-navy:hover   { background: var(--navy-900); color: #fff; }
.btn-gold         { background: var(--gold); color: #fff; }
.btn-gold:hover   { background: var(--gold-dk); color: #fff; }
.btn-outline-navy { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-lg { padding: 18px 34px; font-size: 16px; }
.btn-sm { padding: 12px 20px; font-size: 13.5px; }

.link-underline {
  background: none; border: 0; padding: 0 0 4px; cursor: pointer;
  color: var(--navy); font-size: 15.5px; font-weight: 500;
  border-bottom: 1px solid var(--navy);
}
.link-muted {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted-2); font-size: 13.5px;
}
.link-muted:hover { color: var(--ink); }

/* --------------------------------------------------------------
   4. 헤더 / 네비게이션
   -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--inner); margin: 0 auto; padding: 0 24px;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.logo { display: flex; align-items: center; gap: 13px; flex: none; }
.logo:hover { color: inherit; }
.logo-mark {
  width: 42px; height: 42px; flex: none;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -.02em;
}
/* 관리자에서 로고를 올리면 약칭 글자(.logo-mark) 대신 이미지가 나갑니다 */
.logo-img { height: 42px; width: auto; flex: none; display: block; object-fit: contain; }

.logo-text { line-height: 1.25; min-width: 0; }
.logo-text strong {
  display: block; font-family: var(--display); font-size: 18.5px; font-weight: 700;
  color: var(--navy); letter-spacing: -.02em; white-space: nowrap;
}
.logo-text em {
  display: block; font-style: normal; font-size: 10.5px; color: var(--muted-2);
  letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gnb { display: flex; align-items: stretch; flex: 1; justify-content: center; }
.gnb-list { display: flex; align-items: stretch; }
.gnb-item { position: relative; display: flex; align-items: center; }
.gnb-link {
  display: flex; align-items: center; height: var(--header-h);
  padding: 0 clamp(10px, 1.4vw, 24px);
  font-size: 16px; font-weight: 500; color: var(--text);
  letter-spacing: -.02em; white-space: nowrap;
}
.gnb-item.is-active > .gnb-link { color: var(--navy); }
.gnb-item.is-active::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0;
  height: 2px; background: var(--navy);
}

.gnb-sub {
  position: absolute; top: var(--header-h); left: 8px; min-width: 222px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 34px rgba(10,36,56,.13);
  padding: 10px 0; display: none;
  animation: kmsaFade .18s ease both;
}
.gnb-item:hover > .gnb-sub,
.gnb-item:focus-within > .gnb-sub { display: block; }
.gnb-sub a {
  display: block; padding: 11px 22px; font-size: 14.5px; color: var(--text);
}
.gnb-sub a:hover { background: var(--bg-soft); color: var(--navy); }

@keyframes kmsaFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 헤더 우측 유틸 — 로그인/회원가입 + CTA */
.header-util { display: flex; align-items: center; gap: 4px; flex: none; }
.util-link {
  padding: 8px 10px; font-size: 13.5px; color: var(--muted);
  letter-spacing: -.01em; white-space: nowrap;
}
.util-link:hover { color: var(--navy); }
.util-link + .util-link { position: relative; }
.util-link + .util-link::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--line-2);
}
.util-link--admin { color: var(--gold-dk); font-weight: 500; }
.util-name {
  padding: 8px 10px; font-size: 13.5px; color: var(--ink); white-space: nowrap;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.util-name strong { font-weight: 700; }

.header-cta { flex: none; margin-left: 8px; padding: 14px clamp(14px, 1.6vw, 24px); font-size: 14.5px; }
.gnb-cta-mobile { display: none; }
.gnb-util-mobile { display: none; }

.nav-toggle {
  display: none; width: 44px; height: 44px; flex: none;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--navy);
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------
   5. 페이지 히어로 (서브페이지 공통)
   -------------------------------------------------------------- */
.page-hero { background: var(--navy-900); color: #fff; padding: 76px var(--gut); }
.page-hero .inner { padding: 0; }
.page-hero h1 {
  font-family: var(--display); font-size: 42px; font-weight: 700;
  letter-spacing: -.035em; margin: 0;
}

/* 서브페이지 본문 래퍼 */
.page-body {
  max-width: var(--inner); margin: 0 auto;
  padding: 88px var(--gut) 110px;
  display: flex; flex-direction: column; gap: 96px;
}
/* 상단 메뉴의 #앵커로 건너뛸 때 sticky 헤더가 제목을 덮지 않게 합니다.
   헤더 높이만큼 미리 띄워 둡니다(모바일은 --header-h 가 알아서 줄어듭니다). */
.page-body > section[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

/* --------------------------------------------------------------
   6. 메인 — 히어로
   -------------------------------------------------------------- */
.main-hero { position: relative; height: 660px; background: var(--navy-900); overflow: hidden; }
.main-hero-bg {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 24px 24px 92px;
}
/* 배경 이미지가 없을 때 — 사선 무늬 대신 협회 색 그라데이션.
   무늬가 있으면 "이미지가 빠졌다"처럼 보이지만, 색 면은 의도된 디자인으로 읽힙니다. */
.main-hero-bg.is-empty {
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%);
}
.main-hero-bg.is-empty span {
  font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,.5);
  border: 1px dashed rgba(255,255,255,.28); padding: 8px 14px; letter-spacing: 0;
}
.main-hero-bg span { font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.4); letter-spacing: .04em; }

/* 관리자에서 배경 이미지를 등록하면 style 속성으로 background-image 가 들어옵니다.
   사선 무늬(기본 배경)를 덮고 화면을 꽉 채웁니다. 위에 main-hero-veil 이 덧씌워져
   밝은 사진을 올려도 글자가 읽힙니다. */
.main-hero-bg[style*="background-image"] {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.main-hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,36,56,.94) 0%, rgba(10,36,56,.78) 46%, rgba(10,36,56,.32) 100%);
}
.main-hero-body {
  position: relative; max-width: var(--inner); margin: 0 auto; padding: 0 var(--gut);
  height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff;
}
.main-hero-body .rule-gold { margin-bottom: 28px; }
.main-hero-body h1 {
  font-family: var(--display); font-size: 60px; line-height: 1.34; font-weight: 700;
  margin: 0 0 26px; letter-spacing: -.035em;
}
.main-hero-body p {
  font-size: 19px; line-height: 1.85; color: #d5dfe9;
  margin: 0 0 44px; max-width: 600px; font-weight: 300;
}
.main-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-notice {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.07); border-top: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
}
.hero-notice-inner {
  max-width: var(--inner); margin: 0 auto; padding: 20px var(--gut);
  display: flex; gap: 36px; align-items: center; color: #e6edf4; font-size: 14.5px;
}
.hero-notice .tag {
  flex: none; border: 1px solid rgba(255,255,255,.4);
  padding: 5px 11px; font-size: 12px; letter-spacing: .06em;
}
.hero-notice .title { flex: 1; color: #e6edf4; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-notice .title:hover { color: #fff; }
.hero-notice .date { flex: none; color: #a8bacb; font-size: 13.5px; }

/* --------------------------------------------------------------
   7. 메인 — 섹션
   -------------------------------------------------------------- */
.section { padding: 104px var(--gut); }
.section--tight { padding: 112px var(--gut) 96px; }
.section--soft { background: var(--bg-soft); }
.section-inner { max-width: var(--inner); margin: 0 auto; }

/* 섹션 제목 줄
   align-items: flex-end 를 쓰면 제목의 행간(line-height) 여백만큼 버튼이
   아래로 내려가 보입니다. 제목 높이가 바뀔 때마다 어긋나므로 가운데로
   맞춥니다. 두 요소가 항상 같은 축에 옵니다. */
.section-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; margin-bottom: 48px; flex-wrap: wrap;
}

/* 아래 내용이 가운데 정렬일 때(준비 중 안내 등) 제목도 함께 가운데로 */
.section-head--center {
  flex-direction: column; align-items: center; text-align: center;
}
.section-head--center .desc { max-width: 640px; margin-left: auto; margin-right: auto; }
.section-head h2 { font-family: var(--display); font-size: 36px; line-height: 1.5; font-weight: 700; letter-spacing: -.03em; margin: 0; }

.about-split {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px;
  align-items: start; margin-bottom: 72px;
}
.about-split h2 { font-family: var(--display); font-size: 38px; line-height: 1.5; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.about-split-body { padding-top: 14px; }
.about-split-body p { margin: 0 0 26px; }

/* 중점 추진 과제 카드 */
.focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.focus-card {
  background: var(--navy); color: #fff; padding: 52px 46px;
  position: relative; overflow: hidden;
}
.focus-card .bg-no {
  position: absolute; right: -30px; top: -30px;
  font-family: var(--display); font-size: 150px; font-weight: 700;
  color: rgba(255,255,255,.05); line-height: 1;
}
.focus-card-body { position: relative; }
.badge-gold {
  display: inline-block; background: var(--gold); color: #fff;
  padding: 6px 12px; font-size: 11.5px; letter-spacing: .1em; font-weight: 500;
  margin-bottom: 26px;
}
.focus-card h3 {
  font-family: var(--display); font-size: 29px; line-height: 1.45; font-weight: 700;
  margin: 0 0 18px; letter-spacing: -.025em;
}
.focus-card p { font-size: 16px; line-height: 1.9; color: #cfdae6; margin: 0 0 32px; font-weight: 300; }

.outline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.outline-card { border: 1px solid var(--line); padding: 40px 38px; }
.outline-card .label { font-size: 12.5px; letter-spacing: .1em; color: var(--gold); margin-bottom: 14px; }
.outline-card h3 {
  font-family: var(--display); font-size: 22px; line-height: 1.5; font-weight: 600;
  margin: 0 0 12px; letter-spacing: -.025em;
}
.outline-card p { margin: 0; }

/* 혜택 그리드 (1px 갭 = 테두리 효과) */
.grid-hair {
  display: grid; gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2);
}
.grid-hair--3 { grid-template-columns: repeat(3, 1fr); }
.grid-hair--2 { grid-template-columns: repeat(2, 1fr); }
.grid-hair--6 { grid-template-columns: repeat(6, 1fr); }

.benefit-card { background: #fff; padding: 42px 36px; }
.benefit-card:hover { background: #fbfaf7; }
.benefit-card .no { font-family: var(--display); font-size: 14px; color: var(--gold); margin-bottom: 20px; letter-spacing: .06em; }
.benefit-card h3 { font-size: 18px; font-weight: 700; line-height: 1.55; margin: 0 0 12px; letter-spacing: -.025em; }
.benefit-card p { font-size: 14.5px; line-height: 1.9; color: var(--muted); margin: 0; font-weight: 300; }

/* 제휴사 */
.partner-cell {
  background: #fff; height: 96px; padding: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted-3); text-align: center;
}

/* 소식 카드 */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.news-card { display: block; background: #fff; border: 1px solid var(--line); }
.news-card:hover { border-color: var(--navy); }
.news-thumb {
  height: 180px; background: var(--bg-soft); border-bottom: 1px solid var(--line-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--muted-3);
}
.news-body { padding: 28px 26px 30px; }
.news-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.tag-line { border: 1px solid #c9c3b8; padding: 4px 10px; font-size: 11.5px; color: var(--navy); }
.news-date { font-size: 13px; color: var(--muted-2); }
.news-title { font-size: 17.5px; line-height: 1.6; color: var(--ink); letter-spacing: -.02em; font-weight: 500; }

/* CTA 밴드 */
.cta-band { background: var(--navy); color: #fff; padding: 84px var(--gut); }
.cta-band-inner {
  max-width: var(--inner); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;
}
.cta-band .title { font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 12px; }
.cta-band .sub { font-size: 16.5px; color: #cfdae6; font-weight: 300; }

.cta-box {
  background: var(--navy); color: #fff; padding: 48px 52px; margin-top: 48px;
  display: flex; justify-content: space-between; align-items: center; gap: 36px; flex-wrap: wrap;
}
.cta-box .title { font-family: var(--display); font-size: 26px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.025em; }
.cta-box .sub { font-size: 15.5px; color: #cfdae6; font-weight: 300; }

/* --------------------------------------------------------------
   8. 협회소개
   -------------------------------------------------------------- */
.sec-title {
  font-family: var(--display); font-size: 32px; line-height: 1.5; font-weight: 700;
  letter-spacing: -.03em; margin: 0 0 40px;
}
.sec-title--tight { margin-bottom: 12px; }

.greeting { display: grid; grid-template-columns: .78fr 1.22fr; gap: 64px; align-items: start; }
.greeting-photo { aspect-ratio: 4 / 5; }
/* 관리자에서 등록한 사진 — .ph(자리표시자) 없이 이미지만 들어옵니다 */
.greeting-photo img, .org-chart img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.org-chart img { object-fit: contain; background: var(--bg-card); }
.greeting h2 {
  font-family: var(--display); font-size: 32px; line-height: 1.5; font-weight: 700;
  margin: 0 0 30px; letter-spacing: -.03em;
}
.greeting p { font-size: 16.5px; line-height: 2.05; color: var(--text); margin: 0 0 22px; font-weight: 300; }
.greeting p:last-of-type { margin-bottom: 34px; }
.greeting-sign { border-top: 1px solid var(--line); padding-top: 22px; font-size: 15.5px; color: var(--ink); }
.greeting-sign strong { font-family: var(--display); font-size: 20px; margin-left: 10px; }

.purpose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.purpose-card { border: 1px solid var(--line); border-top: 3px solid var(--navy); padding: 38px 34px; }
.purpose-card h3 { font-size: 20px; font-weight: 700; margin: 0 0 14px; color: var(--navy); letter-spacing: -.025em; }
.purpose-card p { font-size: 15.5px; line-height: 1.95; color: var(--muted); margin: 0; font-weight: 300; }

.org-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.org-chart { height: 340px; }
.officer-list { border-top: 2px solid var(--navy); }
.officer-row { display: flex; border-bottom: 1px solid var(--line-4); padding: 18px 4px; gap: 20px; }
.officer-row .role { flex: none; width: 120px; font-size: 15px; font-weight: 500; color: var(--navy); }
.officer-row .name { flex: 1; font-size: 15px; color: var(--text); }
.officer-row .note { flex: none; font-size: 13.5px; color: var(--muted-2); }
/* 명단이 아직 등록되지 않았을 때 — 조직도 자리표시자와 같은 결로 맞춥니다 */
.officer-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; min-height: 180px; padding: 24px;
  background: var(--bg-soft); border-bottom: 1px solid var(--line-4);
}

.articles-box { border: 1px solid var(--line); padding: 44px; }
.articles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 52px; }
.article-item { display: flex; gap: 18px; border-bottom: 1px solid var(--line-3); padding-bottom: 20px; }
.article-item .no {
  flex: none; min-width: 58px; font-family: var(--display);
  font-size: 14px; font-weight: 600; color: var(--gold);
}
.article-item .t { font-size: 16.5px; font-weight: 500; color: var(--ink); margin-bottom: 7px; }
.article-item .d { font-size: 14.5px; line-height: 1.85; color: var(--muted); font-weight: 300; }
.articles-foot { margin-top: 36px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------
   9. 주요사업
   -------------------------------------------------------------- */
.program-list {
  max-width: var(--inner); margin: 0 auto;
  padding: 88px var(--gut) 110px;
  display: flex; flex-direction: column; gap: 1px;
}
.program-list-inner { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.program {
  background: #fff; padding: 60px 52px;
  display: grid; grid-template-columns: .42fr .58fr; gap: 52px; align-items: start;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.program-no { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.program-no .n { font-family: var(--display); font-size: 36px; font-weight: 700; color: var(--navy); }
.program.is-focus .program-no .n { color: var(--gold); }
.program h2 {
  font-family: var(--display); font-size: 27px; line-height: 1.5; font-weight: 700;
  margin: 0 0 16px; letter-spacing: -.03em;
}
.program p { font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0; font-weight: 300; }
.program-items { border-top: 2px solid var(--navy); }
.program-items li { border-bottom: 1px solid var(--line-3); padding: 20px 2px; display: flex; gap: 16px; }
.program-items .bullet { flex: none; color: var(--gold); font-size: 14px; }
.program-items .txt { font-size: 16px; line-height: 1.8; color: var(--text); font-weight: 300; }

/* --------------------------------------------------------------
   10. 회원안내
   -------------------------------------------------------------- */
.fee-table { border: 1px solid var(--line); }
.fee-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.3fr; }
.fee-row--head { background: var(--navy); color: #fff; font-size: 14.5px; font-weight: 500; }
.fee-row--head > div { padding: 17px 24px; }
.fee-row--body { border-top: 1px solid var(--line-3); font-size: 15px; color: var(--text); }
.fee-row--body > div { padding: 22px 24px; }
.fee-row--body .type { font-weight: 500; color: var(--navy); }
.fee-cell-label { display: none; }

.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step-card { border: 1px solid var(--line); padding: 34px 28px; }
.step-card .step-no { font-family: var(--display); font-size: 12.5px; letter-spacing: .12em; color: var(--gold); margin-bottom: 16px; }
.step-card .step-title { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -.025em; }
.step-card .step-desc { font-size: 14px; line-height: 1.85; color: var(--muted); font-weight: 300; }

/* --------------------------------------------------------------
   11. 온라인 입회 신청
   -------------------------------------------------------------- */
.join-wrap { background: var(--bg-soft); }
.join-inner { max-width: 980px; margin: 0 auto; padding: 80px var(--gut) 110px; }

.step-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 52px; }
.step-bar-item { border-top: 3px solid var(--line-2); padding-top: 15px; }
.step-bar-item.is-current { border-top-color: var(--navy); }
.step-bar-item .n { font-size: 12px; letter-spacing: .12em; color: var(--gold); margin-bottom: 7px; }
.step-bar-item .t { font-size: 15px; font-weight: 500; color: var(--muted-2); }
.step-bar-item.is-current .t { color: var(--navy); }

.form-card { background: #fff; border: 1px solid var(--line); padding: 56px 52px; }
.form-legend {
  font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--navy);
  padding-bottom: 16px; border-bottom: 2px solid var(--navy);
  margin: 0 0 34px; letter-spacing: -.025em; width: 100%;
}
.form-legend + .form-grid { margin-top: 0; }
fieldset { border: 0; padding: 0; margin: 0; }
fieldset + fieldset { margin-top: 56px; }
fieldset + fieldset .form-legend { margin-bottom: 30px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field > .label { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  border: 1px solid #d8d3c9; background: var(--bg-card);
  padding: 15px; font-size: 15px; color: var(--ink); outline: none; width: 100%;
}
.field textarea { line-height: 1.7; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); background: #fff;
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field-error { font-size: 13px; color: var(--danger); }

/* 체크박스 그룹 (신고 유형 등) */
/* legend 는 브라우저 기본 여백이 있어 .label 과 어긋납니다. .field 안팎 모두에 적용. */
legend.label { display: block; padding: 0; margin-bottom: 9px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.check-list { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.check {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-card); padding: 12px 16px;
}
.check:hover { border-color: var(--navy); }
/* .field 의 입력 규칙(width:100% 등)이 체크박스에 걸리지 않도록 화면에서 걷어냅니다.
   display:none 이 아니라 투명 처리라 키보드 포커스와 라벨 클릭은 그대로 동작합니다. */
.check input { position: absolute; opacity: 0; width: 0; height: 0; padding: 0; margin: 0; }
.check .box {
  flex: none; width: 20px; height: 20px; border: 1.5px solid var(--navy);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; line-height: 1;
}
.check input:checked + .box { background: var(--navy); }
.check input:checked + .box::after { content: '✓'; }
.check input:focus-visible + .box { outline: 2px solid var(--gold); outline-offset: 2px; }
.check .txt { font-size: 14.5px; color: var(--text); }
.check input:checked ~ .txt { color: var(--ink); font-weight: 500; }

.kind-etc { margin-top: 12px; }
.kind-etc[hidden] { display: none; }

/* 첨부파일 */
.field .opt  { font-size: 12.5px; font-weight: 400; color: var(--muted-2); }
.field-hint  { font-size: 13px; line-height: 1.75; color: var(--muted); font-weight: 300; }
.field input[type="file"] { padding: 12px 14px; font-size: 14px; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: var(--navy); color: #fff; }

.file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.file-list[hidden] { display: none; }   /* flex 가 hidden 을 덮어쓰지 않도록 */
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink); word-break: break-all;
}
.file-chip em { font-style: normal; color: var(--muted-2); }
.file-chip.is-over, .file-chip.is-over em { border-color: var(--danger); color: var(--danger); }
.file-note { flex-basis: 100%; font-size: 12.5px; color: var(--danger); }

.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pick { display: block; border: 1px solid var(--line-2); background: var(--bg-card); padding: 28px 26px; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick .t { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.pick .d { font-size: 14.5px; line-height: 1.75; color: var(--muted); font-weight: 300; }
.pick:has(input:checked) { border: 2px solid var(--navy); background: #eef2f6; padding: 27px 25px; }

.agree-list { display: flex; flex-direction: column; gap: 14px; }
.agree {
  display: flex; gap: 15px; align-items: flex-start;
  border: 1px solid var(--line); background: var(--bg-card); padding: 22px 24px; cursor: pointer;
}
.agree input { position: absolute; opacity: 0; width: 0; height: 0; }
.agree .box {
  flex: none; width: 22px; height: 22px; border: 1.5px solid var(--navy);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; line-height: 1;
}
.agree input:checked + .box { background: var(--navy); }
.agree input:checked + .box::after { content: '✓'; }
.agree .txt { font-size: 15px; line-height: 1.75; color: var(--text); }
.agree .txt strong { color: var(--danger); }
.agree .txt small { display: block; font-size: 13.5px; color: var(--muted-2); }

.form-submit { margin-top: 42px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.form-error-summary { font-size: 14px; color: var(--danger); }

.result-card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy);
  padding: 70px 60px; text-align: center;
}
.result-card h2 {
  font-family: var(--display); font-size: 31px; font-weight: 700; color: var(--navy);
  margin: 0 0 20px; letter-spacing: -.03em;
}
.result-card p { font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0 0 34px; font-weight: 300; }
.result-card strong { color: var(--ink); font-weight: 500; }
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------
   12. 알림마당
   -------------------------------------------------------------- */
.board-inner { max-width: var(--inner); margin: 0 auto; padding: 68px var(--gut) 110px; }
/* 탭이 많아지면 모바일에서 가로로 밀어 볼 수 있게 합니다.
   overflow-x 만 지정하면 세로축도 auto 가 되고, .tab 의 margin-bottom:-1px 때문에
   내용이 1px 더 높아져 쓸데없는 세로 스크롤바가 생깁니다. 세로는 명시적으로 잠급니다. */
.tabs {
  display: flex; border-bottom: 1px solid var(--line); margin-bottom: 44px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 구형 Edge */
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
  padding: 17px 32px; font-size: 16px; font-weight: 500; color: var(--muted-2);
  margin-bottom: -1px; white-space: nowrap;
}
.tab.is-active { border-bottom-color: var(--navy); color: var(--navy); }

/* 입회신청 안내 박스 */
.result-note { margin-top: 16px; font-size: 14.5px; line-height: 1.85; color: var(--muted-2); font-weight: 300; }
.form-notice {
  border: 1px solid var(--gold); background: #fdf8f0; padding: 18px 22px; margin-bottom: 26px;
  font-size: 14.5px; line-height: 1.8; color: var(--ink);
}

/* 관리자용 도구 줄 (글쓰기 등) — 권한이 있는 사람에게만 보입니다 */
.board-tools {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-bottom: 16px;
}

/* 목록이 비었을 때 / 목록 아래 안내 */
.list-empty {
  border-top: 2px solid var(--navy); border-bottom: 1px solid var(--line);
  padding: 64px 0; text-align: center; font-size: 15.5px; color: var(--muted); font-weight: 300;
}
.list-note { margin-top: 22px; font-size: 14px; color: var(--muted); font-weight: 300; }
.list-note a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* 페이지 번호 — 한 페이지에 10건 */
.paging {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  margin-top: 40px; flex-wrap: wrap;
}
.paging .pg-num, .paging .pg-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  font-size: 14.5px; font-weight: 400; color: var(--muted);
  border: 1px solid transparent; transition: color .15s, border-color .15s, background .15s;
}
.paging a.pg-num:hover, .paging a.pg-arrow:hover { color: var(--navy); border-color: var(--line-2); }
.paging .pg-num.is-current {
  color: #fff; background: var(--navy); border-color: var(--navy); font-weight: 500;
}
.paging .pg-arrow { font-size: 18px; line-height: 1; }
.paging .pg-gap { color: var(--muted-3); padding: 0 2px; }

@media (max-width: 640px) {
  .paging { gap: 2px; margin-top: 30px; }
  .paging .pg-num, .paging .pg-arrow { min-width: 34px; height: 34px; padding: 0 7px; font-size: 13.5px; }
}

.notice-list { border-top: 2px solid var(--navy); }
.notice-row {
  border-bottom: 1px solid var(--line-4); padding: 26px 6px;
  display: flex; gap: 26px; align-items: center;
}
.notice-row:hover { background: var(--bg-hover); }
.notice-row .tag {
  flex: none; min-width: 62px; text-align: center; border: 1px solid #c9c3b8;
  padding: 5px 10px; font-size: 12.5px; color: var(--navy); font-weight: 500;
}
.notice-row .t { flex: 1; font-size: 17px; color: var(--ink); letter-spacing: -.02em; }
.notice-row .d { flex: none; font-size: 13.5px; color: var(--muted-2); }

/* 사례 패널을 없애면서 1단이 되었으므로 가운데로 모읍니다 */
.report-wrap { max-width: 780px; margin: 0 auto; }
.report-wrap h2 {
  font-family: var(--display); font-size: 28px; line-height: 1.5; font-weight: 700;
  margin: 0 0 18px; letter-spacing: -.03em;
}
.report-wrap > div > p { font-size: 16px; line-height: 1.95; color: var(--muted); margin: 0 0 30px; font-weight: 300; }
.report-box { border: 1px solid var(--line); padding: 34px; }
.report-form { display: flex; flex-direction: column; gap: 20px; }
.report-msg { font-size: 14px; color: var(--navy); }
.report-msg.is-error { color: var(--danger); }

/* 신고 접수 완료 화면
   폼을 대체합니다. 접수번호를 따로 조회할 방법이 없으므로
   번호를 화면에서 가장 큰 요소로 둡니다. */
.report-done {
  max-width: 620px; margin: 0 auto; text-align: center;
  border: 1px solid var(--line); padding: 56px 40px;
}
.report-done-mark { color: var(--navy); line-height: 0; margin-bottom: 26px; }
.report-done h2 {
  font-family: var(--display); font-size: 28px; line-height: 1.5; font-weight: 700;
  margin: 0 0 16px; letter-spacing: -.03em;
}
.report-done-lead {
  font-size: 16px; line-height: 1.95; color: var(--muted);
  font-weight: 300; margin: 0 0 32px;
}
.report-done-lead strong { color: var(--text); font-weight: 500; }

.report-done-no {
  background: var(--bg-soft); border: 1px solid var(--line-3);
  padding: 24px 20px; margin-bottom: 22px;
}
.report-done-no .label {
  display: block; font-size: 12px; letter-spacing: .12em;
  color: var(--muted-2); margin-bottom: 10px;
}
.report-done-no strong {
  font-family: var(--mono, var(--sans)); font-size: 22px; font-weight: 700;
  color: var(--navy); letter-spacing: .02em; word-break: break-all;
}

.report-done-note {
  font-size: 14px; line-height: 1.9; color: var(--muted-2);
  font-weight: 300; margin: 0 0 34px;
}
.report-done-note strong { color: var(--text); font-weight: 500; }

.report-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .report-done { padding: 40px 22px; }
  .report-done h2 { font-size: 23px; }
  .report-done-no strong { font-size: 19px; }
  .report-done-actions .btn { width: 100%; }
}

.file-cell {
  background: #fff; padding: 34px 32px;
  display: flex; justify-content: space-between; gap: 26px; align-items: center;
}
.file-cell .kind { font-size: 12.5px; color: var(--gold); letter-spacing: .1em; margin-bottom: 11px; }
.file-cell .t { font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 7px; letter-spacing: -.02em; }
.file-cell .m { font-size: 13.5px; color: var(--muted-2); }

/* --------------------------------------------------------------
   13. 푸터
   -------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #a8b8c8; padding: 64px var(--gut) 44px; }
.site-footer .inner { padding: 0; }
.footer-top {
  display: flex; justify-content: space-between; gap: 56px; flex-wrap: wrap;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.13);
}
.footer-name { font-family: var(--display); font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.footer-name span { font-size: 13px; font-weight: 400; color: #8fa3b6; }
.footer-info { font-size: 13.5px; line-height: 2.05; font-weight: 300; }
.footer-nav { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col-title { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 5px; }
.footer-col a { color: #a8b8c8; font-size: 13.5px; font-weight: 300; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  padding-top: 26px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 12.5px; color: #7d8fa1; font-weight: 300;
}

/* --------------------------------------------------------------
   14. 진입 팝업
   -------------------------------------------------------------- */
.popup-dim {
  position: fixed; inset: 0; z-index: 80; background: rgba(10,36,56,.66);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  animation: kmsaFade .25s ease both;
}
.popup-dim[hidden] { display: none; }
.popup { background: #fff; max-width: 620px; width: 100%; box-shadow: 0 34px 68px rgba(10,36,56,.4); }
.popup-head { background: var(--navy-900); color: #fff; padding: 48px 48px 44px; position: relative; overflow: hidden; }
.popup-head::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 12px, rgba(255,255,255,.015) 12px 24px);
}
.popup-head > * { position: relative; }
.popup-head .rule-gold { width: 36px; margin-bottom: 22px; }
.popup-title { font-family: var(--display); font-size: 34px; line-height: 1.45; font-weight: 700; letter-spacing: -.035em; margin-bottom: 20px; }
.popup-desc { font-size: 15.5px; line-height: 1.9; color: #cfdae6; font-weight: 300; }
.popup-body { padding: 34px 48px 38px; }
.popup-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.popup-actions .btn { flex: 1; min-width: 200px; padding: 17px 20px; font-size: 15px; }
.popup-foot { margin-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.popup-foot [data-popup-skip] { text-decoration: underline; }

/* ==========================================================================
   반응형
   ========================================================================== */

@media (max-width: 1200px) {
  :root { --gut: 28px; }
  .main-hero-body h1 { font-size: 50px; }
  /* 헤더가 좁아지면 부가 링크부터 접습니다 (로그인은 유지) */
  .util-link--opt { display: none; }
}

/* 태블릿 — 네비게이션을 드로어로 전환 */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .header-util { display: none; }   /* 로그인·회원가입·CTA 는 드로어로 이동 */

  /* ★ backdrop-filter 를 끕니다 — 지우면 드로어가 깨집니다.
     backdrop-filter 가 걸린 요소는 자손의 position: fixed 기준을
     뷰포트가 아니라 자기 자신으로 바꿉니다(containing block 생성).
     드로어(.gnb)는 헤더의 자식이라, 이게 켜져 있으면 top:84px / bottom:0 이
     84px 짜리 헤더 안에서 계산되어 **높이 0** 이 됩니다.
     실제로 모바일에서 메뉴를 열면 한 줄만 찌그러져 나왔습니다.
     배경이 이미 .97 로 거의 불투명해 흐림 효과는 없어도 차이가 없습니다. */
  .site-header { backdrop-filter: none; background: #fff; }

  /* ★ 선택자를 #gnb 로 씁니다 — .gnb 로 쓰면 안 됩니다.
     그누보드 css/default.css 에 #gnb { position:relative } 가 있고,
     ID 선택자가 클래스 선택자를 이깁니다. 로드 순서와 무관합니다.
     .gnb 로 두면 position:fixed 가 먹지 않아 드로어가 헤더 안에 남고,
     오른쪽으로 밀려나 가로 스크롤이 생깁니다.
     소개 사이트에는 default.css 가 없어 문제가 안 보였습니다.
     헤더 마크업은 id="gnb" 를 함께 갖고 있어 양쪽 모두 적용됩니다. */
  #gnb {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid var(--line);
    flex-direction: column; justify-content: flex-start;
    padding: 12px 24px 40px; overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%); transition: transform .25s ease;
  }
  #gnb.is-open { transform: none; }

  /* 닫힌 드로어(화면 밖 오른쪽)가 가로 스크롤을 만들지 않도록.
     clip 은 hidden 과 달리 스크롤 컨테이너를 만들지 않아
     헤더의 position:sticky 를 깨뜨리지 않습니다. */
  html, body { overflow-x: clip; }
  .gnb-list { flex-direction: column; align-items: stretch; }
  .gnb-item { flex-direction: column; align-items: stretch; }
  .gnb-item.is-active::after { display: none; }
  .gnb-link {
    height: auto; padding: 18px 4px; font-size: 17px;
    border-bottom: 1px solid var(--line-3);
  }
  .gnb-item.is-active > .gnb-link { color: var(--navy); font-weight: 700; }

  /* 하위메뉴 — 아코디언
     예전에는 전부 펼쳐 두어 대메뉴 4개 + 하위 15개 = 19줄이 한꺼번에
     쏟아졌습니다. 좁은 화면에서는 무엇이 어디 속하는지 알기 어렵고
     계속 스크롤해야 합니다. 누른 메뉴만 열립니다. */
  .gnb-sub {
    position: static; min-width: 0; border: 0; box-shadow: none;
    animation: none; background: var(--bg-soft);
    display: block; overflow: hidden;
    max-height: 0; padding: 0 0; opacity: 0;
    transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
  }
  .gnb-item.is-expanded > .gnb-sub {
    max-height: 400px; padding: 6px 0 14px; opacity: 1;
  }
  .gnb-sub a { padding: 11px 16px; }

  /* 대메뉴에 여닫기 표시 */
  .gnb-link {
    display: flex; align-items: center; justify-content: space-between;
  }
  .gnb-link::after {
    content: ''; flex: none; width: 8px; height: 8px; margin-right: 6px;
    border-right: 1.5px solid var(--muted-3); border-bottom: 1.5px solid var(--muted-3);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
  }
  .gnb-item.is-expanded > .gnb-link::after {
    transform: rotate(225deg) translate(-2px, -2px);
    border-color: var(--navy);
  }
  .gnb-util-mobile {
    display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
  }
  .gnb-util-mobile .util-link { font-size: 15px; padding: 10px 12px; }
  .gnb-util-mobile .util-name { font-size: 15px; }
  .util-link--opt { display: inline-block; }   /* 드로어에서는 다시 표시 */
  .gnb-cta-mobile { display: flex; margin-top: 14px; }

  .about-split { grid-template-columns: 1fr; gap: 32px; }
  .focus-grid, .outline-grid { grid-template-columns: 1fr; }
  .grid-hair--3 { grid-template-columns: repeat(2, 1fr); }
  .grid-hair--6 { grid-template-columns: repeat(4, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .greeting { grid-template-columns: 1fr; gap: 40px; }
  .greeting-photo { aspect-ratio: 16 / 10; }
  .purpose-grid { grid-template-columns: 1fr; }
  .org-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
  .program { grid-template-columns: 1fr; gap: 32px; padding: 48px 36px; }
  .step-grid { grid-template-columns: repeat(2, 1fr); }
  .main-hero { height: auto; padding: 120px 0 0; }
  .main-hero-body { padding: 0 var(--gut) 180px; }
}

/* 모바일 */
@media (max-width: 768px) {
  :root { --gut: 20px; --header-h: 68px; }

  body { font-size: 15px; }

  .logo-mark { width: 36px; height: 36px; font-size: 12px; }
  .logo-text strong { font-size: 16px; }
  .logo-text em { font-size: 9.5px; }

  .main-hero { padding: 72px 0 0; }
  .main-hero-body { padding: 0 var(--gut) 150px; }
  .main-hero-body h1 { font-size: 34px; margin-bottom: 18px; }
  .main-hero-body p { font-size: 16px; margin-bottom: 32px; }
  .main-hero-actions .btn { width: 100%; }
  .hero-notice-inner { gap: 12px; flex-wrap: wrap; padding: 16px var(--gut); font-size: 13.5px; }
  .hero-notice .title { flex: 1 1 100%; order: 3; white-space: normal; }

  .page-hero { padding: 48px var(--gut); }
  .page-hero h1 { font-size: 30px; }
  .page-body { padding: 56px var(--gut) 72px; gap: 64px; }

  .section, .section--tight { padding: 64px var(--gut); }
  .section-head { margin-bottom: 32px; }
  .section-head h2, .about-split h2 { font-size: 26px; }
  .sec-title { font-size: 25px; margin-bottom: 28px; }

  .grid-hair--3, .grid-hair--2, .news-grid { grid-template-columns: 1fr; }
  .grid-hair--6 { grid-template-columns: repeat(3, 1fr); }

  .focus-card { padding: 36px 28px; }
  .focus-card h3 { font-size: 23px; }
  .focus-card .bg-no { font-size: 110px; }
  .outline-card { padding: 30px 26px; }
  .benefit-card { padding: 32px 26px; }

  .cta-band { padding: 56px var(--gut); }
  .cta-band .title, .cta-box .title { font-size: 23px; }
  .cta-band .btn, .cta-box .btn { width: 100%; }
  .cta-box { padding: 34px 28px; }

  .greeting h2 { font-size: 24px; }
  .greeting p { font-size: 15.5px; line-height: 1.95; }
  .officer-row { flex-wrap: wrap; gap: 8px 16px; }
  .officer-row .role { width: 90px; }
  .officer-row .note { width: 100%; }
  .articles-box { padding: 28px 24px; }

  .program-list { padding: 56px var(--gut) 72px; }
  .program { padding: 36px 24px; }
  .program h2 { font-size: 22px; }

  /* 회비표 — 카드형으로 재배치 */
  .fee-row--head { display: none; }
  .fee-row--body { grid-template-columns: 1fr; padding: 8px 0; }
  .fee-row--body > div { padding: 10px 20px; display: flex; gap: 12px; }
  .fee-cell-label { display: block; flex: none; width: 76px; color: var(--muted-2); font-size: 13.5px; }

  .step-grid { grid-template-columns: 1fr; }
  .step-bar { grid-template-columns: repeat(2, 1fr); gap: 10px 12px; }

  .join-inner { padding: 48px var(--gut) 72px; }
  .form-card { padding: 32px 24px; }
  .form-grid, .pick-grid { grid-template-columns: 1fr; gap: 20px; }
  .form-legend { font-size: 19px; }
  .form-submit .btn { width: 100%; }
  .result-card { padding: 48px 26px; }
  .result-card h2 { font-size: 24px; }

  .board-inner { padding: 44px var(--gut) 72px; }
  .tab { padding: 15px 20px; font-size: 15px; }
  .notice-row { flex-wrap: wrap; gap: 10px 16px; padding: 20px 4px; }
  .notice-row .t { flex: 1 1 100%; order: 3; font-size: 16px; }
  .file-cell { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px; }

  .site-footer { padding: 48px var(--gut) 36px; }
  .footer-top { gap: 32px; }
  .footer-nav { gap: 28px 40px; }

  .popup-dim { padding: 16px; }
  .popup-head { padding: 32px 26px 28px; }
  .popup-title { font-size: 25px; }
  .popup-body { padding: 24px 26px 28px; }
  .popup-actions .btn { min-width: 0; flex: 1 1 100%; }
}

@media (max-width: 560px) {
  .grid-hair--6 { grid-template-columns: repeat(2, 1fr); }
  .step-bar { grid-template-columns: 1fr; }
  .footer-bottom { gap: 12px; }
}

/* 준비 중 안내 — 콘텐츠가 아직 없는 영역
   빈 칸을 늘어놓는 것보다 한 줄 안내가 완성도 있게 읽힙니다. */
.coming-soon {
  border: 1px solid var(--line); background: var(--bg-card);
  padding: 64px 32px; text-align: center;
}
.coming-soon-title {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  color: var(--ink); letter-spacing: -.03em; margin-bottom: 12px;
}
.coming-soon-desc {
  font-size: 15px; line-height: 1.9; color: var(--muted); font-weight: 300;
}
@media (max-width: 768px) {
  .coming-soon { padding: 44px 20px; }
  .coming-soon-title { font-size: 17.5px; }
  .coming-soon-desc { font-size: 14px; }
}

/* 주소 입력 — 우편번호 + 찾기 버튼 한 줄, 그 아래 주소·상세주소 */
/* 주소 입력 — 우편번호 + 찾기 버튼 한 줄, 그 아래 주소·상세주소
   ※ 간격은 .field 의 gap(9px)이 이미 주고 있습니다.
     여기에 margin 을 또 얹으면 한 줄만 더 벌어져 어긋나 보입니다. */
.field--wide { grid-column: 1 / -1; }

.addr-row { display: flex; gap: 8px; align-items: stretch; }
.addr-row input { flex: 0 0 150px; text-align: center; letter-spacing: .04em; }
.addr-row .btn { flex: none; padding: 0 22px; font-size: 14px; }

/* 우편번호·주소는 검색으로만 채웁니다. 눌러도 커서가 안 잡히게 하되,
   회색으로 죽여 두면 "입력이 안 되는 칸"처럼 보이므로 흰 배경을 유지합니다. */
.field input[readonly] {
  background: #fff; color: var(--ink); cursor: pointer;
}
.field input[readonly]::placeholder { color: var(--muted-3); }

@media (max-width: 560px) {
  .addr-row input { flex: 1; }
}