/* ============================================================
   ORE Guide — 인덱스 페이지 디자인 시스템 (index.html 전용)
   mint/sky/grape 중심 베이스 테마.
   페이지 고유 색상/컴포넌트는 각 HTML의 인라인 <style>에서 오버라이드.
   서브페이지 공통 레이아웃은 assets/subpage.css 참고.
   ============================================================ */

/* ============================================================
   컬러 토큰 / 디자인 변수
   ============================================================ */
:root{
  color-scheme:light;
  --mint:#3dd6b8;
  --mint-deep:#19a78a;
  --sky:#6ec6ff;
  --sun:#ffd54f;
  --sun-deep:#ffb300;
  --coral:#ff7e6b;
  --coral-deep:#e85a44;
  --grape:#9c6ade;
  --grape-deep:#7444b5;
  --ink:#2b3550;
  --ink-soft:#5a6580;
  --paper:#fbfdff;
  --card:#ffffff;
  --line:#e7edf5;
  --soft:#eef2f8;
  --opt:#f5f8fc;
  --shadow:0 10px 30px rgba(43,53,80,.08);
  --shadow-lg:0 20px 50px rgba(43,53,80,.14);
  --radius:22px;
  --radius-sm:14px;
  --good:#2fbf71;
  --bad:#ef5350;
  /* 페이지 액센트 — 기본 mint/sky. bond 등은 인라인에서 덮어쓰기 */
  --accent-a:var(--mint-deep);
  --accent-b:var(--sky);
  --accent-soft-a:rgba(61,214,184,.16);
  --accent-soft-b:rgba(110,198,255,.16);
}

/* 다크모드 — 중립 토큰 교체 */
html.dark{
  color-scheme:dark;
  --ink:#e5eaf6;
  --ink-soft:#9fb0cc;
  --paper:#0c1322;
  --card:#161e30;
  --line:#2a3550;
  --soft:#232e46;
  --opt:#232e46;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --shadow-lg:0 20px 50px rgba(0,0,0,.6);
}

/* ============================================================
   리셋 / 베이스
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,Segoe UI,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* 진행바·상단바·앵커 보정·페이저 등 사이트 크롬은 assets/chrome.css (전 페이지 공용) */

.eng{font-family:Segoe UI,system-ui,sans-serif;color:var(--ink-soft);font-size:.85em;font-weight:600;letter-spacing:.02em}
code{font-family:"Consolas","SF Mono",monospace;background:#e8f0fa;padding:2px 6px;border-radius:6px;font-size:.92em}
html.dark code{background:rgba(110,198,255,.16)}

/* ============================================================
   공통 섹션
   ============================================================ */
section{max-width:980px;margin:0 auto;padding:90px 22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,var(--accent-soft-a),var(--accent-soft-b));color:var(--accent-a);font-weight:800;padding:8px 16px;border-radius:50px;font-size:.82rem;letter-spacing:.04em}
h2.title{font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.3;margin:18px 0 14px;font-weight:900}
h2.title .hl{background:linear-gradient(120deg,var(--accent-a),var(--accent-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.12rem;color:var(--ink-soft);max-width:680px}
.center{text-align:center}
.center .lead{margin:0 auto}

.reveal{opacity:0;transform:translateY(38px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   HERO (기본 mint/sky — bond 등은 인라인에서 덮어쓰기)
   ============================================================ */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 22px 60px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 80% 10%,rgba(110,198,255,.28),transparent 60%),
    radial-gradient(700px 500px at 15% 85%,rgba(61,214,184,.28),transparent 60%),
    linear-gradient(180deg,#eaf6ff,#fbfdff);
}
.hero .badges{font-size:clamp(2.4rem,9vw,5.2rem);letter-spacing:.1em;margin-bottom:10px;filter:drop-shadow(0 8px 14px rgba(43,53,80,.12))}
.hero .float1{display:inline-block;animation:floaty 4s ease-in-out infinite}
.hero .float2{display:inline-block;animation:floaty 4s ease-in-out infinite .6s}
.hero .float3{display:inline-block;animation:floaty 4s ease-in-out infinite 1.2s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}

.hero h1{font-size:clamp(2.2rem,7vw,4.2rem);font-weight:900;line-height:1.18;margin:6px 0}
.hero h1 .grad{background:linear-gradient(120deg,var(--mint-deep),var(--grape));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(1rem,2.6vw,1.35rem);color:var(--ink-soft);max-width:660px;margin:6px auto 0}
.hero .pill{margin-top:26px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);padding:14px 22px;border-radius:50px;display:inline-flex;gap:10px;align-items:center;font-weight:700;flex-wrap:wrap;justify-content:center}
.scroll-cue{margin-top:42px;font-size:1.6rem;animation:bounce 1.8s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}

.clouds{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;background:#fff;border-radius:50px;opacity:.7;filter:blur(.3px);animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-120px)}to{transform:translateX(110vw)}}
html.dark .cloud{background:rgba(255,255,255,.09);opacity:.5}

/* ============================================================
   공통 컴포넌트: 카드 / 그리드 / 박스
   ============================================================ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
@media(min-width:720px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:720px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid.cols-4{grid-template-columns:repeat(4,1fr)}}

.story{background:linear-gradient(135deg,#fff7e6,#eafaf4);border:1px dashed var(--sun-deep);border-radius:var(--radius);padding:26px 28px;position:relative}
.story::before{content:"📖";position:absolute;top:-12px;left:18px;font-size:1.1rem;background:var(--paper);padding:2px 8px;border-radius:50%;line-height:1}

.callout{background:linear-gradient(135deg,#eef6ff,#f0eaff);border-left:6px solid var(--sky);border-radius:var(--radius-sm);padding:18px 20px}
.callout.grape{background:linear-gradient(135deg,#f4effc,#eef6ff);border-left-color:var(--grape)}
.callout.sun{background:linear-gradient(135deg,#fff8e3,#fff3d6);border-left-color:var(--sun-deep)}

.keybox{background:linear-gradient(135deg,var(--mint),var(--mint-deep));color:#06303a;border-radius:var(--radius);padding:26px 28px;font-size:1.15rem;font-weight:700;box-shadow:var(--shadow)}

.chip{display:inline-flex;align-items:center;gap:6px;background:#eef7f4;color:var(--mint-deep);font-weight:800;padding:5px 12px;border-radius:30px;font-size:.82rem}
.chip.grape{background:#f1eafb;color:var(--grape-deep)}
.chip.sun{background:#fff4d6;color:var(--sun-deep)}

.term{font-weight:800;color:var(--grape)}
.def{color:var(--ink-soft);font-size:.98rem}

/* ============================================================
   특성 카드 (.feat) — bond/fxforward 공통
   ============================================================ */
.feat{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;transition:transform .25s,box-shadow .25s}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.feat .ic{font-size:2.2rem}
.feat h4{margin:10px 0 6px;font-size:1.12rem}
.feat .eng{display:block;margin-bottom:8px}
.feat p{color:var(--ink-soft);font-size:.96rem}
.feat .flip-more{display:none;margin-top:10px;color:var(--grape-deep);font-weight:700;font-size:.9rem}
html.dark .feat .flip-more{color:#b9a0ec}

/* ============================================================
   계산기 / 슬라이더 공통 (bond/fxforward/exposure)
   ============================================================ */
.calc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-lg)}
.slider-row{margin:18px 0}
.slider-row .lbl{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:8px}
.slider-row .val{background:linear-gradient(120deg,var(--sun),var(--sun-deep));color:#3d2b00;padding:3px 12px;border-radius:20px;font-weight:900;font-variant-numeric:tabular-nums}
.slider-row .val.grape{background:linear-gradient(120deg,var(--grape),var(--grape-deep));color:#fff}

input[type=range]{-webkit-appearance:none;width:100%;height:10px;border-radius:10px;background:linear-gradient(90deg,var(--mint),var(--sky));outline:none}
input[type=range].grape{background:linear-gradient(90deg,var(--sky),var(--grape))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--mint-deep);cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.18);transition:transform .15s}
input[type=range].grape::-webkit-slider-thumb{border-color:var(--grape-deep)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--mint-deep);cursor:pointer}
input[type=range].grape::-moz-range-thumb{border-color:var(--grape-deep)}

.result-big{text-align:center;margin-top:22px;padding:24px;border-radius:var(--radius);background:linear-gradient(135deg,#f0fbf8,#eef6ff);border:2px dashed var(--mint)}
.result-big .num{font-size:clamp(2rem,7vw,3rem);font-weight:900;background:linear-gradient(120deg,var(--mint-deep),var(--grape));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.formula-hint{text-align:center;color:var(--ink-soft);font-size:.9rem;margin-top:12px;font-family:monospace}
.formula-hint b{color:var(--ink)}

/* ============================================================
   차트 래퍼 / 범례 공통
   ============================================================ */
.chart-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-top:18px}
canvas.cfchart,canvas.pychart{width:100%;height:340px;display:block;border-radius:var(--radius-sm)}
canvas.chart,canvas#exposure{width:100%;height:380px;display:block;border-radius:var(--radius-sm)}
.legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.legend .it{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.86rem;color:var(--ink-soft)}
.legend .sw{width:22px;height:10px;border-radius:5px}

/* ============================================================
   ORE 코드 카드
   ============================================================ */
.code-card{background:#1e2a44;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-lg);overflow:auto}
.code-card .cap{color:#9fb4d6;font-size:.82rem;font-weight:800;letter-spacing:.05em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.code-card pre{color:#e6edf7;font-family:"Consolas","SF Mono",monospace;font-size:.86rem;line-height:1.7;white-space:pre}
.code-card .tag{color:#7be09a}
.code-card .key{color:#ffd54f}
.code-card .val{color:#6ec6ff}
.code-card .cmt{color:#6b7a99;font-style:italic}
.kvs{display:grid;gap:12px;margin-top:18px}
.kv{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.kv .k{font-weight:900;color:var(--grape);font-size:.88rem;font-family:monospace;word-break:break-all}
.kv .v{color:var(--ink-soft);font-size:.94rem}

/* ============================================================
   토글 / 스위치 (거래 흐름·결제·신용)
   ============================================================ */
.toggle{display:inline-flex;background:var(--soft);border-radius:50px;padding:5px;gap:4px;margin:14px auto;flex-wrap:wrap;justify-content:center}
.toggle button{border:none;background:transparent;padding:10px 18px;border-radius:50px;font-weight:800;color:var(--ink-soft);cursor:pointer;transition:.2s;font-size:.95rem}
.toggle button.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.settle-desc{min-height:60px;text-align:center;color:var(--ink-soft);max-width:620px;margin:0 auto}

.switch-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px;flex-wrap:wrap}
.switch{position:relative;width:54px;height:30px;display:inline-block}
.switch input{display:none}
.switch .track{position:absolute;inset:0;background:#ccc;border-radius:30px;transition:.25s}
.switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 2px 5px rgba(0,0,0,.2)}
.switch input:checked+.track{background:var(--grape)}
.switch input:checked+.track+.knob{transform:translateX(24px)}
.switch-lbl{font-weight:700;color:var(--ink-soft)}
.switch-lbl.on{color:var(--ink)}

/* ============================================================
   거래 흐름 액터/화살표 (bond·fxforward 공통 베이스)
   ============================================================ */
.flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:24px 0}
.actor{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-align:center;min-width:140px;box-shadow:var(--shadow);position:relative}
.actor .face{font-size:2.4rem}
.actor .who{font-weight:800;margin-top:4px}
.actor .has{margin-top:8px;font-size:1.4rem;font-weight:900}
.actor .cur{font-size:.78rem;color:var(--ink-soft);font-weight:700}
.arrowwrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.arrow{font-size:1.8rem;color:var(--grape);animation:slideover 2.2s ease-in-out infinite}
.arrow.back{color:var(--sun-deep)}
.arrow.down{animation:slidedown 2.2s ease-in-out infinite}
@keyframes slideover{0%,100%{transform:translateX(-8px);opacity:.4}50%{transform:translateX(8px);opacity:1}}
@keyframes slidedown{0%,100%{transform:translateY(-6px);opacity:.4}50%{transform:translateY(6px);opacity:1}}

/* ============================================================
   퀴즈
   ============================================================ */
.quiz{background:linear-gradient(135deg,#fff7e6,#f0eaff);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.q-item{background:var(--card);border-radius:var(--radius-sm);padding:20px;margin-bottom:16px;border:1px solid var(--line)}
.q-item .q{font-weight:800;margin-bottom:14px;font-size:1.05rem}
.opt{display:block;width:100%;text-align:left;background:var(--opt);border:2px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:8px;cursor:pointer;font-weight:600;transition:.18s;font-size:.98rem}
.opt:hover{border-color:var(--grape);background:#f4effc}
.opt.correct{background:#e6fbef;border-color:var(--good);color:#1a7d49}
.opt.wrong{background:#fdecea;border-color:var(--bad);color:#b53a30}
.opt:disabled{cursor:default}
.score-box{text-align:center;margin-top:18px;font-size:1.2rem;font-weight:900;min-height:30px}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:999;display:none}
#confetti.show{display:block}

/* ============================================================
   푸터
   ============================================================ */
footer{background:linear-gradient(135deg,var(--ink),#1a2238);color:#cdd6e8;padding:50px 22px;text-align:center;margin-top:40px}
footer .big{font-size:1.6rem;font-weight:900;color:#fff;margin-bottom:8px}
footer .src{font-size:.82rem;color:#8395b5;margin-top:14px}

/* ============================================================
   링크 버튼
   ============================================================ */
.btn-link{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,var(--mint),var(--sky));color:#06303a;text-decoration:none;font-weight:900;padding:14px 24px;border-radius:50px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.btn-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ============================================================
   다크모드 — 그라디언트 배경 컴포넌트 보정
   ============================================================ */
html.dark .story{background:linear-gradient(135deg,rgba(255,213,79,.09),rgba(61,214,184,.09))}
html.dark .callout{background:linear-gradient(135deg,rgba(110,198,255,.09),rgba(156,106,222,.09))}
html.dark .callout.grape{background:linear-gradient(135deg,rgba(156,106,222,.11),rgba(110,198,255,.09))}
html.dark .callout.sun{background:linear-gradient(135deg,rgba(255,213,79,.11),rgba(255,213,79,.05))}
html.dark .result-big{background:linear-gradient(135deg,rgba(61,214,184,.09),rgba(110,198,255,.09))}
html.dark .quiz{background:linear-gradient(135deg,rgba(255,213,79,.08),rgba(156,106,222,.08))}
html.dark .opt:hover{background:rgba(156,106,222,.16)}
html.dark .opt.correct{background:rgba(47,191,113,.16)}
html.dark .opt.wrong{background:rgba(239,83,80,.16)}
html.dark footer{background:linear-gradient(135deg,#161e30,#101728)}

/* ============================================================
   반응형
   (상단바 관련 중간폭/모바일 규칙은 assets/chrome.css 로 이동)
   ============================================================ */
@media(max-width:680px){
  section{padding:64px 18px}
  .hero .badges{font-size:2.4rem}
  .arrow{display:none}
  .actor{min-width:120px;padding:14px}
}