/* ============================================================
   서브페이지 공통 레이아웃 — accounting-basics / money-market /
   funding-dept / irswap / funding-ifrs 가 함께 사용.
   구조·컴포넌트는 여기에 두고, 페이지 색 팔레트는 각 HTML 인라인
   <style>의 :root 토큰 덮어쓰기로 정의한다.
   다크모드: html.dark → 중립 토큰 교체 + 컴포넌트 오버라이드.
   (인덱스 페이지는 이 파일을 쓰지 않고 assets/styles.css 사용)
   ============================================================ */

/* ============================================================
   토큰 — 기본값은 blue 테마. 각 페이지 :root에서 덮어쓴다.
   ============================================================ */
:root{
  color-scheme:light;
  /* 페이지 테마색 */
  --th-900:#0f2557;     /* 가장 진한 채움(hero·footer·ledger·result) */
  --th-700:#1e3a8a;     /* 강조 채움(표 헤더·활성 탭·다음 버튼) */
  --th-500:#3b82f6;     /* 포인트(eyebrow·화살표·슬라이더 트랙) */
  --th-100:#dbeafe;     /* 연한 배경(태그·칩·하이라이트 박스) */
  --th-text:#1e3a8a;    /* 본문 위 강조 텍스트 */
  --th-pastel:#cfe0ff;  /* 어두운 채움 위 텍스트(hero 부제·ledger·라벨) */
  --th-glow:rgba(30,58,138,.3);
  --gold:#f59e0b;
  --gold-dark:#d97706;
  --red:#ef4444;
  --ok:#10b981;         /* 퀴즈 정답 */
  /* 중립색 */
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#f8fafc;
  --card:#ffffff;
  --line:#eef2f7;       /* 섹션 구분선·카드 보더 */
  --soft:#eef2f7;       /* 비활성 pill/tab 배경 */
  --soft-hover:#e0e7ff; /* 비활성 pill/tab 호버 */
  --shadow:0 10px 30px rgba(15,37,87,.08);
}

/* 다크모드 — 중립 토큰 교체. 테마색 보정은 각 페이지의 html.dark에서. */
html.dark{
  color-scheme:dark;
  --ink:#e2e8f0;
  --muted:#94a3b8;
  --bg:#0d1424;
  --card:#161e30;
  --line:#2b3650;
  --soft:#232e46;
  --soft-hover:#2e3b5a;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* ============================================================
   리셋 / 베이스
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, var(--th-100), transparent 60%),
    var(--bg);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ============================================================
   HERO
   ============================================================ */
header.hero{
  background:linear-gradient(135deg,var(--th-900),var(--th-700));
  color:#fff;
  padding:64px 0 80px;
  position:relative;
  overflow:hidden;
}
header.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(245,158,11,.25), transparent 45%);
  pointer-events:none;
}
.hero h1{font-size:clamp(28px,5vw,46px);font-weight:800;letter-spacing:-1px}
.hero h1 .coin{display:inline-block;animation:bounce 2.4s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero p.sub{margin-top:14px;font-size:18px;color:var(--th-pastel);max-width:680px}
.hero .badges{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.hero .badges span{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  padding:8px 14px;border-radius:999px;font-size:14px;backdrop-filter:blur(4px);
}
.hero nav{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.hero nav a{
  background:rgba(255,255,255,.1);color:#fff;text-decoration:none;
  padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;
  border:1px solid rgba(255,255,255,.2);transition:.2s;
}
.hero nav a:hover{background:#fff;color:var(--th-700);transform:translateY(-2px)}
html.dark .hero nav a:hover{background:rgba(255,255,255,.24);color:#fff}

/* ============================================================
   섹션
   ============================================================ */
section{padding:72px 0;border-bottom:1px solid var(--line)}
.eyebrow{color:var(--th-500);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase}
h2{font-size:30px;margin:8px 0 10px;font-weight:800;letter-spacing:-.5px}
.lead{color:var(--muted);font-size:17px;max-width:760px}

/* ============================================================
   개념 카드
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:32px}
.card{
  background:var(--card);border-radius:18px;padding:26px;
  box-shadow:var(--shadow);border:1px solid var(--line);
  transition:transform .25s, box-shadow .25s;position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:5px;
  background:linear-gradient(var(--th-500),var(--gold));
  transform:scaleY(0);transform-origin:top;transition:transform .3s;
}
.card:hover::before{transform:scaleY(1)}
.card .ico{font-size:38px}
.card h3{margin:12px 0 8px;font-size:20px}
.card p{color:var(--muted);font-size:15px}
.card .tag{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;color:var(--th-text);background:var(--th-100);padding:5px 10px;border-radius:999px}

/* ============================================================
   비유 스토리 박스
   ============================================================ */
.story{margin-top:30px;background:linear-gradient(135deg,#fff7ed,var(--th-100));border:1px dashed var(--gold-dark);border-radius:18px;padding:26px 28px;position:relative}
.story::before{content:"📖";position:absolute;top:-12px;left:18px;font-size:1.1rem;background:var(--bg);padding:2px 8px;border-radius:50%;line-height:1}
.story b.big{font-size:1.08rem}
html.dark .story{background:linear-gradient(135deg,rgba(255,247,237,.05),var(--th-100))}

/* ============================================================
   흐름 박스 (fbox형 — 세로 다이어그램은 funding-dept 인라인)
   ============================================================ */
.flow{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:32px}
.fbox{
  flex:1;min-width:130px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:18px 14px;text-align:center;
}
.fbox .fe{font-size:26px}
.fbox b{display:block;font-size:15px;margin-top:6px;color:var(--th-text)}
.fbox span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.fbox.hl{background:linear-gradient(135deg,var(--th-100),var(--card));border-color:var(--th-500)}
.farr{align-self:center;font-size:20px;color:var(--th-500);font-weight:800}

/* ============================================================
   표
   ============================================================ */
table.tbl{width:100%;border-collapse:collapse;margin-top:30px;background:var(--card);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);font-size:15px}
table.tbl th{background:var(--th-700);color:#fff;padding:14px 16px;text-align:left;font-size:14px}
table.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl tr:last-child td{border-bottom:none}
table.tbl td.acc{font-weight:800;color:var(--th-text);white-space:nowrap}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}

/* ============================================================
   분개 표시 (ledger)
   ============================================================ */
.ledger{margin-top:24px;background:var(--th-900);color:var(--th-pastel);border-radius:16px;padding:24px;font-family:"Consolas","Courier New",monospace;font-size:14px;line-height:1.9}
.ledger .tx{color:#fcd34d;font-weight:700;margin-top:16px}
.ledger .tx:first-child{margin-top:0}
.ledger .row{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:baseline;padding-left:8px}
.ledger .dr{color:#fca5a5;font-weight:700}
.ledger .cr{color:#93c5fd;font-weight:700}
.ledger .amt{text-align:right;font-weight:700;color:#fff}
.ledger .note{color:#94a3b8;font-size:12px;font-family:"Pretendard",sans-serif;margin-top:4px;padding-left:8px}

/* ============================================================
   계산기
   ============================================================ */
.calc{
  margin-top:34px;background:var(--card);border-radius:22px;
  padding:30px;box-shadow:var(--shadow);border:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:30px;
}
@media(max-width:760px){.calc{grid-template-columns:1fr}}
.calc .controls label{display:block;font-weight:700;margin:18px 0 6px;font-size:14px}
.calc .controls label:first-of-type{margin-top:0}
.calc .result{
  background:linear-gradient(135deg,var(--th-900),var(--th-700));
  color:#fff;border-radius:16px;padding:26px;display:flex;flex-direction:column;justify-content:center;
}
.calc .result .lbl{color:var(--th-pastel);font-size:13px}
.calc .result .num{font-size:26px;font-weight:800;margin:4px 0 14px}
.calc .result .num.gold{color:var(--gold)}
.calc .result .spread{
  margin-top:4px;background:rgba(255,255,255,.1);border-radius:12px;padding:14px;
  border:1px solid rgba(255,255,255,.2);font-size:14px;line-height:1.8;
}
.calc .result .spread b{color:var(--gold)}

/* 슬라이더 */
input[type=range]{-webkit-appearance:none;width:100%;height:10px;border-radius:10px;background:linear-gradient(90deg,var(--th-500),var(--gold));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--th-700);cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.18)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--th-700);cursor:pointer}

/* ============================================================
   필 버튼 / 탭
   ============================================================ */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill-btn{
  border:none;background:var(--soft);color:var(--ink);font-weight:700;
  padding:11px 16px;border-radius:999px;cursor:pointer;font-size:14px;transition:.2s;
}
.pill-btn:hover{background:var(--soft-hover)}
.pill-btn.active{background:var(--th-700);color:#fff;box-shadow:0 6px 16px var(--th-glow)}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.tab{
  border:none;background:var(--soft);color:var(--ink);font-weight:700;
  padding:12px 18px;border-radius:999px;cursor:pointer;font-size:14px;transition:.2s;
}
.tab:hover{background:var(--soft-hover)}
.tab.active{background:var(--th-700);color:#fff;box-shadow:0 6px 16px var(--th-glow)}
.panel{
  margin-top:18px;background:var(--card);border-radius:18px;padding:30px;
  box-shadow:var(--shadow);border:1px solid var(--line);min-height:160px;
  animation:fade .4s ease;
}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel h3{font-size:22px;margin-bottom:10px}
.panel ul{margin-top:12px;padding-left:0;list-style:none}
.panel ul li{padding:8px 0;border-bottom:1px dashed var(--line);display:flex;gap:10px}
.panel ul li:last-child{border:none}
.panel ul li .e{font-size:20px}
.panel ul li span:last-child{color:var(--muted);font-size:15px}

/* ============================================================
   퀴즈
   ============================================================ */
.quiz{
  margin-top:34px;background:linear-gradient(135deg,#fff7ed,#fef3c7);
  border:1px solid #fde68a;border-radius:22px;padding:34px;box-shadow:var(--shadow);
}
.quiz .q{font-size:20px;font-weight:800;margin-bottom:20px}
.opts{display:grid;gap:12px}
.opt{
  background:var(--card);border:2px solid #fde68a;border-radius:12px;padding:16px 18px;
  cursor:pointer;font-size:15px;font-weight:600;transition:.2s;text-align:left;
  display:flex;gap:12px;align-items:center;
}
.opt:hover{border-color:var(--gold);transform:translateX(4px)}
.opt.correct{border-color:var(--ok);background:#ecfdf5}
.opt.wrong{border-color:var(--red);background:#fef2f2}
.opt .letter{
  width:30px;height:30px;border-radius:8px;background:#fde68a;color:#92400e;
  display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;
}
.opt.correct .letter{background:var(--ok);color:#fff}
.opt.wrong .letter{background:var(--red);color:#fff}
.quiz .explain{
  margin-top:18px;padding:16px;border-radius:12px;background:#fffbeb;border:1px dashed #f59e0b;
  font-size:15px;display:none;
}
.quiz .explain.show{display:block;animation:fade .3s}
.quiz .next{
  margin-top:16px;background:var(--th-700);color:#fff;border:none;
  padding:12px 22px;border-radius:10px;font-weight:700;cursor:pointer;transition:.2s;display:none;
}
.quiz .next.show{display:inline-block}
.quiz .next:hover{background:var(--th-900);transform:translateY(-2px)}

/* 퀴즈 다크모드 보정 */
html.dark .quiz{background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(245,158,11,.04));border-color:rgba(245,158,11,.35)}
html.dark .opt.correct{background:rgba(16,185,129,.15)}
html.dark .opt.wrong{background:rgba(239,68,68,.15)}
html.dark .quiz .explain{background:rgba(254,243,199,.07);border-color:rgba(245,158,11,.5)}

/* ============================================================
   푸터 / 진행바
   ============================================================ */
footer{background:var(--th-900);color:var(--th-pastel);padding:40px 0;text-align:center;font-size:14px}
footer strong{color:#fff}

.progress{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--th-500),var(--gold));width:0;z-index:50;transition:width .1s}