/* ── 폰트 (curl 200 실측 CDN) ─────────────────────────── */
@font-face{font-family:'Paperlogy';font-weight:500;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:700;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:800;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2')}
@font-face{font-family:'Paperlogy';font-weight:900;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2')}

/* ── v3 토큰 (DESIGN.md 기반 · 4색 타일) ─────────────── */
:root{
  --ink:#1F1B16; --ink-70:rgba(31,27,22,.72); --ink-12:rgba(31,27,22,.12);
  --white:#FFFFFF; --paper:#F5F5F7;
  --orange:#EF6421; --orange-deep:#BE4A12;  /* deep 은 텍스트 전용. 4.5:1 위해 #D45315(4.16:1) 에서 내림 */
  --sky:#1EA3C9; --lime:#8DC33E; --tangerine:#F3941E;
  --on-ink:#FFFFFF; --on-ink-70:rgba(255,255,255,.72); --on-ink-12:rgba(255,255,255,.14);
  --font-head:'Paperlogy','Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-body:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --container:77.5rem; --gutter:clamp(1.25rem,3vw,2.5rem);
  --pad-tile:clamp(4rem,8vw,7.5rem);
  --radius:0.25rem;
  --focus:#FFD400;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}
body{font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;letter-spacing:-0.01em;color:var(--ink);background:var(--white);word-break:keep-all;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* 2톤 포커스 링: 잉크 외곽선 + 노랑 halo — 흰·잉크·주황·연두 어느 타일 위에서도 3:1 이상 확보 */
:focus-visible{outline:0.1875rem solid var(--ink);outline-offset:0.125rem;box-shadow:0 0 0 0.375rem var(--focus)}
[id]{scroll-margin-top:6rem}
.container{max-width:var(--container);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
/* 전화번호는 줄 중간에서 끊지 않는다(320px에서 "02-379-/6692"로 갈라졌다). 2026-10-01 */
.tel{white-space:nowrap}
.btn:has(.tel){flex-wrap:wrap;justify-content:center;row-gap:.35em;text-align:center}
.sr-only{position:absolute;width:0.0625rem;height:0.0625rem;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3{font-family:var(--font-head);line-height:1.12;text-wrap:balance}
.h2{font-size:clamp(2rem,3.6vw,3.25rem);font-weight:800;letter-spacing:-0.02em}
.lead{font-size:clamp(1.125rem,1.4vw,1.375rem);line-height:1.55;max-width:44ch}

/* 버튼 — 두 문법: 잉크 사각 / 주황 사각. 브랜드색 위 글자는 잉크 */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1.125rem;line-height:1;padding:1.05em 1.6em;border-radius:var(--radius);border:0.125rem solid transparent;transition:transform .15s ease,background-color .15s ease}
.btn:hover{transform:translateY(-0.0625rem)}
.btn--ink{background:var(--ink);color:var(--on-ink)}
.btn--orange{background:var(--orange);color:var(--ink)}
.btn--ghost{border-color:currentColor;background:transparent}
.btn--white{background:var(--white);color:var(--ink)}

/* ── 스킵 링크 ─────────────────────────────────────────── */
.skip-link{position:absolute;left:var(--gutter);top:-6.25rem;z-index:100;background:var(--focus);color:var(--ink);font-weight:700;padding:.75em 1.2em;border-radius:var(--radius)}
.skip-link:focus{top:0.75rem}

/* ── 헤더 [잉크] ───────────────────────────────────────── */
.header{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--on-ink);border-bottom:0.0625rem solid var(--on-ink-12)}
.header__row{display:flex;align-items:center;gap:clamp(.75rem,1.6vw,2rem);min-height:5.25rem}
/* 로고 — 로고 가이드 확정본 v1.0 (2026-09-29) 의 2줄 조합형 어두운배경 파일(images/ci/compact-dark.svg).
   파일 안에 센터명이 윤곽선으로 들어 있어 별도 글자·흰 칩을 두지 않는다(가이드 5·11쪽).
   280px 는 가이드의 화면 최소 너비, 보호여백 H/4 는 헤더 줄 높이 84px 로 확보(가이드 9·10쪽). 사용자 선택 C안 2026-09-30 */
.brand{display:flex;align-items:center;flex:none}
.brand img{width:17.5rem;height:auto;max-width:100%;display:block}
/* 320px 폰: 로고 280px + 메뉴 버튼이 안 들어가 버튼이 화면 밖(오른쪽 330px)으로 밀렸다 — 좁은 화면만 로고를 남는 폭에 맞춘다. 2026-10-01 */
@media (max-width:400px){.header .brand img{width:min(17.5rem,calc(100vw - 6.5rem))}}
.gnb{display:flex;gap:clamp(0.375rem,1vw,1.125rem);margin-inline:auto;min-width:0}
.gnb a{display:block;padding:.6em .15em;font-weight:600;font-size:.95rem;border-bottom:0.1875rem solid transparent;white-space:nowrap}
.gnb a:hover,.gnb a[aria-current]{border-bottom-color:var(--orange)}
.a11y{display:flex;align-items:center;gap:0.25rem;padding:0.25rem;border:0.0625rem solid var(--on-ink-12);border-radius:var(--radius)}
.a11y button{min-width:2.5rem;height:2.5rem;padding:0 .55em;font-weight:700;font-size:.95rem;border-radius:0.125rem;white-space:nowrap}
.a11y button:hover{background:var(--on-ink-12)}
.a11y button[aria-pressed="true"]{background:var(--tangerine);color:var(--ink)}
.a11y button:disabled{opacity:.35;cursor:default}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.header .btn{padding:.9em 1.3em;font-size:1rem;white-space:nowrap;flex:none}  /* 메뉴 7개에서 「상담 신청」이 두 줄로 눌렸다(2026-10-02) */
.header .brand,.header .a11y{flex:none}
/* 햄버거: ☰ 글리프는 폰트에 없어 안 그려질 수 있다 → CSS 막대 3줄로 폰트 독립 렌더 */
.menu-toggle{display:none;width:3rem;height:3rem;font-size:0;color:var(--on-ink)}
.menu-toggle::before{content:"";display:block;width:1.375rem;height:0.1875rem;background:currentColor;border-radius:2px;box-shadow:0 -0.4375rem 0 currentColor,0 0.4375rem 0 currentColor}
/* 2026-10-02: 상단 메뉴 7개(이동기기수리 추가)로 1100~1279px 에서 머리말이 넘쳤다 → 1279px 이하는 ☰ 메뉴 */
@media (max-width:1279px){
  .gnb,.header .btn--orange{display:none}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  .a11y{margin-left:auto}
}
@media (max-width:640px){
  .header__row{gap:0.5rem}
  /* 접근성 툴바는 슬라이드 메뉴(.mnav__a11y) 안에 복제돼 있으므로 상단바에서는 숨긴다 — 햄버거 버튼 공간 확보(모바일 내비 깨짐 방지) */
  .header .a11y{display:none}
  .menu-toggle{width:2.75rem;height:2.75rem;margin-left:auto}
}

/* ── 히어로 [사진 풀블리드 + 좌하단 그라데이션 판] ───────── */
/* 사진이 첫 화면을 가득 채우고, 글자 뒤에만 어두운 스크림을 깔아 대비를 확보한다.
   스크림은 바닥에서 강하고 위·오른쪽으로 사라져 사진은 그대로 보인다. */
.hero{position:relative;background:var(--ink);color:var(--on-ink);min-height:min(88vh,52rem);display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;position:absolute;inset:0}
/* 2026-10-01 사용자 지적 "배경이 너무 어두워 사진이 안 보인다" → 스크림을 글자 뒤(아래·왼쪽)로만 좁히고 위쪽은 사진 그대로. 대비는 글자 그림자로 보강.
   이전 값(되돌릴 때): to top .95 0% / .84 38% / .52 64% / 0 86% + to right .48 0% / 0 60% */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(18,15,11,.82) 0%,rgba(18,15,11,.58) 30%,rgba(18,15,11,.18) 52%,rgba(18,15,11,0) 66%),linear-gradient(to right,rgba(18,15,11,.45) 0%,rgba(18,15,11,.12) 45%,rgba(18,15,11,0) 62%)}
.hero__band{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.45)}
.hero__band .btn{text-shadow:none}
.hero .kicker{display:inline-block;background:rgba(18,15,11,.72);padding:.3em .7em;border-radius:var(--radius)}  /* 스크림이 옅은 높이라 자체 바탕 (실측 2.5→기준 충족) */
.hero__band{position:relative;z-index:2;width:100%;padding:clamp(7rem,16vw,12rem) 0 clamp(2rem,4vw,3.5rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.kicker{font-family:var(--font-head);font-weight:500;font-size:1.125rem;letter-spacing:.02em;color:#fff;margin-bottom:.6em}
/* 2026-10-01 사용자 선택 C안: Paperlogy 900 에서 "빚"의 ㅈ이 ㅂ에 붙어 "빛"으로 읽힘 → 메인 제목만 Pretendard 800. 이전: font-family 상속(Paperlogy), font-weight:900 */
.hero h1{font-family:var(--font-body);font-size:clamp(3rem,6vw,5.5rem);font-weight:800;letter-spacing:-0.03em;line-height:1.05}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lead{color:#fff;margin-top:1.1em}
.hero__cta{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:1.6em}
.hero__aside{border-left:0.125rem solid rgba(255,255,255,.5);padding-left:clamp(1rem,2vw,2rem);font-size:1.0625rem;color:rgba(255,255,255,.95)}
.hero__aside strong{display:block;color:#fff;font-family:var(--font-head);font-weight:700;font-size:1.25rem;margin-bottom:.3em;letter-spacing:-0.01em}
@media (max-width:860px){.hero__grid{grid-template-columns:1fr}.hero__aside{border-left:0;border-top:0.125rem solid rgba(255,255,255,.4);padding:1.25rem 0 0}}

/* ── 퀵링크 [흰] — 카드 아님, 큰 글자 + 헤어라인 ────────── */
.quick{background:var(--white)}
.quick ul{display:grid;grid-template-columns:repeat(4,1fr)}
.quick li+li{border-left:0.0625rem solid var(--ink-12)}
.quick a{display:flex;flex-direction:column;gap:.35em;padding:clamp(1.75rem,3vw,2.75rem) clamp(1.25rem,2.4vw,2.25rem);min-height:100%;transition:background-color .15s}
.quick a:hover{background:var(--paper)}
.quick a strong{font-family:var(--font-head);font-weight:700;font-size:clamp(1.35rem,1.9vw,1.75rem);letter-spacing:-0.015em;line-height:1.2;display:flex;justify-content:space-between;align-items:baseline;gap:.5em}
.quick a strong::after{content:"→" / "";font-weight:500;color:var(--orange-deep)}
.quick a span{color:var(--ink-70);font-size:1.0625rem}
/* 퀵링크 라인 아이콘(장식): 단색 stroke, aria-hidden. 이모지·일러스트 아님 */
.quick .qicon{width:2.75rem;height:2.75rem;color:var(--orange-deep);margin-bottom:.5em;flex:none}
@media (max-width:860px){.quick ul{grid-template-columns:1fr 1fr}.quick li:nth-child(3){border-left:0}.quick li:nth-child(n+3){border-top:0.0625rem solid var(--ink-12)}}
@media (max-width:480px){.quick ul{grid-template-columns:1fr}.quick li+li{border-left:0;border-top:0.0625rem solid var(--ink-12)}}

/* ── 통계 [주황 타일] ─────────────────────────────────── */
.stats{background:var(--orange);color:var(--ink);--ink-70:var(--ink);padding:var(--pad-tile) 0}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem)}
.stat b{display:block;font-family:var(--font-head);font-weight:900;font-size:clamp(4rem,8vw,7.5rem);line-height:.95;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.stat b small{font-size:.38em;font-weight:800;letter-spacing:-0.01em;margin-left:.08em}
.stat span{display:block;margin-top:.9em;font-weight:600;font-size:1.0625rem;color:var(--ink);padding-top:.7em;border-top:0.125rem solid var(--ink)}
@media (max-width:860px){.stats__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* 360px 폰에서 "2007"이 칸보다 넓어 오른쪽 칸이 화면 밖으로 밀렸다(문서폭 367px) — 좁은 화면만 숫자 축소, 긴 한글 라벨 줄바꿈 허용. 2026-10-01 */
@media (max-width:480px){.stat b{font-size:clamp(2.75rem,14vw,4rem)}.stat span{overflow-wrap:anywhere}}

/* ── 사업 4영역 [흰] — 번호 + 헤어라인, 카드 없음 ───────── */
.services{padding:var(--pad-tile) 0}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:end;margin-bottom:clamp(2rem,4vw,4rem)}
.section-head .lead{color:var(--ink-70)}
.services ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:0.125rem solid var(--ink)}
.services li{padding:1.75rem clamp(1rem,2vw,2rem) 2.25rem 0;border-right:0.0625rem solid var(--ink-12);margin-right:clamp(1rem,2vw,2rem)}
.services li:last-child{border-right:0;margin-right:0}
.services .num{font-family:var(--font-head);font-weight:900;font-size:3rem;line-height:1;letter-spacing:-0.03em;color:var(--orange-deep)}
.services h3{font-size:1.5rem;font-weight:700;letter-spacing:-0.015em;margin:.7em 0 .5em}
.services p{color:var(--ink-70);font-size:1.0625rem;line-height:1.65}
.services a.more{display:inline-block;margin-top:1.1em;font-weight:700;border-bottom:0.125rem solid var(--orange);padding-bottom:0.125rem;transition:border-color .15s,color .15s}
.services a.more:hover,.mosaic .wz a:hover,.notice .link-more:hover{border-bottom-width:0.1875rem;color:var(--orange-deep)}
.notice .link-more:hover{color:var(--tangerine)}
.mosaic .wz a:hover{color:var(--ink);border-bottom-width:0.1875rem}

@media (max-width:860px){.section-head{grid-template-columns:1fr}.services ol{grid-template-columns:1fr 1fr}.services li:nth-child(2n){border-right:0;margin-right:0}}
@media (max-width:480px){.services ol{grid-template-columns:1fr}.services li{border-right:0;margin-right:0;border-bottom:0.0625rem solid var(--ink-12)}}

/* ── 후원 [연두 타일] ─────────────────────────────────── */
.support{background:var(--lime);color:var(--ink);--ink-70:var(--ink);padding:var(--pad-tile) 0}
.support__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.75rem,4vw,4.5rem);align-items:center}
.support .h2{font-size:clamp(2.25rem,4.2vw,3.75rem);letter-spacing:-0.025em;line-height:1.08}
.support .lead{margin-top:1em}
.support .btn{margin-top:1.6em}
.support__photo{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius)}
.support__photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.support__grid{grid-template-columns:1fr}}

/* ── 갤러리 + 웹진 [흰] ───────────────────────────────── */
.gallery{padding:var(--pad-tile) 0}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(0.75rem,1.5vw,1.25rem)}
.mosaic figure{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--paper)}
.mosaic img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.mosaic figure>a{display:block;height:100%;color:inherit}  /* home.js: 갤러리 앨범 링크 */
.mosaic figure>a:hover img{transform:scale(1.03);transition:transform .3s}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:0.875rem 1rem;background:linear-gradient(transparent,rgba(31,27,22,.85));color:var(--on-ink);font-weight:600;font-size:.95rem}
/* 약점2 반영: 웹진 카드 = 하늘 타일 (잉크 글자 5.82:1) — 4색이 메인에서 모두 역할을 갖는다 */
/* 밝은 타일은 --ink-70 을 불투명 잉크로 덮는다. 알파는 밝은 배경에서 대비를 깎는다 */
.mosaic .wz{background:var(--sky);color:var(--ink);--ink-70:var(--ink);padding:1.75rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.mosaic .wz .tag{font-family:var(--font-head);font-weight:700;color:var(--ink);letter-spacing:.02em}  /* opacity:.8 제거 — 하늘 타일 위 4.33:1 미달이었다 → 5.82:1 */
.mosaic .wz h3{font-size:1.75rem;font-weight:800;letter-spacing:-0.02em}
.mosaic .wz a{font-weight:700;border-bottom:0.125rem solid var(--ink);align-self:flex-start}
@media (max-width:860px){.mosaic{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.mosaic{grid-template-columns:1fr}}

/* ── 공지 [잉크 타일] ─────────────────────────────────── */
.notice{background:var(--ink);color:var(--on-ink);padding:var(--pad-tile) 0}
.notice .section-head{align-items:baseline}
.notice .link-more{font-weight:700;border-bottom:0.125rem solid var(--tangerine);justify-self:end}
.notice ul{border-top:0.0625rem solid var(--on-ink-12)}
.notice li a{display:grid;grid-template-columns:8.5em minmax(0,1fr) auto;gap:1.5rem;align-items:baseline;padding:1.375rem 0;border-bottom:0.0625rem solid var(--on-ink-12);font-size:1.125rem}
.notice li a:hover .t{text-decoration:underline;text-underline-offset:.2em}
.notice time{font-family:var(--font-head);font-weight:700;color:var(--tangerine);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.notice .cat{font-size:.9375rem;color:var(--on-ink-70);border:0.0625rem solid var(--on-ink-12);padding:.2em .6em;border-radius:0.125rem}
/* API 미응답 안내 한 줄 — 날짜 칸이 없으므로 2칸(문장 | 전체 보기). 2026-10-01 */
.notice li[data-notice-fallback] a{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:640px){.notice li a{grid-template-columns:1fr;gap:0.375rem}}

/* ── 관계기관 [흰] ─────────────────────────────────────── */
.partners{padding:1.75rem 0;border-top:0.0625rem solid var(--ink-12)}
/* 커뮤니티(다음카페) 밴드 + SNS — 시안 A안 (사용자 선택 2026-10-02). 색은 기존 토큰만: 귤색 타일 위 글자는 --ink 만(DESIGN.md) */
.community{background:var(--tangerine);color:var(--ink);--ink-70:var(--ink);padding:clamp(3.5rem,6vw,5.5rem) 0}
.community__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.community__kicker{font-weight:700;font-size:1.0625rem;margin:0 0 .6rem}
.community h2{font-family:var(--font-head);font-weight:800;font-size:clamp(2rem,4vw,3.25rem);line-height:1.15;letter-spacing:-0.03em;margin:0 0 1rem}
.community__desc{font-size:1.125rem;margin:0 0 1.75rem;max-width:34em}
.community__sns h3{font-size:1.0625rem;font-weight:700;margin:0 0 .9rem}
.sns{display:flex;flex-wrap:wrap;gap:.75rem;list-style:none;margin:0;padding:0}
.sns li[hidden],.community__sns[hidden]{display:none}
.sns a{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1rem;border:0.125rem solid currentColor;border-radius:999px;font-weight:700;font-size:1rem;color:inherit}
.sns svg{width:1.375rem;height:1.375rem;flex:none}
.sns a:hover{background:var(--ink);color:var(--tangerine)}
.footer__community{margin:1.5rem 0 0}  /* 2026-10-02: 별도 띠(구분선 2개·여백 과다) → 로고 칸 안으로 이동  /* 모바일에서 「후원 안내」 버튼과 붙어 있었다(간격 0) — 위 여백·구분선. 2026-10-02 */
.cafe-logo{display:block;height:1.125rem;width:auto;flex:none}  /* 다음카페 공식 로고(빨강 #ED3E49) — 잉크 버튼 위에서만 쓴다(귤색 위 1.4:1 미달). 2026-10-02 */
.community .btn{gap:.6rem}
.sns__cafe{gap:.55rem}
.sns--footer{color:var(--on-ink)}
.sns--footer a:not(.sns__cafe){width:2.75rem;padding:0;justify-content:center}
.sns--footer a:hover{background:var(--on-ink);color:var(--ink)}
@media (max-width:860px){.community__grid{grid-template-columns:1fr;align-items:start}.community .btn{width:100%;justify-content:center}}
body.high-contrast .community{color:#000}
body.high-contrast .sns--footer a:hover{background:#FFD400;color:#000}
/* 유관기관 — 각 기관 누리집의 공식 로고 원본(색 변경 없음). 2026-10-02 */
.partners__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5rem;list-style:none;margin:0 auto;padding:0;max-width:56rem}  /* 축소 2026-10-02 사용자 요청 */
.partners__list a{display:flex;align-items:center;justify-content:center;min-height:3.75rem;padding:.5rem .875rem;background:var(--white);border:0.0625rem solid var(--ink-12);border-radius:var(--radius);transition:border-color .15s ease}
.partners__list a:hover{border-color:var(--ink)}
.partners__list img{display:block;width:auto;height:auto;max-width:100%;max-height:1.75rem}
.partners__list img.is-small{max-height:1.375rem}  /* 서울시: 공식 누리집 컬러 로고가 101×26 뿐 → 원본 크기 이상 키우지 않는다 */
@media (max-width:860px){.partners__list{grid-template-columns:repeat(2,minmax(0,1fr))}.partners__list a{min-height:3.25rem;padding:.5rem}.partners__list img{max-height:1.5rem}}
/* 로고 크기 맞춤: 면적을 같게(높이 = √(목표면적 ÷ 가로세로비)) — 들쭉날쭉 보이던 것 정리. 2026-10-02 */
.partners__list img[src$="/mohw.png"]{--h:2.119rem}
.partners__list img[src$="/seoul.png"]{--h:1.750rem}
.partners__list img[src$="/sdm.png"]{--h:2.062rem}
.partners__list img[src$="/kead.svg"]{--h:2.044rem}
.partners__list img[src$="/nrc.png"]{--h:2.500rem}
.partners__list img[src$="/koddi.png"]{--h:2.044rem}
.partners__list img[src$="/koil.png"]{--h:1.975rem}
.partners__list img[src$="/kofdo.png"]{--h:1.519rem}
.partners__list img{height:var(--h,1.75rem)!important;max-height:none!important;width:auto;max-width:100%;object-fit:contain}
@media (max-width:860px){.partners__list img{height:calc(var(--h,1.75rem)*.85)!important}}
body.high-contrast .partners__list a{background:#fff;border-color:#FFD400}

/* ── 푸터 [잉크] ───────────────────────────────────────── */
.footer{background:var(--ink);color:var(--on-ink-70);padding:clamp(3rem,6vw,5rem) 0 2rem;font-size:1.0625rem;line-height:1.7}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(18rem,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem)}
.footer .nowrap{white-space:nowrap}
.footer h3{font-size:1rem;color:var(--on-ink);font-weight:700;margin-bottom:.8em;letter-spacing:.02em}
.footer .brand{color:var(--on-ink);margin-bottom:.6em}
.footer a:hover{color:var(--on-ink);text-decoration:underline}
.footer__bottom{margin-top:2.5rem;padding-top:1.25rem;border-top:0.0625rem solid var(--on-ink-12);display:flex;flex-wrap:wrap;gap:0.75rem 1.5rem;justify-content:space-between;font-size:.9375rem}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer__grid{grid-template-columns:1fr}}

/* ── 고대비 모드 (body.high-contrast) — 토큰 재정의 세트 ── */
body.high-contrast{
  --ink:#000; --ink-70:#fff; --ink-12:rgba(255,255,255,.4);
  --white:#000; --paper:#111;
  --orange:#FFD400; --orange-deep:#FFD400; --sky:#6FDBFF; --lime:#B6FF3B; --tangerine:#FFD400;
  --on-ink:#fff; --on-ink-70:#fff; --on-ink-12:rgba(255,255,255,.4);
  color:#fff;
}
body.high-contrast .stats,body.high-contrast .support,body.high-contrast .mosaic .wz{color:#000}
body.high-contrast .quick a span,body.high-contrast .services p,body.high-contrast .section-head .lead{color:#fff}
body.high-contrast .btn--ink{background:#fff;color:#000}
body.high-contrast .mosaic figure,body.high-contrast .support__photo{outline:0.125rem solid #fff}
body.high-contrast img{filter:contrast(1.1)}

/* ── 히어로 슬라이드 — JS 비의존: 첫 장은 CSS 로 항상 보인다, 텍스트 띠는 opacity 를 쓰지 않는다 ── */
.hero__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}
.hero__slide:first-child,.hero__slide.is-active{opacity:1}
.hero__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero__pause{position:absolute;right:1rem;bottom:1rem;z-index:3;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(31,27,22,.72);color:#fff;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35)}
.hero__pause:hover{background:rgba(31,27,22,.9)}
.hero__pause[hidden]{display:none}

/* ── 모바일 오버레이 메뉴 ── */
/* 모바일 메뉴 = 오른쪽 서랍 (2026-10-01 사용자 지적: 창을 좁히면 메뉴가 화면 전체를 덮고 글자만 남는다).
   폭 min(100%, 22rem) — 폰에서는 전체 폭, 태블릿·좁힌 데스크톱에서는 서랍. 바깥은 반투명 잉크로 가린다(box-shadow 트릭). */
.mnav{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(100%,22rem);z-index:60;background:var(--ink);color:var(--on-ink);padding:5rem var(--gutter) 2.5rem;overflow:auto;box-shadow:0 0 0 100vmax rgba(31,27,22,.6)}
.mnav[hidden]{display:none}
.mnav.is-open{display:block}
/* 닫기(✕): ✕ 글리프도 폰트 의존을 피해 CSS 로 X 를 그린다 */
.mnav__close{position:absolute;top:.9rem;right:var(--gutter);width:2.75rem;height:2.75rem;font-size:0}
.mnav__close::before,.mnav__close::after{content:"";position:absolute;top:50%;left:50%;width:1.25rem;height:0.1875rem;background:currentColor;border-radius:2px}
.mnav__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.mnav__close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mnav ul{display:grid}
.mnav li a{display:block;padding:1rem 0;font-family:var(--font-head);font-weight:700;font-size:1.5rem;letter-spacing:-0.015em;border-bottom:1px solid var(--on-ink-12)}
.mnav li a:hover{color:var(--tangerine)}
.mnav .a11y{margin-top:1.5rem;display:inline-flex}
.mnav .btn{margin-top:1.5rem}
body.high-contrast .hero__pause{background:#000;color:#fff;border-color:#fff}
/* ── 카카오 약도(정적 지도 이미지 · 키 불필요) 2026-09-28 ── */
.kmap{margin:0 0 2rem}
.kmap__link{position:relative;display:block;border:.125rem solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--paper);color:var(--ink);text-decoration:none;aspect-ratio:15/8}
.kmap__img{display:block;width:100%;height:100%;object-fit:cover}
.kmap__marker{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%);pointer-events:none}
.kmap__tag{white-space:nowrap;background:var(--ink);color:var(--on-ink);font-family:var(--font-head);font-weight:800;font-size:1rem;padding:.4em .8em;border-radius:var(--radius);margin-bottom:.5rem;box-shadow:0 .125rem .375rem rgba(0,0,0,.3)}
.kmap__pin{width:1.75rem;height:1.75rem;background:var(--orange);border:.1875rem solid var(--ink);border-radius:50% 50% 50% 0;transform:rotate(-45deg);margin-bottom:.35rem;box-shadow:0 .125rem .375rem rgba(0,0,0,.35)}
.kmap__more{position:absolute;right:.75rem;bottom:.75rem;background:#fff;border:.125rem solid var(--ink);border-radius:var(--radius);padding:.5em .9em;font-weight:700;font-size:.9375rem}
.kmap__link:hover .kmap__more{background:var(--ink);color:var(--on-ink)}
.kmap__fallback{display:none}
.kmap--fail .kmap__img,.kmap--fail .kmap__marker{display:none}
.kmap--fail .kmap__fallback{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1.125rem}
@media (max-width:640px){.kmap__link{aspect-ratio:4/3}.kmap__tag{font-size:.9375rem}}

/* ── 방문 통계 동의 띠 (js/analytics.js, 2026-10-01) — 잉크 바탕·흰 글자 17.12:1, 키보드 도달 ── */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:var(--on-ink);padding:1rem var(--gutter);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:center;box-shadow:0 -0.25rem 1.5rem rgba(0,0,0,.25)}
.consent-bar__text{max-width:52rem;font-size:1.0625rem;line-height:1.6;margin:0}
.consent-bar__text strong{display:block;margin-bottom:.2em}
.consent-bar__text a{color:var(--on-ink);text-decoration:underline;text-underline-offset:.2em}
.consent-bar__btns{display:flex;gap:.75rem}
/* 동의 안내 상자 (support·webzine 폼, 2026-10-01 — 법 제15조②) */
.consent-notice{border:0.0625rem solid var(--ink-12);background:var(--paper);border-radius:var(--radius);padding:1rem 1.25rem;margin:1rem 0 .5rem;font-size:1.0625rem;line-height:1.65;color:var(--ink)}
.consent-notice__title{font-weight:800;margin-bottom:.35em}
.consent-notice ul{list-style:disc;padding-left:1.3em;margin:.25em 0 .5em}
.consent-notice a{text-decoration:underline;text-underline-offset:.2em}

/* 바로가기 메뉴 — 머리말 바로 아래 고정(2026-10-02). 높이는 js/sticky-nav.js 가 잰 --header-h */
.anchor-nav{position:sticky;top:var(--header-h,5.25rem);z-index:45;background:var(--white);border-bottom:0.0625rem solid var(--ink-12)}
.anchor-nav ul{display:flex;flex-wrap:wrap;gap:0 clamp(1.25rem,3vw,2.5rem);list-style:none;margin:0;padding:0}
.anchor-nav a{display:block;padding:1rem .1em;font-weight:700;font-size:1.0625rem;letter-spacing:-0.01em;line-height:1.4;border-bottom:0.1875rem solid transparent;white-space:nowrap}
.anchor-nav a:hover{border-bottom-color:var(--ink-12)}
.anchor-nav a[aria-current="location"]{border-bottom-color:var(--orange)}
@media (max-width:860px){.anchor-nav ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:0 1.25rem}.anchor-nav ul::-webkit-scrollbar{display:none}.anchor-nav li{flex:none}}
html{scroll-padding-top:calc(var(--header-h,5.25rem) + var(--subnav-h,0px) + 1rem)}
/* 게시판 탭도 머리말 아래 고정 */
.tabs__list{position:sticky;top:var(--header-h,5.25rem);z-index:44;background:var(--white)}
body.high-contrast .anchor-nav,body.high-contrast .tabs__list{background:#000}
/* 유튜브 최신 영상 (2026-10-02) — 메인 「영상으로 보는 햇살아래」 + 소식마당 「영상」 탭. 누르기 전에는 썸네일만(센터 저장소) */
.videos{padding:0 0 var(--pad-tile)}
.yt-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.yt-grid[hidden],.yt-fallback[hidden],.yt-note[hidden]{display:none}
.yt-card__media{position:relative;aspect-ratio:16/9;background:var(--ink);border-radius:var(--radius);overflow:hidden}
.yt-card__media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-card__play{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.yt-card__play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.yt-card__play:hover img{transform:scale(1.03)}
.yt-card__icon{position:absolute;left:50%;top:50%;width:4rem;height:4rem;margin:-2rem 0 0 -2rem;border-radius:50%;background:rgba(31,27,22,.82);color:#fff;display:grid;place-items:center;border:0.125rem solid #fff;transition:background .15s}
.yt-card__icon svg{width:1.75rem;height:1.75rem;margin-left:.2rem}
.yt-card__play:hover .yt-card__icon,.yt-card__play:focus-visible .yt-card__icon{background:var(--orange-deep)}
.yt-card__play:focus-visible{outline-offset:-0.375rem}
.yt-card__dur{position:absolute;right:.5rem;bottom:.5rem;background:rgba(31,27,22,.88);color:#fff;font-size:.9375rem;font-weight:700;line-height:1;padding:.3rem .45rem;border-radius:var(--radius)}
.yt-card__title{margin:.9rem 0 0;font-weight:700;font-size:1.0625rem;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.yt-card__date{margin:.3rem 0 0;color:var(--ink-70);font-size:.9375rem}
.yt-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem 2rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.yt-note,.yt-fallback{margin:0;color:var(--ink-70);font-size:.9375rem}
.yt-fallback{font-size:1.0625rem;color:var(--ink)}
.yt-foot .link-more{font-weight:700;border-bottom:0.125rem solid var(--orange);padding-bottom:0.125rem;white-space:nowrap}
.yt-foot .link-more:hover{border-bottom-width:0.1875rem;color:var(--orange-deep)}
#panel-video .yt-grid{margin-top:1.5rem}
@media (max-width:860px){.yt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.yt-grid{grid-template-columns:1fr}}
body.high-contrast .yt-card__date,body.high-contrast .yt-note,body.high-contrast .yt-fallback{color:#fff}
body.high-contrast .yt-card__media{outline:0.125rem solid #fff}
body.high-contrast .yt-card__icon,body.high-contrast .yt-card__dur{background:#000}
@media (min-width:481px) and (max-width:1100px){.footer__grid{grid-template-columns:1fr 1fr}}  /* 900px 대에서 4칸이면 로고가 171px 로 작아졌다 2026-10-02 */
/* ── 머리말 여유 확보 (2026-10-02, 사용자: "이동기기수리가 들어가면서 빡빡해졌다") ──
   ① 머리말 줄만 본문(1240px)보다 넓게 88rem  ② 로고 280→240px (사용자 요청, 로고 가이드 화면 최소폭 280px 보다 작음 — 사용자 결정)
   ③ 상담 신청·접근성 버튼 여백 축소(누름 영역 36px 유지, WCAG 2.5.8 24px 이상)
   ④ 글자 크게(112.5%·125%)를 누르면 머리말 글자도 커지므로 ☰ 메뉴로 넘어가는 폭을 함께 올린다 */
.header .container{max-width:88rem}
.header .brand img{width:15rem}
.header__row{gap:clamp(.75rem,1.4vw,1.75rem)}
.gnb{gap:clamp(.75rem,1.5vw,1.75rem)}
.header .a11y{gap:0.125rem;padding:0.1875rem}
.header .a11y button{min-width:2.25rem;height:2.25rem;padding:0 .45em}
.header .btn--orange{padding:.75em 1.05em}
@media (max-width:400px){.header .brand img{width:min(15rem,calc(100vw - 6.5rem))}}
@media (min-width:1280px) and (max-width:1535px){html[data-font-level="1"] .gnb,html[data-font-level="1"] .header .btn--orange{display:none}html[data-font-level="1"] .menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}html[data-font-level="1"] .header .a11y{margin-left:auto}}
@media (min-width:1280px) and (max-width:1799px){html[data-font-level="2"] .gnb,html[data-font-level="2"] .header .btn--orange{display:none}html[data-font-level="2"] .menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}html[data-font-level="2"] .header .a11y{margin-left:auto}}
/* 메인 공지 — 상단 고정 공지 (2026-10-02). 잉크 바탕 위 귤색 라벨(대비 약 8:1) */
.notice .pin-label{justify-self:start;font-family:var(--font-head);font-weight:700;font-size:.9375rem;line-height:1.4;color:var(--ink);background:var(--tangerine);border-radius:var(--radius);padding:.15rem .6rem}
.notice li.is-pinned .t{font-weight:700}
body.high-contrast .notice .pin-label{background:#FFD400;color:#000}
/* ── 문장 줄바꿈 (2026-10-02, 사용자: "문장 줄바꿈 좀 신경 써라") ──
   ① 한글은 단어 단위로만 끊는다(body keep-all, 위)  ② 문단 마지막 줄에 한 단어만 남지 않게 pretty
   ③ 붙어 있어야 하는 묶음(전화번호·「」 이름·숫자+단위·A·B 짝)은 .nw 로 감싼다 */
p,li,td,th,dd,dt,figcaption,small,.lead,blockquote{text-wrap:pretty}
.nw{white-space:nowrap;display:inline!important}  /* !important: 「.usage-list span{display:block}」 같은 하위 span 규칙이 덮어써 조각마다 한 줄씩 쌓였다 */
.keep{display:inline-block!important;max-width:100%;text-indent:0}  /* 괄호 덩어리 — 넘치면 통째로 다음 줄(linebreak.js) */