/* 컴포넌트. 색·간격은 tokens.css 변수만 사용. 클래스 목록은 assets/DESIGN.md */

/* ── 헤더 ── */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); color: var(--color-text); text-decoration: none; font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.brand:hover { color: var(--color-text); }
.brand__mark { width: 28px; height: 28px; flex: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); padding-inline: var(--space-3); color: var(--color-text-muted); text-decoration: none; font-size: var(--fs-sm); border-radius: var(--radius-md); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-primary); background: var(--color-primary-soft); }

/* ── 푸터 ── */
.site-footer { margin-top: var(--space-7); padding-block: var(--space-6); background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--fs-sm); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--color-text-muted); }
.footer-note { margin: 0; font-size: var(--fs-xs); }

/* ── 페이지 머리 ── */
.page-title { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
.page-lead { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.hero { padding-block: var(--space-6) var(--space-4); }
.hero .page-title { font-size: var(--fs-3xl); }

/* ── breadcrumb ── */
.breadcrumb { font-size: var(--fs-sm); color: var(--color-text-muted); padding-block: var(--space-3) 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li { margin-top: 0; }
.breadcrumb li + li::before { content: "›"; margin-inline: var(--space-2); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* ── 검색창 ── */
.search { position: relative; margin-bottom: var(--space-4); }
.search__input { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); }
.search__input::placeholder { color: var(--color-text-muted); }
.search__empty { color: var(--color-text-muted); padding: var(--space-5) 0; text-align: center; }

/* ── 카테고리 칩 ── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.chips li + li { margin-top: 0; }
.chip { display: inline-flex; align-items: center; min-height: var(--tap-min); padding-inline: var(--space-4); font: inherit; font-size: var(--fs-sm); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* ── 카드 그리드 ── */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.card-grid > li { margin: 0; }
.card { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); color: var(--color-text); }
.card__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.card__desc { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.card__meta { margin-top: auto; padding-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.badge { display: inline-block; padding: 0 var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-pill); }
.badge--pending { color: var(--color-warning); background: var(--color-warning-soft); }
.section-title { font-size: var(--fs-xl); margin: var(--space-6) 0 var(--space-3); }

/* ── 폼 ── */
.tool-card { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.field { margin-bottom: var(--space-4); }
.field__label { display: block; margin-bottom: var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field__hint { margin: var(--space-1) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.field__error { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--color-danger); }
.input, .select, .textarea { width: 100%; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--fs-base); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.textarea { min-height: 96px; resize: vertical; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
.input[type="color"] { padding: 2px; }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--color-surface-muted); color: var(--color-text-muted); }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 var(--space-3); }
.field-row > *, .field > * { min-width: 0; }
.field-group { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.field-group > .field__label { margin-bottom: var(--space-3); }
.field-group .field:last-child { margin-bottom: 0; }
.checkbox { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); cursor: pointer; }
.checkbox input, .check-field input { width: 22px; height: 22px; accent-color: var(--color-primary); flex: none; }
.input-group .input { min-width: 0; flex: 1 1 auto; }
.field__error::before { content: "\26A0\FE0E "; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group__suffix { display: inline-flex; align-items: center; padding-inline: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); background: var(--color-surface-muted); border: 1px solid var(--color-border-strong); border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; white-space: nowrap; }
.check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); }
.check input { width: 22px; height: 22px; accent-color: var(--color-primary); flex: none; }
fieldset.field { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
fieldset.field legend { padding-inline: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-min); padding: var(--space-2) var(--space-5); font: inherit; font-weight: var(--fw-medium); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--primary { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.btn--primary:hover { color: var(--color-on-primary); background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--color-primary); }
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ── 결과 박스 ── */
.result { margin-top: var(--space-5); padding: var(--space-4); background: var(--color-primary-soft); border: 1px solid var(--color-primary); border-radius: var(--radius-lg); }
.result:empty { display: none; }
.result__label { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.result__value { margin: 0 0 var(--space-3); font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--color-text); }
.result__list { margin: 0; }
.result__row { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--color-border); }
.result__row dt { color: var(--color-text-muted); }
.result__row dd { margin: 0; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; text-align: right; }
.result__row--total { font-weight: var(--fw-bold); }
.result__actions { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.result__row dt { flex: 1 1 auto; min-width: 0; }
.result__row dd { flex: none; max-width: 60%; overflow-wrap: anywhere; }
.result__detail { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.result__detail summary { display: flex; align-items: center; min-height: var(--tap-min); font-weight: var(--fw-medium); cursor: pointer; }
.result--error { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }

/* ── 바코드 도구 미리보기 (tools/barcode) ── */
.barcode-output { margin-top: var(--space-4); }
.barcode-preview { overflow-x: auto; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper); text-align: center; }
.barcode-preview svg { max-width: 100%; height: auto; }
.barcode-output[hidden], #bc-c39-field[hidden] { display: none; }

/* ── 안내 박스 ── */
.notice { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); background: var(--color-surface-muted); border-left: 4px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.notice--pending { background: var(--color-warning-soft); border-left-color: var(--color-warning); color: var(--color-warning); }
.notice--error { background: var(--color-danger-soft); border-left-color: var(--color-danger); color: var(--color-danger); }
.notice--info { background: var(--color-primary-soft); border-left-color: var(--color-primary); }
.disclaimer { margin: var(--space-5) 0; padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); background: var(--color-surface-muted); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.disclaimer strong { color: var(--color-text); }
.source-box { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.source-box p { margin: 0 0 var(--space-1); }

/* ── 표 (모바일 가로 스크롤) ── */
.table-wrap { overflow-x: auto; margin-bottom: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 0; }
.table { width: 100%; min-width: 480px; margin: 0; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; background: var(--color-surface); }
.table caption { padding: var(--space-2) var(--space-3); text-align: left; color: var(--color-text-muted); font-size: var(--fs-xs); }
.table th, .table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: right; white-space: nowrap; }
.table th { background: var(--color-surface-muted); font-weight: var(--fw-medium); }
.table th:first-child, .table td:first-child { text-align: left; }
.table tbody tr:last-child td { border-bottom: 0; }

/* ── 탭 ── */
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.tab { flex: none; min-height: var(--tap-min); padding: var(--space-2) var(--space-4); font: inherit; font-size: var(--fs-sm); color: var(--color-text-muted); background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer; }
.tab:hover { color: var(--color-primary); }
.tab:focus-visible { outline-offset: -3px; }
.tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--fw-bold); }
.tabpanel[hidden] { display: none; }

/* ── FAQ (details) ── */
.faq { margin-bottom: var(--space-4); }
.faq details { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.faq details + details { margin-top: var(--space-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-2) var(--space-4); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: var(--fs-lg); color: var(--color-primary); }
.faq details[open] > summary::after { content: "\2212"; }
.faq details > :not(summary) { margin-inline: var(--space-4); color: var(--color-text-muted); }
.faq details > :last-child { margin-bottom: var(--space-3); }
.faq .faq__answer { padding: 0 var(--space-4) var(--space-3); color: var(--color-text-muted); }
.faq .faq__answer p:last-child { margin-bottom: 0; }

/* ── 광고 슬롯: hidden 이면 공간도 없음. 보일 때는 높이를 예약해 레이아웃 이동 방지 ── */
.ad-slot { display: block; position: relative; min-height: var(--ad-min-height); margin: var(--space-7) 0; padding-top: var(--space-5); overflow: hidden; text-align: center; background: var(--color-surface-muted); border-radius: var(--radius-md); }
.ad-slot::before { content: "광고"; position: absolute; top: var(--space-1); left: 0; right: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.ad-slot[hidden] { display: none !important; }

/* ── 관련 도구 ── */
.related { margin-top: var(--space-6); }
.related-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.related-grid > li { margin: 0; }
.related-card { display: block; height: 100%; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.related-card:hover { border-color: var(--color-primary); color: var(--color-text); }
.related-card__title { display: block; font-weight: var(--fw-bold); }
.related-card__desc { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* ── 본문(설명·정책 페이지) ── */
.prose { max-width: 68ch; }
.prose h2:first-child { margin-top: 0; }
.steps { padding-left: 1.5em; }
.formula { padding: var(--space-3) var(--space-4); background: var(--color-surface-muted); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--fs-sm); overflow-x: auto; }

/* ── 본문·홈·푸터 보강 ── */
.prose.source-box { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.prose table { display: block; max-width: 100%; overflow-x: auto; }
.tool-group { margin-bottom: var(--space-5); }
.card, .related-card { overflow-wrap: anywhere; }
.footer-links a:hover { color: var(--color-primary); }
.table-wrap--tall { max-height: 70vh; overflow-y: auto; }
.table-wrap--tall .table th { position: sticky; top: 0; z-index: 1; }

/* ── 반응형 ── */
@media (min-width: 600px) {
  .card-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: repeat(2, 1fr); }
  .tool-card { padding: var(--space-5); }
}
@media (min-width: 900px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 360px 가로 넘침 방지: 좁은 폭에서 결과 행은 세로로 쌓는다 */
@media (max-width: 420px) {
  .result__row { flex-direction: column; gap: 0; }
  .result__row dd { max-width: 100%; text-align: left; }
  .result__value { font-size: var(--fs-xl); }
  .site-nav a { padding-inline: var(--space-2); }
  .btn { padding-inline: var(--space-4); }
  .btn-row .btn { flex: 1 1 100%; }
}
@media (forced-colors: active) {
  .btn, .chip, .input, .select, .textarea { border: 1px solid ButtonText; }
  .chip[aria-current="true"], .tab[aria-selected="true"] { outline: 2px solid Highlight; }
}

/* 로고·서비스명 */
.brand { font-weight: 800; letter-spacing: .06em; }
.brand__dot { font-style: normal; color: var(--color-primary); }
.brand img { display: block; }

/* 도구 화면: 입력란을 먼저 보여 주기 위해 머리말을 짧게, 모바일 메뉴는 한 줄 스크롤 */
.page-lead--short { margin-bottom: var(--space-3); }
.page-lead--short .page-title { margin-bottom: var(--space-1); }
.page-lead--short .page-sub { margin: 0; font-size: var(--fs-sm); }
.site-header__inner { padding-block: var(--space-1); }
.site-nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; }
#ct-status:empty { display: none; }