@charset "UTF-8";
/* ==========================================================================
   ONS STOP SERVICE — 포항 외국인 생활정보 서비스
   style.css
   1. Design tokens
   2. Reset & base
   3. Layout
   4. Header / Global nav
   5. Footer
   6. Buttons, tags, chips
   7. Image placeholder
   8. Cards & grids
   9. Hero & page head
   10. Filter & search
   11. Accordion
   12. Tabs
   13. Modal
   14. Info list & table
   15. Forms
   16. Utilities
   17. Responsive (tablet 768~1023 / mobile ~767)
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* ---- Neutral — 편집 디자인 기준 (순수 흰색·검정 미사용) ---- */
  --c-canvas: #FDFDFD;          /* 전체 배경 */
  --c-surface: #F6F6F4;         /* 꼭 필요한 카드에만 쓰는 면 */
  --c-subtle: #FDFDFD;          /* 보조 섹션 — 색이 아니라 선으로 나눈다 */
  --c-line: #E8E8E8;            /* 구분선·테두리 */
  --c-line-hover: #C9C9C9;      /* Hover 테두리 */
  --c-ink: #272727;             /* 본문 텍스트 */
  --c-ink-2: #737373;           /* 보조 텍스트 */
  --c-ink-3: #A3A3A3;           /* 비활성·캡션 */
  --c-on-dark: #FDFDFD;         /* 어두운 배경 위 텍스트 */
  --c-disabled-bg: #F0F0EE;

  /* 하위 호환 별칭 — 면을 채우지 않고 1px 선으로만 구분한다 */
  --c-bg: var(--c-canvas);
  --c-bg-soft: var(--c-canvas);
  --c-bg-soft-2: #F0F0EE;   /* 태그 등 작은 요소에만 남긴다 */
  --c-line-2: #EFEFEF;

  /* ---- 카테고리 팔레트 ---- */
  --main-100:#E6F0F5; --main-200:#B8D5E3; --main-300:#82B5CD; --main-400:#3C8BAE;
  --main-500:#005378; --main-600:#004968; --main-700:#003D57; --main-800:#003044; --main-900:#002231;

  --life-100:#EBF7FC; --life-200:#C8EAF7; --life-300:#9DDAF0; --life-400:#70C5E2;
  --life-500:#40A6D2; --life-600:#258AB5; --life-700:#1A6E92; --life-800:#145470; --life-900:#0D3A4D;

  --gold-100:#FFF8E9; --gold-200:#FDEAC6; --gold-300:#F8D99C; --gold-400:#F0C678;
  --gold-500:#E9BC69; --gold-600:#C99A43; --gold-700:#A67B32; --gold-800:#845E28; --gold-900:#5E421D;

  --green-100:#EAF8F6; --green-200:#C7ECE7; --green-300:#9ADDD6; --green-400:#6BC8C0;
  --green-500:#45AEA3; --green-600:#2F9086; --green-700:#26756D; --green-800:#1E5B55; --green-900:#15403C;

  --center-100:#F0F1F8; --center-200:#D9DCEF; --center-300:#B8BEDD; --center-400:#9099C6;
  --center-500:#6B76AE; --center-600:#566195; --center-700:#454D78; --center-800:#353C5E; --center-900:#272C45;

  /* ---- 현재 페이지의 강조색 (기본 = Main / 기업) ---- */
  --a-100: var(--main-100); --a-200: var(--main-200); --a-300: var(--main-300);
  --a-400: var(--main-400); --a-500: var(--main-500); --a-600: var(--main-600);
  --a-700: var(--main-700); --a-800: var(--main-800); --a-900: var(--main-900);
  --a-text: var(--main-500);        /* 밝은 배경 위 강조 텍스트 */
  --btn-bg: var(--main-500);        /* Primary Default */
  --btn-bg-hover: var(--main-600);
  --btn-bg-active: var(--main-700);
  --btn-text: var(--c-on-dark);

  /* ---- 시스템 컬러 ---- */
  --c-ok-soft: #EAF7F1; --c-ok: #16805F; --c-ok-text: #0E5A43;
  --c-info-soft: #EAF4FA; --c-info: #166D9A; --c-info-text: #0D4E70;
  --c-warn-soft: #FFF4DE; --c-warn: #B96A00; --c-warn-text: #7A4300;
  --c-danger-soft: #FDECEC; --c-danger: #C33E3E; --c-danger-text: #8D2727;
  /* Error Base(#C33E3E)는 어두운 배경에서 3.53:1 로 부족하다.
     어두운 면 위에 올리는 빨강은 이 값을 쓴다 (#001824 대비 4.94:1). */
  --c-danger-on-dark: #E5544E;

  /* Type */
  --font-base: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR",
    "맑은 고딕", "Malgun Gothic", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;

  /* 타입 스케일 — 제목은 clamp 로 자연스럽게 줄인다 */
  --fs-display: clamp(32px, 5.2vw, 68px);   /* Hero */
  --fs-h1: clamp(28px, 3.8vw, 46px);        /* Section Title */
  --fs-h2: clamp(28px, 3vw, 38px);
  --fs-h3: 24px;
  --fs-h4: 21px;                            /* Card Title */
  --fs-body: 17px;
  --fs-sm: 15px;
  --fs-xs: 13px;                            /* Caption */
  --lh-tight: 1.08;
  --lh-title: 1.16;
  --lh-body: 1.65;
  --measure: 62ch;                          /* 본문 한 줄 너비 */

  /* Space — 8px 배수 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 136px;        /* 섹션 사이 */

  /* Shape — 작은 라운드, 그림자 없음 */
  --radius: 5px;        /* 칩·태그·입력 — 전 UI 라운드 5px로 통일 */
  --radius-btn: 5px;    /* 버튼 */
  --radius-card: 5px;   /* 카드·이미지 */
  --shadow-1: none;
  --shadow-2: 0 2px 8px rgba(39, 39, 39, .06);
  --shadow-3: 0 16px 48px rgba(39, 39, 39, .14);
  --focus-ring: 0 0 0 2px var(--c-canvas), 0 0 0 4px var(--main-500);

  /* Motion */
  --t-fast: 180ms;
  --t-base: 240ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Layout — 12컬럼 */
  --container: 1320px;
  --gutter: 80px;
  --cols: 12;
  --header-h: 76px;
}

/* ==========================================================================
   1-2. 페이지별 카테고리 강조색
   body[data-page] 값에 따라 --a-* 와 버튼 토큰만 바꿔 끼운다.
   ========================================================================== */
body[data-page="life"],
body[data-page="workers"],
body[data-page="students"] {
  --a-100: var(--life-100); --a-200: var(--life-200); --a-300: var(--life-300);
  --a-400: var(--life-400); --a-500: var(--life-500); --a-600: var(--life-600);
  --a-700: var(--life-700); --a-800: var(--life-800); --a-900: var(--life-900);
  --a-text: var(--life-700);
  --btn-bg: var(--life-600);
  --btn-bg-hover: var(--life-700);
  --btn-bg-active: var(--life-800);
  --btn-text: var(--c-on-dark);
}

body[data-page="culture"] {
  --a-100: var(--gold-100); --a-200: var(--gold-200); --a-300: var(--gold-300);
  --a-400: var(--gold-400); --a-500: var(--gold-500); --a-600: var(--gold-600);
  --a-700: var(--gold-700); --a-800: var(--gold-800); --a-900: var(--gold-900);
  --a-text: var(--gold-800);
  --btn-bg: var(--gold-500);
  --btn-bg-hover: var(--gold-600);
  --btn-bg-active: var(--gold-700);
  --btn-text: var(--c-ink);
}

/* 문화 안에서도 공간·프로그램 페이지는 Green 계열 */
body[data-page="culture"].theme-green {
  --a-100: var(--green-100); --a-200: var(--green-200); --a-300: var(--green-300);
  --a-400: var(--green-400); --a-500: var(--green-500); --a-600: var(--green-600);
  --a-700: var(--green-700); --a-800: var(--green-800); --a-900: var(--green-900);
  --a-text: var(--green-700);
  --btn-bg: var(--green-700);
  --btn-bg-hover: var(--green-800);
  --btn-bg-active: var(--green-900);
  --btn-text: var(--c-on-dark);
}

body[data-page="centers"] {
  --a-100: var(--center-100); --a-200: var(--center-200); --a-300: var(--center-300);
  --a-400: var(--center-400); --a-500: var(--center-500); --a-600: var(--center-600);
  --a-700: var(--center-700); --a-800: var(--center-800); --a-900: var(--center-900);
  --a-text: var(--center-600);
  --btn-bg: var(--center-600);
  --btn-bg-hover: var(--center-700);
  --btn-bg-active: var(--center-800);
  --btn-text: var(--c-on-dark);
}

/* 별칭은 body에서 확정한다.
   :root 에 두면 카테고리 override 이전 값으로 고정되어 페이지 색이 바뀌지 않는다. */
body {
  --c-primary: var(--a-text);
  --c-primary-dark: var(--a-text);
  --c-primary-darker: var(--a-900);
  --c-primary-soft: var(--a-100);
  --c-primary-softer: var(--a-100);
  --c-accent: var(--main-500);
  --c-accent-soft: var(--center-100);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
}

/* 모션은 절제해서 — 이동은 최대 12~20px, 확대는 1.02 이하 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

h1, h2, h3, h4, h5, p, figure, ul, ol, dl, dd, blockquote {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

img, svg { max-width: 100%; height: auto; display: block; }

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

a:hover { color: var(--c-primary); }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

strong, b { font-weight: 700; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--sp-6) 0;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--main-500);
  color: var(--c-on-dark);
  border-radius: var(--radius);
  font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 12px; color: var(--c-on-dark); }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 12컬럼 그리드 — 필요한 섹션에서만 꺼내 쓴다 */
.grid12 {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--sp-4);
}

.section { padding: var(--sp-9) 0; }
.section--tight { padding: var(--sp-8) 0; }
/* 색이 아니라 얇은 선으로 구간을 나눈다 */
.section--soft { background: none; }
.section--brand { background: none; }

/* --- 섹션 머리말 : 왼쪽 큰 제목 / 오른쪽 설명 (좌우 비대칭) --- */
.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-4);
  row-gap: var(--sp-4);
  align-items: end;
  margin-bottom: var(--sp-7);
}

.section-head__text {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-4);
  row-gap: var(--sp-3);
  align-items: end;
}

.section-head > .btn,
.section-head > a.btn { grid-column: 10 / span 3; justify-self: end; white-space: nowrap; }

/* 01 — ABOUT 형식의 작은 라벨 */
.sec-label {
  grid-column: 1 / span 12;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-ink-3);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.sec-label__no { color: var(--a-text); font-weight: 700; }
.sec-label__line { flex: 0 0 28px; height: 1px; background: var(--c-line); }

.section-title {
  grid-column: 1 / span 7;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-title);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.section-desc {
  grid-column: 9 / span 4;
  align-self: end;
  margin: 0;
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-width: 46ch;
}

/* 라벨 없이 제목만 있는 경우엔 설명을 제목 아래로 */
.section-head__text > .section-title:only-child { grid-column: 1 / span 8; }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--c-ink-3);
  text-transform: uppercase;
}

/* 홈 커스텀 섹션 (관리자 추가) — 기존 디자인 시스템을 따르게 정렬 */
.home-sec .section-title { grid-column: auto; }
.home-sec .section-desc  { grid-column: auto; align-self: auto; margin-top: var(--sp-2); max-width: 70ch; }
.home-sec__img {
  display: block; width: 100%; max-width: 900px; height: auto;
  border-radius: 5px; margin: var(--sp-5) 0 0;
}
.home-sec__body {
  margin-top: var(--sp-4); color: var(--c-ink-2);
  font-size: var(--fs-sm); line-height: var(--lh-body); max-width: 70ch;
}
.home-sec__body p { margin: 0 0 var(--sp-3); }
.home-sec__body p:last-child { margin-bottom: 0; }
.home-sec__btnrow { margin-top: var(--sp-5); }

/* ==========================================================================
   4. Header / Global nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 250, 252, .96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;   /* 기본(로고만 있을 때) 중앙 정렬 */
  gap: 10px;
  flex-shrink: 0;
  font-weight: 800;
  letter-spacing: -.02em;
}

.logo:hover { color: inherit; }

.logo__mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--radius);
  background: var(--main-500);
  color: var(--c-on-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

/* 헤더 좌측 라벨: Global Services Center — 모든 언어 헤더를 영어 기준(라벨 숨김)으로
   통일하기 위해 전역 숨김. (언어별로 nav 길이가 달라 표시 여부가 갈리던 불일치 제거) */
.logo__gsc {
  display: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-ink-2);
  padding-right: 9px;
  border-right: 1px solid var(--c-line);
  white-space: nowrap;
  align-self: center;
}
/* 공간이 빠듯할 때 fitNav가 GSC 라벨만 먼저 숨긴다(햄버거로 접기 전 단계) */
.gsc-hidden .logo__gsc { display: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1.15; position: relative; }
.logo__title { font-size: 17px; transition: color .25s var(--ease); }
.logo__sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-ink-3);
  letter-spacing: 0;
  transition: color .25s var(--ease);
}
/* 태그라인(sub)이 보이는 폭에서는 워드마크(2줄)와 텍스트(2줄)를 상단 기준선으로
   맞춘다. 임의 top/margin 보정 대신 flex 상단 정렬 + 미세 광학보정(2px)으로 정렬. */
@media (min-width: 768px) {
  .logo { align-items: flex-start; }
  .logo__mark--brand,
  .logo__gsc { align-self: flex-start; }
  .logo__text { top: 0; padding-top: 4px; }   /* 워드마크 이미지 상단 여백만큼 광학 정렬(+2px 낮춤) */
}

.gnb { margin-left: auto; }

.gnb__list {
  display: flex;
  align-items: center;
  gap: 2px;
}

.gnb__link {
  display: block;
  padding: 10px 9px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink-2);
  white-space: nowrap;
  transition: color .15s;
}

/* 배경 없이 글자색으로만 표시한다 */
.gnb__link:hover,
.gnb__list.has-current .gnb__link:not([aria-current="page"]):hover { color: var(--a-text); }

.gnb__link[aria-current="page"] {
  color: var(--a-text);
  font-weight: 700;
}

/* 선택되지 않은 메뉴는 회색으로 물러나 있는다 (선택 항목만 카테고리 색) */
.gnb__list.has-current .gnb__link:not([aria-current="page"]) {
  color: var(--c-ink-2);
  font-weight: 500;
}

/* --- 상단 메뉴 호버 드롭다운 --------------------------------------------- */
.gnb__item--has-sub { position: relative; }
.gnb__sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;        /* 닫힌 드롭다운은 겹쳐 있어도 클릭을 절대 가로채지 않음 */
  transform: translateY(6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s var(--ease);
  z-index: 80;
}
.gnb__item--has-sub:hover > .gnb__sub,
.gnb__item--has-sub:focus-within > .gnb__sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* 스크롤 후에는 열린 드롭다운을 잠가(숨겨) 스크롤된 콘텐츠(검색 제목 등)를
   덮어 클릭을 가로채는 문제를 막는다. nav 항목에 다시 마우스를 올리면 해제(main.js). */
body.gnb-hover-lock .gnb__item--has-sub:hover > .gnb__sub,
body.gnb-hover-lock .gnb__item--has-sub:focus-within > .gnb__sub {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
}
.gnb__sub li { margin: 0; }
.gnb__sub a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-ink-2);
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.gnb__sub a:hover,
.gnb__sub a[aria-current="page"] {
  background: var(--c-bg-soft, #f5f5f5);
  color: var(--a-text, var(--main-600));
}

.nav-toggle {
  display: none;
  flex: none;                 /* flex 컨테이너에서 절대 찌부러지지 않게 */
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  position: relative;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  position: absolute;
  left: 50%;
  width: 20px; height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .2s, opacity .2s;
}
.nav-toggle__bar { top: 50%; margin-top: -1px; }
.nav-toggle__bar::before { content: ""; top: -6px; }
.nav-toggle__bar::after { content: ""; top: 6px; }

/* 열려도 아이콘은 그대로 햄버거(☰) 유지 — X/별표 변형 인터랙션 제거 */

.nav-backdrop {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 90;
  background: rgba(22, 32, 43, .38);
}
.nav-backdrop.is-open { display: block; }

/* ==========================================================================
   5. Footer
   ========================================================================== */
.site-footer {
  margin-top: var(--sp-9);
  background: var(--main-900);
  color: var(--main-200);
  font-size: var(--fs-sm);
}

.footer-emergency {
  background: #001824;
  border-bottom: 1px solid rgba(247, 250, 252, .08);
  padding: var(--sp-5) 0;
}

.footer-emergency__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer-emergency__label {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--main-300);
  margin-right: var(--sp-2);
}

.emergency-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  flex: 1 1 auto;
}

.emergency-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  color: var(--c-on-dark);
}
.emergency-item:hover .emergency-item__desc { color: var(--c-on-dark); }

.emergency-item__num {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--c-danger-on-dark);
}
.emergency-item__desc { font-size: var(--fs-xs); color: var(--main-200); }

.footer-main { padding: var(--sp-7) 0 var(--sp-6); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-6);
}

.footer-brand__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-on-dark);
  margin-bottom: var(--sp-2);
}
.footer-brand__desc { color: var(--main-200); line-height: 1.75; }

.footer-col__title {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-on-dark);
  margin-bottom: var(--sp-3);
}
.footer-col__list li + li { margin-top: 8px; }
.footer-col__list a { color: var(--main-200); }
.footer-col__list a:hover { color: var(--c-on-dark); text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid rgba(247, 250, 252, .08);
  padding: var(--sp-4) 0;
  font-size: var(--fs-xs);
  color: var(--main-300);
}
.footer-bottom__inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ==========================================================================
   6. Buttons, tags, chips
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;        /* 고정 height 대신 최소 높이 → 줄바꿈돼도 알약이 늘어나 텍스트가 넘치지 않음 */
  padding: 8px 22px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* Primary — 고유(액센트) 색상 채움 박스 + 배경색(밝은) 텍스트 */
.btn--primary { background: var(--btn-bg); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-text); }
.btn--primary:active { background: var(--btn-bg-active); color: var(--btn-text); }

/* Secondary(ghost) — 회색 테두리 제거, 평평한 텍스트 버튼 */
.btn--ghost {
  background: none;
  color: var(--c-ink);
  border-color: transparent;
}
.btn--ghost:hover { background: none; color: var(--a-text); border-color: transparent; }
.btn--ghost:active { background: none; color: var(--a-text); }

/* Soft — 연한 채움 박스 없이 고유(액센트) 색상 볼드 텍스트 */
.btn--soft { background: none; color: var(--a-text); font-weight: 800; }
.btn--soft:hover { background: none; color: var(--a-800); }
.btn--soft:active { background: none; color: var(--a-900); }

.btn--line-light {
  background: transparent;
  color: var(--c-on-dark);
  border-color: rgba(247, 250, 252, .5);
}
.btn--line-light:hover { background: rgba(247, 250, 252, .14); color: var(--c-on-dark); }

.btn--sm { min-height: 40px; padding: 6px 16px; font-size: var(--fs-xs); }
.btn--lg { min-height: 56px; padding: 10px 32px; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"],
.btn--disabled {
  background: var(--c-disabled-bg);
  color: var(--c-ink-3);
  border-color: var(--c-line);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* 카드 상단 칩 — 배경은 밝은 회색으로 통일, 고유(카테고리) 색상은 텍스트에만 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);   /* 카테고리/메타 라벨 15px 유지 */
  font-weight: 600;          /* SemiBold */
  line-height: 1.4;
  background: var(--c-bg-soft-2);
  color: var(--c-ink-2);
  white-space: nowrap;
}

.tag--cat { color: var(--c-primary-dark); }
.tag--worker { color: var(--life-700); }
.tag--student { color: var(--gold-700); }
.tag--business { color: var(--main-600); }
.tag--common { color: var(--center-700); }
.tag--alert { color: var(--c-danger-text); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 필터 칩 — 얇은 테두리 pill. 활성은 진한 박스가 아니라
   고유(액센트) 색상 테두리 + 텍스트 + 아주 연한 tint 로 절제되게 표현 */
.chip {
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink-2);
  transition: all .15s;
}
.chip:hover { border-color: var(--c-primary-dark); color: var(--c-primary-dark); }
.chip.is-active,
.chip[aria-pressed="true"] {
  border-color: var(--c-primary-dark);
  color: var(--c-primary-dark);
  background: var(--c-primary-softer);
}

/* ==========================================================================
   7. Image placeholder  (실제 이미지 준비 전 대체 박스)
   ========================================================================== */
.img-ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(
      135deg,
      var(--c-bg-soft) 0 10px,
      var(--c-bg-soft-2) 10px 20px
    );
  border: 1px solid var(--c-line);
  color: var(--c-ink-3);
  overflow: hidden;
}

.img-ph__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: rgba(247, 250, 252, .88);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: -.01em;
  text-align: center;
}

.img-ph__icon {
  width: 22px; height: 22px;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  opacity: .55;
}

.img-ph--brand {
  background:
    repeating-linear-gradient(
      135deg,
      var(--c-primary-softer) 0 10px,
      var(--c-primary-soft) 10px 20px
    );
  border-color: var(--a-200);
  color: var(--c-primary-dark);
}

.img-ph--1-1 { aspect-ratio: 1 / 1; }
.img-ph--4-3 { aspect-ratio: 4 / 3; }
.img-ph--3-2 { aspect-ratio: 3 / 2; }
.img-ph--21-9 { aspect-ratio: 21 / 9; }
.img-ph--wide { aspect-ratio: 5 / 2; }
.img-ph--map { aspect-ratio: 16 / 10; }
.img-ph--tall { aspect-ratio: 3 / 4; }

/* ==========================================================================
   8. Cards & grids
   ========================================================================== */
.grid { display: grid; gap: var(--sp-4); }

/* 그리드 칸은 기본이 min-width:auto 라서, 안에 최소 폭을 가진 표가 있으면
   칸이 밀려나 페이지 전체에 가로 스크롤이 생긴다. 0으로 낮춰 칸 안에서만 스크롤되게 한다. */
.grid > * { min-width: 0; }

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--7 { grid-template-columns: repeat(4, 1fr); }

/* 공통 카드 — 흰 면 + 아주 연한 테두리 + 매우 은은한 그림자 */
.card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

/* Hover — 테두리 살짝 강조 + 그림자 소폭 증가 + 2px만 이동 */
.card:hover {
  border-color: var(--c-line-hover);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  transform: translateY(-2px);
}
a.card:hover { color: inherit; border-color: var(--a-text); }

/* 테두리(스트로크) 없는 카드 변형 — 전체폭 FAQ 프로모 등에서 사용 */
.card--plain,
a.card--plain:hover { border-color: transparent; }

/* 카드 전체가 클릭 대상인 경우 — 기관 카드는 서로 구분되도록 테두리 유지 */
.card--clickable { cursor: pointer; }
.card--clickable:hover { border-color: var(--a-text); }

.card__media { position: relative; overflow: hidden; }
.card__media .img-ph {
  border: 0; border-radius: 0;
  transition: transform var(--t-base) var(--ease);
}
a.card:hover .card__media .img-ph { transform: scale(1.02); }

/* 모든 카드 공통 — 편집형 여백(넉넉한 패딩 + 요소 간격) */
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  flex: 1 1 auto;
}

/* 카드 장식 아이콘 제거 — 카드 성격은 텍스트·카테고리 라벨·위계로만 전달 */
.icon-tile { display: none; }
.icon-tile--never {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;    /* 열 flex에서 늘어나지 않고 아이콘만 감싸도록 */
  flex: none;
  width: max-content;
  height: auto;
  margin-bottom: var(--sp-3);
  background: transparent;   /* 아이콘 배경 제거 */
}
.icon-tile img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}
/* 회색 라인 아이콘 (카테고리 카드) */
.icon-tile .icon-line {
  width: 34px;
  height: 34px;
  display: block;
  color: #6b7280;
  transition: color var(--t-base) var(--ease);
}
a.card:hover .icon-tile .icon-line { color: var(--a-600, #374151); }

/* 홈 생활가이드 카드: 버튼화 예외 — '바로가기' 텍스트 없이 화살표만 크게 (#272727) */
body[data-page="home"] .card__more {
  font-size: 0;
  gap: 0;
  min-width: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  color: #272727;
}
body[data-page="home"] a.card:hover .card__more,
body[data-page="home"] .card__more:hover { background: none; box-shadow: none; }
body[data-page="home"] .card__more::after {
  font-size: 24px;
  line-height: 1;
  color: #272727;
  transform: scaleX(1.3);        /* 화살표를 약 5px 더 길게(가로 확장) */
  transform-origin: left center;
}
body[data-page="home"] a.card:hover .card__more::after,
body[data-page="home"] .card__more:hover::after {
  transform: translateX(4px) scaleX(1.3);
}

/* 아이콘 파일이 아직 없으면 타일 자체를 감춰 깨진 이미지가 보이지 않게 한다 */
.icon-tile[hidden] { display: none; }

.card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.025em;
}

.card__desc {
  font-size: var(--fs-body);
  color: var(--c-ink-2);
  line-height: 1.75;
  max-width: 46ch;
}

/* CTA는 카드 오른쪽 하단에 고정 정렬(margin-top:auto로 하단, flex-end로 우측).
   보조 링크(card__site)가 함께 있으면 그 링크만 왼쪽에 남긴다(아래 margin-right:auto). */
.card__foot {
  margin-top: auto;
  padding-top: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
}

/* 카드 하단 홈페이지 링크(보조) — CTA가 오른쪽으로 가도 이 링크는 왼쪽 유지 */
.card__site {
  margin-right: auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-line);
  transition: color .15s, text-decoration-color .15s;
}
.card__site:hover {
  color: var(--a-text);
  text-decoration-color: currentColor;
}

/* 카드 주 CTA — 텍스트 링크가 아니라 '채워진 버튼'.
   고유(카테고리/페이지)색 배경 + 밝은 텍스트 + 화살표. 카드 하단에 안정적으로 배치.
   카드 종류가 달라도 동일 시스템(색상/라벨만 다름). */
.card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  padding: 11px 22px;
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.card__more::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
/* Hover(카드 전체 hover 포함) — 배경 소폭 진하게 + 그림자 미세 증가 + 화살표 이동 */
a.card:hover .card__more,
.card__more:hover { background: var(--btn-bg-hover); box-shadow: 0 4px 10px rgba(0, 0, 0, .10); }
a.card:hover .card__more::after,
.card__more:hover::after { transform: translateX(4px); }
/* Focus — 카드 링크 포커스 시 CTA에 명확한 포커스 링 */
a.card:focus-visible { outline: none; }
a.card:focus-visible .card__more { box-shadow: var(--focus-ring); }

/* CTA 버튼에 화살표 포함(카드 진입/상세/지도 등 실제 button·a 요소용) */
.btn--arrow::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
.btn--arrow:hover::after { transform: translateX(4px); }

/* ── 생활가이드 카테고리 카드 (개수 메타 구조) ──
   편집형 여백·타이포·View 하단정렬은 공통 .card 규칙에서 상속.
   이 카드만의 차이: [카테고리 라벨] 왼쪽 ····· 13 topics 오른쪽(개수는 plain text). */
.card--category .tag-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
  gap: var(--sp-3);
}

/* topics 수 — chip 아님. 배경/테두리 없는 보조 텍스트, 오른쪽 정렬 */
.card--category .tag-row .tag:not(.tag--cat) {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--c-ink-3);
  flex: none;
}

/* 아이콘형 바로가기 카드 */
.shortcut {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: all .15s;
}
.shortcut:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-2);
  color: inherit;
}
.shortcut__num {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.shortcut__title { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.02em; }
.shortcut__desc { font-size: var(--fs-xs); color: var(--c-ink-2); }

/* 카테고리 버튼(생활 가이드 6종) */
.cat-btn {
  display: flex;
  align-items: flex-start;      /* 라벨을 제목 줄에 맞춤 */
  gap: 12px;
  padding: 24px 26px;           /* 통통하게 */
  background: #FAFAF8;          /* 더 연한 회색 */
  border-radius: var(--radius);
  font-weight: 700;
  transition: background .15s;
}
.cat-btn:hover { background: #F2F2EE; }
/* 카테고리 라벨: 박스 없이 볼드 + 고유색 텍스트 */
.cat-btn__icon {
  flex-shrink: 0;
  color: var(--c-primary-dark);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.4;
}
.cat-btn__text { display: flex; flex-direction: column; line-height: 1.4; }
.cat-btn__sub {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--c-ink-3);
}

/* 기관 카드 */
.org-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.org-card__meta {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 4px 10px;
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  margin-top: 4px;
}
.org-card__meta dt { color: var(--c-ink-3); font-weight: 600; }
.org-card__meta dd { margin: 0; }
.org-card__meta a { color: var(--c-primary); font-weight: 600; }

/* 강조 배너 카드 */
.callout {
  padding: var(--sp-5) 0;
}
.callout--tip { color: var(--c-info-text); }
/* 주의·팁 안내 — 배경과 테두리 없이 본문처럼 흐르게 둔다.
   색 배경 박스는 정보를 묶는 용도(.callout 기본)에만 남긴다. */
.callout--warn,
.callout--tip {
  background: none;
  border: 0;
  padding: 0;
  color: var(--c-ink);
}
.callout--warn .callout__title,
.callout--tip .callout__title { color: var(--c-ink); }

.callout--warn .callout__list,
.callout--tip .callout__list { color: var(--c-ink-2); opacity: 1; }

.callout--warn .callout__list li::before,
.callout--tip .callout__list li::before { background: var(--c-ink-3); }

/* 제목의 핵심 단어만 빨강 */
.callout__em { color: var(--c-danger); }

/* 마무리 경고 문장은 평소엔 본문색, 마우스를 올리면 빨강 */
.callout__note { color: var(--c-ink-2); transition: color .15s; }
.callout--warn:hover .callout__note,
.callout--tip:hover .callout__note { color: var(--c-danger); }
.callout--danger { background: var(--c-danger-soft); border-color: #F5D5D5; color: var(--c-danger-text); }

.callout__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-h4);
  font-weight: 800;
  margin-bottom: var(--sp-2);
}
.callout__list { font-size: var(--fs-sm); color: inherit; opacity: .92; }
.callout__list li {
  position: relative;
  padding-left: 14px;
}
.callout__list li + li { margin-top: 6px; }
.callout__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-ink-3);
}

/* ==========================================================================
   9. Hero & page head
   ========================================================================== */
.hero {
  background: linear-gradient(180deg, var(--a-100) 0%, var(--c-canvas) 100%);
  padding: var(--sp-8) 0 var(--sp-9);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.035em;
}

.hero__desc {
  margin-top: var(--sp-4);
  font-size: 17px;
  color: var(--c-ink-2);
  line-height: 1.8;
}

.hero__actions { margin-top: var(--sp-6); }

.hero__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
}

/* --- 메인 배너 : 넓은 여백 안에 핵심 문장만 --- */
.banner { padding: var(--sp-8) 0 var(--sp-7); }

.banner__viewport {
  position: relative;
  min-height: clamp(300px, 34vw, 420px);
}

.banner__slide {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: var(--sp-3);
  opacity: 0;
  visibility: hidden;          /* 비활성 슬라이드는 완전히 비활성 → 클릭을 절대 가로채지 않음 */
  z-index: 0;
  transition: opacity var(--t-base) var(--ease), visibility 0s var(--t-base);
  pointer-events: none;
}
/* 활성 슬라이드만 보이고·클릭 가능하며 항상 최상단(z-index) → 전환 중에도 클릭이 활성 슬라이드로만 간다 */
.banner__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  pointer-events: auto;
  transition: opacity var(--t-base) var(--ease), visibility 0s 0s;
}

/* 동작 줄이기 설정이면 페이드 없이 즉시 바뀐다 (전환 자체는 계속) */
.banner.is-instant .banner__slide { transition: none; }

.banner__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.banner__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.04em;
  color: var(--c-ink);
  max-width: 18ch;
}

.banner__desc {
  max-width: var(--measure);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}

.banner__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-line-hover);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.banner__cta::after { content: "→"; transition: transform var(--t-fast) var(--ease); }
.banner__cta:hover { color: var(--a-text); border-color: var(--a-text); }
.banner__cta:hover::after { transform: translateX(4px); }

/* 컨트롤 — 점, 화살표, 자동 전환 */
.banner__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
}

.banner__dots { display: flex; align-items: center; gap: 8px; }
/* 비활성 — 동일 크기 원형 dot */
.banner__dot {
  width: 8px; height: 8px;
  border-radius: 999px;         /* 정사각→원형 / 활성은 가로로 늘어나 pill */
  background: var(--c-line-hover);
  transition: width var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
/* 활성 — 가로로 긴 elongated dot(pill). 높이는 dot과 동일해 한 줄에 정렬 */
.banner__dot.is-active { width: 24px; height: 8px; border-radius: 999px; background: var(--a-text); }

.banner__arrows { display: flex; gap: 4px; margin-left: auto; }
.banner__nav {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  color: var(--c-ink-3);
  font-size: 17px;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.banner__nav:hover { color: var(--c-ink); }


.page-head {
  padding: var(--sp-8) 0 0;   /* 하단 패딩 제거 → 제목블록↔첫 섹션 간격은 아래 규칙에서 50px 고정 */
  background: none;
}

/* 제목 블록(page-head)과 첫 콘텐츠 섹션 사이 간격 = 70px (전 페이지 공통, 지도 섹션 제외) */
.page-head + .section:not(.section--map) { padding-top: 70px; }

.page-head .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sp-4);
  row-gap: var(--sp-4);
  align-items: end;
}

.page-head .breadcrumb { grid-column: 1 / span 12; margin-bottom: var(--sp-3); }
.page-head .sec-label  { grid-column: 1 / span 12; margin-bottom: var(--sp-3); }

.page-head__title {
  grid-column: 1 / span 6;
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.04em;
  text-wrap: balance;
}

.page-head__desc {
  grid-column: 8 / span 5;
  align-self: end;
  margin: 0 0 6px;
  max-width: var(--measure);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.page-head .btn-row { grid-column: 1 / span 12; margin-top: var(--sp-2); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "›"; color: var(--c-ink-3); }
.breadcrumb a:hover { color: var(--c-primary); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-ink-2); font-weight: 600; }

/* ==========================================================================
   10. Filter & search
   ========================================================================== */
/* 공통 검색 패널 — 회색 테두리 없이 Surface 배경 + 은은한 그림자(부드러운 카드) */
.filter {
  padding: var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  margin-bottom: var(--sp-6);
}
/* 페이지 제목·설명(page-head)과 검색 패널 사이 간격을 50px로 통일(전 검색 페이지) */
.section:has(.filter) { padding-top: 70px; margin-top: 0; }

.filter__row + .filter__row { margin-top: var(--sp-4); }

.filter__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--c-ink-2);
}

.search-box { position: relative; }

/* 홈 검색바와 동일한 흰색 pill 형태 (전 페이지 통일) */
.search-box__input {
  width: 100%;
  padding: 16px 52px 16px 20px;
  border: 1px solid #E5E5E0;
  border-radius: var(--radius);
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  font-size: var(--fs-body);
}
.search-box__input::placeholder { color: var(--c-ink-3); }
.search-box__input:hover { border-color: #D6D6D0; }
.search-box__input:focus {
  outline: none;
  border-color: var(--a-text);            /* 포커스 테두리 = 페이지 고유색 */
  box-shadow: var(--focus-ring), 0 1px 3px rgba(0,0,0,.05);
}

/* 오른쪽 돋보기 아이콘 = 페이지 고유색 (홈은 .site-search__box override로 어둡게 유지) */
.search-box__icon {
  position: absolute;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  border: 2px solid var(--a-text);
  border-radius: 50%;
  pointer-events: none;
}
.search-box__icon::after {
  content: "";
  position: absolute;
  right: -6px; bottom: -4px;
  width: 8px; height: 2px;
  background: var(--a-text);
  transform: rotate(45deg);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.filter-status__count strong { color: var(--c-primary-dark); }

.empty-state {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  color: var(--c-ink-2);
}
.empty-state__title { font-size: var(--fs-h4); font-weight: 700; margin-bottom: 6px; color: var(--c-ink); }

[hidden] { display: none !important; }

/* ==========================================================================
   11. Accordion
   ========================================================================== */
.accordion {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface);
}
.accordion + .accordion { margin-top: var(--sp-4); }

.accordion__item + .accordion__item { border-top: 1px solid var(--c-line); }

.accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 20px var(--sp-5);
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.5;
  transition: background .15s;
}
.accordion__btn:hover { background: var(--c-primary-softer); }
.accordion__btn[aria-expanded="true"] { background: var(--c-primary-softer); color: var(--c-primary-dark); }

.accordion__q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.accordion__q::before {
  content: "Q";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  margin-top: 2px;
  border-radius: var(--radius);
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.accordion__icon {
  flex-shrink: 0;
  position: relative;
  width: 16px; height: 16px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .2s, opacity .2s;
}
.accordion__icon::before { width: 14px; height: 2px; }
.accordion__icon::after { width: 2px; height: 14px; }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.accordion__panel {
  padding: 0 var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--c-line-2);
}
.accordion__panel > * { margin-top: var(--sp-4); }
.accordion__panel .a-body {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.8;
}

/* ==========================================================================
   11-2. FAQ — 2단 구성, 번호 매김, 단색 강조
   ========================================================================== */
.faq { padding: var(--sp-8) 0 var(--sp-9); }

.faq__layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--sp-8);
  align-items: start;
}

.faq__aside { position: sticky; top: calc(var(--header-h) + 32px); }

.faq__title {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.035em;
  margin-top: var(--sp-3);
  text-wrap: balance;
}

.faq__desc {
  margin-top: var(--sp-4);
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.faq__help { margin-top: var(--sp-7); }
.faq__help-title { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.02em; }
.faq__help-desc { margin-top: 6px; font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.75; }
.faq__help .btn-row { margin-top: var(--sp-4); }

/* 필터 + 개수 */
.faq__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.faq__count { font-size: var(--fs-xs); color: var(--c-ink-3); font-weight: 600; }

/* 목록 — 번호는 CSS 카운터라 필터로 숨겨진 항목은 자동으로 건너뛴다 */
.faq__list {
  counter-reset: faq;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 채움·박스 없이 아래쪽 1px 선 하나로만 구분한다 */
.faq-item {
  counter-increment: faq;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  transition: border-color .18s;
}
.faq-item:hover { border-bottom-color: var(--c-line-hover); }
.faq-item:has(.faq-item__btn[aria-expanded="true"]) { border-bottom-color: var(--a-text); }

.faq-item__btn {
  display: grid;
  grid-template-columns: 46px 1fr 28px;
  align-items: start;
  gap: var(--sp-3);
  width: 100%;
  padding: 22px var(--sp-5);
  text-align: left;
}

.faq-item__no {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
  transition: color .18s;
}
.faq-item__no::before { content: counter(faq, decimal-leading-zero); }

.faq-item__q {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -.02em;
  color: var(--c-ink);
  transition: color .18s;
}

.faq-item__btn[aria-expanded="true"] .faq-item__no,
.faq-item__btn[aria-expanded="true"] .faq-item__q { color: var(--a-text); }

/* + / − 토글 */
.faq-item__icon {
  position: relative;
  width: 20px; height: 20px;
  margin-top: 4px;
  justify-self: end;
  color: var(--c-ink-3);
  transition: color .18s;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform .2s, opacity .2s;
}
.faq-item__icon::before { width: 15px; height: 1.5px; }
.faq-item__icon::after { width: 1.5px; height: 15px; }
.faq-item__btn[aria-expanded="true"] .faq-item__icon { color: var(--a-text); }
.faq-item__btn[aria-expanded="true"] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-item__panel { padding: 0 var(--sp-5) 22px calc(46px + var(--sp-5) + var(--sp-3)); }
.faq-item__panel p {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.85;
}
.faq-item__panel p + p { margin-top: 12px; }
.faq-item__panel .btn { margin-top: var(--sp-4); }

@media (max-width: 1023px) {
  .faq { padding: var(--sp-7) 0; }
  .faq__layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .faq__aside { position: static; }
  .faq__help { margin-top: var(--sp-5); }
}
@media (max-width: 767px) {
  .faq-item__btn { grid-template-columns: 34px 1fr 22px; padding: 18px var(--sp-4); gap: 10px; }
  .faq-item__panel { padding: 0 var(--sp-4) 18px calc(34px + var(--sp-4) + 10px); }
  .faq-item__q { font-size: var(--fs-body); }
}

/* ==========================================================================
   12. Tabs
   ========================================================================== */
/* 탭 — 회색 박스(테두리·배경) 없이, 활성 탭은 고유(액센트) 색상 볼드 텍스트 */
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  margin-bottom: var(--sp-6);
}

.tabs__tab {
  padding: 11px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink-2);
  white-space: nowrap;
  transition: color .15s;
}
.tabs__tab:hover { color: var(--c-primary-dark); }
.tabs__tab[aria-selected="true"] {
  background: none;
  color: var(--c-primary-dark);
  font-weight: 800;
}

.tabs__panel:focus { outline: none; }

/* ==========================================================================
   13. Modal
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(39, 39, 39, .32);
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--c-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
}

.modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}

.modal__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.02em;
}

.modal__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font-size: 18px;
  line-height: 1;
  color: var(--c-ink-2);
}
.modal__close:hover { background: var(--c-bg-soft); }

.modal__body { padding: var(--sp-5); }
.modal__body > * + * { margin-top: var(--sp-5); }

body.is-locked { overflow: hidden; }

/* ==========================================================================
   14. Info list & table
   ========================================================================== */
.info-list {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px var(--sp-4);
  font-size: var(--fs-sm);
}
.info-list dt { font-weight: 700; color: var(--c-ink-3); }
.info-list dd { margin: 0; color: var(--c-ink-2); }

.bullet-list { font-size: var(--fs-sm); color: var(--c-ink-2); }
.bullet-list li { position: relative; padding-left: 15px; }
.bullet-list li + li { margin-top: 7px; }
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--a-500);
  opacity: .9;
}

.step-list { counter-reset: step; font-size: var(--fs-sm); color: var(--c-ink-2); }
.step-list li {
  position: relative;
  padding-left: 34px;
  counter-increment: step;
}
.step-list li + li { margin-top: 10px; }
.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 3px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius);
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.table-wrap { overflow-x: auto; }

.data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
/* 좁은 컨테이너용: 최소폭 해제 → 가로 스크롤 없이 컨테이너에 맞게 줄바꿈 */
.data-table--fit { min-width: 0; }
/* 회색 박스(테두리) 제거 — 표 내부 행 구분선만 남는다 */
.table-wrap--fit { overflow-x: visible; border: none; border-radius: 0; }
/* 콜아웃 박스(테두리·배경) 제거 → 제목+표만 평평하게 */
.callout--plain { border: none; background: none; padding: 0; }
.data-table th,
.data-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--c-line-2);
  vertical-align: top;
}
.data-table thead th {
  background: none;
  border-bottom-color: var(--c-line-hover);   /* 채움 대신 조금 진한 선으로 헤더를 구분 */
  font-weight: 800;
  color: var(--c-ink-2);
  white-space: nowrap;
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td a { color: var(--c-primary); font-weight: 600; }

/* 지도 핀 목록 */
/* 핀 목록: 박스·배경·동그라미 없이, 항목 사이 하단 구분선만 */
.pin-list { display: flex; flex-direction: column; gap: 0; }
.pin-btn {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 15px 6px;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  background: none;
  text-align: left;
  transition: color .15s;
}
.pin-list li:last-child .pin-btn { border-bottom: 0; }
.pin-btn:hover .pin-btn__name { color: var(--c-primary); }
.pin-btn.is-active .pin-btn__name,
.pin-btn.is-active .pin-btn__no { color: var(--c-primary); }
/* 번호: 동그라미 제거 → "1." 텍스트 */
.pin-btn__no {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-ink-3);
}
.pin-btn__no::after { content: "."; }
.pin-btn__text { display: flex; flex-direction: column; line-height: 1.45; }
.pin-btn__name { font-size: var(--fs-sm); font-weight: 700; }
.pin-btn__addr { font-size: var(--fs-xs); color: var(--c-ink-3); }

/* 지도 섹션: 페이지 헤더 바로 아래라 상단 여백을 없애 지도를 위로 끌어올린다 */
.section--map { padding-top: 0; }

.map-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-5);
  align-items: start;
}

/* 구글 지도 임베드 (API 키 없이 동작하는 output=embed 방식) */
.map-frame {
  position: relative;
  height: clamp(320px, 52vh, 520px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg-soft);
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-frame__fallback {
  padding: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.map-frame__fallback a { color: var(--a-text); font-weight: 600; text-decoration: underline; }

.map-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.map-actions__note {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.map-actions__note strong { color: var(--c-ink); font-weight: 700; }

.map-detail {
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
}

/* ==========================================================================
   15. Forms
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: var(--sp-5); }

.form-field { display: flex; flex-direction: column; gap: 8px; }

.form-label {
  font-size: var(--fs-sm);
  font-weight: 700;
}
.form-label .req { color: var(--c-danger); margin-left: 3px; }

.form-hint { font-size: var(--fs-xs); color: var(--c-ink-3); }

.form-control {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:hover { border-color: var(--c-line-hover); }
.form-control:focus {
  outline: none;
  border-color: var(--main-500);
  box-shadow: var(--focus-ring);
}
textarea.form-control { min-height: 170px; resize: vertical; line-height: 1.7; }

select.form-control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-3) 50%),
    linear-gradient(135deg, var(--c-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.form-error {
  display: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-danger);
}
.form-field.has-error .form-control { border-color: var(--c-danger); background: var(--c-surface); }
.form-field.has-error .form-error { display: block; }
.form-error { color: var(--c-danger-text); }

/* 전송 실패 안내 (기본 숨김, 오류 시에만 노출) */
.form-senderr {
  margin-top: var(--sp-3);
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--c-danger-soft);
  color: var(--c-danger-text);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form-senderr[hidden] { display: none; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.checkbox input {
  flex-shrink: 0;
  width: 19px; height: 19px;
  margin-top: 3px;
  accent-color: var(--c-primary);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

.form-success {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid #C5E5D6;
  border-radius: var(--radius);
  background: var(--c-ok-soft);
}
.form-success__title {
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--c-ok-text);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}

.side-box {
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
}
.side-box + .side-box { margin-top: var(--sp-4); }
.side-box__title {
  font-size: var(--fs-h4);
  font-weight: 800;
  margin-bottom: var(--sp-3);
}

/* ==========================================================================
   16. Utilities
   ========================================================================== */
.stack > * + * { margin-top: var(--sp-5); }
.stack-sm > * + * { margin-top: var(--sp-3); }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.text-center { text-align: center; }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-muted { color: var(--c-ink-2); }
.text-muted-2 { color: var(--c-ink-3); }
.text-bold { font-weight: 700; }
.fw-b { font-weight: 700; }
.lead { font-size: 17px; color: var(--c-ink-2); line-height: 1.85; }

/* 색 막대 대신 얇은 선 위에 얹힌 제목 */
.divider-title {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: var(--lh-title);
  margin-bottom: var(--sp-4);
}
/* 제목 위/아래 구분선 모두 제거 */
.divider-title--under {
  padding-top: 0;
  border-top: none;
  padding-bottom: var(--sp-3);
  border-bottom: none;
}

/* ==========================================================================
   17. Responsive
   ========================================================================== */

/* --- 햄버거 드로어 메뉴 공통 간격 시스템 -------------------------------------
   PC(.nav-collapsed)와 모바일(@media ≤1199px) 두 상태, 그리고 모든 언어가
   동일한 gap/padding/line-height 값을 공유하도록 토큰으로 중앙 정의한다.
   (언어별 HTML에 개별 margin을 주지 않고 이 토큰만으로 리듬을 맞춘다) */
:root {
  --menu-pad-y: 30px;      /* 패널 상하 padding (28~36) */
  --menu-pad-x: 26px;      /* 패널 좌우 padding (24~32) */
  --menu-line: 1.5;        /* 항목 line-height (1.4~1.5) */
  --menu-gap: 20px;        /* 상위 항목 간 기본 리듬 (20~28 목표) */
  --menu-cat-extra: 16px;  /* 카테고리 블록 시작 전 추가 여백 → gap과 합쳐 36~48 */
  --menu-cat-sub: 12px;    /* 카테고리 헤더 → 첫 하위 (16~20) */
  --menu-sub-gap: 16px;    /* 하위끼리 (18~24) */
  --menu-side: 16px;       /* 모바일 패널 좌우 화면 여백 (16~20) */
}

/* 드로어 패널·항목 레이아웃 — 두 상태에서 동일하게 쓰도록 묶음.
   (media 쿼리와 클래스 셀렉터는 한 규칙으로 못 합쳐서 값만 토큰으로 공유) */

/* PC 빡빡한 폭(1200~1360px): 가로 메뉴를 햄버거로 접지 않고 링크 간격만 압축해
   7개 항목 + 로고 + 언어 버튼이 인라인으로 다 들어가도록 한다(모든 언어 기준). */
@media (min-width: 1200px) and (max-width: 1360px) {
  .gnb__list { gap: 0; }
  .gnb__link { padding-left: 5px; padding-right: 5px; }
}

/* --- 가로 메뉴 → 햄버거 메뉴 : 1199px 이하 ---
   메뉴 항목이 7개이고 라벨이 길어 1024~1199px 구간에서는 가로 배치가 들어가지 않는다.
   그래서 레이아웃 브레이크포인트(1023px)보다 이른 1199px부터 햄버거로 전환한다. */
@media (max-width: 1199px) {
  .nav-toggle { display: block; }
  .logo__gsc { display: none; }   /* 햄버거 구간에선 GSC 라벨 숨겨 헤더 공간 확보 */

  /* 드로어 패널: 반드시 뷰포트 안에 유지(좌우 16px 여백·max-width·내부 스크롤) */
  .gnb {
    position: fixed;
    top: var(--header-h);
    right: var(--menu-side);
    left: auto;
    width: calc(100% - (var(--menu-side) * 2));
    max-width: 400px;
    box-sizing: border-box;
    z-index: 95;
    max-height: calc(100vh - var(--header-h) - var(--menu-side));
    max-height: calc(100dvh - var(--header-h) - var(--menu-side));
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: var(--menu-pad-y) var(--menu-pad-x);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform .2s, opacity .2s, visibility .2s;
  }
  .gnb.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  /* 상단부터 순차로 쌓이는 세로 목록 — gap 시스템만으로 리듬 통일 */
  .gnb__list { flex-direction: column; align-items: stretch; gap: var(--menu-gap); }
  .gnb__item--has-sub:not(:first-child) { margin-top: var(--menu-cat-extra); }
  .gnb__link {
    padding: 0;
    font-size: var(--fs-body);
    line-height: var(--menu-line);
    border-radius: 0;
  }
  /* 모바일: 드롭다운을 항상 펼친 들여쓰기 목록으로 */
  .gnb__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    min-width: 0;
    display: flex; flex-direction: column;
    gap: var(--menu-sub-gap);
    margin-top: var(--menu-cat-sub);
    padding: 0 0 0 14px;
  }
  .gnb__sub a { padding: 0; font-size: var(--fs-body); line-height: var(--menu-line); }

}

/* --- Tablet: 768px ~ 1023px (8컬럼) --- */
@media (max-width: 1023px) {
  :root { --gutter: 40px; --cols: 8; --sp-9: 96px; --sp-8: 64px; }

  .section-head,
  .section-head__text,
  .page-head .container { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .section-title { grid-column: 1 / span 8; }
  .section-desc  { grid-column: 1 / span 6; }
  .page-head__title { grid-column: 1 / span 8; }
  .page-head__desc  { grid-column: 1 / span 6; }
  .section-head > .btn, .section-head > a.btn { grid-column: 1 / span 8; justify-self: start; }
  .page-head .breadcrumb { grid-column: 1 / span 8; }

  :root {
    --fs-display: 34px;
    --fs-h1: 28px;
    --fs-h2: 23px;
    --header-h: 66px;
  }

  .section { padding: var(--sp-7) 0; }

  .banner__title { max-width: 22ch; }

  .hero { padding: var(--sp-7) 0; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); }

  .grid--3,
  .grid--4,
  .grid--7 { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

  .map-layout { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-6); }

  .section-head { flex-direction: column; align-items: flex-start; }
}

/* --- Mobile: 767px 이하 (4컬럼) --- */
@media (max-width: 767px) {
  :root { --gutter: 20px; --cols: 4; --sp-9: 72px; --sp-8: 48px; }

  .section-head,
  .section-head__text,
  .page-head .container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sec-label,
  .section-title, .section-desc,
  .page-head__title, .page-head__desc,
  .page-head .breadcrumb,
  .section-head > .btn, .section-head > a.btn { grid-column: 1 / span 4; }

  :root {
    --fs-display: 27px;
    --fs-h1: 24px;
    --fs-h2: 20px;
    --fs-h3: 18px;
    --fs-h4: 16px;
    --fs-body: 15px;
    --sp-9: 56px;
  }

  .container { padding: 0 20px; }

  /* 모바일 헤더: 한동대 워드마크는 왼쪽 엠블럼만 노출(크롭)해 공간 확보,
     간격을 좁혀 언어 버튼·햄버거가 잘리지 않게 한다. */
  .header-inner { gap: 12px; }
  .logo { gap: 8px; }
  /* 명시도(.logo .logo__mark--brand)로 뒤쪽 base 규칙을 확실히 덮는다 */
  .logo .logo__mark--brand {
    width: 42px;
    min-width: 42px;
    flex: none;
    overflow: hidden;      /* 945x240 워드마크 중 좌측 정사각 엠블럼만 보이게 클립 */
  }
  /* 전역 img{max-width:100%}에 눌려 축소되지 않도록 자연폭 복원 → 부모가 좌측만 클립 */
  .logo .logo__mark--brand .logo__img {
    width: auto;
    max-width: none;
    height: 40px;          /* 158x40으로 스케일 → 부모(42px)가 좌측 엠블럼만 클립 */
  }

  .section { padding: var(--sp-7) 0; }

  .logo__sub { display: none; }
  .logo__title { font-size: 16px; }
  .logo__gsc { font-size: 11.5px; padding-right: 8px; }

  .grid { gap: var(--sp-4); }
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--7 { grid-template-columns: 1fr; }

  .card__body { padding: var(--sp-4); }

  .banner { padding: var(--sp-6) 0; }
  .banner__viewport { min-height: 0; }
  .banner__slide { position: static; opacity: 1; }
  .banner__slide:not(.is-active) { display: none; }
  .banner__title { max-width: none; }
  .banner__nav { width: 34px; height: 34px; }
  .banner__controls { flex-wrap: wrap; gap: var(--sp-3); }

  .filter { padding: var(--sp-4); }
  .chips { gap: 6px; }
  .chip { padding: 8px 13px; font-size: var(--fs-xs); }

  .accordion__btn { padding: 16px var(--sp-4); font-size: var(--fs-body); }
  .accordion__panel { padding: 0 var(--sp-4) var(--sp-4); }

  .tabs__list { gap: 4px; padding: 4px; }
  .tabs__tab { padding: 10px 14px; font-size: var(--fs-xs); }

  .modal { padding: 0; align-items: flex-end; }
  .modal__dialog { max-width: none; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }

  .info-list { grid-template-columns: 84px 1fr; gap: 8px var(--sp-3); }

  .form-grid { grid-template-columns: 1fr; }

  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 auto; }
  .card__foot .btn { width: auto; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-emergency__inner { flex-direction: column; align-items: stretch; }
  .emergency-list { flex-direction: column; }
  .emergency-item { justify-content: flex-start; }
  .footer-bottom__inner { flex-direction: column; }

  .page-head { padding: var(--sp-6) 0 0; }
}

/* ==========================================================================
   14. 추가 컴포넌트 (2026-08 피드백)
   ========================================================================== */

/* --- 14-1. 한동대 공동 브랜드 로고 (헤더·푸터) --------------------------- */
.cobrand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
/* 헤더: ONS 로고 오른쪽에 얇은 구분선을 두고 작게 놓는다 */
.header-inner .cobrand {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--c-line);
}
.cobrand__img {
  display: block;
  width: auto;
  height: 30px;                 /* ONS 마크(38px)보다 작게 */
  object-fit: contain;
}
.cobrand__ph {                  /* 로고 파일이 없을 때만 보이는 교체용 임시 영역 */
  display: none;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  border: 1px dashed var(--c-line-hover);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-ink-3);
  white-space: nowrap;
  text-align: center;
}
.cobrand__img[hidden] + .cobrand__ph { display: inline-flex; }

/* 푸터: 브랜드 설명 아래에 조금 더 크게. 어두운 배경이라 흰 글자 로고 이미지를 쓴다 */
.footer-brand .cobrand { margin-top: var(--sp-4); }
.footer-brand .cobrand__img { height: 38px; }
.footer-brand .cobrand__ph {
  height: 38px;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  border-color: rgba(255, 255, 255, .32);
}

/* 헤더 좌상단 로고 자리 — 한동대 로고(파일 넣기 전엔 '한동대' 임시 영역) */
.logo__mark--brand {
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0;
  background: none;            /* 기존 파란 박스 제거 */
  border-radius: var(--radius);
  overflow: visible;
}
.logo__img {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}
.logo__img[hidden] { display: none; }
.logo__img--dark { display: none; }   /* 어두운 배경용(흰 글자) — 기본 숨김 */
.logo__ph {
  display: none;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 11px;
  border: 1px dashed var(--c-line-hover);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 800;
  color: var(--c-ink-3);
  white-space: nowrap;
}
.logo__img[hidden] + .logo__ph { display: inline-flex; }

/* --- 14-2. 상단 대표 이미지 배너 ---------------------------------------- */
.page-hero { padding: var(--sp-6) 0 0; }
.page-hero__media {
  position: relative;
  width: 100%;
  height: clamp(180px, 26vw, 320px);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--c-surface);      /* 사진이 없을 때의 깔끔한 중립 면 */
  border: 1px solid var(--c-line);
}
.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* 비율이 달라도 찌그러지지 않게 */
  display: block;
}
.page-hero__label {                  /* 사진이 없을 때만 보이는 안내 라벨 */
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--c-ink-3);
}
.page-hero__img[hidden] { display: none; }
.page-hero__img:not([hidden]) + .page-hero__label { display: none; }
/* 홈 히어로는 조금 더 낮게 */
body[data-page="home"] .page-hero__media { height: clamp(200px, 30vw, 360px); }

/* --- 14-3. 메인 통합 검색 --------------------------------------------- */
.site-search { padding: var(--sp-7) 0 0; }
/* 검색+다이어그램 밴드: 옅은 회색 배경으로 다른 구역과 구분 */
.home-band {
  background: #F6F6F4;
  padding: var(--sp-8) 0 var(--sp-7);
  border-top: 1px solid #ECECE8;
  border-bottom: 1px solid #ECECE8;
}
.site-search__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* ===== 카테고리 벤 다이어그램 (홈) ===== */
.venn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--sp-6);
  --vd: clamp(150px, 14.2vw, 181px); /* 검색바(680px) 폭에 맞춘 크기 */
  --vov: 15px; /* 겹침량 -15px */
}
.venn__c {
  position: relative;
  width: var(--vd);
  height: var(--vd);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  transition: transform .18s var(--ease);
}
.venn__c:not(:first-child) { margin-left: calc(var(--vov) * -1); }
.venn__c::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--venn-color);
  opacity: .85;               /* 오퍼시티 85% */
  mix-blend-mode: multiply;
  transition: filter .18s var(--ease);
}
.venn__c--life     { --venn-color: #40A6D2; z-index: 1; }
.venn__c--culture  { --venn-color: #E9BC69; z-index: 2; }
.venn__c--centers  { --venn-color: #6B76AE; z-index: 3; }
.venn__c--business { --venn-color: #005378; z-index: 4; }
.venn__c:hover { transform: scale(1.1); z-index: 6; }
/* 호버 시 겹침(멀티플라이)로 인한 색 어두워짐 제거 → 원 고유색 유지, 크기만 확대 */
.venn__c:hover::before { mix-blend-mode: normal; }
/* 호버 시 텍스트는 순백으로 (라벨의 88% 투명도 제거해 또렷하게) */
.venn__c:hover .venn__label,
.venn__c:hover .venn__desc,
.venn__c:hover .venn__desc strong,
.venn__c:hover .venn__body,
.venn__c:hover .venn__mob,
.venn__c:hover .venn__mob strong { color: #fff; }
.venn__body {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 11%;
  line-height: 1.4;
}
.venn__label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.88);
  margin-bottom: 7px;
}
.venn__desc {
  display: block;
  font-size: clamp(11px, 0.92vw, 13px);
  font-weight: 500;
}
.venn__desc strong { font-weight: 800; }
.venn__mob { display: none; }
.venn__mob strong {
  display: block;
  font-size: clamp(15px, 4.5vw, 18px);
  font-weight: 800;
  margin-bottom: 4px;
}
.venn__mob span {
  display: block;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 500;
  color: rgba(255,255,255,.9);
}

/* 모바일: 2×2 클러스터 (image 2 베리에이션) */
@media (max-width: 767px) {
  .venn {
    flex-wrap: wrap;
    --vd: clamp(150px, 45vw, 232px);
    --vov: 15px;
    width: calc(var(--vd) * 2 - var(--vov));
    margin-inline: auto;
    margin-top: var(--sp-6);
  }
  .venn__c:not(:first-child) { margin-left: 0; }
  .venn__c:nth-child(2) { margin-left: calc(var(--vov) * -1); }
  .venn__c:nth-child(3) { margin-top: calc(var(--vov) * -1); }
  .venn__c:nth-child(4) { margin-left: calc(var(--vov) * -1); margin-top: calc(var(--vov) * -1); }
  .venn__body { padding: 0 12%; }
  .venn__label { margin-bottom: 8px; font-size: 11px; }
  .venn__desc { display: none; }
  .venn__mob { display: block; }
  .home-band { padding: var(--sp-6) 0; }
}
.site-search__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-4);
}
.site-search__box { position: relative; text-align: left; }
.site-search__box .search-box__input {
  padding: 16px 52px 16px 20px;
  font-size: var(--fs-body);
  background: #FFFFFF;                 /* 회색 밴드 위에서 또렷하게 뜨는 흰 검색바 */
  border: 1px solid #E5E5E0;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.site-search__box .search-box__input:hover { border-color: #D6D6D0; }
.site-search__box .search-box__input:focus {
  /* 얇은 blue focus — 추천/결과보다 강하지 않게 (기존 4px 이중 링 대신 연한 3px) */
  border-color: var(--main-500);
  box-shadow: 0 0 0 3px rgba(0, 83, 120, .14), 0 1px 3px rgba(0,0,0,.05);
}
/* 오른쪽 돋보기 아이콘: 입력 텍스트 색상과 동일 */
.site-search__box .search-box__icon {
  right: 20px;
  border-color: var(--c-ink);
}
.site-search__box .search-box__icon::after { background: var(--c-ink); }
/* 결과 드롭다운 */
.site-search__results {
  position: absolute;
  z-index: 60;
  left: 0; right: 0;
  top: calc(100% + 6px);
  max-height: 380px;
  overflow-y: auto;
  background: var(--c-canvas);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 28px rgba(39, 39, 39, .08);
  padding: 6px;
}
.site-search__results[hidden] { display: none; }
.search-result {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius);
  color: var(--c-ink);
  text-decoration: none;
  cursor: pointer;
}
.search-result:hover,
.search-result.is-active {
  background: var(--c-surface);
  color: var(--c-ink);
}
.search-result__cat {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--a-text);
}
.search-result__title {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.search-result__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  font-weight: 400;
}
.search-result__body { min-width: 0; }
.search-empty {
  padding: 18px 12px;
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  text-align: center;
}

/* 추천 검색어 — 검색창 focus + 빈 값일 때 결과 드롭다운 자리에 표시 */
.search-suggest { padding: 12px 12px 8px; }
.search-suggest__label {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-ink-3);
}
.search-suggest__row { display: flex; flex-wrap: wrap; gap: 8px; }
.search-suggest__chip {
  padding: 7px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;               /* pill */
  background: #FFFFFF;
  color: #272727;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.search-suggest__chip:hover,
.search-suggest__chip:focus-visible {
  background: #EAF4F8;                 /* 메인 블루 아주 연한 배경 */
  border-color: var(--main-500);
  color: var(--main-700);
  outline: none;
}

/* 검색 결과 내 매칭 키워드 강조 (제목·설명 공통) */
.search-hl {
  background: #EAF4F8;                 /* 아주 연한 블루 (형광 금지) */
  color: var(--main-700);
  font-weight: 700;
  border-radius: 3px;
  padding: 0 1px;
}

/* --- 14-4. 관광지 길찾기 버튼 (네이버·카카오) --------------------------- */
.place-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.place-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-btn);
  background: var(--c-canvas);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.place-link:hover { border-color: var(--c-line-hover); color: var(--c-ink); background: var(--c-surface); }

/* --- 14-5. 상세 페이지 하단 이동 UI ------------------------------------ */
.page-nav {
  padding-top: var(--sp-5);
  margin-top: var(--sp-7);
}
.page-nav__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.page-nav__spacer { flex: 1 1 auto; }
.page-nav__label {
  display: block;
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--c-ink-3);
  letter-spacing: .02em;
}
.page-nav__sib {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn--back::before {
  content: "←";
  margin-right: 7px;
  font-weight: 700;
}

/* 아주 좁은 화면에서는 Global Services Center 라벨을 숨겨 헤더가 넘치지 않게 */
@media (max-width: 430px) {
  .logo__gsc { display: none; }
}

@media (max-width: 767px) {
  .header-inner .cobrand { margin-left: 10px; padding-left: 10px; }
  .cobrand__img { height: 26px; }
  .cobrand__ph { height: 26px; font-size: 10px; padding: 0 7px; }
  .site-search__title { font-size: var(--fs-body); }
  .page-nav__row { flex-direction: column; align-items: stretch; }
  .page-nav__row .btn { width: 100%; }
  .page-nav__spacer { display: none; }
}

/* --- 14-6. 홈 히어로 : 한동대 캠퍼스 사진 배경 + 투명 헤더 --------------- */
/* 배너를 헤더 뒤까지 끌어올려 투명 헤더가 사진 위에 얹히게 한다 */
body[data-page="home"] .banner {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--sp-7));
  background:
    linear-gradient(180deg, rgba(16,22,18,.52) 0%, rgba(16,22,18,.34) 42%, rgba(16,22,18,.72) 100%),
    url("../images/hero-home.jpg") center 28% / cover no-repeat;
  color: #fff;
}
body[data-page="home"] .banner .container { position: relative; z-index: 1; }

/* 슬라이드별 배경 레이어 (JS가 주입) — 활성 슬라이드 사진이 크로스페이드로 보인다 */
body[data-page="home"] .banner .banner__bgs { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
body[data-page="home"] .banner .banner__bg {
  position: absolute; inset: 0;
  background-position: center 28%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
body[data-page="home"] .banner__eyebrow { color: rgba(255,255,255,.82); }
body[data-page="home"] .banner__title   { color: #fff; }
body[data-page="home"] .banner__desc    { color: rgba(255,255,255,.9); }
body[data-page="home"] .banner__cta {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.55);
}
body[data-page="home"] .banner__cta:hover { color: #fff; border-bottom-color: #fff; }
body[data-page="home"] .banner__controls { border-top-color: rgba(255,255,255,.28); }
body[data-page="home"] .banner__nav      { color: rgba(255,255,255,.72); }
body[data-page="home"] .banner__nav:hover { color: #fff; }
body[data-page="home"] .banner__dot      { background: rgba(255,255,255,.45); }
body[data-page="home"] .banner__dot.is-active { background: #fff; }

/* 헤더: 홈 상단에서는 배경 없이 사진과 어우러지게 */
body[data-page="home"] .site-header {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
/* 로고·햄버거는 모든 폭에서 사진 위 흰색 */
body[data-page="home"] .site-header .logo__title { color: #fff; }
body[data-page="home"] .site-header .logo__sub   { color: rgba(255,255,255,.72); }
body[data-page="home"] .site-header:not(.is-solid) .logo__gsc {
  color: rgba(255,255,255,.92);
  border-right-color: rgba(255,255,255,.4);
}
body[data-page="home"] .site-header .logo__ph {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.5);
}
/* 어두운 히어로 위에서는 흰 글자 로고(엠블럼은 파란색 유지)로 교체. 스크롤해 밝아지면 원색 복귀 */
body[data-page="home"] .site-header:not(.is-solid) .logo__img--light { display: none; }
body[data-page="home"] .site-header:not(.is-solid) .logo__img--dark  { display: block; }
body[data-page="home"] .site-header .nav-toggle {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.36);
}
body[data-page="home"] .site-header .nav-toggle__bar,
body[data-page="home"] .site-header .nav-toggle__bar::before,
body[data-page="home"] .site-header .nav-toggle__bar::after { background: #fff; }

/* 가로 메뉴(데스크톱)만 흰색 — 모바일 드롭다운은 밝은 패널이라 기본색 유지 */
@media (min-width: 1200px) {
  body[data-page="home"] .site-header .gnb__link,
  body[data-page="home"] .site-header .gnb__list.has-current .gnb__link:not([aria-current="page"]) {
    color: rgba(255,255,255,.86);
  }
  body[data-page="home"] .site-header .gnb__link:hover { color: #fff; }
}

/* 스크롤로 사진을 지나면 헤더를 원래(밝은 배경)대로 되돌린다 */
body[data-page="home"] .site-header.is-solid {
  background: rgba(247, 250, 252, .96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom-color: var(--c-line);
}
body[data-page="home"] .site-header.is-solid .logo__title { color: var(--c-ink); }
body[data-page="home"] .site-header.is-solid .logo__sub   { color: var(--c-ink-3); }
body[data-page="home"] .site-header.is-solid .logo__ph {
  color: var(--c-ink-3);
  border-color: var(--c-line-hover);
}
body[data-page="home"] .site-header.is-solid .nav-toggle {
  background: var(--c-surface);
  border-color: var(--c-line);
}
body[data-page="home"] .site-header.is-solid .nav-toggle__bar,
body[data-page="home"] .site-header.is-solid .nav-toggle__bar::before,
body[data-page="home"] .site-header.is-solid .nav-toggle__bar::after { background: var(--c-ink); }
@media (min-width: 1200px) {
  body[data-page="home"] .site-header.is-solid .gnb__link,
  body[data-page="home"] .site-header.is-solid .gnb__list.has-current .gnb__link:not([aria-current="page"]) {
    color: var(--c-ink-2);
  }
}

/* --- 14-7. 언어 전환 버튼 (오른쪽 상단) --------------------------------- */
.lang-switch { position: relative; flex-shrink: 0; margin-left: var(--sp-3); }
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-btn);
  background: var(--c-canvas);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lang-switch__btn:hover { border-color: var(--c-line-hover); }
.lang-switch__globe {
  width: 16px; height: 16px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex: none;
}
.lang-switch__globe::before,
.lang-switch__globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}
.lang-switch__globe::before { border-width: 0 1.6px; border-radius: 50%; transform: scaleX(.5); }
.lang-switch__globe::after  { border-width: 1.6px 0; border-radius: 0; top: 50%; height: 0; transform: none; }
.lang-switch__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  flex: none;
}
.lang-switch__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 176px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--c-canvas);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 28px rgba(39, 39, 39, .12);
  padding: 6px;
  z-index: 130;
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--c-ink);
  white-space: nowrap;
}
.lang-switch__opt:hover { background: var(--c-surface); }
.lang-switch__opt[aria-current="true"] { color: var(--a-text); font-weight: 700; }

/* 홈 히어로(투명 헤더) 위에서는 흰색, 스크롤하면 원래대로 */
body[data-page="home"] .site-header .lang-switch__btn {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .36);
  color: #fff;
}
body[data-page="home"] .site-header.is-solid .lang-switch__btn {
  background: var(--c-canvas);
  border-color: var(--c-line);
  color: var(--c-ink);
}

@media (max-width: 1199px) {
  /* 모바일: 언어 버튼을 오른쪽으로 밀고 햄버거 왼쪽에 둔다 */
  .lang-switch { margin-left: auto; margin-right: 8px; order: 2; }
  .nav-toggle { order: 3; margin-left: 0; }
}

/* 긴 언어(vi·id·fil·my·km): 가로 메뉴 대신 햄버거로 접어 헤더 넘침 방지 */
.nav-collapsed .nav-toggle { display: block; }
.nav-collapsed .gnb {
  position: fixed;
  top: var(--header-h);
  right: var(--menu-side);
  left: auto;
  width: calc(100% - (var(--menu-side) * 2));
  max-width: 400px;
  box-sizing: border-box;
  z-index: 95;
  max-height: calc(100vh - var(--header-h) - var(--menu-side));
  max-height: calc(100dvh - var(--header-h) - var(--menu-side));
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: var(--menu-pad-y) var(--menu-pad-x);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: transform .2s, opacity .2s, visibility .2s;
}
.nav-collapsed .gnb.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.nav-collapsed .gnb__list { flex-direction: column; align-items: stretch; gap: var(--menu-gap); }
.nav-collapsed .gnb__item--has-sub:not(:first-child) { margin-top: var(--menu-cat-extra); }
.nav-collapsed .gnb__link { padding: 0; font-size: var(--fs-body); line-height: var(--menu-line); border-radius: 0; }
/* 드롭다운은 밝은 면이므로 홈 히어로에서도 글자를 어둡게(흰색 규칙 무효화) */
body.nav-collapsed[data-page="home"] .site-header .gnb__link,
body.nav-collapsed[data-page="home"] .site-header .gnb__list.has-current .gnb__link:not([aria-current="page"]) {
  color: var(--c-ink-2);
}
body.nav-collapsed[data-page="home"] .site-header .gnb__link[aria-current="page"] { color: var(--a-text); }

/* nav-collapsed(햄버거) 상태: 드롭다운을 항상 펼친 들여쓰기 목록으로 */
.nav-collapsed .gnb__sub {
  position: static; opacity: 1; visibility: visible; transform: none;
  box-shadow: none; border: none; background: transparent;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: var(--menu-sub-gap);
  margin-top: var(--menu-cat-sub);
  padding: 0 0 0 14px;
}
.nav-collapsed .gnb__sub a { padding: 0; font-size: var(--fs-body); line-height: var(--menu-line); }
body.nav-collapsed[data-page="home"] .site-header .gnb__sub a { color: rgba(255,255,255,.8); }
body.nav-collapsed[data-page="home"] .site-header .gnb__sub a:hover { color: #fff; background: rgba(255,255,255,.12); }

/* --- 14-8. 언어별 줄맞춤·글꼴 -------------------------------------------- */
body[data-lang="ko"] { word-break: keep-all; }
body[data-lang="zh"] {
  word-break: normal; line-height: 1.75;
  font-family: "Pretendard", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
body[data-lang="vi"] { word-break: normal; }
body[data-lang="id"], body[data-lang="fil"] { word-break: normal; }
/* 태국어: 성조·상하 결합 문자가 있어 줄간격을 넉넉히, 시스템 글꼴에 의존 */
body[data-lang="th"] {
  line-height: 1.9;
  font-family: "Leelawadee UI", "Noto Sans Thai", "Sarabun", "Tahoma", sans-serif;
}
/* 크메르: 결합 문자가 많아 줄간격을 넉넉히, 시스템 글꼴에 의존 */
body[data-lang="km"] {
  line-height: 1.95;
  font-family: "Khmer OS", "Noto Sans Khmer", "Leelawadee UI", "Kh Battambang", sans-serif;
}
/* 라틴 계열(영어·베트남·인니·필리핀)은 제목이 길어지므로 살짝 줄인다 */
body[data-lang="en"] .banner__title,
body[data-lang="vi"] .banner__title,
body[data-lang="id"] .banner__title,
body[data-lang="fil"] .banner__title { letter-spacing: -.02em; }

/* --- 인쇄 --- */
@media print {
  .site-header, .site-footer, .filter, .nav-toggle,
  .site-search, .page-hero, .page-nav, .lang-switch { display: none; }
  body { color: var(--c-ink); }
}