/* 무료 계산기 페이지 공통 (40~60대 사장님: 본문 17px 이상, 누르는 곳 48px 이상, 밝은 배경) */
:root { --ink: #141a18; --soft: #55605c; --line: #e3e6e5; --tint: #f6f7f7; --yellow: #ffdd33; --navy: #162f5a;
  --baemin: #2ac1bc; --coupang: #1b6ef3; --yogiyo: #fa0050; --good: #0f7a4a; --warn: #b54708; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "Noto Sans KR", sans-serif; word-break: keep-all; }
main { max-width: 820px; margin: 0 auto; padding: 20px 16px 56px; }
nav.crumb { font-size: 1rem; margin-bottom: 14px; }
nav.crumb a { color: var(--soft); }
h1 { font-size: 1.75rem; line-height: 1.3; margin: 0 0 8px; }
h2 { font-size: 1.375rem; line-height: 1.35; margin: 36px 0 10px; }
h3 { font-size: 1.125rem; margin: 20px 0 6px; }
.lead { color: var(--soft); margin: 0 0 20px; }
.asof { display: inline-block; font-size: 1rem; background: var(--tint); border-radius: 999px; padding: 2px 12px; color: var(--soft); }
.box { border: 1.5px solid var(--line); border-radius: 18px; padding: 18px; margin: 16px 0; }
.box.top-yellow { border-top: 8px solid var(--yellow); }
.box.top-navy { border-top: 8px solid var(--navy); }
.fields { display: grid; gap: 14px; }
@media (min-width: 640px) { .fields.two { grid-template-columns: 1fr 1fr; } h1 { font-size: 2rem; } }
label.f { display: grid; gap: 6px; font-weight: 600; }
label.f small { font-weight: 400; color: var(--soft); font-size: 1rem; }
input[type=text], input[type=number], select { font: inherit; font-size: 1.125rem; min-height: 52px; padding: 8px 14px; border: 1.5px solid #c9cfcd; border-radius: 12px; background: #fff; color: var(--ink); width: 100%; }
input:focus-visible, select:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; }
.check input { width: 24px; height: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: inherit; font-size: 1rem; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--tint); color: var(--ink); cursor: pointer; }
.result { display: grid; gap: 12px; }
@media (min-width: 640px) { .result.cols3 { grid-template-columns: repeat(3, 1fr); } }
.card { border-radius: 16px; padding: 16px; background: var(--tint); }
.card h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.big { font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
.big.good { color: var(--good); }
.rows { margin: 10px 0 0; display: grid; gap: 4px; }
.rows div { display: flex; justify-content: space-between; gap: 12px; }
.rows div span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.rows .minus span:last-child { color: var(--warn); }
.rows .sum { border-top: 1.5px solid var(--line); padding-top: 6px; margin-top: 4px; }
.note { color: var(--soft); font-size: 1rem; }
.cta { display: grid; gap: 10px; margin: 28px 0; padding: 20px; border-radius: 18px; background: #fffbe6; }
.cta.navy { background: #eef2fa; }
.cta p { margin: 0; }
.btn { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 14px; font-size: 1.125rem; font-weight: 700; text-decoration: none; background: var(--yellow); color: var(--ink); }
.cta.navy .btn { background: var(--navy); color: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
th { background: var(--tint); }
details { border: 1.5px solid var(--line); border-radius: 14px; padding: 4px 16px; margin: 10px 0; }
summary { font-weight: 700; min-height: 48px; display: flex; align-items: center; cursor: pointer; }
.related { display: grid; gap: 10px; }
.related a { display: block; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 600; }
footer { margin-top: 40px; color: var(--soft); font-size: 1rem; }
footer a { color: var(--soft); }
.table-wrap { overflow-x: auto; }