/*!
 * adpass.css — 서버 반영본 (디자이너 배포본 v3.6 · 2026-09-08 을 그대로 옮긴 것)
 * ---------------------------------------------------------------------------
 * ★ 원본을 직접 고치지 말 것. 디자인 정본은 디자이너 배포본이고
 *   이 파일과의 차이는 **아래 2가지뿐**이어야 한다(09-08 v3.6 반영 시점 재확인):
 *     (1) 이 머리 주석
 *     (2) 파일 맨 끝 「서버 보정」 절 — 배포본에 없고 서버 구현에만 필요한 규칙
 *   ※ v3.2 대비 실질 변경은 **새 셀렉터 1개(.hero__side .pills)와 값 1개(.hero__side .pill span)**뿐이고
 *      사라진 규칙은 0건이다(규칙 단위 대조 546 → 547). 「4-19. FAQ」 절은 09-08 에 배포본에서
 *      미리 가져다 쓰던 것이 이번에 정식 포함됐다 — 그래서 수동 삽입분은 이 교체로 사라진다.
 * ★ 폰트 @font-face 를 넣지 않는다 — Pretendard 는 CDN 링크로 layout/_root.html 에 있다(D5).
 * ★ 템플릿에 style 블록이나 새 클래스를 만들지 않는다. 필요하면 docs/design/GAPS.md 에 적는다.
 * ---------------------------------------------------------------------------
 * 이하 배포본 머리 주석 원문:

 * adpass.css — AdPass 디자인 시스템
 * v3.6 · 2026-09-08 · (사)한국디지털광고협회 / AdPass
 * ---------------------------------------------------------------------------
 * · 메인 컬러는 로고 실측색(#0050FB). 운용 = 로고색은 '액션', 네이비는 '구조'.
 * · 로고 그라데이션(120deg, #0045FB→#00B0FD)이 AdPass의 시각 문법이다.
 * · 시그니처 도형 = 로고 'A'의 셰브런(Λ). 원형 dot/아이콘 대신 이것을 쓴다(.ad-chev).
 * · 입체 3규칙: 위쪽 1px 흰 하이라이트 / 그림자는 그 요소의 색 / 아래로만 짧게.
 * · 세로 레일(좌측 색띠) 금지. 서브비주얼(넓은 색 띠) 없음.
 * · 루트 단위 : html{font-size:62.5%} → 1rem = 10px. 모든 치수는 rem 표기.
 * ---------------------------------------------------------------------------
 * · 격자 기준선 = LNB 상단 끝선. 본문 칼럼도 같은 y에서 시작. 290+60+1050=1400.
 * · .hd-wrap 스크롤 반응 — 내리면 감추고, 올리면 미끄러져 내려온다.
 *   스크롤 상태로 '높이'를 바꾸지 말 것. sticky 요소의 높이가 변하면 콘텐츠가 밀리고
 *   scrollY 가 흔들려 무한 반복 버그가 난다. 바꿔도 되는 것은 transform 과 box-shadow 뿐.
 * · 메인 배너 배경은 이미지가 아니라 단색이다(background-color).
 *   배너별 색은 오브젝트 이미지의 바탕색과 **같은 값**이다 — 둘은 한 쌍이다.
 *     배너1 #D0E6F3 / 배너2 #D6E7F7 / 배너3 #DCE2F8
 *   오브젝트는 누끼가 아닌 불투명 정사각(1:1) 이미지이므로, 배경색만 바꾸면
 *   이미지 가장자리가 네모로 드러난다. drop-shadow 와 부양 애니메이션도 쓰지 않는다.
 * · 표는 줄바꿈하지 않는다(.tbl th/td = nowrap 기본). 좁으면 가로로 스크롤한다.
 *   .tbl-wrap 은 선택이 아니라 짝이다 — 감싸지 않으면 넘친 칸이 잘려 보이지 않는다.
 *   예외는 .tbl--wrap. 긴 설명문이 한 칸을 통째로 쓰는 표에만.
 * · LNB 는 두 벌이다(가이드 §5-2b). 안내 페이지 = 'AdPass' 묶음, 로그인 사용자 = '마이페이지' 묶음.
 *   계정 화면(로그인·회원가입·아이디찾기)과 메인에는 LNB 를 두지 않는다.
 * · .chart-slot — 통계 화면의 그래프 자리. 설계서는 위치와 종류만 정한다.
 * · .input-group — 입력칸 + 버튼(인증하기·중복확인) 한 줄. 버튼은 늘어나지 않는다.
 * · 아이콘은 mask-image 로 색을 입힌다. CORS 때문에 반드시 **같은 오리진**에서 서빙할 것.
 * ---------------------------------------------------------------------------
 * 설계서 전용 UI(.wf- 접두사)는 이 파일에 포함하지 않는다.
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── 1-1. Brand (로고 실측) ───────────────────────────────────────────── */
  --brand-core:#0050FB;              /* 로고 코어 블루 = 메인 컬러 */
  --brand-deep:#0045FB;              /* 그라데이션 진한 끝 */
  --brand-light:#00B0FD;             /* 그라데이션 밝은 끝 */
  --brand-gradient:linear-gradient(120deg,var(--brand-deep) 0%,var(--brand-light) 100%);

  /* ── 1-2. Primary = 액션 계열 (로고색 기반 9단계) ───────────────────── */
  --primary-5:#F0F5FF;
  --primary-10:#DDE8FF;
  --primary-20:#B9CEFF;
  --primary-30:#84A9FF;
  --primary-40:#3D7BFF;
  --primary-50:#0050FB;              /* 기본 액션 (= --brand-core) */
  --primary-60:#0040C9;              /* hover */
  --primary-70:#0032A0;              /* active */
  --primary-80:#052C6E;
  --primary-90:#051A47;

  /* ── 1-3. Navy = 구조 계열 (헤더·사이드바·제목) ─────────────────────── */
  --navy-900:#051126;                /* 로고 워드마크색. 관리자 사이드바·푸터 */
  --navy-800:#0A1B38;
  --navy-700:#13294F;
  --navy-600:#1D3A6B;
  --navy-500:#2A4E8C;                /* 서브 제목 */

  /* ── 1-4. Gray 10단계 (NPS 스케일 계승) ─────────────────────────────── */
  --gray-5:#F8F8F8;  --gray-10:#F0F0F0; --gray-20:#E4E4E4; --gray-30:#D8D8D8;
  --gray-40:#C6C6C6; --gray-50:#8E8E8E; --gray-60:#717171; --gray-70:#555555;
  --gray-80:#2D2D2D; --gray-90:#1D1D1D;
  --white:#FFFFFF;
  --color-base:#222222;              /* 본문 기본 텍스트 */

  /* ── 1-5. Surface / Line ────────────────────────────────────────────── */
  --bg-page:#FFFFFF;
  --bg-soft:#F9FAFC;                 /* 섹션 구분용 옅은 청회색 */
  --bg-gray:#F8F8F8;
  --bg-th:#F8F8F8;
  --bg-readonly:#F0F0F0;
  --bg-disabled:#E4E4E4;
  --line:#C6C6C6;                    /* 기본 테두리 */
  --line-strong:#919191;             /* 표 구분선 */
  --line-soft:#E4E4E4;
  --line-input:#888888;
  --line-brand:#B9CEFF;

  /* ── 1-6. Semantic — AdPass 결과 등급 3색 (핵심 시각 자산) ──────────── */
  /* 배지 텍스트는 -text, 배경은 -bg, 테두리는 -line 을 쓴다. 모두 4.5:1 이상 */
  --safe-text:#00701A;   --safe-bg:#EEF7F0;  --safe-line:#B7DEC5;  --safe-mark:#008A1E;
  --caution-text:#8A5A00;--caution-bg:#FFF8E9;--caution-line:#F2DDA8;--caution-mark:#FFB724;
  --warn-text:#C0002F;   --warn-bg:#FEECF0;  --warn-line:#F7C2CF;  --warn-mark:#E00038;
  --info-text:#0032A0;   --info-bg:#F0F5FF;  --info-line:#B9CEFF;  --info-mark:#0050FB;
  --neutral-text:#555555;--neutral-bg:#F0F0F0;--neutral-line:#D8D8D8;

  /* ── 1-6b. GRADIENT — 로고 그라데이션 DNA ★ AdPass 시각 문법의 핵심 ──────
     로고를 뜯어보면 규칙이 셋이다.
       ① 방향  : 좌하 → 우상 120° 대각선
       ② 스톱  : 진한 파랑(#0045FB) → 밝은 시안(#00B0FD), 2스톱
       ③ 교차면: A와 D가 겹치는 자리에 더 어두운 면이 생긴다 (겹침 = 깊이)
     이 문법을 브랜드색뿐 아니라 '의미색(등급 3색)'에도 그대로 적용한다.
     그래서 AdPass의 초록·노랑·빨강은 다른 서비스의 초록·노랑·빨강과 다르게 보인다. */
  --grad-angle:120deg;
  --grad-brand:linear-gradient(var(--grad-angle),#0045FB 0%,#00B0FD 100%);
  --grad-brand-deep:linear-gradient(var(--grad-angle),#0038D6 0%,#0090E0 100%);
  /* ★ --grad-brand-ink : 흰 글자를 얹는 면에 쓰는 브랜드 그라데이션.
       --grad-brand 의 밝은 끝 #00B0FD 는 흰 글자와 2.43:1, --grad-brand-deep 의 #0090E0 도
       3.46:1 이라 글자를 얹으면 안 읽힌다. 이 토큰은 밝은 끝이 #0050FB(5.93:1)라
       면 전체에서 흰 글자가 4.5:1 을 넘는다. 큰 버튼·타일·배너 CTA 는 이것을 쓴다. */
  --grad-brand-ink:linear-gradient(var(--grad-angle),#052C6E 0%,#0050FB 100%);
  --grad-brand-soft:linear-gradient(var(--grad-angle),#EAF1FF 0%,#E4F6FF 100%);
  --grad-navy:linear-gradient(var(--grad-angle),#051126 0%,#123A7A 100%);
  --grad-overlap:linear-gradient(var(--grad-angle),rgba(0,49,152,.92),rgba(0,80,251,.55));
  /* 등급 그라데이션 양 끝 — 같은 120°, 같은 '진한→밝은' 구조 */
  --safe-deep:#00631A;    --safe-lite:#43C46B;
  --caution-deep:#D98A00; --caution-lite:#FFD264;
  --warn-deep:#A8002A;    --warn-lite:#FF5C7A;
  --grad-safe:linear-gradient(var(--grad-angle),var(--safe-deep),var(--safe-lite));
  --grad-caution:linear-gradient(var(--grad-angle),var(--caution-deep),var(--caution-lite));
  --grad-warn:linear-gradient(var(--grad-angle),var(--warn-deep),var(--warn-lite));
  --grad-neutral:linear-gradient(var(--grad-angle),#8E8E8E,#C6C6C6);
  /* 그라데이션 '글자'용 — 밝은 끝을 낮춰 대비 3:1 이상을 지킨다(큰 글자 전용) */
  --grad-brand-txt:linear-gradient(var(--grad-angle),#0038D6,#0090E0);
  --grad-safe-txt:linear-gradient(var(--grad-angle),#00521A,#0E8F35);
  --grad-caution-txt:linear-gradient(var(--grad-angle),#7A4F00,#B87A00);
  --grad-warn-txt:linear-gradient(var(--grad-angle),#8E0024,#DA0038);

  /* ── 1-6c. DEPTH — 입체 규칙 ────────────────────────────────────────────
     ① 위쪽 1px 흰 하이라이트로 '빛이 위에서 온다'를 만든다
     ② 그림자는 회색이 아니라 그 요소의 색으로 준다 (회색 그림자 금지)
     ③ 아래로만 떨어진다. 번지기(blur)는 짧게 — 공공 서비스의 절제 */
  --dep-hl:inset 0 .1rem 0 rgba(255,255,255,.55);
  --dep-hl-strong:inset 0 .1rem 0 rgba(255,255,255,.78);
  --dep-inset:inset 0 .1rem .3rem rgba(5,17,38,.14);
  --dep-soft:0 .2rem .6rem rgba(5,17,38,.10);
  --dep-brand:0 .3rem .8rem rgba(0,80,251,.30);
  --dep-brand-lg:0 .6rem 1.6rem rgba(0,80,251,.36);
  --dep-safe:0 .3rem .8rem rgba(0,138,30,.28);
  --dep-caution:0 .3rem .8rem rgba(217,138,0,.32);
  --dep-warn:0 .3rem .8rem rgba(224,0,56,.28);

  /* ── 1-7. Typography ────────────────────────────────────────────────── */
  --font-base:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,
              'Malgun Gothic','맑은 고딕',system-ui,sans-serif;
  --font-num:'Pretendard',ui-monospace,'SF Mono',Menlo,monospace; /* 수치 정렬용 tnum */
  --fs-display:4.0rem;  --lh-display:1.3;
  --fs-h1:3.6rem;       --lh-h1:1.3;
  --fs-h2:2.8rem;       --lh-h2:1.4;
  --fs-h3:2.2rem;       --lh-h3:1.5;
  --fs-h4:2.0rem;       --lh-h4:1.5;
  --fs-lg:1.9rem;
  --fs-body:1.7rem;     --lh-body:1.5;      /* 본문 기준 — NPS 동일 */
  --fs-sm:1.5rem;       --lh-sm:1.5;
  --fs-xs:1.3rem;       --lh-xs:1.5;
  --ls-title:-0.03em;   --ls-body:0;

  /* ── 1-8. Spacing (4px 베이스) ──────────────────────────────────────── */
  --sp-1:.4rem;  --sp-2:.8rem;  --sp-3:1.2rem; --sp-4:1.6rem; --sp-5:2.0rem;
  --sp-6:2.4rem; --sp-8:3.2rem; --sp-10:4.0rem;--sp-12:4.8rem;--sp-15:6.0rem;
  --sp-20:8.0rem;--sp-30:12rem;

  /* ── 1-9. Radius / Elevation ────────────────────────────────────────── */
  --r-sm:.4rem; --r-md:.8rem; --r-lg:1.2rem; --r-xl:2.0rem; --r-pill:10rem;
  --sh-1:0 .2rem .8rem rgba(5,17,38,.06);
  --sh-2:0 .4rem 1.6rem rgba(5,17,38,.10);
  --sh-focus:0 0 0 .3rem rgba(0,80,251,.25);

  /* ── 1-10. Layout ───────────────────────────────────────────────────── */
  --container:140rem;      /* 1400px — NPS 동일 */
  --gutter:2.0rem;
  --lnb-w:29rem;           /* 290px */
  --lnb-gap:6.0rem;        /* 60px */
  --content-w:105rem;      /* 1050px */
  --header-h:6.8rem;
  --gnb-h:6.0rem;
  --admin-nav-w:24rem;
  --z-header:100; --z-dropdown:200; --z-modal:900;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%;-webkit-text-size-adjust:100%}   /* 1rem = 10px */
body{margin:0;font-family:var(--font-base);font-size:var(--fs-body);
     line-height:var(--lh-body);color:var(--color-base);background:var(--bg-page);
     letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;letter-spacing:var(--ls-title)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;vertical-align:middle}
table{width:100%;border-collapse:collapse;border-spacing:0}
[hidden]{display:none!important}
:focus-visible{outline:.3rem solid var(--primary-50);outline-offset:.2rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════════════
   3. LAYOUT — 셸 3종
   3-A. public  : 상단 GNB형 (비로그인·공개 콘텐츠)
   3-B. mypage  : 상단 GNB + 좌측 LNB 290px (신청자)
   3-C. admin   : 좌측 다크 사이드바 240px (운영자)
   ══════════════════════════════════════════════════════════════════════════ */
.l-container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* ── 3-1. Header + GNB (public·mypage 공통) ────────────────────────────
   ★ 스크롤 반응 — 국민연금과 같은 방식.
       · 내릴 때  : 헤더가 위로 밀려 올라가 사라진다 (화면을 넓게 쓴다)
       · 올릴 때  : 상단에서 미끄러져 내려온다 (메뉴가 필요해진 순간에만 나타난다)
       · 최상단   : 원래 자리로 돌아가고 그림자를 뗀다
     position:sticky + transform 조합이라 레이아웃이 흔들리지 않는다.
     --head-offset 은 위에 고정 바가 있을 때만 쓴다(운영 화면에서는 0). */
.hd-wrap{position:sticky;top:var(--head-offset,0);z-index:var(--z-header);
  background:var(--white);transition:transform .28s ease,box-shadow .22s ease}
.hd-wrap.is-stuck{box-shadow:0 .2rem 1rem rgba(5,17,38,.08)}
.hd-wrap.is-hidden{transform:translateY(-102%)}      /* 내릴 때: 위로 감춘다 */
/* ★ 스크롤 상태에 따라 '높이'를 바꾸지 않는다 — 반드시 지킬 것.
     .hd-wrap 은 sticky(문서 흐름 안)이므로 높이가 변하면 아래 콘텐츠가 밀리고,
     밀린 만큼 scrollY 가 바뀌어 다시 임계값을 넘나든다 → 로고가 커졌다 작아졌다 무한 반복.
     바뀌어도 되는 것은 레이아웃에 영향이 없는 transform 과 box-shadow 뿐이다. */
.hd{background:var(--white);border-bottom:.1rem solid var(--line-soft);position:relative}
.hd__top{height:var(--header-h);display:flex;align-items:center;gap:var(--sp-6)}
.hd__logo{display:flex;align-items:center}
.hd__logo img{height:3.2rem;width:auto}
.hd__util{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.hd__owner{display:inline-flex;align-items:center;height:3.4rem;padding:0 var(--sp-4);
  font-size:var(--fs-xs);color:var(--gray-60);border:.1rem solid var(--line-soft);border-radius:var(--r-pill)}
.hd__util a:not(.btn){font-size:var(--fs-sm);color:var(--gray-70)}
/* GNB */
.gnb{background:var(--white);border-bottom:.1rem solid var(--line)}
.gnb__list{display:flex}
.gnb__item{position:relative}
.gnb__link{display:flex;align-items:center;height:var(--gnb-h);padding:0 var(--sp-8);
  font-size:1.8rem;font-weight:600;color:var(--navy-800);letter-spacing:-.02em}
.gnb__link:hover{text-decoration:none;color:var(--primary-50)}
.gnb__item.is-active .gnb__link{color:var(--primary-50)}
.gnb__item.is-active .gnb__link::after{content:'';position:absolute;left:var(--sp-8);right:var(--sp-8);
  bottom:-.1rem;height:.3rem;background:var(--brand-gradient);border-radius:.3rem .3rem 0 0}
/* 첫 항목(자율 점검)은 주 액션 — PPT의 강조 탭을 계승하되 브랜드색으로 */
.gnb__link.is-primary{color:var(--primary-50)}

/* ── 3-2. Hero banner — 전폭 배경 + 좌측 텍스트 배너 슬라이더 ────────────
   ★ v1.2 변경 — 배너를 '통이미지'에서 '텍스트 + 오브젝트'로 바꿨다.
     이전에는 카피까지 그려 넣은 투명 PNG 한 장이었다. 그 방식은
       · 문구를 고치려면 이미지를 다시 만들어야 하고
       · 스크린리더·검색엔진이 카피를 읽지 못하며
       · 화면 폭이 좁아지면 글자까지 같이 줄어들어 읽히지 않는다.
     그래서 **카피·버튼은 HTML 텍스트**로, **오브젝트(캐릭터)만 투명 이미지**로 나눴다.
     발주기관은 이제 이미지 없이 문구만 교체할 수 있다.
   ★ 주인공은 글자다. 오브젝트는 글자를 넘지 않는 크기로 오른쪽에 세운다.
   ★ 배경(.hero__bg)과 슬라이드(.hero__slide)는 같은 인덱스로 함께 전환된다.
     슬라이드 추가 = 마크업 한 쌍(.hero__bg + .hero__slide) 추가. JS 수정 불필요. */
.hero{position:relative;overflow:hidden;isolation:isolate;
  border-bottom:.1rem solid rgba(5,17,38,.07)}
.hero__bg{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .7s ease}
.hero__bg.is-active{opacity:1}
/* 배경 — **단색 3종. 이미지를 쓰지 않는다.**
   ★ 색을 고른 근거: 로고 그라데이션의 색상각이 #00B0FD(198°) → #0045FB(224°) 다.
     그 **26° 구간을 셋으로 나눠** 198 / 211 / 224 를 그대로 배경 색상각으로 썼다.
     그래서 세 배경은 서로 구분되면서 로고와 같은 가족으로 보인다.
   ★ 채도는 10~13%. 원색을 쓰지 않는다 — 우측 흰 카드가 도려낸 것처럼 떠 보이고,
     글자가 올라갈 자리의 대비 여유가 사라진다.
   ★ 밝기는 **흰색 대비 1.26 으로 셋을 맞췄다.** 색상만 다르고 무게는 같아서
     배너가 넘어갈 때 화면이 밝아졌다 어두워졌다 하지 않는다.
   ★ 그라데이션을 쓰지 않는다. 이미지도, 겹치는 광택 레이어도 없다 — 색 하나뿐이다.
   ★ 색을 바꾸려면 아래 background-color 한 줄만 고치면 된다. */
.hero__bg{background-image:none}
.hero__bg[data-slide-bg="1"]{background-color:#D0E6F3}   /* 스카이 톤  = m_oj_01 바탕 */
.hero__bg[data-slide-bg="2"]{background-color:#D6E7F7}   /* 블루 톤    = m_oj_02 바탕 */
.hero__bg[data-slide-bg="3"]{background-color:#DCE2F8}   /* 딥블루 톤  = m_oj_03 바탕 */

/* 그리드 — 좌측 배너(남는 폭 전부) + 간격 40 + 우측 정보 440.
   좌측을 minmax(0,1fr) 로 두면 컨테이너가 줄어도 배너가 먼저 양보한다. */
.hero__inner{display:grid;grid-template-columns:minmax(0,1fr) 40rem;gap:var(--sp-10);
  padding-top:var(--sp-8);padding-bottom:var(--sp-8);align-items:center}
/* --bnr-inset : 배너 내용의 왼쪽 시작선을 컨테이너 안쪽으로 얼마나 들일지.
   ★ 헤더 로고·GNB 와 같은 선에 딱 붙이면 배너가 화면 가장자리에 매달린 것처럼 보인다.
     여기서만 한 칸 안으로 들여 '무대' 를 만든다. 격자 기준선(§4-2)의 예외는 이 한 곳뿐이다. */
.hero__banner{position:relative;min-width:0;--bnr-inset:6rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
.hero__side{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
/* ★ 슬라이드가 absolute 라서 트랙 높이는 **명시**해야 한다.
     가장 긴 슬라이드(제목 2줄 + 설명 2줄 + 버튼)를 기준으로 잡은 값이다. */
/* ★ 트랙 높이는 '가장 긴 슬라이드의 글자 덩어리'가 기준이다.
     현재 가장 긴 글자 덩어리(라벨+제목 2줄+설명 2줄+버튼)가 337px 이므로 360 이면 충분하다.
     오브젝트는 아래 정렬이라 트랙보다 커도 위로 넘칠 뿐 잘리지 않는다 —
     그래서 트랙을 줄이면서 오브젝트는 키울 수 있다. */
.hero__track{position:relative;width:100%;height:36rem}
/* 들어오는 쪽(--enter)과 나가는 쪽(--leave)의 방향이 반대여야 '넘어간다'로 읽힌다 */
.hero__slide{position:absolute;inset:0;opacity:0;pointer-events:none;
  transform:translateX(var(--enter,4rem));
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.hero__slide.is-active{opacity:1;transform:none;pointer-events:auto}
.hero__slide.is-leaving{opacity:0;transform:translateX(var(--leave,-4rem))}

/* ── 배너 내용 — 큰 제목 + 설명 + 바로가기 버튼 + 오브젝트 ───────────────
   ★ 국민연금 메인 비주얼의 구성 순서를 그대로 따른다.
     ① 작은 분류 라벨(eyebrow) ② 큰 제목 ③ 한 문장 설명 ④ 바로가기 버튼 하나
     설명은 두 줄을 넘기지 않는다. 넘어가는 순간 배너가 아니라 본문이 된다.
   ★ 글자와 오브젝트의 비중은 대략 7:3. 오브젝트를 키우지 말 것.
   ★ 두 칸 모두 내용 크기(max-content/auto)로 잡고 justify-content:start 로 왼쪽에 몰아 둔다.
     한쪽을 1fr 로 두면 남는 폭을 글자 칸이 다 먹어 **오브젝트가 저 멀리 떨어져 보인다.** */
.bnr{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:start;
  align-items:center;gap:var(--sp-6);height:100%;padding-left:var(--bnr-inset)}
.bnr__txt{min-width:0}
/* ★ 좌우 반전 — 오브젝트를 왼쪽에, 글자를 오른쪽에.
     마크업 순서는 그대로 두고(글자가 먼저 읽혀야 한다) order 로만 자리를 바꾼다.
     배너가 넘어갈 때 좌우가 번갈아 나와 리듬이 생긴다. 현재 1·3 반전, 2 기본. */
.bnr--rev{grid-template-columns:auto minmax(0,max-content)}
.bnr--rev .bnr__obj{order:-1}
.bnr__eyebrow{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-4);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;color:var(--bnr-mid)}
.bnr__eyebrow .ad-chev{background:var(--bnr-grad)}
/* word-break:keep-all — 한글이 단어 중간에서 끊기지 않게. 제목에서는 필수다.
   줄바꿈 자리는 마크업의 <br> 로 직접 정한다 — 자동 줄바꿈에 맡기지 않는다. */
/* --tit-size : 슬라이드마다 제목 크기를 조절한다. 문구가 길면 한 단계 내린다 —
   글자를 줄이는 편이 억지로 줄바꿈해 세 줄이 되는 것보다 낫다. */
.bnr__tit{margin:0;font-size:var(--tit-size,5.2rem);line-height:1.26;letter-spacing:-.24rem;
  font-weight:800;color:var(--bnr-ink);word-break:keep-all}
.bnr__desc{margin:var(--sp-5) 0 0;font-size:1.8rem;line-height:1.65;
  color:var(--bnr-sub);word-break:keep-all}
/* ★ CTA — 브랜드 파랑이 아니라 **그 슬라이드 배경 톤의 딥 컬러**를 쓴다.
     로고 그라데이션 문법(120° · 딥→라이트 2스톱)은 그대로 지킨다. */
.btn.bnr__cta{margin-top:var(--sp-8);min-height:5.6rem;padding:0 var(--sp-8);
  font-size:1.7rem;font-weight:700;border-color:transparent;color:var(--white);
  background:var(--bnr-grad);box-shadow:var(--dep-hl),0 .3rem .9rem var(--bnr-sh)}
.btn.bnr__cta:hover{background:var(--bnr-grad);border-color:transparent;
  filter:brightness(1.1);transform:translateY(-.1rem)}
.btn.bnr__cta:active{transform:none;box-shadow:var(--dep-inset)}
.btn.bnr__cta:focus-visible{outline:.3rem solid var(--bnr-ink);outline-offset:.3rem}
/* 오브젝트 — 투명 배경 이미지. 카드에 담지 않고 배경 위에 바로 올린다.
   그림자는 이미지에 굽지 않고 CSS 로 준다(배경색이 바뀌어도 어색해지지 않는다). */
/* ★ 오브젝트는 칸 가운데가 아니라 **아래쪽에 앉힌다.**
     가운데 두면 글자 덩어리와 무게중심이 같은 높이에 겹쳐 그림이 붕 떠 보인다.
     아래로 내려 앉히면 글자가 위, 그림이 아래로 층이 생겨 시선이 정리된다.
   ★ --obj-drop 으로 슬라이드마다 미세 조정한다(양수 = 더 아래로).
     바닥선이 있는 일러스트는 더 내리고, 공중에 뜬 캐릭터는 조금만 내린다. */
.bnr__obj{margin:0;align-self:end;transform:translateY(var(--obj-drop,0))}
.bnr__obj img{display:block;width:var(--obj-w,36rem);height:auto}
/* ★ drop-shadow 를 쓰지 않는다. 오브젝트는 **불투명 정사각 이미지**여서
     그림자를 걸면 네모난 그림자가 그대로 드러난다. 바닥 그림자는
     일러스트 안에 타원으로 이미 그려져 있다.
   ★ 부양(위아래로 뜨는) 애니메이션도 쓰지 않는다. 바닥 그림자까지 같이
     떠올라 장면 전체가 흔들리는 것처럼 보인다. */
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:opacity .2s linear}
}

/* 슬라이드별 색 — 배경과 **같은 색상각**에서 내려온 딥 컬러.
   ★ 규칙: ink(제목)는 가장 짙은 값, sub(설명)는 한 단계 밝게, mid(라벨)는 채도를 살린 중간값,
     grad(버튼)는 ink → mid 방향의 2스톱. 색상각은 배경과 같으므로 한 가족으로 읽힌다.
   ★ 대비는 각 배경 기준 실측값이다. 배경을 바꾸면 이 값들도 다시 계산해야 한다.
       배너1 #D5E8F0 — 제목 10.65:1 / 설명 7.60:1 / 라벨 4.86:1
       배너2 #D7E7F7 — 제목 12.57:1 / 설명 8.43:1 / 라벨 6.29:1
       배너3 #DFE5F7 — 제목 12.96:1 / 설명 8.98:1 / 라벨 6.84:1
     CTA 그라데이션의 밝은 끝은 흰 글자 기준 5.05 / 6.56 / 7.18:1 이다. */
.hero__slide[data-slide="1"]{                       /* 스카이 톤 배경 */
  --bnr-ink:#053343;--bnr-sub:#1E4A5C;--bnr-mid:#0A6A87;
  --bnr-grad:linear-gradient(var(--grad-angle),#053343 0%,#0C7899 100%);
  --bnr-sh:rgba(5,51,67,.30)}
.hero__slide[data-slide="2"]{                       /* 블루 톤 배경 */
  --bnr-ink:#0A2244;--bnr-sub:#25405F;--bnr-mid:#14509B;
  --bnr-grad:linear-gradient(var(--grad-angle),#0A2244 0%,#1A5CB0 100%);
  --bnr-sh:rgba(10,34,68,.30)}
.hero__slide[data-slide="3"]{                       /* 딥블루 톤 배경 */
  --bnr-ink:#141A4E;--bnr-sub:#2F3766;--bnr-mid:#3340A8;
  --bnr-grad:linear-gradient(var(--grad-angle),#141A4E 0%,#3B4AC0 100%);
  --bnr-sh:rgba(20,26,78,.30)}

/* 오브젝트 — 실제 그림 반영 완료(2026-09-07).
   ★ **투명 PNG/WebP** 다. 800 × 727 (약 1.10 : 1).
     처음에는 배경색을 구운 불투명 정사각으로 넣었는데, 슬라이드가 넘어가는 동안
     배경 두 장이 겹쳐 섞이면서 오브젝트의 구운 배경만 다른 색으로 떠올랐다
     — 네모난 얼룩이 스쳐 지나가는 현상이다. 누끼로 바꿔 원인을 없앴다.
   ★ 크기는 --obj-w(가로) 하나로 정한다. 세로는 auto 다. 현재 36rem.
     상한은 38rem 이다 — 더 키우면 배너2·3 의 제목이 세 줄로 접힌다.
   ★ --obj-drop 으로 아래로 내린다(현재 8rem). 리모콘(--ctrl-drop 5rem)과
     같은 아랫줄에 모이되 겹치지는 않는다. 둘 다 transform 이라 레이아웃을 밀지 않는다.
   ★ 바닥 그림자는 일러스트 안에 타원으로 그려져 있다. CSS drop-shadow 는 쓰지 않는다.
   ★ 세 장은 **같은 크롭 박스**로 잘랐다. 그래서 배너가 넘어가도 'AD' 글자의
     크기와 위치가 흔들리지 않는다. 새로 만들 때도 같은 규칙을 지킨다. */

/* ── 우측 정보 컬럼 압축 ────────────────────────────────────────────────
   ★ 히어로 높이는 좌우 중 **더 큰 쪽**이 정한다. 배너 쪽은 424px 인데
     우측 카드 3장을 그대로 두면 700px 을 넘어 우측이 띠 높이를 끌어올린다.
     그래서 우측만 촘촘하게 조인다 — 다른 화면의 카드는 건드리지 않는다.
   ★ 여기서 줄인 것: 카드 머리 여백, 목록 행 높이, 바로가기 타일 높이, 알약 높이.
     글자 크기는 줄이지 않았다 — 읽히는 크기는 그대로 두고 '사이'만 좁혔다. */
.hero__side .card__head{padding:var(--sp-3) var(--sp-5)}
.hero__side .card__tit{font-size:var(--fs-h4)}
.hero__side .card__body{padding:var(--sp-3) var(--sp-5) var(--sp-4)}
.hero__side [data-region="notice"] li{padding:.9rem 0!important}
/* ★ 분류 4개가 **한 줄에** 들어가야 한다. 두 줄로 접히면 카드가 39px 커지고,
     그만큼 히어로 띠 전체가 늘어난다(653 → 692). 좁은 칼럼(350px)에 4개를
     넣으려면 좌우 여백을 12 → 8 로 줄여야 한다 — 실측으로 정한 값이다. */
.hero__side .pills{gap:.6rem}
.hero__side .pill span{padding:.5rem .8rem;font-size:var(--fs-xs);letter-spacing:-.02em}
.hero__side [data-region="faq"] .pills{margin-bottom:var(--sp-2)!important}
.hero__side [data-region="faq"] li{padding:.5rem 0!important}
/* 질문이 길어도 한 줄로 자른다 — 두 줄로 접히면 그 행만 높아져 카드 높이가 들쭉날쭉해진다.
   공지 목록도 같은 방식이다. 전문은 자주 묻는 질문 화면에서 본다. */
.hero__side [data-region="faq"] li a{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* 날짜가 두 줄로 접히면 행 높이가 튄다 — 칸이 좁아도 날짜는 한 줄로 둔다 */
.hero__side .num{white-space:nowrap}
.hero__side .quick__item{min-height:6.4rem;padding:0 var(--sp-4);gap:var(--sp-3);justify-content:center}
.hero__side .quick__label{flex:0 1 auto;white-space:nowrap}
.hero__side .quick__item--brand{font-size:var(--fs-sm)}

/* ── 배너 리모콘 ────────────────────────────────────────────────────────
   ★ v1.3 — 드래그·스와이프를 걷어내고 리모콘으로 되돌렸다.
     끌어서 넘기는 방식은 ① 어디를 끌어야 하는지 보이지 않고 ② 글자를 드래그하려던
     동작과 충돌하며 ③ 지금 몇 번째 배너인지 알 수 없다. 조작부는 눈에 보여야 한다.
   ★ 구성은 두 덩어리다 — 위치 점 3개 + 정지/재생 버튼 1개.
     정지 버튼은 장식이 아니라 **KWCAG 2.2 / WCAG 2.2.2 의 요구사항**이다. 지우면 위반이다.
   ★ 파스텔 배경 위에 놓이므로 흰 알약으로 띄운다. 배경색이 무엇이든 읽힌다. */
.hero__ctrl{display:inline-flex;align-items:center;gap:var(--sp-2);
  align-self:center;margin-top:var(--sp-6);padding:.6rem .8rem;
  transform:translateY(var(--ctrl-drop,5rem));
  background:rgba(255,255,255,.86);border-radius:var(--r-pill);
  box-shadow:var(--dep-hl),0 .2rem .8rem rgba(5,17,38,.10);
  -webkit-backdrop-filter:blur(.6rem);backdrop-filter:blur(.6rem)}
/* 점 — 클릭 영역은 32px 를 확보하고(터치 최소치) 점 자체만 작게 그린다 */
.hero__dot{width:3.2rem;height:3.2rem;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:50%}
.hero__dot::before{content:'';width:.9rem;height:.9rem;border-radius:50%;
  background:var(--gray-40);transition:background .2s ease,width .25s ease,border-radius .25s ease}
.hero__dot:hover::before{background:var(--gray-60)}
/* 현재 위치는 색만이 아니라 **모양(길어진 알약)** 으로도 구분한다 — 색각 이상 대응 */
.hero__dot.is-on::before{width:2.4rem;border-radius:var(--r-pill);background:var(--grad-brand)}
.hero__dot:focus-visible{outline:.3rem solid var(--primary-50);outline-offset:-.2rem}
.hero__play{width:3.2rem;height:3.2rem;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
  border:.1rem solid var(--line);background:var(--white);color:var(--navy-800)}
.hero__play:hover{background:var(--gray-5)}
.hero__play:focus-visible{outline:.3rem solid var(--primary-50);outline-offset:.2rem}
/* 아이콘은 CSS 도형이다 — 재생 중이면 '정지(⏸)', 멈춰 있으면 '재생(▶)' 을 보여준다.
   ★ 버튼은 '지금 누르면 일어날 일'을 표시한다. 상태 표시가 아니다. */
.hero__play::before{content:'';width:1rem;height:1.1rem;               /* ⏸ 정지 */
  background:linear-gradient(currentColor,currentColor) 0 0/.32rem 100% no-repeat,
             linear-gradient(currentColor,currentColor) 100% 0/.32rem 100% no-repeat}
.hero__play[aria-pressed="true"]::before{background:currentColor;      /* ▶ 재생 */
  clip-path:polygon(15% 0,100% 50%,15% 100%)}

@media (max-width:1200px){
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-6);padding-top:var(--sp-8)}
  .hero__banner{--bnr-inset:3rem}
  .hero__track{height:34rem}
  .bnr__tit{font-size:4.2rem;letter-spacing:-.18rem}
  .bnr__obj{--obj-w:30rem}
}
@media (max-width:768px){
  /* 좁은 화면에서는 오브젝트를 글자 뒤로 물리고 크게 줄인다 — 글자가 먼저다 */
  .hero__banner{--bnr-inset:0}
  .hero__track{height:32rem}
  .bnr,.bnr--rev{grid-template-columns:1fr;align-content:center;gap:var(--sp-4)}
  .bnr__tit{font-size:3rem;letter-spacing:-.12rem}
  .bnr__desc{font-size:1.6rem;margin-top:var(--sp-4)}
  /* 줄바꿈만 없앤다 — 마크업의 <br> 앞에 공백을 두었으므로 단어가 붙지 않는다 */
  .bnr__desc br{display:none}
  .btn.bnr__cta{margin-top:var(--sp-6);min-height:5rem;padding:0 var(--sp-6);font-size:1.6rem}
  /* ★ 좁은 화면에서는 오브젝트를 **감춘다.** 예전처럼 글자 뒤로 물려 반투명하게
       깔면, 불투명 정사각 이미지라 네모난 얼룩이 그대로 드러난다. 글자가 먼저다. */
  .bnr__obj{display:none}
}

/* ── 3-3. Breadcrumb ─────────────────────────────────────────────────── */
/* 위치: 본문 칼럼 최상단 — LNB 상단 끝선과 같은 y에서 시작한다 */
.bc{display:flex;align-items:center;gap:var(--sp-2);min-height:2.2rem;margin-bottom:var(--sp-4);
  font-size:var(--fs-xs);color:var(--gray-60)}
.bc li+li::before{content:'';display:inline-block;width:.6rem;height:.6rem;margin-right:var(--sp-2);
  border-right:.1rem solid var(--gray-40);border-bottom:.1rem solid var(--gray-40);transform:rotate(-45deg)}
.bc li{display:flex;align-items:center;gap:var(--sp-2)}
.bc li:last-child{color:var(--gray-80);font-weight:600}

/* ── 3-4. Body grid : LNB + content ──────────────────────────────────── */
/* 좌우 두 칼럼이 같은 y에서 시작한다 — 이 정렬이 화면 전체의 기준이 된다 */
.l-body{display:flex;gap:var(--lnb-gap);padding:var(--sp-10) 0 var(--sp-30);align-items:flex-start}
.l-main{flex:1 1 auto;min-width:0}
/* ★ 격자 기준선 — LNB 상단 끝선. 본문 칼럼(브레드크럼→타이틀)도 같은 선에서 시작한다 */
.lnb{width:var(--lnb-w);flex:0 0 var(--lnb-w)}
.lnb__head{padding:var(--sp-6) var(--sp-5);border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--navy-900);color:var(--white);font-size:var(--fs-h4);font-weight:700}
.lnb__list{border:.1rem solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);
  overflow:hidden;background:var(--white)}
.lnb__link{display:block;padding:var(--sp-4) var(--sp-5);font-size:1.6rem;color:var(--gray-80);
  border-bottom:.1rem solid var(--line-soft)}
.lnb__list li:last-child .lnb__link{border-bottom:0}
.lnb__link:hover{background:var(--primary-5);color:var(--primary-60);text-decoration:none}
.lnb__link.is-active{background:var(--primary-5);color:var(--primary-60);font-weight:700;
  box-shadow:inset .3rem 0 0 var(--primary-50)}

/* ── 3-5. Page head (본문 상단) ──────────────────────────────────────── */
.page-head{padding-bottom:var(--sp-5);margin-bottom:var(--sp-8);border-bottom:.2rem solid var(--navy-900)}
.page-head__tit{font-size:var(--fs-h1);line-height:var(--lh-h1);color:var(--gray-90)}
/* 설명문은 '이 페이지에서 무엇을 하는가'를 한 문장으로. 코드·약어를 쓰지 않는다 */
.page-head__desc{margin-top:var(--sp-3);font-size:var(--fs-body);color:var(--gray-70);
  font-weight:400;letter-spacing:0;max-width:78rem}

/* ── 3-6. Footer ─────────────────────────────────────────────────────── */
.ft{background:var(--navy-900);color:rgba(255,255,255,.68);padding:var(--sp-10) 0 var(--sp-12);font-size:var(--fs-sm)}
.ft__policy{display:flex;gap:var(--sp-6);padding-bottom:var(--sp-5);margin-bottom:var(--sp-5);
  border-bottom:.1rem solid rgba(255,255,255,.14)}
.ft__policy a{color:rgba(255,255,255,.88);font-weight:600}
.ft__policy a.is-strong{color:var(--brand-light)}
.ft__org{color:var(--white);font-weight:700;font-size:var(--fs-body);margin-bottom:var(--sp-3)}
.ft__addr{line-height:1.7}
.ft__copy{margin-top:var(--sp-5);font-size:var(--fs-xs);color:rgba(255,255,255,.45)}

/* ── 3-7. Admin shell ────────────────────────────────────────────────── */
.adm{display:flex;min-height:100vh;background:var(--bg-soft)}
/* ★ 접기/펼치기 — 표 열이 많은 운영 화면에서 콘텐츠 폭을 넓게 쓰기 위한 장치.
     너비를 줄이지 않고 margin-left 로 밀어낸다(내부 글자가 찌그러지지 않는다). */
.adm__nav{width:var(--admin-nav-w);flex:0 0 var(--admin-nav-w);background:var(--navy-900);
  color:rgba(255,255,255,.75);display:flex;flex-direction:column;padding-bottom:var(--sp-6);
  transition:margin-left .3s cubic-bezier(.4,0,.2,1)}
.adm.is-nav-collapsed .adm__nav{margin-left:calc(-1 * var(--admin-nav-w))}
/* 토글 버튼 — 3선. 접히면 화살표 방향이 바뀐다 */
.adm__toggle{flex:none;width:4rem;height:4rem;border:.1rem solid var(--line);border-radius:var(--r-md);
  background:var(--white);display:grid;place-items:center;gap:.4rem;align-content:center;
  transition:border-color .18s,background .18s}
.adm__toggle:hover{border-color:var(--primary-50);background:var(--primary-5)}
.adm__toggle i{display:block;width:1.8rem;height:.2rem;border-radius:.1rem;background:var(--gray-70);
  transition:width .25s ease,background .18s}
.adm__toggle:hover i{background:var(--primary-60)}
.adm.is-nav-collapsed .adm__toggle i:nth-child(1){width:1.2rem}
.adm.is-nav-collapsed .adm__toggle i:nth-child(3){width:1.2rem}
.adm__brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.adm__brand img{height:2.8rem}
.adm__brand b{color:var(--white);font-size:var(--fs-sm);letter-spacing:.02em}
.adm__user{margin:0 var(--sp-4) var(--sp-5);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:rgba(255,255,255,.07);font-size:var(--fs-xs);display:flex;align-items:center;justify-content:space-between}
.adm__user b{color:var(--white)}
.adm__user a{color:var(--brand-light)}
.adm__group{padding:var(--sp-4) var(--sp-5) var(--sp-2);font-size:1.1rem;font-weight:700;
  letter-spacing:.08em;color:rgba(255,255,255,.38);text-transform:uppercase}
.adm__link{display:block;padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.adm__link:hover{background:rgba(255,255,255,.07);color:var(--white);text-decoration:none}
.adm__link.is-active{background:rgba(0,80,251,.22);color:var(--white);font-weight:700;
  box-shadow:inset .3rem 0 0 var(--brand-light)}
.adm__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;transition:none}
.adm__top{background:var(--white);border-bottom:.1rem solid var(--line-soft);
  padding:var(--sp-5) var(--sp-8);display:flex;align-items:center;gap:var(--sp-5)}
.adm__top h2{font-size:var(--fs-h3);color:var(--gray-90)}
.adm__main{padding:var(--sp-6) var(--sp-8) var(--sp-15);flex:1 1 auto}

/* ══════════════════════════════════════════════════════════════════════════
   4. COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */
/* ── 4-1. Button — 로고 그라데이션 + 입체 ────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:4.4rem;padding:0 var(--sp-6);border-radius:var(--r-md);font-size:1.6rem;font-weight:700;
  border:.1rem solid var(--line);background:var(--white);color:var(--gray-80);
  box-shadow:var(--dep-hl);white-space:nowrap;
  transition:background-position .28s ease,box-shadow .18s,border-color .18s,color .18s,transform .08s}
.btn:hover{text-decoration:none;background:var(--gray-5);border-color:var(--gray-50)}
.btn:active{transform:translateY(.1rem)}
/* 주 액션 — 로고 그라데이션을 넓게 깔고 hover 시 흐름이 이동한다 */
.btn.btn--primary{border-color:transparent;color:var(--white);
  background:var(--grad-brand);background-size:180% 180%;background-position:0% 50%;
  box-shadow:var(--dep-brand),var(--dep-hl-strong)}
.btn.btn--primary:hover{background:var(--grad-brand);background-size:180% 180%;background-position:100% 50%;
  border-color:transparent;box-shadow:var(--dep-brand-lg),var(--dep-hl-strong)}
.btn.btn--primary:active{box-shadow:var(--dep-soft),var(--dep-inset)}
/* 보조 액션 — 테두리 자체가 그라데이션 (padding-box/border-box 2겹 배경) */
.btn.btn--ghost{border:.15rem solid transparent;color:var(--primary-60);box-shadow:none;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad-brand) border-box}
.btn.btn--ghost:hover{color:var(--primary-70);
  background:var(--grad-brand-soft) padding-box,var(--grad-brand) border-box}
/* 관리자 액션 — 네이비 그라데이션 */
.btn.btn--dark{border-color:transparent;color:var(--white);background:var(--grad-navy);
  box-shadow:var(--dep-soft),var(--dep-hl)}
.btn.btn--dark:hover{border-color:transparent;background:var(--grad-navy);filter:brightness(1.15)}
.btn.btn--sm{min-height:3.4rem;padding:0 var(--sp-4);font-size:var(--fs-xs)}
.btn.btn--lg{min-height:5.6rem;padding:0 var(--sp-10);font-size:1.8rem}
.btn.btn--block{width:100%}
.btn[disabled],.btn.is-disabled{background:var(--bg-disabled);border-color:var(--bg-disabled);
  color:var(--gray-50);cursor:not-allowed;box-shadow:none;transform:none}
.btn-list{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
/* 표 안의 버튼 묶음은 줄바꿈하지 않는다 — 칸이 좁다고 세로로 쌓이면 행 높이가 튄다 */
.tbl .btn-list{flex-wrap:nowrap;justify-content:flex-start}

/* ── 4-2. Card ───────────────────────────────────────────────────────── */
.card{background:var(--white);border:.1rem solid var(--line);border-radius:var(--r-lg);margin-bottom:var(--sp-5)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-6);border-bottom:.1rem solid var(--line-soft)}
.card__tit{font-size:var(--fs-h4);color:var(--gray-90)}
.card__tit small{display:block;margin-top:.2rem;font-size:var(--fs-xs);font-weight:400;color:var(--gray-60);letter-spacing:0}
.card__body{padding:var(--sp-6)}
.card__foot{padding:var(--sp-4) var(--sp-6);border-top:.1rem solid var(--line-soft);
  background:var(--gray-5);font-size:var(--fs-xs);color:var(--gray-60);border-radius:0 0 var(--r-lg) var(--r-lg)}
.card--soft{background:var(--bg-soft);border-color:transparent}
.card--flush .card__body{padding:0}

/* ── 4-3. Form ───────────────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-5)}
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
.field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;align-items:stretch}
.field>.btn{align-self:flex-start}
/* 입력칸 + 버튼 한 줄 (인증하기·중복확인·조회 등). 버튼은 늘어나지 않는다 */
.input-group{display:flex;gap:var(--sp-2);align-items:stretch}
.input-group>.input,.input-group>.select,.input-group>.textarea{flex:1 1 auto;min-width:0}
.input-group>.btn{flex:none;align-self:stretch}
.field>.btn.btn--block{align-self:stretch}
.label{font-size:var(--fs-sm);font-weight:600;color:var(--gray-80)}
.label.is-required::after{content:'*';margin-left:.3rem;color:var(--warn-mark)}
.hint{font-size:var(--fs-xs);color:var(--gray-60)}
.input,.select,.textarea{width:100%;min-height:4.4rem;padding:0 var(--sp-4);
  border:.1rem solid var(--line-input);border-radius:var(--r-sm);background:var(--white);font-size:var(--fs-sm)}
.textarea{padding:var(--sp-3) var(--sp-4);min-height:12rem;line-height:1.6}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--primary-50);box-shadow:var(--sh-focus)}
.input[readonly]{background:var(--bg-readonly)}
.select{appearance:none;padding-right:var(--sp-8);
  background-image:linear-gradient(45deg,transparent 50%,var(--gray-60) 50%),
                   linear-gradient(135deg,var(--gray-60) 50%,transparent 50%);
  background-position:calc(100% - 1.9rem) 50%,calc(100% - 1.4rem) 50%;
  background-size:.5rem .5rem,.5rem .5rem;background-repeat:no-repeat}
.input-file{display:flex;gap:var(--sp-2)}
.input-file .input{flex:1 1 auto}
/* radio / checkbox */
.choice-row{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);align-items:center;min-height:4.4rem}
.choice{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);cursor:pointer}
.choice input{width:2rem;height:2rem;accent-color:var(--primary-50);margin:0}
/* pill 선택 그룹 (업종 선택 등) */
.pills{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;opacity:0;width:0;height:0}
.pill span{display:inline-flex;align-items:center;gap:var(--sp-2);padding:.9rem var(--sp-4);
  border:.1rem solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-sm);
  background:var(--white);color:var(--gray-70);transition:.15s}
.pill input:checked+span{border-color:var(--primary-50);background:var(--primary-5);
  color:var(--primary-70);font-weight:700}
.pill input:focus-visible+span{box-shadow:var(--sh-focus)}
.pill:hover span{border-color:var(--gray-50)}

/* ── 4-4. Badge — AdPass 시그니처 셰브런 ────────────────────────────────
   ★ 점(dot) 대신 로고 'A'에서 뽑은 셰브런(Λ)을 쓴다. 이 도형이 AdPass 화면
     어디에서나 반복되면서 배지·알럿·고지를 하나의 언어로 묶는다.
   ★ 셰브런은 항상 그라데이션으로 칠한다 — 로고 문법(120°, 진한→밝은). */
.ad-chev{display:inline-block;flex:none;width:1rem;height:1rem;background:var(--grad-brand);
  clip-path:polygon(0 100%,50% 0,100% 100%,70% 100%,50% 38%,30% 100%)}
.ad-chev--lg{width:1.6rem;height:1.6rem}

.badge{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  padding:.45rem var(--sp-3) .45rem .9rem;border-radius:.6rem;
  font-size:var(--fs-xs);font-weight:700;line-height:1.4;
  background:var(--neutral-bg);color:var(--neutral-text);
  border:.1rem solid var(--neutral-line);box-shadow:var(--dep-hl)}
.badge::before{content:'';flex:none;width:.9rem;height:.9rem;background:var(--grad-neutral);
  clip-path:polygon(0 100%,50% 0,100% 100%,70% 100%,50% 38%,30% 100%)}
.badge--safe{background:var(--safe-bg);color:var(--safe-text);border-color:var(--safe-line)}
.badge--safe::before{background:var(--grad-safe)}
.badge--caution{background:var(--caution-bg);color:var(--caution-text);border-color:var(--caution-line)}
.badge--caution::before{background:var(--grad-caution)}
.badge--warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-line)}
.badge--warn::before{background:var(--grad-warn)}
.badge--info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-line)}
.badge--info::before{background:var(--grad-brand)}
/* 솔리드 — 그라데이션 채움. 강조가 필요한 한두 곳에만 */
.badge--solid{background:var(--grad-brand);color:var(--white);border-color:transparent;
  box-shadow:var(--dep-brand),var(--dep-hl-strong)}
.badge--solid::before{background:rgba(255,255,255,.92)}
/* 등급 채움 배지 — 결과를 크게 선언할 때 (목록·요약 카드) */
.badge--fill-safe{background:var(--grad-safe);color:#fff;border-color:transparent;
  box-shadow:var(--dep-safe),var(--dep-hl-strong)}
.badge--fill-caution{background:var(--grad-caution);color:#4A3000;border-color:transparent;
  box-shadow:var(--dep-caution),var(--dep-hl-strong)}
.badge--fill-warn{background:var(--grad-warn);color:#fff;border-color:transparent;
  box-shadow:var(--dep-warn),var(--dep-hl-strong)}
.badge--fill-safe::before,.badge--fill-warn::before{background:rgba(255,255,255,.92)}
.badge--fill-caution::before{background:rgba(74,48,0,.85)}
.badge--lg{font-size:var(--fs-sm);padding:.6rem var(--sp-4) .6rem 1.2rem;border-radius:.7rem}
.badge--lg::before{width:1.2rem;height:1.2rem}
.badge--nodot::before{display:none}
.badge--nodot{padding-left:var(--sp-3)}

/* ── 4-5. Gauge / Grade — AdPass 고유 ① 결과 등급 ────────────────────────
   ★ 도넛은 SVG로 그린다. conic-gradient로는 ① 원호를 따라 흐르는 그라데이션과
     ② 둥근 끝맺음(round cap) ③ 원호에만 걸리는 그림자를 동시에 낼 수 없다.
   ★ 입체는 3겹으로 만든다:
       (1) 트랙   — 안쪽으로 눌린 홈 (inset shadow)
       (2) 원호   — 그라데이션 + 둥근 캡 + 아래로 떨어지는 그림자
       (3) 허브   — 좌상단이 밝은 흰 원반. 빛이 위에서 온다는 신호
   ★ 원호 길이는 --g-val(0~100)만 바꾸면 된다. JS 계산 불필요. */
.gauge{position:relative;width:15rem;height:15rem;flex:0 0 15rem;display:grid;place-items:center;
  --c:326.73}                                   /* 2πr, r=52 */
/* ★ viewBox 를 "-10 -10 140 140" 으로 넓혀 원호의 drop-shadow 가 잘리지 않게 한다.
     SVG 루트는 기본적으로 viewport 를 잘라내므로 여백 없이는 우/하단 그림자가 끊긴다. */
.gauge__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.gauge__track{fill:none;stroke:#E4E9F2;stroke-width:13}   /* markup에서 url(#ad-g-track) 적용 —
     좌상단이 어둡고 우하단이 밝은 역방향 그라데이션이라 '파인 홈'으로 읽힌다 */
.gauge__arc{fill:none;stroke-width:13;stroke-linecap:round;
  stroke-dasharray:var(--c);
  stroke-dashoffset:calc(var(--c) - var(--c) * var(--g-val) / 100);
  filter:drop-shadow(0 .35rem .5rem rgba(5,17,38,.28))}
.gauge__hub{position:absolute;inset:2.9rem;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 12%,#FFFFFF 0%,#F5F8FD 62%,#E8EEF7 100%);
  box-shadow:0 .3rem .8rem rgba(5,17,38,.16),inset 0 .1rem 0 #fff}
.gauge__center{position:relative;z-index:1;text-align:center;line-height:1.04}
.gauge__center b{display:block;font-size:3.4rem;font-weight:800;letter-spacing:-.04em;
  color:var(--gray-90);font-variant-numeric:tabular-nums}
.gauge__center span{font-size:1rem;font-weight:700;letter-spacing:.14em;color:var(--gray-50)}

.grade{position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--sp-8);
  padding:var(--sp-6) var(--sp-8);border-radius:var(--r-lg);
  border:.1rem solid var(--line);background:var(--white);box-shadow:var(--dep-soft)}
/* 우측 상단 그라데이션 워시 — 로고의 '빛' 방향과 같다 */
.grade::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:radial-gradient(60% 130% at 88% -20%,var(--wash,#8E8E8E) 0%,transparent 62%)}
.grade--safe{border-color:var(--safe-line);background:var(--safe-bg)}
.grade--safe{--wash:#43C46B}
.grade--caution{border-color:var(--caution-line);background:var(--caution-bg)}
.grade--caution{--wash:#FFD264}
.grade--warn{border-color:var(--warn-line);background:var(--warn-bg)}
.grade--warn{--wash:#FF5C7A}
.grade__body{position:relative;z-index:1;flex:1 1 auto;min-width:0}
/* 등급 라벨 — 그라데이션 글자. 큰 글자 전용 대비값(-txt)을 쓴다 */
.grade__label{display:inline-block;font-size:3.2rem;font-weight:800;letter-spacing:-.04em;
  background-image:var(--grad-neutral);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.grade--safe .grade__label{background-image:var(--grad-safe-txt)}
.grade--caution .grade__label{background-image:var(--grad-caution-txt)}
.grade--warn .grade__label{background-image:var(--grad-warn-txt)}
/* 3칸 막대 — 색맹 대응 이중 부호화. 켜진 칸만 그라데이션 + 색 그림자 */
.grade__scale{display:flex;gap:.5rem;margin-top:var(--sp-3)}
.grade__scale i{display:block;width:4.6rem;height:.8rem;border-radius:.4rem;
  background:var(--gray-20);box-shadow:var(--dep-inset)}
.grade__scale i.on-safe{background:var(--grad-safe);box-shadow:var(--dep-safe),var(--dep-hl)}
.grade__scale i.on-caution{background:var(--grad-caution);box-shadow:var(--dep-caution),var(--dep-hl)}
.grade__scale i.on-warn{background:var(--grad-warn);box-shadow:var(--dep-warn),var(--dep-hl)}
.grade__meta{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.grade__note{margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--gray-70);max-width:56rem}

/* ── 4-6. Finding — AdPass 고유 컴포넌트 ②  유의 항목 ────────────────── */
/* v1은 7열 표였다. 표는 '어느 문구가 왜 걸렸는지'를 읽기 어렵다.
   → 문구를 인용문으로 크게 세우고, 근거·위계·심각도·위치를 그 아래 메타로 붙인다 */
.finding{position:relative;overflow:hidden;border:.1rem solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6);margin-bottom:var(--sp-3);
  background:var(--white);box-shadow:var(--dep-hl)}
/* 세로 레일을 쓰지 않는다 — 심각도는 우측 배지와 심각도 막대가 이미 말해준다 */
.finding--warn{border-color:var(--warn-line)}
.finding--caution{border-color:var(--caution-line)}
.finding--ref{background:var(--gray-5);border-color:var(--line-soft)}
.finding__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
.finding__quote{font-size:var(--fs-h4);font-weight:700;color:var(--gray-90);letter-spacing:-.02em}
.finding__quote.is-absent{color:var(--gray-50);font-weight:500;font-style:normal}
.finding__reason{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--gray-70)}
.finding__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:.1rem dashed var(--line-soft);font-size:var(--fs-xs);color:var(--gray-60)}
.finding__meta dt{display:inline;color:var(--gray-50)}
.finding__meta dd{display:inline;margin:0 0 0 .4rem;color:var(--gray-80);font-weight:600}
.finding__meta>div{display:flex;align-items:center}
.sev{display:inline-flex;align-items:center;gap:.4rem}
.sev__bar{display:block;width:6rem;height:.7rem;border-radius:.35rem;background:var(--gray-20);
  overflow:hidden;box-shadow:var(--dep-inset)}
.sev__bar i{display:block;height:100%;border-radius:.35rem;background:var(--grad-warn)}

/* ── 4-7. Disclaimer — AdPass 고유 ③ 비면책 고지 (COR-002) ──────────────
   운영자가 지울 수 없는 고정 요소다. 경고색을 쓰면 결과 자체를 불신하게 되므로
   ★ 브랜드 그라데이션 레일 + 우상단 워시로 '공식 고지'의 격만 준다.
   번호는 그라데이션 라운드 사각 칩 — 배지·알럿과 같은 도형 언어. */
.disclaim{position:relative;overflow:hidden;border:.1rem solid var(--line);border-radius:var(--r-md);
  background:var(--white);padding:var(--sp-5) var(--sp-6);box-shadow:var(--dep-hl)}
.disclaim::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.12;
  background:radial-gradient(55% 140% at 92% -30%,#00B0FD 0%,transparent 60%)}
.disclaim__tit{position:relative;z-index:1;display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:800;color:var(--navy-800);margin-bottom:var(--sp-3);
  letter-spacing:-.02em}
.disclaim ol{position:relative;z-index:1;counter-reset:d;font-size:var(--fs-xs);
  color:var(--gray-70);line-height:1.75}
.disclaim li{counter-increment:d;padding-left:2.4rem;position:relative;margin-bottom:.4rem}
.disclaim li::before{content:counter(d);position:absolute;left:0;top:.15rem;
  width:1.7rem;height:1.7rem;border-radius:.5rem;background:var(--grad-brand);color:#fff;
  font-size:1rem;font-weight:800;display:grid;place-items:center;
  box-shadow:var(--dep-brand),var(--dep-hl-strong)}

/* ── 4-8. Alert — 좌측 그라데이션 레일 + 셰브런 칩 ─────────────────────
   ★ 동그란 i/! 아이콘을 쓰지 않는다. 왼쪽 레일(그라데이션)과 라운드 사각 칩에
     담긴 셰브런이 AdPass의 알림 형태다. */
.alert{position:relative;overflow:hidden;display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  font-size:var(--fs-sm);border:.1rem solid var(--info-line);background:var(--info-bg);
  color:var(--info-text);box-shadow:var(--dep-hl)}
.alert__ico{flex:none;width:2.4rem;height:2.4rem;border-radius:.7rem;background:var(--grad-brand);
  display:grid;place-items:center;box-shadow:var(--dep-brand),var(--dep-hl-strong)}
.alert__ico::before{content:'';width:1.1rem;height:1.1rem;background:#fff;
  clip-path:polygon(0 100%,50% 0,100% 100%,70% 100%,50% 38%,30% 100%)}
.alert__ico span{display:none}                 /* v1 마크업 호환 — 글자는 숨긴다 */
.alert--warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn-text)}
.alert--warn .alert__ico{background:var(--grad-warn);box-shadow:var(--dep-warn),var(--dep-hl-strong)}
.alert--warn .alert__ico::before{transform:rotate(180deg)}   /* 경고는 셰브런을 뒤집는다 */
.alert--caution{border-color:var(--caution-line);background:var(--caution-bg);color:var(--caution-text)}
.alert--caution .alert__ico{background:var(--grad-caution);box-shadow:var(--dep-caution),var(--dep-hl-strong)}
.alert--caution .alert__ico::before{background:#4A3000;transform:rotate(180deg)}
.alert--neutral{border-color:var(--line);background:var(--gray-5);color:var(--gray-70)}
.alert--neutral .alert__ico{background:var(--grad-neutral);box-shadow:var(--dep-soft),var(--dep-hl)}
.alert a{font-weight:800;text-decoration:underline;text-underline-offset:.2rem}

/* ── 4-9. Table ──────────────────────────────────────────────────────── */
.tbl{width:100%;font-size:var(--fs-sm)}
.tbl th{background:var(--bg-th);font-weight:600;color:var(--gray-70);text-align:left;
  padding:var(--sp-4);border-bottom:.1rem solid var(--line-soft);white-space:nowrap}
.tbl thead th{border-top:.2rem solid var(--navy-900);border-bottom:.1rem solid var(--line-strong)}
.tbl tbody th{width:16rem;font-weight:600;color:var(--gray-70)}
.tbl td{padding:var(--sp-4);border-bottom:.1rem solid var(--line-soft);color:var(--gray-80);vertical-align:middle}
.tbl tbody tr:hover{background:var(--primary-5)}
.tbl .is-num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .is-center{text-align:center}
.tbl a{color:var(--primary-60);font-weight:600;text-decoration:underline}
.tbl-wrap{overflow-x:auto}
/* ★ 표의 기본은 '줄바꿈하지 않는다' 이다 — 반드시 지킬 것.
     칸이 좁다고 셀 안에서 줄이 바뀌면
       · 신청번호(KODA-ADPS-20260810-0012)가 세 토막으로 갈라지고
       · 행 높이가 제각각이 되어 눈으로 행을 따라갈 수 없다
     한 줄로 두고 **가로 스크롤**로 보는 편이 훨씬 읽기 쉽다.
   ★ .tbl-wrap 은 선택이 아니라 짝이다. 표는 항상 이 안에 넣는다 —
     감싸지 않으면 넘친 칸이 잘려 보이지 않는다.
   ★ 예외가 필요하면 .tbl--wrap 을 붙인다(긴 설명문이 한 칸을 통째로 쓰는 표).
     남용하지 말 것. */
.tbl th,.tbl td{white-space:nowrap}
.tbl--wrap th,.tbl--wrap td{white-space:normal;word-break:keep-all}
.tbl--nowrap{min-width:100%}   /* v2.1까지 쓰던 이름 — 이제 기본값이라 유지만 한다 */
/* 가로 스크롤 막대를 옅게 항상 보이게 둔다 — 더 볼 내용이 있다는 신호다 */
.tbl-wrap{scrollbar-width:thin;scrollbar-color:var(--gray-30) transparent}
.tbl-wrap::-webkit-scrollbar{height:.8rem}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--gray-30);border-radius:var(--r-pill)}
.tbl-wrap::-webkit-scrollbar-track{background:transparent}
.tbl-empty{padding:var(--sp-15) 0;text-align:center;color:var(--gray-50);font-size:var(--fs-sm)}

/* ── 4-10. Datagrid (정의형 목록) ────────────────────────────────────── */
.dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:var(--sp-5)}
.dg__item dt{font-size:var(--fs-xs);color:var(--gray-60);margin-bottom:.4rem}
.dg__item dd{margin:0;font-size:var(--fs-sm);color:var(--gray-90);font-weight:600}
.dg__item dd.is-big{font-size:2.4rem;font-variant-numeric:tabular-nums}

/* ── 4-11. Stat tile ─────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:var(--sp-4);margin-bottom:var(--sp-5)}
.stat{background:var(--white);border:.1rem solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.stat__label{font-size:var(--fs-xs);color:var(--gray-60);margin-bottom:var(--sp-2)}
.stat__value{font-size:3.0rem;font-weight:700;color:var(--gray-90);font-variant-numeric:tabular-nums;line-height:1.2}
.stat__value small{font-size:1.4rem;font-weight:600;color:var(--gray-60);margin-left:.3rem}

/* ── 4-12. Steps (위저드) ────────────────────────────────────────────── */
.steps{display:flex;counter-reset:s;margin-bottom:var(--sp-8);border:.1rem solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.steps li{counter-increment:s;flex:1 1 0;display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);color:var(--gray-50);
  border-right:.1rem solid var(--line-soft);position:relative}
.steps li:last-child{border-right:0}
.steps li::before{content:counter(s);flex:0 0 2.8rem;width:2.8rem;height:2.8rem;border-radius:50%;
  background:var(--gray-20);color:var(--gray-60);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700}
.steps li.is-active{color:var(--primary-70);font-weight:700;background:var(--primary-5)}
.steps li.is-active::before{background:var(--primary-50);color:var(--white)}
.steps li.is-done{color:var(--gray-80)}
.steps li.is-done::before{background:var(--navy-700);color:var(--white)}

/* ── 4-13. Tabs / Filter bar ─────────────────────────────────────────── */
.tabs{display:flex;gap:var(--sp-2);border-bottom:.1rem solid var(--line);margin-bottom:var(--sp-6)}
.tabs a{padding:var(--sp-3) var(--sp-6);font-size:1.6rem;font-weight:600;color:var(--gray-60);
  border:.1rem solid transparent;border-bottom:0;border-radius:var(--r-md) var(--r-md) 0 0;margin-bottom:-.1rem}
.tabs a:hover{color:var(--primary-50);text-decoration:none}
.tabs a.is-active{color:var(--primary-60);background:var(--white);border-color:var(--line);
  box-shadow:inset 0 .3rem 0 var(--primary-50)}
.filter{background:var(--bg-soft);border:.1rem solid var(--line-soft);border-radius:var(--r-lg);
  padding:var(--sp-5);margin-bottom:var(--sp-5)}
.filter .form-grid{gap:var(--sp-4)}
.filter .btn{align-self:end}

/* ── 4-14. Pagination ────────────────────────────────────────────────── */
.paging{display:flex;justify-content:center;gap:var(--sp-1);margin:var(--sp-10) 0 0}
.paging a{min-width:4rem;height:4rem;display:inline-flex;align-items:center;justify-content:center;
  border:.1rem solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--gray-70)}
.paging a:hover{border-color:var(--primary-50);color:var(--primary-50);text-decoration:none}
.paging a.is-active{background:var(--primary-50);border-color:var(--primary-50);color:var(--white);font-weight:700}

/* ── 4-15. Utility ───────────────────────────────────────────────────── */
.row{display:flex;gap:var(--sp-5)}
.row>*{flex:1 1 0;min-width:0}
.mt-0{margin-top:0}.mt-3{margin-top:var(--sp-3)}.mt-5{margin-top:var(--sp-5)}.mt-8{margin-top:var(--sp-8)}
.mb-3{margin-bottom:var(--sp-3)}.mb-5{margin-bottom:var(--sp-5)}.mb-8{margin-bottom:var(--sp-8)}
.mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}
.mb-0{margin-bottom:0}.m-0{margin:0}
.txt-sub{color:var(--gray-60)}.txt-xs{font-size:var(--fs-xs)}.txt-sm{font-size:var(--fs-sm)}
.txt-lg{font-size:var(--fs-lg)}.txt-strong{font-weight:700;color:var(--navy-800)}
.sec-tit{font-size:var(--fs-h3);color:var(--gray-90);margin-bottom:var(--sp-4)}
.divider{height:.1rem;background:var(--line-soft);margin:var(--sp-8) 0;border:0}
/* 정렬 유틸 — 화면설계서 1(부트스트랩 계열)에서 옮겨 온 마크업이 쓰던 최소 집합.
   새 화면에서는 되도록 컴포넌트 클래스를 쓰고 이 유틸에 기대지 않는다. */
.text-center{text-align:center}.text-end{text-align:right}.w-100{width:100%}
.d-flex{display:flex}.d-grid{display:grid}.flex-wrap{flex-wrap:wrap}
.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-5{gap:var(--sp-5)}
.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}
.between{justify-content:space-between}.center{justify-content:center}
/* 강조 수치 — 잔액·금액처럼 한 줄로 크게 보여 주는 값 */
.is-big{font-size:2.8rem;font-weight:800;letter-spacing:-.08rem;color:var(--navy-800);
  font-variant-numeric:tabular-nums;margin:0}

/* ── 4-9. 바로가기 타일 (.quick) ────────────────────────────────────────
   메인 우측 정보 컬럼의 3칸 바로가기.
   ★ 문제였던 것 — 공지·FAQ 카드가 흰 카드인데 바로가기도 흰 버튼이면
     같은 색 덩어리가 세 번 반복돼 아무것도 눈에 걸리지 않는다.
   ★ 해법은 '전부 칠하기'가 아니라 **하나만 칠하기**다.
     · 「자율 점검 기준」 = 이 사이트의 두 번째 목적지 → 브랜드 그라데이션(컬러)
     · 개인정보처리방침 · 이용약관 = 있어야 하지만 유도할 곳은 아니다 → 그레이톤
     셋 다 칠하면 강조가 사라지고, 셋 다 흰색이면 지금처럼 밋밋하다.
   ★ 그레이톤도 평면 회색이 아니라 같은 120° 2스톱 그라데이션이다 —
     로고에서 온 시각 문법을 무채색에도 그대로 적용한다(§1-4).
   ★ 컬러 타일에는 --grad-brand 를 쓰지 않는다. 밝은 끝(#00B0FD)이 흰 글자와 2.43:1 이라
     글자가 뭉갠다. 흰 글자를 얹는 면은 --grad-brand-ink 를 쓴다. */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.quick__item{display:flex;align-items:center;gap:var(--sp-2);min-height:7.2rem;
  padding:0 var(--sp-4);border-radius:var(--r-lg);
  font-size:var(--fs-sm);font-weight:700;line-height:1.35;letter-spacing:-.02em;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background .18s ease}
.quick__item:hover{text-decoration:none;transform:translateY(-.2rem)}
.quick__item:active{transform:none}
.quick__item:focus-visible{outline:.3rem solid var(--primary-50);outline-offset:.2rem}
.quick__label{flex:1 1 auto;min-width:0}
/* ★ 아이콘은 마스크로 칠한다 — 파일 하나로 파란 타일(흰 아이콘)과
     그레이 타일(네이비 아이콘)을 모두 그린다. 색은 currentColor 를 따라간다.
     그래서 아이콘 파일은 **흰 단색 + 알파** 한 벌만 있으면 된다(색깔 버전을 따로 만들지 않는다).
   ★ mask-image 는 **CORS 제약을 받는다.** 반드시 같은 출처에서 불러야 한다.
     · 운영: /static/img/ico-*.png 처럼 같은 도메인 경로를 쓴다 — 정상 동작한다
     · 다른 도메인 CDN 에 올리려면 그 CDN 이 CORS 헤더를 내려 줘야 한다
     · 설계서(로컬 file:// 로 여는 HTML)에서는 파일 경로가 교차 출처로 취급돼 마스크가 안 뜬다.
       그래서 설계서에서는 아이콘을 base64 data URI 로 심어 두었다(빌드 시 치환).
   ★ 마스크를 지원하지 않는 아주 오래된 브라우저에서는 아이콘이 사라진다 —
     라벨만으로도 뜻이 통하므로 의미 손실은 없다(장식 아이콘). */
.quick__ico{flex:none;width:4rem;height:4rem;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}

/* 컬러 타일 — 셋 중 하나뿐이다. 늘리지 말 것 */
.quick__item--brand{padding:0 var(--sp-5);font-size:var(--fs-body);
  color:var(--white);background:var(--grad-brand-ink);
  box-shadow:var(--dep-hl),var(--dep-brand)}
.quick__item--brand .ad-chev{background:var(--white);opacity:.92}
.quick__item--brand:hover{filter:brightness(1.1);
  box-shadow:var(--dep-hl),0 .5rem 1.2rem rgba(0,80,251,.34)}
/* 화살표는 CSS 도형 — 아이콘 파일을 늘리지 않는다 */
.quick__arrow{flex:none;width:.8rem;height:.8rem;opacity:.85;
  border-top:.2rem solid currentColor;border-right:.2rem solid currentColor;
  transform:rotate(45deg)}

/* 그레이 타일 — 두 줄 라벨이라 가운데 정렬한다 */
.quick__item--gray{justify-content:center;text-align:center;
  color:var(--navy-800);border:.1rem solid #D2D8E2;
  background:linear-gradient(var(--grad-angle),#DDE2EC 0%,#EDF0F6 100%);
  box-shadow:var(--dep-hl-strong)}
.quick__item--gray .quick__label{flex:0 1 auto}
.quick__item--gray:hover{border-color:var(--line);
  background:linear-gradient(var(--grad-angle),#D3D9E6 0%,#E4E9F2 100%);
  box-shadow:var(--dep-hl-strong),var(--dep-soft)}

/* ── 4-10. 미정 콘텐츠 자리 (.stub) ─────────────────────────────────────
   ★ 레이아웃은 확정됐고 본문만 아직 정해지지 않은 화면에 넣는다.
     화면을 통째로 비워 두면 '깨진 페이지'로 보인다. 비어 있다는 사실과
     **여기에 무엇이 들어올 자리인지**를 함께 말해 주어야 설계서로 기능한다.
   ★ 운영 배포 전에 이 블록은 전부 제거된다. 남아 있으면 미완성 화면이라는 뜻이다.
     찾는 방법: data-state="empty" 로 검색한다.
   ★ 실제 서비스의 '조회 결과 없음'(.tbl-empty)과 혼동하지 말 것 — 그건 정상 상태다. */
.stub{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-3);min-height:34rem;padding:var(--sp-15) var(--sp-8);text-align:center;
  border:.2rem dashed var(--line);border-radius:var(--r-xl);
  background:linear-gradient(var(--grad-angle),#FBFCFE 0%,#F5F7FB 100%)}
.stub .stub__mark{width:2.8rem;height:2.8rem;opacity:.45;margin-bottom:var(--sp-2)}
.stub__tit{margin:0;font-size:var(--fs-h3);font-weight:700;color:var(--navy-800);letter-spacing:-.05rem}
.stub__desc{margin:0;max-width:58rem;font-size:var(--fs-sm);line-height:1.75;color:var(--gray-60);
  word-break:keep-all}
/* 담을 내용 — 개발자·발주기관이 이 화면의 범위를 바로 읽을 수 있게 한다 */
.stub__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);
  margin:var(--sp-4) 0 0;max-width:64rem}
.stub__list li{display:inline-flex;align-items:center;padding:.5rem 1.4rem;
  font-size:var(--fs-xs);font-weight:600;color:var(--navy-700);
  border:.1rem solid var(--line-brand);border-radius:var(--r-pill);
  background:var(--grad-brand-soft)}
.adm__main .stub{min-height:40rem}

/* ── 4-10b. 차트 자리 (.chart-slot) ─────────────────────────────────────
   통계 화면의 그래프 자리. 설계서에서는 **어떤 그래프가 어디에 들어가는지**만 정하고
   실제 렌더링은 개발 단계에서 차트 라이브러리로 붙인다.
   높이는 인라인으로 지정한다 — 화면마다 필요한 높이가 다르다. */
.chart-slot{display:grid;place-items:center;gap:var(--sp-2);
  border:.2rem dashed var(--line-soft);border-radius:var(--r-lg);
  background:linear-gradient(var(--grad-angle),#FBFCFE 0%,#F5F7FB 100%);
  color:var(--gray-50);font-size:var(--fs-xs);text-align:center}
.chart-slot b{font-size:var(--fs-sm);color:var(--gray-60)}

/* ── 4-11. 목록 유틸 (.bullets) ─────────────────────────────────────────
   ul,ol 의 마커를 전역에서 없앴기 때문에(list-style:none) 글머리표가 필요한 곳은
   이 클래스를 쓴다. 점은 셰브런이 아니라 원이다 — 셰브런은 브랜드 마크 자리이지
   본문 글머리표가 아니다(§6-3). */
.bullets{display:flex;flex-direction:column;gap:var(--sp-3)}
.bullets>li{position:relative;padding-left:1.8rem;font-size:var(--fs-sm);line-height:1.7;
  color:var(--gray-70);word-break:keep-all}
.bullets>li::before{content:'';position:absolute;left:.3rem;top:.85rem;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--primary-40)}

/* ── 4-12. 메일 본문 미리보기 (.mail) ───────────────────────────────────
   ★ 이 스타일은 **설계서에서 문구·구조를 확인하기 위한 것**이다.
     실제 메일 HTML 에는 쓸 수 없다 — 메일 클라이언트는 클래스도, CSS 커스텀 속성도
     지원하지 않는다. 메일은 인라인 스타일 + 표 레이아웃으로 따로 만든다.
   ★ 폭 480px 는 메일 본문의 실측 기준이다. 임의로 늘리지 말 것. */
.mail{max-width:48rem;border:.1rem solid var(--line-soft);border-radius:var(--r-lg);
  background:var(--white);overflow:hidden}
.mail__brand{display:flex;align-items:baseline;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-5);border-bottom:.1rem solid var(--line-soft)}
.mail__brand b{font-size:1.8rem;letter-spacing:-.03em;color:var(--navy-900)}
.mail__brand span{font-size:var(--fs-xs);color:var(--gray-60)}
.mail__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);
  font-size:var(--fs-sm);line-height:1.7}
.mail__body p{margin:0}
.mail__body .btn{margin-top:var(--sp-2)}
/* 인증 코드 — 숫자 간격을 벌려 읽고 옮겨 적기 쉽게 한다 */
.mail__code{align-self:center;margin:var(--sp-3) 0!important;padding:1rem 2rem;
  font-size:2.8rem;font-weight:800;letter-spacing:.6rem;color:var(--primary-70);
  background:var(--grad-brand-soft);border-radius:var(--r-lg);
  font-variant-numeric:tabular-nums}
.mail__foot{padding:var(--sp-4) var(--sp-5);border-top:.1rem solid var(--line-soft);
  background:var(--bg-soft);font-size:1.2rem;line-height:1.6;color:var(--gray-60)}

/* ── 4-16. Legal document — 처리방침 · 이용약관 ──────────────────────────
   길고 조문이 많은 문서 전용. 목적은 하나다 — **찾고 있는 조를 빨리 찾게 하는 것.**
   ★ 본문은 한 줄이 너무 길면 눈이 다음 줄을 놓친다. 76자 안팎으로 폭을 묶는다.
   ★ 조문 표는 긴 설명이 한 칸을 통째로 쓰므로 .tbl--wrap 을 붙인다
     (§6-4 의 nowrap 기본에 대한 정당한 예외다. 남용하지 말 것). */
.doc{max-width:88rem}
.doc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);
  margin-bottom:var(--sp-6);padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-lg);background:var(--bg-soft);
  border:.1rem solid var(--line-soft);font-size:var(--fs-sm);color:var(--gray-70)}
.doc__meta b{color:var(--navy-800);font-weight:700}
.doc__lead{margin:0 0 var(--sp-8);font-size:var(--fs-body);line-height:1.85;
  color:var(--gray-80);word-break:keep-all}

/* 바로가기 — 조 제목을 그대로 버튼으로 만든다.
   ★ 번호(제1조)를 앞에 세워 세로로 눈이 훑어 내려가게 한다.
   ★ 실제 조 제목을 그대로 쓴다. 목차용으로 줄여 쓰면 본문에서 못 찾는다. */
.doc__toc{margin:0 0 var(--sp-10);padding:var(--sp-5) var(--sp-6) var(--sp-6);
  border:.1rem solid var(--line);border-radius:var(--r-lg);background:var(--white);
  box-shadow:var(--dep-hl)}
.doc__toc-tit{display:flex;align-items:center;gap:var(--sp-2);
  margin:0 0 var(--sp-4);font-size:var(--fs-h4);font-weight:800;color:var(--navy-900)}
.doc__toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2) var(--sp-4);margin:0;padding:0;list-style:none}
.doc__jump{display:flex;align-items:baseline;gap:var(--sp-3);width:100%;
  padding:var(--sp-3);border:0;border-radius:var(--r-md);background:none;
  font-size:var(--fs-sm);line-height:1.5;color:var(--gray-80);text-align:left;
  cursor:pointer;transition:background .15s ease,color .15s ease}
.doc__jump:hover{background:var(--primary-5);color:var(--primary-70)}
.doc__jump:focus-visible{box-shadow:var(--sh-focus);outline:0}
.doc__jump b{flex:none;min-width:6.4rem;font-weight:700;color:var(--primary-60)}

/* 장(章) — 약관처럼 조가 많은 문서는 장으로 묶어야 구조가 보인다.
   ★ 처리방침(16조)은 장이 없고, 이용약관(28조+부칙)은 6장 + 부칙이다.
     장이 있는 문서만 .chap 을 쓴다. 없는 문서에 억지로 만들지 않는다. */
.chap{display:flex;align-items:center;gap:var(--sp-4);
  margin:var(--sp-12) 0 0;padding:var(--sp-4) var(--sp-6);
  border-radius:var(--r-lg);background:var(--grad-brand-ink);color:var(--white);
  box-shadow:var(--dep-hl),var(--dep-brand);scroll-margin-top:16rem}
.chap:first-child{margin-top:0}
.chap b{flex:none;padding:.4rem var(--sp-3);border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.02em}
.chap span{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em}
.chap+.art{border-top:0}

/* 바로가기 — 장이 있는 문서는 장별로 묶는다.
   ★ 28개를 한 줄로 늘어놓으면 목록이 아니라 벽이 된다. 장으로 나누면
     "몇 장에 있겠다" 로 범위를 먼저 좁힐 수 있다. */
/* ★ 그리드가 아니라 **다단(columns)** 이다. 그리드로 짜면 한 줄의 높이를
     그 줄에서 가장 긴 장(7조)이 정해 버려서, 짧은 장(4조) 아래에 큰 구멍이 생긴다.
     다단은 신문처럼 흘려 담기 때문에 구멍 없이 채워진다. */
.doc__toc--grouped ol{display:block;columns:3;column-gap:var(--sp-8)}
.doc__toc--grouped>ol>li{break-inside:avoid;margin-bottom:var(--sp-6)}
.doc__toc-ch{display:block;margin:0 0 var(--sp-2);padding:0 var(--sp-3) var(--sp-2);
  border-bottom:.1rem solid var(--line);
  font-size:var(--fs-xs);font-weight:800;color:var(--navy-800);letter-spacing:.02em}
.doc__toc-ch em{font-style:normal;color:var(--primary-60)}
.doc__toc--grouped ul{margin:0;padding:0;list-style:none}
.doc__toc--grouped .doc__jump{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
.doc__toc--grouped .doc__jump b{min-width:5.2rem}

/* 조 — 스크롤로 이동했을 때 제목이 sticky 헤더에 가리지 않도록 여백을 준다 */
.art{scroll-margin-top:16rem;padding-top:var(--sp-8)}
/* 바로가기로 이동하면 그 조에 포커스를 옮긴다 — 스크린리더가 새 위치를 읽게 하려는 것이다.
   ★ 다만 테두리는 그리지 않는다. 조문 전체가 파란 상자가 되면 눈에 거슬리고
     '선택된 것' 처럼 오해된다. 대신 배경을 잠깐 물들였다가 지운다 —
     어디로 왔는지는 보이면서, 읽는 데는 방해가 되지 않는다. */
/* ★ data-jump 로 이동한 대상 공통 규칙이다(.art · .laws>li · 앞으로 생길 것들).
     테두리를 그리지 않고 배경만 잠깐 물들인다. */
[data-jump-target]:focus,[data-jump-target]:focus-visible,
.art:focus,.art:focus-visible,.laws>li:focus,.laws>li:focus-visible{outline:0}
.is-target{animation:ap-target 1.8s ease-out 1}
@keyframes ap-target{
  0%,45%{background:var(--primary-5);box-shadow:0 0 0 1.2rem var(--primary-5)}
  100%{background:transparent;box-shadow:0 0 0 1.2rem transparent}}
@media (prefers-reduced-motion:reduce){.is-target{animation:none}}
.art+.art{border-top:.1rem solid var(--line-soft)}
.art__tit{display:flex;align-items:baseline;gap:var(--sp-3);
  margin:0 0 var(--sp-5);font-size:var(--fs-h3);font-weight:800;color:var(--navy-900)}
.art__tit i{flex:none;width:.4rem;height:2rem;border-radius:var(--r-pill);
  background:var(--grad-brand);align-self:center}
.art__body>*+*{margin-top:var(--sp-4)}
.art p{margin:0;font-size:var(--fs-body);line-height:1.85;color:var(--gray-80);
  word-break:keep-all}
/* 항 번호(①②)는 본문에 그대로 두되, 내어쓰기로 번호 줄을 세운다 */
.art .cl{padding-left:2.2rem;text-indent:-2.2rem}
/* 호(號) 목록 — "1. 2. 3." 은 **원문 그대로 글자**다. ol 의 자동 번호를 쓰면
   원문에 없는 번호가 덧붙거나 번호 체계가 달라진다. 내어쓰기로만 줄을 세운다. */
.art ol.doc-num{margin:var(--sp-2) 0 0;padding:0 0 0 2.6rem;list-style:none}
.art ol.doc-num li{margin-top:var(--sp-2);padding-left:2.4rem;text-indent:-2.4rem;
  font-size:var(--fs-body);line-height:1.85;color:var(--gray-80);word-break:keep-all}
.art ul.doc-list{margin:0;padding-left:2.2rem;list-style:none}
.art ul.doc-list li{position:relative;margin-top:var(--sp-2);
  font-size:var(--fs-body);line-height:1.85;color:var(--gray-80);word-break:keep-all}
.art ul.doc-list li::before{content:'·';position:absolute;left:-1.4rem;
  color:var(--primary-50);font-weight:800}
.art .tbl-wrap{margin-top:var(--sp-5)}
.art .tbl{font-size:var(--fs-sm)}
.art .tbl td{line-height:1.7;vertical-align:top}
.doc__totop{display:inline-flex;align-items:center;gap:var(--sp-2);
  margin-top:var(--sp-5);padding:0;border:0;background:none;cursor:pointer;
  font-size:var(--fs-xs);color:var(--gray-60)}
.doc__totop:hover{color:var(--primary-60)}
.doc__totop:focus-visible{box-shadow:var(--sh-focus);outline:0;border-radius:var(--r-sm)}

/* ── 4-17. Explainer — 서비스 소개 화면 전용 ─────────────────────────────
   「애드패스란?」처럼 **처음 온 사람에게 서비스를 정의하는** 화면의 부품들이다.
   ★ 원칙 하나 — 이 화면의 목적은 설득이 아니라 **오해를 없애는 것**이다.
     자율점검은 심의·인증과 혼동되기 쉽고(COR-001), 그 오해는 나중에
     민원과 분쟁이 된다. 그래서 '무엇인가' 만큼 '무엇이 아닌가' 를 크게 쓴다.
   ★ 마케팅 톤을 쓰지 않는다. 느낌표·최상급·수치 과장 금지(§8). */

/* 한 문장 정의 — 이 화면에서 가장 큰 글자. 스크롤 없이 읽히는 자리에 둔다 */
.def{margin:0 0 var(--sp-10);padding:var(--sp-8) var(--sp-10);
  border-radius:var(--r-xl);background:var(--grad-brand-ink);color:var(--white);
  box-shadow:var(--dep-hl),var(--dep-brand-lg)}
.def p{margin:0}
/* ★ 아이브로우와 본문을 선택자로 분리한다. .def p 로 한 번에 잡으면
     아이브로우까지 h2 크기가 되어 로고 글자가 제목보다 커진다. */
.def__eyebrow{display:flex;align-items:center;gap:var(--sp-2);
  margin:0 0 var(--sp-4)!important;font-size:var(--fs-sm);font-weight:700;color:#BBD5FF;
  letter-spacing:.06em}
.def__body{font-size:var(--fs-h2);line-height:1.55;font-weight:700;
  letter-spacing:-.06rem;word-break:keep-all}
.def b{color:#8FD3FF;font-weight:800}

/* 무엇인가 / 무엇이 아닌가 — 나란히 놓아야 경계가 보인다.
   ★ '아닙니다' 쪽을 흐리게 처리하지 않는다. 둘의 무게가 같아야 오해가 준다. */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);
  margin-bottom:var(--sp-10)}
.vs__col{padding:var(--sp-6);border-radius:var(--r-lg);
  border:.1rem solid var(--line);background:var(--white);box-shadow:var(--dep-hl)}
.vs__col--not{background:var(--bg-soft)}
.vs__tit{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-5);
  font-size:var(--fs-h4);font-weight:800;color:var(--navy-900);letter-spacing:-.03rem}
.vs__tit i{flex:none;width:2.8rem;height:2.8rem;border-radius:.8rem;display:grid;
  place-items:center;background:var(--grad-brand);box-shadow:var(--dep-brand),var(--dep-hl-strong)}
.vs__tit i::before{content:'';width:1.4rem;height:1rem;background:#fff;
  clip-path:polygon(0 52%,38% 100%,100% 8%,100% 30%,38% 100%,0 72%)}   /* 체크 */
.vs__col--not .vs__tit i{background:var(--grad-neutral);box-shadow:var(--dep-soft),var(--dep-hl)}
.vs__col--not .vs__tit i::before{width:1.3rem;height:1.3rem;
  clip-path:polygon(14% 0,50% 36%,86% 0,100% 14%,64% 50%,100% 86%,86% 100%,50% 64%,14% 100%,0 86%,36% 50%,0 14%)}
.vs ul{margin:0;padding:0;list-style:none}
.vs li{position:relative;padding-left:1.8rem;margin-top:var(--sp-4);
  font-size:var(--fs-body);line-height:1.7;color:var(--gray-80);word-break:keep-all}
.vs li:first-child{margin-top:0}
.vs li::before{content:'';position:absolute;left:0;top:1rem;width:.7rem;height:.7rem;
  border-radius:50%;background:var(--primary-40)}
.vs__col--not li::before{background:var(--gray-40)}
.vs li b{display:block;color:var(--navy-900);font-weight:800}

/* 이용 흐름 — 번호가 커야 '순서' 로 읽힌다. 화살표는 쓰지 않는다(모바일에서 깨진다).
   ★ 이름이 .flow 인 이유 — .steps 는 이미 **점검 신청 진행바**(4-x)가 쓰고 있다.
     같은 이름을 쓰면 진행바가 카드로 바뀐다. 실제로 한 번 겹쳤다. */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);
  margin:0;padding:0;list-style:none;counter-reset:fl}
.flow li{counter-increment:fl;position:relative;padding:var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius:var(--r-lg);border:.1rem solid var(--line);background:var(--white);
  box-shadow:var(--dep-hl)}
.flow li::before{content:'0' counter(fl);display:block;margin-bottom:var(--sp-3);
  font-family:var(--font-num);font-size:var(--fs-h3);font-weight:800;line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.flow b{display:block;margin-bottom:var(--sp-2);font-size:var(--fs-lg);font-weight:800;
  color:var(--navy-900);letter-spacing:-.03rem}
.flow span{display:block;font-size:var(--fs-sm);line-height:1.65;color:var(--gray-70);
  word-break:keep-all}

/* 등급 — 결과 화면의 .badge 를 그대로 가져와 뜻만 붙인다.
   ★ 여기서 새 색을 만들지 않는다. 소개 화면과 결과 화면의 색이 다르면
     사용자는 다른 것으로 읽는다. */
.grades{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-3)}
.grades li{display:flex;align-items:flex-start;gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6);border-radius:var(--r-lg);
  border:.1rem solid var(--line);background:var(--white);box-shadow:var(--dep-hl)}
.grades .badge{flex:none;min-width:8.4rem;justify-content:center}
.grades p{margin:0;font-size:var(--fs-body);line-height:1.7;color:var(--gray-80);
  word-break:keep-all}
.grades p b{display:block;color:var(--navy-900);font-weight:800}

/* 이용 대상 */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);
  margin:0;padding:0;list-style:none}
.who li{padding:var(--sp-6);border-radius:var(--r-lg);border:.1rem solid var(--line);
  background:var(--white);box-shadow:var(--dep-hl)}
.who b{display:block;margin-bottom:var(--sp-2);font-size:var(--fs-lg);font-weight:800;
  color:var(--navy-900)}
.who span{display:block;font-size:var(--fs-sm);line-height:1.7;color:var(--gray-70);
  word-break:keep-all}

/* 화면 안의 구획 제목 */
.sec{margin:var(--sp-12) 0 var(--sp-6)}
.sec:first-child{margin-top:0}
.sec h2{display:flex;align-items:center;gap:var(--sp-3);margin:0;
  font-size:var(--fs-h3);font-weight:800;color:var(--navy-900);letter-spacing:-.05rem}
.sec h2 i{flex:none;width:.4rem;height:2.2rem;border-radius:var(--r-pill);
  background:var(--grad-brand)}
.sec p{margin:var(--sp-3) 0 0 1.6rem;font-size:var(--fs-body);line-height:1.7;
  color:var(--gray-70);word-break:keep-all}

/* 마무리 — 다음 행동 두 개만 남긴다 */
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-10);padding:var(--sp-6) var(--sp-8);border-radius:var(--r-xl);
  border:.1rem solid var(--line);background:var(--bg-soft)}
.cta__txt{flex:1 1 24rem;min-width:0}
.cta__txt b{display:block;font-size:var(--fs-h4);font-weight:800;color:var(--navy-900);
  letter-spacing:-.03rem}
.cta__txt span{display:block;margin-top:.6rem;font-size:var(--fs-sm);color:var(--gray-70)}

/* ── 4-18. Criteria list — 자율 점검 기준 화면 ───────────────────────────
   116건을 한 번에 보여 주는 화면이다. 그래서 순서가 곧 사용성이다.
     ① 설명(무엇을 모았나) → ② 검색 → ③ 기관 바로가기 → ④ 목록
   ★ 검색은 이름을 아는 사람이 쓰고, 기관 바로가기는 **이름을 모르는 사람**이 쓴다.
     둘 다 있어야 한다. 검색만 두면 '식약처 것만 보고 싶다' 를 못 한다. */

/* 설명 — 세 가지만. 이 화면의 주인공은 목록이지 설명이 아니다 */
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);
  margin:0 0 var(--sp-10);padding:0;list-style:none}
.notes li{padding:var(--sp-5) var(--sp-6);border-radius:var(--r-lg);
  border:.1rem solid var(--line);background:var(--white);box-shadow:var(--dep-hl)}
.notes b{display:block;margin-bottom:var(--sp-2);font-size:var(--fs-sm);font-weight:800;
  color:var(--primary-60);letter-spacing:.02em}
.notes span{display:block;font-size:var(--fs-sm);line-height:1.7;color:var(--gray-80);
  word-break:keep-all}

/* 기관 바로가기 — 칩. 누르면 아래 목록의 해당 기관으로 스크롤한다(data-jump) */
.orgnav{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.orgnav button{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:4rem;
  padding:0 var(--sp-4);border-radius:var(--r-pill);border:.1rem solid var(--line);
  background:var(--white);cursor:pointer;font-size:var(--fs-sm);font-weight:600;
  color:var(--navy-800);box-shadow:var(--dep-hl);
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.orgnav button:hover{border-color:var(--primary-40);color:var(--primary-70);
  background:var(--primary-5)}
.orgnav button:focus-visible{box-shadow:var(--sh-focus);outline:0}
.orgnav b{font-family:var(--font-num);font-size:var(--fs-xs);font-weight:800;
  color:var(--gray-50)}
.orgnav button:hover b{color:var(--primary-50)}

/* 목록 — 기관별 그룹 */
.laws{margin:0;padding:0;list-style:none}
.laws>li{padding:var(--sp-6) 0;border-top:.1rem solid var(--line);scroll-margin-top:16rem}
.laws>li:first-child{border-top:0;padding-top:0}
.laws__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-4)}
.laws__org{font-size:var(--fs-h4);font-weight:800;color:var(--navy-900);
  letter-spacing:-.03rem}
.laws__cnt{padding:.3rem var(--sp-3);border-radius:var(--r-pill);
  background:var(--primary-5);color:var(--primary-60);
  font-family:var(--font-num);font-size:var(--fs-xs);font-weight:800}
.laws__head .btn{margin-left:auto}
.laws ul{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-6)}
.laws ul li{position:relative;padding:.6rem 0 .6rem 1.6rem;
  font-size:var(--fs-sm);line-height:1.6;color:var(--gray-80)}
.laws ul li::before{content:'';position:absolute;left:0;top:1.35rem;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--gray-40)}
/* 법령 제목 자체가 국가법령정보센터 링크다. 새 탭으로 연다 */
.laws a{color:var(--navy-800);text-decoration:none;border-bottom:.1rem solid transparent}
.laws a:hover{color:var(--primary-60);border-bottom-color:var(--primary-40)}
.laws a::after{content:'';display:inline-block;width:.9rem;height:.9rem;
  margin-left:.5rem;vertical-align:-.05rem;background:currentColor;opacity:.45;
  -webkit-mask:var(--ico-ext) center/contain no-repeat;mask:var(--ico-ext) center/contain no-repeat}
.laws .num{color:var(--gray-50);font-family:var(--font-num);font-size:var(--fs-xs)}
:root{--ico-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2H2v12h12v-4h-2v2H4V4h2V2z'/%3E%3Cpath d='M9 2h5v5h-2V4.4L7.7 8.7 6.3 7.3 10.6 3H9V2z'/%3E%3C/svg%3E")}

/* ── 4-19. FAQ — 자주 묻는 질문 ──────────────────────────────────────────
   ★ 접고 펴는 데 자바스크립트를 쓰지 않는다. <details>/<summary> 는 브라우저가
     키보드 조작과 스크린리더 안내까지 기본으로 해 준다. 직접 만들면 그걸 다시
     만들어야 하고, 대개 덜 만든다.
   ★ 분류 탭과 검색만 JS 로 거른다(part7 · initFaq). */
.faq__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  margin-bottom:var(--sp-6)}
.faq__bar .pills{flex:1 1 auto}
.faq__count{flex:none;font-size:var(--fs-sm);color:var(--gray-60)}
.faq__count b{color:var(--primary-60);font-family:var(--font-num);font-weight:800}

.qa{border-bottom:.1rem solid var(--line-soft)}
.qa:first-of-type{border-top:.2rem solid var(--navy-900)}
.qa[hidden]{display:none}
.qa>summary{position:relative;display:flex;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-5) 4.4rem var(--sp-5) 0;cursor:pointer;list-style:none;
  font-size:var(--fs-body);font-weight:700;color:var(--navy-900);line-height:1.6;
  word-break:keep-all}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:hover{color:var(--primary-60)}
.qa>summary:focus-visible{outline:0;box-shadow:var(--sh-focus);border-radius:var(--r-sm)}
/* Q 표식 — 배지·알럿과 같은 도형 언어(라운드 사각 칩) */
.qa>summary::before{content:'Q';flex:none;width:2.6rem;height:2.6rem;margin-top:.1rem;
  border-radius:.7rem;background:var(--grad-brand);color:#fff;
  font-family:var(--font-num);font-size:1.3rem;font-weight:800;
  display:grid;place-items:center;box-shadow:var(--dep-brand),var(--dep-hl-strong)}
/* 펼침 표시 — 셰브런을 돌린다. +/− 기호를 쓰지 않는다 */
.qa>summary::after{content:'';position:absolute;right:.6rem;top:2.4rem;
  width:1.1rem;height:1.1rem;border-right:.2rem solid var(--gray-50);
  border-bottom:.2rem solid var(--gray-50);transform:rotate(45deg);
  transition:transform .2s ease,border-color .2s ease}
.qa[open]>summary::after{transform:rotate(-135deg);border-color:var(--primary-50)}
.qa[open]>summary{color:var(--primary-70)}

.qa__a{display:flex;gap:var(--sp-4);padding:0 var(--sp-5) var(--sp-6) 0;
  animation:qa-in .18s ease-out}
@keyframes qa-in{from{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qa__a{animation:none}}
.qa__a::before{content:'A';flex:none;width:2.6rem;height:2.6rem;border-radius:.7rem;
  background:var(--gray-10);color:var(--gray-60);
  font-family:var(--font-num);font-size:1.3rem;font-weight:800;
  display:grid;place-items:center}
.qa__a>div{min-width:0}
.qa__a p{margin:0;font-size:var(--fs-body);line-height:1.85;color:var(--gray-80);
  word-break:keep-all}
.qa__a p+p{margin-top:var(--sp-3)}
.qa__a ul{margin:var(--sp-3) 0 0;padding-left:1.8rem}
.qa__a li{font-size:var(--fs-body);line-height:1.8;color:var(--gray-80);
  word-break:keep-all;margin-top:.4rem}
/* 근거 조항 — 답변이 어디서 나왔는지 밝힌다. 이 서비스에서는 이게 신뢰의 전부다 */
.qa__src{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-4);
  padding:.5rem var(--sp-3);border-radius:var(--r-sm);background:var(--primary-5);
  font-size:var(--fs-xs);color:var(--primary-70);line-height:1.5}
.qa__src::before{content:'';flex:none;width:.4rem;height:1.2rem;border-radius:var(--r-pill);
  background:var(--grad-brand)}
/* 대상 배지 — 그 문항이 누구 이야기인지 */
.qa__for{flex:none;align-self:center;margin-left:auto;padding:.3rem var(--sp-3);
  border-radius:var(--r-pill);border:.1rem solid var(--line);background:var(--bg-soft);
  font-size:var(--fs-xs);font-weight:700;color:var(--gray-60);white-space:nowrap}
.qa__for--admin{border-color:#C9D6F5;background:#EEF3FF;color:var(--primary-70)}

.faq__empty{padding:var(--sp-15) 0;text-align:center;color:var(--gray-60);
  font-size:var(--fs-sm)}

/* ══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1200px){
  .doc__toc ol{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .doc__toc--grouped ol{columns:1}
  /* ★ 세로로 쌓을 때 폭을 명시한다. .l-body 는 align-items:flex-start 라서
       세로 배치가 되면 자식이 **내용 크기**로 커진다 — 표가 든 화면에서
       본문 칼럼이 화면 밖으로 삐져나가 문서 전체에 가로 스크롤이 생긴다. */
  .l-main,.lnb{width:100%}
  .l-body{flex-direction:column;gap:var(--sp-8)}
  .lnb{width:100%;flex:none}
  .lnb__list{display:flex;flex-wrap:wrap}
  .lnb__link{border-bottom:0;border-right:.1rem solid var(--line-soft)}
}
@media (max-width:768px){
  .qa>summary{padding-right:3.4rem;font-size:var(--fs-sm)}
  .qa__for{display:none}
  .notes,.laws ul{grid-template-columns:minmax(0,1fr)}
  /* ★ 이 규칙은 반드시 **뒤쪽 RESPONSIVE 블록**에 있어야 한다.
       앞쪽(히어로용) 768 블록에 두면, 그보다 아래에 있는 1200 블록의
       .flow{2열} 이 나중에 나와 이겨 버린다 — 실제로 한 번 그렇게 깨졌다. */
  .vs,.flow,.who{grid-template-columns:minmax(0,1fr)}
  .def{padding:var(--sp-6)}
  .def__body{font-size:var(--fs-h3)}
  .grades li{flex-direction:column;gap:var(--sp-3)}
  :root{--fs-h1:2.8rem;--fs-h2:2.2rem;--fs-h3:1.9rem;--gutter:1.6rem}
  .gnb__list{overflow-x:auto}
  .gnb__link{padding:0 var(--sp-4);font-size:1.6rem}
  .steps{flex-direction:column}
  .steps li{border-right:0;border-bottom:.1rem solid var(--line-soft)}
  .grade{flex-direction:column;align-items:flex-start}
  .adm{flex-direction:column}
  .adm__nav{width:100%;flex:none}
  .form-grid>[class*="col-"]{grid-column:span 12}
  .quick__item{min-height:6.4rem;font-size:var(--fs-xs)}
  .quick__item--brand{font-size:var(--fs-sm);padding:0 var(--sp-4)}
}
@media print{
  .gnb,.lnb,.adm__nav,.btn-list{display:none!important}
  .card{break-inside:avoid}
}


/* ══════════════════════════════════════════════════════════════════════════
   서버 보정 — 배포본(디자이너)에 없고 서버 구현에만 필요한 최소 규칙.
   ★ 여기에 **새 컴포넌트 클래스를 만들지 않는다.** 요소 기본값 보정만 둔다.
     디자인 어휘가 필요하면 docs/design/GAPS.md 에 적고 회신을 기다린다(P4).

   (1) 확인 모달 — 감사 대상 액션(룰셋 업로드 COR-003 · 결제 취소 · 환불 승인/거절 ·
       수동 재시도)의 확인 단계다. v2 에 모달 컴포넌트가 없어 <dialog> 요소로 간다
       (09-07 A4-1 확정 — PORTING-GUIDE 「모달 패턴」).
       ·  <dialog> 의 UA 기본 테두리·여백을 지우고 안쪽 .card 가 껍데기를 맡는다.
       ·  ::backdrop 은 인라인 style 로 줄 수 없어 여기 둔다(그래서 이 절이 필요하다).
   ══════════════════════════════════════════════════════════════════════════ */
dialog{border:0;padding:0;background:transparent;max-width:min(92vw,52rem);width:100%}
dialog::backdrop{background:rgba(11,22,48,.45)}
dialog .card{margin:0}

/* (2) 좁은 폭에서 본문이 뷰포트를 넘는다 — v2 반응형 규칙의 공백(09-07 A5 실측).
   `.l-body{align-items:flex-start}` 는 가로 배치(LNB | 본문)에서 LNB 높이를 내용에 맞추려는
   규칙인데, 1200px 이하에서 `flex-direction:column` 이 되면 교차축이 **가로**로 바뀐다.
   그 순간 `.l-main` 이 늘어나지 않고 **자기 내용 폭(fit-content)** 을 갖게 되어,
   390px 화면에서 본문이 546px 로 부풀고 **페이지 전체가 가로 스크롤**된다.
   ★ 표(.tbl-wrap)는 원래 자기 안에서 가로 스크롤한다 — 그건 설계 의도이고 이것과 다른 문제다. */
@media (max-width:1200px){
  .l-body{align-items:stretch}
}

/* (3) 본문 바로가기(스킵 링크) — 키보드 사용자가 GNB·LNB 를 매 화면 지나치지 않게 한다(가이드 §11).
   ★ **클래스를 만들지 않고 속성 선택자로 건다** — 이 절의 규칙(새 컴포넌트 클래스 금지)을 지키면서
     `:focus` 상태 변화를 주려면 이 방법뿐이다(인라인 style 로는 :focus 를 쓸 수 없다).
   평소에는 화면 밖에 두고 **포커스를 받을 때만** 좌상단에 나타난다 — 시각 디자인은 바뀌지 않는다.
   ★ **`body >` 로 좁히는 것이 이 규칙의 필수 조건이다**(09-08 실측 사고). 스킵 링크는
     `layout/_root.html` 이 body 직계로 두는 **그 하나뿐**인데, 도착지가 같은 `#main` 이라는
     이유로 처방·약관의 「↑ 맨 위로」(`a.doc__totop[href="#main"]`)까지 함께 걸렸다.
     속성 선택자 (0,1,1) 가 `.doc__totop` (0,1,0) 을 이겨 `position:absolute;left:-9999px` 가
     그대로 먹으므로 **버튼이 화면 밖으로 사라진다** — 조문 16·28개마다 하나씩, 전부.
     오류가 없고 마크업도 멀쩡해서 "CSS 충돌 같은데 원인을 모르겠다"로만 드러난다.
     「맨 위로」의 도착지를 딴 곳으로 돌리는 것은 답이 아니다 — 설계서 `data-jump="__top"` 의
     변환 규칙이 **스킵 링크와 같은 도착지**로 못박고 있다(GAPS.md §0-c 서버 변환 2번). */
body > a[href="#main"]{position:absolute;left:-9999px;top:0;z-index:100;
  padding:var(--sp-3) var(--sp-5);background:var(--navy-900);color:var(--white);
  border-radius:0 0 var(--r-md) 0;font-size:var(--fs-sm);font-weight:700}
body > a[href="#main"]:focus{left:0}

/* (4) 푸터 아래 흰 여백 제거 — 내용이 짧은 화면(메인·오류·계정 화면)에서 푸터의 검은 배경이
   창 아래까지 닿지 않고 흰 바닥이 드러났다(09-07 지적). 푸터를 늘리는 것이 아니라
   **본문을 남은 높이만큼 늘려** 푸터를 바닥으로 내린다 — 푸터 자체의 높이를 키우면
   내용이 긴 화면에서 검은 띠가 과하게 두꺼워진다.
   ★ 이 절의 규칙대로 **새 클래스를 만들지 않고 요소 선택자로** 건다.
     밀어내는 쪽은 `body > footer` 다 — 본문을 늘리는 방식(`main{flex:1}`)은 셸마다
     main 의 위치가 달라(공개 셸의 LNB 갈래·마이페이지 셸은 main 이 `.l-body` 안에 있다)
     한 선택자로 잡히지 않는다. 푸터는 셋 다 body 의 직계라 여기가 유일한 공통점이다.
     운영 셸(base_admin)에는 푸터가 없어 이 규칙이 걸리지 않는다 — 원래 전체 높이를 쓴다.
   ★ .hd-wrap 은 sticky 라 flex 흐름에 그대로 얹힌다(위치 계산이 바뀌지 않는다).
   ★ 100vh 가 아니라 100dvh 를 함께 준다 — 모바일 브라우저는 주소창 높이 때문에
     100vh 가 실제 보이는 높이보다 커서 처음부터 스크롤이 생긴다. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body > footer{margin-top:auto}

/* (4-b) 메인만 — 푸터가 남은 높이를 **먹는다**(09-07 지시).
   서브 화면은 위 (4) 대로 푸터 높이를 그대로 두고 바닥에 붙이기만 한다. 메인은 히어로 아래가
   비어 있어 그 방식이면 히어로와 푸터 사이에 흰 띠가 남는다 — 메인에서는 그 자리를 검게 채운다.
   ★ 화면 구분을 body 클래스로 만들지 않는다(셸 3종을 고치지 않으려는 것) — 본문에 이미 있는
     화면 식별자를 `:has()` 로 거슬러 본다. 마크업 계약(`data-screen`)이 곧 선택자다.
   ★ 푸터 내용은 위에 그대로 있고 **아래로 검은 여백만 늘어난다** — 늘어난 만큼 가운데로
     퍼뜨리지 않는다(주소·연락처 줄이 화면마다 다른 높이에 오면 그게 더 어색하다). */
body:has([data-screen="SCR-MAIN-001"]) > footer{flex:1 0 auto}

/* (5) 메인 배너 리모콘이 잘리거나 겹친다 — v2.8 배포본의 전제(콘텐츠가 충분히 많다)가
   서버에서는 성립하지 않는다(09-07 실측). 리모콘은 `transform:translateY(--ctrl-drop 5rem)`
   으로 **레이아웃 밖으로** 5rem 내려가 있어서, 아래에 그만큼의 여백이 있을 때만 제자리다.
     ⓐ 2단(>1200px) — 히어로 높이는 좌우 중 큰 쪽이 정한다. 배포본은 우측 카드가
        더 크다고 보지만(주석 "우측 카드 3장 700px"), 공지·FAQ 가 적으면 좌측이 커져
        리모콘이 `.hero{overflow:hidden}` 에 **17px 잘렸다**(공지 1·FAQ 1 실측).
        게시물 수는 운영 데이터라 화면이 그것에 좌우돼선 안 된다 → 최소 높이를 준다.
        56rem = 좌측 컬럼(트랙 36rem + 리모콘)과 5rem 드롭이 padding 안에 들어가고도
        1rem 이 남는 값이다(55rem 이면 리모콘 바닥이 히어로 경계선에 2px 까지 붙는다).
        우측이 큰 정상 상태에서는 이미 그보다 커서 **아무 변화가 없다**(실측 60.6rem).
     ⓑ 1단(≤1200px) — 우측 컬럼이 배너 **아래로** 내려오는데 열 간격(--sp-6)보다 드롭이
        커서 리모콘이 공지 카드 위에 26px 겹쳤다. 적층에서는 드롭이 의미가 없다(아래가
        여백이 아니라 다음 블록이다) → 0 으로 되돌린다. 위치·크기는 그대로다. */
@media (min-width:1201px){
  .hero__inner{min-height:56rem}
}
@media (max-width:1200px){
  .hero__ctrl{--ctrl-drop:0}
}

/* (6) 메인 우측 공지·FAQ 카드는 **게시물이 없어도 시안 높이를 지킨다**(09-07 지시).
   게시물 수는 운영 데이터인데 그것이 배너 옆 컬럼의 높이를, 나아가 히어로 띠 전체의
   높이를 정하고 있었다 — 공지가 1건이면 배너 아래가 뜨고, 4건이 되면 띠가 늘어난다.
   값은 시안(공지 3행·FAQ 5행)을 **실측**한 것이다(1440·1024 동일):
     공지 카드 203px = 머리 57 + 본문 146   /   FAQ 카드 252px = 머리 57 + 본문 195
   머리(제목+더보기)는 자연 높이 그대로 두고 **본문에만** 최소 높이를 준다 — 반응형에서
   머리 높이가 달라져도 카드 총 높이가 알아서 따라간다.
   ★ 행 수를 바꾸려면 여기 값도 함께 고친다(공지 1행 ≈ 4.4rem · FAQ 1행 ≈ 3.9rem).
     노출 건수의 원천은 `routers/public.py` 의 NOTICE_ON_MAIN·FAQ_ON_MAIN 이다.
   ★ 이 규칙이 있으면 우측 컬럼이 항상 54.2rem 이라 (5)-ⓐ 의 조건도 저절로 성립한다.
     (5) 는 카드 구성이 바뀌어도 리모콘이 잘리지 않게 하는 마지막 방어선으로 남긴다. */
.hero__side [data-region="notice"] .card__body{min-height:14.6rem}
.hero__side [data-region="faq"] .card__body{min-height:19.5rem}

/* (7) 문서 바로가기가 <button> 이 아니라 <a> 다 — 설계서는 SPA 라 data-jump 로 스크롤하지만
   서버는 평범한 앵커를 쓴다(설계서 SCR-POLICY-001 머리말이 지시한 변환 · `.art{scroll-margin-top}`
   이 sticky 헤더 가림을 대신 막는다). 그때 `a:hover{text-decoration:underline}`(198행)이
   되살아나 조문 목록 전체에 밑줄이 생긴다 — `.gnb__link:hover`·`.btn:hover` 가 같은 이유로
   text-decoration 을 끄고 있는 것과 같은 보정이다.
   ★ 이 절의 규칙대로 **새 클래스를 만들지 않는다** — 배포본 클래스에 요소 선택자를 더할 뿐이다. */
a.doc__jump:hover,a.doc__totop:hover{text-decoration:none}

/* (8) 「기관 홈페이지」 버튼의 아래 테두리가 사라진다 — 배포본 결함(09-07 v3.2 실측).
   `.laws a`(1291행)는 **법령 제목 링크**를 꾸미려는 규칙인데 셀렉터가 `.laws` 안의 모든 <a> 를
   잡는다. 그룹 머리의 `<a class="btn btn--sm">기관 홈페이지</a>` 도 `.laws` 안에 있어 함께 걸린다:
     · `.laws a{border-bottom:.1rem solid transparent}` (0,1,1) 이 `.btn{border:.1rem solid var(--line)}`
       (0,1,0) 을 이겨 **버튼 아래 테두리만 투명**해진다 — 3면만 남아 깨져 보이는 것이 이 증상이다.
     · hover 시엔 `.laws a:hover{border-bottom-color:var(--primary-40)}` (0,2,1) 이
       `.btn:hover{border-color:var(--gray-50)}` (0,2,0) 을 이겨 아래만 파란 줄이 그어진다.
     · `.laws a{color:var(--navy-800)}` 가 `.btn{color:var(--gray-80)}` 도 덮는다.
   ★ 되돌리는 값은 `.btn` 의 원래 값 그대로다 — 새 모양을 만들지 않는다.
     외부링크 아이콘(`.laws a::after`)은 **남긴다** — 이 버튼도 실제로 새 탭 외부 링크다.
   ★ 근본 수정은 배포본에서 셀렉터를 좁히는 것이다(`.laws ul a` 또는 `.laws li > a`).
     그 배포가 오면 이 규칙을 지운다 — docs/design/GAPS.md §0-c. */
.laws__head .btn{color:var(--gray-80);border-bottom-color:var(--line)}
.laws__head .btn:hover{color:var(--gray-80);border-bottom-color:var(--gray-50)}

/* (9) 기관 바로가기 칩이 **글자로만** 나온다 — 배포본이 칩 모양을 `.orgnav button` 이라는
   **요소 선택자**에 걸었기 때문이다(1260행). 설계서는 SPA 라 `<button data-jump>` 로 스크롤하지만
   서버는 평범한 앵커(`<a href="#org-1">`)를 쓴다(위 (7)과 같은 변환) — 그래서 규칙이 하나도 안 걸린다.
   ★ `.doc__jump`·`.doc__totop` 은 클래스 선택자라 요소가 바뀌어도 그대로 먹었다. 여기만 다르다.
   ★ 값은 배포본 `.orgnav button` 원문 그대로다 — 새 모양을 만들지 않는다.
     `<a>` 에는 `cursor:pointer` 가 기본이라 그 한 줄만 뺐고, 대신 `a:hover` 밑줄을 끈다((7)과 같은 이유).
   ★ 근본 수정은 배포본에서 셀렉터를 `.orgnav :is(a,button)` 로 넓히는 것이다.
     그 배포가 오면 이 규칙을 지운다 — docs/design/GAPS.md §0-c. */
.orgnav a{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:4rem;
  padding:0 var(--sp-4);border-radius:var(--r-pill);border:.1rem solid var(--line);
  background:var(--white);font-size:var(--fs-sm);font-weight:600;
  color:var(--navy-800);box-shadow:var(--dep-hl);
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.orgnav a:hover{border-color:var(--primary-40);color:var(--primary-70);
  background:var(--primary-5);text-decoration:none}
.orgnav a:focus-visible{box-shadow:var(--sh-focus);outline:0}
.orgnav a:hover b{color:var(--primary-50)}

/* (10) 운영자 셸의 「로그아웃」이 **어두운 배경에 회색 버튼**으로 나온다 — (9)와 같은 부류다.
   배포본은 `.adm__user a{color:var(--brand-light)}` 로 **요소 선택자**에 색을 걸었는데(541행),
   서버는 그 자리를 `<button data-action="AUTH_LOGOUT">` 으로 둔다. 로그아웃은 세션을 바꾸는
   동작이라 `<a href="#">` 보다 button 이 맞고(린트 L5 도 그 방향이다) 이 선택은 바꾸지 않는다.
   `.adm__user` 는 반투명 흰 배경(rgba(255,255,255,.07))을 깐 **네이비 네비 안**이라,
   규칙이 안 걸리면 브라우저 기본 버튼(회색 바탕·검은 글자)이 그대로 드러난다.
   ★ 값은 배포본 `.adm__user a` 와 같은 색이고, 나머지는 button 기본값을 지우는 리셋뿐이다.
   ★ 근본 수정은 셀렉터를 `.adm__user :is(a,button)` 으로 넓히는 것 — docs/design/GAPS.md §0-c. */
.adm__user button{border:0;padding:0;background:none;cursor:pointer;
  font:inherit;color:var(--brand-light)}
.adm__user button:hover{text-decoration:underline}
/* (11) 푸터의 협회명(`.ft__org`)이 협회 홈페이지 **링크**다(09-09 지시 — 헤더의 `.hd__owner` 칩을
   없애고 이 자리로 옮겼다. 배포본 `.hd__owner` 규칙(238행)은 이제 아무 요소에도 안 걸린다).
   배포본은 `<p class="ft__org">` 평문이라 `a` 규칙이 없다 — 기본 `a{color:inherit}`(199행)·
   `a:hover` 밑줄이 그대로 걸리므로 색·밑줄은 손대지 않는다(흰색 상속 + hover 밑줄).
   외부 링크 아이콘만 배포본 `.laws a::after`(1298행)와 같은 그림(`--ico-ext`)을 currentColor 마스크로 단다 —
   새 클래스 없이 「기존 클래스 + 요소」로만 건다.
   ★ 근본 수정은 배포본이 이 자리를 링크로 인정하는 것 — docs/design/GAPS.md §0-c. */
.ft__org a::after{content:'';display:inline-block;width:1rem;height:1rem;
  margin-left:.5rem;vertical-align:-.1rem;background:currentColor;opacity:.7;
  -webkit-mask:var(--ico-ext) center/contain no-repeat;mask:var(--ico-ext) center/contain no-repeat}

/* (12) 알림 토스트 — 화면 상단에서 1/3 지점의 레이어(09-08 확정 · 위치는 09-08 조정).
   폼 하단 인라인 알림은 스크롤이 긴 화면(회원가입)에서 시선 밖에 열려 사용자가 인지하지 못했다.
   ★ **새 클래스를 만들지 않는다** — 컨테이너는 `[data-toast]` 속성 선택자, 내용물은 기존 `.alert`.
     (3) 스킵 링크와 같은 회피법이다.
   ★ `<dialog>` 가 아니라 **popover 요소**인 이유는 두 가지다.
     ① showModal() 은 포커스를 뺏어 입력 중이던 자리를 잃는다. popover=manual 은 뺏지 않는다.
     ② 그런데도 **top-layer** 라서 확인 모달 위에 뜬다 — 일반 fixed 는 z-index 를 얼마로 주든
        `::backdrop` 뒤로 깔려, 모달을 띄운 화면(운영 9곳)의 오류 알림이 보이지 않는다.
   ★ 아래 규칙은 (1) 의 `dialog` 보정과 같은 성격 — popover 의 UA 기본값
     (`border:solid`·`padding:.25em`·`background:canvas`)을 벗겨 안쪽 `.alert` 가 그대로 드러나게 한다.
   ★ **`inset` 의 좌우 0 과 `margin:0 auto` 는 한 쌍이다 — 둘 중 하나만 지우면 좌상단에 붙는다**
     (09-08 실제로 그랬다). `<dialog>` 는 showModal() 이 스스로 가운데를 잡아 주지만 popover 는
     이 둘이 그 역할을 한다: 좌우 0 이 폭의 기준을 만들고 `margin:… auto` 가 가로 중앙에 세운다.
     세로는 `top:33vh`(상단에서 1/3) 로 고정하고 `bottom:auto` 로 아래를 풀어 준다 —
     정중앙(`inset:0` + `margin:auto`)보다 위라 시선이 먼저 닿는다(09-08 지시).
   ★ `max-height` 는 top 과 짝이다. 33vh 아래로 60vh 면 93vh 라 여백이 남는다 —
     top 을 내리면 이 값도 함께 줄일 것(안 그러면 긴 알림이 화면 밖으로 흘러 닫기 버튼을 못 누른다).
   ★ 컨테이너는 클릭을 통과시키고 알림 상자만 받는다 — 안 그러면 빈 영역이 뒤 화면을 덮는다.
   ★ 자동으로 사라지지 않는다(09-08 지시) — 닫기 버튼은 44x44(가이드 §11 터치 타깃). */
[data-toast]{inset:33vh 0 auto;margin:0 auto;border:0;padding:0;background:transparent;overflow:visible;
  width:min(92vw,52rem);max-width:none;height:fit-content;max-height:60vh;pointer-events:none}
[data-toast] .alert{pointer-events:auto;margin-bottom:var(--sp-3);box-shadow:var(--sh-2);
  animation:adpass-toast-in .22s ease-out}
[data-toast] .alert:last-child{margin-bottom:0}
/* 본문은 개행을 살린다 — 아이디 찾기 결과처럼 여러 줄로 오는 문구가 있다(textContent 라 \n 뿐이다). */
[data-toast] .alert > div{white-space:pre-line}
/* ★ 음수 마진이 핵심이다 — 버튼은 44x44(터치 타깃)를 유지하되 **상자 높이를 밀어 올리지 않는다.**
   `.alert` 의 상하 padding 이 1.6rem, 아이콘이 2.4rem 인데 버튼이 4.4rem 이면 콘텐츠 높이가
   버튼에 끌려가고, `.alert` 는 `align-items:flex-start` 라 글이 위에 붙어 **아래 여백만 커진다**.
   상하 -1rem 이면 차지 높이가 2.4rem 이 되어 아이콘과 같아진다(위아래 1.6rem 대칭).
   가로 -.8rem 은 44px 안에서 × 글리프가 작아 우측이 넓어 보이는 것을 되돌린다. */
[data-toast] .alert > button{margin:-1rem -.8rem -1rem auto;flex:none;align-self:center;
  width:4.4rem;height:4.4rem;border:0;border-radius:var(--r-md);background:transparent;
  color:inherit;font-size:2rem;line-height:1;cursor:pointer}
[data-toast] .alert > button:hover{background:rgba(0,0,0,.06)}
/* @keyframes 는 클래스가 아니라 린트 L1b 대상이 아니다. */
@keyframes adpass-toast-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[data-toast] .alert{animation:none}}

/* (13) 성공 알림 톤 — **이 절의 「새 컴포넌트 클래스 금지」에 대한 명시적 예외 1건**이다(09-08 승인).
   ★ 새 색을 만드는 것이 아니다. `--safe-*`·`--grad-safe` 는 이미 정의돼 있고 `.badge--safe` 가 쓴다.
     `.alert` 에만 변형이 없어서(--warn/--caution/--neutral 3종) 성공 메시지가 오류와 같은
     정보색(파랑)으로 나가고 있었다 — 알림이 중앙 레이어로 올라오면서 그 구분이 더 필요해졌다.
   ★ 배포본 정본화를 요청해 둔다 — docs/design/GAPS.md §1. 회신이 오면 이 두 줄을 지우면 된다.
   ★ 템플릿에는 나타나지 않고 app.js 가 붙인다 — dead_selectors.py 의 미사용 후보는 오탐이다. */
.alert--safe{border-color:var(--safe-line);background:var(--safe-bg);color:var(--safe-text)}
.alert--safe .alert__ico{background:var(--grad-safe);box-shadow:var(--dep-soft),var(--dep-hl-strong)}

/* (14) FAQ 문항으로 바로 가는 앵커(`#faq-N`)가 sticky 헤더에 가린다 — (7)(9)와 같은 부류다.
   배포본은 SPA 라 메인 카드의 질문이 `data-nav` 로 **목록 화면만** 열지만, 서버는 평범한 앵커로
   그 문항까지 보낸다(가이드 §7-4 ③이 지시한 변환 · 09-08 통합테스트 TC-MAIN-001-07).
   ★ 값은 `.art`·`.laws>li`·`.chap` 과 같은 16rem 이다 — 새 값을 만들지 않는다.
   ★ 새 클래스가 아니라 배포본 클래스(`.qa`)의 속성 하나를 더할 뿐이다(이 절의 규칙).
   ★ 근본 수정은 배포본 「4-19. FAQ」 절에 이 한 줄이 들어가는 것 — docs/design/GAPS.md §0-c. */
.qa{scroll-margin-top:16rem}

/* (15) 처리방침·이용약관 본문을 페이지 머리의 검은 줄(본문 컬럼 전폭)에 맞춘다(09-10 지시).
   배포본 「4-16. Legal document」는 가독 폭(76자 안팎)을 이유로 `.doc{max-width:88rem}`(1042행)을
   두는데, 그러면 본문 오른쪽이 `.pagehead` 의 밑줄보다 안쪽에서 끝나 다른 화면과 어긋나 보인다.
   ★ 새 클래스가 아니라 배포본 클래스(`.doc`)의 속성 하나를 되돌릴 뿐이다(이 절의 규칙).
   ★ 근본 수정은 배포본에서 그 한 줄을 빼거나 값을 정하는 것 — docs/design/GAPS.md §0-c. */
.doc{max-width:none}

/* (16) 대시보드 「최근 신청 건」 표의 셀 여백을 줄인다(09-10 지시 — 캠페인명이 최대한 보이게).
   카드 폭이 8/12 컬럼이라 신청번호(23자)·회원ID·회원명·상태·등급을 두면 `.tbl td{padding:var(--sp-4)}`
   양쪽 1.6rem 이 6열 × 3.2rem = 19rem 을 먹고 캠페인명은 9rem 에서 잘렸다.
   ★ 새 클래스가 아니라 화면의 `data-region="recent"` 아래 배포본 클래스(`.tbl`)의 속성만 덮는다(이 절의 규칙).
     `[data-region="recent"]` 는 SCR-DASH-001 카드 하나뿐이라 다른 표에 번지지 않는다(속성 선택자 범위 — 09-08 관례).
   ★ 열 너비는 템플릿이 `table-layout:fixed` + th width 인라인으로 정한다(v2 인라인 style 관례) — 캠페인명이 나머지 폭을 받는다.
   ★ 근본 수정은 배포본에 조밀한 표 변형(`.tbl--dense` 류)이 생기는 것 — docs/design/GAPS.md §0-f. */
[data-region="recent"] .tbl th,[data-region="recent"] .tbl td{padding:var(--sp-3) var(--sp-2)}
[data-region="recent"] .tbl th:first-child,[data-region="recent"] .tbl td:first-child{padding-left:var(--sp-4)}
[data-region="recent"] .tbl th:last-child,[data-region="recent"] .tbl td:last-child{padding-right:var(--sp-4)}

/* (17) 대시보드 요약 카드의 수치를 크게, 칸 가운데에(09-10 지시 — 시안 스케일).
   배포본 `.stat__value` 는 3.0rem 이고 카드 높이는 내용에 맡긴다. 시안은 수치가 카드의 대부분을 차지하고
   가로·세로 가운데다. 화면 두 곳으로 좁힌다 — 신청자 대시보드 SCR-DASH-001 의 `data-region="summary"` 와
   운영 대시보드 SCR-ADMIN-001 의 `.stats` 두 줄(처리·정산 현황, 09-10 지시로 같은 UI). 대장·추이 같은 다른
   운영 화면의 `.stat` 에는 번지지 않는다(속성 선택자 범위 — 09-08 관례).
   ★ 새 클래스가 아니라 배포본 클래스(`.stat`·`.stat__value`)의 속성만 덮는다(이 절의 규칙).
   ★ 금액 칸(잔여 한도 · 운영 정산 현황 3칸)은 「1,000,000」 9자 + 단위까지 와서 7.2rem 이면 칸 폭을 넘는다 —
     `templates/_macros.html` `amount_font` 가 글자 수 × 카드 폭으로 크기를 정한다(09-15 — 100,000 C 에서 단위가 넘친 사고.
     구 인라인 5.0rem 은 단위 폭을 빼고 계산한 값이었다). 카드 폭은 컨테이너 단위 `cqi` 로 읽으므로 `.stat` 에
     container-type:inline-size 를 준다(가로축만 — grid 트랙 폭·min-height·flex column 에 영향 없음).
   ★ 근본 수정은 배포본에 큰 수치 변형(`.stat--hero` 류)이 생기는 것 — docs/design/GAPS.md §0-f. */
[data-screen="SCR-DASH-001"] [data-region="summary"] .stat,
[data-screen="SCR-ADMIN-001"] .stats .stat{display:flex;flex-direction:column;min-height:22rem;container-type:inline-size}
[data-screen="SCR-DASH-001"] [data-region="summary"] .stat__value,
[data-screen="SCR-ADMIN-001"] .stats .stat__value{margin:auto 0;text-align:center;font-size:7.2rem;line-height:1.1}

/* (18) 소재 등록의 파일 입력을 유형마다 한 줄로(09-10 지시 — SCR-REVIEW-001).
   배포본은 `.field` 가 세로 스택이고 `.input-file .input{flex:1 1 auto}` 라 파일 상자가 카드 폭을 다 먹어
   「+ 원고 추가」가 다음 줄로 내려갔다. 지시는 파일선택·삭제·추가가 **같은 줄**, 이미지·동영상도 각각 한 줄.
   ·  `.field` 를 가로 흐름(wrap)으로 바꾸고 라벨·힌트만 한 줄을 통째로 차지한다(flex-basis:100%).
   ·  행(`[data-row]`)은 **한 줄에 하나씩** 세로로 쌓인다(09-10 2차 지시 — 가로 흐름에서 변경).
      `[data-region="rows"]` 를 세로 flex 로 두고 부모를 `align-items:flex-end` 로 맞춰 「+ 추가」 버튼이
      **마지막 행 옆** 에 온다(버튼 3.4rem 과 행 4.4rem 의 차 .5rem 만큼 아래 여백을 줘 가운데를 맞춘다).
      JS 의 `box.querySelector("[data-row]")`·`appendChild` 는 DOM 구조 그대로라 영향이 없다.
   ·  파일 상자는 88rem 을 상한으로 줄어든다(flex:0 1 88rem — 09-10 3차 지시로 2배) — 배포본 클래스의 속성만 덮는다(이 절의 규칙).
   ·  UA 기본 「파일 선택」 버튼은 상자 안에서 위·아래·왼쪽 여백이 제각각이다(크롬은 위로 붙는다).
      버튼 높이를 3.2rem 으로 고정하고 상자 안쪽 여백을 **세 방향 모두 .5rem** 으로 맞춘다 —
      4.4rem(min-height) = 테두리 .1 + .5 + 3.2 + .5 + .1 이라 위·아래·왼쪽 여백이 같다.
      `::file-selector-button` 은 크롬 89+·파이어폭스 82+·사파리 14.1+ 가 지원한다.
   ★ 속성 선택자는 `[data-screen="SCR-REVIEW-001"]` 로 좁힌다(룰셋 업로드 SCR-RULE-001 도 파일 입력이 있다).
     버튼 보정만은 `.input` 클래스가 붙은 파일 입력 전부에 준다 — UA 기본값 보정이라 화면과 무관하다.
   ★ 근본 수정은 배포본에 파일 입력 컴포넌트(버튼 규격·조밀 변형)가 생기는 것 — docs/design/GAPS.md §0-i. */
[data-screen="SCR-REVIEW-001"] [data-region^="creative-"]{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2) var(--sp-3)}
[data-screen="SCR-REVIEW-001"] [data-region^="creative-"]>.label,
[data-screen="SCR-REVIEW-001"] [data-region^="creative-"]>.hint{flex-basis:100%}
[data-screen="SCR-REVIEW-001"] [data-region^="creative-"] [data-region="rows"]{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
[data-screen="SCR-REVIEW-001"] [data-region^="creative-"]>.btn{align-self:flex-end;margin-bottom:.5rem}
[data-screen="SCR-REVIEW-001"] .input-file .input{flex:0 1 88rem;width:auto;min-width:0}
input[type=file].input{padding:.5rem var(--sp-4) .5rem .5rem;line-height:3.2rem}
input[type=file].input::file-selector-button{height:3.2rem;margin:0 var(--sp-3) 0 0;padding:0 var(--sp-3);
  border:.1rem solid var(--line);border-radius:var(--r-sm);background:var(--gray-5);color:var(--gray-80);
  font:inherit;font-size:var(--fs-xs);font-weight:700;line-height:1;cursor:pointer}
input[type=file].input::file-selector-button:hover{background:var(--white);border-color:var(--gray-50)}

/* (19) 점검 결과 상세 SCR-REVIEW-003 「유의 항목」의 참고 접기(09-15 지시 — 시안 A 「섹션 접힘」).
   참고(demoted · [판정:정보안내])는 등급·점수에 반영되지 않는 부록이라 처음에는 접어 두고, 유의 카드 아래의
   「참고 항목 N건」 구분 행(details/summary)을 눌러 펼친다. FAQ(.qa)와 같은 접기 언어 — 셰브런 회전, JS 없음.
   ·  새 클래스 없이 `[data-region="findings"] details` 요소·속성 선택자로 건다(이 절의 규칙). 화면 안의 다른
      details(확인 모달 dialog 와 무관)에는 안 닿도록 `[data-region="findings"]` 로 좁힌다.
   ·  summary 의 기본 마커(▶)는 지우고 오른쪽 셰브런으로 대신한다(.qa 와 같이 +/− 를 쓰지 않는다).
   ★ 근본 수정은 배포본에 「목록 안 접힘 구분 행」 컴포넌트가 생기는 것 — docs/design/GAPS.md §0-j. */
[data-region="findings"] details{margin-top:var(--sp-4);border-top:.1rem dashed var(--line)}
[data-region="findings"] details>summary{position:relative;display:flex;align-items:center;gap:var(--sp-3);list-style:none;
  cursor:pointer;padding:var(--sp-4) 3.6rem var(--sp-4) .4rem;font-size:var(--fs-sm);font-weight:700;color:var(--gray-70);
  word-break:keep-all}
[data-region="findings"] details>summary::-webkit-details-marker{display:none}
[data-region="findings"] details>summary small{font-weight:400;color:var(--gray-50)}
[data-region="findings"] details>summary:hover{color:var(--primary-60)}
[data-region="findings"] details>summary:focus-visible{outline:0;box-shadow:var(--sh-focus);border-radius:var(--r-sm)}
[data-region="findings"] details>summary::after{content:'';position:absolute;right:1rem;top:calc(50% - .9rem);width:1rem;height:1rem;
  border-right:.2rem solid var(--gray-50);border-bottom:.2rem solid var(--gray-50);transform:rotate(45deg);
  transition:transform .2s ease,border-color .2s ease}
[data-region="findings"] details[open]>summary::after{transform:rotate(-135deg);top:calc(50% - .3rem);border-color:var(--primary-50)}
[data-region="findings"] details[open]>summary{color:var(--primary-70)}
[data-region="findings"] details>div{padding-top:var(--sp-2)}

/* (20) 점검 현황 관리 SCR-ADMIN-002 목록의 업종 칸 — 18rem(180px)에서 말줄임(09-16 지시).
   판정 업종이 콤마 결합 다중값(「뷰티·미용의료, 화장품, 건강기능식품 …」)이라 한 칸이 표 폭을 크게 먹어 오른쪽 열이 밀렸다.
   목록에서만 자른다 — 전체 업종은 점검 결과 상세에서 본다. td 마크업에는 손대지 않는다(tests 가 `<td data-field=…>일반식품</td>`
   를 통째로 못박는다 — style·title·span 금지). 요소·속성 선택자로 이 화면의 이 칸만 건다(이 절의 규칙). */
[data-screen="SCR-ADMIN-002"] td[data-field="review.user_industry"]{max-width:18rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* (21) 운영 목록의 「선택한 행」 고정 강조(09-18 지시) — 점검 현황 관리(사용량)·설정(변경)·공통코드(수정)·소식·FAQ(수정).
   행의 기능 버튼으로 하단 상세 패널을 열면 그 패널이 어느 건의 것인지 목록에서 구별이 안 됐다. 화면 JS 가
   `AdPass.selectRow(root, tr)` 로 그 행에 aria-selected="true" 를 달고(다른 행은 뗀다), 여기서 hover 와 같은 색
   (.tbl tbody tr:hover = --primary-5)으로 유지한다. 요소·속성 선택자(이 절의 규칙) — 이 속성은 다른 곳에서 쓰지 않는다. */
.tbl tbody tr[aria-selected="true"]{background:var(--primary-5)}