/* ============================================================
   케이스맵 — 디자인 시스템 (아하(a-ha.io) 계열 Q&A UI)

   2026-09-18 개편. 이전 시스템은 "딥블루 1종 + 헤어라인 + 라운드 3px + 명조 본문"의
   법률자료실 조판이었다. 이 사이트의 실제 콘텐츠는 "민원인 질문 → 기관 답변"이라
   자료실보다 질문답변 서비스에 가깝다. 그래서 아하와 같은 어휘로 맞췄다.

   원칙
     · 바탕은 연회색(#F9FAFB), 내용은 흰 카드. 카드 라운드 16px, 경계 1px #E5E8EB.
       선으로 칸을 나누지 않고 카드를 띄워 항목 단위를 만든다.
     · 회색조는 토스 계열 4단(#333D4B / #4E5968 / #8B95A1 / #B0B8C1) — 아하가 쓰는 것과 같다.
     · 파랑 1종(#1E59DA). 강조는 pill 뱃지와 채워진 버튼에서만.
     · 전부 Pretendard. 본문도 산세리프 16px/1.75 — 아하 본문과 같은 조판이다.
       (명조 본문으로 되돌리려면 --body-font 를 var(--serif) 로 바꾸면 된다)
   ============================================================ */

:root {
  /* 색 — 아하/토스 계열 */
  --blue:        #1E59DA;   /* 주색: 링크·채워진 버튼·강조 */
  --blue-dark:   #1B4FC2;
  --blue-soft:   #EEF3FE;   /* 파란 pill·선택 탭 배경 */
  --ink:         #333D4B;   /* 제목 */
  --ink-soft:    #333D4B;   /* 본문 (이전 시스템 호환) */
  --text:        #4E5968;   /* 일반 텍스트 */
  --muted:       #8B95A1;   /* 보조 */
  --muted-2:     #6B7684;
  --faint:       #B0B8C1;   /* 흐린 메타 */
  --faint-2:     #B0B8C1;
  --line:        #E5E8EB;   /* 카드 경계·구분선 */
  --line-input:  #D1D6DB;   /* 입력 테두리 */
  --line-outer:  #E5E8EB;   /* 카드 외곽 */
  --bg:          #F9FAFB;   /* 페이지 바탕 */
  --bg-soft:     #F2F4F6;   /* 호버·칩 배경 */
  --bg-track:    #F2F4F6;
  --danger:      #D14343;   /* 기각·각하 */
  --danger-soft: #FDF0F0;
  --success:     #0F8A5F;   /* 인정·인용 */
  --success-soft:#EDF8F3;

  /* 타이포 */
  --ui:    'Pretendard Variable', Pretendard, -apple-system, system-ui, 'Apple SD Gothic Neo',
           'Noto Sans KR', sans-serif;
  --serif: 'Noto Serif KR', serif;
  --body-font: var(--ui);   /* 본문 글꼴 — 명조로 돌리려면 var(--serif) */

  /* 형태 */
  --r-card:  16px;
  --r-mid:   12px;
  --r-sm:    8px;
  --shadow:  0 1px 2px rgba(0, 0, 0, .04);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, .07);

  --wrap:   1120px;
  --header: 68px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }

table { border-collapse: collapse; width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ── 헤더 ─────────────────────────────────────────────────
   아하와 같은 구성: 흰 배경 + 굵은 내비 + 우측 알약 검색. 아래선은 아주 연하게. */
.hdr {
  height: var(--header);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 28px;
  /* 배경·아래선은 화면 끝까지 가되, 로고~검색창은 본문(.wrap)과 같은 선에서 시작한다 */
  padding: 0 max(20px, calc((100% - var(--wrap)) / 2 + 20px));
  position: sticky; top: 0; z-index: 20;
}
.hdr__brand { display: flex; align-items: center; gap: 8px; flex: none; }
.hdr__logo { display: flex; align-items: center; }
.hdr__logo img { height: 26px; width: auto; display: block; }
.hdr__tag { font-size: 12px; color: var(--muted); }
.hdr__nav { display: flex; gap: 26px; font-size: 16px; font-weight: 600; }
.hdr__nav a { white-space: nowrap; color: var(--ink); }
.hdr__nav a:hover { color: var(--blue); }
.hdr__nav a.is-sub { color: var(--muted); font-weight: 500; }
.hdr__nav a.is-sub:hover { color: var(--text); }

/* 검색 — 테두리 대신 회색 알약. 아하 헤더의 검색 버튼 자리와 같은 위치다 */
.hdr__search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: var(--bg-soft); border: 1px solid transparent; border-radius: 999px;
  height: 42px; width: 300px; padding: 0 18px;
  transition: background .15s, border-color .15s;
}
.hdr__search:focus-within { background: #fff; border-color: var(--blue); }
.hdr__search label {
  color: var(--muted); font-size: 0; /* 라벨 글자는 접근성용으로만 남긴다 */
  width: 16px; height: 16px; flex: none;
  background: no-repeat center/16px 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B95A1' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
}
.hdr__search input {
  border: 0; outline: 0; font: inherit; font-size: 15px; width: 100%;
  color: var(--ink); background: transparent;
}
.hdr__search input::placeholder { color: var(--muted); }

/* 모바일 메뉴 — 데스크톱에서는 패널이 투명하게 사라져 기존 flex 배치를 유지한다 */
.hdr__panel  { display: contents; }
.hdr__toggle { display: none; }

/* ── 카드 ─────────────────────────────────────────────────
   이 시스템의 기본 단위. 목록 항목·본문·사이드·표가 모두 이 위에 올라간다. */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.card--pad { padding: 24px 28px; }

/* ── 히어로 ───────────────────────────────────────────────
   흰 면 하나만 두면 "자료실"처럼 심심하다. 세 겹으로 깊이를 준다:
   ① 옅은 청/보라 방사 그라데이션 ② 전통 창살 문양(아래로 페이드) ③ 우측 일러스트.
   전부 직접 그린 SVG 라 합쳐 5KB 미만이고, 텍스트가 DOM 앞에 있어 LCP 를 해치지 않는다. */
.hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line); padding: 52px 20px 44px;
  background:
    radial-gradient(760px 300px at 8% -20%, #E8F0FE 0%, rgba(232, 240, 254, 0) 70%),
    radial-gradient(620px 280px at 92% -10%, #F2EDFD 0%, rgba(242, 237, 253, 0) 70%),
    linear-gradient(180deg, #FBFCFF 0%, #FFFFFF 70%);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/img/pattern-lattice.svg') repeat 0 0 / 48px 48px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}
.hero__in {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: center;
}
.hero__art { width: 100%; max-width: 400px; justify-self: end; display: block; }
.hero__h { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -.02em;
           margin: 0; line-height: 1.35; }
.hero__sub { font-size: 16px; color: var(--muted-2); margin-top: 10px; line-height: 1.6; }
.hero__form { display: flex; gap: 8px; margin-top: 26px; max-width: 720px; }
.hero__form input {
  flex: 1; border: 1px solid var(--line-input); border-radius: var(--r-mid); height: 54px;
  padding: 0 18px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); outline: 0;
  transition: border-color .15s;
}
.hero__form input:focus { border-color: var(--blue); }
.hero__form input::placeholder { color: var(--muted); }
.hero__form button {
  width: 104px; height: 54px; background: var(--blue); color: #fff; border: 0;
  border-radius: var(--r-mid); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.hero__form button:hover { background: var(--blue-dark); }

/* ── 뱃지 (pill) ──────────────────────────────────────────
   아하의 "채택률 높음" 칩과 같은 형태: 라운드 알약 + 연한 톤 배경 + 테두리 없음. */
.badge {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; line-height: 1.4; white-space: nowrap;
  background: var(--bg-soft); color: var(--muted-2);
}
.badge--field   { background: var(--blue-soft);    color: var(--blue); }       /* 분야 */
.badge--type    { background: var(--bg-soft);      color: var(--muted-2); }    /* 문서유형 */
.badge--accept  { background: var(--success-soft); color: var(--success); }    /* 인정·인용 */
.badge--reject  { background: var(--danger-soft);  color: var(--danger); }     /* 기각·각하 */
.badge--closed  { background: var(--bg-soft);      color: var(--muted); }      /* 조정 종료 */

/* ── 분야 카드 ────────────────────────────────────────────
   분야 13종을 글자만으로 늘어놓으면 구분이 안 된다. 분야별 색 + 아이콘 타일을 준다.
   아이콘은 /img/domain-icons.svg 스프라이트의 #ico-{slug} 를 <use> 로 당겨 쓰고,
   선 색은 currentColor 라 타일 색을 그대로 따라간다. slug 가 없으면 기본 청색 타일이다. */
.dcard {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.dcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: #D8DCE1; }
.dcard__ico {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-bg, var(--blue-soft)); color: var(--tile-fg, var(--blue));
}
.dcard__ico svg { width: 25px; height: 25px; }
.dcard__n { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.dcard__c { font-size: 13px; font-weight: 700; color: var(--tile-fg, var(--blue)); margin-top: 4px; }

/* 분야별 색 — 기관 성격에 맞춘 13종. 새 slug 가 들어오면 기본 청색으로 떨어진다.
   .dcard 뿐 아니라 목록 항목(.item--ico)도 data-slug 로 같은 색을 물려받는다 */
[data-slug="tax"]          { --tile-fg: #1E59DA; --tile-bg: #EEF3FE; }
[data-slug="admin"]        { --tile-fg: #0F8A5F; --tile-bg: #E9F7F1; }
[data-slug="constitution"] { --tile-fg: #7A4DD6; --tile-bg: #F3EEFE; }
[data-slug="labor"]        { --tile-fg: #C2620E; --tile-bg: #FDF2E7; }
[data-slug="finance"]      { --tile-fg: #0E7C86; --tile-bg: #E6F5F6; }
[data-slug="marine"]       { --tile-fg: #1274C4; --tile-bg: #E8F3FC; }
[data-slug="human-rights"] { --tile-fg: #C2407A; --tile-bg: #FCEDF4; }
[data-slug="environment"]  { --tile-fg: #3F8A1F; --tile-bg: #EFF7EA; }
[data-slug="fair-trade"]   { --tile-fg: #4C55C4; --tile-bg: #EEEFFB; }
[data-slug="media"]        { --tile-fg: #9B3FB5; --tile-bg: #F8EDFB; }
[data-slug="privacy"]      { --tile-fg: #B03A3A; --tile-bg: #FCEDED; }
[data-slug="land"]         { --tile-fg: #8A6A2F; --tile-bg: #F7F2E6; }
[data-slug="etc"]          { --tile-fg: #6B7684; --tile-bg: #F2F4F6; }

/* ── 통계 카드 ────────────────────────────────────────────
   숫자만 있는 흰 상자였다. 옅은 그라데이션과 원형 얼룩을 넣어 카드가 면으로 읽히게 한다. */
.statcard {
  position: relative; overflow: hidden; padding: 26px 24px; text-align: center;
  background: linear-gradient(160deg, #F6FAFF 0%, #FFFFFF 62%);
}
.statcard::after {
  content: ''; position: absolute; right: -28px; top: -28px; width: 104px; height: 104px;
  border-radius: 999px; background: var(--blue); opacity: .06;
}
.statcard > * { position: relative; }

/* ── 페이지 머리 ──────────────────────────────────────────
   목록·허브 제목. 좌측에 짧은 그라데이션 막대를 세워 시작점을 만든다. */
.page-h {
  font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.025em;
  margin: 8px 0 8px; display: flex; align-items: center; gap: 12px;
}
.page-h::before {
  content: ''; width: 5px; height: 26px; border-radius: 3px; flex: none;
  background: linear-gradient(180deg, #3B72E8, #1E59DA);
}
.page-lead { color: var(--muted); font-size: 15.5px; margin: 0 0 18px; padding-left: 17px; }

/* ── 버튼 ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; padding: 0 18px; font: inherit; font-size: 15px; font-weight: 600;
  border: 1px solid var(--blue); background: var(--blue); color: #fff;
  cursor: pointer; border-radius: var(--r-mid); text-decoration: none;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
/* 선택된 탭 — 파란 글씨 + 연파랑 면 (아하 탭과 같다) */
.btn--ghost { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.btn--ghost:hover { background: #E2EBFD; color: var(--blue-dark); border-color: transparent; }
/* 비선택 탭 — 흰 알약 */
.btn--quiet { background: #fff; color: var(--muted-2); border-color: var(--line); }
.btn--quiet:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--line); }
.btn[disabled], .btn--off {
  background: var(--bg-soft); border-color: transparent; color: var(--faint); cursor: default;
}

/* ── 목록 = 카드 피드 ─────────────────────────────────────
   선으로 나누지 않고 카드를 세로로 쌓는다(아하 목록과 같다). */
.list { display: flex; flex-direction: column; gap: 12px; }
.item {
  display: block; padding: 20px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); transition: box-shadow .15s, border-color .15s, transform .15s;
}
.item:hover { box-shadow: var(--shadow-hover); border-color: #D8DCE1; transform: translateY(-2px); }
.item:hover .item__t { color: var(--blue); }
.item__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted); margin-bottom: 8px;
}
.item__sep { color: var(--faint); }
.item__t { font-size: 16.5px; font-weight: 600; color: var(--ink); line-height: 1.5;
           letter-spacing: -.01em; }
.item__x, .item .small.muted { font-size: 14px; color: var(--muted-2); margin-top: 6px; line-height: 1.65; }
.item__x {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 항목 앞 분야 아이콘 — 목록이 글자만이면 훑어보기가 안 된다.
   분야 색이 같은 항목끼리 시각적으로 묶인다. */
.item--ico { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.item__ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-bg, var(--blue-soft)); color: var(--tile-fg, var(--blue));
}
.item__ico svg { width: 22px; height: 22px; }

/* 사이드 목록 — 카드 안에 들어가므로 카드 껍데기를 벗긴다 */
.side .list { gap: 0; }
.side .item {
  border: 0; border-radius: 0; box-shadow: none; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.side .item:last-child { border-bottom: 0; }
.side .item:hover { box-shadow: none; transform: none; }

/* ── 아바타 ───────────────────────────────────────────────
   아하는 글마다 작성자 아바타가 붙는다. 우리는 실제 사람이 아니라
   "민원인 / 기관"이라 사진 대신 글자 원형으로 세운다. */
.avatar {
  width: 42px; height: 42px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  background: linear-gradient(135deg, #EDF0F4, #DCE2EA); color: var(--muted-2);
}
/* 기관 아바타는 채워진 파랑 — 답변 주체가 한눈에 구분된다 */
.avatar--agency {
  background: linear-gradient(135deg, #3B72E8, #1E59DA); color: #fff;
  box-shadow: 0 2px 8px rgba(30, 89, 218, .26);
}
.avatar--sm { width: 34px; height: 34px; font-size: 13px; }

/* 글머리 — 아바타 + 이름/시각 (아하 카드 상단) */
.byline { display: flex; align-items: center; gap: 12px; }
.byline__name { font-size: 15px; font-weight: 700; color: var(--ink); }
.byline__sub   { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* 이전 시스템 호환 — 제목 아래 한 줄 메타 */
.post-meta { margin-top: 10px; font-size: 14px; color: var(--muted); }
.post-meta__sep { color: var(--faint); margin: 0 6px; }
.post-label { font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: .01em; }

/* ── 표 ───────────────────────────────────────────────────
   카드 안에 넣고 바깥 테두리는 카드가 맡는다. */
.tbl-scroll {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); overflow: hidden;
}
.tbl { font-size: 15px; }
.tbl th {
  text-align: left; font-weight: 600; font-size: 13px; color: var(--muted);
  background: #fff; border-bottom: 1px solid var(--line);
  padding: 14px 20px; white-space: nowrap;
}
.tbl td { padding: 15px 20px; border-bottom: 1px solid var(--line); color: var(--text); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr:hover { background: var(--bg); }

/* ── 차트 (단색 막대만) ───────────────────────────────── */
.bar { display: grid; grid-template-columns: 120px 1fr 72px; align-items: center; gap: 12px; padding: 6px 0; }
.bar__label { font-size: 14px; color: var(--muted-2); }
.bar__track { height: 10px; background: var(--bg-track); border-radius: 999px; }
.bar__fill  { height: 10px; background: var(--blue); border-radius: 999px; }
.bar__val   { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right;
              font-variant-numeric: tabular-nums; }

/* ── 통계 숫자 ────────────────────────────────────────── */
.stat__n { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -.03em;
           font-variant-numeric: tabular-nums; }
.stat__l { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* ── 페이지네이션 ─────────────────────────────────────── */
.pg { display: flex; gap: 6px; justify-content: center; padding: 28px 0; }
.pg a, .pg span {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-mid);
  font-size: 15px; font-weight: 600; color: var(--text); padding: 0 16px;
}
.pg a:hover { background: var(--bg-soft); color: var(--ink); }
.pg .is-cur { background: var(--blue); border-color: var(--blue); color: #fff; }
.pg .is-gap { border: 0; background: transparent; color: var(--faint); }

/* ── 상세 문서 ────────────────────────────────────────────
   아하 상세: 카테고리 → 큰 제목 → 질문 카드 → 답변 카드들.
   .qcard 가 그 카드 하나다. */
.qcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
         box-shadow: var(--shadow); padding: 26px 28px; }
/* 카드 사이 간격은 카드 자신이 갖는다 — 사이에 광고(ins)가 들어가고, 그 광고가
   unfilled 로 접히면 인접 선택자(+)가 걸리지 않아 카드가 맞붙었다. */
.qcard { margin-top: 14px; }
.qcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qcard__body { margin-top: 18px; }
/* 답변 카드 — 위쪽 파란 선 + 머리쪽 옅은 청색 틴트. 기관 발언 구간임을 면으로 알린다 */
.qcard--answer {
  border-top: 3px solid var(--blue);
  background: linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 132px);
}

/* 페이지 제목 */
.doc__h1 { font-size: 26px; line-height: 1.42; font-weight: 700; color: var(--ink);
           letter-spacing: -.025em; margin: 6px 0 0; }
/* 질문 상세 — 제목이 곧 질문 전문(두세 줄)이다. 카드 안 제목 크기로 눕힌다 */
.doc__h1--q { font-size: 19px; line-height: 1.6; font-weight: 700; margin: 0;
              font-family: var(--ui); letter-spacing: -.015em; }

.doc__sec { font-size: 18px; line-height: 1.4; font-weight: 700; color: var(--ink);
            margin: 34px 0 14px; letter-spacing: -.015em; }
.doc__body { font-family: var(--body-font); font-size: 16px; line-height: 1.75; color: var(--ink);
             max-width: 44em; }
.doc__body p { margin: 0 0 16px; text-wrap: pretty; }
.doc__body p:last-child { margin-bottom: 0; }
.doc__body h4 { font-family: var(--ui); font-size: 15.5px; font-weight: 700; color: var(--ink);
                margin: 22px 0 8px; }
/* 답변 본문 — 카드가 이미 답변임을 말해주므로 왼쪽 선·배경을 쓰지 않는다 */
.doc__summary { background: transparent; border: 0; padding: 0; }
.doc__summary .doc__body { max-width: none; }
.doc__summary strong { font-weight: 700; color: var(--blue); }

/* 문서 정보 표 */
.meta-tbl { font-size: 14.5px; border-radius: var(--r-mid); overflow: hidden; }
.meta-tbl th { width: 100px; text-align: left; font-weight: 500; color: var(--muted);
               background: var(--bg); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.meta-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }

/* 교차 참조 블록 — 같은 법령을 다룬 다른 기관 */
.xref { margin-top: 34px; }

/* ── 사이드 ───────────────────────────────────────────────
   아하 우측 칼럼: 흰 카드 위젯이 쌓인다. */
.side { position: sticky; top: calc(var(--header) + 20px); align-self: start;
        display: flex; flex-direction: column; gap: 14px; }
.side__box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
             box-shadow: var(--shadow); padding: 18px 20px; }
.side__t { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em;
           margin-bottom: 10px; }
.side__toc a { display: block; font-size: 14px; color: var(--text); padding: 7px 0 7px 12px;
               border-left: 2px solid var(--line); }
.side__toc a:hover, .side__toc a.is-cur { color: var(--blue); border-left-color: var(--blue); }

/* ── 고지 · 광고 ──────────────────────────────────────── */
.notice { font-size: 13.5px; line-height: 1.7; color: var(--muted-2); background: var(--bg-soft);
          border: 0; border-radius: var(--r-mid); padding: 16px 18px; }
.adslot { border: 1px dashed var(--line-input); background: #fff; color: var(--faint);
          border-radius: var(--r-mid);
          font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* ── 푸터 ─────────────────────────────────────────────── */
.ftr { position: relative; overflow: hidden;
       border-top: 1px solid var(--line); background: #fff; margin-top: 56px;
       padding: 36px 0 44px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
/* 히어로와 같은 창살 문양을 위에서 아래로 페이드해 페이지를 같은 문양으로 닫는다 */
.ftr::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 160px; pointer-events: none;
  background: url('/img/pattern-lattice.svg') repeat 0 0 / 48px 48px; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.85), transparent);
}
.ftr .wrap { position: relative; }
.ftr__brand { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.ftr dl { display: grid; grid-template-columns: 56px 1fr; gap: 6px 12px; margin: 14px 0 0; }
.ftr dt { color: var(--faint); }
.ftr dd { margin: 0; }

/* ── breadcrumb ───────────────────────────────────────── */
.bc { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--muted);
      padding: 20px 0 6px; flex-wrap: wrap; }
.bc a { color: var(--muted); font-weight: 500; }
.bc a:hover { color: var(--text); }
.bc span { color: var(--faint); }

/* ── 레이아웃 유틸 ────────────────────────────────────── */
.grid-doc { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
.grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-2   { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.cols-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.sec-h    { display: flex; align-items: baseline; justify-content: space-between; margin: 36px 0 14px; }
.sec-h h2 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.02em;
            display: flex; align-items: center; gap: 10px; }
.sec-h h2::before {
  content: ''; width: 4px; height: 19px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, #3B72E8, #1E59DA);
}
.sec-h a, .sec-h span { font-size: 13.5px; color: var(--muted); }
.muted    { color: var(--muted); }
.small    { font-size: 13.5px; }

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width: 960px) {
  /* 좁아지면 일러스트를 접는다 — 글씨와 검색창이 먼저다 */
  .hero__in { grid-template-columns: 1fr; gap: 24px; }
  .hero__art { display: none; }
}
@media (max-width: 1080px) {
  .grid-doc, .grid-2 { grid-template-columns: 1fr; gap: 24px; }
  .side { position: static; }
  .grid-3 { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 16px; }
  /* 분야가 6개라 한 줄에 못 들어간다. 가로 스크롤은 뒤쪽 분야가 보이지 않아 접근 불가였다 */
  .hdr { padding: 0 16px; gap: 12px; overflow: visible; }
  .hdr__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    margin-left: auto; width: 40px; height: 40px; padding: 0 9px;
    border: 0; border-radius: var(--r-mid); background: var(--bg-soft); cursor: pointer;
  }
  .hdr__toggle span {
    display: block; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform .15s, opacity .15s;
  }
  .hdr__toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hdr__toggle.is-open span:nth-child(2) { opacity: 0; }
  .hdr__toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .hdr__panel {
    display: none;
    position: absolute; left: 0; right: 0; top: var(--header);
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 16px 18px; box-shadow: var(--shadow-hover);
  }
  .hdr__panel.is-open { display: block; }

  .hdr__nav { flex-direction: column; gap: 0; font-size: 16px; }
  .hdr__nav a { display: block; padding: 14px 2px; border-bottom: 1px solid var(--line); }
  .hdr__nav a:last-child { border-bottom: 0; }

  /* 검색은 숨기지 않고 패널 안으로 넣는다 — 모바일에서 검색이 없으면 상세로 들어갈 길이 막힌다 */
  .hdr__search { display: flex; width: 100%; margin: 12px 0 0; }
  .hero { padding: 32px 16px 28px; }
  .hero__h { font-size: 23px; }
  .hero__sub { font-size: 15px; }
  .hero__form { flex-direction: column; }
  .hero__form button { width: 100%; }
  .qcard { padding: 20px 18px; border-radius: 14px; }
  .page-h { font-size: 23px; }
  .page-h::before { height: 22px; }
  .dcard { padding: 15px 16px; gap: 12px; }
  .dcard__ico { width: 42px; height: 42px; border-radius: 12px; }
  .item { padding: 16px 18px; border-radius: 14px; }
  .item--ico { grid-template-columns: 34px 1fr; gap: 11px; }
  .item__ico { width: 34px; height: 34px; border-radius: 10px; }
  .item__ico svg { width: 19px; height: 19px; }
  .doc__h1 { font-size: 22px; }
  .doc__h1--q { font-size: 17.5px; line-height: 1.6; }
  .doc__body { font-size: 15.5px; line-height: 1.75; }
  .avatar { width: 38px; height: 38px; font-size: 14px; }
  /* 표 → 카드. 4칸짜리 표를 360px 에 밀어 넣으면 기관명이 두세 글자씩 끊긴다.
     각 칸에 data-label 을 달아두고 여기서 라벨 + 값 한 줄로 세운다. */
  .tbl-scroll { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr {
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 10px;
  }
  .tbl tbody tr:hover { background: #fff; }
  .tbl td { border: 0 !important; padding: 2px 0; font-size: 14.5px; }
  .tbl td::before {
    content: attr(data-label) " ";
    color: var(--muted); font-size: 13px; margin-right: 6px;
  }
  /* 기관명은 카드의 제목 자리다 — 라벨 없이 크게 */
  .tbl td[data-label="기관"] { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
  .tbl td[data-label="기관"]::before { content: none; }
  /* 번호는 모바일에서 의미가 없다 */
  .tbl td[data-label="번호"] { display: none; }
  .tbl td.num { text-align: left; }
  .bar { grid-template-columns: 86px 1fr 60px; gap: 8px; }
}

/* ── 광고 유닛 ────────────────────────────────────────── */
/* 고정 크기를 주지 않는다 — 컨테이너 폭에 맞춰야 고단가 표준 규격이 입찰한다.
   폭이 0 인 채로 push 되면 유닛이 0x0 으로 확정되므로 width 를 명시한다(/js/ads.js 참고). */
ins.adsbygoogle { display: block; width: 100%; margin: 20px 0; }
ins.adsbygoogle--top  { margin: 16px 0 8px; }
ins.adsbygoogle--feed { margin: 0; }        /* 카드 피드 사이 — gap 이 이미 간격을 준다 */
/* 광고가 안 채워지면 접는다. 안 그러면 빈 자리가 300px 씩 남아 본문이 밀린다
   (미승인 호스트·재고 없음·광고차단 모두 해당). */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }