/*
 * hnc.css — 계산기 화면.
 *
 * 홈 플러그인이 :root 에 깔아 둔 --hn-* 토큰을 그대로 물려받아 같은 디자인 언어를 쓴다.
 * 다만 홈 플러그인이 꺼져도 깨지지 않게 var() 마다 폴백값을 둔다.
 * 클래스는 전부 .hnc- 로 시작해 테마(Astra)·홈 플러그인과 충돌하지 않는다.
 */

/*
 * 색 이름은 계산기 상자(.hnc) 밖에서도 써야 한다.
 *
 * 처음엔 .hnc 안에만 선언했는데, 용어 사전(.hnc-dict)은 계산기 상자가 아니라서
 * var(--hnc-line) 이 값을 못 찾았다. 값이 없는 var() 는 그 줄 전체를 무효로 만들기
 * 때문에 검색창 테두리가 통째로 사라졌다(1.9.3 라이브에서 실제로 그랬다).
 * 그래서 :root 에 선언하고 .hnc 는 상자 모양만 맡는다.
 */
:root {
    --hnc-brand: var(--hn-brand, #1e3a5f);
    --hnc-ink: var(--hn-ink, #1b2430);
    --hnc-muted: var(--hn-muted, #5f6a76);
    --hnc-line: var(--hn-line, #e6e9ee);
    --hnc-bg: var(--hn-bg, #ffffff);
    --hnc-soft: #f6f8fa;
    --hnc-ok: #1a7f4b;
    --hnc-warn: #a86400;
    /* 연회색 배지 위에 얹히는 글자다. #9aa2ab 는 대비 2.32 로 미달이었다. */
    --hnc-no: #5f6a76;
}

/* 화면에는 안 보이지만 화면낭독기에는 읽히는 글자. 검색창 라벨에 쓴다. */
.hnc-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hnc {
    border: 1px solid var(--hnc-line);
    border-radius: 12px;
    background: var(--hnc-bg);
    padding: 22px;
    margin: 2em 0;
    color: var(--hnc-ink);
    font-size: 16px;
    line-height: 1.65;
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
}

.hnc *,
.hnc *::before,
.hnc *::after {
    box-sizing: border-box;
}

.hnc-head { margin-bottom: 18px; }

.hnc-title {
    margin: 0 0 6px;
    font-size: 1.25em;
    font-weight: 700;
    color: var(--hnc-brand);
}

.hnc-lead {
    margin: 0;
    color: var(--hnc-muted);
    font-size: 0.94em;
}

/* ── 입력 ── */

.hnc-field { margin-bottom: 16px; }

.hnc-field label,
.hnc-check label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.hnc-check label {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hnc-field select,
.hnc-field input[type="text"],
.hnc-field input[type="month"] {
    width: 100%;
    /* 한글 선택지는 340px 에 빠듯하다. select 안 글자는 줄바꿈이 안 되므로
       넉넉히 주고, 그래도 긴 설명은 선택지가 아니라 아래 hint 로 뺀다. */
    max-width: 460px;
    padding: 11px 12px;
    border: 1px solid var(--hnc-line);
    border-radius: 8px;
    background: var(--hnc-bg);
    color: var(--hnc-ink);
    font-size: 1em;
    box-sizing: border-box;
}

.hnc-field select:focus,
.hnc-field input:focus,
.hnc-go:focus {
    outline: 2px solid var(--hnc-brand);
    outline-offset: 2px;
}

.hnc-check { margin-bottom: 14px; }

.hnc-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.hnc-hint,
.hnc-yearfix {
    margin: 6px 0 0;
    font-size: 0.86em;
    color: var(--hnc-muted);
}

.hnc-yearfix {
    margin-bottom: 16px;
    font-weight: 600;
}

.hnc-go {
    display: inline-block;
    padding: 12px 28px;
    border: 0;
    border-radius: 8px;
    background: var(--hnc-brand);
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
}

.hnc-go:hover { filter: brightness(1.12); }

/* ── 결과 ── */

.hnc-result {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 2px solid var(--hnc-line);
}

.hnc-headline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
}

.hnc-big {
    font-size: 2.1em;
    font-weight: 800;
    line-height: 1.15;
    color: var(--hnc-brand);
}

.hnc-sub {
    font-size: 0.92em;
    color: var(--hnc-muted);
}

/* 계산 과정. 결과만 던지면 블랙박스라 반드시 함께 보여준다. */
.hnc-steps {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--hnc-soft);
    border-radius: 8px;
    font-size: 0.93em;
}

.hnc-msg {
    margin: 0;
    color: var(--hnc-muted);
}

/*
 * 표는 좁은 화면에서 가로로만 스크롤한다. 페이지 전체가 밀리면 안 된다.
 *
 * 스크롤은 바깥 상자(.hnc-scroll)가 맡는다. 표 자체에 display:block 을 주면
 * thead 와 tbody 가 각각 별도의 익명 테이블이 되어 머리글과 본문의 열 너비가
 * 어긋난다. 2026-09-09 에 실제로 그렇게 만들어 화면이 잘려 보였다.
 */
.hnc-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0 14px;
    max-width: 100%;
}

.hnc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93em;
}

/* 글자는 정상적으로 접히게 두고, 금액만 통째로 유지한다. */
.hnc-table td,
.hnc-table th {
    word-break: keep-all;
}

.hnc-won {
    white-space: nowrap;
}

.hnc-table th,
.hnc-table td {
    border: 1px solid var(--hnc-line);
    padding: 9px 11px;
    text-align: left;
}

.hnc-table thead th {
    background: var(--hnc-soft);
    font-weight: 700;
}

.hnc-table tfoot td {
    background: var(--hnc-soft);
    font-weight: 700;
}

.hnc-cell-sub {
    display: block;
    font-size: 0.85em;
    color: var(--hnc-muted);
}

.hnc-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.88em;
    font-weight: 700;
}

.hnc-badge-eligible { background: #e7f5ec; color: var(--hnc-ok); }
.hnc-badge-check    { background: #fdf3e2; color: var(--hnc-warn); }
.hnc-badge-no       { background: #f1f3f5; color: var(--hnc-no); }

.hnc-row-no td { color: var(--hnc-muted); }

.hnc-note {
    margin: 10px 0 0;
    font-size: 0.88em;
    color: var(--hnc-muted);
}

/* 잔글씨가 연달아 붙으면 한 덩어리로 읽혀 아무것도 안 보인다.
   겨울 지원 계산기 결과에 .hnc-note 가 세 개 이어졌고 그중 하나가 핵심 답이었다
   (2026-09-10 사장님 지적). 붙은 것끼리는 가는 선으로 끊는다. */
.hnc-note + .hnc-note {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hnc-line);
}

/* 결론을 담는 상자. 표에서 나온 숫자가 '그래서 어느 쪽이냐'로 정리되는 자리라
   잔글씨로 두면 안 된다. 본문과 같은 크기로 쓰고 브랜드색 띠를 왼쪽에 세운다. */
.hnc-callout {
    margin: 14px 0 0;
    padding: 13px 16px;
    border-left: 3px solid var(--hnc-brand);
    background: var(--hnc-soft);
    border-radius: 0 8px 8px 0;
    font-size: 0.96em;
    line-height: 1.75;
}

.hnc-callout p { margin: 0; }
.hnc-callout p + p { margin-top: 8px; }

/* 무엇을 하라는 자리. 결론(무슨 일이 일어나나)과 행동(어디에 신청하나)은
   성격이 달라 색을 나눈다. */
.hnc-guide {
    margin: 14px 0 0;
    padding: 13px 16px;
    border: 1px solid var(--hnc-line);
    border-radius: 8px;
    font-size: 0.94em;
    line-height: 1.75;
}

.hnc-guide p { margin: 0; }

.hnc-guide-title {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--hnc-brand);
}

/* 표에서 합계 줄. 그냥 굵게만 하면 위 항목들과 같은 무게로 읽힌다. */
.hnc-table tr.hnc-total td {
    background: var(--hnc-soft);
    font-weight: 700;
}

/* 금액이 범위로 나오면 글자가 길어져 큰 글씨가 화면을 넘는다.
   ('575,200원 ~ 847,200원' 은 2.1em 에서 좁은 화면을 벗어난다) */
.hnc-big--range {
    font-size: 1.5em;
    line-height: 1.3;
}

/* 면책 문구. YMYL 이라 항상 보인다. */
.hnc-disclaimer {
    margin: 20px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--hnc-line);
    font-size: 0.84em;
    color: var(--hnc-muted);
}

.hnc-admin-note {
    padding: 10px 14px;
    border-left: 3px solid #a86400;
    background: #fdf3e2;
    font-size: 0.9em;
}

/* ── 허브 ── */

.hnc-hub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 1.5em 0;
}

.hnc-card {
    display: block;
    padding: 20px;
    border: 1px solid var(--hn-line, #e6e9ee);
    border-radius: 12px;
    text-decoration: none;
    color: var(--hn-ink, #1b2430);
    background: var(--hn-bg, #fff);
}

.hnc-card:hover { border-color: var(--hn-brand, #1e3a5f); }

.hnc-card-title {
    display: block;
    font-weight: 700;
    font-size: 1.05em;
    color: var(--hn-brand, #1e3a5f);
    margin-bottom: 6px;
}

.hnc-card-desc {
    display: block;
    font-size: 0.9em;
    color: var(--hn-muted, #5f6a76);
    line-height: 1.55;
}

@media (max-width: 600px) {
    .hnc { padding: 16px; }
    .hnc-big { font-size: 1.7em; }
}

/* 불러온 조건 안내 — 사용자가 안 넣은 값이 조용히 들어가 있으면 안 된다 */
.hnc-recall {
    margin: 0 0 16px;
    padding: 8px 12px;
    background: var(--hnc-soft);
    border-radius: 8px;
}

.hnc-linkbtn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--hnc-brand);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.hnc-badge-cond { background: #eef1f6; color: #4a5568; }

.hnc-ok   { color: var(--hnc-ok); font-weight: 600; }
.hnc-over { color: #b02a2a; font-weight: 600; }

/* ── 서류 체크리스트 ── */

.hnc-subhead {
    margin: 18px 0 8px;
    font-size: 1em;
    font-weight: 700;
    color: var(--hnc-brand);
}

.hnc-doclist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hnc-doc {
    padding: 10px 0;
    border-bottom: 1px solid var(--hnc-line);
}

.hnc-doc label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
}

.hnc-doc input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex: 0 0 auto;
}

.hnc-doc-name { font-weight: 600; }

.hnc-doc input:checked + .hnc-doc-name {
    text-decoration: line-through;
    color: var(--hnc-muted);
}

.hnc-doc .hnc-cell-sub { margin-left: 27px; }

.hnc-notes {
    margin: 14px 0 0;
    padding-left: 20px;
    font-size: 0.88em;
    color: var(--hnc-muted);
}

.hnc-notes li { margin-bottom: 5px; }

/*
 * 용어 풀이. <abbr title> 은 브라우저가 기본으로 점선 밑줄을 그어 주므로
 * 계산기가 없는 글(=이 CSS 가 안 실린 글)에서도 그대로 동작한다.
 * 여기서는 색만 맞춘다.
 */
.hnc-term {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

/* ── 계산기 아래 관련 글 ── */

.hnc-related {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 2px solid var(--hnc-line);
}

.hnc-related-title {
    margin: 0 0 10px;
    font-size: 1.02em;
    font-weight: 700;
    color: var(--hnc-brand);
}

.hnc-related ul {
    margin: 0;
    padding-left: 20px;
}

.hnc-related li { margin-bottom: 7px; }

/* ── 계산기 전용 페이지의 설명 글 (1.8.0) ──
   본문이 숏코드 한 줄이라 폼의 라벨 말고는 글자가 없었고, 그래서 구글이
   9개 페이지를 한 번도 크롤하지 않았다. 이 글이 검색에 걸리는 본체다. */

.hnc-copy {
    margin: 26px 0 0;
    padding-top: 22px;
    border-top: 2px solid var(--hnc-line);
}

.hnc-copy-h {
    margin: 1.6em 0 0.6em;
    font-size: 1.2em;
    font-weight: 800;
    line-height: 1.4;
    color: var(--hnc-ink);
}

.hnc-copy-h:first-child { margin-top: 0; }

/* 허브 머리글은 카드 '위'에 온다. 구분선을 위에 그으면 제목과 붙어 어색하다. */
.hnc-copy-lead {
    margin: 0 0 22px;
    padding-top: 0;
    border-top: 0;
}

.hnc-copy-q {
    margin: 1.3em 0 0.35em;
    font-size: 1.02em;
    font-weight: 700;
    color: var(--hnc-brand);
}

.hnc-copy p { margin: 0 0 1em; }

.hnc-copy ul {
    margin: 0 0 1.2em;
    padding-left: 20px;
}

.hnc-copy li { margin-bottom: 8px; }

.hnc-copy-note {
    padding: 12px 14px;
    border-left: 3px solid var(--hnc-brand);
    background: var(--hnc-soft, #f6f8fa);
}

.hnc-copy-source {
    font-size: 0.9em;
    color: var(--hnc-muted, #5f6a76);
}

/* '흔히 오해하는 것' — 오해(dt)와 실제(dd)가 짝이다.
   h 태그를 쓰지 않는 이유: '간편한 목차'가 이 칸을 항목으로 집어가면
   목차가 오해 문장으로 채워진다. */
.hnc-copy-myth { margin: 0 0 1.2em; }

.hnc-copy-myth dt {
    margin: 1em 0 0.3em;
    font-weight: 700;
    color: var(--hnc-ink);
}

.hnc-copy-myth dt::before {
    content: "“";
}

.hnc-copy-myth dt::after {
    content: "”";
}

.hnc-copy-myth dd {
    margin: 0;
    padding-left: 14px;
    border-left: 3px solid var(--hnc-brand);
    color: var(--hnc-muted, #5f6a76);
}

/* 글 안에 끼운 계산기 아래의 '자세히 보기' 링크.
   계산기 페이지로 가는 유일한 내부 링크라 눈에 띄어야 한다. */
.hnc-pagelink {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--hnc-line);
    font-size: 0.95em;
}

.hnc-pagelink a {
    font-weight: 700;
    color: var(--hnc-brand);
}

/* ── 복지 용어 사전 (/yongeo/, 1.9.0) ──
   '소득인정액이란' 처럼 사람들이 실제로 검색하는 말을 받는 페이지다.
   설명이 글 본문의 <abbr title> 안에만 있으면 검색에 안 걸린다.
   맨 위 목록은 '간편한 목차' 플러그인이 h2 로 자동으로 만든다 — 여기서 또 만들지 않는다. */

/* ── 검색창 ── */

.hnc-dict-search {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 4px;
    padding: 14px 0 12px;
    background: var(--hnc-bg, #fff);
}

.hnc-dict-search input[type="search"] {
    width: 100%;
    max-width: none;
    padding: 12px 14px;
    border: 1px solid var(--hnc-line);
    border-radius: 10px;
    background: var(--hnc-bg, #fff);
    color: var(--hnc-ink);
    font-size: 1em;
    box-sizing: border-box;
}

.hnc-dict-search input[type="search"]:focus {
    outline: 2px solid var(--hnc-brand);
    outline-offset: 2px;
}

.hnc-dict-count {
    margin: 8px 0 0;
    font-size: 0.88em;
    color: var(--hnc-muted, #5f6a76);
}

.hnc-dict-empty {
    margin: 20px 0;
    padding: 16px;
    border-radius: 10px;
    background: var(--hnc-soft, #f6f8fa);
    color: var(--hnc-muted, #5f6a76);
}

/* ── 용어 항목 ──
   본문 h2 스타일(굵은 남색 밑줄)이 스물여섯 번 반복되면 화면이 무겁다.
   사전은 훑어 내려가며 찾는 화면이라 제목을 작게, 구분선을 얇게 둔다. */

.hnc-dict .hnc-dict-term {
    margin: 0;
    padding: 18px 0 0;
    border-bottom: 0;
    border-top: 1px solid var(--hnc-line);
    font-size: 1.06em;
    font-weight: 800;
    line-height: 1.45;
    color: var(--hnc-brand);
    /* 목차에서 눌러 왔을 때 고정 헤더에 가리지 않게. */
    scroll-margin-top: 90px;
}

/* 검색으로 앞쪽이 감춰져도 맨 위 항목에는 선이 안 보이게. */
.hnc-dict .hnc-dict-term:first-of-type { border-top: 0; padding-top: 0; }

.hnc-dict-desc {
    margin: 6px 0 18px;
    line-height: 1.75;
    color: var(--hnc-ink);
}

/* ── 사전 페이지의 목차를 여러 열로 편다 ──
   '간편한 목차' 플러그인은 항목을 세로 한 줄로 쌓는다. 보통 글은 소제목이 대여섯이라
   괜찮지만 사전은 용어가 스물여섯이라 화면 한 장을 통째로 잡아먹었다.
   ⚠️ 사전 페이지에서만 바꾼다(.hnc-dict 안). 일반 글의 목차는 손대지 않는다. */

.hnc-dict #ez-toc-container {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.hnc-dict #ez-toc-container .ez-toc-list {
    column-count: 3;
    column-gap: 26px;
}

.hnc-dict #ez-toc-container .ez-toc-list li {
    /* 항목이 열 경계에서 두 동강 나지 않게. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

@media (max-width: 640px) {
    .hnc-dict #ez-toc-container .ez-toc-list {
        column-count: 2;
        column-gap: 16px;
    }
}

/* ── 연간 복지 달력 (/dallyeok/) — 세 영역 (1.12.0) ──
   1영역 열두 달 격자(4열 3행) · 2영역 고른 달의 일정 · 3영역 상시 신청 제도(4열 2행).

   격자를 좁은 화면에서 2열로 접지 않는다. 본문 폭이 760px 이라 창을 조금만 줄여도
   2열이 되어 '4열 3행'이 무너졌다(2026-09-09 사장님 지적). 칸 안에 달과 건수만
   들어가므로 아주 좁은 화면이 아니면 4열이 그대로 버틴다. */

.hnc-cal-lead {
    margin: 0 0 18px;
    color: var(--hnc-muted);
}

.hnc-cal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.hnc-cal-month {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 13px;
    border: 1px solid var(--hnc-line);
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.hnc-cal-month:hover { border-color: var(--hnc-brand); }

.hnc-cal-m {
    font-size: 1.05em;
    font-weight: 800;
    line-height: 1.2;
}

.hnc-cal-n {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--hnc-muted);
}

/* 일정이 없는 달은 조용히. 있는 달과 같은 무게로 보이면 격자를 훑는 뜻이 없다. */
.hnc-cal-empty {
    background: var(--hnc-soft);
    border-style: dashed;
}

.hnc-cal-empty .hnc-cal-m {
    color: var(--hnc-muted);
    font-weight: 700;
}

/* 지금 보고 있는 달 */
.hnc-cal-month[aria-selected="true"] {
    border-color: var(--hnc-brand);
    background: var(--hnc-brand);
    color: #fff;
}

.hnc-cal-month[aria-selected="true"] .hnc-cal-n { color: rgba(255, 255, 255, .85); }
.hnc-cal-month[aria-selected="true"] .hnc-cal-m { color: #fff; }

/* 이번 달. 고른 달과 겹칠 수 있으므로 표시를 배지로 따로 준다. */
.hnc-cal-badge {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--hnc-brand);
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
    white-space: nowrap;
}

.hnc-cal-month[aria-selected="true"] .hnc-cal-badge {
    background: #fff;
    color: var(--hnc-brand);
}

/* ── 2영역: 고른 달의 일정 ── */

.hnc-cal-monthh,
.hnc-cal-detailh,
.hnc-cal-alwaysh {
    margin: 32px 0 8px;
    padding-top: 22px;
    border-top: 2px solid var(--hnc-line);
    font-size: 1.15em;
    font-weight: 800;
}

/* 첫 제목은 리드 문단 바로 아래라 위 구분선이 필요 없다. */
.hnc-cal-monthh {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* 2영역의 제목. '지금 몇 월을 보고 있나'를 말해 주는 유일한 글자라
   잔글씨로 두면 격자에서 달을 눌러도 아래가 바뀐 줄 모른다. */
.hnc-cal-mtitle {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--hnc-brand);
    font-size: 1.05em;
    font-weight: 800;
    color: var(--hnc-brand);
}

.hnc-cal-item {
    padding: 14px 16px;
    margin-bottom: 10px;
    border-left: 3px solid var(--hnc-brand);
    background: var(--hnc-soft);
    border-radius: 0 8px 8px 0;
}

.hnc-cal-item:last-child { margin-bottom: 0; }

.hnc-cal-when {
    margin: 0 0 4px;
    font-size: 0.86em;
    font-weight: 700;
    color: var(--hnc-brand);
}

.hnc-cal-iname {
    margin: 0 0 8px;
    font-size: 1.02em;
    font-weight: 700;
    line-height: 1.45;
}

.hnc-cal-who,
.hnc-cal-note {
    margin: 0 0 6px;
    font-size: 0.92em;
    line-height: 1.7;
}

.hnc-cal-who { color: var(--hnc-muted); }

.hnc-cal-none {
    margin: 0;
    font-size: 0.93em;
    line-height: 1.7;
    color: var(--hnc-muted);
}

.hnc-cal-src {
    margin: 6px 0 0;
    font-size: 0.82em;
    color: var(--hnc-muted);
}

/* 자바스크립트가 막혀 있으면 열두 달이 그대로 다 보인다. 그때 달끼리 붙지 않게. */
.hnc-cal-panel + .hnc-cal-panel { margin-top: 22px; }

/* ── 3영역: 아무 때나 신청하는 제도 (4열 2행) ── */

.hnc-cal-always {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.hnc-cal-acard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--hnc-line);
    border-radius: 10px;
    background: #fff;
}

.hnc-cal-aname {
    font-size: 0.98em;
    font-weight: 700;
    line-height: 1.45;
    word-break: keep-all;
}

.hnc-cal-where {
    font-size: 0.86em;
    font-weight: 600;
    color: var(--hnc-brand);
    word-break: keep-all;
}

.hnc-cal-acard .hnc-cal-note {
    margin: 0;
    font-size: 0.82em;
    line-height: 1.6;
    color: var(--hnc-muted);
    word-break: keep-all;
}

/* 아주 좁은 화면에서만 열을 줄인다. 격자 칸에는 달과 건수뿐이라
   4열은 태블릿 폭까지 그대로 버틴다. */
@media (max-width: 700px) {
    .hnc-cal-always { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .hnc-cal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hnc-cal-always { grid-template-columns: minmax(0, 1fr); }
}

/* ── 기초연금·생계급여 함께 받기 ──
   '받기 전 / 받은 뒤' 두 칸을 나란히 놓는 표. 눈이 가야 하는 쪽은 오른쪽('받은 뒤')이라
   거기만 배경을 깐다. 좁은 화면에서는 세 칸이 다 눌리므로 첫 칸을 좁게 잡아
   금액 두 칸이 줄바꿈되지 않게 한다. */
.hnc-ov-table th:not(:first-child),
.hnc-ov-table td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

.hnc-ov-table th:last-child,
.hnc-ov-table td:last-child {
    background: var(--hnc-soft);
}

.hnc-ov-table th:first-child,
.hnc-ov-table td:first-child {
    width: 34%;
}

/* ── 서류 목록 인쇄 (1.13.0) ──
   주민센터에 들고 갈 종이가 필요하다는 요청. 화면 전체를 그대로 뽑으면 머리글·메뉴·
   폼까지 다 나와 두 장이 넘어간다. 결과 영역만 남기고 나머지는 감춘다. */

.hnc-printrow { margin: 14px 0 0; }

.hnc-print {
    padding: 9px 16px;
    border: 1px solid var(--hnc-line);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hnc-print:hover { border-color: var(--hnc-brand); color: var(--hnc-brand); }

/* 종이에만 찍히는 제목 */
.hnc-printonly { display: none; }

@media print {
    body * { visibility: hidden; }

    .hnc[data-hnc="documents"] .hnc-result,
    .hnc[data-hnc="documents"] .hnc-result * { visibility: visible; }

    .hnc[data-hnc="documents"] .hnc-result {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
    }

    /* 인쇄물에서 뺄 것 — 단추와 체크칸은 종이에서 쓸모가 없다.
       대신 체크할 네모는 남겨야 하므로 input 은 테두리로 바꾼다. */
    .hnc-printrow { display: none !important; }
    .hnc-printonly { display: block; font-weight: 700; margin: 0 0 10px; }

    .hnc-doclist input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        width: 12px;
        height: 12px;
        border: 1px solid #333;
        border-radius: 2px;
    }

    .hnc-headline { border: 0; padding: 0; }
    a[href]:after { content: ""; }
}