/* ============================================================
   서브페이지 — 인사말 (복지타운 소개)
   ============================================================ */

/* === Page Hero (breadcrumb + page title + subnav) === */
.phero {
  position: relative;
  background: linear-gradient(180deg, #f4f7fc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}
.phero__wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px 32px 22px;
  position: relative;
  z-index: 1;
}
/* 모바일 — 좌우 padding 을 본문(.grt) 과 동일한 8px 로 통일.
   이전에 20px 였던 게 우측 공백의 실제 원인. */
@media (max-width: 720px) {
  .phero__wrap { padding: 14px 8px 18px !important; max-width: 100% !important; }
  /* phero overflow: hidden 이 모바일에선 .snav-drop__menu (절대위치 메뉴 패널) 를
     잘라먹음. 모바일에선 arc 장식이 어차피 display:none 이라 overflow 풀어도 안전. */
  .phero { overflow: visible !important; }
}

.phero__crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  margin-bottom: 12px;
}
.phero__crumb a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--color-label-alt);
  transition: color .15s;
}
.phero__crumb a:hover { color: var(--brand-cta); }
.phero__crumb [aria-current="page"] {
  color: var(--brand-blue);
  font-weight: 700;
}
.phero__crumb svg { color: var(--color-label-alt); opacity: .7; }

.phero__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-line);
}
.phero__eyebrow {
  margin: 0 0 6px;
  font-size: calc(13px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--brand-cta);
}
.phero__title {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 38px);   /* 한 단계 축소: 34~52 → 26~38 */
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-label-strong);
  line-height: 1.1;
}
.phero__lead {
  margin: 8px 0 0;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-normal);
  max-width: 640px;
  line-height: 1.5;
}
.phero__tools { display: flex; gap: 8px; }
@media (max-width: 720px) {
  /* 모바일에서는 공유·인쇄 아이콘 숨김 — 단순화 */
  .phero__tools { display: none; }
}
.ptool {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-line);
  color: var(--brand-cta);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.ptool:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); transform: translateY(-1px); }

/* decorative arc */
.phero__arc {
  position: absolute;
  right: -120px; top: -80px;
  width: 480px; height: 480px;
  background: radial-gradient(circle at 50% 50%, rgba(44,95,160,0.10) 0%, rgba(44,95,160,0) 65%);
  pointer-events: none;
  z-index: 0;
}

/* === Sub-nav (10 buttons, 5 cols x 2 rows) === */
.snav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 1000px) { .snav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ≤600px 부터는 카드 그리드 대신 커스텀 드롭다운으로 전환 */
.snav-drop { display: none; }
@media (max-width: 600px) {
  .snav { display: none; }
  .snav-drop {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 0;
    position: relative;
  }
  .snav-drop__lab {
    font-size: calc(13px * var(--fs));
    font-weight: 700;
    color: var(--color-label-alt);
    letter-spacing: 0.04em;
  }
  .snav-drop__btn {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(120deg, var(--brand-blue-deep, #1d3868) 0%, var(--brand-blue) 100%);
    color: #fff;
    border: 1px solid var(--brand-blue-deep, #1d3868);
    border-radius: var(--r-12, 12px);
    font-size: calc(16px * var(--fs));
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 6px 14px -8px rgba(29,56,104,0.5);
    text-align: left;
  }
  .snav-drop__btn:focus-visible { outline: 2px solid var(--brand-cta); outline-offset: 2px; }
  .snav-drop__btn-lab { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .snav-drop__btn svg { color: #fff; transition: transform .2s ease; }
  .snav-drop__btn.is-open svg { transform: rotate(-90deg); }

  /* 옵션 패널 — 브랜드 컬러 톤의 카드형 메뉴 */
  .snav-drop__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 60;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--r-12, 12px);
    box-shadow: 0 18px 38px -16px rgba(20,28,48,0.32), 0 2px 6px rgba(0,0,0,0.08);
    max-height: 360px;
    overflow-y: auto;
    animation: snavdropfade .15s ease-out;
  }
  @keyframes snavdropfade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .snav-drop__menu li { margin: 0; padding: 0; }
  .snav-drop__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 8px;
    color: var(--color-label-strong);
    font-size: calc(15px * var(--fs));
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
  }
  .snav-drop__opt:hover { background: var(--color-bg-alt); color: var(--brand-blue); }
  .snav-drop__opt.is-current {
    background: rgba(29,56,104,0.08);
    color: var(--brand-blue);
    font-weight: 800;
  }
  .snav-drop__opt-mark {
    color: var(--brand-blue);
    font-weight: 800;
  }

  /* 다크모드 */
  html[data-dark='true'] .snav-drop__menu {
    background: var(--color-bg-elev, #1f2329);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 18px 38px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
  }
  html[data-dark='true'] .snav-drop__opt { color: var(--color-label-strong, #fff); }
  html[data-dark='true'] .snav-drop__opt:hover { background: rgba(255,255,255,0.06); color: #6fb0ff; }
  html[data-dark='true'] .snav-drop__opt.is-current {
    background: rgba(51,133,255,0.18);
    color: #6fb0ff;
  }
  html[data-dark='true'] .snav-drop__opt-mark { color: #6fb0ff; }
}

.snav__item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  min-height: 50px;                          /* 60 → 50: 컴팩트, 라벨 줄바꿈 시 자동 확장 */
  padding: 0 14px 0 12px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--r-12);
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--color-label-normal);
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.snav__item:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -10px rgba(29,56,104,0.35);
}
.snav__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #eef3fa;
  color: var(--brand-blue);
  flex-shrink: 0;
}
.snav__lab { flex: 1; letter-spacing: -0.01em; word-break: keep-all; line-height: 1.35; }
.snav__arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.snav__item--on {
  background: linear-gradient(120deg, var(--brand-blue-deep, #1d3868) 0%, var(--brand-blue) 100%);
  border-color: var(--brand-blue-deep, #1d3868);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 28px -14px rgba(29,56,104,0.6);
}
.snav__item--on .snav__ico {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
.snav__item--on:hover { color: #fff; transform: translateY(-2px); }

/* === Greeting body === */
.grt__head {
  text-align: center;
  margin-bottom: 56px;
}
.grt__eyebrow {
  display: inline-block;
  font-size: calc(13px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--brand-cta);
  margin-bottom: 16px;
}
.grt__title {
  margin: 0 auto;
  max-width: 880px;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: var(--color-label-strong);
}
.grt__title em {
  font-style: normal;
  color: var(--brand-blue);
  position: relative;
}
.grt__title em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 12px;
  background: rgba(122,180,236,0.32);
  z-index: -1;
}
.grt__rule {
  display: block;
  width: 56px; height: 4px;
  background: var(--brand-cta);
  border-radius: 999px;
  margin: 28px auto 0;
}

.grt__layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 980px) {
  /* 1fr 대신 minmax(0, 1fr) — 자식 컨텐츠가 그리드 트랙을
     강제 확장해 가로 오버플로우가 생기는 사고 차단. */
  .grt__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
/* 본문이 절대 부모를 벗어나지 못하도록 폭 단단히 고정 */
.grt__body { min-width: 0; max-width: 100%; }
.grt__aside { min-width: 0; max-width: 100%; }

/* CEO card */
.grt__aside { position: sticky; top: 24px; }
@media (max-width: 980px) { .grt__aside { position: static; } }

.ceo { margin: 0 0 24px; }
.ceo__photo {
  position: relative;
  border-radius: var(--r-24);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #eaf1f9;
  isolation: isolate;
}
.ceo__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
}
.ceo__bg {
  position: absolute;
  left: -8%; right: -8%; top: 35%; bottom: 0;
  background: linear-gradient(180deg, rgba(44,95,160,0.0) 0%, rgba(44,95,160,0.85) 100%);
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .25s;
}
.ceo__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
}
.ceo__cap {
  margin-top: 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--r-16);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--sh-1);
}
.ceo__role {
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  color: var(--color-label-alt);
  letter-spacing: -0.005em;
}
.ceo__name {
  font-size: calc(24px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-label-strong);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.ceo__name-en {
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  color: var(--color-label-alt);
  letter-spacing: 0.04em;
}

.ceo__values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.ceo__values li {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px;
  background: #f4f7fc;
  border: 1px solid var(--color-line);
  border-radius: var(--r-12);
  text-align: center;
}
.ceo__values strong {
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-blue);
}
.ceo__values span {
  font-size: calc(12px * var(--fs));
  color: var(--color-label-alt);
  font-weight: 600;
}

/* Body text */
.grt__body {
  font-size: calc(17px * var(--fs));
  line-height: 1.85;
  color: var(--color-label-normal);
  letter-spacing: -0.01em;
}
.grt__body p { margin: 0 0 22px; text-wrap: pretty; }
.grt__body strong { color: var(--color-label-strong); font-weight: 700; }
.grt__body mark {
  background: linear-gradient(180deg, transparent 60%, rgba(255,203,71,0.45) 60%);
  color: inherit;
  padding: 0 2px;
}

.grt__hello {
  font-size: calc(22px * var(--fs)) !important;
  font-weight: 600 !important;
  color: var(--color-label-strong) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em;
  margin-bottom: 36px !important;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-line);
}
.grt__hello strong { color: var(--brand-blue); font-weight: 800; }

.grt__pull {
  margin: 36px 0 !important;
  padding: 24px 28px;
  background: #f4f7fc;
  border-left: 4px solid var(--brand-blue);
  border-radius: 4px var(--r-12) var(--r-12) 4px;
  font-size: calc(18px * var(--fs)) !important;
  font-weight: 600 !important;
  color: var(--color-label-strong) !important;
  line-height: 1.65 !important;
}
.grt__pull em {
  font-style: normal;
  color: var(--brand-cta);
  font-weight: 800;
}

.grt__thanks {
  font-size: calc(20px * var(--fs)) !important;
  font-weight: 700 !important;
  color: var(--color-label-strong) !important;
  margin-top: 32px !important;
  margin-bottom: 36px !important;
}

.grt__sign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
}
.grt__sign-org {
  font-size: calc(14px * var(--fs));
  color: var(--color-label-alt);
  font-weight: 600;
}
.grt__sign-name {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: calc(28px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-label-strong);
}
.grt__sign-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 4px;
  background: #c43a2e;
  color: #fff;
  font-size: calc(14px * var(--fs));
  font-weight: 800;
  font-family: serif;
  transform: rotate(6deg);
  box-shadow: 0 2px 8px rgba(196,58,46,0.35);
}

/* Next-up cards */
.grt__more {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .grt__more { grid-template-columns: 1fr; } }

.grt__more-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 28px;
  border: 1px solid var(--color-line);
  border-radius: var(--r-16);
  background: #fff;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.grt__more-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-blue);
  box-shadow: 0 12px 32px -16px rgba(29,56,104,0.35);
}
.grt__more-eyebrow {
  font-size: calc(13px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-cta);
}
.grt__more-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.grt__more-card:hover .grt__more-title { color: var(--brand-blue); }
.grt__more-sub {
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.55;
}
.grt__more-card--alt { background: linear-gradient(120deg, #1d3868 0%, #2c5fa0 100%); border-color: #1d3868; color: #fff; }
.grt__more-card--alt .grt__more-eyebrow { color: #FFCB47; }
.grt__more-card--alt .grt__more-title { color: #fff; }
.grt__more-card--alt .grt__more-sub { color: rgba(255,255,255,0.78); }
.grt__more-card--alt:hover .grt__more-title { color: #fff; }

/* === 인사말 페이지 모바일 최적화 (≤720px) ===
   처음부터 다시 정리한 단일 규칙. 충돌 차단을 위해 !important 사용.
   브레이크포인트도 480 → 720 으로 확대 (iPhone Pro Max 430 도 안정 커버). */
@media (max-width: 720px) {
  /* 1. 가로 스크롤 방지 */
  .grt__layout { overflow-x: hidden !important; }

  /* 2. .grt 영역의 wt-container — 좌우 패딩 완전 제거 (본문 박스가
        뷰포트 가장자리에 정확히 닿도록).
        !important 로 styles-1.css 의 wt-container 패딩 룰을 명시적으로 덮어씀. */
  .grt .wt-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  /* 3. 본문/사이드/헤더/카드 — 모두 부모(=뷰포트) 폭 그대로 사용 */
  .grt__layout,
  .grt__body,
  .grt__aside,
  .grt__head,
  .grt__more {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* 4. 텍스트 가독성용 안쪽 패딩 — 최소(8px) */
  .grt__body,
  .grt__aside,
  .grt__head,
  .grt__more { padding-left: 8px !important; padding-right: 8px !important; }

  /* 5. 풀쿼트 박스 — 본문 좌우 패딩 외에 추가 마진 없음 */
  .grt__pull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    border-left-width: 0;
  }

  /* 6. 장식 요소 숨김 */
  .phero__arc { display: none; }

  /* 7. 본문 폰트·간격 축소 */
  .grt__hello {
    font-size: calc(18px * var(--fs)) !important;
    margin-bottom: 24px !important;
    padding-bottom: 16px;
  }
  .grt__title { font-size: clamp(22px, 5vw, 28px); }
  .grt__pull {
    font-size: calc(16px * var(--fs)) !important;
    padding: 18px 16px;
  }
  .grt__sign-name { font-size: calc(22px * var(--fs)); }

  /* CEO 카드 보조 설명 — 가독성 위해 살짝 키우고 패딩 축소 */
  .ceo__values li { padding: 10px 6px; }
  .ceo__values span { font-size: calc(13px * var(--fs)); }
}

/* ============================================================
   DARK MODE OVERRIDES — 서브페이지 (인사말)
   ============================================================ */
html[data-dark='true'] .phero {
  background: linear-gradient(180deg, var(--color-bg-elev) 0%, var(--color-bg) 100%);
  border-bottom-color: var(--color-line);
}
html[data-dark='true'] .phero__arc {
  background: radial-gradient(circle at 50% 50%, rgba(122,180,236,0.10) 0%, rgba(122,180,236,0) 65%);
}
html[data-dark='true'] .phero__title { color: var(--color-label-strong); }
html[data-dark='true'] .phero__lead { color: var(--color-label-normal); }
html[data-dark='true'] .phero__eyebrow { color: #7AB4EC; }
html[data-dark='true'] .phero__crumb,
html[data-dark='true'] .phero__crumb a { color: var(--color-label-alt); }
html[data-dark='true'] .phero__crumb [aria-current="page"] { color: #7AB4EC; }

html[data-dark='true'] .ptool {
  background: var(--color-bg-elev);
  border-color: var(--color-line);
  color: #7AB4EC;
}
html[data-dark='true'] .ptool:hover {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

/* Sub-nav (10 buttons) */
html[data-dark='true'] .snav__item {
  background: var(--color-bg-elev);
  border-color: var(--color-line);
  color: var(--color-label-normal);
}
html[data-dark='true'] .snav__item:hover {
  border-color: #7AB4EC;
  color: #7AB4EC;
  box-shadow: 0 6px 18px -10px rgba(122,180,236,0.45);
}
html[data-dark='true'] .snav__ico {
  background: rgba(122,180,236,0.14);
  color: #7AB4EC;
}
html[data-dark='true'] .snav__item--on {
  background: linear-gradient(120deg, #2c5fa0 0%, #4a82c8 100%);
  border-color: #4a82c8;
  color: #fff;
  box-shadow: 0 12px 28px -14px rgba(74,130,200,0.6);
}
html[data-dark='true'] .snav__item--on .snav__ico {
  background: rgba(255,255,255,0.18);
  color: #fff;
}
html[data-dark='true'] .snav__item--on:hover { color: #fff; }

/* Greeting body */
html[data-dark='true'] .grt__title { color: var(--color-label-strong); }
html[data-dark='true'] .grt__title em { color: #7AB4EC; }
html[data-dark='true'] .grt__title em::after { background: rgba(122,180,236,0.22); }
html[data-dark='true'] .grt__eyebrow { color: #7AB4EC; }

html[data-dark='true'] .ceo__cap {
  background: var(--color-bg-elev);
  border-color: var(--color-line);
}
html[data-dark='true'] .ceo__role { color: var(--color-label-alt); }
html[data-dark='true'] .ceo__name { color: var(--color-label-strong); }
html[data-dark='true'] .ceo__name-en { color: var(--color-label-alt); }
html[data-dark='true'] .ceo__values li {
  background: rgba(122,180,236,0.06);
  border-color: var(--color-line);
}
html[data-dark='true'] .ceo__values strong { color: #7AB4EC; }
html[data-dark='true'] .ceo__values span { color: var(--color-label-alt); }
html[data-dark='true'] .ceo__photo { background: var(--color-bg-deep); }

html[data-dark='true'] .grt__body { color: var(--color-label-normal); }
html[data-dark='true'] .grt__body strong { color: var(--color-label-strong); }
html[data-dark='true'] .grt__hello { color: var(--color-label-strong) !important; border-bottom-color: var(--color-line); }
html[data-dark='true'] .grt__hello strong { color: #7AB4EC; }
html[data-dark='true'] .grt__pull {
  background: rgba(122,180,236,0.08);
  border-left-color: #7AB4EC;
  color: var(--color-label-strong) !important;
}
html[data-dark='true'] .grt__pull em { color: #FFCB47; }
html[data-dark='true'] .grt__thanks { color: var(--color-label-strong) !important; }
html[data-dark='true'] .grt__sign { border-top-color: var(--color-line); }
html[data-dark='true'] .grt__sign-org { color: var(--color-label-alt); }
html[data-dark='true'] .grt__sign-name { color: var(--color-label-strong); }

html[data-dark='true'] .grt__more { border-top-color: var(--color-line); }
html[data-dark='true'] .grt__more-card {
  background: var(--color-bg-elev);
  border-color: var(--color-line);
}
html[data-dark='true'] .grt__more-card:hover {
  border-color: #7AB4EC;
  box-shadow: 0 12px 32px -16px rgba(122,180,236,0.4);
}
html[data-dark='true'] .grt__more-eyebrow { color: #7AB4EC; }
html[data-dark='true'] .grt__more-title { color: var(--color-label-strong); }
html[data-dark='true'] .grt__more-card:hover .grt__more-title { color: #7AB4EC; }
html[data-dark='true'] .grt__more-sub { color: var(--color-label-alt); }
html[data-dark='true'] .grt__more-card--alt {
  background: linear-gradient(120deg, #1d3868 0%, #2c5fa0 100%);
  border-color: #4a82c8;
}
html[data-dark='true'] .grt__more-card--alt .grt__more-eyebrow { color: #FFCB47; }
html[data-dark='true'] .grt__more-card--alt .grt__more-title { color: #fff; }
html[data-dark='true'] .grt__more-card--alt .grt__more-sub { color: rgba(255,255,255,0.78); }

/* ───────── Day 2 신규 페이지 (협동조합/연혁/조직 구성) ───────── */

/* 협동조합 소개 — 풀폭 비주얼 히어로 (단체사진 + 오버레이 텍스트) */
.coop-hero {
  position: relative;
  width: 100%;
  background: #0a0d12;
  margin: 24px 0 56px;
}
.coop-hero--compact .coop-hero__bg { min-height: 480px; } /* 시설안내 등 짧은 hero 변형 */
/* compact 변형 — 컨테이너가 작아서 -90px 위로 끌어올리면 글자가 잘리므로 가운데 정렬 */
.coop-hero--compact .coop-hero__content { transform: none; }
.coop-hero__bg {
  position: relative;
  min-height: 600px; /* 데스크탑 기준 (사용자 요청) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coop-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
.coop-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 60px 32px;
  text-align: center;
  color: #fff;
  letter-spacing: -0.02em;
  transform: translateY(-90px); /* 사용자 요청: 텍스트를 위쪽으로 90px 이동 (사진 속 인물 얼굴 가림 방지) */
}
.coop-hero__eyebrow {
  display: inline-block;
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.90);
  margin-bottom: 22px;
  padding: 6px 16px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.coop-hero__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.30;
  margin: 0 0 28px;
  color: #fff;
}
.coop-hero__title span { display: block; }
.coop-hero__desc {
  font-size: calc(16px * var(--fs));
  font-weight: 500;
  line-height: 1.75;
  color: rgba(255,255,255,0.92);
  margin: 0 0 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.coop-hero__desc:last-of-type { margin-bottom: 28px; }
.coop-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: #fff;
  color: #171719;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.coop-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
@media (max-width: 720px) {
  .coop-hero { margin: 16px 0 32px; }
  /* 배경 이미지 내용을 30% 확대 — 세로형 컨테이너라 cover 는 높이 기준이므로
     auto 130% 로 높이를 1.3배 키워 줌인 효과 (1800x1198 가로 사진) */
  .coop-hero__bg { min-height: 420px; background-size: auto 111%; background-position: center calc(50% + 60px); }
  /* 모바일: 데스크탑 -90px(위로) 대신 살짝 아래로 내려 배치 */
  .coop-hero__content { padding: 40px 20px; transform: translateY(-40px); }
  .coop-hero__eyebrow { font-size: calc(13px * var(--fs)); padding: 5px 12px; margin-bottom: 16px; }
  .coop-hero__title { margin-bottom: 18px; }
  .coop-hero__desc { font-size: calc(14px * var(--fs)); line-height: 1.7; }
}

/* 협동조합 소개 .coop */
.coop__intro {
  max-width: 760px;
  margin: 24px auto 40px;
  color: var(--color-label-neutral, #2e2f33);
  font-size: calc(19px * var(--fs));
  line-height: 1.75;
}
.coop__intro p { margin: 0 0 14px; }
.coop__intro p:last-child { margin-bottom: 0; }
.coop__intro strong { color: var(--color-label-strong, #171719); font-weight: 600; }
.coop__lead {
  padding: 16px 20px;
  margin: 18px 0 !important;
  background: rgba(0, 102, 255, 0.05);
  border-left: 3px solid var(--color-primary-normal, #0066ff);
  border-radius: 0 8px 8px 0;
  font-size: calc(18px * var(--fs)) !important;
  color: var(--color-label-strong) !important;
}
.coop__lead em { color: var(--color-primary-strong, #005eeb); font-style: normal; font-weight: 500; }

.coop__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 40px 0;
}
.coop__stat {
  text-align: center;
  padding: 24px 12px;
  background: var(--color-background-alternative, #f7f7f8);
  border-radius: 12px;
}
.coop__stat-num {
  display: block;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(40px * var(--fs));
  font-weight: 700;
  color: var(--color-primary-normal, #0066ff);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.coop__stat-lab {
  display: block;
  margin-top: 6px;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alternative, #70737c);
  letter-spacing: -0.01em;
}

.coop__principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 40px 0;
}
.coop__card {
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.coop__card:hover { transform: translateY(-2px); border-color: rgba(0,102,255,0.4); }
.coop__card-eyebrow {
  display: block;
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  color: var(--color-primary-normal, #0066ff);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.coop__card-title {
  margin: 0 0 8px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.025em;
}
.coop__card-desc {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.6;
  color: var(--color-label-neutral, #2e2f33);
}

.coop__note {
  margin: 32px 0;
  padding: 16px 20px;
  background: var(--color-background-alternative, #f7f7f8);
  border-radius: 10px;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alternative, #70737c);
}
.coop__note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-label-strong, #171719);
  font-size: calc(15px * var(--fs));
}
.coop__note p { margin: 0; line-height: 1.55; }

/* 홍보영상 임베드 */
.coop__video {
  margin: 16px 0 32px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.coop__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 32px -16px rgba(20,28,48,0.30);
}
.coop__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
html[data-dark='true'] .coop__video-frame { box-shadow: 0 12px 32px -16px rgba(0,0,0,0.5); }

/* 연혁 .tl */
.tl {
  position: relative;
  padding: 24px 0 8px 0;
  margin: 32px 0 24px;
}
.tl::before {
  content: '';
  position: absolute;
  left: 84px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-line-normal-normal, rgba(112,115,124,0.22));
}
.tl__year {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0;
  margin-bottom: 28px;
}
.tl__marker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tl__year-num {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(22px * var(--fs));
  font-weight: 700;
  color: var(--color-primary-normal, #0066ff);
  letter-spacing: -0.03em;
}
.tl__dot {
  position: absolute;
  left: 78px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-primary-normal, #0066ff);
  z-index: 1;
}
.tl__items {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
}
.tl__item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 6px 0;
  font-size: calc(17px * var(--fs));
  line-height: 1.55;
  color: var(--color-label-neutral, #2e2f33);
}
.tl__month {
  font-variant-numeric: tabular-nums;
  font-size: calc(15px * var(--fs));
  font-weight: 500;
  color: var(--color-label-alternative, #70737c);
  letter-spacing: 0.02em;
}
.tl__text { color: var(--color-label-strong, #171719); }

/* 조직도 .org */
.org { margin: 40px 0 32px; text-align: center; }
.org__layer { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.org__layer--bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.org__node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  min-height: 60px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 10px;
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.org__node--accent {
  background: var(--color-primary-bg, #EAF2FE);
  border-color: var(--color-primary-normal, #0066ff);
  color: var(--color-primary-strong, #005eeb);
}
.org__node--unit {
  align-items: flex-start;
  padding: 16px 18px;
  text-align: left;
  border-top: 3px solid var(--unit-accent, #0066ff);
  transition: transform .15s ease, box-shadow .15s ease;
}
.org__node--unit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.12);
}
.org__node-name { font-size: calc(17px * var(--fs)); font-weight: 700; color: var(--unit-accent); }
.org__node-tag { display: block; margin-top: 4px; font-size: calc(14px * var(--fs)); font-weight: 500; color: var(--color-label-alternative, #70737c); }
.org__node-count { display: block; margin-top: 8px; font-size: calc(14px * var(--fs)); font-weight: 500; color: var(--color-label-neutral, #2e2f33); }

.org__connector {
  width: 1px;
  height: 28px;
  background: var(--color-line-normal-normal, rgba(112,115,124,0.22));
  margin: 0 auto;
}
.org__connector--branch {
  position: relative;
  height: 28px;
}
.org__connector--branch::after {
  content: '';
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  bottom: 0;
  height: 1px;
  background: var(--color-line-normal-normal, rgba(112,115,124,0.22));
}

.org__board { margin: 48px 0 16px; }
.org__board-title {
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.org__table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(16px * var(--fs));
}
.org__table th, .org__table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
}
.org__table th {
  background: var(--color-background-alternative, #f7f7f8);
  font-weight: 600;
  color: var(--color-label-strong, #171719);
  font-size: calc(15px * var(--fs));
}
.org__board-role { width: 140px; font-weight: 600; color: var(--color-label-strong); }
.org__board-name { width: 120px; }
.org__board-note { color: var(--color-label-alternative, #70737c); }

/* 모바일 */
@media (max-width: 768px) {
  .coop__stats { grid-template-columns: repeat(2, 1fr); }
  .coop__principles { grid-template-columns: 1fr; }
  .org__layer--bottom { grid-template-columns: 1fr 1fr; }
  .tl::before { left: 56px; }
  .tl__year { grid-template-columns: 80px 1fr; }
  .tl__dot { left: 50px; }
  .tl__items { padding-left: 18px; }
  .org__table th:nth-child(3), .org__table td:nth-child(3) { display: none; }
}

/* 다크 모드 */
html[data-dark='true'] .coop__stat { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .coop__card { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .coop__note { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .coop__lead { background: rgba(122,180,236,0.08); border-left-color: #7AB4EC; }
html[data-dark='true'] .coop__lead em { color: #7AB4EC; }
html[data-dark='true'] .tl::before { background: var(--color-line); }
html[data-dark='true'] .tl__year-num { color: #7AB4EC; }
html[data-dark='true'] .tl__dot { background: var(--color-bg); border-color: #7AB4EC; }
html[data-dark='true'] .org__node { background: var(--color-bg-elev); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark='true'] .org__node--accent { background: rgba(122,180,236,0.12); border-color: #7AB4EC; color: #7AB4EC; }
html[data-dark='true'] .org__connector, html[data-dark='true'] .org__connector--branch::after { background: var(--color-line); }
html[data-dark='true'] .org__table th { background: rgba(255,255,255,0.04); color: var(--color-label-strong); }
html[data-dark='true'] .org__table th, html[data-dark='true'] .org__table td { border-bottom-color: var(--color-line); }

/* ───────── v0.7 (구판 콘텐츠 반영) 추가 컴포넌트 ───────── */

/* 4대 사업분야 (협동조합 소개 .coop__fields) */
.coop__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 40px;
}
.coop__field {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px 22px 22px 18px;
  background: var(--color-background-alternative, #f7f7f8);
  border-left: 3px solid var(--color-primary-normal, #0066ff);
  border-radius: 0 10px 10px 0;
}
.coop__field-num {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(32px * var(--fs));
  font-weight: 700;
  color: var(--color-primary-normal, #0066ff);
  letter-spacing: -0.03em;
  line-height: 1;
}
.coop__field-name {
  margin: 0 0 6px;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
}
.coop__field-desc {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.6;
  color: var(--color-label-neutral, #2e2f33);
}

/* 인증 리스트 (협동조합 소개 .coop__certs) */
.coop__certs {
  list-style: none;
  margin: 24px 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.coop__certs li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 10px;
}
.coop__cert-year {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-primary-normal, #0066ff);
  letter-spacing: -0.03em;
  min-width: 48px;
}
.coop__cert-text {
  font-size: calc(15px * var(--fs));
  line-height: 1.5;
  color: var(--color-label-strong, #171719);
}

/* 연혁 미래 표시 (.tl__year--forward + .tl__badge) */
.tl__year--forward .tl__year-num { color: var(--color-label-alternative, #70737c); }
.tl__year--forward .tl__dot { border-color: var(--color-label-alternative, #70737c); border-style: dashed; }
.tl__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(0, 102, 255, 0.08);
  color: var(--color-primary-normal, #0066ff);
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* 조직도 중간 layer (본부 2개) — .org__layer--head + .org__node--head */
.org__layer--head { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 12px; justify-content: center; margin: 0 auto; }
.org__node--head {
  background: rgba(0, 102, 255, 0.04);
  border-color: rgba(0, 102, 255, 0.3);
  align-items: center;
  text-align: center;
}
.org__node--head .org__node-name { color: var(--color-primary-strong, #005eeb); font-size: calc(16px * var(--fs)); }
.org__node--head .org__node-tag { color: var(--color-label-neutral); font-size: calc(15px * var(--fs)); }

/* ───────── 조직도 v2 (.orgv2) ───────── */
.orgv2 {
  --c-rose:   #E94335;
  --c-blue:   #2c5fa0;
  --c-purple: #7C3AED;
  --c-ink:    #1d3868;
  position: relative;
  background: #ffffff;
  border-radius: 28px;
  padding: 32px 36px 40px;
  margin: 24px 0 48px;
  box-shadow: 0 20px 56px -28px rgba(20,28,48,0.35), 0 4px 16px rgba(20,28,48,0.06);
  overflow: hidden;
}
.orgv2::before {
  content: ''; position: absolute; left: -120px; top: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(closest-side, rgba(44,95,160,.10), transparent 70%);
  pointer-events: none;
}
.orgv2::after {
  content: ''; position: absolute; right: -120px; bottom: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(closest-side, rgba(233,67,53,.07), transparent 70%);
  pointer-events: none;
}
.orgv2__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
  position: relative;
}
.orgv2__title-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.orgv2__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: calc(13px * var(--fs));
  letter-spacing: 0.16em; color: var(--brand-cta, #0066ff);
  text-transform: uppercase;
}
.orgv2__eyebrow::before {
  content: ''; display: inline-block; width: 22px; height: 2px;
  background: var(--brand-cta, #0066ff); border-radius: 2px;
}
.orgv2__title {
  margin: 0;
  font-weight: 700; font-size: calc(26px * var(--fs));
  letter-spacing: -0.035em;
  color: var(--color-label-strong);
  line-height: 1.15;
}
.orgv2__title strong { color: var(--c-ink); font-weight: 800; }
.orgv2__meta {
  text-align: right;
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.7;
  white-space: nowrap;
}
.orgv2__meta b { color: var(--color-label-strong); font-weight: 700; }

/* 이용자 crown */
.orgv2-crown {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 8px 0 0;
}
.orgv2-crown__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(120deg, #1d3868 0%, #2c5fa0 100%);
  color: #fff;
  font-weight: 700; font-size: calc(14px * var(--fs));
  letter-spacing: 0.04em;
  box-shadow: 0 8px 20px -10px rgba(29,56,104,.55);
}
.orgv2-crown__chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px; background: #FFCB47;
  box-shadow: 0 0 0 4px rgba(255,203,71,.25);
}
.orgv2-crown__caption {
  font-size: calc(13px * var(--fs)); color: var(--color-label-alt);
  letter-spacing: 0.02em;
}
.orgv2-crown__line {
  width: 2px; height: 14px;
  background: linear-gradient(180deg, #cfd5df 0%, transparent 100%);
  margin-top: 2px;
}

/* CEO crest */
.orgv2-ceo {
  position: relative;
  width: 144px; height: 144px;
  margin: 6px auto 20px;
}
.orgv2-ceo__pulse {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(44,95,160,.10), transparent 70%);
}
.orgv2-ceo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orgv2-ceo__core {
  position: absolute; inset: 20px;
  border-radius: 999px;
  background: linear-gradient(160deg, #ffffff 0%, #f3f6fb 100%);
  border: 1px solid var(--color-line);
  box-shadow: 0 12px 28px -18px rgba(29,56,104,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.orgv2-ceo__role {
  font-size: calc(11px * var(--fs)); font-weight: 700;
  letter-spacing: 0.16em; color: var(--brand-cta, #0066ff);
}
.orgv2-ceo__name {
  font-weight: 800; font-size: calc(24px * var(--fs));
  letter-spacing: -0.04em;
  color: var(--color-label-strong);
  line-height: 1;
}
.orgv2-ceo__name-en {
  font-size: calc(9px * var(--fs)); font-weight: 600;
  color: var(--color-label-alt);
  letter-spacing: 0.12em;
}

/* Connector wires */
.orgv2-wires {
  position: relative; height: 48px; margin: -12px 0 0;
}
.orgv2-wires__drop {
  position: absolute; left: 50%; top: 0; height: 14px; width: 2px;
  background: #cfd5df; transform: translateX(-50%);
}
.orgv2-wires__bus {
  position: absolute; left: 16.6%; right: 16.6%; top: 14px; height: 2px;
  background: #cfd5df;
}
.orgv2-wires__leg { position: absolute; top: 14px; height: 34px; width: 3px; transform: translateX(-50%); border-radius: 2px; }
.orgv2-wires__leg--1 { left: 16.6%; background: #E94335; }
.orgv2-wires__leg--2 { left: 50%;   background: #2c5fa0; }
.orgv2-wires__leg--3 { left: 83.4%; background: #7C3AED; }
.orgv2-wires__dot { position: absolute; top: 44px; width: 8px; height: 8px; border-radius: 50%; transform: translateX(-50%); }
.orgv2-wires__dot--1 { left: 16.6%; background: #E94335; }
.orgv2-wires__dot--2 { left: 50%;   background: #2c5fa0; }
.orgv2-wires__dot--3 { left: 83.4%; background: #7C3AED; }

/* 3 department columns */
.orgv2-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 22px; align-items: start;
}
.orgv2-col {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid var(--color-line);
  border-radius: 22px;
  padding: 22px 18px 18px;
  box-shadow: 0 8px 24px -16px rgba(20,28,48,0.22);
}
.orgv2-col__band {
  position: absolute; left: 22px; right: 22px; top: 0;
  height: 5px; border-radius: 0 0 5px 5px;
  background: var(--c);
  box-shadow: 0 6px 18px -8px var(--c);
}
.orgv2-col__count {
  position: absolute; top: 18px; right: 18px;
  height: 28px; min-width: 40px; padding: 0 10px;
  border-radius: 999px;
  background: var(--c); color: #fff;
  font-weight: 800; font-size: calc(13px * var(--fs));
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px var(--c);
}
.orgv2-col__head { padding-right: 56px; margin-bottom: 18px; min-height: 92px; }
.orgv2-col__tag {
  display: inline-block;
  font-weight: 700; font-size: calc(13px * var(--fs));
  letter-spacing: 0.14em; color: var(--c);
  margin-bottom: 6px;
  white-space: nowrap; word-break: keep-all;
}
.orgv2-col__title {
  margin: 0;
  font-size: calc(19px * var(--fs)); font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-label-strong);
  line-height: 1.35;
}
.orgv2-col__divider {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--color-line) 0, var(--color-line) 4px, transparent 4px, transparent 8px);
  margin: 0 0 14px;
}

/* lead row */
.orgv2-lead {
  display: grid; grid-template-columns: 60px 1fr;
  align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  margin-bottom: 8px;
}
.orgv2-lead__role {
  text-align: center;
  font-weight: 800; font-size: calc(13px * var(--fs));
  color: #fff; background: var(--c);
  border-radius: 999px;
  padding: 5px 0;
  letter-spacing: -0.01em;
}
.orgv2-lead__name {
  font-weight: 700; font-size: calc(16px * var(--fs));
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.orgv2-lead__name small {
  display: block;
  font-weight: 500; font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  letter-spacing: 0;
  margin-top: 1px;
}

/* member row */
.orgv2-member {
  display: grid; grid-template-columns: 60px 1fr;
  align-items: center; gap: 12px;
  padding: 9px 14px;
  border-radius: 12px;
  background: #f3f5f9;
  margin-bottom: 6px;
}
.orgv2-member__role {
  text-align: center;
  font-weight: 700; font-size: calc(13px * var(--fs));
  color: var(--color-label-neutral); background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 3px 0;
  letter-spacing: -0.01em;
}
.orgv2-member__name {
  font-weight: 600; font-size: calc(14px * var(--fs));
  color: var(--color-label-strong);
  letter-spacing: -0.015em;
}

/* parts (파트장) */
.orgv2-parts {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; margin-top: 10px;
}
.orgv2-part {
  text-align: center;
  padding: 8px 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 14%, #fff);
  color: var(--c);
  font-weight: 700; font-size: calc(13px * var(--fs));
  border: 1px dashed color-mix(in srgb, var(--c) 50%, transparent);
}

/* footer */
.orgv2__foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px dashed var(--color-line-strong);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: calc(13px * var(--fs)); color: var(--color-label-alt);
}
.orgv2-legend { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.orgv2-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: calc(13px * var(--fs)); }
.orgv2-legend i {
  width: 10px; height: 10px; border-radius: 3px; display: inline-block;
  background: var(--lc);
}
.orgv2__stamp {
  font-weight: 700; color: var(--c-ink, #1d3868); letter-spacing: -0.01em;
}

/* 다크 모드 */
html[data-dark='true'] .orgv2 { background: var(--color-bg-elev); }
html[data-dark='true'] .orgv2-col { background: linear-gradient(180deg, var(--color-bg-elev) 0%, var(--color-bg-deep, #1a1d21) 100%); border-color: var(--color-line); }
html[data-dark='true'] .orgv2-ceo__core { background: linear-gradient(160deg, var(--color-bg-elev) 0%, var(--color-bg-deep, #1a1d21) 100%); border-color: var(--color-line); }
html[data-dark='true'] .orgv2-member { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .orgv2-member__role { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .orgv2-wires__drop, html[data-dark='true'] .orgv2-wires__bus { background: var(--color-line-strong); }

/* 모바일·태블릿 */
@media (max-width: 900px) {
  .orgv2 { padding: 24px 18px 28px; border-radius: 20px; }
  .orgv2__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .orgv2__meta { text-align: left; white-space: normal; }
  .orgv2-cols { grid-template-columns: 1fr; gap: 16px; }
  .orgv2-wires { display: none; }
  .orgv2-ceo { margin: 14px auto 18px; }
}

/* 협력 네트워크 (.org__partners) */
.org__partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 32px;
}
.org__partner {
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
}
.org__partner h4 {
  margin: 0 0 8px;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
}
.org__partner p {
  margin: 0;
  font-size: calc(15px * var(--fs));
  line-height: 1.55;
  color: var(--color-label-alternative, #70737c);
}

/* 모바일 */
@media (max-width: 768px) {
  .coop__fields { grid-template-columns: 1fr; }
  .coop__certs { grid-template-columns: 1fr; }
  .org__layer--head { grid-template-columns: 1fr; }
  .org__partners { grid-template-columns: 1fr; }
}

/* 다크 모드 */
html[data-dark='true'] .coop__field { background: rgba(255,255,255,0.04); border-left-color: #7AB4EC; }
html[data-dark='true'] .coop__field-num { color: #7AB4EC; }
html[data-dark='true'] .coop__certs li { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .coop__cert-year { color: #7AB4EC; }
html[data-dark='true'] .tl__badge { background: rgba(122,180,236,0.12); color: #7AB4EC; }
html[data-dark='true'] .org__node--head { background: rgba(122,180,236,0.06); border-color: rgba(122,180,236,0.3); }
html[data-dark='true'] .org__node--head .org__node-name { color: #7AB4EC; }
html[data-dark='true'] .org__partner { background: var(--color-bg-elev); border-color: var(--color-line); }

/* ───────── v0.8 Day 3 (경영이념 .msn / 사업부서 허브 .units) ─────────
   ※ 노안 친화: 본문 17px+, 라벨 15px+, 모든 사이즈에 var(--fs) 스케일 적용 */

/* ===== 경영이념 .msn ===== */

/* 1. 미션·비전·슬로건 3카드 */
.msn__core {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px 0 56px;
}
.msn__core-card {
  padding: 28px 26px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  border-top: 4px solid var(--color-primary-normal, #0066ff);
  transition: transform .15s ease, box-shadow .15s ease;
}
.msn__core-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(0,0,0,0.12); }
.msn__core-card--vision { border-top-color: #E94335; }
.msn__core-card--slogan { border-top-color: #B5781A; }
.msn__core-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.msn__core-kr {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(20px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.03em;
}
.msn__core-en {
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  color: var(--color-label-alternative, #70737c);
  letter-spacing: 0.06em;
}
.msn__core-title {
  margin: 0 0 12px;
  font-size: calc(22px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
  line-height: 1.35;
}
.msn__core-body {
  margin: 0;
  font-size: calc(17px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral, #2e2f33);
}

/* 2. 4대 핵심 가치 */
.msn__values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 28px 0 56px;
}
.msn__value {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items: start;
  padding: 26px 24px;
  background: var(--color-background-alternative, #f7f7f8);
  border-radius: 14px;
  border-left: 4px solid var(--color-primary-normal, #0066ff);
}
.msn__value-num {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(40px * var(--fs));
  font-weight: 800;
  color: var(--color-primary-normal, #0066ff);
  letter-spacing: -0.04em;
  line-height: 1;
}
.msn__value-eyebrow {
  display: block;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--color-primary-strong, #005eeb);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.msn__value-title {
  margin: 0 0 10px;
  font-size: calc(20px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
}
.msn__value-text {
  margin: 0;
  font-size: calc(17px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}

/* 3. 약속·실천 5가지 */
.msn__promises {
  list-style: none;
  margin: 28px 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.msn__promise {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
}
.msn__promise-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-normal, #0066ff);
  color: #fff;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
}
.msn__promise-text {
  font-size: calc(17px * var(--fs));
  line-height: 1.6;
  color: var(--color-label-strong, #171719);
}

/* ===== 사업부서 소개 허브 .units ===== */

.units__lead {
  max-width: 880px;
  margin: 24px auto 40px;
  font-size: calc(18px * var(--fs));
  line-height: 1.75;
  color: var(--color-label-neutral, #2e2f33);
}
.units__lead strong { color: var(--color-label-strong, #171719); font-weight: 700; }
.units__onepager {
  max-width: 1000px;
  margin: 24px auto 32px;
  padding: 16px;
  background: #fafbfd;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  text-align: center;
}
.units__onepager img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
}
html[data-dark='true'] .units__onepager { background: rgba(255,255,255,0.04); border-color: var(--color-line); }

/* 4 카드 그리드 */
.units__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 28px 0 56px;
}

.units__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 26px 90px;
  background: var(--bu-bg-soft, #f7f7f8);
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-top: 5px solid var(--bu-accent, #0066ff);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.units__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -18px rgba(0,0,0,0.16);
}

.units__card-eyebrow {
  display: block;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.units__card-name {
  margin: 0 0 4px;
  font-size: calc(26px * var(--fs));
  font-weight: 800;
  color: var(--bu-deep);
  letter-spacing: -0.035em;
  line-height: 1.25;
}
.units__card-tag {
  margin: 0;
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  color: var(--bu-accent);
  letter-spacing: -0.015em;
}

.units__card-mission {
  margin: 4px 0 0;
  font-size: calc(17px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral, #2e2f33);
}

.units__card-prog {
  margin-top: 4px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 10px;
}
.units__card-prog-h {
  display: block;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--color-label-alternative, #70737c);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.units__card-prog ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.units__card-prog li {
  position: relative;
  padding-left: 14px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  color: var(--bu-deep);
  letter-spacing: -0.015em;
}
.units__card-prog li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--bu-accent);
}

.units__card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.units__card-stat {
  display: flex;
  flex-direction: column;
}
.units__card-stat-val {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(24px * var(--fs));
  font-weight: 800;
  color: var(--bu-deep);
  letter-spacing: -0.04em;
  line-height: 1;
}
.units__card-stat-lab {
  margin-top: 4px;
  font-size: calc(14px * var(--fs));
  color: var(--color-label-alternative, #70737c);
}
.units__card-contact { text-align: right; }
.units__card-floor {
  display: block;
  font-size: calc(14px * var(--fs));
  color: var(--color-label-alternative, #70737c);
  margin-bottom: 4px;
}
.units__card-tel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  color: var(--bu-deep);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.units__card-tel:hover { text-decoration: underline; }

.units__card-cta {
  position: absolute;
  left: 26px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--bu-accent);
  color: #fff;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.units__card:hover .units__card-cta { background: var(--bu-deep); }

/* 비교 표 */
.units__cmp-wrap { margin: 24px 0 40px; overflow-x: auto; }
.units__cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(17px * var(--fs));
}
.units__cmp th, .units__cmp td {
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
}
.units__cmp th {
  background: var(--color-background-alternative, #f7f7f8);
  font-weight: 700;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-strong);
  letter-spacing: -0.015em;
}
.units__cmp td { color: var(--color-label-neutral); }
.units__cmp-name { font-size: calc(18px * var(--fs)); }
.units__cmp a { color: inherit; font-weight: 700; text-decoration: none; }
.units__cmp a:hover { text-decoration: underline; }

/* 모바일 */
@media (max-width: 768px) {
  .msn__core { grid-template-columns: 1fr; }
  .msn__values { grid-template-columns: 1fr; }
  .msn__value { grid-template-columns: 52px 1fr; gap: 14px; padding: 22px 18px; }
  .msn__promise { grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 18px; }
  .units__grid { grid-template-columns: 1fr; }
  .units__card { padding: 24px 22px 90px; }
  .units__card-name { font-size: calc(22px * var(--fs)); }
  .units__card-foot { flex-direction: column; align-items: flex-start; }
  .units__card-contact { text-align: left; }
}

/* 다크 모드 */
html[data-dark='true'] .msn__core-card { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .msn__core-kr { color: var(--color-label-strong); }
html[data-dark='true'] .msn__value { background: rgba(255,255,255,0.04); border-left-color: #7AB4EC; }
html[data-dark='true'] .msn__value-num { color: #7AB4EC; }
html[data-dark='true'] .msn__value-eyebrow { color: #7AB4EC; }
html[data-dark='true'] .msn__promise { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .units__card { background: rgba(255,255,255,0.04); border-color: var(--color-line); }
html[data-dark='true'] .units__card-prog { background: rgba(0,0,0,0.16); }
html[data-dark='true'] .units__cmp th { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .units__cmp th, html[data-dark='true'] .units__cmp td { border-bottom-color: var(--color-line); }

/* ───────── v0.9 Day 4 (사업부 상세 .bu) — 노안 친화 폰트 ───────── */

.bu { /* 페이지 루트 wrapper. BU 컬러는 인라인 style 로 주입됨 (--bu-accent 등) */ }

/* 빠른 정보 카드 (전화/위치/스탯) */
.bu__intro { margin: 24px 0 56px; }
.bu__summary {
  font-size: calc(20px * var(--fs));
  font-weight: 600;
  color: var(--bu-deep);
  letter-spacing: -0.02em;
  line-height: 1.6;
  margin: 0 0 16px;
}
.bu__longdesc {
  font-size: calc(17px * var(--fs));
  line-height: 1.75;
  color: var(--color-label-neutral, #2e2f33);
  margin: 0 0 24px;
}
.bu__quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.bu__quick-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--bu-bg-soft, #f7f7f8);
  border-left: 4px solid var(--bu-accent, #0066ff);
  border-radius: 0 12px 12px 0;
}
.bu__quick-lab {
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  color: var(--color-label-alternative, #70737c);
  letter-spacing: 0.02em;
}
.bu__quick-val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(20px * var(--fs));
  font-weight: 700;
  color: var(--bu-deep);
  letter-spacing: -0.02em;
  text-decoration: none;
}
a.bu__quick-val:hover { text-decoration: underline; }

/* 주요 프로그램 카드 */
.bu__programs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin: 24px 0 56px;
}
.bu__program {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
  border-top: 4px solid var(--bu-accent);
}
.bu__program-num {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(32px * var(--fs));
  font-weight: 800;
  color: var(--bu-accent);
  letter-spacing: -0.04em;
  line-height: 1;
}
.bu__program-name {
  margin: 0 0 6px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.025em;
}
.bu__program-target {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  background: var(--bu-bg, #EAF2FE);
  color: var(--bu-deep);
  border-radius: 999px;
  font-size: calc(14px * var(--fs));
  font-weight: 600;
}
.bu__program-desc {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}

/* 서비스 대상 */
.bu__eligibility {
  list-style: none;
  margin: 24px 0 56px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.bu__eligibility li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 20px;
  background: var(--bu-bg-soft);
  border-radius: 10px;
  font-size: calc(17px * var(--fs));
  line-height: 1.6;
  color: var(--color-label-strong);
}
.bu__eligibility li svg { color: var(--bu-accent); }

/* 이용 절차 (가로 스크롤 가능한 5단계) */
.bu__process {
  list-style: none;
  margin: 24px 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  position: relative;
}
.bu__process-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 12px;
  border-bottom: 3px solid var(--bu-accent);
}
.bu__process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bu-accent);
  color: #fff;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.03em;
}
.bu__process-title {
  margin: 0;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.bu__process-desc {
  margin: 0;
  font-size: calc(15px * var(--fs));
  line-height: 1.6;
  color: var(--color-label-neutral);
}

/* 요금 */
.bu__fee {
  margin: 24px 0 56px;
  padding: 28px 26px;
  background: var(--bu-bg-soft);
  border-radius: 14px;
}
.bu__fee-detail {
  margin: 0 0 16px;
  font-size: calc(17px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-strong);
}
.bu__fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(17px * var(--fs));
}
.bu__fee-table th, .bu__fee-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-align: left;
}
.bu__fee-table th {
  width: 35%;
  background: rgba(255,255,255,0.6);
  font-weight: 700;
  color: var(--bu-deep);
  border-radius: 8px 0 0 8px;
}

/* 제출 서류 */
.bu__documents {
  list-style: none;
  margin: 24px 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.bu__documents li {
  position: relative;
  padding: 14px 18px 14px 38px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 10px;
  font-size: calc(16px * var(--fs));
  line-height: 1.55;
  color: var(--color-label-strong);
}
.bu__documents li::before {
  content: '📄';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(16px * var(--fs));
}

/* 행복합니다 — 협업 파트너 */
.bu__partners {
  list-style: none;
  margin: 24px 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.bu__partners li {
  padding: 16px 20px;
  background: var(--bu-bg-soft);
  border-left: 3px solid var(--bu-accent);
  border-radius: 0 10px 10px 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.55;
  color: var(--color-label-strong);
}

/* 시설 태그 */
.bu__facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 56px;
}
.bu__facility-tag {
  display: inline-block;
  padding: 10px 18px;
  background: var(--bu-bg);
  color: var(--bu-deep);
  border-radius: 999px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* 연락처 카드 (큰 CTA) */
.bu__contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 40px 0 32px;
  padding: 32px 32px;
  background: linear-gradient(120deg, var(--bu-bg) 0%, var(--bu-bg-soft) 100%);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
}
.bu__contact-eyebrow {
  display: block;
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.bu__contact-team {
  margin: 0 0 4px;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  color: var(--bu-deep);
  letter-spacing: -0.03em;
}
.bu__contact-floor {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-neutral);
}
.bu__contact-tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--bu-accent);
  color: #fff;
  border-radius: 999px;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.bu__contact-tel:hover { background: var(--bu-deep); transform: translateY(-2px); }

/* 모바일 */
@media (max-width: 768px) {
  .bu__quick { grid-template-columns: 1fr; }
  .bu__program { grid-template-columns: 48px 1fr; gap: 14px; padding: 20px 18px; }
  .bu__contact-card { flex-direction: column; align-items: flex-start; padding: 24px 22px; }
  .bu__contact-tel { width: 100%; justify-content: center; }
}

/* 다크 모드 */
html[data-dark='true'] .bu__quick-item { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .bu__program { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .bu__eligibility li { background: rgba(255,255,255,0.04); color: var(--color-label-strong); }
html[data-dark='true'] .bu__process-step { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .bu__fee { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .bu__fee-table th { background: rgba(0,0,0,0.16); }
html[data-dark='true'] .bu__documents li { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .bu__partners li { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .bu__contact-card { background: linear-gradient(120deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 100%); }

/* ───────── v1.1 Day 7 (서비스 상세 .svc) — 노안 친화 폰트 ───────── */

/* 한국어 단어 단위 줄바꿈 — svc 본문 전역 (모든 자식 상속) */
.svc-sec,
.svc-sec h1, .svc-sec h2, .svc-sec h3, .svc-sec h4, .svc-sec h5,
.svc-sec p, .svc-sec li, .svc-sec td, .svc-sec th,
.svc-sec span, .svc-sec em, .svc-sec strong, .svc-sec small,
.svc-sec a, .svc-sec button, .svc-sec div { word-break: keep-all; line-break: strict; }

/* 한 장으로 보는 인포그래픽 — max 1000px, 중앙 정렬 */
.svc__onepager {
  max-width: 1200px;
  margin: 16px auto 28px;
  padding: 16px;
  background: #fafbfd;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  position: relative;
  min-height: 60px;
  text-align: center;
}
.svc__onepager img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
}
.svc__onepager-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 24px;
  text-align: center;
  color: var(--color-label-alt);
  font-size: calc(14px * var(--fs));
}
.svc__onepager-placeholder span:nth-of-type(2) {
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
}
.svc__onepager-placeholder small {
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
}
.svc__onepager--missing .svc__onepager-placeholder { display: flex; }
html[data-dark='true'] .svc__onepager { background: rgba(255,255,255,0.04); border-color: var(--color-line); }

/* 사업 목적 */
.svc__purpose {
  margin: 16px 0 32px;
  padding: 24px 28px;
  background: color-mix(in srgb, var(--bu-accent) 6%, #fff);
  border-left: 4px solid var(--bu-accent);
  border-radius: 0 12px 12px 0;
}
.svc__purpose p {
  margin: 0 0 14px;
  font-size: calc(18px * var(--fs));
  line-height: 1.75;
  color: var(--color-label-neutral, #3a4150);
  word-break: keep-all;
}
.svc__purpose-legal {
  margin: 0 !important;
  padding-top: 12px;
  border-top: 1px dashed var(--color-line-normal-normal);
  font-size: calc(14px * var(--fs)) !important;
  color: var(--color-label-alt) !important;
}
.svc__purpose-legal strong { font-weight: 700; color: var(--bu-accent); }
html[data-dark='true'] .svc__purpose { background: color-mix(in srgb, var(--bu-accent) 12%, var(--color-bg-elev, #1a1d21)); }

/* 65세 연령 상한 폐지 강조 배너 */
.svc__age-notice {
  margin: 16px 0 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #FFE4B0 0%, #FFCB47 100%);
  border-radius: 14px;
  border: 1px solid rgba(181,120,26,0.30);
  position: relative;
  overflow: hidden;
}
.svc__age-notice::before {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  pointer-events: none;
}
.svc__age-notice-badge {
  display: inline-block;
  padding: 5px 13px;
  background: #5A350A;
  color: #FFCB47;
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  position: relative; z-index: 1;
}
.svc__age-notice-title {
  margin: 0 0 10px;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #5A350A;
  line-height: 1.45;
  position: relative; z-index: 1;
  word-break: keep-all;
}
.svc__age-notice-body {
  margin: 0;
  font-size: calc(17px * var(--fs));
  line-height: 1.75;
  color: #5A350A;
  word-break: keep-all;
  position: relative; z-index: 1;
}
html[data-dark='true'] .svc__age-notice {
  background: linear-gradient(135deg, rgba(255,203,71,0.18) 0%, rgba(181,120,26,0.22) 100%);
  border-color: rgba(255,203,71,0.32);
}
html[data-dark='true'] .svc__age-notice-title,
html[data-dark='true'] .svc__age-notice-body { color: #FFE4B0; }

/* 부모교육 — 5가지 변화 (benefits) */
.svc__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 16px 0 32px;
}
.svc__benefit {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 24px 24px 22px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 14px;
}
.svc__benefit-num {
  position: absolute; top: 16px; right: 18px;
  font-size: calc(32px * var(--fs));
  font-weight: 900;
  color: color-mix(in srgb, var(--bu-accent) 18%, transparent);
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
  line-height: 1;
}
.svc__benefit strong {
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
  padding-right: 50px;
}
.svc__benefit p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
}
html[data-dark='true'] .svc__benefit { background: var(--color-bg-elev); border-color: var(--color-line); }

/* 부모교육 — 5대 교육 영역 (educationAreas) */
.svc__edu-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 16px 0 32px;
}
.svc__edu-area {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-top: 4px solid var(--bu-accent);
  border-radius: 14px;
}
.svc__edu-area header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--color-line-normal-normal);
}
.svc__edu-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bu-accent);
  color: #fff;
  font-size: calc(15px * var(--fs));
  font-weight: 800;
  flex-shrink: 0;
}
.svc__edu-area h4 {
  margin: 0;
  font-size: calc(19px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.svc__edu-area ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.svc__edu-area li {
  position: relative;
  padding-left: 16px;
  font-size: calc(16px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}
.svc__edu-area li::before {
  content: '';
  position: absolute; left: 0; top: 9px;
  width: 6px; height: 2px;
  background: var(--bu-accent);
}
html[data-dark='true'] .svc__edu-area { background: var(--color-bg-elev); border-color: var(--color-line); }

/* 부모교육 — 정부 지원 사업 (govSupport) */
.svc__gov {
  max-width: 720px;
  margin: 16px auto 32px;
  background: #f5f9ff;
  border: 1px solid rgba(44,95,160,0.20);
  border-radius: 14px;
  padding: 4px;
  overflow: hidden;
}
.svc__gov table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(16px * var(--fs));
}
.svc__gov th {
  width: 1%;
  white-space: nowrap;
  text-align: left;
  padding: 14px 20px;
  background: #2c5fa0;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
  word-break: keep-all;
}
.svc__gov td {
  padding: 14px 18px;
  border-top: 1px solid rgba(44,95,160,0.15);
  color: var(--color-label-neutral);
  line-height: 1.7;
  background: #fff;
}
.svc__gov tr:first-child th,
.svc__gov tr:first-child td { border-top: 0; }
.svc__gov-tips {
  list-style: none; padding: 12px 16px 8px; margin: 0;
}
.svc__gov-tips li {
  font-size: calc(15px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
  padding: 5px 0;
}
html[data-dark='true'] .svc__gov { background: rgba(44,95,160,0.10); border-color: rgba(44,95,160,0.32); }
html[data-dark='true'] .svc__gov td { background: var(--color-bg-elev); }

/* 신청 자격 / 제외 대상 */
.svc__elig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 32px;
}
.svc__elig-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 14px;
}
.svc__elig-card strong {
  display: block;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  margin-bottom: 12px;
}
.svc__elig-card--in { background: color-mix(in srgb, #1B7F3A 7%, #fff); border-color: rgba(27,127,58,0.30); }
.svc__elig-card--in strong { color: #1B7F3A; }
.svc__elig-card--in p { margin: 0; font-size: calc(17px * var(--fs)); line-height: 1.7; color: var(--color-label-neutral); }
.svc__elig-card--out { background: color-mix(in srgb, #E94335 6%, #fff); border-color: rgba(233,67,53,0.28); }
.svc__elig-card--out strong { color: #B32314; }
.svc__elig-card--out ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.svc__elig-card--out li {
  padding-left: 18px;
  position: relative;
  font-size: calc(16px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}
.svc__elig-card--out li::before { content: '–'; position: absolute; left: 4px; color: #B32314; font-weight: 700; }
@media (max-width: 720px) { .svc__elig { grid-template-columns: 1fr; } }

/* 서비스 유형 */
.svc__types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 32px;
}
.svc__type-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-top: 4px solid var(--bu-accent);
  border-radius: 14px;
}
.svc__type-name {
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
  letter-spacing: 0.04em;
}
.svc__type-hours {
  font-size: calc(30px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-label-strong);
  font-feature-settings: 'tnum';
}
.svc__type-card p { margin: 6px 0 0; font-size: calc(16px * var(--fs)); line-height: 1.7; color: var(--color-label-alt); }
@media (max-width: 720px) { .svc__types { grid-template-columns: 1fr; } }

/* 가격 단가표 / 활동지원 조정표 — 컴팩트 (max 640px) */
.svc__pricing, .svc__adj {
  max-width: 640px;
  margin: 16px auto 32px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 14px;
  overflow-x: auto;
}
.svc__pricing table, .svc__adj table {
  width: 100%; border-collapse: collapse;
  font-size: calc(16px * var(--fs));
}
.svc__pricing th, .svc__adj th {
  text-align: left; padding: 12px 16px;
  background: color-mix(in srgb, var(--bu-accent) 8%, #fff);
  color: var(--bu-deep, var(--color-label-strong));
  font-weight: 700; font-size: calc(13px * var(--fs));
  letter-spacing: 0.04em;
}
.svc__pricing td, .svc__adj td {
  padding: 14px 16px;
  border-top: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.18));
  vertical-align: top;
  color: var(--color-label-neutral);
  line-height: 1.65;
}
.svc__pricing td:first-child strong { color: var(--color-label-strong); font-weight: 700; }
.svc__pricing-note {
  display: block;
  margin-top: 6px;
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.55;
}
.svc__pricing-amount {
  font-weight: 800;
  color: var(--bu-accent);
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.svc__pricing td:nth-child(2),
.svc__adj td:nth-child(2),
.svc__adj td:nth-child(3) { white-space: nowrap; }
.svc__adj-note {
  margin: 14px 16px 8px;
  padding: 12px 16px;
  background: #fafbfd;
  border-radius: 8px;
  font-size: calc(14px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-alt);
}

/* 프로그램 (참여·창의) */
.svc__programs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 16px;
}
.svc__program {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 14px;
}
.svc__program h4 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--bu-accent);
  display: inline-block;
  font-size: calc(19px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
}
.svc__program ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.svc__program li {
  position: relative;
  padding-left: 18px;
  font-size: calc(17px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}
.svc__program li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; background: var(--bu-accent); }
@media (max-width: 720px) { .svc__programs { grid-template-columns: 1fr; } }

.svc__external, .svc__transport {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0 32px;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--bu-accent) 8%, #fff);
  border-radius: 12px;
}
.svc__external strong, .svc__transport strong {
  font-size: calc(17px * var(--fs));
  font-weight: 800;
  color: var(--bu-deep, var(--bu-accent));
}
.svc__external p, .svc__transport p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
  word-break: keep-all;
}

/* 우선 지원 대상 */
.svc__priority {
  list-style: none; margin: 16px 0 32px; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.svc__priority li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  background: #fafbfd;
  border-radius: 10px;
  font-size: calc(16px * var(--fs));
  line-height: 1.6;
  color: var(--color-label-neutral);
}
.svc__priority svg { color: var(--bu-accent); }
@media (max-width: 720px) { .svc__priority { grid-template-columns: 1fr; } }

/* 우리 센터 강점 */
.svc__strengths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 16px 0 32px;
}
.svc__strength {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 12px;
}
.svc__strength-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bu-accent) 14%, #fff);
  color: var(--bu-accent);
  flex-shrink: 0;
}
.svc__strength strong {
  display: block;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  margin-bottom: 6px;
}
.svc__strength p {
  margin: 0;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.65;
}

.svc__process-note {
  margin: 14px 0 32px;
  padding: 14px 18px;
  background: #f5f9ff;
  border-left: 3px solid #2c5fa0;
  border-radius: 6px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-label-strong);
}

/* 페이지 내 탭 (사업소개 / 신청방법) — 가운데 정렬 */
.svc__tabs {
  display: flex;
  width: fit-content;
  margin: 16px auto 24px;
  padding: 4px;
  background: #f3f5f9;
  border-radius: 999px;
  gap: 0;
}
.svc__tab {
  padding: 12px 26px;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-neutral);
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: -0.01em;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.svc__tab:hover { color: var(--color-label-strong); }
.svc__tab--on {
  background: #fff;
  color: var(--bu-accent);
  box-shadow: 0 1px 2px rgba(20,28,48,0.12), 0 0 0 1px rgba(0,0,0,0.04);
}
html[data-dark='true'] .svc__tabs { background: rgba(255,255,255,0.06); }
html[data-dark='true'] .svc__tab--on { background: rgba(255,255,255,0.14); color: #fff; }

/* 이용 절차 — 카드형 (가로 그리드 + 화살표) */
.svc__steps {
  list-style: none;
  margin: 24px 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.svc__step {
  position: relative;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 20px 18px 18px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 12px;
}
.svc__step-num {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  min-width: 42px; height: 28px; padding: 0 12px;
  background: color-mix(in srgb, var(--bu-accent) 10%, #fff);
  color: var(--bu-accent);
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
}
.svc__step-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.svc__step-body strong {
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.svc__step-body span {
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.65;
  word-break: keep-all;
}
.svc__step-arrow {
  position: absolute;
  top: 50%; right: -14px;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-label-assist);
  background: #fff;
  border-radius: 50%;
  z-index: 1;
}
@media (max-width: 980px) { .svc__steps { grid-template-columns: repeat(2, 1fr); } .svc__step:nth-child(2n) .svc__step-arrow { display: none; } }
@media (max-width: 560px) { .svc__steps { grid-template-columns: 1fr; } .svc__step-arrow { display: none; } }
html[data-dark='true'] .svc__step { background: var(--color-bg-elev); border-color: var(--color-line); }

/* 서비스 신청 방법 상세 */
.svc__apply { scroll-margin-top: 80px; }
.svc__apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0 24px;
}
.svc__apply-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 12px;
}
.svc__apply-card h4 {
  margin: 0 0 14px;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
}
.svc__apply-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.svc__apply-card li {
  position: relative;
  padding-left: 16px;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
  word-break: keep-all;
}
.svc__apply-card li::before {
  content: '';
  position: absolute; left: 0; top: 10px;
  width: 6px; height: 2px;
  background: var(--bu-accent);
}
.svc__apply-card p {
  margin: 0 0 10px;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
}
.svc__apply-online {
  margin: 10px 0 0 !important;
  padding-top: 12px;
  border-top: 1px dashed var(--color-line-normal-normal);
  font-size: calc(14px * var(--fs)) !important;
  color: var(--color-label-alt) !important;
}
.svc__apply-online a { color: var(--bu-accent); font-weight: 700; text-decoration: none; }
.svc__apply-online a:hover { text-decoration: underline; }
@media (max-width: 720px) { .svc__apply-grid { grid-template-columns: 1fr; } }

.svc__apply-h4 {
  margin: 28px 0 14px;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}

.svc__apply-docs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 24px;
}
.svc__apply-docgroup {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-top: 4px solid var(--bu-accent);
  border-radius: 12px;
}
.svc__apply-docgroup h5 {
  margin: 0 0 14px;
  font-size: calc(17px * var(--fs));
  font-weight: 800;
  color: var(--bu-accent);
  letter-spacing: 0.02em;
}
.svc__apply-docgroup ol {
  margin: 0; padding-left: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.svc__apply-docgroup li {
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
  word-break: keep-all;
}
@media (max-width: 720px) { .svc__apply-docs { grid-template-columns: 1fr; } }

.svc__apply-provider {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 32px;
}
.svc__apply-pcard {
  padding: 20px 22px;
  background: color-mix(in srgb, var(--bu-accent) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--bu-accent) 24%, transparent);
  border-radius: 12px;
}
.svc__apply-pcard strong {
  display: block;
  font-size: calc(17px * var(--fs));
  font-weight: 800;
  color: var(--bu-accent);
  margin-bottom: 8px;
}
.svc__apply-pcard p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
  word-break: keep-all;
}
@media (max-width: 720px) { .svc__apply-provider { grid-template-columns: 1fr; } }
html[data-dark='true'] .svc__apply-card,
html[data-dark='true'] .svc__apply-docgroup { background: var(--color-bg-elev); border-color: var(--color-line); }
.svc__source-note {
  margin: 24px 0 8px;
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  text-align: center;
  font-style: italic;
  line-height: 1.6;
}

/* 이용 절차 — 일러스트 변형 (process step.img 있을 때) */
.svc__steps--illus {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.svc__steps--illus .svc__step {
  align-items: center;
  text-align: center;
  padding: 24px 18px 22px;
}
.svc__step-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  margin: 8px auto 12px;
}
@media (max-width: 980px) {
  .svc__steps--illus { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .svc__step-img { max-height: 170px; }
}
@media (max-width: 560px) {
  .svc__steps--illus { grid-template-columns: 1fr; }
  .svc__step-img { max-height: 220px; }
}

/* 페이지 인트로 (상단 소개문 + 핵심 수치 3카드) */
.svc__intro { margin: 16px 0 28px; }
.svc__intro p {
  margin: 0 0 16px;
  font-size: calc(18px * var(--fs));
  line-height: 1.7;
  font-weight: 700;
  color: var(--color-label-strong, #1d1f24);
  word-break: keep-all;
  letter-spacing: -0.015em;
}
.svc__intro p + p {
  margin-top: 18px;
  margin-bottom: 0;
  font-size: calc(16px * var(--fs));
  font-weight: 400;
  color: var(--color-label-neutral, #3a4150);
  line-height: 1.75;
}
.svc__intro-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 18px;
  padding: 4px 0;
  background: transparent;
  border-top: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.18));
  border-bottom: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.18));
}
.svc__intro-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  position: relative;
}
.svc__intro-stat + .svc__intro-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--color-line-normal-normal, rgba(112,115,124,0.22));
}
.svc__intro-stat dt {
  margin: 0;
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  color: var(--color-label-alt, #6a7283);
  letter-spacing: 0;
}
.svc__intro-stat dd {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #1d1f24);
  letter-spacing: -0.015em;
  font-feature-settings: 'tnum';
}
.svc__intro-stat dd::before {
  content: '';
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--ico, none) center / contain no-repeat;
          mask: var(--ico, none) center / contain no-repeat;
  display: none;
}
.svc__intro-stat--phone dd { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.9.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A18 18 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.4.2 2.7.6 3.9.1.4 0 .8-.3 1.1l-2.2 2.2z'/></svg>"); }
.svc__intro-stat--phone dd::before { display: inline-block; }
.svc__intro-stat dd a { color: inherit; text-decoration: none; }
.svc__intro-stat dd a:hover { text-decoration: underline; }
html[data-dark='true'] .svc__intro-stat {
  background: color-mix(in srgb, var(--bu-accent) 14%, var(--color-bg-elev, #1a1d21));
}

/* 홍보영상 임베드 (svc__video) */
.svc__video {
  margin: 16px auto 28px;
  max-width: 1200px;
}
.svc__video--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.svc__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 32px -16px rgba(20,28,48,0.30);
}
.svc__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
html[data-dark='true'] .svc__video-frame { box-shadow: 0 12px 32px -16px rgba(0,0,0,0.5); }

/* 프로그램 섹션 이미지 */
.svc__programs-img {
  max-width: 1200px;
  margin: 16px auto 24px;
  border-radius: 16px;
  overflow: hidden;
  background: #f7f7f8;
  border: 1px solid var(--color-line-normal-normal);
}
.svc__programs-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
html[data-dark='true'] .svc__programs-img { background: var(--color-bg-elev); border-color: var(--color-line); }

/* 협력 지도 (mapImage) */
.svc__map {
  margin: 16px 0 40px;
  padding: 28px;
  background: linear-gradient(135deg, #f7fafc 0%, #eef3f8 100%);
  border-radius: 18px;
  border: 1px solid var(--color-line-normal-normal);
  text-align: center;
}
.svc__map img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
html[data-dark='true'] .svc__map {
  background: linear-gradient(135deg, var(--color-bg-elev) 0%, rgba(122,180,236,0.10) 100%);
  border-color: var(--color-line);
}

/* 커피박 제품 라인업 */
.svc__products {
  list-style: none;
  margin: 16px 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.svc__product {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.svc__product:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -16px rgba(0,0,0,0.18); }
.svc__product-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f7f7f8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.svc__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc__product-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
}
.svc__product-name {
  margin: 0;
  font-size: calc(19px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.svc__product-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.svc__product-features li {
  position: relative;
  padding-left: 16px;
  font-size: calc(15px * var(--fs));
  line-height: 1.6;
  color: var(--color-label-neutral);
  word-break: keep-all;
}
.svc__product-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 2px;
  background: var(--bu-accent);
}
.svc__product-price {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-line-normal-normal);
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: var(--bu-accent);
  font-feature-settings: 'tnum';
  letter-spacing: -0.015em;
}
.svc__products-note {
  margin: 12px 0 32px;
  padding: 14px 18px;
  background: #fafbfd;
  border-left: 3px solid var(--bu-accent);
  border-radius: 6px;
  font-size: calc(14px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}
html[data-dark='true'] .svc__product { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .svc__product-img { background: rgba(255,255,255,0.03); }
html[data-dark='true'] .svc__products-note { background: rgba(255,255,255,0.04); }

/* 빠른 정보 4카드 */
.svc__quick {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 28px 0 56px;
}
.svc__quick-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: var(--bu-bg-soft, #f7f7f8);
  border-left: 4px solid var(--bu-accent, #0066ff);
  border-radius: 0 12px 12px 0;
}
.svc__quick-lab {
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--color-label-alternative, #70737c);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.svc__quick-val {
  font-size: calc(20px * var(--fs));
  font-weight: 600;
  color: var(--bu-deep);
  letter-spacing: -0.015em;
  line-height: 1.55;
}
.svc__quick-card--fee .svc__quick-val { font-weight: 700; }

/* 주요 활동 태그 */
.svc__activities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 56px;
}
.svc__activity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--bu-bg);
  color: var(--bu-deep);
  border-radius: 999px;
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  letter-spacing: -0.015em;
}
.svc__activity svg { color: var(--bu-accent); }

/* 이용 절차 (수직 리스트) */
.svc__process {
  list-style: none;
  margin: 24px 0 56px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.svc__process-step {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-left: 4px solid var(--bu-accent);
  border-radius: 0 12px 12px 0;
}
.svc__process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bu-accent);
  color: #fff;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.03em;
}
.svc__process-text {
  font-size: calc(18px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.015em;
  line-height: 1.55;
}

/* FAQ 아코디언 */
.svc__faqs {
  list-style: none;
  margin: 24px 0 56px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.svc__faq-item {
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 12px;
  overflow: hidden;
}
.svc__faq-item--open { border-color: var(--bu-accent); }
.svc__faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--color-label-strong, #171719);
}
.svc__faq-q-text {
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.5;
}
.svc__faq-q-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bu-bg);
  color: var(--bu-accent);
  font-size: calc(22px * var(--fs));
  font-weight: 700;
  line-height: 1;
}
.svc__faq-item--open .svc__faq-q-icon { background: var(--bu-accent); color: #fff; }
.svc__faq-a {
  display: flex;
  gap: 14px;
  padding: 0 24px 22px 24px;
  align-items: flex-start;
}
.svc__faq-a-mark {
  flex-shrink: 0;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--bu-accent);
}
.svc__faq-a p {
  margin: 0;
  font-size: calc(17px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral, #2e2f33);
}

/* 연락처 카드 */
.svc__contact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 40px 0 32px;
  padding: 32px 32px;
  background: linear-gradient(120deg, var(--bu-bg) 0%, var(--bu-bg-soft) 100%);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.06);
}
.svc__contact-eyebrow {
  display: block;
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.svc__contact-team {
  margin: 0 0 4px;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  color: var(--bu-deep);
  letter-spacing: -0.03em;
}
.svc__contact-floor {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-neutral);
}
.svc__contact-floor a { color: var(--bu-accent); text-decoration: none; font-weight: 700; margin-left: 4px; }
.svc__contact-floor a:hover { text-decoration: underline; }
.svc__contact-tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--bu-accent);
  color: #fff;
  border-radius: 999px;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.svc__contact-tel:hover { background: var(--bu-deep); transform: translateY(-2px); }

/* 같은 사업부 다른 서비스 카드 */
.svc__sib {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 24px 0 40px;
}
.svc__sib-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-top: 4px solid var(--bu-accent);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.svc__sib-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(0,0,0,0.16); }
.svc__sib-eyebrow {
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
  letter-spacing: 0.04em;
}
.svc__sib-name {
  margin: 4px 0 6px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--bu-deep);
  letter-spacing: -0.025em;
}
.svc__sib-desc {
  margin: 0 0 10px;
  font-size: calc(16px * var(--fs));
  line-height: 1.6;
  color: var(--color-label-neutral);
}
.svc__sib-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
  margin-top: auto;
}

/* 모바일 */
@media (max-width: 768px) {
  .svc__quick { grid-template-columns: 1fr; }
  .svc__process-step { grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 20px; }
  .svc__contact-card { flex-direction: column; align-items: flex-start; padding: 24px 22px; }
  .svc__contact-tel { width: 100%; justify-content: center; }
}

/* 다크 모드 */
html[data-dark='true'] .svc__quick-card { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .svc__process-step { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .svc__faq-item { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .svc__contact-card { background: linear-gradient(120deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 100%); }
html[data-dark='true'] .svc__sib-card { background: var(--color-bg-elev); border-color: var(--color-line); }

/* ───────── SVC 모바일 추가 (≤720px / ≤480px) ───────── */
@media (max-width: 720px) {
  /* 카드 내부 padding 축소 */
  .svc__purpose,
  .svc__age-notice,
  .svc__external,
  .svc__transport,
  .svc__benefit,
  .svc__edu-area,
  .svc__elig-card,
  .svc__type-card,
  .svc__program,
  .svc__apply-card,
  .svc__apply-docgroup,
  .svc__apply-pcard,
  .svc__contact-card,
  .svc__sib-card { padding: 18px 20px; }
  /* 빠른 정보 4카드 — 2x2 유지 */
  .svc__quick { grid-template-columns: 1fr 1fr; }
  .svc__quick-card { padding: 16px 14px; }
  /* gov 가로 스크롤 허용 */
  .svc__gov { overflow-x: auto; }
  /* map padding 축소 */
  .svc__map { padding: 18px; }
}

@media (max-width: 480px) {
  /* 카드 padding 추가 축소 */
  .svc__purpose,
  .svc__age-notice,
  .svc__external,
  .svc__transport,
  .svc__benefit,
  .svc__edu-area,
  .svc__elig-card,
  .svc__type-card,
  .svc__program,
  .svc__apply-card,
  .svc__apply-docgroup,
  .svc__apply-pcard,
  .svc__contact-card,
  .svc__sib-card { padding: 14px 16px; }
  /* 빠른 정보 4카드 — 2x2 유지, 폰트 축소 */
  .svc__quick { grid-template-columns: 1fr 1fr; }
  .svc__quick-val { font-size: calc(18px * var(--fs)); }
  .svc__quick-lab { font-size: calc(13px * var(--fs)); }
  /* 큰 숫자/타이틀 축소 */
  .svc__type-hours { font-size: calc(24px * var(--fs)); }
  .svc__contact-tel { font-size: calc(18px * var(--fs)); }
  .svc__age-notice-title { font-size: calc(18px * var(--fs)); }
  .svc__age-notice-body { font-size: calc(15.5px * var(--fs)); }
  .svc__faq-q-text { font-size: calc(16px * var(--fs)); }
  .svc__faq-q-icon { width: 30px; height: 30px; font-size: 30px; }
  .svc__benefit-num { font-size: calc(26px * var(--fs)); }
  .svc__purpose p { font-size: calc(16px * var(--fs)); line-height: 1.65; }
  /* age-notice 원형 장식 제거 */
  .svc__age-notice::before { display: none; }
  /* intro-stats 세로 스택 + 구분선 가로 dashed */
  .svc__intro-stats { flex-direction: column; }
  .svc__intro-stat + .svc__intro-stat::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 1px;
    background: var(--color-line-normal-normal, rgba(112,115,124,0.22));
  }
  /* 테이블 td padding 축소 */
  .svc__pricing td,
  .svc__adj td { padding: 10px 12px; }
  /* 탭 축소 */
  .svc__tabs { padding: 4px; }
  .svc__tab { padding: 10px 18px; }
  /* FAQ close 버튼 padding */
  .svc__faqs .svc__faq-q { padding: 16px; }
}

/* ───────── v1.2 Day 10 (뉴스룸 .news) — 노안 친화 폰트 ───────── */

.news-sec { /* news-accent CSS 변수가 인라인으로 들어옴 */ }

/* 게시물 리스트 (공지사항·뉴스 공용) */
.news__list-wrap { margin: 24px 0 56px; }
.news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.news__item {
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
  overflow: hidden;
}
.news__item--open { border-color: var(--news-accent, #0066ff); }
.news__item--pinned { border-left: 5px solid var(--news-accent, #0066ff); background: #fffaf6; }

.news__item-head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 36px;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.news__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 8px;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-alternative, #70737c);
}
.news__item-pin {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
}
.news__item-date { font-variant-numeric: tabular-nums; font-weight: 600; }
.news__item-author { color: var(--color-label-alternative); }
.news__item-title {
  grid-column: 1 / 2;
  margin: 0;
  font-size: calc(20px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.025em;
  line-height: 1.55;
}
.news__item-toggle {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-background-alternative, #f7f7f8);
  font-size: calc(22px * var(--fs));
  font-weight: 700;
  color: var(--color-label-alternative);
}
.news__item--open .news__item-toggle { background: var(--news-accent); color: #fff; }

.news__item-body {
  padding: 0 24px 22px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.news__item-content p {
  margin: 14px 0 0;
  font-size: calc(19px * var(--fs));
  line-height: 1.75;
  color: var(--color-label-neutral, #2e2f33);
}
.news__item-att {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line-normal-normal);
}
.news__item-att-h {
  display: block;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-alternative);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.news__item-att ul { list-style: none; margin: 0; padding: 0; }
.news__item-att li { padding: 4px 0; }
.news__item-att a {
  font-size: calc(18px * var(--fs));
  color: var(--news-accent);
  font-weight: 600;
  text-decoration: none;
}
.news__item-att a:hover { text-decoration: underline; }

.news__loading, .news__empty {
  padding: 40px 20px;
  text-align: center;
  font-size: calc(19px * var(--fs));
  color: var(--color-label-alternative);
  background: var(--color-background-alternative);
  border-radius: 12px;
}
.news__empty-icon { display: block; font-size: calc(40px * var(--fs)); margin-bottom: 8px; }
.news__err {
  padding: 20px 24px;
  margin-bottom: 16px;
  background: #FFF4E6;
  border: 1px solid #FFB04A;
  border-radius: 10px;
  color: #8E1F15;
  font-size: calc(17px * var(--fs));
}
.news__err strong { display: block; margin-bottom: 6px; font-size: calc(18px * var(--fs)); }
.news__err p { margin: 4px 0; }
.news__err-hint { font-size: calc(16px * var(--fs)); color: #70737c; }

/* 소식지 카드 */
.news__nl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 0 0 12px;
}
.news__nl-year-group { margin: 24px 0 32px; }
.news__nl-year-group:first-child { margin-top: 8px; }
.news__nl-year {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}
.news__nl-year-label {
  flex: 0 0 auto;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-label-strong, #171719);
  padding: 4px 0;
}
.news__nl-year-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-line-normal-normal, rgba(112,115,124,0.22));
}
html[data-dark='true'] .news__nl-year-line { background: var(--color-line); }
.news__nl-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 14px;
}
.news__nl-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--news-accent) 0%, color-mix(in srgb, var(--news-accent) 60%, black) 100%);
  border-radius: 8px;
  color: #fff;
  padding: 10px;
}
.news__nl-cover-no {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.03em;
}
.news__nl-cover-season {
  margin-top: 4px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  opacity: 0.92;
}
.news__nl-body { display: flex; flex-direction: column; gap: 6px; }
.news__nl-no {
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--news-accent);
  letter-spacing: 0.06em;
}
.news__nl-title {
  margin: 2px 0 4px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
  line-height: 1.5;
}
.news__nl-meta {
  margin: 0 0 12px;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-alternative);
}
.news__nl-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--news-accent);
  color: #fff;
  border-radius: 10px;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
}
.news__nl-btn--disabled { background: #d0d4dc; cursor: not-allowed; }

/* 웹매거진 — 부제 / 액션 / 공유 / 토스트 */
.news__nl-sub {
  margin: -2px 0 4px;
  font-size: calc(16px * var(--fs));
  font-weight: 500;
  color: var(--color-label-neutral, #3a4150);
  letter-spacing: -0.01em;
  line-height: 1.55;
}
.news__nl-card--pending { opacity: 0.78; }
.news__nl-card--pending .news__nl-cover { filter: saturate(0.55); }
.news__nl-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.news__nl-share {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.news__nl-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 8px;
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong, #171719);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.news__nl-share-btn:hover {
  border-color: rgba(0,0,0,0.32);
  background: #fafbfd;
}
.news__nl-share-btn:active { transform: scale(0.97); }
.news__nl-share-btn--kakao {
  background: #FAE100;
  border-color: #E5CB00;
  color: #3C1E1E;
}
.news__nl-share-btn--kakao:hover {
  background: #FFE92B;
  border-color: #D4BA00;
}
.news__nl-share-btn--primary {
  background: var(--news-accent, #B5781A);
  border-color: var(--news-accent, #B5781A);
  color: #fff;
}
.news__nl-share-btn--primary:hover {
  background: color-mix(in srgb, var(--news-accent, #B5781A) 88%, black);
  border-color: color-mix(in srgb, var(--news-accent, #B5781A) 70%, black);
}
.news__nl-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  padding: 12px 22px;
  background: rgba(20,24,31,0.92);
  color: #fff;
  border-radius: 999px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  z-index: 200;
  box-shadow: 0 12px 32px -10px rgba(0,0,0,0.45);
  animation: nl-toast-in .18s ease-out;
}
@keyframes nl-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
html[data-dark='true'] .news__nl-share-btn { background: var(--color-bg-elev); color: var(--color-label-strong); border-color: var(--color-line); }
html[data-dark='true'] .news__nl-share-btn:hover { background: rgba(255,255,255,0.05); }

/* 웹매거진 임베드 뷰어 */
.wz-viewer {
  margin: 8px 0 32px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 36px -20px rgba(20,28,48,0.30);
}
.wz-viewer__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #fafbfd 0%, #f3f5f9 100%);
  border-bottom: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  flex-wrap: wrap;
}
.wz-viewer__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 8px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong, #171719);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.wz-viewer__back:hover { border-color: rgba(0,0,0,0.32); background: #fafbfd; }
.wz-viewer__title-wrap {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.wz-viewer__eyebrow {
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--news-accent, #B5781A);
  letter-spacing: 0.08em;
}
.wz-viewer__title {
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wz-viewer__actions {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wz-viewer__frame-wrap {
  position: relative;
  width: 100%;
  height: min(82vh, 1080px);
  background: #f7f8fb;
}
.wz-viewer__frame {
  width: 100%; height: 100%;
  border: 0; display: block;
}
.wz-viewer__loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  color: var(--color-label-alt);
  font-size: calc(16px * var(--fs));
}
.wz-viewer__spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(0,0,0,0.10);
  border-top-color: var(--news-accent, #B5781A);
  border-radius: 50%;
  animation: wz-spin .8s linear infinite;
}
@keyframes wz-spin { to { transform: rotate(360deg); } }
.wz-viewer__blocked {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px;
  text-align: center;
}
.wz-viewer__blocked h4 {
  margin: 0;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
}
.wz-viewer__blocked p {
  margin: 0;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-alt);
  max-width: 380px; line-height: 1.65;
}
@media (max-width: 720px) {
  .wz-viewer__bar { gap: 10px; padding: 10px 12px; }
  .wz-viewer__title { font-size: calc(17px * var(--fs)); }
  .wz-viewer__frame-wrap { height: 76vh; }
  .wz-viewer__newtab span { display: none; }
}
html[data-dark='true'] .wz-viewer { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .wz-viewer__bar { background: linear-gradient(180deg, var(--color-bg-elev) 0%, var(--color-bg-deep, #1a1d21) 100%); border-bottom-color: var(--color-line); }
html[data-dark='true'] .wz-viewer__back { background: var(--color-bg-elev); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark='true'] .wz-viewer__frame-wrap { background: var(--color-bg-deep, #1a1d21); }

/* 복지타운 TV */
.news__tv-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 28px 0 40px;
  padding: 32px;
  background: linear-gradient(120deg, #FFE4E0 0%, #FEF3F1 100%);
  border-radius: 18px;
}
.news__tv-eyebrow {
  display: block;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--news-accent);
  letter-spacing: 0.06em;
}
.news__tv-title {
  margin: 4px 0 6px;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(28px * var(--fs));
  font-weight: 800;
  color: #8E1F15;
  letter-spacing: -0.03em;
}
.news__tv-desc {
  margin: 0;
  font-size: calc(18px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
}
.news__tv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--news-accent);
  color: #fff;
  border-radius: 999px;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.news__tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 24px 0 40px;
}
.news__tv-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.news__tv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(0,0,0,0.18); }
.news__tv-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1d1d1f 0%, #4a4a52 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.news__tv-thumb-play {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--news-accent);
  font-size: calc(22px * var(--fs));
  padding-left: 4px;
}
.news__tv-thumb-dur {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.news__tv-card-body { padding: 16px 18px; }
.news__tv-card-cat {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(233, 67, 53, 0.1);
  color: var(--news-accent);
  border-radius: 999px;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  margin-bottom: 8px;
}
.news__tv-card-title {
  margin: 0 0 6px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
  line-height: 1.55;
}
.news__tv-card-date {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-alternative);
}

/* 갤러리 */
.news__gal-month { margin: 32px 0 48px; }
.news__gal-month-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--news-accent);
}
.news__gal-month-num {
  margin: 0;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(26px * var(--fs));
  font-weight: 800;
  color: var(--news-accent);
  letter-spacing: -0.03em;
}
.news__gal-month-lab {
  font-size: calc(19px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong);
}
.news__gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.news__gal-item {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.news__gal-thumb {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f1f1f3;
  position: relative;
  overflow: hidden;
}
.news__gal-thumb-icon { font-size: calc(40px * var(--fs)); opacity: 0.55; }
.news__gal-cap {
  margin-top: 10px;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-strong);
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
}

/* 식단 카드 */
.news__meal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 24px 0 40px;
}
.news__meal-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-top: 4px solid var(--news-accent);
  border-radius: 12px;
  padding: 22px 22px;
}
.news__meal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
}
.news__meal-day {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(20px * var(--fs));
  font-weight: 700;
  color: var(--news-accent);
  letter-spacing: -0.025em;
}
.news__meal-date {
  font-size: calc(17px * var(--fs));
  color: var(--color-label-alternative);
  font-variant-numeric: tabular-nums;
}
.news__meal-main {
  margin: 0 0 10px;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
}
.news__meal-side {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.news__meal-side li {
  font-size: calc(18px * var(--fs));
  color: var(--color-label-neutral);
  padding-left: 14px;
  position: relative;
}
.news__meal-side li::before {
  content: '·';
  position: absolute;
  left: 4px;
  font-weight: 700;
  color: var(--news-accent);
}
.news__meal-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.news__meal-kcal {
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
}
.news__meal-allergen {
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alternative);
}

/* 모바일 */
@media (max-width: 768px) {
  .news__item-head { grid-template-columns: 1fr 32px; padding: 18px 20px; }
  .news__item-title { font-size: calc(18px * var(--fs)); }
  .news__nl-card { grid-template-columns: 90px 1fr; padding: 18px; }
  .news__tv-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
  .news__tv-btn { width: 100%; justify-content: center; }
  .news__gal-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 다크 모드 */
html[data-dark='true'] .news__item { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .news__item--pinned { background: rgba(255, 180, 80, 0.08); }
html[data-dark='true'] .news__item-toggle { background: rgba(255,255,255,0.06); }
html[data-dark='true'] .news__loading, html[data-dark='true'] .news__empty { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .news__nl-card { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .news__tv-cta { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .news__tv-card { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .news__meal-card { background: var(--color-bg-elev); border-color: var(--color-line); }

/* ───────── 복지타운 뉴스 — 카드 그리드 + 검색바 ───────── */
.news-grid-wrap { margin: 24px 0 56px; }

.news-grid__searchbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
  flex-wrap: wrap;
}
.news-grid__sb-inner {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 4px 4px 4px 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.news-grid__sb-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 8px;
  border-right: 1px solid var(--color-line);
}
.news-grid__sb-select {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong);
  padding: 10px 28px 10px 18px;
  cursor: pointer;
  outline: none;
}
.news-grid__sb-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-label-alternative);
  pointer-events: none;
}
.news-grid__sb-input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-strong);
  padding: 10px 18px;
  min-width: 240px;
}
.news-grid__sb-input::placeholder { color: var(--color-label-alternative); font-weight: 400; }
.news-grid__sb-btn {
  border: 0;
  background: var(--brand-blue);
  color: #fff;
  padding: 14px 36px;
  border-radius: 999px;
  font: inherit;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .15s ease;
}
.news-grid__sb-btn:hover { background: var(--brand-blue-2); }

.news-grid {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}
.news-grid__count {
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  color: var(--color-label-neutral);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.news-grid__count strong { color: var(--color-label-strong); font-weight: 800; }
.news-grid__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
}
@media (max-width: 1100px) {
  .news-grid { padding: 28px; }
  .news-grid__items { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .news-grid { padding: 20px; border-radius: 18px; }
  .news-grid__items { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .news-grid__sb-input { min-width: 160px; }
  .news-grid__sb-btn { padding: 12px 24px; }
}
@media (max-width: 480px) {
  .news-grid__items { grid-template-columns: 1fr; }
}

.news-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform .18s ease;
}
.news-card:hover { transform: translateY(-3px); }
.news-card:focus-visible { outline: 2px solid var(--brand-cta); outline-offset: 4px; border-radius: 14px; }
.news-card__thumb {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef3fb 0%, #d8e3f5 100%);
  border: 1px solid var(--color-line);
}
.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.news-card:hover .news-card__thumb img { transform: scale(1.04); }
.news-card__thumb-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  font-weight: 900;
  color: rgba(45, 95, 160, 0.28);
  letter-spacing: -0.04em;
}
.news-card__pin {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #1d3868;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.news-card__body { padding: 0 2px 4px; }
.news-card__title {
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  line-height: 1.55;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}
.news-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alternative);
  align-items: center;
  letter-spacing: -0.01em;
}
.news-card__meta-lab { font-weight: 600; color: var(--color-label-neutral); }
.news-card__meta-dot { color: var(--color-line); }
.news-card__meta-author { color: var(--color-label-neutral); font-weight: 500; }

/* ── 뉴스 상세 모달 ── */
.news-modal__bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  animation: news-modal-fade .15s ease;
}
@keyframes news-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.news-modal {
  background: #fff;
  border-radius: 18px;
  max-width: 820px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  animation: news-modal-rise .2s ease;
}
@keyframes news-modal-rise { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.news-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.news-modal__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alternative);
}
.news-modal__pin {
  background: #FEF3EC;
  color: #B5781A;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.news-modal__author { color: var(--color-label-neutral); }
.news-modal__close {
  background: var(--color-bg-alt);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--color-label-strong);
  transition: background .12s ease;
}
.news-modal__close:hover { background: var(--color-line); }
.news-modal__title {
  font-size: calc(24px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  line-height: 1.35;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}
.news-modal__body {
  color: var(--color-label-strong);
  line-height: 1.75;
  font-size: calc(17px * var(--fs));
}
.news-modal__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; }
.news-modal__body iframe { max-width: 100%; aspect-ratio: 16/9; height: auto; border-radius: 8px; margin: 16px 0; }
.news-modal__att {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}
.news-modal__att-h {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-label-neutral);
  margin-bottom: 10px;
}
.news-modal__att ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.news-modal__att a { color: var(--brand-cta); font-size: 14px; text-decoration: none; }
.news-modal__att a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .news-modal { padding: 24px; border-radius: 14px; }
  .news-modal__title { font-size: calc(20px * var(--fs)); }
}

/* 다크 모드 */
html[data-dark='true'] .news-grid { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .news-grid__sb-inner { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .news-card__thumb { background: linear-gradient(135deg, #1f2a3f 0%, #2a3a55 100%); border-color: var(--color-line); }
html[data-dark='true'] .news-modal { background: var(--color-bg-elev); }

/* ── 뉴스 상세 뷰 (?id= 진입 시) ── */
.news-detail {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  margin: 24px 0 56px;
}
.news-detail__back {
  appearance: none;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  color: var(--color-label-strong);
  font: inherit;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background .12s ease, border-color .12s ease;
}
.news-detail__back:hover { background: #fff; border-color: var(--color-label-alternative); }
.news-detail__back--lg { padding: 12px 28px; font-size: calc(17px * var(--fs)); }
.news-detail__head {
  margin: 24px 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-line);
}
.news-detail__pin {
  display: inline-block;
  background: #FEF3EC;
  color: #B5781A;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.news-detail__title {
  font-size: calc(28px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0 0 16px;
}
.news-detail__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-alternative);
  letter-spacing: -0.01em;
}
.news-detail__meta-lab { font-weight: 600; color: var(--color-label-neutral); }
.news-detail__meta-dot { color: var(--color-line); }
.news-detail__body {
  color: var(--color-label-strong);
  line-height: 1.8;
  font-size: calc(18px * var(--fs));
  min-height: 120px;
}
.news-detail__body img { max-width: 100%; height: auto; border-radius: 10px; margin: 20px 0; }
.news-detail__body iframe { max-width: 100%; aspect-ratio: 16/9; height: auto; border-radius: 10px; margin: 20px 0; }
.news-detail__body p { margin: 0 0 16px; }
.news-detail__body h1, .news-detail__body h2, .news-detail__body h3 { margin: 28px 0 14px; }
.news-detail__att {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}
.news-detail__att-h {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-label-neutral);
  margin-bottom: 12px;
}
.news-detail__att ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.news-detail__att a { color: var(--brand-cta); font-size: 14px; text-decoration: none; }
.news-detail__att a:hover { text-decoration: underline; }
.news-detail__foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .news-detail { padding: 28px 20px; border-radius: 18px; }
  .news-detail__title { font-size: calc(22px * var(--fs)); }
}

html[data-dark='true'] .news-detail { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .news-detail__back { background: rgba(255,255,255,0.05); border-color: var(--color-line); }

/* ── 뉴스 페이지네이션 ── */
.news-pagi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.news-pagi__num,
.news-pagi__edge {
  appearance: none;
  border: 1px solid var(--color-line);
  background: #fff;
  color: var(--color-label-strong);
  font: inherit;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.news-pagi__num {
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.news-pagi__num:hover { background: var(--color-bg-alt); border-color: var(--color-label-alternative); }
.news-pagi__num--on {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}
.news-pagi__num--on:hover { background: var(--brand-blue-2); border-color: var(--brand-blue-2); }
.news-pagi__edge {
  padding: 0 16px;
  height: 38px;
  border-radius: 999px;
  color: var(--color-label-neutral);
}
.news-pagi__edge:hover { background: var(--color-bg-alt); color: var(--color-label-strong); border-color: var(--color-label-alternative); }
@media (max-width: 600px) {
  .news-pagi { gap: 4px; }
  .news-pagi__num { min-width: 34px; height: 34px; font-size: calc(15px * var(--fs)); }
  .news-pagi__edge { padding: 0 10px; height: 34px; font-size: calc(15px * var(--fs)); }
}
html[data-dark='true'] .news-pagi__num,
html[data-dark='true'] .news-pagi__edge { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .news-pagi__num--on { background: var(--brand-cta); color: #fff; border-color: var(--brand-cta); }

/* ── 좁은 컨테이너 (공지사항 등) ── */
.wt-container--narrow { max-width: 1100px; }

/* ── 공지사항 — 테이블 리스트 ── */
.notice-wrap { margin: 24px 0 56px; }
.notice-list__count {
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  color: var(--color-label-neutral);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.notice-list__count strong { color: var(--color-label-strong); font-weight: 800; }

.notice-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  border-top: 2px solid var(--color-label-strong);
  border-bottom: 1px solid var(--color-line);
}
.notice-table__th {
  padding: 14px 16px;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  text-align: center;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  letter-spacing: -0.01em;
}
.notice-table__th--title { text-align: left; padding-left: 24px; }
.notice-table__th--num { text-align: right; padding-right: 24px; white-space: nowrap; }

.notice-table__row {
  cursor: pointer;
  transition: background .12s ease;
  border-bottom: 1px solid var(--color-line);
}
.notice-table__row:hover { background: #f5f9ff; }
.notice-table__row:focus-visible { outline: 2px solid var(--brand-cta); outline-offset: -2px; }
.notice-table__row--pin { background: #FFF9F0; }
.notice-table__row--pin:hover { background: #FFF1DC; }

.notice-table td {
  padding: 16px;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-strong);
  vertical-align: middle;
  letter-spacing: -0.01em;
}
.notice-table__title-cell {
  padding-left: 24px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.notice-table__pin {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #B5781A;
  background: #FEF3EC;
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.notice-table__title {
  font-weight: 600;
  color: var(--color-label-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice-table__row:hover .notice-table__title { color: var(--brand-cta); }
.notice-table__author,
.notice-table__date {
  text-align: center;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-neutral);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-table__views {
  text-align: right;
  padding-right: 24px !important;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-neutral);
  font-variant-numeric: tabular-nums;
}

/* === 모바일 — 테이블 → 카드 레이아웃 전환 (≤720px) ===
   기존: 4~5 컬럼 가로 테이블이 모바일에서 잘리거나 압축돼 가독성 저하.
   변경: 각 행을 카드처럼 세로 스택. 제목 위, 메타정보 아래.
   3가지 변형 자동 지원: 공지/뉴스(4-col) · 채용(5-col status+제목+부서+마감일+조회수)
   · 복지타운에 바란다(4-col 제목+작성자+작성일+답변).               */
@media (max-width: 720px) {
  /* 헤더 행 숨김 — 카드뷰에선 컬럼 라벨 불필요 */
  .notice-table thead { display: none; }

  /* 테이블 요소들 모두 block 으로 — 카드 스택 */
  .notice-table,
  .notice-table colgroup,
  .notice-table col,
  .notice-table tbody { display: block; width: 100%; }
  .notice-table { border-collapse: separate; border-spacing: 0; padding: 0; }

  /* 각 행 = 카드. flex-wrap 으로 첫 줄(상태+제목), 둘째 줄(메타) 자동 분리 */
  .notice-table__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    padding: 14px;
    border-bottom: 1px solid var(--color-line);
    cursor: pointer;
  }
  .notice-table__row:hover,
  .notice-table__row:focus-visible { background: var(--color-bg-alt); }
  .notice-table__row--pin { background: #FFF9F0; }
  html[data-dark='true'] .notice-table__row:hover,
  html[data-dark='true'] .notice-table__row:focus-visible { background: rgba(60,110,180,0.12); }
  html[data-dark='true'] .notice-table__row--pin { background: rgba(255,196,76,0.08); }

  /* 모든 td 의 기본 보더/패딩 제거 (block 변환 후 부모 grid 에서 처리) */
  .notice-table td {
    display: block;
    padding: 0;
    border: 0;
    font-size: calc(14px * var(--fs));
  }

  /* 상태 셀(채용 1번째 컬럼) — 첫 줄 좌측 */
  .notice-table__status-cell {
    order: 1;
    flex: 0 0 auto;
  }

  /* 제목 셀 — 기본은 100% 폭으로 단독 줄 사용 (메타 셀들이 다음 줄로 밀리도록) */
  .notice-table__title-cell {
    order: 2;
    padding: 0 !important;
    gap: 6px;
    display: flex; align-items: flex-start; flex-wrap: wrap;
    min-width: 0;
    white-space: normal !important;
    flex: 1 1 100%;
  }
  /* 상태 칩 다음에 오는 제목은 같은 줄에 (남은 폭 차지) */
  .notice-table__status-cell + .notice-table__title-cell {
    flex: 1 1 calc(100% - 90px);
  }
  .notice-table__title {
    font-size: calc(16px * var(--fs)) !important;
    font-weight: 700;
    color: var(--color-label-strong);
    line-height: 1.4;
    word-break: keep-all;
    white-space: normal !important;
    overflow-wrap: anywhere;
    flex: 1 1 100%;
  }
  .notice-table__pin { font-size: 11px; padding: 3px 8px; }

  /* 메타 영역 — 상태+제목 다음 줄에 inline 으로 흐름. 각 셀이 flex item.
     flex-basis: 100% 가 아니라 auto 로 줘서 자연스럽게 한 줄에 배치되되,
     공간 부족 시 wrap. order 5~ 로 무조건 제목 뒤에 위치.
     첫 번째 메타 cell 만 flex-basis 100% 로 줄바꿈 강제 */
  .notice-table__author,
  .notice-table__date,
  .notice-table__views {
    order: 5;
    font-size: calc(12.5px * var(--fs)) !important;
    color: var(--color-label-alt) !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  /* 메타 셀 그룹의 첫 번째에만 줄바꿈 강제 — 형제 td 중 status/title 다음 td */
  .notice-table__title-cell ~ .notice-table__author:first-of-type,
  .notice-table__title-cell ~ .notice-table__date:first-of-type,
  .notice-table__title-cell ~ .notice-table__views:first-of-type {
    flex-basis: auto;
    margin-top: 2px;
  }
  /* 메타 셀들이 한 줄에 시작되도록 첫 메타 셀 앞에 줄바꿈 spacer 추가 */
  .notice-table__title-cell::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 4;
  }
  /* 메타 셀 사이 dot 구분자 */
  .notice-table__row .notice-table__author + .notice-table__author::before,
  .notice-table__row .notice-table__author + .notice-table__date::before,
  .notice-table__row .notice-table__author + .notice-table__views::before,
  .notice-table__row .notice-table__date + .notice-table__author::before,
  .notice-table__row .notice-table__date + .notice-table__date::before,
  .notice-table__row .notice-table__date + .notice-table__views::before,
  .notice-table__row .notice-table__views + .notice-table__author::before,
  .notice-table__row .notice-table__views + .notice-table__date::before {
    content: '·';
    margin-right: 8px;
    color: var(--color-label-assist, #c0c4ca);
  }

  /* 답변 상태/대기중 chip — voice 페이지 */
  .voice-replied, .voice-pending { font-size: calc(12px * var(--fs)) !important; padding: 2px 8px; }
  /* lock 아이콘 작게 */
  .voice-lock { font-size: 14px; }

  /* 카운트(전체 N건) 텍스트 */
  .notice-list__count { font-size: calc(13px * var(--fs)); padding: 0 4px 8px; }
}

html[data-dark='true'] .notice-table { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .notice-table__th { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .notice-table__row:hover { background: rgba(60, 110, 180, 0.12); }

/* ───────── 관리자 공지 작성 페이지 ───────── */
.adm-notice { max-width: 1100px; margin: 0 auto; padding: 24px; }
.adm-notice__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-line-normal-normal);
}
.adm-notice__head h1 {
  margin: 0;
  font-size: calc(26px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
}
.adm-notice__head-tools { display: flex; gap: 10px; }
.adm-notice__back, .adm-notice__logout {
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--color-background-alternative);
  color: var(--color-label-strong);
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-line-normal-normal);
  cursor: pointer;
  font-family: inherit;
}
.adm-notice__logout:hover { background: #FFE4E0; color: #8E1F15; }

.adm-notice__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.adm-notice__filter { display: flex; gap: 8px; }
.adm-notice__filter-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-line-normal-normal);
  background: #fff;
  color: var(--color-label-neutral);
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.adm-notice__filter-btn.on {
  background: #0066ff;
  color: #fff;
  border-color: #0066ff;
}
.adm-notice__new {
  padding: 12px 22px;
  background: #E94335;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.adm-notice__msg {
  padding: 14px 18px;
  background: #EAF2FE;
  color: #003B85;
  border-radius: 8px;
  font-size: calc(15px * var(--fs));
  margin-bottom: 16px;
}

.adm-notice__editor {
  margin-bottom: 24px;
  padding: 24px;
  background: #fff;
  border: 2px solid #0066ff;
  border-radius: 12px;
}
.adm-notice__editor > header {
  margin-bottom: 14px;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  color: #003B85;
}
.adm-notice__field { margin-bottom: 14px; }
.adm-notice__author-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adm-notice__author-row select { flex: 0 0 220px; }
.adm-notice__author-row input { flex: 1 1 240px; min-width: 200px; }
.adm-notice__field label {
  display: block;
  margin-bottom: 8px;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.015em;
}
/* 입력 컴포넌트 — §5.4 표준 폼 입력 패턴 (방문신청 폼 .vf__field 와 동일 톤) */
.adm-notice__field input:not([type="checkbox"]):not([type="radio"]),
.adm-notice__field textarea,
.adm-notice__field select {
  appearance: none;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #d8dadd;
  border-radius: 8px;
  background: var(--color-background-elevated-normal, #fff);
  font-family: inherit;
  font-size: calc(16px * var(--fs));
  font-weight: 500;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 체크박스·라디오는 기본 모양 유지 */
.adm-notice__field input[type="checkbox"],
.adm-notice__field input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary-normal, #0066ff);
  cursor: pointer;
}
.adm-notice__field input::placeholder,
.adm-notice__field textarea::placeholder {
  color: #9a9ca2;
  opacity: 1;
}
.adm-notice__field input:hover,
.adm-notice__field textarea:hover,
.adm-notice__field select:hover {
  border-color: #adb0b5;
}
.adm-notice__field input:focus,
.adm-notice__field textarea:focus,
.adm-notice__field select:focus {
  border-color: var(--color-primary-normal, #0066ff);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}
.adm-notice__field textarea {
  resize: vertical;
  min-height: 200px;
  line-height: 1.65;
}
.adm-notice__field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2370737c' d='M1 1.5L6 6.5L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
/* inline-flex 는 자식 <strong>·텍스트노드를 각각 별개 아이템으로 잘라서
   체크박스 라벨에 굵은 글씨가 끼면 3컬럼으로 분리되어 한글이 음절단위로 깨짐.
   → block + 체크박스 vertical-align 정렬로 변경. */
.adm-notice__field--inline label {
  display: block;
  margin: 0;
  font-size: calc(15px * var(--fs));
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-label-strong);
}
/* 다크모드 — 라벨 텍스트와 <strong> 굵은 부분 모두 또렷하게 */
html[data-dark='true'] .adm-notice__field--inline label,
html[data-dark='true'] .adm-notice__field--inline label strong {
  color: var(--color-label-strong, #f0f1f3);
}
.adm-notice__field--inline input[type="checkbox"] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
}
.adm-notice__actions { display: flex; gap: 10px; }
.adm-notice__save {
  padding: 12px 28px;
  background: #0066ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.adm-notice__save:disabled { background: #d0d4dc; cursor: not-allowed; color: #fff; }
/* 다크모드: disabled 회색이 라이트 톤이라 다크 배경에 너무 튐 → 어두운 회색 */
html[data-dark='true'] .adm-notice__save:disabled {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.50);
}

/* 관리자 — 서비스 상단 슬라이더 관리 */

/* 진행 상태 메시지 (info/success/error/loading) */
.adm-hero-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin: 0 0 16px;
  border-radius: 10px;
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  line-height: 1.5;
}
.adm-hero-msg--info    { background: #f0f6ff; color: #1e3a8a; border: 1px solid #c7dbff; }
.adm-hero-msg--success { background: #e8f7ee; color: #166534; border: 1px solid #a3d7b3; }
.adm-hero-msg--error   { background: #fdecea; color: #b32314; border: 1px solid #f5b5ad; }
.adm-hero-msg--loading { background: #fff7e6; color: #92400e; border: 1px solid #fcd9a3; }

/* 스피너 */
@keyframes adm-spin { to { transform: rotate(360deg); } }
.adm-hero-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: adm-spin 0.7s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
.adm-hero-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

/* 화면 전체 오버레이 (업로드·저장 중) */
.adm-hero-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 48, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(3px);
  animation: adm-fade 0.18s ease;
}
@keyframes adm-fade { from { opacity: 0; } to { opacity: 1; } }
.adm-hero-overlay__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 48px;
  background: #fff;
  color: var(--color-label-strong);
  border-radius: 16px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.4);
  min-width: 320px;
  text-align: center;
}
.adm-hero-overlay__box strong { font-size: calc(17px * var(--fs)); font-weight: 800; }
.adm-hero-overlay__box span { font-size: calc(14px * var(--fs)); color: var(--color-label-alt); }

.adm-hero-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-hero-item {
  display: grid;
  grid-template-columns: 36px 120px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 10px;
}
.adm-hero-item__order {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #2c5fa0;
  color: #fff;
  font-weight: 800;
  font-size: calc(15px * var(--fs));
}
.adm-hero-item__img {
  width: 120px; height: 80px;
  object-fit: cover;
  border-radius: 8px;
  background: #f7f7f8;
}
.adm-hero-item__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.adm-hero-item__body input {
  padding: 8px 12px;
  font-size: calc(15px * var(--fs));
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 6px;
  font-family: inherit;
}
.adm-hero-item__url {
  margin: 0;
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.adm-hero-item__actions {
  display: flex;
  gap: 6px;
}
.adm-hero-item__actions button {
  width: 36px; height: 36px;
  background: #f5f7fa;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 8px;
  cursor: pointer;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
}
.adm-hero-item__actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.adm-hero-item__actions button:hover:not(:disabled) { background: #e6eefc; border-color: #2c5fa0; color: #2c5fa0; }
.adm-hero-item__del { color: #B32314 !important; }
.adm-hero-item__del:hover:not(:disabled) { background: #fde2de !important; border-color: #B32314 !important; }
@media (max-width: 720px) {
  .adm-hero-item { grid-template-columns: 32px 80px 1fr; }
  .adm-hero-item__img { width: 80px; height: 56px; }
  .adm-hero-item__actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.adm-notice__cancel {
  padding: 12px 22px;
  background: #f7f7f8;
  color: var(--color-label-strong);
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 8px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.adm-notice__list { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.adm-notice__loading, .adm-notice__empty {
  padding: 30px;
  text-align: center;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alternative);
}
.adm-notice__table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(15px * var(--fs));
}
.adm-notice__table th, .adm-notice__table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-line-normal-normal);
  text-align: left;
}
.adm-notice__table th {
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--color-label-alternative);
  letter-spacing: 0.04em;
  background: var(--color-background-alternative);
}
.adm-notice__table tr.is-pinned td { background: rgba(255, 180, 80, 0.06); }

/* 공지사항 관리 모바일 — 헤더/필터바/새글 버튼/테이블 가로 스크롤 처리.
   .adm-notice__head 패턴(notice/tv/meals/gallery/service-hero 공통) */
@media (max-width: 720px) {
  .adm-notice__head {
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: flex-start;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }
  .adm-notice__head h1 { font-size: calc(20px * var(--fs)); flex: 1 1 100%; }
  .adm-notice__head-tools {
    width: 100%;
    flex: 0 0 100%;
    order: 2;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }
  .adm-notice__back, .adm-notice__logout {
    padding: 8px 12px;
    font-size: calc(13px * var(--fs));
  }
  /* 저장/업로드 성공 안내 메시지 — 모바일 폰트·패딩 축소 */
  .adm-notice__msg {
    padding: 12px 14px;
    font-size: calc(13px * var(--fs));
    border-radius: 8px;
  }
  .adm-notice__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }
  .adm-notice__filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .adm-notice__filter::-webkit-scrollbar { display: none; }
  .adm-notice__filter-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: calc(13px * var(--fs));
  }
  .adm-notice__new {
    width: 100%;
    padding: 12px 16px;
    font-size: calc(14px * var(--fs));
    white-space: nowrap;
  }
  /* 테이블 가로 스크롤 — apps 테이블과 동일 패턴 */
  .adm-notice__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: calc(13px * var(--fs));
  }
  .adm-notice__table th,
  .adm-notice__table td {
    padding: 8px 10px;
    white-space: nowrap;
  }
  /* 제목 셀은 너무 길면 ellipsis 로 처리해 줄바꿈 방지 */
  .adm-notice__title-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.adm-notice__title-cell { font-weight: 600; color: var(--color-label-strong); }
.adm-notice__btn {
  padding: 6px 12px;
  margin-right: 4px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 6px;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.adm-notice__btn--danger { color: #E94335; border-color: #E94335; }
.adm-notice__btn--danger:hover { background: #E94335; color: #fff; }

/* ───────── v1.4 (Toast UI Editor + Rich post body) ───────── */

/* 렌더링된 게시물 본문 — 공지/뉴스 페이지에서 dangerouslySetInnerHTML 로 들어옴 */
.post-body { font-size: calc(19px * var(--fs)); line-height: 1.75; color: var(--color-label-neutral, #2e2f33); }
.post-body p { margin: 14px 0; }
.post-body p:first-child { margin-top: 0; }
.post-body p:last-child { margin-bottom: 0; }
.post-body strong { font-weight: 700; color: var(--color-label-strong, #171719); }
.post-body em { font-style: italic; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
  margin: 24px 0 12px;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
  line-height: 1.5;
}
.post-body h1 { font-size: calc(26px * var(--fs)); }
.post-body h2 { font-size: calc(22px * var(--fs)); }
.post-body h3 { font-size: calc(19px * var(--fs)); }
.post-body h4 { font-size: calc(19px * var(--fs)); }
.post-body ul, .post-body ol { margin: 14px 0; padding-left: 28px; }
.post-body li { margin: 4px 0; }
.post-body blockquote {
  margin: 18px 0;
  padding: 14px 20px;
  border-left: 4px solid var(--news-accent, #0066ff);
  background: var(--color-background-alternative, #f7f7f8);
  border-radius: 0 8px 8px 0;
  color: var(--color-label-strong);
}
.post-body blockquote p { margin: 6px 0; }
.post-body a { color: var(--news-accent, #0066ff); text-decoration: underline; font-weight: 600; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body code {
  padding: 2px 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: calc(17px * var(--fs));
}
.post-body pre {
  padding: 16px 18px;
  background: #1d1d1f;
  color: #f1f1f3;
  border-radius: 8px;
  overflow-x: auto;
  font-size: calc(16px * var(--fs));
  line-height: 1.65;
}
.post-body pre code { background: transparent; padding: 0; color: inherit; }
.post-body table { border-collapse: collapse; margin: 18px 0; width: 100%; font-size: calc(18px * var(--fs)); }
.post-body table th, .post-body table td {
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  padding: 10px 14px;
  text-align: left;
}
.post-body table th { background: var(--color-background-alternative); font-weight: 700; }
.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 14px 0;
  display: block;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.18);
}
.post-body hr {
  margin: 24px 0;
  border: none;
  border-top: 1px solid var(--color-line-normal-normal);
}
.post-body iframe.post__yt, .post-body iframe[src*="youtube.com/embed"] {
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 18px auto;
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 20px -10px rgba(0,0,0,0.25);
}

/* Toast UI Editor 컨테이너 — 관리자 작성 페이지에서 .vf__field 스타일과 톤 맞춤 */
.toastui-editor-defaultUI {
  border: 1.5px solid #d8dadd !important;
  border-radius: 10px !important;
  background: #fff;
}
.toastui-editor-defaultUI:focus-within {
  border-color: var(--color-primary-normal, #0066ff) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}
.toastui-editor-toolbar {
  border-bottom: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
}
.toastui-editor-defaultUI .toastui-editor-md-container,
.toastui-editor-defaultUI .toastui-editor-ww-container {
  font-size: calc(18px * var(--fs)) !important;
  line-height: 1.7;
}

/* 관리자 에디터 폼 안내 텍스트 */
.adm-notice__hint {
  margin: 0 0 10px;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-alternative, #70737c);
  line-height: 1.6;
}

/* ───────── v1.6 식단 PDF 카드 (.meal-pdf) + 관리자 식단 폼 (.adm-meals) ───────── */

.meal-pdfs {
  display: grid;
  gap: 16px;
  margin: 24px 0 40px;
}
.meal-pdf {
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  overflow: hidden;
}
.meal-pdf--expanded { border-color: var(--news-accent, #0066ff); }
.meal-pdf__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  flex-wrap: wrap;
}
.meal-pdf__eyebrow {
  display: block;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--news-accent, #0066ff);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.meal-pdf__title {
  margin: 0;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.025em;
}
.meal-pdf__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.meal-pdf__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 8px;
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, transform .15s;
}
.meal-pdf__btn:hover {
  border-color: var(--news-accent);
  color: var(--news-accent);
}
.meal-pdf__btn--primary {
  background: var(--news-accent);
  color: #fff !important;
  border-color: var(--news-accent);
}
.meal-pdf__btn--primary:hover {
  background: var(--news-accent);
  filter: brightness(0.92);
  color: #fff;
}
.meal-pdf__btn--toggle {
  background: var(--color-background-alternative);
  color: var(--color-label-strong);
}

.meal-pdf__viewer {
  border-top: 1px solid var(--color-line-normal-normal);
  background: #f4f5f8;
}
.meal-pdf__viewer iframe {
  display: block;
  width: 100%;
  height: 820px;
  border: none;
  background: #fff;
}
@media (max-width: 768px) {
  .meal-pdf__head { flex-direction: column; align-items: flex-start; }
  .meal-pdf__actions { width: 100%; }
  .meal-pdf__btn { flex: 1; justify-content: center; }
  .meal-pdf__viewer iframe { height: 560px; }
}

/* 다크 모드 */
html[data-dark='true'] .meal-pdf { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .meal-pdf__btn { background: var(--color-bg-elev); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark='true'] .meal-pdf__btn--toggle { background: rgba(255,255,255,0.06); }
html[data-dark='true'] .meal-pdf__viewer { background: #1d1d1f; }

/* 관리자 식단 폼 (연도·월 가로 배치) */
.adm-meals__row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.adm-meals__file {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px dashed #d8dadd;
  border-radius: 8px;
  background: #f7f7f8;
  font-family: inherit;
  font-size: calc(17px * var(--fs));
  cursor: pointer;
}
.adm-meals__file:hover { border-color: var(--color-primary-normal, #0066ff); background: rgba(0, 102, 255, 0.04); }

/* ───────── v1.7 식단 페이지 추가 컴포넌트 ───────── */

/* 1. 식당 이용 안내 (3카드 가로 배치) */
.meal-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 48px;
}
.meal-info__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  background: var(--color-background-alternative, #f7f7f8);
  border-left: 4px solid var(--news-accent, #0066ff);
  border-radius: 0 12px 12px 0;
}
.meal-info__icon {
  font-size: calc(34px * var(--fs));
  line-height: 1;
  flex-shrink: 0;
}
.meal-info__title {
  margin: 0 0 6px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
}
.meal-info__desc {
  margin: 0;
  font-size: calc(18px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral, #2e2f33);
}
.meal-info__desc strong { font-weight: 700; color: var(--news-accent, #0066ff); }

@media (max-width: 768px) {
  .meal-info { grid-template-columns: 1fr; }
}

/* 2. 월간 식단표 캘린더 컨트롤 */
.meal-cal {
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  overflow: hidden;
  margin: 24px 0 48px;
}
.meal-cal__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 24px;
  background: var(--color-background-alternative, #f7f7f8);
  border-bottom: 1px solid var(--color-line-normal-normal);
}
.meal-cal__title {
  margin: 0;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
  min-width: 180px;
  text-align: center;
}
.meal-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--news-accent, #0066ff);
  color: #fff;
  border: none;
  font-size: calc(28px * var(--fs));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s, background .15s;
}
.meal-cal__nav:hover { transform: scale(1.06); filter: brightness(0.92); }

.meal-cal__viewer {
  background: #f4f5f8;
}
.meal-cal__viewer iframe {
  display: block;
  width: 100%;
  height: 860px;
  border: none;
  background: #fff;
}
.meal-cal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-line-normal-normal);
}
.meal-cal__empty {
  padding: 60px 32px;
  text-align: center;
  background: var(--color-background-alternative, #f7f7f8);
}
.meal-cal__empty-icon {
  display: block;
  font-size: calc(48px * var(--fs));
  margin-bottom: 12px;
}
.meal-cal__empty p {
  margin: 6px 0;
  font-size: calc(19px * var(--fs));
  color: var(--color-label-strong);
}
.meal-cal__empty-hint {
  font-size: calc(17px * var(--fs)) !important;
  color: var(--color-label-alternative, #70737c) !important;
}

@media (max-width: 768px) {
  .meal-cal__viewer iframe { height: 560px; }
  .meal-cal__title { font-size: calc(18px * var(--fs)); min-width: 140px; }
}

/* 3. 식당 이미지 갤러리 (3장 슬라이드) */
.rest-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 16px;
  margin: 24px 0 32px;
}
.rest-gallery__nav {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--news-accent, #0066ff);
  color: #fff;
  border: none;
  font-size: calc(32px * var(--fs));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px -8px rgba(0,102,255,0.5);
  transition: transform .15s, background .15s;
  z-index: 2;
}
.rest-gallery__nav:hover { transform: scale(1.05); filter: brightness(0.92); }
.rest-gallery__nav:disabled { background: #d0d4dc; cursor: not-allowed; box-shadow: none; }

.rest-gallery__viewport {
  overflow: hidden;
  border-radius: 12px;
}
.rest-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.rest-gallery__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #f1f1f3;
}
.rest-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.rest-gallery__item:hover img { transform: scale(1.04); }

.rest-gallery__dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.rest-gallery__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: var(--color-line-normal-normal, rgba(112,115,124,0.4));
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.rest-gallery__dot:hover { background: var(--color-label-alternative, #70737c); }
.rest-gallery__dot--on {
  background: var(--news-accent, #0066ff);
  transform: scale(1.3);
}

@media (max-width: 768px) {
  .rest-gallery { grid-template-columns: 44px 1fr 44px; gap: 8px; }
  .rest-gallery__nav { width: 44px; height: 44px; font-size: calc(24px * var(--fs)); }
  .rest-gallery__grid { grid-template-columns: 1fr; }
  /* 모바일: 1장씩 보이게 */
}

/* 다크 모드 */
html[data-dark='true'] .meal-info__item { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .meal-cal { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .meal-cal__bar { background: rgba(255,255,255,0.04); border-bottom-color: var(--color-line); }
html[data-dark='true'] .meal-cal__viewer { background: #1d1d1f; }
html[data-dark='true'] .meal-cal__empty { background: rgba(255,255,255,0.04); }

/* ───────── v1.8 식단 캘린더 그리드 (.meal-grid) + 관리자 검수 UI (.adm-meals__parsed) ───────── */

/* 캘린더 그리드 */
.meal-grid {
  background: #fff;
  border-top: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
}
/* 캘린더 격자선 — 명확한 연회색 (var(--color-line) 보다 또렷) */
.meal-grid__head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--color-background-alternative, #f7f7f8);
  border-bottom: 1px solid #d8dadd;
}
.meal-grid__dow {
  padding: 14px 10px;
  text-align: center;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
  border-right: 1px solid #d8dadd;
}
.meal-grid__dow:last-child { border-right: none; }
.meal-grid__dow--sun { color: #E94335; }
.meal-grid__dow--sat { color: #0066ff; }

.meal-grid__body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(140px, auto);
}
.meal-grid__cell {
  padding: 10px 10px 12px;
  background: #fff;
  border-right: 1px solid #e3e5e8;
  border-bottom: 1px solid #e3e5e8;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.meal-grid__cell:nth-child(7n) { border-right: none; }
.meal-grid__cell--empty { background: #fafbfc; }

/* 오늘 날짜 셀 — 파스텔 노랑 배경 + 보더 강조 */
.meal-grid__cell--today {
  background: #FFF8DC;             /* 코너실크 (pastel cream) */
  box-shadow: inset 0 0 0 2px #F5C518;  /* 골든 옐로 보더 */
}
.meal-grid__cell--today .meal-grid__date-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: #F5C518;
  color: #fff !important;          /* 일/토 색상보다 우선 */
}
/* 오늘 셀 메뉴 텍스트 — 굵게 + 진한 색 */
.meal-grid__cell--today .meal-grid__menu li {
  font-weight: 700;
  color: var(--color-label-strong, #171719);
}
.meal-grid__cell--sun .meal-grid__date-num { color: #E94335; }
.meal-grid__cell--sat .meal-grid__date-num { color: #0066ff; }

.meal-grid__date {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.meal-grid__date-num {
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.025em;
}
.meal-grid__date-note {
  font-size: calc(13px * var(--fs));
  color: #E94335;
  font-weight: 700;
}

.meal-grid__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.meal-grid__menu li {
  font-size: calc(15px * var(--fs));
  line-height: 1.55;
  color: var(--color-label-neutral, #2e2f33);
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .meal-grid__body { grid-auto-rows: minmax(100px, auto); }
  .meal-grid__cell { padding: 8px 6px; }
  .meal-grid__dow { padding: 10px 4px; font-size: calc(15px * var(--fs)); }
  .meal-grid__menu li { font-size: calc(12px * var(--fs)); }
}
@media (max-width: 640px) {
  /* 모바일에서는 캘린더가 너무 작아지므로 가로 스크롤 */
  .meal-grid { overflow-x: auto; }
  .meal-grid__head, .meal-grid__body { min-width: 700px; }
}

/* 다크 모드 */
html[data-dark='true'] .meal-grid { background: var(--color-bg-elev); }
html[data-dark='true'] .meal-grid__head { background: rgba(255,255,255,0.04); border-bottom-color: var(--color-line); }
html[data-dark='true'] .meal-grid__dow { color: var(--color-label-strong); border-right-color: var(--color-line); }
html[data-dark='true'] .meal-grid__cell { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .meal-grid__cell--empty { background: rgba(255,255,255,0.02); }

/* 관리자 검수 UI: 일자별 메뉴 입력 grid */
.adm-meals__parsed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
  padding: 16px;
  background: var(--color-background-alternative, #f7f7f8);
  border-radius: 10px;
  max-height: 600px;
  overflow-y: auto;
}
.adm-meals__day {
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 8px;
  padding: 12px;
}
.adm-meals__day-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.adm-meals__day-head strong {
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-primary-normal, #0066ff);
}
.adm-meals__day-dow {
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alternative);
}
.adm-meals__day-note {
  flex: 1;
  min-width: 0;
  padding: 4px 8px !important;
  font-size: calc(13px * var(--fs)) !important;
  border: 1px solid var(--color-line-normal-normal) !important;
  border-radius: 4px !important;
  background: #fff !important;
}
.adm-meals__day-menu {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 6px;
  font-family: inherit;
  font-size: calc(15px * var(--fs)) !important;
  line-height: 1.6;
  resize: vertical;
  min-height: 100px !important;
  box-sizing: border-box;
}

/* 이번주 식단 카드 — 휴일 메모 / 빈 메뉴 */
.news__meal-note {
  margin: 14px 0;
  padding: 14px 16px;
  background: rgba(233, 67, 53, 0.08);
  border-radius: 8px;
  color: #E94335;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
}
.news__meal-empty {
  margin: 14px 0;
  padding: 12px;
  text-align: center;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-alternative, #70737c);
  font-style: italic;
}

/* ───────── v1.9 활동사진 갤러리 (.gal-*) + 관리자 (.adm-gal-*) ───────── */

/* 1. 히어로 슬라이더 */
.gal-hero {
  position: relative;
  margin: 24px 0 36px;
  border-radius: 16px;
  overflow: hidden;
  background: #0f0f12;
}
.gal-hero__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
/* 2-컬럼 슬라이드: 왼쪽 정보 패널 + 오른쪽 이미지 */
.gal-hero__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 320px 1fr;
  opacity: 0;
  transition: opacity .6s ease;
  cursor: pointer;
  overflow: hidden;
}
.gal-hero__slide--on { opacity: 1; }

/* 왼쪽 정보 패널 */
.gal-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 32px 28px;
  background: linear-gradient(155deg, #1d1d1f 0%, #2a2a2e 100%);
  color: #fff;
}
.gal-hero__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 14px;
  background: var(--news-accent, #7C3AED);
  color: #fff;
  border-radius: 999px;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gal-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.gal-hero__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  letter-spacing: -0.01em;
}
.gal-hero__tag--bu { color: #fff; }
.gal-hero__tag--type {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.gal-hero__album {
  margin: 4px 0 0;
  font-size: calc(16px * var(--fs));
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.gal-hero__caption {
  margin: 4px 0;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: #fff;
  /* 3줄까지만 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gal-hero__date {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: calc(16px * var(--fs));
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}

/* 오른쪽 이미지 영역 */
.gal-hero__image {
  position: relative;
  overflow: hidden;
  background: #0f0f12;
}
/* 블러 배경 — 이미지 영역만 채우는 letterbox 자연스럽게 */
.gal-hero__bg {
  position: absolute;
  inset: -10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(30px) brightness(0.55) saturate(1.2);
  transform: scale(1.15);
  z-index: 0;
}
.gal-hero__image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* 잘림 없음, 가로/세로 모두 안전 */
  display: block;
}
.gal-hero__dots {
  position: absolute;
  bottom: 14px; right: 18px;
  display: flex; gap: 6px;
}
.gal-hero__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
}
.gal-hero__dot--on { background: #fff; transform: scale(1.2); }

/* 2. 필터 */
.gal-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 28px;
  padding: 16px 18px;
  background: var(--color-background-alternative, #f7f7f8);
  border-radius: 12px;
}
.gal-filter__bu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gal-filter__chip {
  padding: 10px 16px;
  background: #fff;
  border: 1.5px solid #d8dadd;
  border-radius: 999px;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.gal-filter__chip:hover { border-color: var(--news-accent); color: var(--news-accent); }
.gal-filter__chip--on {
  background: var(--color-label-strong, #171719);
  border-color: var(--color-label-strong);
  color: #fff;
}
.gal-filter__count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
}
.gal-filter__chip--on .gal-filter__count { background: rgba(255,255,255,0.2); }

.gal-filter__type {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gal-filter__type label {
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  color: var(--color-label-alternative);
}
.gal-filter__type select {
  padding: 8px 30px 8px 14px;
  border: 1.5px solid #d8dadd;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong);
  cursor: pointer;
}

/* 3. 월별 섹션 + 그리드 */
.gal-month { margin: 0 0 32px; }
.gal-month__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--news-accent, #7C3AED);
}
.gal-month__title {
  margin: 0;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(24px * var(--fs));
  font-weight: 800;
  color: var(--news-accent);
  letter-spacing: -0.025em;
}
.gal-month__count {
  font-size: calc(17px * var(--fs));
  color: var(--color-label-alternative);
  font-weight: 600;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .gal-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.gal-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.gal-item__thumb {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: #f1f1f3;
}
.gal-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.gal-item:hover .gal-item__thumb img { transform: scale(1.06); }
.gal-item__bu {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  background: var(--news-accent);
  color: #fff;
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
}
.gal-item__caption {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-neutral);
  line-height: 1.55;
}

/* 4. 더 보기 */
.gal-more { display: flex; justify-content: center; margin: 24px 0 40px; }
.gal-more__btn {
  padding: 14px 28px;
  background: var(--color-background-alternative);
  border: 1.5px solid var(--color-line-normal-normal);
  border-radius: 999px;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.gal-more__btn:hover { background: var(--news-accent); color: #fff; border-color: var(--news-accent); }

/* 5. 라이트박스 */
.gal-lb {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.gal-lb__close {
  position: absolute;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: calc(24px * var(--fs));
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  z-index: 2;
}
.gal-lb__close:hover { background: rgba(255,255,255,0.3); }
.gal-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: calc(36px * var(--fs));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  z-index: 2;
}
.gal-lb__nav:hover { background: rgba(255,255,255,0.3); }
.gal-lb__nav--prev { left: 20px; }
.gal-lb__nav--next { right: 20px; }
.gal-lb__inner {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  max-height: 90vh;
  width: 100%;
}
.gal-lb__photo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.gal-lb__photo img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: 8px;
  object-fit: contain;
}
.gal-lb__meta {
  width: 320px;
  flex-shrink: 0;
  padding: 28px 24px;
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gal-lb__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gal-lb__bu {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: #fff;
}
.gal-lb__type, .gal-lb__album {
  padding: 4px 12px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: calc(15px * var(--fs));
  font-weight: 600;
}
.gal-lb__caption {
  margin: 6px 0;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  line-height: 1.6;
}
.gal-lb__date {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: rgba(255,255,255,0.7);
}
.gal-lb__share { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gal-lb__share-btn {
  padding: 12px 18px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.gal-lb__share-btn:hover { background: rgba(255,255,255,0.22); }
.gal-lb__share-btn--kakao {
  background: #FEE500;
  color: #3C1E1E;
}
.gal-lb__share-btn--kakao:hover { background: #FFD800; }

@media (max-width: 900px) {
  .gal-lb__inner { flex-direction: column; max-height: 95vh; overflow-y: auto; }
  .gal-lb__meta { width: 100%; }
  /* 모바일에선 오히려 화살표 더 크고 진하게 — 사진 배경에 묻혀 안 보이던 문제 해결 */
  .gal-lb__nav {
    width: 56px; height: 56px;
    font-size: calc(36px * var(--fs));
    background: rgba(0,0,0,0.55);
    border: 2px solid rgba(255,255,255,0.85);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  }
  .gal-lb__nav:hover,
  .gal-lb__nav:active { background: rgba(0,0,0,0.75); }
  .gal-lb__nav--prev { left: 12px; }
  .gal-lb__nav--next { right: 12px; }
  /* 닫기 버튼도 같은 패턴으로 가독성 강화 */
  .gal-lb__close {
    background: rgba(0,0,0,0.55);
    border: 2px solid rgba(255,255,255,0.85);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  }
}
@media (max-width: 760px) {
  /* 모바일: 정보 패널 위, 이미지 아래로 스택.
     원인 수정: 슬라이드가 position: absolute 면서 viewport aspect-ratio
     를 auto 로 풀면 viewport 높이가 0 이 됨 → 슬라이더 자체가 안 보임.
     해결: 활성 슬라이드만 position: relative 로 잡아 viewport 가
     실제 콘텐츠 높이를 가지도록. 비활성 슬라이드는 display: none. */
  .gal-hero__viewport { aspect-ratio: auto; min-height: 0; }
  .gal-hero__slide {
    display: none;
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .gal-hero__slide--on {
    display: grid;
    opacity: 1;
  }
  .gal-hero__panel { padding: 18px 20px; gap: 8px; }
  .gal-hero__caption { font-size: calc(19px * var(--fs)); -webkit-line-clamp: 2; }
  .gal-hero__image { aspect-ratio: 4 / 3; }
}

/* ───── 관리자 갤러리 업로드 폼 ───── */
.adm-gal__queue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  background: var(--color-background-alternative);
  border-radius: 10px;
  max-height: 500px;
  overflow-y: auto;
}
.adm-gal__queue-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 10px;
  padding: 8px;
}
.adm-gal__queue-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.adm-gal__queue-item input {
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px !important;
  font-size: calc(13px * var(--fs)) !important;
  border: 1px solid var(--color-line-normal-normal) !important;
  border-radius: 6px !important;
  box-sizing: border-box;
}
.adm-gal__queue-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.adm-gal__queue-status {
  position: absolute;
  bottom: 56px; left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 16px;
}
.adm-gal__queue-item--done .adm-gal__queue-status { background: #1E7E37; }
.adm-gal__queue-item--error .adm-gal__queue-status { background: #E94335; }

.adm-gal__progress {
  position: relative;
  height: 32px;
  background: var(--color-background-alternative);
  border-radius: 999px;
  margin: 14px 0;
  overflow: hidden;
}
.adm-gal__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, #0066ff 0%, #7C3AED 100%);
  transition: width .3s ease;
}
.adm-gal__progress span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: calc(14px * var(--fs));
  mix-blend-mode: difference;
}

.adm-gal__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.adm-gal__list-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 10px;
}
.adm-gal__list-thumb {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f1f3;
}
.adm-gal__list-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.adm-gal__list-body { min-width: 0; }
.adm-gal__list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  font-size: calc(13px * var(--fs));
}
.adm-gal__list-bu {
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
}
.adm-gal__list-type {
  padding: 2px 8px;
  background: var(--color-background-alternative);
  border-radius: 999px;
  font-weight: 600;
  color: var(--color-label-strong);
}
.adm-gal__list-album {
  padding: 2px 8px;
  background: rgba(124, 58, 237, 0.1);
  color: #7C3AED;
  border-radius: 999px;
  font-weight: 600;
}
.adm-gal__list-caption {
  margin: 0 0 4px;
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong);
}
.adm-gal__list-date {
  margin: 0;
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alternative);
}

/* 다크 모드 */
html[data-dark='true'] .gal-filter { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .gal-filter__chip { background: var(--color-bg-elev); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark='true'] .gal-filter__type select { background: var(--color-bg-elev); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark='true'] .adm-gal__queue { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .adm-gal__queue-item { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .adm-gal__list-item { background: var(--color-bg-elev); border-color: var(--color-line); }

/* 갤러리 — 월별 빠른 이동 chip */
.gal-jump {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: linear-gradient(120deg, rgba(124,58,237,0.06) 0%, rgba(124,58,237,0.02) 100%);
  border-radius: 12px;
  flex-wrap: wrap;
}
.gal-jump__label {
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  flex-shrink: 0;
}
.gal-jump__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.gal-jump__chip {
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid #d8dadd;
  border-radius: 999px;
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: all .15s;
}
.gal-jump__chip:hover {
  background: var(--news-accent, #7C3AED);
  border-color: var(--news-accent, #7C3AED);
  color: #fff;
}
.gal-jump__count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
}
.gal-jump__chip:hover .gal-jump__count {
  background: rgba(255,255,255,0.2);
}

/* 다크 */
html[data-dark='true'] .gal-jump { background: rgba(124,58,237,0.12); }
html[data-dark='true'] .gal-jump__chip { background: var(--color-bg-elev); border-color: var(--color-line); color: var(--color-label-strong); }

/* 갤러리 카드 캡션 폰트 축소 (5열로 작아진 카드에 맞게) */
.gal-item__caption { font-size: calc(13px * var(--fs)); line-height: 1.4; }
.gal-item__bu { font-size: calc(12px * var(--fs)); padding: 3px 8px; }

/* ───────── v2.0 복지타운 TV 페이지 (.tv-*) + 관리자 (.adm-tv-*) ───────── */

/* 1. 메인 영상 임베드 */
.tv-main {
  margin: 24px 0 36px;
  background: #0f0f12;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 36px -16px rgba(0,0,0,0.3);
}
.tv-main__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.tv-main__player iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* 2. 구독·좋아요 CTA */
/* 컴팩트한 유튜브 톤 CTA */
.tv-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 6px 18px -10px rgba(255,0,0,0.4);
}
.tv-cta__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.tv-cta__yt-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tv-cta__text { min-width: 0; }
.tv-cta__eyebrow {
  display: block;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.92;
  margin-bottom: 2px;
}
.tv-cta__title {
  margin: 0;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.tv-cta__buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.tv-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  background: rgba(0,0,0,0.2);
  color: #fff;
  border-radius: 999px;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background .15s, transform .15s;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.25);
}
.tv-cta__btn:hover { background: rgba(0,0,0,0.35); transform: translateY(-1px); }
.tv-cta__btn--sub {
  background: #fff;
  color: #CC0000;
  border-color: #fff;
}
.tv-cta__btn--sub:hover { background: #fff; color: #FF0000; }

/* 복지타운 공식 홍보영상 (CTA 바로 아래 고정 임베드 — 1~4개 그리드) */
.tv-featured {
  margin: 0 0 32px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,0,0,0.04) 0%, transparent 60%);
  border: 1px solid rgba(255,0,0,0.14);
}
.tv-featured__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tv-featured__badge {
  display: inline-block;
  padding: 3px 9px;
  background: #FF0000;
  color: #fff;
  border-radius: 4px;
  font-size: calc(12px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.06em;
}
.tv-featured__title {
  margin: 0;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
}
.tv-featured__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.tv-featured--cols-1 .tv-featured__grid {
  grid-template-columns: 1fr;
  max-width: 720px;        /* 1개일 때 너무 커지지 않게 */
  margin: 0 auto;
}
@media (max-width: 760px) {
  .tv-featured__grid { grid-template-columns: 1fr; }
}
.tv-featured__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #0f0f12;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px -14px rgba(0,0,0,0.3);
}
.tv-featured__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.tv-featured__player iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.tv-featured__caption {
  margin: 0;
  padding: 10px 14px 12px;
  background: #fff;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.015em;
  line-height: 1.55;
}
html[data-dark='true'] .tv-featured__caption { background: var(--color-bg-elev); }

@media (max-width: 760px) {
  .tv-cta { padding: 12px 14px; gap: 10px; flex-direction: column; align-items: stretch; }
  .tv-cta__buttons { width: 100%; }
  .tv-cta__btn { flex: 1; }
  .tv-cta__title { font-size: calc(19px * var(--fs)); }
}

/* 3. 최근 영상 그리드 */
.tv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 24px 0 40px;
}
@media (max-width: 720px) { .tv-grid { grid-template-columns: 1fr; gap: 14px; } }

.tv-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.tv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -16px rgba(0,0,0,0.18); }
.tv-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0f0f12;
  overflow: hidden;
}
.tv-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tv-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.92);
  color: #fff;
  font-size: calc(22px * var(--fs));
  padding-left: 6px;
  transition: transform .15s;
}
.tv-card:hover .tv-card__play { transform: translate(-50%, -50%) scale(1.1); }
.tv-card__body { padding: 18px 20px; }
.tv-card__title {
  margin: 0 0 6px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
  line-height: 1.55;
}
.tv-card__title--muted { color: var(--color-label-alternative, #70737c); font-weight: 600; }
.tv-card__desc {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-neutral, #2e2f33);
  line-height: 1.65;
}

/* 다크 모드 */
html[data-dark='true'] .tv-card { background: var(--color-bg-elev); border-color: var(--color-line); }

/* ───── 관리자 TV 관리 폼 ───── */
.adm-tv__preview {
  margin-top: 14px;
  background: #0f0f12;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.adm-tv__preview-label {
  display: block;
  padding: 8px 14px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.adm-tv__preview iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}

.adm-tv__row {
  display: grid;
  grid-template-columns: 40px 120px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 10px;
}
.adm-tv__row-rank {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #E94335;
  color: #fff;
  font-family: 'Paperlogy', 'Pretendard Variable', sans-serif;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
}
.adm-tv__row-thumb {
  width: 120px;
  aspect-ratio: 16 / 9;
  background: #f1f1f3;
  border-radius: 6px;
  overflow: hidden;
}
.adm-tv__row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-tv__row-thumb-empty {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-label-alternative);
  font-size: calc(13px * var(--fs));
  font-weight: 600;
}
.adm-tv__row-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.adm-tv__row-fields input {
  padding: 8px 10px !important;
  font-size: calc(14px * var(--fs)) !important;
  border: 1px solid var(--color-line-normal-normal) !important;
  border-radius: 6px !important;
  box-sizing: border-box;
  width: 100%;
}
.adm-tv__row-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-tv__row-actions button {
  width: 32px; height: 32px;
  border: 1px solid var(--color-line-normal-normal);
  background: #fff;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.adm-tv__row-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.adm-tv__row-actions button.adm-notice__btn--danger {
  color: #E94335;
  border-color: #E94335;
}
.adm-tv__row-actions button.adm-notice__btn--danger:hover {
  background: #E94335; color: #fff;
}

@media (max-width: 720px) {
  .adm-tv__row { grid-template-columns: 1fr; }
  .adm-tv__row-thumb { width: 100%; }
  .adm-tv__row-actions { flex-direction: row; }
}

html[data-dark='true'] .adm-tv__row { background: var(--color-bg-elev); border-color: var(--color-line); }

/* ───────── v2.1 복지타운 TV 게시판 (.tv-list / .tv-detail / .adm-tv__list) ───────── */

/* 전체 N건 카운트 */
.tv-list-head {
  margin: 8px 0 16px;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-alternative, #70737c);
}
.tv-list-head strong {
  color: var(--news-accent, #E94335);
  font-weight: 800;
  font-size: calc(19px * var(--fs));
}

/* 영상 카드 목록 (4열 그리드) */
.tv-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 1180px) { .tv-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .tv-list { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 520px)  { .tv-list { grid-template-columns: 1fr; } }

.tv-list__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.tv-list__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(0,0,0,0.16);
  border-color: var(--news-accent);
}
.tv-list__card--pinned { border-left: 4px solid var(--news-accent); }

.tv-list__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0f0f12;
  overflow: hidden;
}
.tv-list__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tv-list__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.92);
  color: #fff;
  font-size: calc(20px * var(--fs));
  padding-left: 4px;
  transition: transform .15s;
}
.tv-list__card:hover .tv-list__play { transform: translate(-50%, -50%) scale(1.1); }
.tv-list__pin {
  position: absolute;
  top: 10px; left: 10px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--news-accent);
}

.tv-list__title {
  margin: 4px 16px 0;
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
  line-height: 1.55;
  /* 2줄 말줄임 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(16px * var(--fs) * 2.9);
}
.tv-list__meta {
  margin: 0 16px 14px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f3;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alternative, #70737c);
  font-variant-numeric: tabular-nums;
}

html[data-dark='true'] .tv-list__card { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .tv-list__meta { border-top-color: var(--color-line); }

/* 상세 뷰 */
.tv-detail {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 8px;
}
.tv-detail__title {
  margin: 0 0 14px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--color-label-strong, #171719);
  font-size: calc(26px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
  line-height: 1.5;
}
.tv-detail__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-alternative);
}
.tv-detail__sep { color: var(--color-line-normal-normal); }

.tv-detail__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f0f12;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto 32px;
  box-shadow: 0 16px 36px -18px rgba(0,0,0,0.3);
}
.tv-detail__player iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

.tv-detail__body {
  margin: 24px 0;
  font-size: calc(19px * var(--fs));
  line-height: 1.85;
  color: var(--color-label-neutral, #2e2f33);
}
.tv-detail__body p {
  margin: 0 0 12px;
}
.tv-detail__body p:empty { min-height: calc(17px * var(--fs)); }

.tv-detail__links {
  margin: 28px 0;
  padding: 18px 22px;
  background: var(--color-background-alternative, #f7f7f8);
  border-radius: 10px;
}
.tv-detail__links h4 {
  margin: 0 0 10px;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
}
.tv-detail__links ul { list-style: none; margin: 0; padding: 0; }
.tv-detail__links li { margin: 4px 0; }
.tv-detail__links a {
  font-size: calc(17px * var(--fs));
  color: var(--news-accent);
  word-break: break-all;
  text-decoration: none;
  font-weight: 600;
}
.tv-detail__links a:hover { text-decoration: underline; }

.tv-detail__nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line-normal-normal);
  flex-wrap: wrap;
}
.tv-detail__nav-btn {
  padding: 12px 22px;
  background: var(--color-label-strong, #171719);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.tv-detail__nav-btn:hover { filter: brightness(1.2); }
.tv-detail__nav-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.tv-detail__nav-link {
  display: block;
  padding: 10px 14px;
  background: var(--color-background-alternative);
  border-radius: 8px;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-strong);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-detail__nav-link span {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  background: var(--color-label-strong, #171719);
  color: #fff;
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
}
.tv-detail__nav-link:hover { background: rgba(233, 67, 53, 0.06); color: var(--news-accent); }

html[data-dark='true'] .tv-detail__title { border-bottom-color: var(--color-label-strong); }
html[data-dark='true'] .tv-detail__links { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .tv-detail__nav-link { background: rgba(255,255,255,0.04); color: var(--color-label-strong); }

/* ───── 관리자 영상 게시물 목록 ───── */
.adm-tv__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.adm-tv__list-item {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 10px;
}
.adm-tv__list-item--pinned {
  border-left: 4px solid #E94335;
  background: #fffaf6;
}
.adm-tv__list-thumb {
  position: relative;
  display: block;
  width: 160px;
  aspect-ratio: 16 / 9;
  background: #0f0f12;
  border-radius: 6px;
  overflow: hidden;
}
.adm-tv__list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-tv__list-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,0,0,0.9);
  color: #fff;
  font-size: 14px;
  padding-left: 2px;
}
.adm-tv__list-body { min-width: 0; }
.adm-tv__list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 6px;
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alternative);
}
.adm-tv__list-pin {
  padding: 2px 8px;
  background: rgba(233,67,53,0.12);
  color: #E94335;
  border-radius: 999px;
  font-weight: 700;
}
.adm-tv__list-date { font-variant-numeric: tabular-nums; }
.adm-tv__list-title {
  margin: 0 0 4px;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
  line-height: 1.45;
}
.adm-tv__list-snippet {
  margin: 0;
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alternative);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adm-tv__list-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

@media (max-width: 720px) {
  .adm-tv__list-item { grid-template-columns: 1fr; }
  .adm-tv__list-thumb { width: 100%; }
  .adm-tv__list-actions { flex-direction: row; }
}

html[data-dark='true'] .adm-tv__list-item { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .adm-tv__list-item--pinned { background: rgba(255, 180, 80, 0.05); }

/* 관리자 — 홍보영상 다중 행 입력 */
.adm-tv__featured-row {
  display: grid;
  grid-template-columns: 32px 110px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: 8px;
  background: var(--color-background-alternative, #f7f7f8);
  border-radius: 8px;
}
.adm-tv__featured-rank {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #FF0000;
  color: #fff;
  font-weight: 800;
  font-size: calc(13px * var(--fs));
}
.adm-tv__featured-thumb {
  width: 110px;
  aspect-ratio: 16 / 9;
  background: #f1f1f3;
  border-radius: 4px;
  overflow: hidden;
}
.adm-tv__featured-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-tv__featured-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.adm-tv__featured-fields input {
  padding: 6px 10px !important;
  font-size: calc(13px * var(--fs)) !important;
  border: 1px solid var(--color-line-normal-normal) !important;
  border-radius: 4px !important;
  box-sizing: border-box;
}
.adm-tv__featured-row button { font-size: 14px; }
@media (max-width: 720px) {
  .adm-tv__featured-row { grid-template-columns: 1fr; }
  .adm-tv__featured-thumb { width: 100%; max-width: 240px; }
}

html[data-dark='true'] .adm-tv__featured-row { background: rgba(255,255,255,0.04); }

/* ───────── v2.2 SubpageHero — 사이드네비 없는 페이지 여백 정리 ─────────
   사이드 메뉴(.snav)가 없는 페이지 (TV, 식단, 갤러리, 공지사항 등)는
   phero__head 의 구분선·여백을 제거해 휑한 공간을 없앤다.
   :has() 미지원 브라우저(구버전 Safari < 15.4)에선 기존 모습 유지(graceful degradation). */

.phero__wrap:not(:has(.snav)) .phero__head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.phero__wrap:not(:has(.snav)) {
  padding-bottom: 22px;
}
@media (max-width: 720px) {
  .phero__wrap:not(:has(.snav)) { padding-bottom: 16px; }
}

/* ───────── v2.3 SubpageHero eyebrow 전역 숨김 — 제목/브레드크럼과 중복 ───────── */
.phero__eyebrow { display: none !important; }

/* ───────── 인재 영입 (채용공고) — 상태칩 ───────── */
.recruit-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.recruit-status--ongoing { background: #E6F6EC; color: #1B7F3A; }
.recruit-status--closing { background: #FFF1E0; color: #B5781A; }
.recruit-status--closed  { background: #ECEEF2; color: #5F6675; }
.recruit-status--lg {
  font-size: calc(15px * var(--fs));
  padding: 6px 16px;
  margin-bottom: 12px;
}

.notice-table__status-cell { text-align: center; padding: 16px !important; }

.news-detail__pin-row { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }

/* 마감 안내 박스 */
.apply-closed {
  margin: 36px 0 0;
  padding: 24px 28px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  text-align: center;
}
.apply-closed strong { display: block; font-size: calc(19px * var(--fs)); color: var(--color-label-strong); margin-bottom: 6px; }
.apply-closed p { margin: 0; font-size: calc(16px * var(--fs)); color: var(--color-label-alternative); }

/* 온라인 지원 폼 */
.apply-form {
  margin: 36px 0 0;
  padding: 32px;
  background: #e9f1fc;            /* 구분감 강화 — 기존 #f7faff 보다 한 톤 진한 블루 틴트 */
  border: 1px solid #c4d6ee;      /* 테두리도 또렷하게 (기존 연한 라인 → 블루그레이) */
  border-radius: 16px;
}
.apply-form__head { margin-bottom: 24px; }
.apply-form__head h3 {
  margin: 0 0 6px;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
}
.apply-form__head p {
  margin: 0;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alternative);
}
.apply-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 20px;
}
.apply-form__field { display: flex; flex-direction: column; gap: 6px; }
.apply-form__field--full { grid-column: 1 / -1; }
.apply-form__field > span {
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.01em;
}
.apply-form__field > span small {
  font-weight: 500;
  color: var(--color-label-alternative);
  margin-left: 4px;
}
.apply-form__field em { color: var(--brand-cta); font-style: normal; margin-left: 2px; }
.apply-form__field input,
.apply-form__field textarea {
  appearance: none;
  border: 1px solid var(--color-line);
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-strong);
  outline: none;
  letter-spacing: -0.01em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.apply-form__field input:focus,
.apply-form__field textarea:focus { border-color: var(--brand-cta); }
.apply-form__field textarea { resize: vertical; min-height: 100px; }
.apply-form__file input[type="file"] {
  padding: 10px;
  background: #fff;
  cursor: pointer;
}
.apply-form__agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0 20px;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-neutral);
  line-height: 1.6;
}
.apply-form__agree input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.apply-form__err {
  padding: 10px 14px;
  background: #FDECEA;
  color: #8E1F15;
  border: 1px solid #E94335;
  border-radius: 8px;
  font-size: calc(15px * var(--fs));
  font-weight: 600;
  margin-bottom: 16px;
}
.apply-form__actions { display: flex; justify-content: flex-end; }
.apply-form__submit {
  appearance: none;
  border: 0;
  background: var(--brand-cta);
  color: #fff;
  padding: 14px 36px;
  border-radius: 999px;
  font: inherit;
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .12s ease;
}
.apply-form__submit:hover { background: var(--brand-cta-hover); }
.apply-form__submit:disabled { background: var(--color-line); cursor: not-allowed; }

.apply-form--done {
  text-align: center;
  padding: 48px 32px;
}
.apply-form__done-ico { font-size: 48px; margin-bottom: 16px; }
.apply-form--done h3 {
  margin: 0 0 8px;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
}
.apply-form--done p {
  margin: 0;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-alternative);
  line-height: 1.7;
}

@media (max-width: 600px) {
  /* 모바일 — 폼 좌우 패딩 축소 + 필드 width 100% 강제 */
  .apply-form { padding: 20px 14px; box-sizing: border-box; max-width: 100%; }
  .apply-form__grid { grid-template-columns: 1fr; gap: 14px; }
  .apply-form__field { min-width: 0; }
  /* file input 도 폭 초과 방지 */
  .apply-form__file input[type="file"] { max-width: 100%; box-sizing: border-box; }
}

html[data-dark='true'] .apply-form { background: rgba(60,110,180,0.10); border-color: rgba(120,170,230,0.38); }
html[data-dark='true'] .apply-form__field input,
html[data-dark='true'] .apply-form__field textarea { background: var(--color-bg-elev); color: var(--color-label-strong); border-color: var(--color-line); }
html[data-dark='true'] .apply-closed { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .recruit-status--ongoing { background: rgba(40,180,80,0.15); color: #5ED485; }
html[data-dark='true'] .recruit-status--closing { background: rgba(220,150,40,0.18); color: #F2C36B; }
html[data-dark='true'] .recruit-status--closed  { background: rgba(180,190,210,0.12); color: var(--color-label-alternative); }

/* 관리자 — recruit 전용 필드 박스 */
.adm-notice__recruit-box {
  border: 1px solid var(--color-line);
  background: #f7faff;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.adm-notice__recruit-h {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-cta);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
html[data-dark='true'] .adm-notice__recruit-box { background: rgba(60,110,180,0.08); border-color: var(--color-line); }

/* ───────── 관리자 — 채용 지원자 관리 ───────── */
.adm-apps__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.adm-apps__summary {
  display: inline-flex; align-items: center; gap: 10px;
  margin: -6px 0 16px;
  padding: 10px 14px;
  background: #f5f9ff;
  border: 1px solid rgba(44,95,160,0.20);
  border-radius: 10px;
  font-size: 14px;
  color: var(--color-label-strong);
}
.adm-apps__summary b { font-weight: 800; color: var(--brand-cta, #0066ff); font-feature-settings: 'tnum'; }
.adm-apps__tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-apps__tab {
  appearance: none;
  border: 1px solid var(--color-line);
  background: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-label-neutral);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.adm-apps__tab:hover { background: var(--color-bg-alt); }
.adm-apps__tab--on { background: var(--brand-cta); color: #fff; border-color: var(--brand-cta); }
.adm-apps__tab-count {
  background: rgba(0,0,0,0.08);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.adm-apps__tab--on .adm-apps__tab-count { background: rgba(255,255,255,0.25); color: #fff; }

.adm-apps__job-filter { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.adm-apps__job-filter label { font-weight: 700; color: var(--color-label-neutral); }
.adm-apps__job-filter select {
  appearance: none;
  border: 1px solid var(--color-line);
  background: #fff;
  border-radius: 8px;
  padding: 8px 28px 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--color-label-strong);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-label-alternative) 50%), linear-gradient(135deg, var(--color-label-alternative) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.adm-apps__loading, .adm-apps__empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--color-label-alternative);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
}

.adm-apps__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}
.adm-apps__table th {
  background: var(--color-bg-alt);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-label-strong);
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  letter-spacing: -0.01em;
}
.adm-apps__table td {
  padding: 12px 14px;
  vertical-align: middle;
  color: var(--color-label-strong);
  border-bottom: 1px solid var(--color-line);
  letter-spacing: -0.01em;
}
.adm-apps__table tr:last-child td { border-bottom: 0; }
.adm-apps__table tr:hover td { background: #f9fbff; }
.adm-apps__row--on td { background: #eef5ff !important; }
html[data-dark="true"] .adm-apps__row--on td { background: rgba(51,133,255,0.22) !important; color: var(--color-label-strong, #f0f1f3) !important; }

.adm-apps__status-select {
  appearance: none;
  border: 1px solid;
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
/* 다크모드: 인라인 style 로 라이트 파스텔 배경(E6EEFC, EFE7FA 등) + 진한 텍스트
   색이 들어가는데 다크 배경 위에서 흰 알약처럼 튀어 보임. 배경/테두리를
   다크 표면으로 통일하고 inline 텍스트 색은 살려 상태 구분 유지. */
html[data-dark='true'] .adm-apps__status-select {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.18) !important;
  filter: brightness(1.25);
}
.adm-apps__name-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--brand-cta);
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.adm-apps__name-btn:hover { text-decoration: underline; }
.adm-apps__job { color: var(--color-label-neutral); font-size: 13px; }
.adm-apps__job small { display: block; color: var(--color-label-alternative); font-size: 12px; margin-top: 2px; }
.adm-apps__table a { color: var(--brand-cta); text-decoration: none; }
.adm-apps__table a:hover { text-decoration: underline; }

.adm-apps__btn {
  appearance: none;
  border: 1px solid var(--color-line);
  background: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-label-strong);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.adm-apps__btn:hover { background: var(--color-bg-alt); }
.adm-apps__btn--danger { color: #8E1F15; border-color: #FFC8BF; }
.adm-apps__btn--danger:hover { background: #FFE4E0; }

.adm-apps__detail {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: 24px;
}
.adm-apps__detail header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}
.adm-apps__detail header strong { font-size: 17px; color: var(--color-label-strong); }
.adm-apps__detail header button {
  appearance: none;
  border: 0;
  background: var(--color-bg-alt);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}
.adm-apps__detail dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin: 0;
}
.adm-apps__detail dl > div { display: flex; flex-direction: column; gap: 4px; }
.adm-apps__detail dt { font-size: 13px; font-weight: 700; color: var(--color-label-alternative); letter-spacing: -0.01em; }
.adm-apps__detail dd { margin: 0; font-size: 14px; color: var(--color-label-strong); }
.adm-apps__detail-msg { grid-column: 1 / -1; }
.adm-apps__detail-msg dd { white-space: pre-wrap; line-height: 1.6; padding: 12px; background: var(--color-bg-alt); border-radius: 8px; }

@media (max-width: 720px) {
  .adm-apps__bar { flex-direction: column; align-items: stretch; gap: 10px; }
  /* 탭이 wrap 으로 여러 줄 차지 → 가로 스크롤 */
  .adm-apps__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .adm-apps__tabs::-webkit-scrollbar { display: none; }
  .adm-apps__tab { flex-shrink: 0; white-space: nowrap; }
  /* 테이블 10 컬럼 → 화면 폭 초과 시 한글이 음절 단위로 세로 줄바꿈됨.
     table 자체를 block 으로 만들어 가로 스크롤, 셀은 nowrap. */
  .adm-apps__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 13px;
  }
  .adm-apps__table th, .adm-apps__table td {
    padding: 8px 10px;
    white-space: nowrap;
  }
  .adm-apps__detail dl { grid-template-columns: 1fr; }
  .adm-apps__detail { padding: 16px; }
}

html[data-dark='true'] .adm-apps__tab,
html[data-dark='true'] .adm-apps__job-filter select,
html[data-dark='true'] .adm-apps__table,
html[data-dark='true'] .adm-apps__btn,
html[data-dark='true'] .adm-apps__detail,
html[data-dark='true'] .adm-apps__loading,
html[data-dark='true'] .adm-apps__empty { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .adm-apps__table th { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .adm-apps__table tr:hover td { background: rgba(60,110,180,0.12); }

/* ───────── 복지타운에 바란다 (Voice 게시판) ───────── */
.voice-notice {
  background: #FFF8E6;
  border: 1px solid #F2D77A;
  border-left: 4px solid #D4A017;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 14px;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-strong);
  line-height: 1.6;
  letter-spacing: -0.015em;
}
.voice-notice__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.voice-notice__head strong { font-size: calc(18px * var(--fs)); font-weight: 700; color: #8E5A00; }
.voice-notice__ico { font-size: 18px; }
.voice-notice ul {
  margin: 0;
  padding-left: 22px;
}
.voice-notice ul ul {
  margin: 2px 0 4px;
  padding-left: 16px;
  list-style-type: '·  ';
  font-size: calc(16px * var(--fs));
  color: var(--color-label-neutral);
}
.voice-notice li { margin-bottom: 1px; }
.voice-notice strong { color: var(--color-label-strong); font-weight: 700; }
html[data-dark='true'] .voice-notice { background: rgba(220,150,40,0.10); border-color: rgba(220,150,40,0.35); color: var(--color-label-strong); }
html[data-dark='true'] .voice-notice__head strong { color: #F2C36B; }

.voice-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #f5f9ff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
}
.voice-bar__lead {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-neutral);
  line-height: 1.65;
  letter-spacing: -0.01em;
}
.voice-bar__lead strong { color: var(--color-label-strong); }
.voice-bar__write {
  appearance: none;
  border: 0;
  background: var(--brand-cta);
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  font: inherit;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease;
}
.voice-bar__write:hover { background: var(--brand-cta-hover); }

.voice-lock { font-size: 13px; opacity: 0.7; }
.voice-replied {
  display: inline-block;
  padding: 3px 10px;
  background: #E6F6EC;
  color: #1B7F3A;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.voice-pending {
  display: inline-block;
  padding: 3px 10px;
  background: #FFF1E0;
  color: #B5781A;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* 작성 모달 — apply-form 패턴 약간 변형 */
.voice-write { max-width: 720px; }
.voice-write__title { font-size: calc(20px * var(--fs)); font-weight: 800; color: var(--color-label-strong); }
.voice-write__form { padding-top: 8px; }
.voice-write__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.voice-write__field > span {
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.01em;
}
.voice-write__field em { color: var(--brand-cta); font-style: normal; margin-left: 2px; }
.voice-write__field input,
.voice-write__field textarea {
  appearance: none;
  border: 1px solid var(--color-line);
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-strong);
  outline: none;
  letter-spacing: -0.01em;
}
.voice-write__field input:focus,
.voice-write__field textarea:focus { border-color: var(--brand-cta); }
.voice-write__field textarea { resize: vertical; min-height: 140px; line-height: 1.7; }
.voice-write__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.voice-write__grid .voice-write__field { margin-bottom: 0; }
.voice-write__field--full { grid-column: 1 / -1; }
.voice-write__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}

/* 비밀번호 입력 */
.voice-pw {
  text-align: center;
  padding: 60px 32px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.voice-pw__ico { font-size: 40px; margin-bottom: 8px; }
.voice-pw h3 {
  margin: 0;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
}
.voice-pw p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-alternative);
}
.voice-pw input {
  appearance: none;
  border: 1px solid var(--color-line);
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  font: inherit;
  font-size: calc(18px * var(--fs));
  width: 100%;
  max-width: 320px;
  text-align: center;
  letter-spacing: 0.3em;
  outline: none;
}
.voice-pw input:focus { border-color: var(--brand-cta); }
.voice-pw__err {
  font-size: calc(15px * var(--fs));
  color: #8E1F15;
  background: #FDECEA;
  padding: 8px 14px;
  border-radius: 8px;
}

/* 본문 */
.voice-body {
  margin: 28px 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: calc(17px * var(--fs));
  color: var(--color-label-strong);
  line-height: 1.75;
  letter-spacing: -0.01em;
}

/* 관리자 답변 */
.voice-reply {
  margin-top: 28px;
  padding: 24px;
  background: #f5f9ff;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--brand-cta);
  border-radius: 12px;
}
.voice-reply header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.voice-reply header strong { font-size: calc(17px * var(--fs)); color: var(--brand-cta); }
.voice-reply header time { font-size: 13px; color: var(--color-label-alternative); }
.voice-reply__body {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: calc(17px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-strong);
}
.voice-reply--edit { background: #FFF8F0; border-left-color: #B5781A; }
.voice-reply--edit textarea {
  width: 100%;
  appearance: none;
  border: 1px solid var(--color-line);
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: calc(17px * var(--fs));
  resize: vertical;
  min-height: 100px;
  margin-top: 8px;
  outline: none;
  box-sizing: border-box;
}
.voice-reply__msg {
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-label-neutral);
}
.voice-reply__actions { display: flex; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 600px) {
  .voice-bar { flex-direction: column; align-items: stretch; }
  .voice-write__grid { grid-template-columns: 1fr; }
}

html[data-dark='true'] .voice-bar { background: rgba(60,110,180,0.08); border-color: var(--color-line); }
html[data-dark='true'] .voice-body { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .voice-reply { background: rgba(60,110,180,0.08); border-color: var(--color-line); }
html[data-dark='true'] .voice-reply--edit { background: rgba(220,150,40,0.08); }
html[data-dark='true'] .voice-pw { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .voice-write__field input,
html[data-dark='true'] .voice-write__field textarea { background: var(--color-bg-elev); color: var(--color-label-strong); border-color: var(--color-line); }

.voice-detail__tools {
  display: flex;
  justify-content: flex-end;
  margin: 16px 0 -12px;
}
.voice-edit-btn {
  appearance: none;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  color: var(--color-label-strong);
  padding: 6px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.voice-edit-btn:hover { background: #fff; border-color: var(--brand-cta); color: var(--brand-cta); }
.voice-edit-btn--danger:hover { border-color: #E94335; color: #8E1F15; background: #FFE4E0; }
.voice-detail__tools { gap: 8px; }
.voice-write__note {
  margin: 8px 0 16px;
  padding: 10px 14px;
  background: #f5f9ff;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-label-alternative);
  border-left: 3px solid var(--brand-cta);
}
html[data-dark='true'] .voice-write__note { background: rgba(60,110,180,0.08); }

/* ───────── FAQ (.faq__) ───────── */
.faq-sec { padding-top: 24px; }
.faq__search {
  position: relative;
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
  padding: 0 14px;
  margin: 8px 0 18px;
  transition: border-color .12s ease;
}
.faq__search:focus-within { border-color: var(--brand-cta, #0066ff); }
.faq__search svg { color: var(--color-label-alt); flex-shrink: 0; }
.faq__search input {
  flex: 1;
  border: 0; outline: 0;
  padding: 14px 12px;
  background: transparent;
  font-size: calc(18px * var(--fs));
  font-weight: 500;
  color: var(--color-label-strong);
}
.faq__search input::placeholder { color: var(--color-label-alt); font-weight: 400; }
.faq__search-clear {
  border: 0; background: transparent; cursor: pointer;
  width: 28px; height: 28px;
  font-size: 22px; color: var(--color-label-alt);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.faq__search-clear:hover { background: rgba(0,0,0,0.05); }

.faq__cats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px;
}
.faq__cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 999px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  color: var(--color-label-neutral, #3a4150);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.faq__cat:hover { border-color: rgba(0,0,0,0.32); }
.faq__cat.is-active {
  background: var(--color-label-strong, #171719);
  border-color: var(--color-label-strong, #171719);
  color: #fff;
}
.faq__cat-num {
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  opacity: 0.7;
}
.faq__cat.is-active .faq__cat-num { opacity: 0.85; }

.faq__list {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  overflow: hidden;
}
.faq__item + .faq__item { border-top: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22)); }
.faq__q {
  display: grid;
  grid-template-columns: 36px 1fr 32px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.faq__q:hover { background: #fafbfd; }
.faq__item.is-open .faq__q { background: #f3f5f9; }
.faq__q-mark {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-cta, #0066ff);
  color: #fff;
  font-weight: 800; font-size: calc(17px * var(--fs));
  letter-spacing: -0.02em;
}
.faq__q-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.faq__q-cat {
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--color-label-alt);
  letter-spacing: 0.04em;
}
.faq__q-text {
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong, #171719);
  letter-spacing: -0.02em;
  line-height: 1.55;
}
.faq__q-toggle {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-label-alt);
  transition: transform .15s ease, color .15s ease;
}
.faq__item.is-open .faq__q-toggle { transform: rotate(180deg); color: var(--color-label-strong); }

.faq__a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 4px 20px 20px 20px;
  background: #f3f5f9;
}
.faq__a-mark {
  display: flex; align-items: flex-start; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--brand-cta, #0066ff);
  color: var(--brand-cta, #0066ff);
  font-weight: 800; font-size: calc(17px * var(--fs));
  line-height: 32px;
}
.faq__a p {
  margin: 6px 0 0;
  font-size: calc(18px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral, #3a4150);
  white-space: pre-wrap;
  word-break: keep-all;
}

.faq__empty {
  padding: 40px 20px;
  text-align: center;
  background: #fafbfd;
  border: 1px dashed var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
  margin: 8px 0 24px;
}
.faq__empty strong {
  display: block;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  margin-bottom: 6px;
}
.faq__empty p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-alt);
}

html[data-dark='true'] .faq__search { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .faq__cat { background: var(--color-bg-elev); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark='true'] .faq__cat.is-active { background: #fff; border-color: #fff; color: #171719; }
html[data-dark='true'] .faq__list { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .faq__item + .faq__item { border-top-color: var(--color-line); }
html[data-dark='true'] .faq__q:hover { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .faq__item.is-open .faq__q,
html[data-dark='true'] .faq__a { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .faq__a-mark { background: var(--color-bg-elev); }
html[data-dark='true'] .faq__empty { background: rgba(255,255,255,0.03); border-color: var(--color-line); }

/* 모바일 */
@media (max-width: 720px) {
  .faq__q { grid-template-columns: 32px 1fr 28px; gap: 10px; padding: 14px 14px; }
  .faq__q-mark, .faq__a-mark { width: 32px; height: 32px; font-size: calc(15px * var(--fs)); }
  .faq__a { grid-template-columns: 32px 1fr; gap: 10px; padding: 4px 14px 16px 14px; }
}

/* ───────── 자원봉사 모집 (.vol__) ───────── */
.vol-sec { padding-top: 24px; }
.vol__intro {
  padding: 24px 26px;
  background: linear-gradient(180deg, #f7f8fb 0%, #ffffff 100%);
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 16px;
  margin: 8px 0 32px;
}
.vol__intro h2 {
  margin: 0 0 8px;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
}
.vol__intro p {
  margin: 0;
  font-size: calc(18px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral, #3a4150);
  word-break: keep-all;
}

/* 신청 대상 */
.vol__who {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 32px;
}
.vol__who li {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.vol__who li:hover {
  border-color: rgba(0,0,0,0.32);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -18px rgba(20,28,48,0.24);
}
.vol__who-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-cta, #0066ff) 9%, #fff);
  color: var(--brand-cta, #0066ff);
  margin-bottom: 6px;
}
.vol__who li strong {
  font-size: calc(18px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.vol__who li small {
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.6;
}
html[data-dark='true'] .vol__who li { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .vol__who-ico { background: rgba(122,180,236,0.12); color: #7AB4EC; }

/* 활동 절차 6단계 */
.vol__steps {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 16px 0 32px;
}
.vol__step {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  padding: 18px 16px 16px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
}
.vol__step-num {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 22px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--brand-cta, #0066ff) 9%, #fff);
  color: var(--brand-cta, #0066ff);
  border-radius: 999px;
  font-size: calc(12px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.04em;
}
.vol__step-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-cta, #0066ff) 9%, #fff);
  color: var(--brand-cta, #0066ff);
}
html[data-dark='true'] .vol__step-num,
html[data-dark='true'] .vol__step-ico { background: rgba(122,180,236,0.14); color: #7AB4EC; }
.vol__step-body { display: flex; flex-direction: column; gap: 2px; }
.vol__step-body strong {
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.vol__step-body span {
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.6;
}
.vol__step-arrow {
  position: absolute; top: 50%; right: -16px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-label-assist);
  background: #fff;
  border-radius: 50%;
  z-index: 1;
}
html[data-dark='true'] .vol__step { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .vol__step-arrow { background: var(--color-bg); }

@media (max-width: 980px) {
  .vol__steps { grid-template-columns: repeat(3, 1fr); }
  .vol__step-arrow:nth-child(n) { display: flex; }
  .vol__step:nth-child(3n) .vol__step-arrow { display: none; }
}
@media (max-width: 560px) {
  .vol__steps { grid-template-columns: repeat(2, 1fr); }
  .vol__step:nth-child(3n) .vol__step-arrow { display: flex; }
  .vol__step:nth-child(2n) .vol__step-arrow { display: none; }
}

.vol__areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 16px 0 32px;
}
.vol__area {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.vol__area::before {
  content: '';
  position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--vc, #0066ff);
}
.vol__area:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--vc, #0066ff) 40%, transparent);
  box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--vc, #0066ff) 50%, transparent);
}
.vol__area-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--vc, #0066ff) 10%, #fff);
  color: var(--vc, #0066ff);
  margin-bottom: 4px;
}
.vol__area h3 {
  margin: 0 0 2px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.vol__area p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-alt);
}
html[data-dark='true'] .vol__area-ico { background: color-mix(in srgb, var(--vc, #0066ff) 20%, var(--color-bg-deep, #1a1d21)); }

/* 봉사자 예우 */
.vol__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 16px 0 32px;
}
.vol__benefit {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px; align-items: flex-start;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
}
.vol__benefit-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-cta, #0066ff) 14%, #fff) 0%, color-mix(in srgb, var(--brand-cta, #0066ff) 6%, #fff) 100%);
  color: var(--brand-cta, #0066ff);
}
.vol__benefit h4 {
  margin: 4px 0 4px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.vol__benefit p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-alt);
  word-break: keep-all;
}
html[data-dark='true'] .vol__benefit { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .vol__benefit-ico { background: rgba(122,180,236,0.12); color: #7AB4EC; }

.vol__done-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(125,183,47,0.16);
  color: #3B6D11;
  margin: 0 auto 8px;
}
.vol__done { display: flex; flex-direction: column; align-items: center; }

.vol__note {
  padding: 16px 20px;
  border-radius: 12px;
  margin: 0 0 32px;
}
.vol__note--info {
  background: #f5f9ff;
  border: 1px solid rgba(60, 110, 180, 0.22);
}
.vol__note strong {
  display: block;
  font-size: calc(17px * var(--fs));
  font-weight: 800;
  color: #2c5fa0;
  margin-bottom: 4px;
}
.vol__note p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral, #3a4150);
}
.vol__note p b { font-weight: 700; color: var(--color-label-strong); }

.vol__form {
  display: flex; flex-direction: column;
  gap: 16px;
  padding: 26px 28px 24px;
  background: #eef5f0;            /* 구분감 강화 — 흰색 → 봉사 톤의 옅은 그린 틴트 */
  border: 1px solid #cce0d3;      /* 테두리도 또렷하게 (그린 그레이) */
  border-radius: 16px;
  margin: 8px auto 28px;
  max-width: 720px;
  width: 100%;
}

/* SectionHeader 소제목(em) — vol/don/svc/svco 섹션 공통 (본문 폭 맞춤·위계 분리) */
.vol-sec .grt__title em,
.don-sec .grt__title em,
.svc-sec .grt__title em,
.svco2 .grt__title em {
  display: inline-block;
  max-width: 760px;
  margin-top: 10px;
  font-size: clamp(17px, 1.7vw, 19px);
  font-weight: 500;
  font-style: normal;
  color: var(--color-label-neutral, #3a4150);
  letter-spacing: -0.015em;
  line-height: 1.65;
  word-break: keep-all;
}
.vol-sec .grt__title em::after,
.don-sec .grt__title em::after,
.svc-sec .grt__title em::after,
.svco2 .grt__title em::after { display: none; }

/* 신청서 제출 — 큰 강조 버튼 */
.vol__submit {
  width: 100%;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.01em;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px -10px rgba(0, 102, 255, 0.55);
}
.vol__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.vol__actions { display: flex; justify-content: stretch; margin-top: 8px; }
.vol__row { display: grid; gap: 16px; }
.vol__row--2 { grid-template-columns: 1fr 1fr; }
.vol__field { display: flex; flex-direction: column; gap: 6px; }
.vol__label {
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.01em;
}
.vol__label em { color: #E94335; font-style: normal; margin-left: 2px; }
.vol__field input[type="text"],
.vol__field input[type="tel"],
.vol__field input[type="email"],
.vol__field textarea,
.vol__etc {
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 10px;
  font-size: calc(17px * var(--fs));
  font-family: inherit;
  color: var(--color-label-strong);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.vol__field input:focus,
.vol__field textarea:focus,
.vol__etc:focus {
  outline: 0;
  border-color: var(--brand-cta, #0066ff);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.12);
}
.vol__field textarea { resize: vertical; min-height: 100px; line-height: 1.65; }
.vol__etc { margin-top: 8px; }

.vol__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.vol__check {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 10px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.vol__check input { accent-color: var(--vc, #0066ff); width: 16px; height: 16px; flex-shrink: 0; }
.vol__check:hover { border-color: var(--vc, #0066ff); }
.vol__check.is-checked {
  background: color-mix(in srgb, var(--vc, #0066ff) 8%, #fff);
  border-color: var(--vc, #0066ff);
  color: var(--vc, #0066ff);
}

.vol__agree {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: #fafbfd;
  border-radius: 10px;
  font-size: calc(16px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
  cursor: pointer;
}
.vol__agree input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-cta, #0066ff); flex-shrink: 0; }

.vol__err {
  margin: 0;
  padding: 10px 14px;
  background: #fdecea;
  border-radius: 8px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  color: #b32314;
}

.vol__done {
  padding: 30px 26px;
  background: #f0f9f0;
  border: 1px solid rgba(125,183,47,0.36);
  border-radius: 14px;
  text-align: center;
  margin: 8px 0 28px;
}
.vol__done strong {
  display: block;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: #3B6D11;
  margin-bottom: 6px;
}
.vol__done p {
  margin: 0 0 16px;
  font-size: calc(17px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
}

html[data-dark='true'] .vol__intro { background: rgba(255,255,255,0.03); border-color: var(--color-line); }
html[data-dark='true'] .vol__area { background: var(--color-bg-elev); border-color: var(--color-line); border-left-color: var(--vc); }
html[data-dark='true'] .vol__note--info { background: rgba(60,110,180,0.08); border-color: rgba(60,110,180,0.28); }
html[data-dark='true'] .vol__form { background: var(--color-bg-elev); border-color: rgba(120,200,150,0.34); }
html[data-dark='true'] .vol__field input,
html[data-dark='true'] .vol__field textarea,
html[data-dark='true'] .vol__etc { background: var(--color-bg-deep, #1a1d21); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark='true'] .vol__check { background: var(--color-bg-deep, #1a1d21); border-color: var(--color-line); color: var(--color-label-strong); }
/* 다크모드 — 선택된 체크박스 카드 명시 강조 (specificity 보강 + 가독성 강화) */
html[data-dark='true'] .vol__check.is-checked {
  background: rgba(0, 102, 255, 0.20) !important;
  border-color: #6fb0ff !important;
  color: #6fb0ff !important;
}
html[data-dark='true'] .vol__check:hover:not(.is-checked) {
  border-color: #6fb0ff !important;
  color: #b3d2ff !important;
}
html[data-dark='true'] .vol__agree { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .vol__done { background: rgba(125,183,47,0.10); border-color: rgba(125,183,47,0.32); }

@media (max-width: 720px) {
  .vol__row--2 { grid-template-columns: 1fr; }
  .vol__form { padding: 20px 18px; }
  .vol__intro { padding: 20px 18px; }
}

/* ───────── 후원 안내·신청 (.don__) ───────── */
.don-sec { padding-top: 24px; }
.don-sec .grt__title em {
  display: inline-block;
  margin-top: 10px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  font-style: normal;
  color: var(--color-label-neutral, #3a4150);
  letter-spacing: -0.015em;
  line-height: 1.5;
}
.don-sec .grt__title em::after { display: none; }

/* === 후원/자원봉사 페이지 대표 이미지 ===
   잘림 없이 이미지 원본 비율 그대로 표시. 최대 1200px 로 가운데 정렬. */
.don__hero-img,
.vol__hero-img {
  margin: 0 auto 28px;
  max-width: 1200px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-bg-alt, #f4f7fc);
  box-shadow: 0 12px 32px -16px rgba(20,28,48,0.20);
}
.don__hero-img img,
.vol__hero-img img {
  display: block;
  width: 100%;
  height: auto;       /* 원본 비율 유지 */
  object-fit: contain;
}
html[data-dark='true'] .don__hero-img,
html[data-dark='true'] .vol__hero-img {
  background: var(--color-bg-elev, #1f2329);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.6);
}
@media (max-width: 720px) {
  .don__hero-img,
  .vol__hero-img { margin: 0 0 20px; border-radius: 14px; }
}

.don__intro {
  padding: 24px 26px;
  background: linear-gradient(180deg, #fdf8f0 0%, #ffffff 100%);
  border: 1px solid rgba(181,120,26,0.20);
  border-radius: 16px;
  margin: 8px 0 32px;
}
.don__intro h2 {
  margin: 0 0 8px;
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.025em;
}
.don__intro p {
  margin: 0;
  font-size: calc(18px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral, #3a4150);
  word-break: keep-all;
}
html[data-dark='true'] .don__intro { background: rgba(181,120,26,0.06); border-color: rgba(181,120,26,0.28); }

/* 사용처 */
.don__usage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 16px 0 32px;
}
.don__usage-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px; align-items: flex-start;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
}
.don__usage-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, #B5781A 14%, #fff) 0%, color-mix(in srgb, #B5781A 6%, #fff) 100%);
  color: #B5781A;
}
.don__usage-card h4 {
  margin: 4px 0 4px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.don__usage-card p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-alt);
  word-break: keep-all;
}
html[data-dark='true'] .don__usage-card { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .don__usage-ico { background: rgba(181,120,26,0.16); color: #E0AA52; }

/* 후원 방법 */
.don__methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 32px;
}
.don__method {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 20px 20px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 14px;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.don__method:hover {
  border-color: rgba(181,120,26,0.40);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -18px rgba(181,120,26,0.36);
}
.don__method-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, #B5781A 10%, #fff);
  color: #B5781A;
  margin-bottom: 4px;
}
.don__method h3 {
  margin: 0 0 2px;
  font-size: calc(19px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.don__method p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-alt);
  word-break: keep-all;
}
html[data-dark='true'] .don__method { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .don__method-ico { background: rgba(181,120,26,0.16); color: #E0AA52; }

/* 후원 계좌 */
.don__account {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 26px 28px;
  background: linear-gradient(135deg, #1d3868 0%, #2c5fa0 100%);
  border-radius: 16px;
  margin: 16px 0 32px;
  color: #fff;
  box-shadow: 0 12px 32px -16px rgba(29,56,104,0.45);
}
.don__account-main {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.don__account-label {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.don__account-bank {
  font-size: calc(17px * var(--fs));
  font-weight: 700;
  letter-spacing: -0.015em;
  opacity: 0.9;
}
.don__account-number {
  font-size: calc(28px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  line-height: 1.15;
}
.don__account-holder {
  font-size: calc(16px * var(--fs));
  font-weight: 500;
  opacity: 0.85;
}
.don__account-copy {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  background: #fff;
  color: #1d3868;
  border: 0;
  border-radius: 10px;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.don__account-copy:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -4px rgba(0,0,0,0.18); }
.don__account-copy:active { transform: translateY(0); }

/* 세제 혜택 */
.don__tax {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px; align-items: flex-start;
  padding: 18px 22px;
  background: #f0f6f1;
  border: 1px solid rgba(59,109,17,0.20);
  border-radius: 12px;
  margin: 0 0 32px;
}
.don__tax-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(125,183,47,0.20);
  color: #3B6D11;
}
.don__tax strong {
  display: block;
  font-size: calc(17px * var(--fs));
  font-weight: 800;
  color: #3B6D11;
  margin-bottom: 4px;
}
.don__tax p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral, #3a4150);
}
.don__tax p b { font-weight: 700; color: var(--color-label-strong); }
html[data-dark='true'] .don__tax { background: rgba(125,183,47,0.10); border-color: rgba(125,183,47,0.32); }

/* 후원 약정 폼 */
.don__form {
  display: flex; flex-direction: column;
  gap: 16px;
  padding: 26px 28px 24px;
  background: #fbf8f2;            /* 구분감 강화 — 흰색 → 후원 골드 톤의 옅은 웜 틴트 */
  border: 1px solid #e4d8c0;      /* 테두리도 또렷하게 (웜 그레이) */
  border-radius: 16px;
  margin: 8px auto 12px;
  max-width: 720px;
  width: 100%;
}
.don__row { display: grid; gap: 16px; }
.don__row--2 { grid-template-columns: 1fr 1fr; }
.don__field { display: flex; flex-direction: column; gap: 8px; }
.don__label {
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  letter-spacing: -0.01em;
}
.don__label em { color: #E94335; font-style: normal; margin-left: 2px; }
.don__field input[type="text"],
.don__field input[type="tel"],
.don__field input[type="email"],
.don__field textarea,
.don__etc {
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 10px;
  font-size: calc(17px * var(--fs));
  font-family: inherit;
  color: var(--color-label-strong);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.don__field input:focus,
.don__field textarea:focus,
.don__etc:focus {
  outline: 0;
  border-color: #B5781A;
  box-shadow: 0 0 0 3px rgba(181, 120, 26, 0.16);
}
.don__field textarea { resize: vertical; min-height: 80px; line-height: 1.65; }
.don__etc { margin-top: 4px; }

.don__radios { display: flex; flex-wrap: wrap; gap: 8px; }
.don__radio {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 10px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.don__radio input { accent-color: #B5781A; width: 16px; height: 16px; }
.don__radio:hover { border-color: #B5781A; }
.don__radio.is-on { background: color-mix(in srgb, #B5781A 8%, #fff); border-color: #B5781A; color: #8B5A11; }

.don__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.don__chip {
  padding: 10px 16px;
  background: #fff;
  border: 1.5px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 999px;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-neutral);
  cursor: pointer;
  transition: all .12s ease;
  font-feature-settings: 'tnum';
}
.don__chip--sm { font-size: calc(15px * var(--fs)); padding: 8px 12px; }
.don__chip:hover { border-color: #B5781A; color: #8B5A11; }
.don__chip.is-on { background: #B5781A; border-color: #B5781A; color: #fff; }

.don__agree {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: #fafbfd;
  border-radius: 10px;
  font-size: calc(16px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
  cursor: pointer;
}
.don__agree input { width: 18px; height: 18px; margin-top: 2px; accent-color: #B5781A; flex-shrink: 0; }

.don__hint {
  margin: 0;
  padding: 12px 14px;
  background: #f5f9ff;
  border-left: 3px solid #2c5fa0;
  border-radius: 6px;
  font-size: calc(15px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}
.don__err {
  margin: 0;
  padding: 10px 14px;
  background: #fdecea;
  border-radius: 8px;
  font-size: calc(16px * var(--fs));
  font-weight: 600;
  color: #b32314;
}

.don__actions { display: flex; margin-top: 4px; }
.don__submit {
  width: 100%;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.01em;
  font-weight: 800 !important;
  background: #B5781A !important;
  box-shadow: 0 8px 20px -10px rgba(181,120,26,0.55);
}
.don__submit:hover { background: #9A6515 !important; }
.don__submit:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.don__done {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 26px;
  background: #f0f9f0;
  border: 1px solid rgba(125,183,47,0.36);
  border-radius: 14px;
  text-align: center;
  margin: 8px auto 28px;
  max-width: 720px;
}
.don__done-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(125,183,47,0.16);
  color: #3B6D11;
  margin: 0 auto 8px;
}
.don__done strong {
  display: block;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: #3B6D11;
  margin-bottom: 6px;
}
.don__done p {
  margin: 0 0 16px;
  font-size: calc(17px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
}

/* 사무국 박스 */
.don__office {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px; align-items: center;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 12px;
  margin: 16px 0 28px;
}
.don__office-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(44,95,160,0.12);
  color: #2c5fa0;
}
.don__office strong {
  display: block;
  font-size: calc(16px * var(--fs));
  font-weight: 700;
  color: var(--color-label-strong);
  margin-bottom: 4px;
}
.don__office p {
  margin: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.7;
  color: var(--color-label-neutral);
}
.don__office a { color: var(--color-label-strong); text-decoration: none; font-weight: 600; }
.don__office a:hover { text-decoration: underline; }
html[data-dark='true'] .don__office { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .don__form { background: var(--color-bg-elev); border-color: rgba(210,170,90,0.34); }
html[data-dark='true'] .don__field input,
html[data-dark='true'] .don__field textarea,
html[data-dark='true'] .don__etc { background: var(--color-bg-deep, #1a1d21); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark='true'] .don__radio,
html[data-dark='true'] .don__chip { background: var(--color-bg-deep, #1a1d21); border-color: var(--color-line); color: var(--color-label-strong); }
/* 다크모드 — 선택된 라디오/칩 상태 명시 강조 (specificity 보강) */
html[data-dark='true'] .don__radio.is-on,
html[data-dark='true'] .don__chip.is-on {
  background: #B5781A !important;
  border-color: #B5781A !important;
  color: #fff !important;
}
html[data-dark='true'] .don__chip:hover:not(.is-on),
html[data-dark='true'] .don__radio:hover:not(.is-on) {
  border-color: #d99840 !important;
  color: #ffd58a !important;
}
html[data-dark='true'] .don__agree { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .don__done { background: rgba(125,183,47,0.10); border-color: rgba(125,183,47,0.32); }
html[data-dark='true'] .don__hint { background: rgba(44,95,160,0.10); color: var(--color-label-strong); }

@media (max-width: 720px) {
  .don__row--2 { grid-template-columns: 1fr; }
  .don__form { padding: 20px 18px; }
  .don__intro { padding: 20px 18px; }
  .don__account { padding: 22px 20px; }
  .don__account-number { font-size: calc(22px * var(--fs)); }
}


/* ─────────  전체 서비스 안내·이용 절차 (.svco__) ───────── */
.svco-sec { padding-top: 24px; word-break: keep-all; line-break: strict; }
.svco-sec h1, .svco-sec h2, .svco-sec h3, .svco-sec h4, .svco-sec h5,
.svco-sec p, .svco-sec li, .svco-sec span, .svco-sec em, .svco-sec strong, .svco-sec small,
.svco-sec a, .svco-sec button, .svco-sec div { word-break: keep-all; line-break: strict; }

/* 페이지 내 탭 */
.svco__tabs {
  display: flex; width: fit-content;
  margin: 16px auto 28px;
  padding: 4px;
  background: #f3f5f9;
  border-radius: 999px;
}
.svco__tab {
  padding: 10px 22px;
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  color: var(--color-label-neutral);
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: -0.01em;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.svco__tab:hover { color: var(--color-label-strong); }
.svco__tab--on {
  background: #fff;
  color: var(--brand-cta, #0066ff);
  box-shadow: 0 1px 2px rgba(20,28,48,0.12), 0 0 0 1px rgba(0,0,0,0.04);
}
html[data-dark="true"] .svco__tabs { background: rgba(255,255,255,0.06); }
html[data-dark="true"] .svco__tab--on { background: rgba(255,255,255,0.14); color: #fff; }

/* 사업부 그룹 */
.svco__bu { margin: 0 0 32px; }
.svco__bu-head {
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--bu-accent);
}
.svco__bu-head h3 {
  margin: 0 0 4px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.svco__bu-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bu-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bu-accent) 18%, transparent);
}
.svco__bu-head p {
  margin: 0;
  font-size: calc(14px * var(--fs));
  color: var(--color-label-alt);
}

.svco__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.svco__card {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-top: 4px solid var(--bu-accent);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.svco__card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bu-accent) 40%, transparent);
  box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--bu-accent) 40%, transparent);
}
.svco__card-eyebrow {
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
  letter-spacing: 0.04em;
}
.svco__card h4 {
  margin: 0 0 4px;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.svco__card-summary {
  margin: 0;
  font-size: calc(14px * var(--fs));
  line-height: 1.6;
  color: var(--color-label-alt);
  flex: 1;
}
.svco__card-cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
}
html[data-dark="true"] .svco__card { background: var(--color-bg-elev); border-color: var(--color-line); border-top-color: var(--bu-accent); }

/* 이용 절차 5단계 카드 */
.svco__steps {
  list-style: none; margin: 16px 0 12px; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.svco__step {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 16px 18px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 12px;
}
.svco__step-num {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  min-width: 38px; height: 26px; padding: 0 10px;
  background: color-mix(in srgb, var(--brand-cta, #0066ff) 10%, #fff);
  color: var(--brand-cta, #0066ff);
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.04em;
}
.svco__step-body { display: flex; flex-direction: column; gap: 4px; }
.svco__step-body strong {
  font-size: calc(15px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
}
.svco__step-body span {
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.55;
}
.svco__step-arrow {
  position: absolute; top: 50%; right: -12px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-label-assist);
  background: #fff;
  border-radius: 50%;
  z-index: 1;
}
@media (max-width: 980px) { .svco__steps { grid-template-columns: repeat(3, 1fr); } .svco__step:nth-child(3n) .svco__step-arrow { display: none; } }
@media (max-width: 560px) { .svco__steps { grid-template-columns: 1fr; } .svco__step-arrow { display: none; } }
html[data-dark="true"] .svco__step { background: var(--color-bg-elev); border-color: var(--color-line); }

.svco__process-note {
  margin: 16px 0 28px;
  padding: 12px 16px;
  background: #f5f9ff;
  border-left: 3px solid #2c5fa0;
  border-radius: 6px;
  font-size: calc(14px * var(--fs));
  color: var(--color-label-neutral);
}
.svco__process-note strong { font-weight: 800; color: #2c5fa0; }

/* 신청 채널 3카드 */
.svco__apply {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 32px;
}
.svco__apply-card {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 12px;
}
.svco__apply-card h4 {
  margin: 0 0 8px;
  font-size: calc(16px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
}
.svco__apply-card p {
  margin: 0;
  font-size: calc(14px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}
.svco__apply-card a { color: var(--brand-cta, #0066ff); font-weight: 700; text-decoration: none; }
.svco__apply-card a:hover { text-decoration: underline; }
html[data-dark="true"] .svco__apply-card { background: var(--color-bg-elev); border-color: var(--color-line); }

/* FAQ 재사용 (.svc__faqs 와 동일 룩) */
.svco__faqs {
  list-style: none; margin: 16px 0 24px; padding: 0;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 14px;
  overflow: hidden;
}
.svco__faqs .svc__faq-item + .svc__faq-item { border-top: 1px solid var(--color-line-normal-normal); }


/* ───────── 자립·사회참여 통합 페이지 ───────── */
.svc-combined-sec { padding-top: 16px; padding-bottom: 0; }
.svc-combined__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 0;
}
.svc-combined__tab {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 22px 24px;
  background: #fff;
  border: 2px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 16px;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}
.svc-combined__tab small {
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  color: var(--color-label-alt);
  letter-spacing: -0.01em;
}
.svc-combined__tab:hover {
  border-color: var(--bu-accent);
  transform: translateY(-2px);
}
.svc-combined__tab.is-on {
  background: color-mix(in srgb, var(--bu-accent) 8%, #fff);
  border-color: var(--bu-accent);
  box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--bu-accent) 50%, transparent);
}
.svc-combined__tab.is-on small { color: var(--bu-accent); }
@media (max-width: 720px) {
  .svc-combined__tabs { grid-template-columns: 1fr; }
  .svc-combined__tab { padding: 18px 20px; }
}
@media (max-width: 480px) {
  .svc-combined__tab { padding: 14px 16px; font-size: calc(16px * var(--fs)); }
  .svc-combined__tab small { font-size: calc(13px * var(--fs)); }
}
html[data-dark="true"] .svc-combined__tab { background: var(--color-bg-elev); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark="true"] .svc-combined__tab.is-on { background: color-mix(in srgb, var(--bu-accent) 16%, var(--color-bg-elev)); }


/* ───────── 전체 서비스 안내 v2 (.svco2__) — 이미지·카드 중심 ───────── */
.svco2 { word-break: keep-all; line-break: strict; }
.svco2 h2, .svco2 h3, .svco2 h4, .svco2 p, .svco2 li, .svco2 dt, .svco2 dd, .svco2 span, .svco2 strong, .svco2 small, .svco2 a { word-break: keep-all; line-break: strict; }

/* 1. 메인 안내 카드 — 좌 텍스트 + 우 이미지 */
.svco2__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch;
  padding: 36px;
  background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 60%, #eef4fb 100%);
  border: 1px solid rgba(44,95,160,0.15);
  border-radius: 24px;
  margin: 16px 0 24px;
  box-shadow: 0 16px 40px -28px rgba(20,28,48,0.20);
}
.svco2__main-body { display: flex; flex-direction: column; justify-content: center; padding: 8px 4px; }
.svco2__main-h {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.svco2__main-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-cta, #0066ff);
  position: relative;
}
.svco2__main-dot::after {
  content: ""; position: absolute; left: 7px; top: 10px;
  width: 4px; height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.svco2__main-lead {
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(44,95,160,0.20);
  font-size: calc(19px * var(--fs));
  line-height: 1.75;
  color: var(--color-label-neutral, #3a4150);
}
.svco2__main-lead strong { color: var(--brand-cta, #0066ff); font-weight: 700; }

.svco2__chips { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.svco2__chips > div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; }
.svco2__chips dt {
  margin: 0;
  padding: 9px 14px;
  background: linear-gradient(135deg, #1d3868, #2c5fa0);
  color: #fff;
  border-radius: 10px;
  font-size: calc(14px * var(--fs));
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  align-self: start;
}
.svco2__chips dd {
  margin: 0;
  padding: 7px 0;
  font-size: calc(17px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}
.svco2__chips dd small { display: block; margin-top: 4px; font-size: calc(14px * var(--fs)); color: var(--color-label-alt); }
.svco2__chips dd a { color: var(--brand-cta, #0066ff); font-weight: 700; text-decoration: none; }
.svco2__chips dd a:hover { text-decoration: underline; }

.svco2__main-img {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #2c5fa0, #4f8acb);
  min-height: 320px;
  box-shadow: 0 12px 32px -16px rgba(20,28,48,0.30);
}
.svco2__main-img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.svco2__main-img-fallback {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,0.85);
  font-size: calc(16px * var(--fs));
  font-weight: 700;
}
.svco2__main-img--missing img { display: none; }
.svco2__main-img--missing .svco2__main-img-fallback { display: flex; }

@media (max-width: 900px) {
  .svco2__main { grid-template-columns: 1fr; padding: 24px; }
  /* 모바일에선 4:3 비율로 — 화면 좌우 가득 채우며 사진 비율과 잘 맞음 */
  .svco2__main-img { min-height: 0; aspect-ratio: 4/3; }
}

/* 2. 운영시간 / 연락처 박스 */
.svco2__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 32px;
}
.svco2__info-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal, rgba(112,115,124,0.22));
  border-radius: 16px;
  box-shadow: 0 6px 16px -10px rgba(20,28,48,0.12);
}
.svco2__info-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eaf2fe, #d3e4fc);
  color: #2c5fa0;
  flex-shrink: 0;
}
.svco2__info-card h3 {
  margin: 0 0 8px;
  font-size: calc(17px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.01em;
}
.svco2__info-card p { margin: 0; font-size: calc(16px * var(--fs)); line-height: 1.7; color: var(--color-label-neutral); }
.svco2__info-chip {
  display: inline-block;
  min-width: 56px;
  padding: 3px 10px;
  margin-right: 6px;
  background: rgba(44,95,160,0.10);
  color: #2c5fa0;
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
}
.svco2__info-tel {
  display: inline-block;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.01em;
  text-decoration: none;
  font-feature-settings: "tnum";
}
.svco2__info-tel:hover { color: var(--brand-cta, #0066ff); }
@media (max-width: 720px) { .svco2__info { grid-template-columns: 1fr; } }
html[data-dark="true"] .svco2__info-card { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark="true"] .svco2__info-ico { background: rgba(122,180,236,0.18); color: #7AB4EC; }

/* 3. 사업부 4 카드 */
.svco2__bus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0 32px;
}
.svco2__bu-card {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-top: 4px solid var(--bu-accent);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.svco2__bu-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--bu-accent) 40%, transparent);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--bu-accent) 40%, transparent);
}
.svco2__bu-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bu-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bu-accent) 18%, transparent);
  margin-bottom: 4px;
}
.svco2__bu-card h4 {
  margin: 0 0 4px;
  font-size: calc(20px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.svco2__bu-tag {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--color-line-normal-normal);
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
  letter-spacing: -0.01em;
}
.svco2__bu-desc {
  margin: 0;
  font-size: calc(16px * var(--fs));
  color: var(--color-label-neutral, #3a4150);
  line-height: 1.7;
  flex: 1;
}
.svco2__bu-cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px;
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  color: var(--bu-accent);
}
html[data-dark="true"] .svco2__bu-card { background: var(--color-bg-elev); border-color: var(--color-line); border-top-color: var(--bu-accent); }

/* 4. 이용 절차 5단계 — 컴팩트 가로 */
.svco2__steps {
  list-style: none; margin: 16px 0 6px; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.svco2__step {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 16px 20px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 14px;
  text-align: center;
}
.svco2__step-ico {
  font-size: calc(32px * var(--fs));
  margin-bottom: 4px;
}
.svco2__step-num {
  font-size: calc(13px * var(--fs));
  font-weight: 800;
  color: var(--brand-cta, #0066ff);
  letter-spacing: 0.08em;
}
.svco2__step strong {
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  margin-bottom: 4px;
}
.svco2__step-d {
  font-size: calc(15px * var(--fs));
  color: var(--color-label-neutral, #3a4150);
  line-height: 1.6;
}
@media (max-width: 980px) { .svco2__steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .svco2__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .svco2__steps { grid-template-columns: 1fr; } }
html[data-dark="true"] .svco2__step { background: var(--color-bg-elev); border-color: var(--color-line); }

.svco2__note {
  margin: 14px 0 32px;
  padding: 14px 18px;
  background: #f5f9ff;
  border-left: 3px solid #2c5fa0;
  border-radius: 6px;
  font-size: calc(15px * var(--fs));
  line-height: 1.65;
  color: var(--color-label-neutral);
}

/* 5. 신청 채널 3박스 */
.svco2__apply {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 32px;
}
.svco2__apply article {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--color-line-normal-normal);
  border-radius: 12px;
  text-align: center;
}
.svco2__apply-ico {
  display: inline-block;
  font-size: calc(36px * var(--fs));
  margin-bottom: 8px;
}
.svco2__apply article strong {
  display: block;
  margin-bottom: 8px;
  font-size: calc(18px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
}
.svco2__apply article p { margin: 0; font-size: calc(16px * var(--fs)); color: var(--color-label-neutral); line-height: 1.7; }
.svco2__apply article a { color: var(--brand-cta, #0066ff); font-weight: 700; text-decoration: none; }
.svco2__apply article a:hover { text-decoration: underline; }
html[data-dark="true"] .svco2__apply article { background: var(--color-bg-elev); border-color: var(--color-line); }


/* 사업부 4 이미지 슬라이더 */
.svco2__slide {
  position: absolute; inset: 0;
  display: block;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease;
  pointer-events: none;
  text-decoration: none;
}
.svco2__slide--on { opacity: 1; visibility: visible; pointer-events: auto; }
.svco2__slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 슬라이드 이미지가 잘리지 않도록 contain + letterbox 배경을 옅은 회색으로.
   대상 : 24시간 긴급돌봄 · 장애인 활동지원 · 자립지원 · 사회참여 · 부모교육. */
[data-svc-id="gingupdolbom"] .svco2__main-img,
[data-svc-id="hwaldong"] .svco2__main-img,
[data-svc-id="jarip"] .svco2__main-img,
[data-svc-id="sahoechamyeo"] .svco2__main-img,
[data-svc-id="bumoyukgyo"] .svco2__main-img {
  background: #eef0f3 !important;
}
[data-svc-id="gingupdolbom"] .svco2__slide img,
[data-svc-id="hwaldong"] .svco2__slide img,
[data-svc-id="jarip"] .svco2__slide img,
[data-svc-id="sahoechamyeo"] .svco2__slide img,
[data-svc-id="bumoyukgyo"] .svco2__slide img {
  object-fit: contain;
  object-position: center;
}
.svco2__slide-label {
  position: absolute;
  left: 20px; top: 20px;
  padding: 8px 18px;
  color: #fff;
  border-radius: 999px;
  font-size: calc(14px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.01em;
  z-index: 2;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.30);
}
.svco2__slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 0;
  border-radius: 50%;
  color: var(--color-label-strong, #14181f);
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: background .15s ease, transform .15s ease;
}
.svco2__slide-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.svco2__slide-nav--prev { left: 14px; }
.svco2__slide-nav--next { right: 14px; }
/* 다크모드 — 버튼 배경이 흰색이라 var(--color-label-strong) 가 #fff 되면 화살표 안 보임 */
html[data-dark='true'] .svco2__slide-nav {
  background: rgba(255,255,255,0.96);
  color: #14181f;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
html[data-dark='true'] .svco2__slide-nav:hover { background: #fff; }
.svco2__slide-dots {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 3;
  padding: 6px 12px;
  background: rgba(0,0,0,0.35);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.svco2__slide-dot {
  width: 8px; height: 8px;
  border: 0; padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.svco2__slide-dot--on { width: 22px; border-radius: 999px; background: #fff; }
@media (max-width: 720px) {
  .svco2__slide-nav { width: 36px; height: 36px; }
  .svco2__slide-label { font-size: calc(13px * var(--fs)); padding: 6px 14px; left: 14px; top: 14px; }
  /* 카드 padding 축소 */
  .svco2__info-card,
  .svco2__bu-card { padding: 18px 20px; }
  /* chips 라벨 폭 축소 */
  .svco2__chips > div { grid-template-columns: 80px 1fr; }
  /* 모바일 슬라이더 이미지 — 컨테이너 4:3 + cover 로 좌우 빈여백 제거.
     사진 일부가 살짝 잘려도 화면을 가득 채워 이미지가 크게 보이도록. */
  .svco2__slide img { object-fit: cover; }

  /* ▼ 슬라이더 풀-블리드 (뷰포트 가로 전체 사용)
     .svco2__main 의 패딩과 .wt-container 의 패딩을 동시에 벗어나
     사용자 화면 좌우 끝까지 이미지가 닿도록 강제. */
  .svco2__main {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 12px 0 20px;
    gap: 16px;
  }
  /* 텍스트 본문은 가독성을 위해 좌우 안쪽 패딩 부여 */
  .svco2__main-body { padding: 4px 4px 0; }
  /* 이미지(슬라이더)는 부모 패딩을 벗어나 뷰포트 100% 사용
     break-out 패턴: width 100vw + margin-left 음수 보정으로 뷰포트 가득.
     calc(50% - 50vw) = 부모기준 50% - 뷰포트 절반 → 뷰포트 좌측 끝에 정확히 부착. */
  .svco2__main-img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 480px) {
  /* topHero 메인 카드 — ≤720 풀-블리드 규칙 유지(padding:0, 카드 외형 제거).
     min-height 만 갱신 (aspect-ratio 4:3 + width:100vw 가 우선이라 실제 효과는 미미). */
  .svco2__main { gap: 14px; }
  .svco2__main-h { font-size: calc(18px * var(--fs)); }
  .svco2__main-lead { font-size: calc(16px * var(--fs)); line-height: 1.6; }
  .svco2__main-img { min-height: 0; }
  /* chips 1열 (dt 위 · dd 아래) */
  .svco2__chips > div { grid-template-columns: 1fr; gap: 4px; }
  /* 사업·정보 카드 */
  .svco2__bu-card { padding: 14px 16px; }
  .svco2__bu-card h4 { font-size: calc(18px * var(--fs)); }
  .svco2__info-card { padding: 16px; }
  /* 5단계 절차 카드 */
  .svco2__step { padding: 16px 14px 14px; }
  .svco2__step strong { font-size: calc(16px * var(--fs)); }
  .svco2__step span,
  .svco2__step-d { font-size: calc(14px * var(--fs)); }
  .svco2__step-ico { width: 26px; height: 26px; }
  /* 신청 카드 */
  .svco2__apply article { padding: 16px 14px; }
  .svco2__apply article strong { font-size: calc(16px * var(--fs)); }
}

/* ============================================================
   다크 모드 가독성 보정 — 흰 배경/연한 색조 고정으로 인한 가독성 문제 일괄 해결
   ============================================================ */
html[data-dark='true'] .svco2__main {
  background: linear-gradient(135deg, var(--color-bg-elev, #1a1f29) 0%, var(--color-bg-alt, #161a22) 60%, var(--color-bg-elev, #1a1f29) 100%);
  border-color: rgba(122,180,236,0.18);
}
html[data-dark='true'] .svco2__main-h { color: var(--color-label-strong, #fff); }
html[data-dark='true'] .svco2__main-lead { color: var(--color-label-normal, #f3f5f9); }
html[data-dark='true'] .svco2__chips dd { color: var(--color-label-normal, #f3f5f9); }
html[data-dark='true'] .svco2__chips dd small { color: var(--color-label-alt, #b0b3bc); }

/* 페이지 인트로 정보 바 */
html[data-dark='true'] .svc__intro-stats { border-color: rgba(255,255,255,0.16); }
html[data-dark='true'] .svc__intro-stat + .svc__intro-stat::before { background: rgba(255,255,255,0.18); }
html[data-dark='true'] .svc__intro-stat dt { color: var(--color-label-alt, #b0b3bc); }
html[data-dark='true'] .svc__intro-stat dd { color: var(--color-label-strong, #fff); }

/* 카드형 컴포넌트 — 흰 배경을 다크 elev 로 */
html[data-dark='true'] .svc__benefit,
html[data-dark='true'] .svc__edu-area,
html[data-dark='true'] .svc__elig-card,
html[data-dark='true'] .svc__type-card,
html[data-dark='true'] .svc__program,
html[data-dark='true'] .svc__strength,
html[data-dark='true'] .svc__step,
html[data-dark='true'] .svc__apply-card,
html[data-dark='true'] .svc__apply-docgroup,
html[data-dark='true'] .svc__sib-card,
html[data-dark='true'] .svc__product,
html[data-dark='true'] .svc__pricing,
html[data-dark='true'] .svc__adj,
html[data-dark='true'] .svc__quick-card {
  background: var(--color-bg-elev, #1a1f29);
  border-color: var(--color-line, rgba(255,255,255,0.14));
}
html[data-dark='true'] .svc__benefit p,
html[data-dark='true'] .svc__edu-area li,
html[data-dark='true'] .svc__elig-card--in p,
html[data-dark='true'] .svc__elig-card--out li,
html[data-dark='true'] .svc__program li,
html[data-dark='true'] .svc__strength p,
html[data-dark='true'] .svc__step-body span,
html[data-dark='true'] .svc__apply-card li,
html[data-dark='true'] .svc__apply-card p,
html[data-dark='true'] .svc__apply-docgroup li,
html[data-dark='true'] .svc__sib-desc,
html[data-dark='true'] .svc__product-features li,
html[data-dark='true'] .svc__pricing td,
html[data-dark='true'] .svc__adj td {
  color: var(--color-label-normal, #f3f5f9);
}
html[data-dark='true'] .svc__benefit strong,
html[data-dark='true'] .svc__edu-area h4,
html[data-dark='true'] .svc__program h4,
html[data-dark='true'] .svc__strength strong,
html[data-dark='true'] .svc__apply-card h4,
html[data-dark='true'] .svc__sib-name,
html[data-dark='true'] .svc__product-name,
html[data-dark='true'] .svc__apply-h4,
html[data-dark='true'] .svc__step-body strong {
  color: var(--color-label-strong, #fff);
}

/* in/out 카드 색상 보강 — 어두운 배경에 옅은 색 오버레이 */
html[data-dark='true'] .svc__elig-card--in {
  background: color-mix(in srgb, #1B7F3A 22%, var(--color-bg-elev, #1a1f29));
  border-color: rgba(125,183,47,0.35);
}
html[data-dark='true'] .svc__elig-card--in strong { color: #7DB72F; }
html[data-dark='true'] .svc__elig-card--out {
  background: color-mix(in srgb, #E94335 18%, var(--color-bg-elev, #1a1f29));
  border-color: rgba(233,67,53,0.32);
}
html[data-dark='true'] .svc__elig-card--out strong { color: #FF7B6F; }
html[data-dark='true'] .svc__elig-card--out li::before { color: #FF7B6F; }

/* 정부 지원 표 / 가격 표 / 활동지원 표 */
html[data-dark='true'] .svc__gov { background: rgba(44,95,160,0.12); border-color: rgba(122,180,236,0.28); }
html[data-dark='true'] .svc__gov td { background: var(--color-bg-elev, #1a1f29); color: var(--color-label-normal, #f3f5f9); border-top-color: rgba(255,255,255,0.10); }
html[data-dark='true'] .svc__gov-tips li { color: var(--color-label-normal, #f3f5f9); }
html[data-dark='true'] .svc__pricing th,
html[data-dark='true'] .svc__adj th { background: color-mix(in srgb, var(--bu-accent) 18%, var(--color-bg-elev, #1a1f29)); color: var(--color-label-strong, #fff); }
html[data-dark='true'] .svc__pricing-note,
html[data-dark='true'] .svc__adj-note { color: var(--color-label-alt, #b0b3bc); background: rgba(255,255,255,0.04); }

/* 연락처 카드 */
html[data-dark='true'] .svc__contact-card {
  background: linear-gradient(120deg, color-mix(in srgb, var(--bu-accent) 16%, var(--color-bg-elev, #1a1f29)) 0%, var(--color-bg-elev, #1a1f29) 100%);
  border-color: rgba(255,255,255,0.10);
}
html[data-dark='true'] .svc__contact-team { color: var(--color-label-strong, #fff); }
html[data-dark='true'] .svc__contact-floor { color: var(--color-label-normal, #f3f5f9); }

/* 우선 지원 / 외부·송영 안내 */
html[data-dark='true'] .svc__priority li { background: rgba(255,255,255,0.04); color: var(--color-label-normal, #f3f5f9); }
html[data-dark='true'] .svc__external,
html[data-dark='true'] .svc__transport { background: color-mix(in srgb, var(--bu-accent) 14%, var(--color-bg-elev, #1a1f29)); }
html[data-dark='true'] .svc__external p,
html[data-dark='true'] .svc__transport p { color: var(--color-label-normal, #f3f5f9); }

/* 협력 지도 / 제품 노트 / 절차 노트 */
html[data-dark='true'] .svc__map {
  background: linear-gradient(135deg, var(--color-bg-elev, #1a1f29) 0%, rgba(122,180,236,0.08) 100%);
  border-color: var(--color-line, rgba(255,255,255,0.14));
}
html[data-dark='true'] .svc__products-note,
html[data-dark='true'] .svc__process-note { background: rgba(122,180,236,0.10); color: var(--color-label-normal, #f3f5f9); border-left-color: var(--bu-accent); }

/* 제품 이미지 영역 */
html[data-dark='true'] .svc__product-img { background: rgba(255,255,255,0.04); }
html[data-dark='true'] .svc__product-price { border-top-color: rgba(255,255,255,0.12); }

/* 같은 사업부 다른 서비스 카드 */
html[data-dark='true'] .svc__sib-card { color: var(--color-label-normal); }

/* 한 장 인포그래픽 카드 */
html[data-dark='true'] .svc__onepager { background: rgba(255,255,255,0.04); border-color: var(--color-line, rgba(255,255,255,0.14)); }
html[data-dark='true'] .svc__onepager-placeholder span { color: var(--color-label-strong); }
html[data-dark='true'] .svc__onepager-placeholder small { color: var(--color-label-alt); }

/* 프로그램 섹션 이미지 */
html[data-dark='true'] .svc__programs-img { background: var(--color-bg-elev, #1a1f29); border-color: var(--color-line, rgba(255,255,255,0.14)); }

/* 페이지 내 탭 */
html[data-dark='true'] .svc__tabs { background: rgba(255,255,255,0.06); }
html[data-dark='true'] .svc__tab { color: var(--color-label-normal); }
html[data-dark='true'] .svc__tab--on { background: rgba(255,255,255,0.14); color: #fff; }
html[data-dark='true'] .svc__tab:hover { color: #fff; }

/* SVCO2 메인 슬라이드 라벨 (이미 가독성 OK 지만 다크 환경에서도 유지) */
html[data-dark='true'] .svco2__slide-label { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }

/* 빠른 정보 카드 (서비스 대상/운영시간/정원/이용료) — bu-deep(짙은 네이비) 가 다크 배경에서 안 보임 */
html[data-dark='true'] .svc__quick-val { color: var(--color-label-strong, #fff); }
html[data-dark='true'] .svc__quick-lab { color: var(--color-label-alt, #b0b3bc); }

/* 사업 목적 카드 강조 (legal) */
html[data-dark='true'] .svc__purpose-legal { color: var(--color-label-alt, #b0b3bc) !important; }
html[data-dark='true'] .svc__purpose-legal strong { color: color-mix(in srgb, var(--bu-accent) 70%, #fff); }

/* 인트로 stat 전화번호 링크 */
html[data-dark='true'] .svc__intro-stat dd a { color: var(--color-label-strong, #fff); }

/* 서비스 이용 (provider) 카드 — 라이트 핑크 배경이 다크에서 가독성 떨어짐 */
html[data-dark='true'] .svc__apply-pcard {
  background: color-mix(in srgb, var(--bu-accent) 18%, var(--color-bg-elev, #1a1f29));
  border-color: color-mix(in srgb, var(--bu-accent) 45%, transparent);
}
html[data-dark='true'] .svc__apply-pcard strong { color: var(--bu-accent); }
html[data-dark='true'] .svc__apply-pcard p { color: var(--color-label-normal, #f3f5f9); }

/* 조직도 — lead/parts 카드 다크 대응 */
html[data-dark='true'] .orgv2-lead {
  background: color-mix(in srgb, var(--c) 22%, var(--color-bg-elev, #1a1f29));
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
}
html[data-dark='true'] .orgv2-lead__name { color: var(--color-label-strong, #fff); }
html[data-dark='true'] .orgv2-lead__name small { color: var(--color-label-alt, #b0b3bc); }
html[data-dark='true'] .orgv2-member__name { color: var(--color-label-strong, #fff); }
html[data-dark='true'] .orgv2-part {
  background: color-mix(in srgb, var(--c) 24%, var(--color-bg-elev, #1a1f29));
  color: color-mix(in srgb, var(--c) 80%, #fff);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
}
html[data-dark='true'] .orgv2-col__divider {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 4px, transparent 4px, transparent 8px);
}

/* ===== 모바일(480px 이하) 최적화 — 복지타운 소개 5개 페이지 ===== */
@media (max-width: 480px) {
  /* 1) 협동조합 소개 (.coop__) */
  .coop__intro { font-size: 17px; line-height: 1.6; }
  .coop__lead { padding: 12px 14px; font-size: 16px; }
  .coop__field { grid-template-columns: 44px 1fr; gap: 12px; }
  .coop__field-num { font-size: 26px; }
  .coop__card { padding: 18px 16px; }
  .coop__card-title { font-size: 17px; }
  .coop__card-desc { font-size: 14.5px; line-height: 1.55; }
  .coop__stat-num { font-size: 28px; }
  .coop__certs li { padding: 10px 12px; min-width: 0; }

  /* 2) 경영이념 (.msn__) */
  .msn__core-title { font-size: 18px; }
  .msn__core-body { font-size: 15.5px; line-height: 1.6; }
  .msn__value { grid-template-columns: 46px 1fr; gap: 12px; padding: 18px 14px; }
  .msn__value-num { font-size: 30px; }
  .msn__value-title { font-size: 17px; }
  .msn__value-text { font-size: 15.5px; line-height: 1.55; }
  .msn__promise { grid-template-columns: 40px 1fr; padding: 14px 14px; }
  .msn__promise-num { width: 32px; height: 32px; font-size: 14px; }

  /* 3) 연혁 (.tl, .tl__) — 연도/점/배지 겹침 해소
     연도 텍스트 컬럼(64px) 오른쪽에 세로선(72px)·점을 두어 분리하고,
     '진행 중' 배지는 연도 아래에 세로로 쌓아 가로폭 압착(세로 글자) 방지 */
  .tl__year { grid-template-columns: 64px 1fr; gap: 16px; }
  .tl::before { left: 72px; }
  .tl__dot { left: 66px; top: 7px; width: 12px; height: 12px; }
  .tl__marker { flex-direction: column; align-items: flex-start; gap: 3px; }
  .tl__year-num { font-size: 17px; }
  .tl__badge { margin-left: 0; font-size: calc(11px * var(--fs)); padding: 1px 6px; white-space: nowrap; }
  .tl__items { margin: 0; padding: 0; }
  .tl__item { grid-template-columns: 30px 1fr; }
  .tl__month { font-size: 13px; }
  .tl__text { font-size: 15px; line-height: 1.55; }

  /* 4) 조직도 (.orgv2*, .org__partners) */
  .orgv2-ceo { width: 160px; height: 160px; }
  .orgv2-ceo__name { font-size: 19px; }
  .orgv2-ceo__name-en { font-size: 12px; }
  .orgv2-ceo__role { font-size: 11px; }
  .orgv2-col { padding: 16px 14px 14px; }
  .orgv2-col__head { min-height: auto; padding-right: 44px; margin-bottom: 14px; }
  .orgv2-col__title { font-size: 17px; }
  .orgv2-crown__chip { font-size: 13px; }
  .orgv2__head h3 { font-size: 20px; }
  .org__partners { grid-template-columns: 1fr; }
  .org__partner { padding: 14px 16px; }
}


/* ===========================================================
   인사말 페이지 v2 — 처음부터 다시 작성한 깔끔한 CSS
   ===========================================================
   설계 원칙:
   - .grt 계열 레거시 룰과 완전히 분리된 네임스페이스(.grtv2__)
   - !important 없이 일반 specificity 만으로 동작
   - 모바일: wt-container 표준 패딩만 사용 (.grt 처럼 0 강제 없음)
   - 그리드 1열↔2열 한 번만 분기 (≤900px → 단일 컬럼)
   =========================================================== */

/* 데스크탑 — 360 + 1fr 2열 */
.grtv2__wrap {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .grtv2__wrap { grid-template-columns: 1fr; gap: 28px; }
}

/* === CEO 카드 === */
.grtv2__aside { min-width: 0; }
.grtv2__ceo { margin: 0 0 20px; }
.grtv2__ceo-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #eaf1f9;
  border-radius: 20px;
  overflow: hidden;
}
.grtv2__ceo-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.grtv2__ceo-cap {
  margin-top: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.grtv2__ceo-role {
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  color: var(--color-label-alt);
}
.grtv2__ceo-name {
  font-size: calc(22px * var(--fs));
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-label-strong);
}
.grtv2__values {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.grtv2__values li {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px;
  background: #f4f7fc;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  text-align: center;
}
.grtv2__values strong {
  font-size: calc(17px * var(--fs));
  font-weight: 800;
  color: var(--brand-blue, #1d3868);
}
.grtv2__values span {
  font-size: calc(12px * var(--fs));
  color: var(--color-label-alt);
}

/* === 본문 === */
.grtv2__body {
  min-width: 0;
  font-size: calc(16px * var(--fs));
  line-height: 1.85;
  color: var(--color-label-normal);
  letter-spacing: -0.01em;
}
.grtv2__body p { margin: 0 0 22px; word-break: keep-all; }
.grtv2__body strong { color: var(--color-label-strong); font-weight: 700; }
.grtv2__body mark {
  background: linear-gradient(180deg, transparent 60%, rgba(255,203,71,0.45) 60%);
  color: inherit;
  padding: 0 2px;
}
.grtv2__hello {
  font-size: calc(20px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong);
  line-height: 1.5;
  margin-bottom: 28px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}
.grtv2__hello strong { color: var(--brand-blue, #1d3868); font-weight: 800; }

.grtv2__pull {
  margin: 32px 0 !important;
  padding: 20px 22px;
  background: #f4f7fc;
  border-left: 4px solid var(--brand-blue, #1d3868);
  border-radius: 4px 12px 12px 4px;
  font-size: calc(17px * var(--fs));
  font-weight: 600;
  color: var(--color-label-strong);
  line-height: 1.65;
}
.grtv2__pull em {
  font-style: normal;
  color: var(--brand-cta, #0066ff);
  font-weight: 800;
}

.grtv2__thanks {
  font-size: calc(20px * var(--fs)) !important;
  font-weight: 700;
  color: var(--color-label-strong);
  margin: 28px 0 !important;
}

.grtv2__sign {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}
.grtv2__sign-role {
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  font-weight: 600;
}
.grtv2__sign-name {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: calc(26px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
  letter-spacing: -0.02em;
}
.grtv2__sign-stamp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 4px;
  background: #c43a2e;
  color: #fff;
  font-size: calc(14px * var(--fs));
  font-weight: 800;
  font-family: serif;
  transform: rotate(6deg);
  box-shadow: 0 2px 8px rgba(196,58,46,0.35);
}

/* === 다음 메뉴 카드 === */
.grtv2__next {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) { .grtv2__next { grid-template-columns: 1fr; } }
.grtv2__next-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: #fff;
  color: var(--color-label-strong);
  text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.grtv2__next-card:hover { transform: translateY(-2px); border-color: var(--brand-blue, #1d3868); }
.grtv2__next-eyebrow {
  font-size: calc(13px * var(--fs));
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-cta, #0066ff);
}
.grtv2__next-title {
  font-size: calc(19px * var(--fs));
  font-weight: 800;
  color: var(--color-label-strong);
}
.grtv2__next-sub {
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.55;
}
.grtv2__next-card--cta {
  background: linear-gradient(120deg, var(--brand-blue-deep, #1d3868) 0%, var(--brand-blue, #2c5fa0) 100%);
  border-color: var(--brand-blue-deep, #1d3868);
  color: #fff;
}
.grtv2__next-card--cta .grtv2__next-eyebrow { color: #FFCB47; }
.grtv2__next-card--cta .grtv2__next-title { color: #fff; }
.grtv2__next-card--cta .grtv2__next-sub { color: rgba(255,255,255,0.78); }

/* === 다크모드 === */
html[data-dark='true'] .grtv2__body { color: var(--color-label-normal); }
html[data-dark='true'] .grtv2__body strong,
html[data-dark='true'] .grtv2__hello,
html[data-dark='true'] .grtv2__thanks,
html[data-dark='true'] .grtv2__sign-name,
html[data-dark='true'] .grtv2__ceo-name,
html[data-dark='true'] .grtv2__next-title { color: var(--color-label-strong, #fff); }
html[data-dark='true'] .grtv2__pull {
  background: rgba(122,180,236,0.10);
  color: var(--color-label-strong);
  border-left-color: #6fb0ff;
}
html[data-dark='true'] .grtv2__pull em { color: #FFCB47; }
html[data-dark='true'] .grtv2__ceo-cap,
html[data-dark='true'] .grtv2__next-card {
  background: var(--color-bg-elev, #1f2329);
  border-color: rgba(255,255,255,0.10);
}
html[data-dark='true'] .grtv2__values li {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
html[data-dark='true'] .grtv2__hello { border-bottom-color: rgba(255,255,255,0.12); }
html[data-dark='true'] .grtv2__sign { border-top-color: rgba(255,255,255,0.12); }
html[data-dark='true'] .grtv2__next { border-top-color: rgba(255,255,255,0.12); }
html[data-dark='true'] .grtv2__values strong { color: #6fb0ff; }

/* === 모바일 — 단순하게: wt-container 표준 패딩 외 아무것도 안 함 === */
@media (max-width: 720px) {
  .grtv2 { padding: 32px 0 48px; }       /* wt-section 기본 68px 보다 컴팩트 */
  .grtv2__hello { font-size: calc(18px * var(--fs)); }
  .grtv2__pull { padding: 16px 18px; font-size: calc(15px * var(--fs)); }
  .grtv2__sign-name { font-size: calc(22px * var(--fs)); }
  .grtv2__thanks { font-size: calc(18px * var(--fs)) !important; }
  .grtv2__next-card { padding: 18px 18px; }
}

/* ============================================================
   사용자 페이지 게시글 본문 (.post-body) — 다크모드 인라인 스타일 강제 무력화
   ============================================================
   증상: 뉴스룸·공지사항 상세에서 본문이 하얀 블록으로 보임.
   원인: 관리자가 라이트 모드 토스트 에디터에서 작성한 글에
   인라인 style (background-color: white, color: #000 등)이 박혀 있어
   사용자 페이지 다크 모드에서도 흰 배경 + 검은 글자 그대로 노출됨.

   해결: .post-body 내부 모든 자식의 인라인 background/color 를
   다크 친화 톤으로 !important 덮어씀. (관리자 에디터에 적용한 룰의
   사용자 페이지 미러)
   ============================================================ */

/* 본문 컨테이너 자체 — 페이지 배경에 자연스럽게 녹게 */
html[data-dark='true'] .post-body {
  color: var(--color-label-normal, #d8dbde) !important;
  background: transparent !important;
}

/* ★ 핵심 — 모든 자식 요소 인라인 색/배경 무력화 */
html[data-dark='true'] .post-body * {
  background-color: transparent !important;
  color: var(--color-label-normal, #e5e7ea) !important;
}

/* 강조 요소는 별도 톤 (mark/code/blockquote/a/h1~h6) */
html[data-dark='true'] .post-body strong { color: var(--color-label-strong, #fff) !important; }
html[data-dark='true'] .post-body em { color: var(--color-label-normal, #e5e7ea) !important; }
html[data-dark='true'] .post-body mark {
  background-color: rgba(255,203,71,0.30) !important;
  color: #FFE08A !important;
}
html[data-dark='true'] .post-body code {
  background-color: rgba(255,255,255,0.08) !important;
  color: #ffd58a !important;
}
html[data-dark='true'] .post-body pre {
  background-color: #0d0f13 !important;
  color: #f1f1f3 !important;
}
html[data-dark='true'] .post-body pre code,
html[data-dark='true'] .post-body pre * {
  background-color: transparent !important;
  color: #f1f1f3 !important;
}
html[data-dark='true'] .post-body blockquote {
  background-color: rgba(122,180,236,0.08) !important;
  border-left-color: #6fb0ff !important;
}
html[data-dark='true'] .post-body blockquote * {
  color: var(--color-label-normal, #d8dbde) !important;
}
html[data-dark='true'] .post-body a,
html[data-dark='true'] .post-body a * {
  color: #6fb0ff !important;
  text-decoration: underline !important;
}
html[data-dark='true'] .post-body h1,
html[data-dark='true'] .post-body h2,
html[data-dark='true'] .post-body h3,
html[data-dark='true'] .post-body h4 {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,0.18) !important;
}
html[data-dark='true'] .post-body hr {
  border-color: rgba(255,255,255,0.18) !important;
}
/* 표 — th/td 보더 + thead 강조 */
html[data-dark='true'] .post-body table th,
html[data-dark='true'] .post-body table td {
  border-color: rgba(255,255,255,0.18) !important;
}
html[data-dark='true'] .post-body table th {
  background-color: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

/* 이미지는 그대로 (배경 처리 X — 이미지 자체는 영향 받지 않음) */
html[data-dark='true'] .post-body img {
  background-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════
   스토리 페이지 — 목록 (3×2 카드) + 상세 (대표 이미지 + 본문)
   ════════════════════════════════════════════════════════════════ */
.story-sec { padding-top: 36px; }

/* 필터 + 검색바 */
.story-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-line-normal-normal);
}
.story-filter { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.story-chip {
  appearance: none;
  border: 1px solid var(--color-line);
  background: var(--color-background-elevated-normal, #fff);
  color: var(--color-label-neutral);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: calc(14px * var(--fs));
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.story-chip:hover { color: var(--color-label-strong); border-color: var(--color-label-alternative); }
.story-chip.on { background: var(--color-primary-normal, #0066ff); color: #fff; border-color: var(--color-primary-normal, #0066ff); }
.story-search { display: inline-flex; gap: 6px; align-items: center; }
.story-search input {
  appearance: none;
  border: 1px solid var(--color-line);
  background: var(--color-background-elevated-normal, #fff);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: calc(14px * var(--fs));
  min-width: 240px;
  color: var(--color-label-strong);
}
.story-search input::placeholder { color: var(--color-label-alt); }
.story-search button {
  appearance: none;
  border: 1px solid var(--color-primary-normal, #0066ff);
  background: var(--color-primary-normal, #0066ff);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: calc(14px * var(--fs));
  font-weight: 700;
  cursor: pointer;
}

/* 카드 그리드 3×2 */
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 22px;
  margin-bottom: 40px;
}
@media (max-width: 960px)  { .story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .story-grid { grid-template-columns: 1fr; gap: 22px; } }

.story-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-16);
  background: var(--color-background-elevated-normal, #fff);
  border: 1px solid var(--color-line);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  /* width 로 고정해야 그리드 칸을 꽉 채워 모든 카드 폭이 동일.
     (max-width+margin auto 는 내용 짧은 카드가 줄어들어 폭이 제각각이 됨) */
  width: calc(100% - 10px); /* 카드 너비 10px 축소, 가운데 정렬 */
  margin: 0 auto;
}
.story-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -16px rgba(0,0,0,0.20);
  border-color: var(--color-label-alternative);
}
.story-card__cover {
  width: 100%;
  /* 4/3 (1.333) → 16/11 (1.454) — 같은 폭 기준 높이 약 8% (≈25px) 감소 */
  aspect-ratio: 16 / 11;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-alt, #f0f2f6);
  position: relative;
}
.story-card__cover-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; opacity: 0.4;
}
.story-card__body {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.story-card__tag {
  align-self: flex-start;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: -0.01em;
}
.story-card__title {
  margin: 0;
  font-size: calc(17px * var(--fs));
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--color-label-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-card__date {
  font-size: calc(13px * var(--fs));
  color: var(--color-label-alt);
  font-variant-numeric: tabular-nums;
}

/* 더보기 버튼 + 빈 상태 */
.story-more { text-align: center; margin: 16px 0 48px; }
.story-more__btn {
  appearance: none;
  border: 1.5px solid var(--color-line-strong);
  background: var(--color-background-elevated-normal, #fff);
  color: var(--color-label-strong);
  padding: 14px 36px;
  border-radius: 999px;
  font-size: calc(15px * var(--fs));
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.story-more__btn:hover { background: var(--color-bg-alt); border-color: var(--color-label-alternative); }

.story-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--color-label-alt);
  font-size: calc(15px * var(--fs));
  border: 1px dashed var(--color-line);
  border-radius: var(--r-16);
  margin: 24px 0 40px;
}
.story-empty--err { color: #8E1F15; border-color: #FFC8BF; background: #FDECEA; }
.story-back {
  appearance: none;
  border: 1px solid var(--color-line);
  background: var(--color-background-elevated-normal, #fff);
  color: var(--color-label-strong);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 600;
  cursor: pointer;
  margin-left: 12px;
}

/* 상세 페이지 */
/* 스토리 헤드라인 전용 폰트 — TheJamsil(더잠실체, 롯데 무료 / haru 웹진 제목과 동일). 제목에만 사용. */
@font-face {
  font-family: 'TheJamsil';
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/TheJamsil/TheJamsilBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.story-detail { max-width: 960px; margin: 0 auto; padding: 8px 0 60px; }
.story-detail .story-back { margin-bottom: 22px; }
.story-detail__cover {
  margin: 16px 0 28px;
  border-radius: var(--r-24);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.story-detail__cover img { width: 100%; height: auto; display: block; max-height: 540px; object-fit: cover; }
.story-detail__head {
  padding-bottom: 28px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--color-line-normal-normal);
  text-align: center;
}
.story-detail__tag {
  display: inline-block;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.story-detail__title {
  margin: 0 0 16px;
  font-family: 'TheJamsil', var(--font-sans);
  font-size: clamp(30px, 5.4vw, 56px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.035em;
  color: var(--st-accent, var(--color-label-strong));
}
/* 2색 헤드라인 — '|' 는 줄바꿈, [[텍스트]] 로 감싼 부분만 외곽선(나머지는 채움) */
.story-detail__title .ln { display: block; }
.story-detail__title .t-out {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--st-accent, #1d3868);
  text-stroke: 1.6px var(--st-accent, #1d3868);
}
.story-detail__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: calc(14px * var(--fs));
  color: var(--color-label-alt);
}
.story-detail__share { margin-top: 22px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.story-detail__body {
  font-size: calc(19px * var(--fs));
  line-height: 1.85;
  color: var(--color-label-strong);
  letter-spacing: -0.015em;
}
.story-detail__body p { margin: 0 0 1.2em; }
.story-detail__body h1, .story-detail__body h2, .story-detail__body h3 {
  margin: 1.8em 0 0.6em;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.025em;
}
.story-detail__body h1 { font-size: 1.65em; }
.story-detail__body h2 { font-size: 1.4em; }
.story-detail__body h3 { font-size: 1.2em; }
.story-detail__body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.4em auto;
  border-radius: var(--r-12);
}
.story-detail__body iframe { max-width: 100%; border-radius: var(--r-12); margin: 1.4em 0; }
.story-detail__body blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  border-left: 4px solid var(--color-primary-normal, #0066ff);
  background: var(--color-bg-alt);
  border-radius: 6px;
  color: var(--color-label-strong);
  font-style: normal;
}
.story-detail__body mark { padding: 0 4px; border-radius: 3px; }
.story-detail__body ul, .story-detail__body ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.story-detail__body li { margin: 0.4em 0; }

/* ───────────────────────────────────────────────────────────────
   스토리 스타일(haru webzine 벤치마크) — '빠른 작성' 본문용 재사용 클래스.
   래퍼 .st 에 사업부 색 modifier(.st--red/blue/green/gold/navy)를 주면
   --st-accent 가 정해지고, 형광펜/밑줄/소제목/인용이 그 색을 따른다.
   (본문은 DOMPurify 소독을 거치므로 script/style 없이 class 로만 동작)
   ─────────────────────────────────────────────────────────────── */
/* 색(테마색)은 .story-detail__body 컨테이너의 --st-accent 를 상속받는다.
   과거 본문에 남아있는 .st--* 클래스는 무시(컨테이너 테마색이 항상 우선). */

/* 부제 — 제목 아래 가운데정렬 회색 큰 글씨 */
.story-detail__body .st-sub {
  text-align: center;
  font-size: calc(21px * var(--fs));
  line-height: 1.5;
  font-weight: 700;
  color: var(--color-label-neutral);
  margin: 0 0 22px;
}
/* 바이라인(글/사진) — 가운데정렬 작은 글씨 */
.story-detail__body .st-byline {
  text-align: center;
  font-size: calc(15px * var(--fs));
  color: var(--color-label-alt);
  line-height: 1.9;
  margin: 0 0 4px;
}
.story-detail__body .st-byline b { color: var(--color-label-normal); margin-right: 4px; }
/* 점 구분(⋮) — 도입부와 본문 사이 장식 구분 */
.story-detail__body .st-dots {
  text-align: center;
  color: var(--st-accent, #1d3868);
  font-size: 26px;
  letter-spacing: 2px;
  margin: 18px 0 30px;
}
.story-detail__body .st-dots::before { content: "\22EE"; }
/* 리드문(도입) — 가운데정렬, 크고 또렷하게 */
.story-detail__body .st-lead {
  text-align: center;
  font-size: calc(20px * var(--fs));
  line-height: 1.85;
  font-weight: 600;
  color: var(--color-label-strong);
  margin: 0 auto 2.2em;
  max-width: 92%;
}
/* 형광펜 — 글자 아래쪽만 마커처럼(브랜드색 반투명). 스크롤로 보이면 칠해짐. */
.story-detail__body .st-hl {
  background-image: linear-gradient(transparent 52%, color-mix(in srgb, var(--st-accent, #1d3868) 28%, transparent) 52%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  padding: 0 2px;
  font-weight: 700;
}
/* 강조 밴드 — 솔리드 브랜드색 배경 + 흰 글씨 (핵심 문장 강조).
   기본은 전부 칠해진 상태, 스크롤로 보이면 .is-in 으로 칠해지는 애니메이션. */
.story-detail__body .st-hlb {
  background-image: linear-gradient(var(--st-accent, #1d3868), var(--st-accent, #1d3868));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  color: #fff;
  padding: 1px 7px;
  font-weight: 700;
  line-height: 1.9;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* 밑줄 강조 — 브랜드색 굵은 밑줄 */
.story-detail__body .st-ul {
  font-weight: 700;
  background-image: linear-gradient(var(--st-accent, #1d3868), var(--st-accent, #1d3868));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 3px;
  padding-bottom: 1px;
}
/* 섹션 소제목 — 글자 폭만큼 형광펜 밴드(벤치마크 톤) */
.story-detail__body .st-h {
  display: inline-block;
  font-size: calc(24px * var(--fs));
  font-weight: 800;
  line-height: 1.5;
  margin: 1.9em 0 0.7em;
  color: var(--st-accent, #1d3868);
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--st-accent, #1d3868) 20%, transparent) 58%);
  padding: 0 4px;
}
/* 이미지 + 캡션 — 거의 각진 모서리(벤치마크) */
.story-detail__body .st-figure { margin: 2em 0; }
.story-detail__body .st-figure img { width: 100%; border-radius: 6px; display: block; }
.story-detail__body .st-figure figcaption {
  text-align: center;
  font-size: calc(14px * var(--fs));
  color: var(--color-label-alt);
  margin-top: 10px;
}
/* 2단 이미지 그리드 */
.story-detail__body .st-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2em 0; }
.story-detail__body .st-grid2 img { width: 100%; border-radius: 6px; display: block; }
/* 인용구 — 장식 큰 따옴표 + 가운데정렬 + 밑줄 (시그니처) */
.story-detail__body .st-quote {
  position: relative;
  text-align: center;
  max-width: 88%;
  margin: 2.6em auto;
  padding: 30px 10px 10px;
  background: none;
  border: 0;
  font-size: calc(20px * var(--fs));
  line-height: 1.7;
  font-weight: 700;
  color: var(--st-accent, #1d3868);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--st-accent, #1d3868) 50%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.story-detail__body .st-quote::before {
  content: "\201C";
  position: absolute; top: 18px; left: 50%; transform: translate(-50%, -100%);
  font-family: Georgia, 'Times New Roman', serif; font-size: 52px; line-height: 1;
  color: color-mix(in srgb, var(--st-accent, #1d3868) 45%, transparent);
  text-decoration: none;
}
/* 팁/정보 박스 — 굵은 컬러 상단선 + 연한 배경 + 컬러 불릿 */
.story-detail__body .st-tip {
  margin: 2.2em 0;
  padding: 22px 24px;
  background: var(--color-bg-alt);
  border-top: 4px solid var(--st-accent, #1d3868);
  border-radius: 0 0 10px 10px;
}
.story-detail__body .st-tip-title {
  font-weight: 800; color: var(--st-accent, #1d3868);
  font-size: calc(18px * var(--fs)); margin: 0 0 12px;
}
.story-detail__body .st-tip ul { margin: 0; padding-left: 0; list-style: none; }
.story-detail__body .st-tip li { margin: 0.55em 0; padding-left: 16px; position: relative; }
.story-detail__body .st-tip li::before { content: "\2022"; color: var(--st-accent, #1d3868); position: absolute; left: 0; font-weight: 800; }
.story-detail__body .st-tip b, .story-detail__body .st-tip strong { color: var(--st-accent, #1d3868); }
/* 스크롤 등장 애니메이션 — 움직임 줄이기 설정 시 비활성 */
@media (prefers-reduced-motion: no-preference) {
  .story-detail__body .st-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .story-detail__body .st-reveal.is-in { opacity: 1; transform: none; }

  /* 형광펜 칠해지는 애니메이션 — 스크롤로 보이면(.is-in) 우→좌로 칠해짐(최초 1회) */
  .story-detail__body .st-hl,
  .story-detail__body .st-hlb {
    background-size: 0% 100%;
    transition: background-size .8s cubic-bezier(.33, 0, .2, 1);
  }
  .story-detail__body .st-hl.is-in,
  .story-detail__body .st-hlb.is-in { background-size: 100% 100%; }
}

/* 이전/다음 글 네비 */
.story-detail__nav {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--color-line-normal-normal);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
@media (max-width: 720px) {
  .story-detail__nav { grid-template-columns: 1fr; }
}
.story-detail__nav-btn {
  appearance: none;
  border: 1px solid var(--color-line);
  background: var(--color-background-elevated-normal, #fff);
  color: var(--color-label-strong);
  padding: 14px 18px;
  border-radius: var(--r-12);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.story-detail__nav-btn--next { text-align: right; }
.story-detail__nav-btn:hover { border-color: var(--color-label-alternative); background: var(--color-bg-alt); }
.story-detail__nav-btn--dim { opacity: 0.4; cursor: default; }
.story-detail__nav-btn--dim:hover { background: transparent; border-color: var(--color-line); }
.story-detail__nav-lab { font-size: calc(13px * var(--fs)); color: var(--color-label-alt); font-weight: 700; }
.story-detail__nav-title { font-size: calc(14px * var(--fs)); font-weight: 700; }
.story-detail__back-list {
  appearance: none;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt);
  color: var(--color-label-strong);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  cursor: pointer;
}

/* 모바일 */
@media (max-width: 720px) {
  .story-toolbar { gap: 12px; padding-bottom: 14px; margin-bottom: 20px; }
  .story-search input { min-width: 0; flex: 1; }
}

/* 다크 모드 */
html[data-dark='true'] .story-card { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .story-card__cover { background-color: rgba(255,255,255,0.04); }
html[data-dark='true'] .story-chip { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .story-search input { background: var(--color-bg-elev); border-color: var(--color-line); color: var(--color-label-strong); }
html[data-dark='true'] .story-more__btn { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .story-detail__body blockquote { background: rgba(255,255,255,0.06); }
html[data-dark='true'] .story-detail__nav-btn { background: var(--color-bg-elev); border-color: var(--color-line); }
html[data-dark='true'] .story-detail__back-list { background: rgba(255,255,255,0.06); }
/* 다크모드 '목록으로' 버튼 — 배경/글자가 흐려 잘 안 보임 → 명도 대비 강화 */
html[data-dark='true'] .story-back {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: #f3f4f6;
}
html[data-dark='true'] .story-back:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.32);
}
/* 다크모드 형광펜 가독성 — execCommand('hiliteColor') 가 만든 inline
   background-color span (노랑/핑크/하늘/연두/연보라) 위에 다크모드 흰 글자가
   올라가면 안 보임 → 배경색이 인라인으로 박힌 요소는 강제로 다크 글자. */
html[data-dark='true'] .story-detail__body [style*="background-color"],
html[data-dark='true'] .story-detail__body [style*="background:"] {
  color: #1f2937 !important;
}

/* 인쇄 시: 스크롤 등장 애니메이션(.st-reveal) 요소를 강제로 표시
   — 끝까지 스크롤하지 않아도 모든 본문·사진이 인쇄되게 (화면 동작은 그대로) */
@media print {
  .story-detail__body .st-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 스토리 본문 이미지 라이트박스 (본문 사진 클릭 시 크게 보기) */
.story-detail__body img { cursor: zoom-in; }
.story-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.story-lb__img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 6px; cursor: default; box-shadow: 0 10px 50px rgba(0,0,0,0.5); }
.story-lb__close { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.18); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.story-lb__close:hover { background: rgba(255,255,255,0.32); }
.story-lb__nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.story-lb__nav:hover { background: rgba(255,255,255,0.3); }
.story-lb__nav--prev { left: 20px; }
.story-lb__nav--next { right: 20px; }