:root{
  --bg:#F1F2F6; --surface:#FFFFFF; --surface-2:#F6F7FA; --surface-3:#EDEFF4;
  --ink:#0D1017; --ink-2:#2F3442; --muted:#545B6B; --rule:#D2D6E0; --rule-2:#E1E4EC;
  /* --rule-3 은 절과 절을 가르는 선. 2px · 배경 대비 4.0 (보조 글자와 비슷한 세기).
     1.14 → 1.30 → 1.66 → 2.26 까지 색만 올렸는데 다 "안 보인다" 였다 —
     색만 만지고 두께를 안 건드린 게 문제였다. 가는 선은 색을 아무리 올려도 실 한 올이다 */
  --rule-3:#707785;
  --accent:#1F3D7A; --brass:#96701C; --teal:#1D6355;
  --s1:#3B6FD4; --s2:#1F9970;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1118; --surface:#171A22; --surface-2:#1D212B; --surface-3:#232833;
  --ink:#EFF1F7; --ink-2:#CED4E0; --muted:#9AA2B4; --rule:#282D39; --rule-2:#222733;
  --rule-3:#6F747E;
  --accent:#8AA6EC; --brass:#D3A64C; --teal:#57BFA8;
  --s1:#6290EA; --s2:#1FA57E; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0F1118; --surface:#171A22; --surface-2:#1D212B; --surface-3:#232833;
  --ink:#EFF1F7; --ink-2:#CED4E0; --muted:#9AA2B4; --rule:#282D39; --rule-2:#222733;
  --rule-3:#6F747E;
  --accent:#8AA6EC; --brass:#D3A64C; --teal:#57BFA8;
  --s1:#6290EA; --s2:#1FA57E; color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  /* 굵기를 안 적으면 기본 400 으로 떨어진다 — 낱장 글자의 23%가 그랬다.
     본문은 이미 62%가 300 이라 300 으로 통일한다. 그래야 400 을 안 받아도 된다
     (한글 글꼴은 굵기마다 유니코드 조각이 따로 와서, 굵기 하나가 150KB쯤 한다) */
  font-size:16px; line-height:1.68; font-weight:300;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-text-size-adjust:100%}
/* b·strong 의 기본값은 `bolder` 라 **부모 굵기에 상대적**이다 —
   body 를 300 으로 내리니 bolder 가 700 이 아니라 400 으로 계산돼
   따로 규칙이 없는 <b> 두 개가 굵기를 잃었다. 절대값으로 못 박는다.
   클래스로 굵기를 정한 <b> 28개는 그 규칙이 이겨서 그대로다 */
b, strong{font-weight:700}
.wrap{max-width:920px; margin:0 auto; padding:0 20px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 머리·꼬리 */
.top{border-bottom:1px solid var(--rule); background:var(--surface); position:sticky; top:0; z-index:10}
.top .wrap{display:flex; align-items:center; gap:14px; padding-top:11px; padding-bottom:11px}
/* 어느 쪽에 가 있든 맨 위에 늘 있는 이름이다 — 여기가 집이라는 걸 크기로 알린다 */
.top .brand{font-weight:700; font-size:21px; letter-spacing:-.03em; color:var(--ink); text-decoration:none; white-space:nowrap}
/* 위 칸은 글자만 있으면 눌러볼 생각이 안 든다 — 테두리를 줘서 누를 것으로 보이게 한다 */
.top nav{margin-left:auto; display:flex; gap:6px; font-size:15px}
.top nav a{color:var(--muted); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:4px; line-height:1.5;
  padding:4px 11px; border:1px solid var(--rule-2); border-radius:5px;
  transition:color .12s, border-color .12s, background-color .12s}
.top nav a:hover{color:var(--ink); border-color:var(--rule)}
/* 밝게/어둡게 — 탭 옆에 작게. 눌러야 알아채니 탭과 같은 모양으로 */
.tsw{margin-left:6px; width:26px; height:26px; flex:0 0 auto; padding:0;
  font:inherit; font-size:15.5px; line-height:1; color:var(--muted);
  background:none; border:1px solid var(--rule-2); border-radius:5px; cursor:pointer;
  transition:color .12s, border-color .12s}
.tsw:hover{color:var(--ink); border-color:var(--rule)}
.top .wrap{align-items:center}
/* 무엇에 대한 질문인지(명사)를 앞에, 질문을 뒤에.
   "이건뭐지" 와 "뭐나오지" 는 명사가 없으면 안 갈린다.
   좁은 화면에서는 **명사만** 남긴다 — 헷갈리는 건 좁은 쪽이라 거기서 구분을 없애면 안 된다.

   이름은 tw/tq 다. `ask` 로 썼다가 아래 .ask(큰 질문 제목, 바탕체 24px)와 겹쳐서
   뒷조각만 크고 다른 글씨가 나왔다 — 글꼴·크기는 특정도가 안 이긴다.
   글꼴과 크기는 같게 두고 **굵기와 색으로만** 가른다 */
.top nav .tw{font-weight:700}
.top nav .tq{color:var(--muted); font-weight:300}
.top nav a.on .tq{color:var(--accent); opacity:.75}
.top nav a.on{color:var(--accent); border-color:var(--accent); font-weight:500;
  background:color-mix(in srgb, var(--accent) 9%, transparent)}
@media (max-width:480px){
  /* 제목 + 꼬리 + 지역 고르개가 한 줄에 안 들어간다 — 고르개를 아랫줄로 */
  .blk > h2{flex-wrap:wrap}
  .blk > h2 .rsel{margin-left:0; max-width:100%; width:100%}
  .agelab{font-size:12.5px; gap:6px}
  .top .wrap{padding-left:12px; padding-right:12px}
  /* 폰에서는 손가락으로 누른다 — 누르는 자리를 높이 44px 로 맞춘다 (애플 권장 · WCAG AAA).
     재보니 ☾ 24×24 · 탭 높이 39 · 로고 31 이었다. 머리 줄에 가로 여유가 53px 있어서 들어간다 */
  .top .brand{font-size:18.5px; min-height:44px; display:inline-flex; align-items:center}
  /* 좁은 화면에서도 질문까지 다 보이게 — 명사 위, 질문 아래로 쌓는다.
     한 줄로 두면 "자격증 이건뭐지" 넷이 안 들어가 줄이 깨진다 */
  /* 글씨를 줄이면 안 읽힌다 — 대신 패딩과 사이 간격을 깎아 자리를 만든다 */
  .top nav{gap:1px; font-size:13.5px}
  .top nav a{padding:2px 5px; flex-direction:column; align-items:center; justify-content:center;
    gap:0; line-height:1.24; min-height:44px}
  .top nav .tq{margin-left:0; font-size:13px}
  .top .wrap{gap:8px}
  /* 탭과 같은 높이로 — 옆에 붙은 것끼리 윗선·아랫선이 맞아야 한 줄로 읽힌다 */
  .tsw{margin-left:4px; width:40px; height:44px; font-size:16px}
}
/* 320px 폰(아이폰 SE 1세대 등)에서는 위의 40px 단추 때문에 머리 줄이 327px 로 7px 넘쳤다.
   옛 CSS(24px 단추)는 320 에 맞았으니 내가 만든 넘침이다. 폭만 줄이고 높이 44 는 지킨다 */
@media (max-width:340px){
  .tsw{width:32px; margin-left:2px}
  .top .wrap{gap:6px}
}
.crumb{font-size:14px; color:var(--muted); padding:14px 0 0}
/* 빵부스러기는 글자 높이(21px)만큼만 눌렸다. 안쪽 여백으로 누르는 자리를 넓히고
   같은 만큼 바깥 여백을 빼서 글자 자리는 그대로 둔다 */
.crumb a{color:var(--muted); text-decoration:none; padding:10px 4px; margin:-10px -4px}
.crumb a:hover{text-decoration:underline}

h1{font-weight:700; font-size:clamp(26px,4vw,36px); margin:8px 0 0; line-height:1.16;
  letter-spacing:-.02em}
.badges{display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 0}
.badge{font-size:13.5px; padding:2px 8px; border-radius:3px; border:1px solid var(--rule); color:var(--muted); text-decoration:none}
.badge.k{border-color:var(--accent); color:var(--accent)}
a.badge:hover{border-color:var(--ink); color:var(--ink)}
.where{margin:9px 0 0; font-size:15px; color:var(--muted); font-weight:300}

/* 절과 절 사이 — 선이 배경과 값이 비슷하면 없는 것과 같다. 여기만 진한 선을 쓴다 */
section.blk{margin-top:28px; padding-top:20px; border-top:2px solid var(--rule-3)}
.blk > h2{margin:0 0 11px; font-size:19px; font-weight:700;
  display:flex; align-items:baseline; gap:8px}
.blk > h2 em{font-style:normal; font-size:14px; color:var(--muted); font-weight:300; font-family:inherit}
.prose{font-size:16.5px; color:var(--ink-2); font-weight:300; line-height:1.7; max-width:70ch; margin:0}
.prose + .prose{margin-top:10px}
.prose b{font-weight:500; color:var(--ink)}

/* 합격률 */
.hard{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start}
@media (max-width:640px){.hard{grid-template-columns:1fr}}
/* 무엇의 숫자인지 먼저 말한다 — "합격률" 아래 필기·실기가 선다 */
.numhead{margin:0 0 6px; font-size:13.5px; color:var(--muted); font-weight:300}
.nums{display:flex; gap:20px}
.num b{display:block; font-family:"IBM Plex Mono",monospace; font-size:32px; font-weight:500;
  font-variant-numeric:tabular-nums; line-height:1.1; letter-spacing:-.02em}
.num span{font-size:13.5px; color:var(--muted); font-weight:300; display:flex; align-items:center; gap:4px}
.num span i{width:8px; height:8px; border-radius:2px; display:inline-block}
/* 이름표가 위, 숫자가 아래, 단위는 숫자 옆 — "지금까지 딴 사람 / 2.2만 명" */
.num .lab{margin-bottom:2px}
.num b em{font-style:normal; font-size:17.5px; font-weight:400; color:var(--muted);
  margin-left:5px; letter-spacing:0}
.chart svg{display:block; width:100%; height:130px; overflow:visible}
.applied{margin-top:10px; font-size:14px; color:var(--muted); font-family:"IBM Plex Mono",monospace}

/* 연령 분포 — 나이 구간별 누계 취득자 */
.ageblk{margin-top:14px; max-width:360px}
.ageblk svg{display:block; width:100%; height:30px}
.agelab{display:flex; gap:8px; margin:5px 0 0; font-size:13px; color:var(--muted);
  font-family:"IBM Plex Mono",monospace; white-space:nowrap; flex-wrap:wrap}
.agelab > span{min-width:0}
.agelab span:nth-child(2){flex:1; text-align:center}
.agelab b{color:var(--ink); font-weight:500}
details.tbl{margin-top:10px}
/* 표가 넓으면 쪽을 밀지 말고 표 안에서만 스크롤한다.
   [open] 을 붙여두면 그 상태일 때만 걸려서, 폰(375)에서 표가 393px 로 삐져나갔다 —
   조건 없이 항상 잠근다 (접혀 있을 땐 어차피 보이지 않는다) */
details.tbl{overflow-x:auto}
details.tbl table{min-width:max-content}
details.tbl summary{cursor:pointer; color:var(--accent); font-size:14.5px}

/* 필요한 사람만 꺼내보는 것 — 등급 공통 응시자격, 지난 회차 */
details.fold > summary{cursor:pointer; color:var(--accent); font-size:15px;
  padding:3px 0; list-style-position:outside}
details.fold > summary:hover{text-decoration:underline}
details.fold[open] > summary{color:var(--muted); margin-bottom:9px}
details.fold[open] > summary:hover{color:var(--ink)}
details.tbl table{border-collapse:collapse; margin-top:8px; font-family:"IBM Plex Mono",monospace;
  font-size:13.5px; font-variant-numeric:tabular-nums}
details.tbl th,details.tbl td{padding:2px 10px 2px 0; text-align:right; border-bottom:1px solid var(--rule-2)}
details.tbl th{color:var(--muted); font-weight:500}
details.tbl td:first-child,details.tbl th:first-child{text-align:left}

/* 응시자격·과목 */
.qual{margin:0; padding:0; list-style:none; columns:2; column-gap:24px}
@media (max-width:720px){.qual{columns:1}}
.qual li{font-size:15.5px; color:var(--ink-2); font-weight:300; line-height:1.55;
  padding:3px 0 3px 12px; position:relative; break-inside:avoid}
.qual li::before{content:"·"; position:absolute; left:2px; color:var(--muted)}
.lssn{margin-bottom:12px}
.lssn > b{font-size:14px; font-weight:700; color:var(--accent); display:block; margin-bottom:4px}
.kms{margin:0; padding:0; list-style:none}
.kms li{display:flex; align-items:baseline; gap:10px; padding:4px 0 4px 10px;
  border-left:2px solid var(--rule); font-size:16px}
.kms .k{flex:1; min-width:0}
.kms .kv{font-family:"IBM Plex Mono",monospace; font-size:13.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap}

/* 출제기준 — 과목 > 주요항목 > 세부항목 > 세세항목 */
.stdblk{margin-top:14px}
.stdkind{margin:0 0 8px; font-size:13.5px; font-weight:700; color:var(--accent);
  letter-spacing:.06em; text-transform:uppercase}
details.stdsub{margin-bottom:9px; padding-left:11px; border-left:2px solid var(--rule)}
details.stdsub > summary{cursor:pointer; padding:3px 0; display:flex; align-items:baseline;
  gap:9px; flex-wrap:wrap}
details.stdsub > summary:hover .stdnm{color:var(--accent)}
details.stdsub[open] > summary{margin-bottom:7px}
/* 과목 이름은 원본 그대로라 띄어쓰기 없이 26자가 붙은 것도 있다 (위험물의제조소등의위험물안전관리및…).
   줄바꿈 못 하는 칸 안에서 폰 창을 392 로 넓혔다 — 최소 폭 계산에도 들어가는 anywhere 로 끊는다 */
.stdnm{font-size:15.5px; font-weight:500; color:var(--ink); min-width:0; overflow-wrap:anywhere}
details.stdsub > summary i{font-style:normal; font-size:13px; color:var(--muted);
  font-family:"IBM Plex Mono",monospace; white-space:nowrap}
.stdmajor{margin:0; padding:0; list-style:none}
.stdmajor > li{margin-bottom:8px}
.stdmajor > li > b{font-size:15px; font-weight:500; color:var(--ink-2)}
.stdminor{margin:3px 0 0; padding:0 0 0 12px; list-style:none}
.stdminor > li{padding:2px 0; font-size:14.5px; line-height:1.6}
.stdminor .dt{color:var(--ink-2); font-weight:300}
.stdminor .dd{display:block; color:var(--muted); font-weight:300; font-size:14px;
  padding-left:9px; border-left:1px solid var(--rule-2); margin-top:2px}

/* 쓰임·공무원·일정 */
.rows{margin:0; padding:0; list-style:none}
.rows li{padding:7px 0 7px 11px; border-left:2px solid var(--rule); margin-bottom:6px; font-size:15.5px}
.rows .f{font-weight:500; font-size:14px; color:var(--ink)}
.rows .t{color:var(--ink-2); font-weight:300}
.rows .l{color:var(--muted); font-size:13.5px}
.gov{display:grid; gap:8px}
.gv{padding:8px 0 8px 11px; border-left:2px solid var(--c); font-size:15.5px}
.gv b{font-size:14px; color:var(--c); display:block; margin-bottom:2px}
.gv span{color:var(--ink-2); font-weight:300}
.cal{margin:0; padding:0; list-style:none; font-size:15.5px}
.cal li{padding:6px 0; border-bottom:1px solid var(--rule-2); display:flex; gap:12px; flex-wrap:wrap}
.cal .r{font-weight:500; min-width:160px}
.cal .d{color:var(--ink-2); font-weight:300; font-family:"IBM Plex Mono",monospace; font-size:14px}
/* 어디서배우지 — 국비 훈련과정. 값이 먼저 읽혀야 고를 수 있다 */
.courses{margin:0 0 10px; padding:0; list-style:none; display:grid; gap:9px}
.courses li{padding-bottom:9px; border-bottom:1px solid var(--rule-2)}
.courses li:last-child{border-bottom:0; padding-bottom:0}
.crow{display:flex; gap:12px; margin:0; align-items:baseline}
.crow .cw{flex:0 0 auto; min-width:74px; text-align:right; font-family:"IBM Plex Mono",monospace;
  font-size:15px; font-weight:500; color:var(--brass); font-variant-numeric:tabular-nums}
.crow .cnm{font-size:16px; color:var(--ink-2); line-height:1.5}
.cmeta{margin:2px 0 0 86px; font-size:14px; color:var(--muted); font-weight:300; line-height:1.6}
/* 지역을 고르면 인강 줄이 아래로 따로 묶인다 — 그 사이 이름표 */
.courses li.csub{padding:0; border-bottom:0; font-size:14px; color:var(--muted); font-weight:300}
.cmore{margin:10px 0 0; font-size:15px}
/* 달력에 넣기 — 대장 09-16 「지금은 그냥 링크 텍스트 같은 느낌이야」.
   주 단추 둘(아이폰·구글)은 같은 무게로, 파일 받기는 예비 수단이라 작게.
   생김새는 낱장에 이미 선 `.save`(담기) 그대로 쓰고 자리만 잡는다 — 새 모양을 만들면 정렬선이 둘이 된다 */
.calput{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.calput a.save{min-height:44px; padding:0 14px; font-size:15px; display:inline-flex; align-items:center; text-decoration:none}
.calput .calsm{font-size:13.5px; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--rule-2)}
/* 지역 고르개 — 절 제목 오른쪽 끝에 세운다 */
.blk > h2 .rsel{margin-left:auto}
.rsel{font:inherit; font-size:14px; font-weight:300; font-family:"IBM Plex Sans KR",sans-serif;
  color:var(--ink-2); background:var(--surface-2); border:1px solid var(--rule);
  border-radius:4px; padding:3px 7px; cursor:pointer; max-width:50%}
.rsel:hover{border-color:var(--accent)}
.rnone{color:var(--brass); margin-bottom:8px}
.rnone b{font-weight:500}
.cmore .more{font:inherit; font-size:15px; color:var(--accent); background:none;
  border:0; padding:0; cursor:pointer; border-bottom:1px solid currentColor}
.cmore .more:hover{color:var(--ink)}
@media (max-width:560px){
  .crow{display:block}
  .crow .cw{display:block; text-align:left; min-width:0}
  .cmeta{margin-left:0}
}

/* 필기(또는 실기)가 아예 없는 종목 — 빈칸으로 두면 자료를 못 구한 것과 구분이 안 된다 */
/* 시험이 아예 없는 칸 — 숫자 자리에 "없음" 이 선다. 흐리게 해서 숫자와 구별한다 */
.nums .num.none b{color:var(--muted); font-weight:400}
.noexam{margin:8px 0 0; font-size:14.5px; color:var(--brass); font-weight:300}
.noexam b{font-weight:500}
.dead{font-size:15px; color:var(--brass); font-weight:300; line-height:1.6}
.dead b{font-weight:500}
/* 없는 정보 안내 — 절을 빼지 않고 같은 자리에 한 줄로 「무엇 — 왜 없는지」 를 적는다 */
.gapnote{margin:2px 0 0; font-size:15px; color:var(--muted); font-weight:300; line-height:1.65}
.gapnote b{font-weight:500; color:var(--ink-2)}

/* 한눈에 — 사람들이 제일 먼저 묻는 여섯 가지(합격률·응시료·다음 시험·응시 조건·딴 사람·국비 과정)를
   제목 바로 아래 한 장에 모은다 (2026-09-11 A안). 폰에선 두 칸, 넓으면 세 칸 */
.glance{margin:18px 0 0; background:var(--surface); border:1px solid var(--rule); border-radius:6px; padding:16px 16px 14px}
.glh{margin:0 0 12px; font-size:13.5px; font-weight:700; color:var(--accent); letter-spacing:.06em}
.glg{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0}
@media (min-width:641px){.glg:not(.gl4){grid-template-columns:repeat(3,minmax(0,1fr))}}
.glc,.glx{display:flex; flex-direction:column; gap:2px; min-width:0; overflow-wrap:anywhere}
/* 칸 사이 점선 — 여섯 칸이 한 덩어리로 보여 어디서 끊기는지 몰랐다 (2026-09-11 대장).
   칸마다 오른쪽·아래에 점선을 긋고 카드 바깥 가장자리 쪽은 뺀다. 폰 2칸 · 넓은 화면 3칸이라 끝 칸이 다르다 */
.glg > .glc{padding:13px 14px; border:0 dashed color-mix(in srgb, var(--rule-3) 45%, transparent); border-right-width:1px; border-bottom-width:1px}
.glg > .glc:nth-child(2n){border-right-width:0; padding-right:0}
.glg > .glc:nth-child(2n+1){padding-left:0}
.glg > .glc:nth-child(-n+2){padding-top:0}
.glg > .glc:nth-last-child(-n+2){border-bottom-width:0; padding-bottom:0}
/* 네 칸(시험 없는 자격 — 시험 칸 셋이 「시험 없음」 한 칸이 된다, gen.js .gl4)은 넓어도 2×2. 세 칸 줄에 두면 한 칸이 혼자 남는다 */
@media (min-width:641px){
  .glg:not(.gl4) > .glc:nth-child(n){padding:13px 16px; border-right-width:1px; border-bottom-width:1px}
  .glg:not(.gl4) > .glc:nth-child(3n){border-right-width:0; padding-right:0}
  .glg:not(.gl4) > .glc:nth-child(3n+1){padding-left:0}
  .glg:not(.gl4) > .glc:nth-child(-n+3){padding-top:0}
  .glg:not(.gl4) > .glc:nth-last-child(-n+3){border-bottom-width:0; padding-bottom:0}
}
.gll{font-size:13.5px; color:var(--muted); font-weight:300}
.gll i{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:12px; margin-left:2px}
.glv{font-size:17px; font-weight:500; color:var(--ink); line-height:1.35}
.glm{font-family:"IBM Plex Mono",monospace; font-size:17px; font-weight:500; color:var(--ink);
  line-height:1.4; font-variant-numeric:tabular-nums}
.glm b{font-weight:500}
.glm small,.glv small{font-family:"IBM Plex Sans KR",sans-serif; font-size:13px; font-weight:300; color:var(--muted); margin-left:2px}
.glm.glbig{font-size:20px; line-height:1.25}
.glm.gld{font-size:14px; color:var(--ink-2)}
.glm.gl00{font-size:14px; font-weight:400; color:var(--muted)}
.glv.glteal{color:var(--teal)}
.glm.glbrass{color:var(--brass)}
.gls{font-size:13px; color:var(--muted); font-weight:300; line-height:1.5}
.gls.glok{color:var(--teal)}
.gls.glwarn{color:var(--brass)}
/* 흐린 칸 — 값 대신 「어디 가면 있는지」 가 들어간다. 이유는 카드 아래 한 번만 */
.gl0 .glv{font-size:16px; color:var(--muted)}
.glr{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--rule); font-size:14.5px;
  color:var(--muted); font-weight:300; line-height:1.6}
.glr + .glr{margin-top:6px; padding-top:0; border-top:0}
.glr b{font-weight:500; color:var(--ink-2)}
/* 비교하기 — 카드 안에서는 손가락 크기로. 색은 건드리지 않는다 (.save.on 청록이 이겨야 한다) */
.glance .pick{margin:14px 0 0}
.glance .pick .save{min-height:44px; padding:0 20px; font-size:15px}

/* 절 접기 — 제목과 한 줄 요약만 보이고 누르면 펼친다. 줄 높이 60 (손가락으로 누른다) */
.acclist{margin-top:24px; border-top:2px solid var(--rule-3)}
details.acc{border-bottom:1px solid var(--rule)}
details.acc > summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:12px; align-items:center; align-content:center; min-height:60px; padding:10px 0}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary::after{content:""; grid-column:2; grid-row:1 / span 2; width:8px; height:8px; margin:0 6px 4px 0;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s}
details.acc[open] > summary::after{transform:rotate(-135deg); margin:4px 6px 0 0}
details.acc > summary h2{grid-column:1; margin:0; font-size:17px; font-weight:700; line-height:1.4}
details.acc > summary:hover h2{color:var(--accent)}
details.acc > summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.accs{grid-column:1; font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
details.acc[open] > summary .accs{white-space:normal}
.accb{padding:2px 0 22px}
.accsel{margin:0 0 10px}
.accsel .rsel{max-width:100%}
@media (prefers-reduced-motion:reduce){details.acc > summary::after{transition:none}}
/* 요약 줄이 본문 첫 글과 같을 때(뭔데) — 펼치면 숨긴다. 같은 글을 두 번 읽게 된다 */
details.acc[open] > summary .accq{display:none}

/* 긴 설명글 — 원문은 한 덩어리지만 보여줄 때 단락·목록으로 나눈다 (2026-09-11 대장: 「보기가 너무 어렵다」) */
.ptxt{margin:0 0 18px}
.ptxt:last-child{margin-bottom:0}
.ptxt > .stdkind{margin-bottom:6px}
.plist{margin:0; padding:0; list-style:none; max-width:70ch}
.plist li{position:relative; padding:0 0 0 15px; font-size:16.5px; color:var(--ink-2); font-weight:300; line-height:1.7}
.plist li + li{margin-top:10px}
.plist li::before{content:""; position:absolute; left:3px; top:.72em; width:5px; height:5px; border-radius:50%; background:var(--muted)}
.plist .pp{display:block}
.plist .pp + .pp{margin-top:8px}
.pmeta{font-size:13.5px; color:var(--muted); margin-left:4px}
.prose.pstat{font-family:"IBM Plex Mono",monospace; font-size:13.5px; color:var(--muted); line-height:1.75}
.addr{font-family:"IBM Plex Mono",monospace; font-size:13.5px; color:var(--muted); word-break:break-all; margin-top:4px}
a.ext{color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, transparent)}
a.ext:hover{border-bottom-color:var(--accent)}

/* 목록·이웃 */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:0 18px}
.grid a{display:block; padding:6px 0; border-bottom:1px solid var(--rule-2); font-size:15.5px;
  color:var(--ink); text-decoration:none}
.grid a:hover{color:var(--accent)}
/* display:block 이 [hidden] 의 기본 display:none 을 이긴다 → 검색이 안 걸러진다 */
.grid a[hidden]{display:none}
.grid a span{color:var(--muted); font-size:13.5px; margin-left:6px}
/* 법령 분야 페이지의 근거 블록 */
.lawblk{margin-bottom:16px}
.lawnm{margin:0 0 5px; font-size:15px; font-weight:500; color:var(--ink);
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.lawnm .ext{font-size:13.5px; font-weight:300}
.lawblk .rows li{display:flex; gap:12px; align-items:baseline; justify-content:space-between}
.lawblk .rows .l{white-space:nowrap}

/* 목록 거르개 — 112종이 쭉 나오면 못 고른다 */
.picks{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px}
.picks button{font:inherit; font-size:15px; padding:5px 11px; cursor:pointer;
  border:1px solid var(--rule); border-radius:99px; background:var(--surface);
  color:var(--ink-2); display:inline-flex; align-items:baseline; gap:5px}
.picks button:hover{border-color:var(--accent); color:var(--accent)}
.picks button i{font-style:normal; font-size:13px; color:var(--muted);
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.picks button.on{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.picks button.on i{color:var(--surface); opacity:.7}
.picks + .picks{margin-top:-4px}

/* 첫 화면 — 여기서 할 일은 하나뿐이다: 타일 하나 누르기 */
.lede{margin:12px 0 0; font-size:17.5px; color:var(--ink-2); font-weight:300; max-width:60ch; line-height:1.6}
.lede b{font-weight:500; color:var(--ink)}
/* 첫 화면 통합 검색 — 이름을 아는 사람은 여기서 끝난다 */
.hero{margin:22px 0 0}
.hero input{width:100%; padding:13px 15px; font:inherit; font-size:17.5px;
  background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-radius:7px}
.hero input:focus{border-color:var(--accent); outline:none}
.hero input::placeholder{color:var(--muted); font-weight:300}
.saved-note{color:var(--teal)}
.saved-note b{font-weight:700}
.saved-note a{color:var(--accent); text-decoration:none}
.hnote{margin:7px 2px 0; font-size:14.5px; color:var(--muted); font-weight:300}
.hlist{margin-top:9px; border:1px solid var(--rule); border-radius:7px;
  background:var(--surface); overflow:hidden}
.hr{display:flex; align-items:baseline; gap:9px; padding:10px 14px; text-decoration:none;
  border-bottom:1px solid var(--rule-2); color:var(--ink)}
.hr:last-child{border-bottom:none}
a.hr:hover{background:var(--surface-2)}
.hr b{font-weight:500; font-size:16.5px}
.hr i{font-style:normal; margin-left:auto; font-size:14px; color:var(--muted);
  font-weight:300; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%}
.ht{font-size:13px; padding:1px 6px; border-radius:3px; border:1px solid var(--rule);
  color:var(--muted); white-space:nowrap}
.ht.n{border-color:var(--accent); color:var(--accent)}
.ht.g{border-color:var(--teal); color:var(--teal)}
.ht.f{border-color:var(--brass); color:var(--brass)}
.hr.more2{font-size:15px; color:var(--accent); font-weight:300}
.hr.wait{margin:0; font-size:15px; color:var(--muted); font-weight:300}
/* 가까운 말로 넓혔다는 알림 — 결과보다 먼저 읽혀야 한다 */
.hr.wide{margin:0; font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.6}
.hr.wide b{font-weight:500; color:var(--teal)}
/* 이름엔 없고 하는 일 설명에만 나온 것 — 왜 걸렸는지 그 줄을 오려 붙인다.
   기계로는 진짜와 스친 것을 못 가른다. 사람이 한 줄 보고 고르게 한다 */
.hr.wsub{margin:0; padding:10px 14px 4px; font-size:14px; color:var(--muted); font-weight:300}
.hr.wsub b{font-size:inherit; font-weight:500; color:var(--ink-2)}
.hr.byjob{flex-wrap:wrap}
.hr.byjob .why{flex:1 0 100%; margin-top:3px; font-size:14px; color:var(--muted);
  font-weight:300; line-height:1.6}
.hr.byjob .why b{font-size:inherit; font-weight:700; color:var(--brass)}

.wide{margin:5px 0 0; font-size:14.5px; color:var(--brass); font-weight:300; line-height:1.6}
.wide b{font-weight:500}
.wide[hidden]{display:none}

.ask{margin:30px 0 12px; font-size:24px; font-weight:700; color:var(--ink)}
/* 구역 — 24개를 평평하게 깔면 눈이 들어갈 데가 없다. 이름으로 먼저 훑게 한다 */
.zone{margin:20px 0 8px; font-size:14.5px; font-weight:500; color:var(--muted);
  letter-spacing:.04em; display:flex; align-items:baseline; gap:8px}
.zone::after{content:""; flex:1; height:1px; background:var(--rule-2)}
.zone em{font-style:normal; font-size:13.5px; color:var(--muted); opacity:.8; order:1;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.ask + .zone{margin-top:12px}
.zone[hidden]{display:none}
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:8px}
.tiles a{display:flex; flex-direction:column; gap:3px; padding:14px 13px;
  border:1px solid var(--rule); border-radius:6px; background:var(--surface);
  text-decoration:none; color:var(--ink); transition:border-color .12s, transform .12s}
.tiles a:hover{border-color:var(--accent); transform:translateY(-1px)}
.tiles a b{font-size:17px; font-weight:700; line-height:1.3}
.tiles a i{font-style:normal; font-size:14px; color:var(--muted);
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.tiles a:hover b{color:var(--accent)}

/* 다른 길들 — 첫 화면 아래에 목록으로만 */
/* 홈의 문 셋 — 위 탭과 같은 이름을 쓴다. 여기서 한 번 보면 탭이 뭘 하는지 알게 된다.
   검색창이 주인공이라 문은 눌러 보이되 검색창보다 조용해야 한다 */
/* 담기 — 이건뭐지 목록과 낱장 둘 다 쓴다. 자리 잡기는 각자 하고 생김새만 공통이다.
   담긴 것은 초록으로 갈라 보인다: 눌렀는지 안 눌렀는지가 색 하나로 읽혀야 한다 */
.save{background:none; border:1px solid var(--rule); border-radius:3px;
  font:inherit; font-size:14px; color:var(--muted); padding:3px 10px; cursor:pointer;
  white-space:nowrap; transition:color .12s, border-color .12s}
.save:hover{border-color:var(--accent); color:var(--accent)}
.save.on{border-color:var(--teal); color:var(--teal); font-weight:500}
/* 낱장의 담기 줄 — 제목 바로 아래. 골라둔 게 있으면 몇 개인지 옆에 붙는다 */
.pick{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 0}
.pickn{font-size:14px; color:var(--muted); font-weight:300}
.pickn b{color:var(--teal); font-weight:700}

/* 뭐나왔지 — 큐넷 자료로 나가는 링크 목록. 한 종목에 최대 68건이라 촘촘해야 한다.
   줄마다 ↗ 가 붙어 밖으로 나간다는 걸 알린다 (.ext 가 이미 그 일을 한다) */
.qlist{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:1px}
.qlist li{padding:5px 0 5px 11px; border-left:2px solid var(--rule-2)}
.qlist li:hover{border-left-color:var(--accent)}
.qlist a{font-size:15px; word-break:keep-all; overflow-wrap:break-word}

.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:2px}
.doors > a{display:flex; flex-direction:column; gap:5px; padding:14px 15px 13px;
  background:var(--surface); border:1px solid var(--rule-2); border-radius:10px;
  text-decoration:none; color:inherit; transition:border-color .12s, background-color .12s}
.doors > a:hover{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface))}
.doors .dt{font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.doors .dt i{font-style:normal; font-weight:300; color:var(--muted); margin-left:4px}
.doors > a:hover .dt{color:var(--accent)}
.doors .dwhen{font-size:15px; color:var(--ink-2)}
/* 뭐가 들어 있는지 — 아래로 밀어 붙여서 카드 셋의 밑줄이 맞게 한다 */
.doors .dhas{margin-top:auto; padding-top:7px; font-size:13.5px; font-weight:300;
  color:var(--muted); line-height:1.6}
.doors .dgo{margin-top:9px; font-size:14.5px; font-weight:500; color:var(--accent)}
.doors .dgo::after{content:" →"}
.doorfoot{margin:11px 0 0; font-size:14px; color:var(--muted); font-weight:300}
/* 셋이 한 줄에 들어갈 폭이 안 되면 한 줄에 하나씩 — 반씩 자르면 마지막 하나가 혼자 남는다 */
@media (max-width:780px){ .doors{grid-template-columns:1fr} .doors .dhas{margin-top:0} }

.otherways .ways{margin:0; padding:0; list-style:none; display:grid; gap:2px}
.ways li a{display:block; padding:9px 0 9px 12px; border-left:2px solid var(--rule);
  text-decoration:none; transition:border-color .12s}
.ways li a:hover{border-left-color:var(--accent)}
.ways li a b{display:block; font-size:16px; font-weight:500; color:var(--ink)}
.ways li a:hover b{color:var(--accent)}
.ways li a span{display:block; margin-top:2px; font-size:14.5px; color:var(--muted); font-weight:300}

/* 입구 — 자격 이름을 모르는 사람이 쓰임에서 거꾸로 들어오는 길 */
.gates{display:grid; gap:22px}
.gate > h2{margin:0 0 5px; font-size:17.5px; font-weight:700;
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.gate > h2 em{font-style:normal; font-size:13.5px; color:var(--muted); font-weight:300;
  font-family:"IBM Plex Mono",monospace}
.gate > .prose{font-size:15px; margin:0 0 9px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips a{display:inline-flex; align-items:baseline; gap:5px; padding:4px 10px; border-radius:3px;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink);
  text-decoration:none; font-size:15px; line-height:1.4}
.chips a:hover{border-color:var(--accent); color:var(--accent)}
.chips a i{font-style:normal; font-size:13px; color:var(--muted);
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.chips a:hover i{color:var(--accent)}

.filterbar{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0}
.filterbar input,.filterbar select{font:inherit; font-size:16px; padding:8px 11px;
  border:1px solid var(--rule); border-radius:4px; background:var(--surface); color:var(--ink)}
.filterbar input{flex:1; min-width:200px}
/* 여기는 숫자가 주인공이 아니라 문장이다 — mono 를 씌우면 한글이 대체 글꼴로 떨어져
   "찾았 어" 처럼 자간이 벌어진다. 본문 글꼴로 두고 숫자만 자리를 맞춘다 */
.tally{font-size:14px; color:var(--muted); margin:12px 0 4px; font-variant-numeric:tabular-nums}
/* 색인을 받는 동안 — 치고 있는 자리에 대고 말해준다 */
.loading{margin:18px 0; font-size:15px; color:var(--muted); font-weight:300}

footer{margin:34px 0 0; padding:18px 0 54px; border-top:1px solid var(--rule);
  font-size:14.5px; color:var(--muted); font-weight:300; line-height:1.7}
footer p{margin:0 0 6px; max-width:78ch}