:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-soft: #f3f5f9;
  --text: #111827;
  --muted: #6b7280;
  --line: #dbe2ea;
  --primary: #0f62fe;
  --primary-dark: #0a4dd0;
  --success: #0f9d58;
  --danger: #d93025;
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  --radius: 18px;
  --radius-sm: 12px;
  --container: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;color: var(--text);background: var(--bg);line-height: 1.6;}
img { max-width: 100%; display: block; }a { color: var(--primary); text-decoration: none; }a:hover { text-decoration: underline; }
.container {width: min(calc(100% - 32px), var(--container));margin: 0 auto;}
.skip-link {position: absolute;left: -9999px;top: auto;}
.skip-link:focus {left: 16px;top: 16px;z-index: 1000;background: #fff;padding: 10px 14px;border-radius: 10px;box-shadow: var(--shadow);}
.site-header {background: #fff;border-bottom: 1px solid var(--line);position: sticky;top: 0;z-index: 50;}
.header-inner {display: flex;align-items: center;justify-content: space-between;gap: 20px;min-height: 68px;}
.logo {font-size: 1.05rem;font-weight: 800;color: var(--text);}
.top-nav {display: flex;flex-wrap: wrap;gap: 16px;}
.top-nav a {color: var(--muted);font-size: 0.95rem;font-weight: 600;}
.hero {padding: 34px 0 22px;}
.breadcrumbs {font-size: 0.9rem;color: var(--muted);margin-bottom: 12px;}
.hero-grid {display: grid;grid-template-columns: 1.2fr 0.8fr;gap: 20px;align-items: stretch;}
.hero-card,
.card,
.ad-box,
.related-card,
.faq-item,
.formula-card,
.result-card {background: var(--surface);border: 1px solid var(--line);border-radius: var(--radius);box-shadow: var(--shadow);}
.hero-card {padding: 28px;}
.eyebrow {display: inline-flex;align-items: center;gap: 8px;padding: 7px 12px;background: #eaf2ff;color: var(--primary);border-radius: 999px;font-size: 0.88rem;font-weight: 700;margin-bottom: 14px;}
h1, h2, h3 {line-height: 1.3;margin: 0 0 12px;}
h1 {font-size: clamp(1.9rem, 4vw, 2.8rem);letter-spacing: -0.03em;}
h2 {font-size: clamp(1.35rem, 2vw, 1.8rem);letter-spacing: -0.02em;}
.hero p,
.section-intro,
.muted {color: var(--muted);}
.hero-points {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px;margin-top: 18px;}
.hero-points span {background: var(--surface-soft);border: 1px solid var(--line);border-radius: 999px;padding: 10px 14px;font-size: 0.92rem;font-weight: 700;color: #334155;text-align: center;}
.ad-box {min-height: 250px;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;padding: 24px;background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);}
.ad-box small {color: var(--muted);display: block;margin-bottom: 8px;font-weight: 700;letter-spacing: 0.06em;}
.ad-box strong {font-size: 1.1rem;margin-bottom: 8px;}
.section {padding: 18px 0;}
.main-grid {display: grid;grid-template-columns: 1fr 320px;gap: 20px;align-items: start;}
.stack {display: grid;gap: 20px;}
.card {padding: 24px;}
.calc-tabs {display: grid;grid-template-columns: repeat(5, minmax(0, 1fr));gap: 10px;margin-bottom: 18px;}
.calc-tab {appearance: none;border: 1px solid var(--line);background: #fff;color: #334155;border-radius: 12px;padding: 13px 10px;font-weight: 700;cursor: pointer;transition: 0.2s ease;}
.calc-tab:hover,
.calc-tab.active {background: var(--primary);color: #fff;border-color: var(--primary);}
.calc-panel { display: none; }.calc-panel.active { display: block; }
.form-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 14px;}
.field {display: grid;gap: 8px;}
.field.full { grid-column: 1 / -1; }
label {font-weight: 700;font-size: 0.96rem;}
input, select {width: 100%;min-height: 50px;border-radius: 12px;border: 1px solid var(--line);background: #fff;padding: 0 14px;font-size: 1rem;color: var(--text);}
input:focus,select:focus {outline: 2px solid rgba(15, 98, 254, 0.18);border-color: var(--primary);}
.button-row {display: flex;flex-wrap: wrap;gap: 10px;margin-top: 16px;}
.btn {appearance: none;border: none;border-radius: 12px;min-height: 50px;padding: 0 18px;font-size: 1rem;font-weight: 800;cursor: pointer;transition: 0.2s ease;}
.btn-primary {background: var(--primary);color: #fff;}
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary {background: #eef2f7;color: #1f2937;}
.btn-secondary:hover { background: #e4e9f1; }
.result-card {padding: 22px;margin-top: 18px;background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);}
.result-label {color: var(--muted);font-size: 0.95rem;margin-bottom: 6px;font-weight: 700;}
.result-value {font-size: clamp(1.7rem, 4vw, 2.6rem);font-weight: 900;color: var(--text);word-break: break-word;letter-spacing: -0.03em;}
.result-desc {margin-top: 8px;color: #334155;font-size: 1rem;}
.error {color: var(--danger);font-weight: 700;margin-top: 10px;}
.formula-list,
.example-list,
.sidebar-list,
.related-grid {display: grid;gap: 14px;}
.formula-card {padding: 18px;background: #fbfcfe;}
.formula-card code {display: inline-block;margin-top: 8px;padding: 8px 10px;border-radius: 10px;background: #eef4ff;color: #1747b0;font-weight: 800;font-family: ui-monospace, SFMono-Regular, Menlo, monospace;font-size: 0.95rem;}
.example-list article {background: var(--surface-soft);border: 1px solid var(--line);border-radius: 14px;padding: 16px;}
.faq-item {overflow: hidden;}
.faq-item + .faq-item { margin-top: 12px; }
.faq-question {width: 100%;text-align: left;border: none;background: #fff;padding: 18px 20px;font-size: 1rem;font-weight: 800;cursor: pointer;color: var(--text);}
.faq-answer {padding: 0 20px 18px;color: #334155;display: none;}
.faq-item.open .faq-answer { display: block; }
.sidebar-box {position: sticky;top: 88px;display: grid;gap: 20px;}
.sidebar-list a,
.related-card {display: block;}
.sidebar-list a {background: #fff;border: 1px solid var(--line);border-radius: 14px;padding: 14px 16px;font-weight: 700;color: #1f2937;}
.related-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
.related-card {padding: 18px;color: inherit;transition: 0.2s ease;}
.related-card:hover {transform: translateY(-2px);text-decoration: none;}
.related-card h3 {font-size: 1.05rem;margin-bottom: 6px;}
.footer {margin-top: 22px;padding: 26px 0 50px;border-top: 1px solid var(--line);color: var(--muted);font-size: 0.95rem;}

@media (max-width: 980px) {
  .hero-grid,
  .main-grid,
  .related-grid,
  .form-grid,
  .calc-tabs {grid-template-columns: 1fr;}
  .sidebar-box {position: static;}
  .hero-points {grid-template-columns: 1fr;}
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  .hero-card,
  .card,
  .ad-box,
  .result-card { padding: 18px; }
  .header-inner { min-height: 60px; }
  .top-nav { display: none; }
  .btn { width: 100%; }
}