@charset "utf-8";
/* ============================================================================
   (사)재한외국인사회통합지원센터 — 디자인 시스템
   모바일 퍼스트 / KWCAG 2.2 대응 / 브랜드 그린 #097c25 승계
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. 토큰
   ------------------------------------------------------------------------ */
:root {
  /* 브랜드 그린 — 레거시 #097c25 를 기준으로 스케일 구성 */
  --g-50:  #f0f9f2;
  --g-100: #dcf0e1;
  --g-200: #b9e1c4;
  --g-300: #8ccb9f;
  --g-400: #58ad72;
  --g-500: #2d9450;
  --g-600: #097c25;   /* ← 레거시 아이덴티티 컬러 */
  --g-700: #076520;
  --g-800: #06501b;
  --g-900: #043a13;

  /* 보조 라임 (레거시 CI 이미지의 밝은 녹색) */
  --lime-400: #8cc63f;
  --lime-500: #74ad2a;

  /* 중립 */
  --n-0:   #ffffff;
  --n-25:  #fbfcfb;
  --n-50:  #f5f7f6;
  --n-100: #eceff0;
  --n-200: #dfe3e5;
  --n-300: #c3c9cc;
  --n-400: #8b9498;   /* 3.09:1 — 경계선·플레이스홀더 등 비텍스트 전용 */
  --n-500: #656e72;   /* 5.22:1 — 본문 보조 텍스트 최소 등급 */
  --n-600: #515a5e;
  --n-700: #3a4245;
  --n-800: #252b2d;
  --n-900: #14181a;

  /* 상태 */
  --info:   #1d6fd0;
  --warn:   #b7791f;
  --danger: #c02b2b;

  /* 의미 토큰 */
  --brand:        var(--g-600);
  --brand-strong: var(--g-700);
  --brand-soft:   var(--g-50);
  --text:         var(--n-800);
  --text-muted:   var(--n-500);
  --text-invert:  var(--n-0);
  --bg:           var(--n-0);
  --bg-soft:      var(--n-50);
  --line:         var(--n-200);
  --line-strong:  var(--n-300);

  /* 타이포 */
  --ff: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

  --fs-xs:  .75rem;    /* 12 */
  --fs-sm:  .8125rem;  /* 13 */
  --fs-md:  .875rem;   /* 14 */
  --fs-base: .9375rem; /* 15 */
  --fs-lg:  1.0625rem; /* 17 */
  --fs-xl:  1.25rem;   /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: 1.875rem;  /* 30 */
  --fs-4xl: 2.25rem;   /* 36 */

  /* 간격 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* 형태 */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 24, 26, .06);
  --shadow-md: 0 2px 8px rgba(20, 24, 26, .08);
  --shadow-lg: 0 8px 28px rgba(20, 24, 26, .12);

  --container: 1200px;
  --header-h: 60px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 1024px) {
  :root { --header-h: 116px; }
}

/* ---------------------------------------------------------------------------
   2. 리셋
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* 포커스 링 — 접근성 필수. 절대 outline:none 하지 않는다 */
:focus-visible {
  outline: 3px solid var(--g-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 스크린리더 전용 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 본문 바로가기 */
.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: var(--sp-3) var(--sp-6);
  background: var(--brand); color: var(--text-invert);
  font-weight: 700; border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); text-decoration: none; }

/* ---------------------------------------------------------------------------
   3. 레이아웃
   ------------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px)  { .container { padding-inline: var(--sp-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--sp-8); } }

.section { padding-block: var(--sp-12); }
@media (min-width: 1024px) { .section { padding-block: var(--sp-20); } }

.section--soft { background: var(--bg-soft); }

/* ---------------------------------------------------------------------------
   4. 헤더
   ------------------------------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--n-0);
  border-bottom: 1px solid var(--line);
}

/* 상단 유틸리티 바 — 데스크톱만 */
.header__util { display: none; background: var(--g-800); color: rgba(255,255,255,.85); }
@media (min-width: 1024px) { .header__util { display: block; } }

.header__util .container {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-5); height: 34px; font-size: var(--fs-sm);
}
.header__util a { color: inherit; }
.header__util a:hover { color: var(--n-0); }
.header__util .util-name { color: var(--lime-400); font-weight: 700; }

/* 메인 바 */
.header__main .container {
  display: flex; align-items: center; gap: var(--sp-4);
  height: 60px;
}
@media (min-width: 1024px) { .header__main .container { height: 82px; gap: var(--sp-10); } }

.logo { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.logo:hover { text-decoration: none; }
.logo__mark {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--g-600), var(--lime-500));
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -.5px;
}
@media (min-width: 1024px) { .logo__mark { width: 46px; height: 46px; font-size: 15px; } }

/* 프론트 로고 이미지 (assets/img/logo.png, 원본 163×163)
   · 원형 엠블럼이지만 PNG 안에 흰 사각 배경이 포함돼 있다.
     헤더 바탕이 흰색이라 그대로 두면 경계가 보이지 않는다.
     헤더 색을 바꾸게 되면 배경이 투명한 로고로 교체해야 한다.
   · 전역 리셋의 img{height:auto} 보다 선택자 우선순위가 높아 크기가 유지된다.
   · 관리자 헤더는 계속 .logo__mark 텍스트 배지("ADM")를 쓴다 — 화면 구분용. */
.logo__img { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; }
@media (min-width: 1024px) { .logo__img { width: 46px; height: 46px; } }

.logo__text { display: flex; flex-direction: column; line-height: 1.25; }
.logo__ko { font-size: var(--fs-md); font-weight: 800; color: var(--n-900); letter-spacing: -.4px; }
.logo__en { font-size: 10px; color: var(--text-muted); letter-spacing: -.1px; }
@media (min-width: 1024px) { .logo__ko { font-size: var(--fs-lg); } .logo__en { font-size: var(--fs-xs); } }
@media (max-width: 400px)  { .logo__en { display: none; } }

/* 데스크톱 GNB */
.gnb { display: none; }
@media (min-width: 1024px) { .gnb { display: block; margin-left: auto; } }

.gnb__list { display: flex; gap: var(--sp-2); }
.gnb__link {
  display: block; padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-lg); font-weight: 700; color: var(--n-700);
  border-radius: var(--r-md); position: relative;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.gnb__link:hover { color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.gnb__link[aria-current="page"] { color: var(--brand); }
.gnb__link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: 2px;
  height: 3px; background: var(--brand); border-radius: var(--r-full);
}

/* 모바일 토글 */
.nav-toggle {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: var(--r-md);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block; width: 18px; height: 2px;
  background: var(--n-800); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* 모바일 드로어 */
.drawer {
  position: fixed; inset: var(--header-h) 0 0 auto;
  width: min(86vw, 340px);
  background: var(--n-0);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  overflow-y: auto; z-index: 99;
  padding-bottom: var(--sp-16);
}
.drawer.is-open { transform: translateX(0); }
@media (min-width: 1024px) { .drawer { display: none; } }

.drawer__auth {
  display: flex; gap: var(--sp-2); padding: var(--sp-4);
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.drawer__auth .btn { flex: 1; }

.drawer__group { border-bottom: 1px solid var(--line); }
.drawer__head {
  display: block; width: 100%; text-align: left;
  padding: var(--sp-4); background: none; border: 0;
  font-size: var(--fs-lg); font-weight: 700; color: var(--n-800);
}
.drawer__sub { padding: 0 var(--sp-4) var(--sp-3); }
.drawer__sub a {
  display: block; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-md); color: var(--text-muted); border-radius: var(--r-sm);
}
.drawer__sub a:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }

.backdrop {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(20, 24, 26, .45);
  opacity: 0; visibility: hidden; transition: opacity .26s var(--ease), visibility .26s;
}
.backdrop.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .backdrop { display: none; } }

/* ---------------------------------------------------------------------------
   5. 버튼
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px;                      /* 터치 타깃 44px — 접근성 기준 */
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 700; text-align: center;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--brand); color: var(--text-invert); }
.btn--primary:hover { background: var(--brand-strong); }

.btn--outline { background: var(--n-0); border-color: var(--line-strong); color: var(--n-700); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.btn--ghost { background: var(--n-100); color: var(--n-700); }
.btn--ghost:hover { background: var(--n-200); }

.btn--danger { background: var(--danger); color: var(--text-invert); }

.btn--white { background: var(--n-0); color: var(--brand); }
.btn--white:hover { background: var(--g-50); }

.btn--sm { min-height: 34px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn--lg { min-height: 52px; padding: var(--sp-3) var(--sp-8); font-size: var(--fs-lg); }
.btn--block { display: flex; width: 100%; }

/* ---------------------------------------------------------------------------
   6. 메인 — 히어로
   ------------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--g-800) 0%, var(--g-600) 55%, var(--lime-500) 140%);
  color: var(--text-invert);
}
.hero::after {                            /* 장식 — 스크린리더에 노출되지 않음 */
  content: ""; position: absolute; right: -12%; top: -30%;
  width: 60vw; height: 60vw; max-width: 640px; max-height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.13), transparent 62%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; padding-block: var(--sp-12); }
@media (min-width: 1024px) { .hero .container { padding-block: var(--sp-20); } }

.hero__eyebrow {
  display: inline-block; margin-bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-4);
  background: rgba(255,255,255,.16); border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
}
.hero__title {
  font-size: clamp(1.75rem, 5.4vw, 3rem);
  font-weight: 800; line-height: 1.28; letter-spacing: -.02em;
  margin-bottom: var(--sp-5);
}
.hero__title em { font-style: normal; color: #e9f7c9; }
.hero__desc {
  max-width: 60ch; font-size: var(--fs-lg);
  color: rgba(255,255,255,.9); margin-bottom: var(--sp-8);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------------------------------------------------------------------------
   7. 섹션 제목
   ------------------------------------------------------------------------ */
.sec-head { margin-bottom: var(--sp-8); }
.sec-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.sec-head__label {
  display: block; font-size: var(--fs-sm); font-weight: 800;
  color: var(--brand); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.sec-head__title {
  font-size: clamp(1.375rem, 3.6vw, 1.875rem);
  font-weight: 800; letter-spacing: -.02em; color: var(--n-900);
}
.sec-head__desc { margin-top: var(--sp-2); color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   8. 그리드 / 카드
   ------------------------------------------------------------------------ */
.grid { display: grid; gap: var(--sp-4); }

/* 그리드/플렉스 자식의 기본값 min-width:auto 는 min-content 아래로 줄지 않아,
   nowrap 텍스트나 긴 표가 들어가면 트랙을 밀어내 페이지에 가로 스크롤을 만든다.
   자식마다 개별로 잡지 않고 여기서 한 번에 차단한다. */
.grid > * { min-width: 0; }

/* 세로 스택 — 인라인 display:grid 대신 사용한다.
   그리드 자식의 min-width:0 을 함께 보장해 가로 오버플로를 막는다. */
.stack { display: grid; gap: var(--sp-6); }
.stack > * { min-width: 0; }
.stack--lg { gap: var(--sp-12); }
.stack--sm { gap: var(--sp-3); }
.stack--xs { gap: var(--sp-2); }

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .grid { gap: var(--sp-5); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) { .grid { gap: var(--sp-6); } }

/* 퀵링크 카드 */
.quick {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--n-0); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.quick:hover {
  border-color: var(--g-300); box-shadow: var(--shadow-md);
  transform: translateY(-2px); text-decoration: none;
}
.quick__icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
}
.quick__icon svg { width: 22px; height: 22px; }
.quick__title { font-size: var(--fs-lg); font-weight: 700; color: var(--n-900); }
.quick__desc  { font-size: var(--fs-md); color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   9. 게시글 목록 (메인)
   ------------------------------------------------------------------------ */
.tabs {
  display: flex; gap: var(--sp-1); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.tabs__btn {
  padding: var(--sp-3) var(--sp-4);
  background: none; border: 0; border-bottom: 3px solid transparent;
  font-size: var(--fs-lg); font-weight: 700; color: var(--text-muted);
  margin-bottom: -1px;
}
.tabs__btn[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }

.post-list { border-top: 1px solid var(--n-800); }
.post-list__item { border-bottom: 1px solid var(--line); }
.post-list__link {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-1);
}
.post-list__link:hover { text-decoration: none; }
.post-list__link:hover .post-list__title { color: var(--brand); text-decoration: underline; }
.post-list__title {
  flex: 1; min-width: 0;
  font-size: var(--fs-base); color: var(--n-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-list__date { flex-shrink: 0; font-size: var(--fs-sm); color: var(--n-500); }

.badge {
  display: inline-block; flex-shrink: 0;
  padding: 1px var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.6;
}
.badge--notice { background: var(--g-600); color: #fff; }
.badge--new    { background: #fdecec; color: var(--danger); }
.badge--secret { background: var(--n-100); color: var(--n-600); }
.badge--reply  { background: var(--n-100); color: var(--n-600); }

/* 갤러리 카드 */
.photo-card {
  display: block; border-radius: var(--r-lg); overflow: hidden;
  background: var(--n-0); border: 1px solid var(--line);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.photo-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.photo-card__thumb {
  aspect-ratio: 4 / 3; background: var(--n-100);
  display: grid; place-items: center; overflow: hidden;
}
.photo-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-card__thumb .ph { color: var(--n-500); font-size: var(--fs-sm); }
.photo-card__body { padding: var(--sp-4); }
.photo-card__title {
  font-size: var(--fs-base); font-weight: 700; color: var(--n-800);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5;
}
.photo-card__date { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--n-500); }

/* ---------------------------------------------------------------------------
   10. 후원 CTA
   ------------------------------------------------------------------------ */
.cta {
  background: var(--g-800); color: var(--text-invert);
  border-radius: var(--r-xl); padding: var(--sp-8);
  display: grid; gap: var(--sp-6);
}
@media (min-width: 768px) {
  .cta { grid-template-columns: 1fr auto; align-items: center; padding: var(--sp-10) var(--sp-12); }
}
.cta__title { font-size: var(--fs-2xl); font-weight: 800; margin-bottom: var(--sp-2); letter-spacing: -.02em; }
.cta__desc  { color: rgba(255,255,255,.82); }

/* ---------------------------------------------------------------------------
   11. 서브 페이지
   ------------------------------------------------------------------------ */
.page-hero {
  background: linear-gradient(120deg, var(--g-700), var(--g-600));
  color: var(--text-invert);
  padding-block: var(--sp-8);
}
@media (min-width: 1024px) { .page-hero { padding-block: var(--sp-12); } }
.page-hero__title { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
.breadcrumb li { color: rgba(255,255,255,.72); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); }
.breadcrumb a { color: rgba(255,255,255,.72); }
.breadcrumb [aria-current="page"] { color: var(--n-0); font-weight: 600; }

/* 서브 레이아웃 — 모바일은 1단, 데스크톱은 사이드바 + 본문 */
.sub-layout { display: grid; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-16); }
@media (min-width: 1024px) {
  .sub-layout { grid-template-columns: 220px 1fr; gap: var(--sp-12); padding-block: var(--sp-12) var(--sp-20); }
}

/* 모바일: 가로 스크롤 탭 / 데스크톱: 세로 목록 */
.lnb { min-width: 0; }
.lnb__title { display: none; }
@media (min-width: 1024px) {
  .lnb__title {
    display: block; padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
    border-bottom: 2px solid var(--n-800);
    font-size: var(--fs-xl); font-weight: 800; color: var(--n-900);
  }
}

.lnb__list {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.lnb__list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .lnb__list { display: block; overflow: visible; border-bottom: 0; padding-bottom: 0; }
}

.lnb__link {
  display: block; white-space: nowrap; flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--fs-md); font-weight: 600; color: var(--text-muted);
  background: var(--n-50);
}
.lnb__link:hover { color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.lnb__link[aria-current="page"] { background: var(--brand); color: var(--text-invert); }

@media (min-width: 1024px) {
  .lnb__link {
    border-radius: 0; background: none;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-base);
  }
  .lnb__link[aria-current="page"] {
    background: var(--brand-soft); color: var(--brand); font-weight: 700;
    border-bottom-color: var(--g-200);
  }
}

.sub-content { min-width: 0; }
.sub-content__title {
  font-size: clamp(1.375rem, 3.6vw, 1.75rem); font-weight: 800;
  letter-spacing: -.02em; color: var(--n-900);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-6);
  border-bottom: 2px solid var(--n-800);
}

/* ---------------------------------------------------------------------------
   12. 본문 타이포 (prose)
   ------------------------------------------------------------------------ */
.prose { font-size: var(--fs-base); line-height: 1.85; color: var(--n-700); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h3 {
  margin-top: var(--sp-10); font-size: var(--fs-xl); font-weight: 800;
  color: var(--n-900); letter-spacing: -.02em;
}
.prose h4 {
  margin-top: var(--sp-6); font-size: var(--fs-lg); font-weight: 700; color: var(--n-800);
}
.prose strong { color: var(--n-900); font-weight: 700; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose ul { padding-left: var(--sp-5); list-style: disc; }
.prose ol { padding-left: var(--sp-5); list-style: decimal; }
.prose li + li { margin-top: var(--sp-2); }
.prose img { border-radius: var(--r-md); }
.prose table { margin-block: var(--sp-6); font-size: var(--fs-md); }
.prose th, .prose td { border: 1px solid var(--line); padding: var(--sp-3); }
.prose th { background: var(--n-50); font-weight: 700; }
.prose blockquote {
  padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--g-300);
  background: var(--brand-soft); border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* 넓은 콘텐츠는 자체 스크롤 — 페이지 가로 스크롤 금지 */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 강조 박스 */
.callout {
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: var(--brand-soft); border: 1px solid var(--g-200);
}
.callout__title { font-weight: 800; color: var(--g-800); margin-bottom: var(--sp-2); }

/* 번호 붙은 사업 카드 */
.numbered { display: grid; gap: var(--sp-4); }
.numbered__item {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-5); background: var(--n-0);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
@media (min-width: 768px) {
  .numbered__item { grid-template-columns: 56px 1fr; gap: var(--sp-5); padding: var(--sp-6); }
}
.numbered__no {
  font-size: var(--fs-2xl); font-weight: 800; color: var(--g-200);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.numbered__title { font-size: var(--fs-lg); font-weight: 700; color: var(--n-900); margin-bottom: var(--sp-3); }
.numbered__body { color: var(--n-600); }
.numbered__body ul { margin-top: var(--sp-3); padding-left: var(--sp-5); list-style: disc; }
.numbered__body li { font-size: var(--fs-md); }
.numbered__body li + li { margin-top: var(--sp-1); }

/* 정의형 표 (오시는 길 · 후원 계좌) */
.deflist { border-top: 2px solid var(--n-800); }
.deflist__row { display: grid; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .deflist__row { grid-template-columns: 140px 1fr; } }
.deflist__dt {
  padding: var(--sp-3) var(--sp-4); background: var(--n-50);
  font-weight: 700; color: var(--n-800); font-size: var(--fs-md);
}
.deflist__dd { padding: var(--sp-3) var(--sp-4); color: var(--n-600); }

/* 조직도 */
.orgchart { text-align: center; }
.orgchart__node {
  display: inline-block; min-width: 120px;
  padding: var(--sp-2) var(--sp-5);
  background: var(--brand); color: var(--text-invert);
  border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-md);
}
.orgchart__node--sub { background: var(--g-500); }
.orgchart__node--leaf {
  background: var(--n-0); color: var(--n-700);
  border: 1px solid var(--g-300); font-weight: 600; min-width: 0;
}
.orgchart__line { width: 2px; height: var(--sp-5); background: var(--g-300); margin-inline: auto; }
.orgchart__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

/* ---------------------------------------------------------------------------
   13. 게시판
   ------------------------------------------------------------------------ */
.board-tools {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.board-count { font-size: var(--fs-md); color: var(--text-muted); }
.board-count strong { color: var(--brand); font-weight: 800; }

.search-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.search-form select,
.search-form input[type="search"] {
  min-height: 42px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--n-0);
}
.search-form input[type="search"] { min-width: 160px; flex: 1; }

/* 데스크톱 표 / 모바일 카드 — 동일 마크업, 표시만 전환 */
.board-table { display: none; }
@media (min-width: 768px) {
  .board-table { display: table; border-top: 2px solid var(--n-800); font-size: var(--fs-md); }
  .board-cards { display: none; }
}
.board-table th {
  padding: var(--sp-3); background: var(--n-50);
  border-bottom: 1px solid var(--line); font-weight: 700; color: var(--n-700);
  font-size: var(--fs-sm);
}
.board-table td { padding: var(--sp-3); border-bottom: 1px solid var(--line); text-align: center; color: var(--text-muted); }
.board-table td.col-title { text-align: left; }
.board-table tr:hover td { background: var(--n-25); }
.board-table .col-title a { color: var(--n-800); font-weight: 500; }
.board-table .col-title a:hover { color: var(--brand); }
.board-table tr.is-notice td { background: var(--g-50); }
.board-table tr.is-notice .col-title a { font-weight: 700; }

.board-cards { border-top: 2px solid var(--n-800); }
.board-cards__item { padding: var(--sp-4) var(--sp-1); border-bottom: 1px solid var(--line); }
.board-cards__title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-base); font-weight: 600; color: var(--n-800);
  margin-bottom: var(--sp-2);
}
.board-cards__title:hover { text-decoration: none; color: var(--brand); }
.board-cards__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--n-500);
}

.empty {
  padding: var(--sp-16) var(--sp-4); text-align: center;
  color: var(--text-muted); border-bottom: 1px solid var(--line);
}
.empty__icon { font-size: var(--fs-3xl); color: var(--n-300); margin-bottom: var(--sp-3); }

/* 페이지네이션 */
.paging { display: flex; justify-content: center; margin-top: var(--sp-8); }
.paging ul { display: flex; gap: var(--sp-1); }
.pg {
  display: grid; place-items: center;
  min-width: 40px; height: 40px; padding-inline: var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-md); color: var(--n-600); background: var(--n-0);
}
a.pg:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pg.is-active { background: var(--brand); border-color: var(--brand); color: var(--text-invert); font-weight: 700; }

/* 게시글 보기 */
.post-view { border-top: 2px solid var(--n-800); }
.post-view__head { padding: var(--sp-5) var(--sp-1); border-bottom: 1px solid var(--line); }
.post-view__title {
  font-size: var(--fs-xl); font-weight: 800; color: var(--n-900);
  line-height: 1.45; letter-spacing: -.02em; margin-bottom: var(--sp-3);
}
@media (min-width: 768px) { .post-view__title { font-size: var(--fs-2xl); } }
.post-view__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.post-view__files {
  padding: var(--sp-4) var(--sp-1); border-bottom: 1px solid var(--line);
  background: var(--n-25);
}
.post-view__files li + li { margin-top: var(--sp-2); }
.post-view__files a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-md); color: var(--n-700);
}
.post-view__files a:hover { color: var(--brand); }
.post-view__body { padding: var(--sp-8) var(--sp-1) var(--sp-12); border-bottom: 1px solid var(--line); }

.post-nav { border-bottom: 1px solid var(--line); }
.post-nav__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-1); border-bottom: 1px solid var(--line);
  font-size: var(--fs-md);
}
.post-nav__item:last-child { border-bottom: 0; }
.post-nav__label { flex-shrink: 0; font-weight: 700; color: var(--n-500); min-width: 56px; }
.post-nav__link {
  min-width: 0; color: var(--n-700);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-nav__link:hover { color: var(--brand); }

.post-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: space-between; margin-top: var(--sp-6);
}
.post-actions__group { display: flex; gap: var(--sp-2); }

/* 댓글 */
.comments { margin-top: var(--sp-12); }
.comments__title { font-size: var(--fs-lg); font-weight: 800; margin-bottom: var(--sp-4); }
.comments__title span { color: var(--brand); }
.comment { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.comment__head {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline;
  margin-bottom: var(--sp-2);
}
.comment__writer { font-weight: 700; color: var(--n-800); font-size: var(--fs-md); }
.comment__date { font-size: var(--fs-sm); color: var(--n-500); }
.comment__body { color: var(--n-600); font-size: var(--fs-md); }

/* ---------------------------------------------------------------------------
   14. 폼
   ------------------------------------------------------------------------ */
.form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-2); }

.form-label { font-size: var(--fs-md); font-weight: 700; color: var(--n-800); }
.form-label .req { color: var(--danger); margin-left: 2px; }

.form-control {
  width: 100%; min-height: 46px;
  padding: var(--sp-3); background: var(--n-0);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--g-100);
  outline: none;
}
.form-control:disabled, .form-control[readonly] { background: var(--n-50); color: var(--text-muted); }
textarea.form-control { min-height: 200px; resize: vertical; line-height: 1.7; }

.form-help  { font-size: var(--fs-sm); color: var(--text-muted); }
.form-error { font-size: var(--fs-sm); color: var(--danger); font-weight: 600; }

.form-check { display: flex; align-items: flex-start; gap: var(--sp-2); }
.form-check input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--brand); }
.form-check label { font-size: var(--fs-md); color: var(--n-700); }

.form-inline { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.form-inline .form-control { flex: 1; min-width: 0; }

.form-actions {
  display: flex; gap: var(--sp-2); justify-content: center;
  margin-top: var(--sp-4); padding-top: var(--sp-6); border-top: 1px solid var(--line);
}

/* 인증 카드 (로그인 · 가입) */
.auth-wrap { max-width: 420px; margin-inline: auto; padding-block: var(--sp-12) var(--sp-20); }
.auth-title { font-size: var(--fs-2xl); font-weight: 800; text-align: center; margin-bottom: var(--sp-2); }
.auth-desc  { text-align: center; color: var(--text-muted); margin-bottom: var(--sp-8); }
.auth-links {
  display: flex; justify-content: center; gap: var(--sp-4);
  margin-top: var(--sp-5); font-size: var(--fs-md); color: var(--text-muted);
}
.auth-links a:hover { color: var(--brand); }

.alert {
  padding: var(--sp-4); border-radius: var(--r-md);
  font-size: var(--fs-md); margin-bottom: var(--sp-5);
}
.alert--error { background: #fdecec; color: #8f1f1f; border: 1px solid #f3c9c9; }
.alert--info  { background: var(--brand-soft); color: var(--g-800); border: 1px solid var(--g-200); }

/* ---------------------------------------------------------------------------
   15. 푸터
   ------------------------------------------------------------------------ */
.footer { background: var(--n-800); color: rgba(255,255,255,.7); font-size: var(--fs-md); }

.footer__links {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__links a { color: rgba(255,255,255,.82); font-size: var(--fs-md); }
.footer__links a:hover { color: var(--n-0); }
.footer__links .is-strong { font-weight: 700; color: var(--n-0); }

.footer__main { display: grid; gap: var(--sp-6); padding-block: var(--sp-8); }
@media (min-width: 768px) { .footer__main { grid-template-columns: 1fr auto; gap: var(--sp-12); } }

.footer__org { font-size: var(--fs-lg); font-weight: 700; color: var(--n-0); margin-bottom: var(--sp-3); }
.footer__info { display: grid; gap: var(--sp-1); font-size: var(--fs-md); line-height: 1.75; }
.footer__copy {
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--fs-sm); color: rgba(255,255,255,.5);
}

/* 상단 이동 */
.to-top {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 60;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--n-0); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md); color: var(--n-700);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover { border-color: var(--brand); color: var(--brand); }

/* ---------------------------------------------------------------------------
   15-1. 카카오맵(다음 지도퍼가기) 임베드
   ------------------------------------------------------------------------
   외부 위젯이라 이 사이트의 전역 리셋과 충돌한다. 두 가지를 되돌려야 한다.
     · box-sizing: border-box  → 위젯 CSS 는 content-box 기준으로 만들어져
                                 컨트롤과 타일 위치가 어긋난다
     · img { max-width:100%; height:auto } → 지도 타일이 축소·왜곡된다
   또한 mapWidth 가 640px 로 고정 출력되므로 컨테이너 폭에 맞춰 늘려 준다.
   ------------------------------------------------------------------------ */
.map-embed { margin: 0; }

.root_daum_roughmap,
.root_daum_roughmap * { box-sizing: content-box; }

.root_daum_roughmap img { max-width: none; height: auto; }

/* 고정 640px → 컨테이너 폭에 맞춤 */
.root_daum_roughmap { width: 100% !important; }
.root_daum_roughmap .wrap_map { width: 100% !important; height: 360px !important; }

/* 위젯이 지도 아래에 붙이는 자체 주소/전화 패널(.cont)은 숨긴다.
   바로 아래 우리 주소 표가 더 정확하고(부산데파트 426호까지) 전화·팩스도 있는데,
   위젯 쪽은 등록 정보가 비어 있어 "전화 -" 로 나온다. */
.root_daum_roughmap .cont { display: none !important; }

/* 모서리를 사이트 톤에 맞춤 */
.map-embed .root_daum_roughmap,
.map-embed .root_daum_roughmap .wrap_map {
  overflow: hidden;
  border-radius: var(--r-lg);
}

@media (max-width: 640px) {
  .root_daum_roughmap .wrap_map { height: 280px !important; }
}

/* 인쇄물에서는 지도 대신 아래 주소 표가 정보를 전달한다 */
@media print {
  .map-embed { display: none; }
}

/* ---------------------------------------------------------------------------
   15-2. CI 페이지 (center/ci.php)
   ------------------------------------------------------------------------ */
.ci-head {
  font-size: var(--fs-lg); font-weight: 800; color: var(--n-900);
  padding-left: var(--sp-3); margin-bottom: var(--sp-3);
  border-left: 4px solid var(--brand); line-height: 1.35;
}
.ci-desc { color: var(--n-600); line-height: 1.85; }
.ci-desc strong { color: var(--n-900); font-weight: 700; }

.ci-card {
  margin-top: var(--sp-5); padding: var(--sp-8) var(--sp-6);
  background: var(--n-25); border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* 로고 + 해설 2단 — 모바일에서는 세로로 쌓인다 */
.ci-card--split { display: grid; gap: var(--sp-6); justify-items: center; }
@media (min-width: 640px) {
  .ci-card--split {
    grid-template-columns: auto 1fr;
    align-items: center; gap: var(--sp-10);
    padding-inline: var(--sp-8);
  }
}
.ci-card--split > * { min-width: 0; }

.ci-figure { margin: 0; display: grid; place-items: center; }

/* 로고 PNG 는 원형 엠블럼이지만 파일 안에 흰 사각 배경이 들어 있다.
   카드 바탕(#fbfcfb) 위에서는 그 사각형이 드러나므로 원형으로 잘라 낸다.
   (배경이 투명한 로고로 교체하면 이 규칙은 없어도 된다) */
.ci-figure--round img {
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(20, 24, 26, .10);
}

/* 심볼 해설 */
.ci-meaning { display: grid; gap: var(--sp-5); width: 100%; }
.ci-meaning__row { display: grid; gap: var(--sp-1); }
.ci-meaning dt {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-base); font-weight: 800; color: var(--g-800);
}
/* 원본 CI 페이지의 지시선을 재현 */
.ci-meaning dt::after {
  content: ""; flex: 1; height: 1px; background: var(--g-200);
}
.ci-meaning dd { margin: 0; font-size: var(--fs-md); color: var(--n-600); }

/* 색상 견본 */
.ci-swatches {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ci-swatch {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--n-0); min-width: 0;
}
.ci-swatch__chip {
  display: block; height: 76px; border-radius: var(--r-md);
  border: 1px solid rgba(20, 24, 26, .12);
}
.ci-swatch__chip--sm { height: 40px; width: 120px; }
.ci-swatch__name { font-weight: 800; color: var(--n-900); font-size: var(--fs-base); }
.ci-swatch__code {
  font-size: var(--fs-sm); color: var(--n-600);
  font-variant-numeric: tabular-nums; line-height: 1.6;
}
.ci-swatch__memo { font-size: var(--fs-sm); color: var(--text-muted); }

/* 금색 계조 띠 */
.ci-gradient {
  display: block; height: 44px; margin-top: var(--sp-3);
  border-radius: var(--r-md); border: 1px solid rgba(20, 24, 26, .12);
  background: linear-gradient(90deg, #E4DDB2 0%, #BEA63F 50%, #94783B 100%);
}

/* ---------------------------------------------------------------------------
   16. 유틸
   ------------------------------------------------------------------------ */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }

/* 인쇄 */
@media print {
  .header, .footer, .to-top, .lnb, .board-tools, .post-actions, .drawer, .backdrop { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .sub-layout { grid-template-columns: 1fr; }
}