:root {
  --bg: #F4F6F9; --card: #FFFFFF; --border: #E6EAF0;
  --ink: #17202B; --body: #4C5866; --muted: #8A94A2;
  --primary: #00A86B; --primary-dark: #00905C; --primary-soft: #E5F6EF;
  --radius: 16px; --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(23,32,43,.04), 0 4px 16px rgba(23,32,43,.05);
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #101418; --card: #1A2027; --border: #2A323C;
  --ink: #F2F5F8; --body: #B6BFC9; --muted: #78828E;
  --primary: #17B877; --primary-dark: #00A86B; --primary-soft: #12271E;
  --shadow: none;
} }

* { box-sizing: border-box; }
html { color-scheme: light dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--primary-dark); }
svg { display: block; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 60px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (prefers-color-scheme: dark) {
  .site-header { background: rgba(16,20,24,.85); }
}
.header-inner, .container, .site-main, .site-footer-inner, .footer-inner {
  width: min(100% - 40px, 1120px);
  margin-inline: auto;
}
.header-inner {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand, .site-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  text-decoration: none;
}
.brand-mark { width: 27px; height: 27px; flex: 0 0 auto; }
.footer-brand .brand-mark { width: 26px; height: 26px; }
.header-nav, .site-header nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-link, .site-header nav a {
  color: var(--body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.header-link:hover, .site-header nav a:hover { color: var(--primary); }

main { min-height: calc(100vh - 60px); padding: 36px 0 8px; }
.page-shell { max-width: 880px; }
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 13px;
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span[aria-hidden="true"] { color: var(--border); font-size: 17px; line-height: 1; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--ink); }
h1 {
  margin-bottom: 8px;
  font-size: clamp(29px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.02em;
}
h2 {
  margin: 42px 0 14px;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.02em;
}
h3 { margin-bottom: 5px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.page-title-row, .tool-title-row, .title-with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-title-row h1, .tool-title-row h1, .title-with-icon h1 { margin-bottom: 0; }
.lead, .intro {
  max-width: 720px;
  margin-bottom: 26px;
  color: var(--body);
  font-size: 15px;
}
.hero { padding: 30px 0 26px; }
.hero h1 { max-width: 680px; }
.hero .lead { max-width: 660px; font-size: 16px; }

.search-wrap, .tool-search { position: relative; max-width: 680px; margin-top: 22px; }
.search-wrap > svg, .tool-search > svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 17px;
  width: 20px;
  height: 20px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  pointer-events: none;
}
#tool-search {
  width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 0 18px 0 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  outline: 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}
#tool-search::placeholder { color: var(--muted); }
#tool-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,168,107,.15), var(--shadow); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.calculator-card, .content-card, .tool-card, .tool-tile, .trust-item, .mini-tool-card, .other-tools, .related-tools, .not-found-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.calculator-card, .content-card { padding: 28px; }
.calculator-card > h2:first-child, .content-card > h2:first-child { margin-top: 0; }
.calculator-card > h2 { margin-bottom: 5px; font-size: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 17px; }
.form-grid.two, .two-column { display: grid; gap: 17px; }
.form-row, .field { display: grid; gap: 7px; }
label, .field > label { color: var(--muted); font-size: 13px; font-weight: 600; }
.field-hint, .form-hint, small { color: var(--muted); font-size: 12px; line-height: 1.55; }
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--card);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 156px; resize: vertical; }
input:not([type="radio"]):not([type="checkbox"]):focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,168,107,.15);
}
.input-wrap { position: relative; width: 100%; }
.input-wrap input { padding-right: 48px; }
.input-wrap .unit {
  position: absolute;
  top: 50%;
  right: 15px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
/* 이전 입력 구조도 같은 형태로 보이도록 유지합니다. */
.input-suffix { position: relative; display: block; width: 100%; }
.input-suffix input { padding-right: 48px; border-radius: var(--radius-sm); }
.input-suffix span {
  position: absolute;
  top: 50%;
  right: 15px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.seg-control, .choice-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 13px;
  background: var(--bg);
}
.seg-control input, .choice-group input[type="radio"], .choice-group input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.seg-control label, .choice-group label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.seg-control input:checked + label, .seg-control label:has(input:checked),
.choice-group input:checked + label, .choice-group label:has(input:checked) {
  border-color: var(--border);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(23,32,43,.12);
}
.seg-control input:focus-visible + label, .choice-group input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }
.checkbox-field { display: inline-flex; align-items: center; gap: 8px; color: var(--body); font-size: 13px; font-weight: 600; }
.checkbox-field input { accent-color: var(--primary); }

.btn-primary, .primary-button, button[type="submit"], .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 21px;
  padding: 0 18px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover, .primary-button:hover, button[type="submit"]:hover, .button:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,168,107,.18); }
.btn-primary:active, .primary-button:active, button[type="submit"]:active, .button:active { transform: translateY(0); }

.result-panel, .result, .result-box {
  position: relative;
  margin-top: 20px;
  padding: 23px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums;
}
.result-panel[hidden], .result[hidden], .result-box[hidden] { display: none; }
.result-panel.is-visible, .result.is-visible, .result-box.is-visible { animation: result-in .28s ease-out both; }
@keyframes result-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.result-copy {
  position: absolute;
  top: 18px;
  right: 18px;
  min-height: 31px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.result-copy:hover { border-color: var(--primary); color: var(--primary); }
.result-label, .result-title {
  display: block;
  margin: 0;
  padding-right: 70px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.result-number, .result-primary, .result-main {
  display: block;
  min-height: 43px;
  margin: 3px 0 18px;
  color: var(--ink);
  font-size: clamp(29px, 6vw, 34px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.result-summary { margin: -6px 0 15px; color: var(--body); font-size: 14px; }
.result-error { margin: 0; color: #D14343; font-weight: 700; }
.result-table-wrap, .table-wrap { overflow-x: auto; }
.result-table, table { width: 100%; border-collapse: collapse; font-size: 14px; }
.result-table th, .result-table td, th, td { padding: 11px 4px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.result-table th, th { color: var(--body); font-weight: 600; text-align: left; }
.result-table td { color: var(--ink); font-weight: 700; }
.result-table .total-row th, .result-table .total-row td { color: var(--primary); }
.result-grid, .result-list {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result-grid > div, .result-list > li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.result-grid dt, .result-list span:first-child { color: var(--body); }
.result-grid dd, .result-list span:last-child { margin: 0; color: var(--ink); font-weight: 700; text-align: right; }
.result-grid .deduction dd, .result-list .deduction span:last-child, .deduction { color: var(--muted); }
.stack-bar, .deduction-stack { display: flex; height: 10px; overflow: hidden; margin: 2px 0 13px; border-radius: 999px; background: var(--bg); }
.stack-bar > span, .deduction-stack > span { min-width: 0; height: 100%; }
.deduction-stack-wrap { margin-bottom: 4px; }
.result-rows { margin-top: 4px; }
.result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.result-row span:first-child { color: var(--body); }
.result-row strong { color: var(--ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.result-row.deduction span:first-child { color: var(--muted); }
.result-row.deduction strong { color: var(--muted); font-weight: 600; }
.result-row.total-row { border-top-width: 2px; }
.result-row.total-row span:first-child { color: var(--body); font-weight: 700; }
.result-row.total-row strong { color: var(--ink); font-weight: 800; }
.stack-pension { background: #00A86B; }.stack-health { background: #0FA3A3; }.stack-employment { background: #D99A00; }.stack-tax { background: #E05252; }
.stack-principal { background: #3B6FE0; }.stack-interest { background: #E05252; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 0 0 17px; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.stack-legend li, .stack-legend > span { display: inline-flex; align-items: center; gap: 5px; }.stack-legend i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }.stack-legend .pension { color: #00A86B; }.stack-legend .health { color: #0FA3A3; }.stack-legend .employment { color: #D99A00; }.stack-legend .tax { color: #E05252; }
.schedule-details { margin-top: 16px; box-shadow: none; }

.lotto-games { display: grid; gap: 11px; margin-top: 4px; }
.lotto-balls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.lotto-ball {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.12), 0 1px 3px rgba(23,32,43,.14);
}
.lotto-ball--1 { background: #FBC400; }
.lotto-ball--2 { background: #69C8F2; }
.lotto-ball--3 { background: #FF7272; }
.lotto-ball--4 { background: #AAAAAA; }
.lotto-ball--5 { background: #B0D840; }

.notice, .financial-notice, .notice-box {
  margin: 16px 0;
  padding: 13px 15px;
  border: 0;
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--primary-soft);
  color: var(--body);
  font-size: 13px;
}
.notice strong, .financial-notice strong, .notice-box strong { color: var(--ink); }
.ad-slot { display: none; } /* 광고 코드 삽입 후 이 규칙을 삭제하세요 */

.content-section, .tool-content { margin-top: 38px; }
.content-section > p, .content-section > ul, .content-section > ol, .tool-content > p, .tool-content > ul, .tool-content > ol { color: var(--body); }
.content-section ul, .content-section ol, .tool-content ul, .tool-content ol { padding-left: 1.25rem; }
.content-section li + li, .tool-content li + li { margin-top: 6px; }
.faq-list { display: grid; gap: 10px; }
.faq, .faq-item, .faq-list > div, details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.faq, details { padding: 0 16px; }
.faq + .faq, details + details { margin-top: 10px; }
.faq summary, details summary { position: relative; padding: 15px 27px 15px 0; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker, details summary::-webkit-details-marker { display: none; }
.faq summary::after, details summary::after { content: "+"; position: absolute; top: 50%; right: 0; color: var(--muted); font-size: 21px; font-weight: 400; line-height: 1; transform: translateY(-50%); transition: transform .18s ease; }
.faq[open] summary::after, details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p, details p, .faq-list dd { margin: 0 0 15px; color: var(--body); font-size: 14px; }
.faq-item, .faq-list > div { padding: 15px; }.faq-list dt { color: var(--ink); font-weight: 700; }.faq-list dd { margin: 6px 0 0; }

.category-section, .tool-category { margin-top: 46px; }.category-section:first-of-type, .tool-category:first-of-type { margin-top: 20px; }
.section-heading { margin-bottom: 16px; }.section-heading h2, .category-section > h2 { margin: 0; }
.section-kicker { margin: 0 0 3px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tool-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
.tool-tile, .tool-card {
  position: relative;
  display: block;
  min-height: 118px;
  padding: 18px 45px 17px 18px;
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool-tile:hover, .tool-card:hover { color: var(--ink); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); transform: translateY(-2px); box-shadow: 0 7px 20px rgba(23,32,43,.10); }
.tool-tile.is-filtered, .tool-card.is-filtered { display: none; }
.tool-icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  place-items: center;
  border-radius: 12px;
  color: #00A86B;
  background: #E5F6EF;
}
.tool-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tool-tile strong, .tool-card strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.tool-copy { display: block; }
.tool-copy > span, .tool-tile .tool-desc, .tool-card .tool-desc { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.tool-arrow, .tile-arrow { position: absolute; top: 17px; right: 18px; color: var(--muted); font-size: 19px; line-height: 1; transition: color .18s ease, transform .18s ease; }
.tool-tile:hover .tool-arrow, .tool-tile:hover .tile-arrow { color: var(--primary); transform: translateX(3px); }
[data-tool="salary"] .tool-icon, .tool-icon--salary, .tool-icon.salary { background: #E5F6EF; color: #00A86B; }
[data-tool="loan"] .tool-icon, .tool-icon--loan, .tool-icon.loan { background: #E8F0FE; color: #3B6FE0; }
[data-tool="savings"] .tool-icon, .tool-icon--savings, .tool-icon.savings { background: #E6F7F5; color: #0FA3A3; }
[data-tool="jeonse"] .tool-icon, .tool-icon--jeonse, .tool-icon.jeonse { background: #F1EDFE; color: #7C5CE0; }
[data-tool="vat"] .tool-icon, .tool-icon--vat, .tool-icon.vat { background: #FEF0E6; color: #E8772E; }
[data-tool="wage"] .tool-icon, .tool-icon--wage, .tool-icon.wage { background: #FFF7E0; color: #D99A00; }
[data-tool="percent"] .tool-icon, .tool-icon--percent, .tool-icon.percent { background: #FFECEC; color: #E05252; }
[data-tool="dday"] .tool-icon, .tool-icon--dday, .tool-icon.dday { background: #FFEDF3; color: #E0527E; }
[data-tool="age"] .tool-icon, .tool-icon--age, .tool-icon.age { background: #EDF7E6; color: #5CA832; }
[data-tool="char-count"] .tool-icon, .tool-icon--char-count, .tool-icon.char-count { background: #E6F2FE; color: #2E8FE8; }
[data-tool="bmi"] .tool-icon, .tool-icon--bmi, .tool-icon.bmi { background: #FDEDF9; color: #C94FB2; }
[data-tool="lotto"] .tool-icon, .tool-icon--lotto, .tool-icon.lotto { background: #FFF9E0; color: #D9B400; }
/* index의 간결한 icon-* 표기도 같은 토큰을 사용합니다. */
.tool-icon.icon-salary { background: #E5F6EF; color: #00A86B; }.tool-icon.icon-loan { background: #E8F0FE; color: #3B6FE0; }.tool-icon.icon-savings { background: #E6F7F5; color: #0FA3A3; }.tool-icon.icon-jeonse { background: #F1EDFE; color: #7C5CE0; }.tool-icon.icon-vat { background: #FEF0E6; color: #E8772E; }.tool-icon.icon-wage { background: #FFF7E0; color: #D99A00; }.tool-icon.icon-percent { background: #FFECEC; color: #E05252; }.tool-icon.icon-dday { background: #FFEDF3; color: #E0527E; }.tool-icon.icon-age { background: #EDF7E6; color: #5CA832; }.tool-icon.icon-char-count { background: #E6F2FE; color: #2E8FE8; }.tool-icon.icon-bmi { background: #FDEDF9; color: #C94FB2; }.tool-icon.icon-lotto { background: #FFF9E0; color: #D9B400; }
@media (prefers-color-scheme: dark) {
  [data-tool="salary"] .tool-icon, .tool-icon--salary, .tool-icon.salary { background: rgba(0,168,107,.14); }
  [data-tool="loan"] .tool-icon, .tool-icon--loan, .tool-icon.loan { background: rgba(59,111,224,.14); }
  [data-tool="savings"] .tool-icon, .tool-icon--savings, .tool-icon.savings { background: rgba(15,163,163,.14); }
  [data-tool="jeonse"] .tool-icon, .tool-icon--jeonse, .tool-icon.jeonse { background: rgba(124,92,224,.14); }
  [data-tool="vat"] .tool-icon, .tool-icon--vat, .tool-icon.vat { background: rgba(232,119,46,.14); }
  [data-tool="wage"] .tool-icon, .tool-icon--wage, .tool-icon.wage { background: rgba(217,154,0,.14); }
  [data-tool="percent"] .tool-icon, .tool-icon--percent, .tool-icon.percent { background: rgba(224,82,82,.14); }
  [data-tool="dday"] .tool-icon, .tool-icon--dday, .tool-icon.dday { background: rgba(224,82,126,.14); }
  [data-tool="age"] .tool-icon, .tool-icon--age, .tool-icon.age { background: rgba(92,168,50,.14); }
  [data-tool="char-count"] .tool-icon, .tool-icon--char-count, .tool-icon.char-count { background: rgba(46,143,232,.14); }
  [data-tool="bmi"] .tool-icon, .tool-icon--bmi, .tool-icon.bmi { background: rgba(201,79,178,.14); }
  [data-tool="lotto"] .tool-icon, .tool-icon--lotto, .tool-icon.lotto { background: rgba(217,180,0,.14); }
  .tool-icon.icon-salary { background: rgba(0,168,107,.14); }.tool-icon.icon-loan { background: rgba(59,111,224,.14); }.tool-icon.icon-savings { background: rgba(15,163,163,.14); }.tool-icon.icon-jeonse { background: rgba(124,92,224,.14); }.tool-icon.icon-vat { background: rgba(232,119,46,.14); }.tool-icon.icon-wage { background: rgba(217,154,0,.14); }.tool-icon.icon-percent { background: rgba(224,82,82,.14); }.tool-icon.icon-dday { background: rgba(224,82,126,.14); }.tool-icon.icon-age { background: rgba(92,168,50,.14); }.tool-icon.icon-char-count { background: rgba(46,143,232,.14); }.tool-icon.icon-bmi { background: rgba(201,79,178,.14); }.tool-icon.icon-lotto { background: rgba(217,180,0,.14); }
}
.search-empty { display: none; margin: 26px 0; color: var(--muted); text-align: center; }.search-empty.is-visible { display: block; }

.trust-section { margin: 48px 0 4px; padding: 26px 24px; border-radius: var(--radius); background: var(--primary-soft); }
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }.trust-item { display: flex; align-items: flex-start; gap: 12px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.trust-item > svg { width: 25px; height: 25px; flex: 0 0 auto; margin-top: 2px; color: var(--primary); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.trust-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--card); color: var(--primary); font-size: 14px; font-weight: 800; }.trust-item h3 { margin: 1px 0 2px; font-size: 14px; }.trust-item p { margin: 0; color: var(--body); font-size: 13px; line-height: 1.55; }
.related-tools, .other-tools { margin-top: 42px; padding: 20px; }.related-tools h2, .other-tools h2 { margin: 0 0 12px; font-size: 19px; }.related-tools ul, .other-tools ul, .related-grid { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 0; padding: 0; list-style: none; }.related-tools a, .other-tools a, .mini-tool-card, .related-card { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .18s ease; }.related-tools a:hover, .other-tools a:hover, .mini-tool-card:hover, .related-card:hover { border-color: var(--primary); color: var(--ink); }.mini-tool-card .tool-icon, .related-tools .tool-icon { width: 30px; height: 30px; margin: 0; border-radius: 9px; }.mini-tool-card .tool-icon svg, .related-tools .tool-icon svg { width: 17px; height: 17px; }
.mini-tool-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.mini-tool-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini-tool-icon--salary { background: #E5F6EF; color: #00A86B; }.mini-tool-icon--loan { background: #E8F0FE; color: #3B6FE0; }.mini-tool-icon--savings { background: #E6F7F5; color: #0FA3A3; }.mini-tool-icon--jeonse { background: #F1EDFE; color: #7C5CE0; }.mini-tool-icon--vat { background: #FEF0E6; color: #E8772E; }.mini-tool-icon--wage { background: #FFF7E0; color: #D99A00; }.mini-tool-icon--percent { background: #FFECEC; color: #E05252; }.mini-tool-icon--dday { background: #FFEDF3; color: #E0527E; }.mini-tool-icon--age { background: #EDF7E6; color: #5CA832; }.mini-tool-icon--char-count { background: #E6F2FE; color: #2E8FE8; }.mini-tool-icon--bmi { background: #FDEDF9; color: #C94FB2; }.mini-tool-icon--lotto { background: #FFF9E0; color: #D9B400; }
@media (prefers-color-scheme: dark) {
  .mini-tool-icon--salary { background: rgba(0,168,107,.14); }.mini-tool-icon--loan { background: rgba(59,111,224,.14); }.mini-tool-icon--savings { background: rgba(15,163,163,.14); }.mini-tool-icon--jeonse { background: rgba(124,92,224,.14); }.mini-tool-icon--vat { background: rgba(232,119,46,.14); }.mini-tool-icon--wage { background: rgba(217,154,0,.14); }.mini-tool-icon--percent { background: rgba(224,82,82,.14); }.mini-tool-icon--dday { background: rgba(224,82,126,.14); }.mini-tool-icon--age { background: rgba(92,168,50,.14); }.mini-tool-icon--char-count { background: rgba(46,143,232,.14); }.mini-tool-icon--bmi { background: rgba(201,79,178,.14); }.mini-tool-icon--lotto { background: rgba(217,180,0,.14); }
}

.site-footer { margin-top: 64px; border-top: 1px solid var(--border); background: var(--card); }.site-footer-inner, .footer-inner { padding: 38px 0 23px; }.footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.footer-brand { display: block; }
.footer-brand p, .footer-intro { max-width: 250px; margin: 12px 0 8px; color: var(--body); font-size: 13px; line-height: 1.55; }
.footer-brand small, .footer-copyright { margin: 0; color: var(--muted); font-size: 12px; }
.footer-column h2, .footer-column h3 { margin: 0 0 9px; color: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.footer-column ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.footer-column a { display: block; padding: 3px 0; color: var(--body); font-size: 13px; text-decoration: none; }
.footer-column a:hover { color: var(--primary); }.footer-bottom { display: flex; flex-direction: column; gap: 8px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }.footer-policy { display: flex; flex-wrap: wrap; gap: 5px 10px; }.footer-policy a { color: var(--body); text-decoration: none; }.footer-policy a:hover { color: var(--primary); }.footer-disclaimer { margin: 0; }
/* 새 푸터 마크업으로 넘어가는 동안 기존 단문 푸터도 읽기 좋게 보이게 합니다. */
.site-footer > p { width: min(100% - 40px, 1120px); margin: 0 auto 8px; color: var(--muted); font-size: 12px; }.site-footer > p:first-child { padding-top: 26px; }.site-footer > p:last-child { padding-bottom: 26px; margin-bottom: 0; }

.not-found { display: grid; place-items: center; min-height: 55vh; text-align: center; }.not-found-card { width: min(100%, 690px); padding: 38px 24px; }.error-code { margin: 0; color: var(--primary); font-size: clamp(92px, 20vw, 156px); font-weight: 800; line-height: .95; letter-spacing: -.07em; }.not-found h1 { margin: 18px 0 8px; }.not-found p { color: var(--body); }.popular-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 22px; text-align: left; }

@media (min-width: 620px) {
  .form-grid.two, .two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .related-tools ul, .other-tools ul, .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.35fr 1fr 1fr; }
  .footer-column ul { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 860px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 619px) { .header-inner, .container, .site-main, .site-footer-inner, .footer-inner { width: min(100% - 32px, 1120px); }.header-nav a:not(:first-child), .site-header nav a:not(:first-child) { display: none; }.calculator-card, .content-card { padding: 20px; }.result-panel, .result, .result-box { padding: 19px; }.result-copy { top: 14px; right: 14px; }.footer-column ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }