/* 정결 웹 키트 공통 — ../style.css 다음에 불러온다. 색은 style.css 토큰(--navy, --teal-ink, --mint-bg …)만 쓴다. */
:root {
  /* 정본(v3\style.css :root) 값으로 옛 랜딩(../style.css) 토큰을 덮는다 — 키트 37 + 운영자 3 페이지가 이 파일만 공유(ux 50, 2026-11-08) */
  --navy: #14294B; --navy-2: #1E3A66; --teal: #1F6FA8; --teal-ink: #1F6FA8; --mint: #5AA9DC; --mint-bg: #E6F1FA;
  --ink: #1F2A37;   /* 옛 CSS 에서 --ink 는 본문색 → 정본 본문색(--text)값. 제목·버튼 남색은 --navy */
  --text: #1F2A37; --muted: #5B6878; --line: #E1E7EE; --bg: #F2F5F9;
  --radius: 16px; --r-s: 10px; --gutter: 24px;
  --shadow-lg: 0 1px 2px rgba(17, 24, 39, .06), 0 8px 24px rgba(17, 24, 39, .08);
  --kit-fail-bg: #FBE9E7;  --kit-fail: #B23A30;   /* 정본 --red-bg / --red (대비 5.06:1) */
  --kit-check-bg: #FFF3DC; --kit-check: #9A6200;  /* 정본 --amber-bg / --amber (대비 4.64:1) */
}

/* 버튼 — 정본 .btn.p / .btn.s 의 색·모서리·마우스 올림·눌림. 높이는 결정 D2: 주 버튼 48px, 작은 버튼(.small 40px)은 그대로 */
.btn { border-radius: 12px; transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn:not(.small) { min-height: 48px; }
.btn.primary { background: var(--navy); color: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, .12); }
.btn.primary:hover { background: var(--navy-2); transform: translateY(-1px); }
.btn.secondary { background: var(--card); color: var(--navy); border-color: var(--line); }
.btn.secondary:hover { border-color: #B9C6D3; }
.btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }
/* 누를 수 없는 버튼 — 결정 D3: 흐리게 + not-allowed, 마우스 올림·눌림 반응 없음. display 는 건드리지 않음([hidden] 규칙 보존) */
.btn:is(:disabled, [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn:is(:disabled, [aria-disabled="true"]):is(:hover, :active) { transform: none; }
.btn.primary:is(:disabled, [aria-disabled="true"]):hover { background: var(--navy); }
.btn.secondary:is(:disabled, [aria-disabled="true"]):hover { border-color: var(--line); }

/* 머리글의 키트 목록 링크(작은 화면에서도 보임) */
.kit-back { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--teal-ink); text-decoration: none; }
.kit-back:hover { color: var(--navy); text-decoration: underline; }

.kit { padding-block: clamp(24px, 5vw, 56px); }
.kit h1 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); }
.kit-lead { margin-top: 8px; color: var(--muted); }

/* 안내 문구 */
.kit-notices { display: grid; gap: 6px; margin-top: 16px; }
.kit-notice { font-size: .9rem; padding: 8px 12px; border-radius: 8px; max-width: none; }
.kit-notice.local { background: var(--mint-bg); color: var(--teal-ink); font-weight: 700; }
.kit-notice.paid { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.kit-notice.gate { background: #FFFFFF; color: var(--ink); border: 1px solid var(--mint); }  /* 키트 이용 확인 (gate.js, 2026-11-10) */
.kit-notice.gate.locked { border-color: var(--navy); font-weight: 700; }
.kit-notice.gate a { color: var(--teal); font-weight: 800; text-decoration: underline; }
.kit-locked { opacity: .4; pointer-events: none; user-select: none; }

/* 파일 놓는 칸 */
.kit-drop { display: grid; gap: 4px; place-items: center; text-align: center; margin-top: 20px; padding: 28px 16px;
  border: 2px dashed #C9D3DD; border-radius: var(--radius); background: var(--card); cursor: pointer; }
.kit-drop:hover, .kit-drop.over { border-color: var(--teal-ink); background: var(--mint-bg); }
.kit-drop:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.kit-drop b { color: var(--navy); }
.kit-drop span { font-size: .85rem; color: var(--muted); }
.kit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 560px) { .kit-actions .btn { flex: 1 1 100%; } }

/* 점검 배지 */
.kit-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.kit-badge { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 14px; border-radius: 999px; font-size: .9rem; }
.kit-badge b { font-size: 1.15rem; }
.kit-badge.pass, .kit-tag.pass { background: var(--mint-bg); color: var(--teal-ink); }
.kit-badge.check, .kit-tag.check { background: var(--kit-check-bg); color: var(--kit-check); }
.kit-badge.fail, .kit-tag.fail { background: var(--kit-fail-bg); color: var(--kit-fail); }
.kit-tag { display: inline-block; font-size: .76rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }

/* 결과 표 — 좁은 화면에서는 표만 가로로 밀린다(페이지는 안 밀림) */
.kit-table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.kit-table { width: 100%; border-collapse: collapse; font-size: .88rem; font-feature-settings: "tnum"; }
.kit-table caption { text-align: left; padding: 12px; font-weight: 700; color: var(--navy); }
/* 정렬 — 결정 D1: 글자 칸·머리칸 가운데, 금액·건수 칸(.num)만 오른쪽. .kit-table .num(0,2,0)이 th·td(0,1,1)보다 우선 */
.kit-table th { font-size: .78rem; font-weight: 500; color: var(--muted); text-align: center; padding: 8px 10px; background: var(--bg); white-space: nowrap; }
.kit-table td { text-align: center; padding: 8px 10px; border-top: 1px solid var(--line); }
.kit-table .num { text-align: right; white-space: nowrap; }
.kit-error { margin-top: 12px; color: var(--kit-fail); font-weight: 700; }

/* 검증 엔진 결론 상자 (verify.js) */
.kit-verdict { margin-top: 20px; padding: 14px 16px; border-radius: var(--radius); border-left: 4px solid currentColor; }
.kit-verdict.pass { background: var(--mint-bg); color: var(--teal-ink); }
.kit-verdict.check { background: var(--kit-check-bg); color: var(--kit-check); }
.kit-verdict.fail { background: var(--kit-fail-bg); color: var(--kit-fail); }
.kit-verdict b { display: block; }
.kit-verdict span { display: block; margin-top: 4px; font-size: .88rem; }
.kit-verdict details { margin-top: 8px; color: var(--ink, #1D2733); }
.kit-verdict summary { cursor: pointer; font-size: .88rem; }
.kit-verdict ul { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: .86rem; }

/* 키트 목록(index.html) — 인라인 style 대신(qa R1 DP-02) */
.price-grid.kit-list { margin-top: 24px; }
/* 카드 높이가 달라도 '무료로 체험하기'는 카드 맨 아래 같은 줄에 */
.kit-list > li { display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.kit-list > li > .kit-actions { margin-top: auto; padding-top: 16px; }
.kit-list > li:hover, .kit-list > li:focus-within { border-color: var(--teal-ink); box-shadow: var(--shadow-lg); }
.kit-list .kit-actions .btn { transition: background-color .15s, transform .1s, box-shadow .15s; }
.kit-list .kit-actions .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(17, 24, 39, .14); }
.kit-list .kit-actions .btn:active { transform: translateY(0) scale(.97); background: var(--navy-2); box-shadow: none; }
@media (max-width: 719px) { .kit-list .kit-actions .btn { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .kit-list .kit-actions .btn, .kit-list > li { transition: none; } .kit-list .kit-actions .btn:hover { transform: none; } }
#paid-title { font-size: 1.1rem; }

/* 재무보고서(report.html) — 인라인 <style> 에서 옮김(qa R1 DP-02) */
.rp-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 20px; }
.rp-bar label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); }
.rp-bar select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); min-width: 0; }
.rp-num { width: 100%; min-width: 7em; font: inherit; text-align: right; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.rp-paper { margin-top: 16px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.rp-paper h3 { margin: 20px 0 6px; font-size: 1rem; color: var(--navy); }
.rp-title { margin: 0; font-size: 1.4rem; color: var(--navy); }
.rp-meta { margin: 4px 0 0; font-size: .85rem; color: var(--muted); }
.rp-edit { outline: 1px dashed transparent; border-radius: 4px; padding: 2px 4px; }
.rp-edit:hover, .rp-edit:focus { outline-color: var(--teal-ink); background: var(--mint-bg); }
.rp-total td { font-weight: 700; }
#grid details summary { cursor: pointer; margin-top: 16px; font-weight: 700; color: var(--navy); }
@media (max-width: 480px) { .rp-paper { padding: 14px; } }

/* 입력칸·선택칸 최소 높이 32px — 손가락·마우스로 누르기 쉬운 크기(qa R1 UX-06) */
.kit select, .kit input:not([type=file]):not([type=checkbox]):not([type=radio]) { min-height: 32px; }
/* 입력칸 모양·서체 — 정본 폼(테두리 #C4CFDB·모서리 10·font:inherit). :where 로 우선순위 0 → 키트별 규칙(.rp-num 등)이 이긴다 */
:where(.kit) :where(select, textarea, input:not([type=file]):not([type=checkbox]):not([type=radio])) { font: inherit; color: inherit; padding: 6px 10px; border: 1px solid #C4CFDB; border-radius: var(--r-s); background: var(--card); }
/* 운영자 폼(timepass·trial·closerpay) — 라벨 위, 칸 아래 */
.kit-form { display: grid; gap: 14px; max-width: 640px; margin-top: 16px; }
.kit-form > label { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--navy); }
.kit-form > label > :is(input, select, textarea) { width: 100%; font-weight: 400; color: var(--text); }
.kit-form > label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: 8px; }
.kit-form > label > input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--navy); }
.kit-form > .btn { justify-self: start; }
@media (max-width: 560px) { .kit-form > .btn { justify-self: stretch; } }
/* 큰 표는 앞부분만 그린다는 안내(qa R2 H0) */
.kit-more { margin: 6px 0 16px; font-size: .9rem; color: var(--muted); }
/* hidden 속성이 .btn·.kit-actions 의 display 에 덮이지 않게(오류 뒤 '결과 엑셀 받기'가 보이던 문제, qa R2 H6) */
[hidden] { display: none !important; }

/* D4 머리글·바닥글 — 81_apply_header.mjs */
.nav, body > footer { --ink: #14294B; --muted: #5B6878; --line: #E1E7EE; --bg: #F2F5F9; --card: #FFFFFF; --navy: #14294B; --navy-2: #1E3A66; --mint: #5AA9DC; --w: 1200px; }
.nav { position: sticky; top: 0; z-index: 40; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.nav .in { display: flex; align-items: center; gap: 4px; max-width: var(--w); margin: 0 auto; padding: 10px 24px; }
.nav a { text-decoration: none; }
.nav .logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; color: var(--ink); font-size: 1.05rem; padding-right: 12px; margin-right: 4px; border-right: 1px solid var(--line); }
.nav .logo i { width: 22px; height: 22px; border-radius: 7px; background: var(--navy); display: grid; place-items: center; }
.nav .logo i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--mint); }
.nav a.m { padding: 6px 10px; border-radius: 8px; font-size: .95rem; color: var(--muted); font-weight: 600; transition: background .15s, color .15s; }
.nav a.m:hover { background: var(--bg); color: var(--ink); }
.nav .cta { background: var(--navy); color: #fff; font-weight: 700; padding: 8px 16px; border-radius: 10px; font-size: .95rem; margin-left: auto; transition: background .15s; }
.nav .cta:hover { background: var(--navy-2); }
@media (max-width: 820px) { .nav a.m { display: none; } .nav a.m.kit-link { display: inline-block; margin-left: auto; } .nav a.m.kit-link + .cta { margin-left: 6px; } }
body > footer { margin-top: 120px; border-top: 1px solid var(--line); background: var(--card); }
body > footer .wrap { max-width: var(--w); padding: 48px 24px 36px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; font-size: .92rem; color: var(--muted); }
body > footer b { display: block; color: var(--ink); margin-bottom: 8px; }
body > footer a { display: block; padding: 3px 0; text-decoration: none; } body > footer a:hover { color: var(--ink); }
body > footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; font-size: .82rem; }
@media (max-width: 760px) { body > footer .wrap { grid-template-columns: 1fr 1fr; gap: 24px 20px; } body > footer .wrap > div:first-child { grid-column: 1 / -1; } body > footer a { padding: 5px 0; } }
@media (max-width: 360px) { body > footer .wrap { grid-template-columns: 1fr; } }