/* 기존 수작업 페이지를 새 디자인(홈·공통 템플릿)과 맞추는 공통 스킨. 페이지 내부 스타일보다 뒤에 불러와 덮어쓴다.
   명암 대비는 tools/audit-ui.mjs로 밝은·어두운 테마 × 데스크톱·모바일 전체를 측정해 맞춘다. */
:root{--bg:#f5f6f8;--surface:#fff;--surface2:#f0f2f5;--border:#e4e7ec;--text:#15181d;--muted:#5c6370;--body:#3d434d;--accent:#1f4fd1;--accent-light:#e8eefc;--green:#1f4fd1;--green-light:#e8eefc;--purple:#1f4fd1;--purple-light:#e8eefc;--teal:#1f4fd1;--teal-light:#e8eefc;--orange:#1f4fd1;--orange-light:#e8eefc;--pink:#1f4fd1;--pink-light:#e8eefc;--indigo:#1f4fd1;--indigo-light:#e8eefc;--blue:#1f4fd1;--blue-light:#e8eefc;--yellow-light:#fff7e0;--red:#b42318}
[data-theme="dark"]{--bg:#0e1014;--surface:#161920;--surface2:#1d2129;--border:#282d36;--text:#eceef2;--muted:#a3a9b4;--body:#c7ccd4;--accent:#7ea3ff;--accent-light:rgba(126,163,255,.13);--green:#7ea3ff;--green-light:rgba(126,163,255,.13);--purple:#7ea3ff;--purple-light:rgba(126,163,255,.13);--teal:#7ea3ff;--teal-light:rgba(126,163,255,.13);--orange:#7ea3ff;--orange-light:rgba(126,163,255,.13);--pink:#7ea3ff;--pink-light:rgba(126,163,255,.13);--indigo:#7ea3ff;--indigo-light:rgba(126,163,255,.13);--blue:#7ea3ff;--blue-light:rgba(126,163,255,.13);--yellow-light:rgba(217,160,6,.14);--red:#f97066}

body{background:var(--bg);color:var(--text);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}

header{height:60px;padding:0 20px;gap:10px;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
header .logo{gap:8px;font-size:18px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
header .logo span{font-weight:800}
.back-btn{padding:7px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font-size:13px}
.back-btn:hover{border-color:var(--muted);color:var(--text);background:var(--surface)}
#darkToggle,.dark-btn{width:36px!important;height:36px!important;margin-left:8px!important;border:1px solid var(--border)!important;border-radius:10px!important;background:var(--surface)!important;font-size:15px!important;display:grid!important;place-items:center}

.wrap{max-width:760px;padding:32px 20px 64px}
.calc-card{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.card-hero{padding:26px 28px 20px;border-bottom:1px solid var(--border)}
.card-hero h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.card-hero p{font-size:14.5px;color:var(--muted);line-height:1.7}
.card-tag,.hero-tag,.guide-tag{padding:4px 9px;border-radius:6px;background:var(--accent-light)!important;color:var(--accent)!important;font-size:12px;font-weight:700;text-transform:none;letter-spacing:0}
.card-body{padding:24px 28px}
.section-label{font-size:13px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border)}
.field label{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.field input,.field select{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);font-size:15px}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);outline:none}
.tip{font-size:12.5px;line-height:1.7;color:var(--muted)}
.btn-calc{padding:14px;border-radius:11px;background:var(--accent);color:#fff;font-size:15px;font-weight:700}
.btn-calc:hover{opacity:.92}
[data-theme="dark"] .btn-calc{color:#0e1014}
.tabs{gap:6px}
.tab-btn{border:1px solid var(--border);border-radius:10px;color:var(--muted);font-weight:600}
.tab-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme="dark"] .tab-btn.on{color:#0e1014}
.preset-btn,.game-btn,.share-btn,.copy-btn{border-radius:10px}
.result-box{border:1px solid var(--accent);border-radius:14px;background:var(--accent-light)}
.result-label{font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--accent)}
.result-main{font-size:32px;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.result-row{padding:8px 0;font-size:14px;border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent)}
.remain-box,.milestone-box,.stat-box,.compare-box,.month-box{background:var(--surface)!important;border:1px solid var(--border);border-radius:12px}
.warn-box,.notice-box,.note-box,.highlight-box,.medical-notice,.rate-badge{border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--body)}
.rate-table th,.deduct-table th,.tax-table th,.income-table th,.bmi-table th,.cpm-table th{background:var(--accent-light)!important;color:var(--text)}
.rate-table td,.deduct-table td,.tax-table td,.income-table td,.bmi-table td,.cpm-table td{border-bottom:1px solid var(--border)}

/* 월급날 계산기의 D-Day 카드는 원래 어두운 카드 위에 흰 글자로 설계돼 있어 그대로 둔다 */
.dday-box{background:linear-gradient(135deg,#1a1a18,#2d2d2b)!important;color:#fff!important;border:0!important}
.dday-box .info-box{background:rgba(255,255,255,.1)!important;border:0!important;color:#fff}

.desc-section{padding:26px 28px;border-top:1px solid var(--border);background:var(--surface2)}
.desc-section h2{margin-bottom:10px;font-size:18px;font-weight:750;letter-spacing:-.02em}
.desc-section h3{font-size:15.5px;font-weight:700}
.desc-section p,.desc-section li{font-size:14.5px;line-height:1.85;color:var(--body)}
.faq-item{margin:0;padding:12px 0;border-top:1px solid var(--border)}
.faq-q{font-size:14.5px;font-weight:700}
.faq-a{padding-left:0;border-left:0;font-size:14px;line-height:1.75;color:var(--body)}
.related{padding:22px 28px}
.related h2{font-size:14px;font-weight:700;color:var(--text)}
.related-grid{gap:8px}
.related-btn{padding:12px 14px;border:1px solid var(--border);border-radius:11px;background:var(--surface);font-weight:600;text-align:left}
.related-btn:hover{border-color:var(--accent);color:var(--accent)}
.trust-box>div{border:1px solid var(--border)!important;border-radius:14px!important;background:var(--surface2)!important}

.crumb{font-size:13px;color:var(--muted)}
.hero,.article-card,.section,.contact-card,.links,.note,.guide-card{border:1px solid var(--border)!important;border-radius:16px!important;background:var(--surface)}
.hero h1,.page-title{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.hero p,.page-sub{font-size:15px;line-height:1.8;color:var(--body)}
.hero-meta span,.meta{color:var(--muted)}
.date{background:var(--accent-light)!important;color:var(--accent)!important}
.article-section h2,.section h2,.links h2,.contact-card-header h2{font-size:19px;font-weight:750;letter-spacing:-.02em}
.article-section p,.article-section li,.section p,.section li,.section ul li{font-size:15px;line-height:1.9;color:var(--body)}
.link-card,.link-grid a{border:1px solid var(--border)!important;border-radius:11px!important;background:var(--surface);color:var(--text)}
.link-card:hover,.link-grid a:hover,.guide-card:hover{border-color:var(--accent)!important}
.guide-card strong{letter-spacing:-.02em}

/* 로또 번호 공: 흰 글자가 읽히도록 공 색을 조정하고, 밝은 공은 어두운 글자를 쓴다 */
.balls .ball.b1,.balls .ball.b5{color:#1f2937!important}
.balls .ball.b2{background:#1d63d6!important}
.balls .ball.b3{background:#c92a2a!important}
.balls .ball.b4{background:#5f6673!important}
.bonus-label{color:var(--accent)!important}
.game-btn.on{background:#b45309!important;border-color:#b45309!important}

footer{padding:28px 20px 36px;border-top:1px solid var(--border);background:var(--surface)!important;color:var(--muted)!important;font-size:13px;line-height:1.8}
footer strong{color:var(--text)!important}
footer a{color:var(--muted)!important}

/* 일부 계산기(연말정산·BMI·종합소득세·프리랜서·전세 vs 월세)는 결과 박스 배경을 스크립트로 밝은 색으로 지정한다.
   어두운 테마에서는 배경만 테마 색으로 되돌리고, 테두리 색(환급·납부 구분)은 유지한다. */
[data-theme="dark"] .result-box,[data-theme="dark"] .result-area,[data-theme="dark"] .compare-result,[data-theme="dark"] .zero-box{background:var(--accent-light)!important}
[data-theme="dark"] .result-row span{color:var(--muted)}
[data-theme="dark"] .result-row strong{color:var(--text)}

/* 결과 HTML과 스크립트가 직접 넣은 글자색을 테마별로 읽히는 색으로 바꾼다.
   HTML에 쓴 hex(color:#dc2626)와 스크립트가 넣은 rgb(color: rgb(220, 38, 38)) 두 형태를 모두 잡는다. */
[style*="color:#888"],[style*="color: rgb(136, 136, 136)"]{color:var(--muted)!important}
[data-theme="dark"] [style*="color:#555"],[data-theme="dark"] [style*="color:#444"],[data-theme="dark"] [style*="color:#666"],[data-theme="dark"] [style*="color:#1a1a18"],[data-theme="dark"] [style*="color:#888880"]{color:var(--body)!important}
[data-theme="dark"] [style*="color:#4338ca"],[data-theme="dark"] [style*="color:#1241cc"],[data-theme="dark"] [style*="color:#1d4ed8"],[data-theme="dark"] [style*="color:#2563eb"],[data-theme="dark"] [style*="color: rgb(37, 99, 235)"]{color:var(--accent)!important}
[data-theme="dark"] [style*="color:#dc2626"],[data-theme="dark"] [style*="color: rgb(220, 38, 38)"],[data-theme="dark"] [style*="color:#ef4444"],[data-theme="dark"] [style*="color: rgb(239, 68, 68)"],[data-theme="dark"] [style*="color:#b91c1c"],[data-theme="dark"] [style*="color: rgb(185, 28, 28)"]{color:#ff9b93!important}
[data-theme="dark"] [style*="color:#16a34a"],[data-theme="dark"] [style*="color: rgb(22, 163, 74)"]{color:#4ade80!important}
[data-theme="dark"] [style*="color:#007c8a"],[data-theme="dark"] [style*="color:#0f766e"],[data-theme="dark"] [style*="color:#0d9488"],[data-theme="dark"] [style*="color: rgb(13, 148, 136)"]{color:#5fd4c4!important}
[data-theme="dark"] [style*="color:#7c3aed"]{color:#c4b5fd!important}
[data-theme="dark"] [style*="color:#be185d"],[data-theme="dark"] [style*="color:#db2777"],[data-theme="dark"] [style*="color: rgb(219, 39, 119)"]{color:#f9a8d4!important}
[data-theme="dark"] [style*="color:#856404"],[data-theme="dark"] [style*="color:#9a3412"],[data-theme="dark"] [style*="color:#ea580c"],[data-theme="dark"] [style*="color: rgb(234, 88, 12)"]{color:#fdba74!important}
[data-theme="dark"] [style*="background:rgba(255,255,255,.6)"]{background:var(--surface2)!important}
[data-theme="dark"] [style*="color:#166534"],[data-theme="dark"] [style*="color: rgb(22, 101, 52)"],[data-theme="dark"] [style*="color:#028a3e"],[data-theme="dark"] [style*="color: rgb(2, 138, 62)"]{color:#4ade80!important}
[data-theme="dark"] [style*="color:#92400e"],[data-theme="dark"] [style*="color: rgb(146, 64, 14)"],[data-theme="dark"] [style*="color:#b45309"],[data-theme="dark"] [style*="color: rgb(180, 83, 9)"]{color:#fdba74!important}
[data-theme="dark"] [style*="color:#991b1b"],[data-theme="dark"] [style*="color: rgb(153, 27, 27)"]{color:#ff9b93!important}
html:not([data-theme="dark"]) [style*="color:#16a34a"],html:not([data-theme="dark"]) [style*="color: rgb(22, 163, 74)"],html:not([data-theme="dark"]) [style*="color: rgb(16, 185, 129)"],html:not([data-theme="dark"]) [style*="color:#028a3e"],html:not([data-theme="dark"]) [style*="color: rgb(2, 138, 62)"]{color:#166534!important}
html:not([data-theme="dark"]) [style*="color:#0d9488"],html:not([data-theme="dark"]) [style*="color: rgb(13, 148, 136)"],html:not([data-theme="dark"]) [style*="color:#007c8a"],html:not([data-theme="dark"]) [style*="color: rgb(0, 124, 138)"]{color:#0f6660!important}
html:not([data-theme="dark"]) [style*="color:#ea580c"],html:not([data-theme="dark"]) [style*="color: rgb(234, 88, 12)"],html:not([data-theme="dark"]) [style*="color:#f59e0b"],html:not([data-theme="dark"]) [style*="color: rgb(245, 158, 11)"],html:not([data-theme="dark"]) [style*="color:#b45309"],html:not([data-theme="dark"]) [style*="color: rgb(180, 83, 9)"]{color:#92400e!important}
html:not([data-theme="dark"]) [style*="color:#db2777"],html:not([data-theme="dark"]) [style*="color: rgb(219, 39, 119)"]{color:#be185d!important}
html:not([data-theme="dark"]) [style*="color:#ef4444"],html:not([data-theme="dark"]) [style*="color: rgb(239, 68, 68)"],html:not([data-theme="dark"]) [style*="color: rgb(248, 113, 113)"],html:not([data-theme="dark"]) [style*="color:#dc2626"],html:not([data-theme="dark"]) [style*="color: rgb(220, 38, 38)"]{color:#b91c1c!important}
html:not([data-theme="dark"]) [style*="color: rgb(96, 165, 250)"],html:not([data-theme="dark"]) [style*="color:#2563eb"],html:not([data-theme="dark"]) [style*="color: rgb(37, 99, 235)"]{color:#1d4ed8!important}

/* BMI 등급 글자(HTML에 hex로 들어감)와 선택된 프리셋 버튼 */
html:not([data-theme="dark"]) [style*="color:#60a5fa"]{color:#1d4ed8!important}
html:not([data-theme="dark"]) [style*="color:#10b981"]{color:#166534!important}
html:not([data-theme="dark"]) [style*="color:#f87171"],html:not([data-theme="dark"]) [style*="color:#ef4444"]{color:#b91c1c!important}
[data-theme="dark"] .preset-btn.on{color:#0e1014!important}

/* 페이지 CSS에 직접 지정된 색: 증여세 비과세 안내, 스마트스토어 실수령액, 개인정보처리방침 링크 */
.zero-box p{color:#166534!important}
[data-theme="dark"] .zero-box p{color:#4ade80!important}
.section a,.article-section a{color:var(--accent)!important}

/* 가이드 본문 첫 소제목 위 여백 중복 제거 */
.article-card>.article-section:first-child,.article-card>:first-child{margin-top:0}

@media(max-width:600px){header{padding:0 14px}.wrap{padding:16px 12px 40px}.card-hero,.card-body,.desc-section,.related{padding-left:16px;padding-right:16px}.card-hero h1{font-size:22px}.hero h1,.page-title{font-size:23px}.result-main{font-size:28px}}