/* 서브페이지 어두운 화면. 한글·영문 메인과 같은 색 계열(#26282b / #2c2e32)이며, 헤더는 메인처럼 밝게 고정한다. */

/* 밝기 전환 버튼 (메인과 같은 모양. 이 파일만 불러오는 페이지에서도 보이도록 여기에도 둔다) */
.theme-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 0; margin-left: 14px; padding: 5px; border: 1px solid #ddd8cc; border-radius: 999px; background: #fbf9f4; color: #2b2824; cursor: pointer; font-weight: 400; flex-shrink: 0; }
.nav-right .theme-toggle { margin-left: 0; }
.theme-toggle span { display: flex; align-items: center; justify-content: center; width: 32px; height: 28px; border-radius: 999px; font-size: 15px; }
.theme-toggle .light { background: #dbeafe; }
.theme-toggle .dark { background: transparent; }
.theme-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
html.dark-mode .theme-toggle .light { background: transparent; }
html.dark-mode .theme-toggle .dark { background: #dbeafe; }

html.dark-mode { color-scheme: dark; background: #26282b; }
html.dark-mode body { background: #26282b; color: #cdcdcd; }

/* 헤더는 밝게 고정 */
html.dark-mode header { background: #ffffff; border-bottom-color: #e4e8ef; color: #2c2e32; }
html.dark-mode header a, html.dark-mode header strong { color: #2c2e32; }
html.dark-mode header .language-link { color: #2563eb; }
html.dark-mode .page-date { color: #667085; opacity: 1; }

/* ===== 변수를 쓰는 페이지(계산기 등)와 가이드: 변수 값만 어둡게 바꾼다 ===== */
html.dark-mode {
  --bg: #26282b; --card: #2c2e32; --text: #e4e4e4; --muted: #a8abae; --line: #2a2c2e;
  --accent: #60a5fa; --accent-weak: #1e3a5f; --warn: #f87171;
}
html.dark-mode .lease-overview {
  --lo-text: #e4e4e4; --lo-muted: #a8abae; --lo-line: #2a2c2e; --lo-border: #2a2c2e;
  --lo-accent: #60a5fa; --lo-accent-weak: #1e3a5f;
}
html.dark-mode .guide {
  --bg: #26282b; --surface: #2c2e32; --ink: #e4e4e4; --muted: #a8abae; --line: #2a2c2e;
  --accent: #60a5fa; --accent-soft: #1e3a5f;
  --fin: #6aa8e8; --opr: #f0924a; --prop: #c58bd6;
  --fin-soft: #172c45; --opr-soft: #3a2614; --prop-soft: #2c1f35;
  --neg: #f87171; --pos: #4ade80; --warn-soft: #3a2f0f; --warn-ink: #fde68a;
  --m-sl: #9aa7b2; --m-dec: #f0a020; --pb: #34d399; --rev: #e4e4e4; --gain: #7bb8e8;
  --m-sl-soft: #232c36; --m-dec-soft: #3a2f12; --pb-soft: #0f3a2d;
}

/* ===== 소개·문의·개인정보·리스 개요·용어 등(lease-page) ===== */
html.dark-mode body.lease-page { background: #26282b; }
html.dark-mode .lease-overview h1,
html.dark-mode .lease-overview h2,
html.dark-mode .lease-overview h3 { color: #d9d9d9; }
html.dark-mode .lease-overview h4 { color: #60a5fa; }
html.dark-mode .lease-overview .sub,
html.dark-mode .lease-overview .muted { color: #9a9da0; }
html.dark-mode .lease-overview .card,
html.dark-mode .lease-overview > nav.card,
html.dark-mode .lease-overview .lease-item,
html.dark-mode .lease-overview .flow-step,
html.dark-mode .lease-overview .flow-figure img { background: #2c2e32; border-color: #2a2c2e; color: #cdcdcd; }
html.dark-mode .lease-overview .type-panel,
html.dark-mode .lease-overview .type-panel.operating,
html.dark-mode .lease-overview .note { background: #2c2e32; border-color: #2a2c2e; color: #cdcdcd; }
html.dark-mode .lease-overview .type-panel.finance { border-color: #2a4a7a; background: #14233a; }
html.dark-mode .lease-overview .formula { background: #0d0e0f; color: #cdcdcd; }
html.dark-mode .lease-overview .placeholder { border-color: #323538; }
html.dark-mode .lease-overview a { color: #60a5fa; }
html.dark-mode .lease-overview .button { color: #fff; }
html.dark-mode .lease-overview th { background: #202224; color: #cdcdcd; }
html.dark-mode .lease-overview td { border-color: #2a2c2e; }
html.dark-mode .lease-overview code,
html.dark-mode .lease-overview pre { background: #0d0e0f; color: #cdcdcd; }

/* ===== 계산기 페이지(.calculator-main, main.wrap) ===== */
html.dark-mode .calculator-main h1,
html.dark-mode .calculator-main h2,
html.dark-mode .calculator-main h3 { color: #d9d9d9; }
html.dark-mode .calculator-intro,
html.dark-mode .calculator-note { color: #9a9da0; }
html.dark-mode .calculator-card,
html.dark-mode .card { background: #2c2e32; border-color: #2a2c2e; }
html.dark-mode .calculator-field label,
html.dark-mode label { color: #bcbcbc; }
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea { background: #0d0e0f; color: #cdcdcd; border-color: #323538; }
html.dark-mode input::placeholder { color: #8a8f94; }
html.dark-mode input:focus,
html.dark-mode select:focus { border-color: #60a5fa; outline-color: #1e3a5f; }
html.dark-mode .calculator-example,
html.dark-mode .calculator-clear,
html.dark-mode button.secondary,
html.dark-mode .input-head-actions .calculator-example,
html.dark-mode .input-head-actions .calculator-clear { background: #2c2e32; color: #60a5fa; border-color: #60a5fa; }
html.dark-mode .calculator-example:hover { background: #1e3a5f; }
html.dark-mode pre,
html.dark-mode .developer-formula pre,
html.dark-mode .language-examples pre,
html.dark-mode .language-examples .code-block { background: #0d0e0f; color: #cdcdcd; border-color: #2a2c2e; }
html.dark-mode .language-examples pre:hover,
html.dark-mode .developer-formula pre:hover,
html.dark-mode .language-examples .code-block:hover { background: #1e3a5f; }
html.dark-mode .language-examples,
html.dark-mode .developer-formula,
html.dark-mode details { border-color: #2a2c2e; }
html.dark-mode details summary,
html.dark-mode .language-examples summary { color: #cdcdcd; }
html.dark-mode .copy-hint { color: #8f9498; border-color: #2a2c2e; background: #2c2e32; }
html.dark-mode .result { background: #1e3a5f; color: #cdcdcd; }
html.dark-mode .result-label { color: #9a9da0; }
html.dark-mode th { background: #202224; color: #cdcdcd; }
html.dark-mode td { border-color: #2a2c2e; }
html.dark-mode .table-wrap, html.dark-mode .scroll { border-color: #2a2c2e; }
html.dark-mode .error { color: #f87171; }
html.dark-mode main a { color: #60a5fa; }
html.dark-mode main a.button, html.dark-mode main a.button-primary { color: #fff; }

/* ===== 푸터 ===== */
html.dark-mode footer { background: #09090a; color: #9a9da0; }
html.dark-mode footer a { color: #bcbcbc; }

/* ===== 리스료 계산기: 수식·결과 영역 ===== */
html.dark-mode .formula-card p,
html.dark-mode .formula-card li { color: #bcbcbc; }
html.dark-mode .formula-equation,
html.dark-mode .formula-card code { background: #0d0e0f; color: #cdcdcd; }
html.dark-mode .developer-formula { background: #2c2e32; border-color: #2a2c2e; }
html.dark-mode .developer-formula pre,
html.dark-mode .developer-formula pre code { color: #cdcdcd; }
html.dark-mode .calculator-result,
html.dark-mode .calculator-results > div { background: #1e3a5f; }
html.dark-mode .calculator-result-label { color: #9a9da0; }
html.dark-mode .calculator-result-value { color: #d9d9d9; }
html.dark-mode .calculator-card p,
html.dark-mode .calculator-card li { color: #bcbcbc; }

/* 주 버튼: 밝은 파랑 바탕에 흰 글씨가 안 보이지 않도록 진한 파랑으로 */
html.dark-mode button:not(.secondary):not(.theme-toggle):not(.calculator-example):not(.calculator-clear),
html.dark-mode .calculator-button { background: #2563eb; border-color: #2563eb; color: #fff; }

/* 헤더의 '한국어' 링크: 모든 영문 서브페이지에서 같은 버튼(알약) 모양으로 통일 */
header .language-link,
header a[lang="ko"] {
  display: inline-block; padding: 4px 10px; border: 1px solid #d0d5dd; border-radius: 999px;
  color: #475467 !important; background: transparent; font-size: 13px !important; font-weight: 600;
  line-height: 1.5; text-decoration: none !important; white-space: nowrap;
}
header .language-link:hover,
header a[lang="ko"]:hover { border-color: #2563eb; color: #2563eb !important; }

/* ===== 밝은 화면: 눈이 편한 따뜻한 종이 톤(순백·순검정 대비를 줄임) =====
   바탕 #f4f1ea / 카드 #fbf9f4 / 구분 구역 #ebe7de / 경계선 #ddd8cc / 글자 #2b2824 / 보조 글자 #6b655b / 강조 #2f5fc4 */
html:not(.dark-mode) {
  --bg: #f4f1ea; --card: #fbf9f4; --text: #2b2824; --muted: #6b655b; --line: #ddd8cc;
  --accent: #2f5fc4; --accent-weak: #e8edf7;
}
html:not(.dark-mode) .lease-overview {
  --lo-text: #2b2824; --lo-muted: #6b655b; --lo-line: #ddd8cc; --lo-border: #ddd8cc;
  --lo-accent: #2f5fc4; --lo-accent-weak: #e8edf7;
}
html:not(.dark-mode) .guide {
  --bg: #f4f1ea; --surface: #fbf9f4; --ink: #2b2824; --muted: #6b655b; --line: #ddd8cc;
  --accent: #2f5fc4; --accent-soft: #e8edf7;
}
html:not(.dark-mode) body { background: #f4f1ea; color: #2b2824; }
html:not(.dark-mode) body.lease-page { background: #f4f1ea; }
html:not(.dark-mode) header { background: #fbf9f4; border-bottom-color: #ddd8cc; }
html:not(.dark-mode) .lease-overview .card,
html:not(.dark-mode) .lease-overview > nav.card,
html:not(.dark-mode) .lease-overview .lease-item,
html:not(.dark-mode) .lease-overview .flow-step,
html:not(.dark-mode) .lease-overview .flow-figure img,
html:not(.dark-mode) .calculator-card,
html:not(.dark-mode) .card { background: #fbf9f4; border-color: #ddd8cc; }
html:not(.dark-mode) .calculator-main h1,
html:not(.dark-mode) .calculator-main h2,
html:not(.dark-mode) .calculator-main h3,
html:not(.dark-mode) .calculator-result-value,
html:not(.dark-mode) .language-examples summary,
html:not(.dark-mode) .language-examples pre,
html:not(.dark-mode) .developer-formula pre,
html:not(.dark-mode) .formula-equation,
html:not(.dark-mode) .formula-card code { color: #2b2824; }
html:not(.dark-mode) .calculator-intro,
html:not(.dark-mode) .calculator-note,
html:not(.dark-mode) .calculator-result-label,
html:not(.dark-mode) .formula-card p,
html:not(.dark-mode) .formula-card li,
html:not(.dark-mode) .calculator-field label { color: #5a554d; }
html:not(.dark-mode) .calculator-field input,
html:not(.dark-mode) input,
html:not(.dark-mode) select { background: #fffdf9; color: #2b2824; border-color: #d3cdbf; }
html:not(.dark-mode) .formula-equation,
html:not(.dark-mode) .developer-formula,
html:not(.dark-mode) .language-examples pre { background: #f0ede5; border-color: #ddd8cc; }
html:not(.dark-mode) .calculator-result,
html:not(.dark-mode) .result { background: #e8edf7; }
html:not(.dark-mode) th { background: #ebe7de; }
html:not(.dark-mode) td { border-color: #e4dfd3; }
html:not(.dark-mode) .calculator-example,
html:not(.dark-mode) .calculator-clear,
html:not(.dark-mode) button.secondary { background: #fbf9f4; color: #2f5fc4; border-color: #2f5fc4; }
html:not(.dark-mode) button:not(.secondary):not(.theme-toggle):not(.calculator-example):not(.calculator-clear) { background: #2f5fc4; border-color: #2f5fc4; color: #fff; }

/* 리스 개요: 장점 카드(.benefit)가 어두운 화면에서 밝은 바탕으로 남던 문제 */
html.dark-mode .lease-overview .benefit { background: #2c2e32; border-color: #2a2c2e; color: #cdcdcd; }
html.dark-mode .lease-overview .benefit h3 { color: #d9d9d9; }
html.dark-mode .lease-overview .benefit p { color: #9a9da0; }