/* apidir — apis.kfsa.kr
   규격: /root/ops/design/specs/apidir.json (리듬 56/44 · 컨테이너 1180 · 본문 16 · radius 12)
   리듬은 한 방향으로만 준다 — .sec 의 margin-bottom 만 쓴다. padding 으로 또 주지 않는다. */

:root{
  --brand:#0F6B5C;
  --brand-d:#0A4E43;
  --brand-l:#E6F2EF;
  --ink:#14201D;
  --ink-2:#33443F;
  --muted:#5A6B66;
  --line:#DFE6E3;
  --line-2:#EDF2F0;
  --bg:#FFFFFF;
  --bg-soft:#F6F9F8;
  --warn:#B4520E;
  --ok:#0F6B5C;
  --bad:#B3261E;
  --r:12px;
  --r-s:8px;
  --container:1180px;
  --rhythm:56px;
}

*,*::before,*::after{box-sizing:border-box}
/* ★ 클래스의 display 가 [hidden] 을 이긴다. .chip{display:inline-flex} 때문에
   '키 잊기' 버튼이 숨겨지지 않고 보였다. 전역으로 못박는다. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Pretendard,'Pretendard Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #1B7F6E;outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
.sec{margin-bottom:var(--rhythm)}
.sec:last-child{margin-bottom:0}

/* ── 헤더 ─────────────────────────────────────────── */
.hdr{background:#0B2E28;color:#fff;position:relative;z-index:20}
.hdr .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:18px;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand-mk{width:30px;height:30px;border-radius:8px;background:linear-gradient(140deg,#1FA98F,#0F6B5C);
  display:grid;place-items:center;font-size:15px;font-weight:900;color:#fff;flex:none}
.hdr nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.hdr nav a{color:#CFE3DE;padding:10px 13px;border-radius:var(--r-s);font-size:15px;font-weight:600;min-height:40px;display:flex;align-items:center}
.hdr nav a:hover{background:rgba(255,255,255,.10);color:#fff;text-decoration:none}
.hdr nav a[aria-current="page"]{background:rgba(255,255,255,.16);color:#fff}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid rgba(255,255,255,.28);
  background:transparent;border-radius:var(--r-s);color:#fff;font-size:19px;cursor:pointer}

/* ── 히어로 = 제품 자체 (Signature Visual) ────────────── */
.hero{position:relative;overflow:hidden;background:#0B2E28;color:#fff}
/* 밴드 안쪽 여백은 section 이 아니라 안쪽 .wrap 이 갖는다.
   section 에 두면 '섹션 사이 여백' 을 재는 도구가 밴드의 안쪽 여백까지 사이 여백으로 센다. */
.hero > .wrap{padding-top:66px;padding-bottom:44px}
/* 사진을 우측 패널로 자르지 않고 히어로 전체 배경으로 쓴다.
   hero-v3 는 좌측 절반이 비도록 생성한 구도라, 그 빈 자리에 헤드라인과 콘솔이 그대로 앉는다.
   스크림은 좌→우 방향으로 준다: 글자가 앉는 좌측은 진하게, 모니터가 있는 우측은 옅게. */
.hero::before{content:"";position:absolute;inset:0;
  background-image:url("/static/img/hero-v3.webp");background-size:cover;background-position:80% center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,
  rgba(9,38,33,.97) 0%, rgba(9,38,33,.95) 30%, rgba(9,38,33,.82) 50%,
  rgba(9,38,33,.55) 74%, rgba(9,38,33,.45) 100%)}
.hero > .wrap{position:relative;z-index:1}
.hero-txt{max-width:640px}
.hero .eyebrow{font-size:14px;font-weight:700;color:#7FD4C2;letter-spacing:.02em;margin:0 0 10px}
.hero h1{margin:0 0 12px;font-size:34px;line-height:1.25;letter-spacing:-.03em;font-weight:800;max-width:20ch}
.hero p.lead{margin:0 0 22px;color:#C9E3DD;font-size:17px;max-width:56ch}
.hero strong{color:#fff}

.console{background:#fff;border-radius:var(--r);padding:16px;
  box-shadow:0 22px 48px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.14)}
.console .tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.console .tabs button{border:1px solid var(--line);background:#fff;color:var(--ink-2);font:inherit;font-size:14px;
  font-weight:700;padding:9px 14px;min-height:40px;border-radius:999px;cursor:pointer}
.console .tabs button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.qbar{display:flex;gap:8px}
.qbar input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:13px 14px;font:inherit;font-size:16px;color:var(--ink);min-height:48px}
.qbar input:focus{border-color:var(--brand);outline:none}
.qbar button{flex:none;background:var(--brand);color:#fff;border:0;border-radius:var(--r-s);
  padding:0 22px;min-height:48px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.qbar button:hover{background:var(--brand-d)}
.hintrow{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hintrow .lbl{font-size:15px;color:#4A5A55;margin-right:4px}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--ink-2);font-size:14px;font-weight:600}
.chip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.sugbox{position:relative}
.sugs{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);box-shadow:0 12px 28px rgba(0,0,0,.14);overflow:hidden;z-index:30}
.sugs button{display:flex;width:100%;gap:10px;align-items:center;justify-content:space-between;
  border:0;border-bottom:1px solid var(--line-2);background:#fff;font:inherit;font-size:15px;
  padding:11px 14px;min-height:44px;text-align:left;cursor:pointer;color:var(--ink)}
.sugs button:last-child{border-bottom:0}
.sugs button:hover,.sugs button.on{background:var(--brand-l)}
.sugs .n{color:#4A5A55;font-size:13.5px;flex:none}

.statline{display:flex;flex-wrap:wrap;gap:8px 26px;margin:20px 0 0;padding:0;list-style:none}
.statline li{color:#A9CFC7;font-size:14px}
.statline b{display:block;color:#fff;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.3}

/* ── 공통 섹션 ─────────────────────────────────────── */
.sec-h{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.sec-h h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.sec-h p{margin:0;color:var(--muted);font-size:15px}
.sec-h .more{margin-left:auto;font-size:15px;font-weight:600}

/* ── 목록 행(카드보다 행이 기본) ──────────────────────── */
.rows{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
.row{border-bottom:1px solid var(--line);padding:16px 0}
.row .t{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.row .t a{color:var(--ink);font-size:17px;font-weight:700;letter-spacing:-.01em;
  overflow-wrap:anywhere;
  line-height:1.5;display:inline-block;min-height:26px}
.row .t a:hover{color:var(--brand)}
.row .meta{margin:6px 0 0;color:#4A5A55;font-size:14px;display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center}
.row .meta a,.row .meta span{display:inline-flex;align-items:center;min-height:26px}
.row .meta a{color:#4A5A55;text-decoration:underline;text-underline-offset:2px}
.row .snip{margin:8px 0 0;color:var(--ink-2);font-size:15px;line-height:1.55;
  overflow-wrap:anywhere;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .hits{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}

.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;
  font-size:13.5px;font-weight:700;line-height:1.7;white-space:nowrap}
.tag-rest{background:#0F6B5C;color:#fff}
.tag-link{background:#E6F2EF;color:#0A4E43}
.tag-soap{background:#F0EDE7;color:#5A5348}
.tag-file{background:#EEF1F5;color:#3C4A5C}
.tag-std{background:#F5ECE6;color:#7A4A24}
.tag-core{background:#7A3E12;color:#fff}
.tag-auto{background:#E8F3EC;color:#1D6435}
.tag-hit{background:#FFF3D6;color:#6B4A05;font-weight:600;font-size:15px;
  white-space:normal;max-width:100%}
.tag-hit b{font-weight:800}

/* ── 그리드 ────────────────────────────────────────── */
.grid{display:grid;gap:12px}
.g-cat{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-use{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:#fff;display:block;color:inherit}
.card:hover{border-color:var(--brand);text-decoration:none;box-shadow:0 6px 18px rgba(15,107,92,.08)}
.card .ic{font-size:22px;line-height:1}
/* ★ 이미지 카드의 안쪽 여백은 margin 으로 주지 않는다.
   `.card h3`·`.card p` 가 뒤에 있어 `.card-img h3`·`.card-img p` 를 덮었고,
   글자가 테두리에서 1px 에 붙었다(실측). 전용 래퍼에 padding 을 주면 순서와 무관해진다. */
.card-img{padding:0;overflow:hidden}
.card-img img{width:100%;height:158px;object-fit:cover;display:block;background:var(--bg-soft)}
.card-tx{display:block;padding:14px 16px 16px}
.card h3{margin:8px 0 4px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.card p{margin:0;color:#4A5A55;font-size:15px;line-height:1.6}
.card .n{color:var(--brand);font-weight:700}

/* ── 상세 ──────────────────────────────────────────── */
.dt-head{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:28px 0;margin-bottom:28px}
.dt-head h1{margin:10px 0 8px;font-size:27px;line-height:1.3;letter-spacing:-.025em;font-weight:800}
.dt-head .crumb{font-size:14px;color:var(--muted)}
.dt-head .crumb a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.dt-head .badges{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.dt-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.panel{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:20px}
.panel > h2{margin:0;padding:13px 16px;background:var(--bg-soft);border-bottom:1px solid var(--line);
  font-size:16px;font-weight:700}
.panel .body{padding:16px}
/* 원문 설명에 공백 없는 긴 문자열이 섞여 있어 좁은 폭에서 넘쳤다(실측 450>316) */
.panel .body p{overflow-wrap:anywhere;word-break:break-word}
.kv{margin:0;display:grid;grid-template-columns:132px minmax(0,1fr);gap:0}
.kv dt{padding:9px 0;border-bottom:1px solid var(--line-2);color:var(--muted);font-size:14px;font-weight:600}
.kv dd{padding:9px 0;border-bottom:1px solid var(--line-2);margin:0;font-size:15px;word-break:break-word}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}

.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 2열이라 좁은 폭에서도 들어간다. tblwrap 의 가로 스크롤은 안전망으로 남긴다 */
table.fld{width:100%;border-collapse:collapse;font-size:15px;min-width:0}
table.fld td.nm{overflow-wrap:anywhere}
table.fld th,table.fld td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.fld th{background:var(--bg-soft);color:var(--ink-2);font-size:13.5px;font-weight:700;white-space:nowrap}
table.fld td.nm{font-weight:600;word-break:break-word}
table.fld td.req{white-space:nowrap;color:var(--muted);font-size:13.5px}

.codebox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.codebox .tabs{display:flex;gap:0;background:var(--bg-soft);border-bottom:1px solid var(--line);flex-wrap:wrap}
.codebox .tabs button{border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;
  padding:11px 16px;min-height:44px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}
.codebox .tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand);background:#fff}
.codebox pre{margin:0;padding:16px;overflow-x:auto;background:#0B2E28;color:#DCEFE9;
  font-size:15px;line-height:1.7;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.codebox .foot{display:flex;gap:10px;align-items:center;padding:11px 14px;border-top:1px solid var(--line);
  background:var(--bg-soft);font-size:15px;line-height:1.6;color:#4A5A55;flex-wrap:wrap}
.copybtn{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:var(--r-s);
  font:inherit;font-size:14px;font-weight:600;padding:8px 14px;min-height:40px;cursor:pointer;color:var(--ink-2)}
.copybtn:hover{border-color:var(--brand);color:var(--brand)}

.note{border-left:3px solid var(--warn);background:#FFF8F0;padding:12px 14px;border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:15px;color:#54360F;margin:0 0 16px}
.note b{color:#7A4A12}
.note.ok{border-left-color:var(--brand);background:var(--brand-l);color:#0A4E43}
.note.ok b{color:#083F36}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;
  border-radius:var(--r-s);padding:13px 20px;min-height:48px;font-size:16px;font-weight:700;width:100%}
.cta:hover{background:var(--brand-d);text-decoration:none;color:#fff}
.cta.sub{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.cta.sub:hover{background:var(--brand-l);color:var(--brand-d)}

/* ── 검색 지면 ─────────────────────────────────────── */
.srch-top{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:34px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.filters a{display:inline-flex;align-items:center;min-height:38px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:14px;font-weight:600}
.filters a[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.filters a:hover{text-decoration:none;border-color:var(--brand)}
.resline{margin:0 0 24px;color:var(--muted);font-size:15px}
.resline b{color:var(--ink)}

.empty{border:1px dashed var(--line);border-radius:var(--r);padding:36px 20px;text-align:center;color:var(--muted)}
.empty h3{margin:0 0 8px;color:var(--ink);font-size:18px}
.empty p{margin:0 0 16px;font-size:15px}

.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin:24px 0 0;flex-wrap:wrap}
.pager a,.pager span{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border:1px solid var(--line);border-radius:var(--r-s);font-size:15px;font-weight:600;color:var(--ink-2)}
.pager a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.pager span{background:var(--bg-soft);color:var(--muted)}

.col-hero{width:100%;height:220px;object-fit:cover;border-radius:var(--r);margin:0 0 24px}

/* 페이저 다음에 오는 섹션이 0px 로 붙었다(실측). 목록 뒤 섹션도 리듬을 받는다 */
.pager + .sec{margin-top:var(--rhythm)}

.sec + .sec > .wrap{position:relative}
.sec + .sec > .wrap::before{content:"";position:absolute;left:20px;right:20px;
  top:calc(-1 * var(--rhythm) / 2);height:1px;background:var(--line)}

/* ── 푸터 ──────────────────────────────────────────── */
.ftr{border-top:1px solid var(--line);background:var(--bg-soft);padding:28px 0;margin-top:var(--rhythm)}
/* 15px 미만 금지(A4) + 인라인 링크도 터치타겟 24px 이상(A6) — 둘 다 여기서 걸렸다 */
.ftr p{margin:0 0 10px;color:#4A5A55;font-size:15px;line-height:1.8}
.ftr a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;
  display:inline-block;padding:2px 0;line-height:1.7}

/* ── 반응형 ────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   v3 리뉴얼 (2026-09-07) — Section Rhythm 재편 · 데이터 시각화 · Visual Break
   마스터룰 v3 19·20·23·25·26·27·35항. 새 규칙은 전용 접두어로만 짓는다
   (.ed- .demo- .band- .bar- .cta-) — 기존 .card/.row/.tag 를 덮지 않게.
   ══════════════════════════════════════════════════════════════ */

/* 리듬은 한 방향으로만. 풀블리드 밴드 앞 섹션은 아래여백을 걷고 밴드 padding 이 대신 준다 */
/* ══ 밴드 경계의 여백 ══
   색 밴드의 안쪽 padding 은 '밴드의 몫' 이지 섹션 간 여백이 아니다.
   여백은 **밴드 가장자리와 이웃 콘텐츠 사이**로 잰다.
   ★ 앞서 검사기 공식(밴드 padding 을 여백으로 세는)에 맞추려고 margin 을 0 으로 만들었더니
     흰 콘텐츠가 밴드에 0~12px 로 달라붙었다. 지표가 아니라 실제 여백에 맞춘다. */
.hero,.band-dark,.band-soft,.band-img,.cta-sec{margin-top:var(--rhythm);margin-bottom:var(--rhythm)}
.hero{margin-top:0}
/* 밴드끼리 맞닿으면 색 변화가 경계다 — 벌리지 않고 맞닿는 쪽 padding 을 반씩 나눈다 */
.band-soft:has(+ .band-dark){margin-bottom:0}
.band-soft + .band-dark{margin-top:0}
/* CTA 는 푸터와 같은 바탕이라 붙인다. 푸터 위 선이 경계 역할을 한다 */
.cta-sec{margin-bottom:0}
.cta-sec + .ftr{margin-top:0}

/* ── ② 개념 도식 — 산문 대신 그림. 실제 API 한 건의 필드를 쓴다 ── */
.concept{padding-top:0}
.cpt-kicker{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--brand);letter-spacing:.01em}
.cpt-h{margin:0 0 26px;font-size:30px;line-height:1.4;letter-spacing:-.03em;font-weight:800;
  color:var(--ink);max-width:24ch}
.cpt-h em{font-style:normal;color:var(--brand);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:6px}

/* 라벨을 목록과 같은 칸에 두면 좌우 항목 수가 다를 때 한쪽 라벨만 아래로 밀린다.
   라벨을 윗줄로 빼고, 아랫줄(목록·화살표·API)만 세로 가운데로 맞춘다.
   ★ 그리드 영역은 '직계 자식' 에만 걸린다 — 래퍼로 감싸면 안 먹는다(밟았다). */
.cpt-flow{display:grid;
  grid-template-columns:1fr auto minmax(0,232px) auto 1fr;
  grid-template-areas:"lblA .  .   .  lblB"
                      "colA a1 api a2 colB";
  gap:10px 14px;align-items:center}
.cpt-lbl-a{grid-area:lblA}
.cpt-lbl-b{grid-area:lblB}
.cpt-in{grid-area:colA}
.cpt-out{grid-area:colB}
.cpt-a1{grid-area:a1}
.cpt-a2{grid-area:a2}
.cpt-api{grid-area:api}
/* 목록은 라벨 바로 아래에 붙는다(위 정렬). 화살표·API 만 세로 가운데 —
   목록까지 가운데로 두면 항목 수가 적은 쪽 라벨과 첫 항목 사이가 35px 로 벌어진다(실측). */
.cpt-in,.cpt-out{align-self:start}
.cpt-a1,.cpt-a2,.cpt-api{align-self:center}
.cpt-lbl{display:block;margin:0;font-size:14px;color:#4A5A55;align-self:end}
.cpt-lbl b{color:var(--ink);font-weight:700}
.cpt-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.cpt-list li{border:1px solid var(--line);border-radius:var(--r-s);background:#fff;
  padding:9px 12px;font-size:15px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:40px;display:flex;align-items:center}
.cpt-list.cpt-out li{border-color:#CFE3DC;background:var(--brand-l);color:var(--brand-d)}
.cpt-list .cpt-more{border-style:dashed;background:transparent;color:#4A5A55;font-weight:600}
.cpt-arrow{display:block;font-size:24px;line-height:1;color:var(--brand);font-weight:700}
.cpt-api{border:1.5px solid var(--brand);border-radius:var(--r);background:#0B2E28;color:#fff;
  padding:16px;text-align:center;min-width:0}
.cpt-api b{display:block;margin:10px 0 4px;font-size:15px;color:#7FD4C2;font-weight:700}
.cpt-api span:last-child{display:block;font-size:15px;line-height:1.5;color:#fff;word-break:keep-all}
.cpt-foot{margin:26px 0 0;font-size:16px;line-height:1.7;color:var(--ink-2);max-width:70ch}
.cpt-foot b{color:var(--ink)}

/* ── ③ Product Demo — 실제 검색 결과. 장식용 대시보드가 아니다 ── */
.demo-shell{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.demo-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#0B2E28;color:#CFE3DE;
  font-size:15px;flex-wrap:wrap}
.demo-dot{width:9px;height:9px;border-radius:50%;background:#35A892;flex:none}
.demo-q b{color:#fff;font-weight:800}
.demo-n{margin-left:auto;color:#7FD4C2;font-weight:700;font-size:15px}
.demo-rows{border-top:0}
.demo-rows .row{padding:14px 16px}
.demo-rows .row:last-child{border-bottom:0}
.demo-more{display:block;padding:13px 16px;border-top:1px solid var(--line);background:var(--bg-soft);
  font-size:15px;font-weight:700;min-height:48px}

/* ── ④ 가로 막대 — 단일 시리즈, 한 색. 값 라벨은 항상 막대 밖 ── */
.bars{display:flex;flex-direction:column;gap:2px}   /* 인접 막대 사이 2px 표면 간격 */
.bar-row{display:grid;grid-template-columns:132px minmax(0,1fr) 68px;align-items:center;gap:12px;
  padding:7px 8px;border-radius:var(--r-s);min-height:40px;color:var(--ink)}
.bar-row:hover{background:var(--brand-l);text-decoration:none}
.bar-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-track{height:14px;background:#E7EDEB;border-radius:3px;min-width:0}
.bar-fill{display:block;height:100%;background:var(--brand);
  border-radius:3px 4px 4px 3px;   /* 데이터 끝만 둥글게, 기준선 쪽은 각지게 */
  transform-origin:left center}
.bar-val{font-size:15px;font-weight:700;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}

.bars-dark .bar-row{color:#E4F2EE}
.bars-dark .bar-row:hover{background:rgba(255,255,255,.08)}
.bars-dark .bar-track{background:rgba(255,255,255,.10)}
.bars-dark .bar-fill{background:#35A892}   /* 다크 표면 #0B2E28 대비 검증 통과 */
.bars-dark .bar-val{color:#A9CFC7}

/* ── ④ Dark Data Section ── */
.band-dark{background:#0B2E28;color:#fff}
.band-dark > .wrap{padding-top:52px;padding-bottom:52px}
/* 흰 배경 섹션이 연달아 오면 경계가 안 보인다(실측 [배경동일] 4곳).
   Product Demo 는 연회색 풀블리드 밴드로 띄워 색으로 구분한다. */
.band-soft{background:var(--bg-soft)}
.band-soft > .wrap{padding-top:52px;padding-bottom:52px}
/* 풀블리드 밴드가 연달아 오면 두 padding 이 겹쳐 96px 이 됐다(실측). 합이 리듬과 같게 나눈다 */
.band-soft:has(+ .band-dark) > .wrap{padding-bottom:28px}
.band-soft + .band-dark > .wrap{padding-top:28px}

.sec-h-dark h2{color:#fff}
.sec-h-dark p{color:#A9CFC7}

/* ── ⑥ Visual Break 밴드 ── */
.band-img{position:relative}
.band-img img{width:100%;height:300px;object-fit:cover;object-position:center;display:block}
.band-img-txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:24px;
  background:linear-gradient(180deg,rgba(11,46,40,.72),rgba(11,46,40,.52))}
.band-kicker{margin:0 0 10px;font-size:38px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1.2}
.band-lead{margin:0;font-size:17px;line-height:1.6;color:#E4F2EE;max-width:60ch}

/* ── ⑨ CTA ── */
.cta-sec{background:var(--bg-soft);border-top:1px solid var(--line)}
.cta-sec > .wrap{padding-top:52px;padding-bottom:44px}
.cta-cols{display:grid;grid-template-columns:40% minmax(0,1fr);gap:34px;align-items:center}
.cta-img img{width:100%;height:250px;object-fit:cover;object-position:left center;border-radius:var(--r);display:block}
.cta-txt h2{margin:0 0 10px;font-size:27px;font-weight:800;letter-spacing:-.03em}
.cta-txt p{margin:0 0 20px;font-size:16.5px;line-height:1.65;color:var(--ink-2);max-width:52ch}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.cta-row .cta{width:auto;min-width:180px}
.cta-sec + .ftr{margin-top:0}

/* ── ⑦ Motion — transform 만 쓴다. opacity 를 건드리면 측정이 조용히 빈다 ── */

/* ── 필드 조합 검색 폼 — 홈 도식의 "넣는 값 → 나오는 값" 흐름을 그대로 잇는다 ── */
.fx-h1{margin:0 0 4px;font-size:24px;letter-spacing:-.025em}
.fx-lead{margin:0 0 16px;color:#4A5A55;font-size:15px}
.fx-form{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;
  gap:10px;align-items:end}
.fx-cell{min-width:0;position:relative}
.fx-lbl{display:block;margin:0 0 6px;font-size:14px;color:#4A5A55}
.fx-lbl b{color:var(--ink);font-weight:700}
.fx-cell input{width:100%;border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);min-height:48px;background:#fff}
.fx-cell input:focus{border-color:var(--brand);outline:none}
.fx-plus{display:flex;align-items:center;justify-content:center;min-height:48px;
  font-size:19px;font-weight:700;color:var(--brand);padding:0 2px}
.fx-go{background:var(--brand);color:#fff;border:0;border-radius:var(--r-s);
  padding:0 24px;min-height:48px;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.fx-go:hover{background:var(--brand-d)}
.fx-combo{margin-top:14px}

/* 결과 분포 — 목록·검색 지면의 Visual Break (v3 35항). 장식 사진 대신 데이터를 쓴다 */
/* 좌우 padding 을 주면 헤딩이 다른 섹션보다 안쪽에서 시작한다(실측 169 vs 150).
   카드 대신 위아래 선만 써서 좌우 정렬을 지면 전체와 맞춘다. */
.distbox{border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:0 0 22px;margin:0 0 34px;background:transparent}
.distbox .sec-h{margin-bottom:12px}
.distbox .sec-h h2{font-size:17px}
.distbox .sec-h p{font-size:14.5px}
.distbox .bar-row{padding-left:0;padding-right:0}
.distbox .bar-row:hover{background:transparent;color:var(--brand)}
.distbox .bar-track{background:#E2E9E7}

/* 용도별 지도 상세의 도입문 — 패널 안쪽 padding 때문에 헤딩이 17px 안쪽에서 시작했다(실측).
   컨테이너 기준으로 맞춘다. */
.col-intro{margin:0 0 24px;font-size:16.5px;line-height:1.75;color:var(--ink-2);max-width:68ch;
  white-space:pre-wrap}

/* ↓ 원래 파일 끝(@media 뒤)에 붙어 있어 반응형을 덮던 규칙들 — 기본 영역으로 옮겼다 */
/* 상세 지면의 흐름 도식 — 홈 도식을 이 API 의 필드로 재사용한다.
   좁은 본문 칼럼에 들어가므로 가운데 박스를 줄이고 여백을 좁힌다. */
.dflow{border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;margin:0 0 20px;background:var(--bg-soft)}
.cpt-flow-sm{grid-template-columns:1fr auto minmax(0,150px) auto 1fr;gap:8px 10px}
.cpt-flow-sm .cpt-list li{font-size:14.5px;min-height:36px;padding:7px 10px}
.cpt-flow-sm .cpt-api{padding:12px 10px}
.cpt-flow-sm .cpt-api b{margin:8px 0 3px;font-size:13.5px}
.cpt-flow-sm .cpt-api span:last-child{font-size:13.5px;line-height:1.45}
.cpt-flow-sm .cpt-arrow{font-size:19px}
.cpt-flow-sm .cpt-lbl{font-size:13.5px}

/* ── 내 키로 실행 ──────────────────────────────────────────
   방문자 키는 브라우저에만 있다. 우리 서버로 가지 않으므로 로그에도 남지 않는다. */
.tryit{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 16px}
.tryit-head{padding:12px 14px;background:var(--brand-l);border-bottom:1px solid #CFE3DC}
.tryit-head b{display:block;font-size:15px;color:var(--brand-d)}
.tryit-safe{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:#2E5E54}
.tryit-form{padding:14px}
.tryit-lbl{display:block;margin:0 0 6px;font-size:14px;color:#4A5A55;font-weight:600}
.tryit input[type="password"],.tryit input[type="text"]{width:100%;border:1.5px solid var(--line);
  border-radius:var(--r-s);padding:11px 13px;font:inherit;font-size:15px;min-height:46px;color:var(--ink)}
.tryit input:focus{border-color:var(--brand);outline:none}
.tryit-args{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0 0}
.tryit-args label{display:block;font-size:13.5px;color:#4A5A55;margin:0 0 4px;font-weight:600}
.tryit-btns{display:flex;align-items:center;gap:12px;margin:14px 0 0;flex-wrap:wrap}
.tryit-run{width:auto;min-width:120px}
.tryit-keep{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:#4A5A55;min-height:40px}
.tryit-out{margin:0;padding:14px;background:#0B2E28;color:#DCEFE9;font-size:14px;line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;max-height:340px;overflow:auto;
  border-top:1px solid var(--line);white-space:pre-wrap;word-break:break-all}
.tryit-out.err{background:#3A1512;color:#FFD9D4}

/* ── 비교 지면 ── */
table.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
table.cmp th,table.cmp td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-2);
  vertical-align:top;word-break:keep-all}
table.cmp thead th{background:var(--bg-soft);font-size:15px;font-weight:700;line-height:1.45}
table.cmp thead th a{color:var(--ink)}
table.cmp .cmp-h{width:112px;background:var(--bg-soft);color:#4A5A55;font-size:14px;font-weight:700;white-space:nowrap}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}

.cmp-block{padding:0 0 16px;border-bottom:1px solid var(--line-2);margin:0 0 16px}
.cmp-block:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.cmp-lbl{margin:0 0 10px;font-size:15px;color:var(--ink);font-weight:700}
.cmp-lbl b{color:var(--brand)}
.cmp-why{margin-left:8px;font-size:14px;font-weight:600;color:#4A5A55}
.cmp-common{background:var(--brand-l);border-color:#CFE3DC;color:var(--brand-d);font-weight:700}
.cmp-none{margin:0;font-size:15px;color:#4A5A55}
.cmp-foot{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}

/* 비교함 트레이 — 담긴 게 있을 때만 뜬다 */
.tray{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#0B2E28;color:#fff;
  box-shadow:0 -8px 26px rgba(0,0,0,.22)}
.tray .wrap{display:flex;align-items:center;gap:10px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.tray-items{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.tray-lbl{font-size:14px;color:#A9CFC7;font-weight:700}
.tray-item{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.10);
  border-radius:999px;padding:6px 8px 6px 12px;font-size:14px;min-height:34px}
.tray-item button{border:0;background:transparent;color:#A9CFC7;font:inherit;font-size:16px;
  line-height:1;cursor:pointer;padding:2px 4px;min-width:24px;min-height:24px}
.tray-item button:hover{color:#fff}
.tray-go{margin-left:auto;background:var(--brand);color:#fff;border-radius:var(--r-s);
  padding:10px 18px;min-height:44px;font-size:15px;font-weight:700;display:inline-flex;align-items:center}
.tray-go:hover{background:#12836F;text-decoration:none;color:#fff}
.tray-clear{border:0;background:transparent;color:#A9CFC7;font:inherit;font-size:14px;
  cursor:pointer;min-height:44px;padding:0 6px}
.cmp-add{width:100%;margin:0 0 10px}
.cmp-add.on{background:var(--brand-d);color:#fff}

/* 최근 본 API — 이 브라우저에만 남는다. 기록이 없으면 아예 그리지 않는다 */
.recent{margin-top:12px}
.recent-clear{border-style:dashed;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:#4A5A55}
.recent-clear:hover{border-color:var(--bad);color:var(--bad)}

/* 필터/정렬 줄의 구분자 — 좁히기와 정렬은 성격이 달라 시각적으로 끊는다 */
.fl-sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.fl-sep::after{content:"정렬";position:absolute;left:-9999px}  /* 화면낭독기용 */

/* ══════════════════════════════════════════════════════════════
   미디어쿼리는 전부 파일 맨 끝에 모은다.
   ★ 기본 규칙을 나중에 추가하면 앞쪽 @media 를 덮어버린다 — 세 번 밟았다
     (막대 라벨 · 개념 도식 · 분포차트). 새 규칙은 위쪽 기본 영역에만 쓰고,
     반응형 조정은 아래 블록에 넣는다.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){.col-hero{height:150px}}

@media (max-width:900px){
  :root{--rhythm:44px}
  .hdr nav{display:none;position:absolute;left:0;right:0;top:100%;background:#0B2E28;
    flex-direction:column;gap:0;padding:8px 20px 16px;border-top:1px solid rgba(255,255,255,.14)}
  .hdr nav.open{display:flex}
  .hdr nav a{width:100%;min-height:48px;font-size:16px}
  .burger{display:block}
  .g-cat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-use{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dt-cols{grid-template-columns:minmax(0,1fr);gap:0}
  .hero{padding:32px 0 30px}
  .hero h1{font-size:26px}
  .hero p.lead{font-size:16px}
  /* 모바일에서는 글자가 폭 전체를 쓰므로 스크림을 세로 방향으로 바꾼다 */

  .hero::before{background-position:64% center}
  .hero::after{background:linear-gradient(180deg,
    rgba(9,38,33,.93) 0%, rgba(9,38,33,.88) 26%, rgba(9,38,33,.62) 52%, rgba(9,38,33,.90) 100%)}
  .hero-txt{max-width:none}
  /* 도식은 가로 흐름을 세로로 눕힌다 — 카드 스택이 아니라 방향을 유지한 재배치다 */
  .card-img img{height:150px}
  .dt-head h1{font-size:22px}
  .statline{gap:8px 20px}
  .statline b{font-size:19px}
}

@media (max-width:560px){
  .g-cat,.g-use{grid-template-columns:minmax(0,1fr)}
  .qbar{flex-wrap:wrap}
  .qbar button{width:100%}
  .kv{grid-template-columns:minmax(0,1fr)}
  .kv dt{padding-bottom:0;border-bottom:0}
  .kv dd{padding-top:2px}
}

@media (prefers-reduced-motion:no-preference){
  .rv{transform:translateY(14px);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .rv.in{transform:none}
  /* 막대 자라기 애니메이션은 뺐다 — 관찰자가 안 걸린 막대가 scaleX(0) 에 갇혀
     데이터가 통째로 안 보이는 사고가 났다. 데이터는 언제나 보여야 한다. */
}

@media (max-width:900px){
  .fx-form{grid-template-columns:minmax(0,1fr);gap:8px}
  .fx-plus{min-height:0;padding:2px 0}
  .fx-go{width:100%;margin-top:4px}
  /* 간격도 리듬 44 에 맞춘다 — 데스크톱 값을 그대로 두면 12px 씩 넓어진다 */
  .hero > .wrap{padding-top:34px;padding-bottom:32px}
  .srch-top{margin-bottom:22px}
  .dt-head{margin-bottom:16px}
  .band-soft > .wrap{padding-top:40px;padding-bottom:40px}
  .band-soft:has(+ .band-dark) > .wrap{padding-bottom:22px}
  .band-soft + .band-dark > .wrap{padding-top:22px}
  .distbox{margin-bottom:22px}
  /* ★ 도식 모바일 규칙은 반드시 기본 규칙 '뒤'에 온다 — 앞에 두면 같은 특이도라 덮인다(밟았다) */
  .cpt-h{font-size:23px;margin-bottom:20px}
  /* ★ grid-template-columns 만 바꾸면 areas 가 살아남아 5열 배치를 강요한다.
     390px 에서 첫 열이 0px 로 찌그러졌다(실측). areas 를 반드시 none 으로 지운다. */
  .cpt-flow{grid-template-areas:none;grid-template-columns:minmax(0,1fr);gap:10px}
  .cpt-flow-sm{grid-template-columns:minmax(0,1fr);gap:8px}
  .dflow{padding:16px 14px}
  .cpt-lbl-a,.cpt-lbl-b,.cpt-in,.cpt-out,.cpt-a1,.cpt-a2,.cpt-api{grid-area:auto}
  .cpt-lbl{margin-bottom:2px}
  .cpt-arrow{transform:rotate(90deg);font-size:20px;text-align:center;width:100%}
  .cpt-api{padding:14px}
  .cpt-foot{font-size:15.5px;margin-top:20px}
  .bar-row{grid-template-columns:104px minmax(0,1fr) 58px;gap:9px}
  .bar-name{font-size:14.5px}
  .band-dark > .wrap{padding-top:40px;padding-bottom:40px}
  .band-img img{height:220px}
  .band-kicker{font-size:29px}
  .band-lead{font-size:16px}
  .cta-sec > .wrap{padding-top:40px;padding-bottom:36px}
  .cta-cols{grid-template-columns:minmax(0,1fr);gap:22px}
  .cta-img img{height:180px}
  .cta-txt h2{font-size:22px}
  .cta-row .cta{min-width:0;flex:1}
}

@media (max-width:560px){
  /* 트레이는 화면의 4분의 1을 먹으면 안 된다. 요약줄과 항목줄로 나누고 이름을 줄인다 */
  .tray .wrap{gap:8px;padding-top:9px;padding-bottom:9px}
  .tray-lbl{order:1}
  .tray-clear{order:2;min-height:32px}
  .tray-go{order:3;margin-left:auto;min-height:38px;padding:8px 14px;font-size:14.5px}
  .tray-items{order:4;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .tray-item{flex:none;max-width:132px;font-size:13.5px;min-height:30px;padding:4px 6px 4px 10px}
  .tray-item > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 좁은 폭에선 세로 선이 의미가 없다. 줄을 바꿔 '좁히기' 와 '정렬' 을 나눈다 */
  .fl-sep{width:100%;height:0;background:transparent;margin:2px 0}
  /* 좁은 폭에서는 이름을 줄이지 않고 위로 올린다 — "식품의약품안전처" 가 잘렸다(실측).
     데스크톱을 축소한 게 아니라 두 줄로 다시 짠 것이다. */
  .bar-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "bar bar";
    gap:5px 10px;padding:9px 8px;min-height:0}
  .bar-name{grid-area:name;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4}
  .bar-val{grid-area:val;font-size:14.5px}
  .bar-track{grid-area:bar;height:12px}
  .cta-row .cta{width:100%;flex:none}
}