/* 사이트 공통 스타일 — 디자인 B '핀테크 카드' (지시서 019).
   색·글자 크기·간격은 아래 :root 변수만 고치면 사이트 전체에 반영된다. 페이지·템플릿에서 개별 색을 지정하지 않는다.
   규칙: 흰 바탕·큰 숫자·카드(12px 모서리)·지표 칸(옅은 회색, 10px). 빨강은 낙폭·마이너스에만 쓴다. 외부 글꼴·CDN 없음. */
:root {
  color-scheme: light dark;   /* 기본 입력칸·스크롤바도 기기 설정을 따른다 */
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;   /* 저장소에 넣은 Pretendard(SIL OFL, 한글 음절 부분 집합)가 먼저 — 없는 글자만 시스템 글꼴로 */
  --bg: #ffffff;             /* 페이지 바탕 */
  --card: #ffffff;           /* 카드 바탕(다크에서는 바탕보다 한 단계 밝게) */
  --text: #111827;
  --muted: #667085;
  --line: #e5e7eb;
  --tile: #f5f6f8;
  --emph: #f2f6ff;            /* 연 수익률 행·CAGR 강조 배경 */
  --accent: #2563eb;          /* 링크·전략 곡선 */
  --dark: #111827;            /* 버튼·로고 */
  --on-dark: #ffffff;         /* --dark 위의 글자 */
  --neg: #c81e1e;             /* 낙폭·마이너스 전용 */
  --neg-bg: #fdecec;
  --good-bg: #e7f6ec;         /* 월별 표의 아주 좋은 달 */
  --heat-ink-w: #ffffff; --heat-ink-b: #000000;   /* 어두운 테마 히트맵 글자용(라이트에서는 쓰지 않음) */
  --heat-g-lo: #e8f5ec; --heat-g-hi: #176a38; --heat-n-lo: #fdecec; --heat-n-hi: #a31f1f;   /* 지시서 070: 히트맵 연속 색 끝값(0% → 이익 +100% / 손실 −50%) — 칸 색은 이 사이를 12단계로 섞는다(.heat-g1~g12, .heat-n1~n12) */
  --depth-1: #fde8e8; --depth-2: #f5b1b1; --depth-3: #c93a3a; --depth-4: #8f1919;           /* 낙폭 깊이별 기간 비율 — 빨강 계열 4단계(연분홍 → 진빨강, 낙폭 = 빨강). 지시서 076: 다크도 같은 값(재정의 없음) */
  --depth-ink: #111827; --depth-ink-on: #ffffff;       /* 칸 글자색 고정값(테마와 무관): 1·2단계 진한 글자, 3·4단계 흰 글자 */
  --warn: #92400e;            /* 안내·경고(빨강 아님) */
  --warn-bg: #fffbeb;
  --warn-line: #fcd34d;
  --alert: #b91c1c;           /* 강한 경고(수신 불가 등) — 글자·테두리, 새 색은 이 세 변수에서만 정의 */
  --alert-bg: #fef2f2;
  --alert-line: #f87171;
  --mc1: #4b6a9b;             /* 모드별 곡선 비교 선 색 5개(지시서 050 D) — 순위·등급을 연상시키지 않는 중립 색, 굵기는 모두 같음 */
  --mc2: #a8691f;
  --mc3: #2f8a73;
  --mc4: #7c53a8;
  --mc5: #6f7f26;
  --cpk-mean: var(--text);    /* 지시서 059: Cpk 관리도 선 색 — 평균=본문색 실선, 비교 기준선=안내색(빨강 아님) 점선, 평균±3σ=보라(--mc4) 점선 */
  --cpk-spec: var(--warn);
  --cpk-sigma: var(--mc4);
  --preview-frame: #f6f7f9;   /* 상세내역 미리보기 이미지 틀(밝은 이미지라 라이트·다크 모두 같은 밝은 바탕, 지시서 039) */
  --radius-card: 12px;
  --radius-tile: 10px;
  --gap: 16px;
  --pad: 20px;
  --fs-hero: 28px;            /* 핵심 숫자 */
  --fs-big: 22px;             /* 보조 숫자·제목 */
  --fs-body: 14px;
  --fs-note: 12px;            /* 설명 */
  --maxw: 1040px;
  --maxw-wide: 1680px;
}

/* 다크 모드: 기기·브라우저 설정(prefers-color-scheme)을 자동으로 따른다. 색 변수만 바꾼다(글자·배경 대비 4.5:1 이상, 테스트로 확인). */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161a21;
    --card: #1d222b;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --line: #323947;
    --tile: #262c37;
    --emph: #243049;
    --accent: #60a5fa;
    --dark: #e5e7eb;
    --on-dark: #111827;
    --neg: #f87171;
    --neg-bg: #4a2327;
    --good-bg: #1f4a2c;
    --heat-ink-w: #ffffff; --heat-ink-b: #000000;   /* 어두운 테마 히트맵 글자: 어두운 칸 흰색, 밝은 칸 검정(단계별 대비 4.5:1) */
    --heat-g-lo: #1c3d28; --heat-g-hi: #7fe0a8; --heat-n-lo: #3f2124; --heat-n-hi: #f59a96;
    --warn: #fcd34d;
    --warn-bg: #2b2410;
    --warn-line: #8a6d1a;
    --alert: #fca5a5;
    --alert-bg: #3b1d20;
    --alert-line: #b91c1c;
    --mc1: #8fa8d4;
    --mc2: #d9a15c;
    --mc3: #6cc3aa;
    --mc4: #b99ae0;
    --mc5: #aebb62;
    --cpk-mean: var(--text);
    --cpk-spec: var(--warn);
    --cpk-sigma: var(--mc4);
    --preview-frame: #f6f7f9;   /* 다크에서도 밝은 틀 — 밝은 이미지가 어두운 바탕 위에서 뜨지 않게 감싼다 */
  }
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  margin: 0;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-synthesis: none;
  word-break: keep-all;          /* 한글은 단어(띄어쓰기) 단위로 줄바꿈(지시서 043) */
  overflow-wrap: break-word;     /* 한 단어가 칸보다 길 때만 글자 사이에서 */
}
h1 { font-size: var(--fs-big); margin: 0 0 var(--gap); line-height: 1.3; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: var(--fs-body); margin: 18px 0 8px; }
p { margin: 0 0 10px; max-width: none; text-wrap: pretty; }   /* 지시서 080: 문단은 카드·상자 폭 전체(카드 폭보다 일찍 꺾이지 않게). 읽기 폭 제한은 카드 없는 긴 글 전용 .prose 만 */
.prose p { max-width: 42em; }
td p, th p, dd p, .kpis p, .compare p, .pricing-table p { max-width: none; }
.all-modes p, .card.perf-periods p, .card[class*="bt-"] p { max-width: none; }   /* 지시서 074 ④: 넓은 차트·표 카드(상품 목록 모드 비교, 회원 상세 화면) 안 설명 문단은 카드 폭 전체 — 42em 은 공개 페이지 긴 글용. 줄바꿈 최적화(text-wrap: pretty)와 단어 단위 줄바꿈(word-break: keep-all)은 그대로 */
h1, h2, h3 { text-wrap: balance; }
small { font-size: var(--fs-note); color: var(--muted); }
a { color: var(--accent); }
img, svg { max-width: 100%; }

/* ---- 상단 바 ---- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand-logo { display: block; height: 26px; width: 171.6px; flex: none; background-color: currentColor; -webkit-mask: url("logo.eb7c90de96aa.svg") no-repeat center / contain; mask: url("logo.eb7c90de96aa.svg") no-repeat center / contain; }   /* 가로 로고 6.6:1 — 마스크라 글자색(currentColor)을 따라 라이트·다크 자동 (지시서 083) */
@media (max-width: 600px) { .brand-logo { height: 22px; width: 145.2px; } }
.site-nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; white-space: nowrap; }
.site-nav a, .site-nav button {
  padding: 6px 10px; border-radius: 8px; color: var(--text); text-decoration: none;
  font: inherit; background: none; border: 0; cursor: pointer;
}
.site-nav a:hover, .site-nav button:hover { background: var(--tile); }
.inline-form { display: inline; margin: 0; }
/* 폰 메뉴 버튼(지시서 030): 기본은 숨김, 좁은 화면 + 자바스크립트가 켜져 있을 때만 보인다 */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; }
.nav-bars, .nav-bars::before, .nav-bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.nav-bars { position: relative; }
.nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
.nav-bars::before { top: -6px; }
.nav-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars::after { top: 0; transform: rotate(-45deg); }
.nav-toggle:focus-visible, .site-nav a:focus-visible, .site-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 본문 ---- */
.site-main { padding: 24px; max-width: var(--maxw); margin: 0 auto; }
.site-main--wide { max-width: var(--maxw-wide); padding-left: 16px; padding-right: 16px; }       /* 백테스트 상세만 넓게(월별 표가 스크롤 없이 들어가도록) */

.card, .strategy-description, section.backtest-summary, .hero, .product-list li, .bt-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--pad);
  margin: 0 0 var(--gap);
  background: var(--card);
}
.card--narrow { max-width: 480px; }
.placeholder-card {
  padding: 14px 16px; border-radius: var(--radius-tile); background: var(--tile); color: var(--muted);
}
.product-list { list-style: none; padding: 0; margin: 0; }
.product-list li p { margin: 4px 0 0; color: var(--muted); }
.product-list li ul { list-style: none; padding: 0; margin: 8px 0 0; }
.product-list li a { font-weight: 600; font-size: 16px; text-decoration: none; }
.hero h1 { font-size: var(--fs-hero); }
.updated { color: var(--muted); font-size: var(--fs-note); margin: 0 0 8px; }

/* ---- 버튼·폼 ---- */
button, .cta {
  font: inherit; padding: 8px 16px; border-radius: var(--radius-tile);
  border: 1px solid var(--dark); background: var(--dark); color: var(--on-dark); cursor: pointer; text-decoration: none;
}
.cta { display: inline-block; margin-top: 12px; min-height: 44px; line-height: 26px; box-sizing: border-box; font-weight: 600; }
.cta-ghost { background: var(--bg); color: var(--text); border-color: var(--line); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: var(--gap) 0 0; }
.btn-row .cta { margin-top: 0; }
button.btn-ghost { background: var(--bg); color: var(--text); border-color: var(--line); }
input[type=email], input[type=password], input[type=text], select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--bg); color: var(--text); max-width: 100%;
}
fieldset { border: 1px solid var(--line); border-radius: var(--radius-tile); margin: 0 0 var(--gap); padding: 12px 16px; }
legend { padding: 0 6px; font-weight: 600; }
.errorlist, .errornote { color: var(--warn); list-style: none; padding: 0; margin: 4px 0; font-size: var(--fs-note); }

/* ---- 표(공통) ---- */
.subscription-table, .compare, .stats-table { border-collapse: collapse; width: 100%; }
.subscription-table th, .subscription-table td, .compare th, .compare td, .stats-table th, .stats-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-body); vertical-align: top;
}
.subscription-table thead th, .compare thead th, .stats-table thead th { color: var(--muted); font-weight: 600; font-size: var(--fs-note); }
.compare td, .stats-table td { text-align: right; }
.compare thead th + th { text-align: right; }
.stats-table th, .stats-table td, .stats-table thead th { text-align: center; }
.stats-table td.neg { color: var(--neg); }
.compare th[scope], .compare tbody th { font-weight: 600; }
.compare th small, .compare td small { font-weight: 400; }   /* 괄호 설명은 작은 보조 글자 */

/* ---- 고지 ---- */
.virtual-badge {
  display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--tile); color: var(--muted); font-size: var(--fs-note); font-weight: 600;
}
.cost-warning {
  margin: 0 0 var(--gap); padding: 10px 14px; border: 1px solid var(--warn-line); border-radius: var(--radius-tile);
  background: var(--warn-bg); color: var(--warn);
}
.alert-box {
  margin: 0 0 var(--gap); padding: 10px 14px; border: 1px solid var(--alert-line); border-radius: var(--radius-tile);
  background: var(--alert-bg); color: var(--alert); font-weight: 600;
}
.mdd-note, .win-rate-def, .table-note, .cpk-note { color: var(--muted); font-size: var(--fs-note); }
.method-note { background: var(--tile); border-radius: var(--radius-tile); padding: 12px 16px; margin: 12px 0; }
.method-note p { margin: 4px 0; font-size: var(--fs-note); color: var(--muted); }
.method-note strong { color: var(--text); }
.footer-notice { font-weight: 700; margin-bottom: 12px; }

/* ---- 지표 칸 ---- */
dl { margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.kpi, .meta-item, .stat { background: var(--tile); border-radius: var(--radius-tile); padding: 14px 16px; min-width: 0; }
.kpi dt, .meta-item dt, .stat dt { color: var(--muted); font-size: var(--fs-note); margin: 0 0 4px; }
.kpi dd, .meta-item dd, .stat dd { margin: 0; }
.kpi dd { font-size: var(--fs-hero); font-weight: 700; line-height: 1.25; }
.kpi-sub { display: block; margin-top: 8px; font-size: var(--fs-body); font-weight: 600; }
.kpi-sub small { display: inline; margin: 0; }
.kpi dd small { display: block; font-size: var(--fs-note); font-weight: 400; line-height: 1.5; margin-top: 4px; }
.kpi .neg, .kpi.neg dd { color: var(--neg); }
.metas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.meta-item dd { font-size: var(--fs-big); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 12px; }
.bt-extra .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }      /* 058: 좁은 칸(2/5)에서 칼마 → 소르티노 2열, 부연 산식은 줄바꿈 */
@media (max-width: 480px) { .bt-extra .stats { grid-template-columns: minmax(0, 1fr); } }
.stat dd { font-size: var(--fs-big); font-weight: 600; }
.stat dd small { display: block; font-size: var(--fs-note); font-weight: 400; margin-top: 4px; }
/* 비회원 공개 요약은 회원 핵심 지표 칸(.kpis)과 같은 형식(지시서 038). 벤치마크 비교 블록만 세로 목록 */
.benchmark-public dl { display: block; }
.benchmark-public dt { color: var(--muted); font-size: var(--fs-note); margin-top: 12px; }
.benchmark-public dd { margin: 0; font-size: var(--fs-big); font-weight: 700; }
.benchmark-public dd small { display: block; font-size: var(--fs-note); font-weight: 400; }
.kpis-single { grid-template-columns: 1fr; }
.cpk { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cpk div { background: var(--tile); border-radius: var(--radius-tile); padding: 14px 16px; }
.cpk dt { color: var(--muted); font-size: var(--fs-note); margin: 0 0 4px; }
.cpk dd { margin: 0; font-size: var(--fs-big); font-weight: 600; }

/* ---- 차트 ---- */
.equity-chart { width: 100%; height: auto; font-size: 11px; fill: var(--muted); }
.equity-chart .grid { stroke: var(--line); }
.equity-chart .grid-minor { stroke-dasharray: 2 4; opacity: 0.7; }
.log-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--tile); color: var(--muted); font-size: var(--fs-note); font-weight: 600; vertical-align: middle; }
.chart-note { color: var(--muted); font-size: var(--fs-note); margin: 0 0 8px; }
.equity-chart .line-strategy, .equity-chart .legend-strategy { stroke: var(--accent); }
.equity-chart .line-benchmark, .equity-chart .legend-benchmark { stroke: var(--muted); }
/* 모드별 곡선 비교(지시서 050 D): 5개 선 모두 같은 굵기, 중립 색 + 서로 다른 무늬. 범례는 표 머리글과 같은 등급 이름 + 모드 태그 */
.line-mode-1 { stroke: var(--mc1); }
.line-mode-2 { stroke: var(--mc2); }
.line-mode-3 { stroke: var(--mc3); }
.line-mode-4 { stroke: var(--mc4); }
.line-mode-5 { stroke: var(--mc5); }
.modes-chart-box { margin-top: var(--gap); }
.modes-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.modes-legend li { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.modes-legend .legend-swatch { flex: none; }
.modes-legend .col-grade, .modes-legend .col-mode { text-align: left; }
/* 두 열 줄(지시서 058): 모든 줄 3:2 — 왼쪽 넓은 칸 = 그림, 오른쪽 좁은 칸 = 숫자·설명. 한쪽만 있으면 bt-chartrow-single 로 전체 폭 */
.bt-chartrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }

/* ---- 월별 수익률 표 ---- */
.table-scroll { overflow-x:auto; max-width:100%; }
.bt-heatmap { overflow-x: auto; }
.monthtable { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }   /* 1280px에서 연도 16개가 스크롤 없이 들어가는 크기(20개 이상은 가로 스크롤 허용) */
.monthtable td, .monthtable th { border-bottom: 1px solid var(--line); padding: 4px 3px; text-align: center; white-space: nowrap; }   /* 머리글·월 이름 열 포함 모두 가운데 정렬 */
.monthtable td.corner { white-space: normal; }
.monthtable td:empty { background: var(--tile); }
.monthtable td.neg, .monthtable td .neg { color: var(--neg); background: var(--neg-bg); }
.monthtable td.great { background: var(--good-bg); }
.monthtable .agg, .monthtable .corner { background: var(--tile); }
.monthtable tfoot th, .monthtable tfoot td { font-weight: 600; }
.monthtable thead th { background: var(--card); color: var(--text); font-weight: 600; white-space: normal; line-height: 1.25; }   /* 연도 머리글: 월 이름 열과 같은 밝은 기본 글자색(다듬기 5번) */
.monthtable thead th small { color: inherit; font-weight: 400; }
.monthtable thead th:first-child { position:sticky; left:0; z-index:2; }
/* 폰 가로 화면에서 연도가 많아 가로 스크롤이 생겨도 첫 열(월 이름)이 고정되고, 스크롤된 칸과 구분되도록 오른쪽에 가는 선(지시서 030) */
.monthtable thead th:first-child, .monthtable tbody th, .monthtable tfoot th { box-shadow: 1px 0 0 var(--line); }
.monthtable tbody th, .monthtable tfoot th { position:sticky; left:0; background: var(--card); z-index:1; white-space: normal; }
.monthtable td.corner small { font-weight: 400; color: var(--muted); }
.monthtable td small.mdd-date, .monthtable td.corner small.mdd-date { color: inherit; font-weight: 400; font-size: 11px; letter-spacing: -0.3px; white-space: nowrap; }   /* MDD 발생일(저점일): 값과 같은 글자색, 같은 칸 둘째 줄. 11px는 날짜 줄이 더해져도 1280px에서 연도 16개가 스크롤 없이 들어가는 크기(실측) */
.mt-yearsum dd small.mdd-date { display: block; color: inherit; font-weight: 400; font-size: var(--fs-note); }
.monthtable td.agg.neg, .monthtable td.corner.neg { background: var(--neg-bg); }
/* 연 수익률 행·CAGR·연 수익률 평균 강조(굵게·한 단계 큰 글자·옅은 배경). 연도별 MDD 행은 기존 굵기 그대로 */
.monthtable tr.foot-annual th, .monthtable tr.foot-annual td:not(.neg), .monthtable td.cagr:not(.neg) { background: var(--emph); }
.monthtable tr.foot-annual th, .monthtable tr.foot-annual td, .monthtable td.cagr { font-weight: 700; font-size: 14px; }
.monthtable tr.foot-annual td small, .monthtable td.cagr small { font-size: var(--fs-note); font-weight: 400; }
.monthtable tr.foot-avg th, .monthtable tr.foot-annual th, .monthtable tr.foot-cum th { white-space: nowrap; }   /* 짧은 행 이름은 한 줄 */

/* 좁은 화면 전용 '연도 선택형'은 기본으로 숨김 — 자바스크립트가 꺼져 있으면 항상 전체 표가 보인다 */
.mt-phone, .mt-back { display: none; }
.mt-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mt-panel { display: none; }
.mt-panel.is-active { display: block; }
.mt-months { list-style: none; padding: 0; margin: 0 0 12px; }
.mt-months li { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.mt-months li.neg { color: var(--neg); background: var(--neg-bg); }
.mt-months li.great { background: var(--good-bg); }
.mt-yearsum { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 12px; }
.mt-yearsum div { background: var(--tile); border-radius: var(--radius-tile); padding: 10px 14px; }
.mt-yearsum dt { color: var(--muted); font-size: var(--fs-note); }
.mt-yearsum dd { margin: 0; font-size: var(--fs-big); font-weight: 600; }
.mt-yearsum .neg dd { color: var(--neg); }
.mt-stats { margin: 12px 0; }
.mt-stats summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.mt-stats .neg { color: var(--neg); }

/* ---- 주문표 웹 보기 ---- */
.order-body { white-space: pre-wrap; padding: 16px; border-radius: var(--radius-tile); background: var(--tile); font-family: ui-monospace, Consolas, monospace; }
.order-note { color: var(--muted); }
/* 회원 식별 워터마크(지시서 020): 본문 위에 비스듬히 반복. 서버가 HTML로 그리고, 클릭·선택은 통과시킨다.
   글자색을 상속(currentColor)하고 옅은 투명도만 줘서 라이트·다크 모두 본문 가독성을 해치지 않는다(장식 요소). */
.order-wm-wrap { position: relative; overflow: hidden; border-radius: var(--radius-tile); }
.order-wm { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 36px 28px; transform: rotate(-24deg); pointer-events: none; user-select: none; -webkit-user-select: none; z-index: 2;
  color: var(--text); opacity: 0.18; font-size: 12px; line-height: 1.35; white-space: nowrap; }
.order-wm span { flex: 0 0 auto; }
/* 본문 복사 막기(지시서 021): 주문표 본문 영역만. JS가 꺼져 있어도 이 CSS로 선택이 막힌다. 글자는 그대로 HTML 텍스트(이미지 변환 없음). */
.order-guard, .order-guard * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media print { .order-wm { opacity: 0.18; } }   /* 인쇄는 이번 범위 아님 */

/* ---- 하단 ---- */
.site-footer { border-top: 1px solid var(--line); padding: 24px; font-size: var(--fs-note); color: var(--muted); margin-top: 24px; }

/* ================= 화면 폭별 보기 (기기를 판별하지 않고 화면 폭만 본다: 768px 기준) ================= */
@media (min-width: 768px) {
  .bt-chartrow { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .bt-chartrow.bt-chartrow-single { grid-template-columns: minmax(0, 1fr); }
  .bt-chartrow:not(.bt-chartrow-single) { align-items: stretch; }      /* 059: 두 열일 때 같은 줄 두 카드의 테두리 높이를 같게(내용은 위 정렬, 남는 공간은 아래 여백) */
}
@media (max-width: 767.98px) {
  .site-header { padding: 10px 16px; flex-wrap: wrap; }
  .site-nav { width: 100%; }
  /* 메뉴 접기: 자바스크립트가 켜져 있을 때만(꺼져 있으면 메뉴가 항상 보인다). 항목·순서는 PC와 같다 */
  html.js .nav-toggle { display: inline-flex; }
  html.js .site-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; overflow: visible; white-space: normal; padding-top: 8px; }
  html.js .site-nav.is-open { display: flex; }
  html.js .site-nav a, html.js .site-nav button { display: block; width: 100%; text-align: left; padding: 12px 10px; }
  html.js .site-nav .inline-form { display: block; }
  .site-main { padding: 16px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }      /* 핵심 4칸은 폰에서 2×2 */
  .kpi dd { font-size: var(--fs-big); }
  .metas { grid-template-columns: repeat(2, 1fr); }
  .card, .strategy-description, section.backtest-summary, .hero, .product-list li, .bt-card { padding: 16px; }
  /* 월별 표: 연도 선택형 + '전체 표 보기' (자바스크립트가 켜져 있을 때만) */
  html.js .mt-phone { display: block; }
  html.js .mt-wrap .mt-full { display: none; }
  html.js .mt-wrap.show-full .mt-full { display: block; }
  html.js .mt-wrap.show-full .mt-phone { display: none; }
  html.js .mt-wrap.show-full .mt-back { display: inline-block; margin-top: 12px; }
}
.form-foot { margin-top: 12px; }
.auth-form .field { margin: 0 0 14px; }                                   /* 지시서 081: 라벨 위·칸 아래, 칸 폭 모두 같게(카드 폭에 맞추되 최대 360px), 칸 사이 간격 일정 */
.auth-form .field label { display: block; margin: 0 0 4px; font-weight: 600; }
.auth-form input[type=email], .auth-form input[type=password], .auth-form input[type=text] { display: block; width: 100%; max-width: 360px; box-sizing: border-box; min-height: 44px; }
.auth-form .field-help { display: block; max-width: 360px; margin: 4px 0 0; color: var(--muted); font-size: var(--fs-note); }
.auth-form .auth-submit { display: block; width: 100%; max-width: 360px; min-height: 44px; margin: 4px 0 0; }
.auth-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-foot .form-foot { margin: 0; }
.auth-foot .cta { margin-top: 0; }

/* ---- 실제 발행 실적 (지시서 028): 백테스트와 제목·색으로 구분 ---- */
.bt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.bt-tabs a { padding: 6px 14px; border: 1px solid var(--tile); border-radius: 999px; text-decoration: none; color: var(--muted); font-size: var(--fs-note); font-weight: 600; }
.bt-tabs a.is-active { border-color: var(--text); color: var(--text); }
.perf-badge { background: var(--warn-bg); color: var(--warn); }
.short-note { margin: 0 0 var(--gap); color: var(--muted); font-size: var(--fs-note); }
.perf-periods ul { margin: 0; padding-left: 1.2em; }
.perf-public .perf-badge { display: inline-block; }

/* 지시서 035 — 공개 문구 */
.hero-tagline { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-note); font-weight: 600; }
.hero-sub { font-weight: 600; }
.strategy-items dt { margin-top: 10px; font-weight: 600; }
.strategy-items dd { margin: 2px 0 0; }
.risk-list { padding-left: 20px; }
.faq-item h2 { font-size: var(--fs-body); }
.signup-steps { padding-left: 20px; }
.site-footer .footer-notice p { margin: 0 0 6px; }

/* 지시서 036 — 자료 공개 범위 · 백테스트 고지 · 주문표 샘플. 새 색 없음(기존 변수만), 강조·순위 표시 없음 */
.bt-notice { margin: var(--gap) 0 0; color: var(--muted); font-size: var(--fs-body); line-height: 1.6; }   /* 본문과 같은 크기, --muted 대비 4.5:1 이상(시험으로 확인) */
.compare-plain { width: 100%; border-collapse: collapse; }
.compare-plain th, .compare-plain td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: center; font-weight: 400; }
.compare-plain thead th, .compare-plain tbody th { font-weight: 400; }
.compare-plain tbody th { text-align: left; }
.cmp-mode { margin: var(--gap) 0; }
.plain-kpis dt { margin-top: 8px; }
.plain-kpis dd { margin: 2px 0 0; }
.locked-card { padding: var(--pad); border: 1px dashed var(--line); border-radius: var(--radius-card); background: var(--tile); }
.locked-card p { margin: 0 0 6px; }
.locked-name { font-weight: 600; }
.locked-label { color: var(--muted); }
.join-box { margin: var(--gap) 0 0; padding: var(--pad); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--emph); color: var(--text); }
.join-box p { margin: 0 0 4px; font-weight: 600; }
/* 상세내역 잠금 미리보기(지시서 039): 흐림 처리한 정적 예시 이미지 1장. 밝은 이미지라 다크 모드에서도 밝은 틀로 감싼다(틀 색은 고정, 글자는 틀 밖 변수 색) */
.detail-preview { margin: var(--gap) 0 0; }
.detail-preview-fig { margin: 0; }
.detail-preview-frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--preview-frame); line-height: 0; }
.detail-preview-frame img { display: block; width: 100%; height: auto; max-width: 100%; }
.detail-preview-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--card); color: var(--text); border: 1px solid var(--line); font-size: var(--fs-body); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.detail-preview-caption { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-note); text-align: center; }
/* 등급/모드 상하위 표기(지시서 039): 등급이 위(큰 제목), 모드가 아래(작은 꼬리표). 경로 표시는 화면 맨 위 */
.crumb { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-note); }
.crumb a { color: var(--muted); }
.crumb [aria-current] { color: var(--text); font-weight: 600; }
.grade-title { margin-bottom: 4px; }
.grade-title .mode-tag { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.page-sub { margin: 12px 0 8px; font-size: var(--fs-big); }
.col-grade { display: block; color: var(--muted); font-size: var(--fs-note); font-weight: 400; line-height: 1.4; }
.col-mode { display: block; font-weight: 600; line-height: 1.4; }
.locked-note { color: var(--muted); }
/* 판매 전 등급 '준비 중' 배지(지시서 042): 강조 없는 회색 알약 */
.pre-sale-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--tile); color: var(--muted); font-size: var(--fs-note); font-weight: 600; white-space: nowrap; }
.pre-sale-line { margin: 0 0 8px; }   /* 지시서 047: 가입 회원의 판매 전 등급 상세 화면 '준비 중' 표시 */
.pre-sale-line .pre-sale-badge { margin-left: 0; }
/* 모드 한 줄 소개(지시서 042): 둘째 줄은 첫 줄 바로 아래에 붙인다 */
.mode-summary-note { margin-top: 0; }
.order-sample { margin: var(--gap) 0; }
.order-sample .sample-badge { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--tile); color: var(--muted); font-size: var(--fs-note); font-weight: 600; }
.order-sample .sample-top, .order-sample .sample-bottom { color: var(--muted); font-size: var(--fs-body); }

/* ---- 상품 라인업 카드(지시서 043) ---- */
.lineup-section { margin: var(--gap) 0; }
.lineup-section > h2 { font-size: var(--fs-big); margin-bottom: 12px; }
.product-list.lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: var(--gap) 0; }
.lineup-card { display: flex; flex-direction: column; gap: 12px; margin: 0 !important; }
.lineup-art { flex: none; }
.lineup-art .bar { fill: var(--line); }
.lineup-art .bar.on { fill: var(--accent); }
.is-soon .lineup-art .bar.on { fill: var(--muted); }
.lineup-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lineup-card { position: relative; }
.lineup-body > .pre-sale-badge { position: absolute; top: var(--pad); right: var(--pad); margin: 0; }   /* 오른쪽 위 모서리: 판매 중·전 카드의 이름 줄이 같은 높이에 선다 */
.lineup-name { font-size: var(--fs-big); line-height: 1.3; }
.product-list .lineup-tagline { margin: 6px 0 0; color: var(--muted); }
.product-list .lineup-chips { margin: 10px 0 0; }
.product-list .lineup-chips { display: flex; flex-wrap: wrap; gap: 8px; }   /* 지시서 046: 모드마다 칩 1개 */
.mode-chip.mode-chip-link { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 16px; text-decoration: none; }   /* 폰에서 눌리기 쉬운 44px */
.mode-chip.mode-chip-link:hover, .mode-chip.mode-chip-link:focus-visible { border-color: var(--text); }
.mode-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }   /* 지시서 046: 같은 등급의 모드 전환 탭 */
.mode-tabs a, .mode-tabs span { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 16px; border: 1px solid var(--tile); border-radius: 999px; font-size: var(--fs-note); font-weight: 600; text-decoration: none; color: var(--muted); }
.mode-tabs .is-active { border-color: var(--text); color: var(--text); }
.col-mode-link { display: flex; align-items: center; justify-content: center; min-height: 44px; }   /* 비교표 열 머리의 모드 이름 링크 */
.mode-chip { display: inline-block; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--tile); color: var(--text); font-size: var(--fs-note); font-weight: 600; }
.product-list .lineup-price { margin: 10px 0 0; color: var(--text); font-weight: 600; }
.product-list .lineup-actions { margin: auto 0 0; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.product-list .lineup-actions a.cta { margin-top: 0; font-size: var(--fs-body); font-weight: 600; text-decoration: none; padding: 8px 14px; }
/* 요금 표 */
.pricing-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.pricing-table th, .pricing-table td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: var(--fs-body); }
.pricing-table thead th { color: var(--muted); font-size: var(--fs-note); font-weight: 600; }
.pricing-table tbody th { white-space: nowrap; font-weight: 700; }
.pricing-table .price-cell { font-weight: 600; }
.home-summary > h2 { font-size: var(--fs-big); }
@media (max-width: 767.98px) {
  /* 폰: 가로로 밀지 않고 세로로 쌓는다(버튼이 숨지 않게). 기호는 이름 왼쪽에 작게 */
  .product-list.lineup { grid-template-columns: minmax(0, 1fr); }
  .lineup-card { flex-direction: row; align-items: flex-start; }
  .lineup-art { width: 44px; height: 44px; }
  .pricing-table th, .pricing-table td { padding: 8px 6px; }
}

/* ---- 전 등급 요약 공개 · 기능 비교표 (지시서 045) ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.col-note { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-note); font-weight: 400; line-height: 1.4; }
.kpis-frame { margin: 0 0 12px; }
.kpis-frame .kpi dd, .kpis-frame .meta-item dd { color: var(--muted); }
.detail-lock { margin-top: var(--gap); }
.feature-table { width: 100%; border-collapse: collapse; }
.feature-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.feature-table th, .feature-table td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: center; font-size: var(--fs-body); font-weight: 400; vertical-align: top; }
.feature-table thead th { color: var(--text); font-size: calc(var(--fs-body) + 2px); font-weight: 700; }      /* 지시서 076: 머리글·상품명은 본문보다 한 단계 크게(14 → 16px)·본문색·굵게 */
.feature-table .feat-mark { display: inline-block; font-size: 1.3em; line-height: 1; font-weight: 700; vertical-align: middle; }      /* ✓ 를 키워 — 와 시각적 크기를 맞춘다(기호는 그대로) */
.feature-table .feat-yes { font-size: 1.35em; }
.feature-table tbody th { text-align: left; font-weight: 600; }
.feature-table td small { color: var(--muted); }
.all-modes-table th, .all-modes-table td { min-width: 96px; }
.all-modes-table tbody th { min-width: 140px; }

.feature-card .grade-note { margin-top: 14px; }

/* 글꼴(지시서 043): Pretendard 1.3.9 한글·영문 부분 집합 woff2, SIL OFL 1.1(fonts/OFL.txt). 굵기는 700 이하만 쓴다. 외부 주소 없음 */
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Pretendard-Regular.subset.97213db5c578.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Pretendard-SemiBold.subset.3ba9cd1e8bcb.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Pretendard-Bold.subset.40b92fb6e0e4.woff2") format("woff2"); }
/* 홈 요약 카드 꼬리표(지시서 044): 제목 아래 등급 이름·모드 꼬리표 */
.card-tags { margin: -4px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }

/* 지시서 052·067: 곡선 기간 설정(월 단위) — 곡선 위 작은 폼과 고정 표시 문구(상품 목록 비교 곡선 전용) */
.period-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.period-form select { min-height: 44px; }
.period-form button { min-height: 44px; }
.period-flag { margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--text); border-radius: 8px; background: var(--tile); font-weight: 600; }
.period-metrics-note, .period-notice { margin: 8px 0 0; font-size: var(--fs-note); }

/* 지시서 067: 모드별 요약 비교 — ① 위험·수익 지도 | ② 연도별 수익률(넓은 화면 1:1 두 열, 좁으면 세로) · ③ 낙폭 곡선(전체 폭) · ④ 기존 지수 곡선(전체 폭, 크기 그대로). 색은 050 중립 5색, 강조 없음 */
.modes-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: var(--gap); }
.modes-sub { margin-top: var(--gap); min-width: 0; }
.modes-pair .modes-sub { margin-top: 0; }
.modes-map-read { align-self: center; }
@media (min-width: 768px) { .modes-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dot-mode-1 { fill: var(--mc1); }
.dot-mode-2 { fill: var(--mc2); }
.dot-mode-3 { fill: var(--mc3); }
.dot-mode-4 { fill: var(--mc4); }
.dot-mode-5 { fill: var(--mc5); }
.bar-mode-1 { fill: var(--mc1); }
.bar-mode-2 { fill: var(--mc2); }
.bar-mode-3 { fill: var(--mc3); }
.bar-mode-4 { fill: var(--mc4); }
.bar-mode-5 { fill: var(--mc5); }
.dot-benchmark { fill: var(--muted); stroke: var(--muted); stroke-width: 1.5; }      /* 지시서 079: 빈 원 → 채운 원(SOXL 회색 --muted, 크기 그대로. 지도 점만 쓴다) */
.equity-chart .map-label { fill: var(--text); font-size: 10px; }
.equity-chart .map-lead { stroke: var(--muted); fill: none; }

/* 지시서 053: 차트 마우스 설명(툴팁) · 추가 성과 차트 · 모드 비교 SOXL 점선 */
.chart-tip-host { position: relative; }
.equity-chart { touch-action: pan-y; }
.equity-chart .tip-guide { display: none; stroke: var(--muted); stroke-width: 1; }
.equity-chart .tip-guide.is-on { display: block; }
.chart-tip { position: absolute; top: 8px; z-index: 2; pointer-events: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font-size: var(--fs-note); line-height: 1.5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); white-space: nowrap; }
.chart-tip[hidden] { display: none; }
.chart-tip strong { display: block; }
.equity-chart .zero-line { stroke: var(--muted); }
.equity-chart .bar-strategy { fill: var(--accent); }
.equity-chart .bar-benchmark { fill: var(--muted); }
.legend-swatch .line-benchmark { stroke: var(--muted); }

/* 지시서 055: Cpk 관리도 — 점은 모두 같은 색, 기준선보다 낮은 해만 속이 빈 점(모양만) */
.cpk-chart-wrap { margin: 0 0 12px; }
.cpk-chart-note { color: var(--muted); font-size: var(--fs-note); margin: 6px 0 0; }
.cpk-line.cpk-mean { stroke: var(--cpk-mean); }
.cpk-line.cpk-spec { stroke: var(--cpk-spec); }
.cpk-line.cpk-sigma { stroke: var(--cpk-sigma); }      /* 불투명도 1, 굵기는 기준선과 같게(옅게 하지 않음) */
.cpk-dot { fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; }   /* 지시서 063: 점 반지름 3, 속 빈 점 테두리 1.5 */
.cpk-dot.cpk-below { fill: var(--card); }
.equity-chart .cpk-label { font-size: 11px; }
.equity-chart .cpk-label-mean { fill: var(--cpk-mean); }
.equity-chart .cpk-label-spec { fill: var(--cpk-spec); }
.equity-chart .cpk-label-sigma { fill: var(--cpk-sigma); }
.equity-chart .cpk-pt { fill: var(--muted); font-size: 10px; }      /* 점 수익률 라벨: 음수도 같은 색(강조 금지) */
.equity-chart .cpk-lead { stroke: var(--muted); fill: none; }      /* 지시서 065: 옆으로 비킨 점 라벨과 점을 잇는 가는 선(0.75px) */
.cpk-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-note); color: var(--muted); }
.cpk-legend li { display: flex; align-items: center; gap: 6px; }
.cpk-swatch { flex: none; }

/* 지시서 064: '운용 방식과 특성' 카드 하나 — 운용 방식(전체 폭, 칸 하나) 아래에 보유 일수 | 시드 아래 구간(3:2, 아래 끝 맞춤). 카드 폭 600px 미만이면 세로 */
.bt-ops, .bt-methods { container-type: inline-size; }
.bt-ops h3 { margin: 16px 0 8px; }
.bt-ops .ops-sub { color: var(--muted); font-weight: 400; font-size: var(--fs-note); }
.ops-subtitle { margin: 0 0 4px; }
.method-lines { margin-top: 8px; }
.method-lines .method-sub { margin: 0 0 4px; font-size: var(--fs-body); }
.method-lines .method-sub:not(:first-child) { margin-top: 12px; }
.method-lines p { line-height: 1.7; }
.ops-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; align-items: stretch; }      /* 지시서 065: 카드 폭 600px 이상이면 좌우(왼쪽 = 보유 일수·시드 아래 구간 / 오른쪽 = 보유 일수 분포, 3:2), 아니면 세로 */
@container (min-width: 600px) { .ops-groups { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.ops-col { display: flex; flex-direction: column; min-width: 0; }
.ops-group { min-width: 0; }
.ops-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }      /* 좁은 화면(카드 폭 600px 미만): 칸 2열 */
.ops-kpis .kpi.kpi-blank { display: none; }                                              /* 빈칸은 좁은 화면에서 숨김 */
/* 지시서 066: 칸은 내용 높이(늘어나지 않음). 넓은 화면에서 왼쪽 열은 행 4개(소제목·칸·소제목·칸)이고 두 칸 줄은 같은 크기(1fr)라 큰 쪽에 맞춰 높이가 같다. 왼쪽 열 아래 남는 공간은 빈 여백, 막대 칸이 두 열의 바깥 끝을 맞춘다 */
@container (min-width: 600px) { .ops-col-left { display: grid; grid-template-rows: auto 1fr auto 1fr; align-self: start; } .ops-col-left .ops-group { display: grid; grid-template-rows: subgrid; grid-row: span 2; } }
@container (min-width: 600px) { .ops-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ops-kpis .kpi.kpi-blank { display: block; background: none; padding: 0; } }      /* 넓은 화면: 위 4칸·아래 3칸+빈칸 모두 4열(열 경계 일치) */
.ops-bars { background: var(--tile); border-radius: var(--radius-tile); padding: 12px 16px; min-width: 0; flex: 1; display: flex; flex-direction: column; }      /* 막대 칸은 왼쪽 열 높이에 맞춰 늘어난다(아래 끝 맞춤) */
.ops-bars .chart-note { margin: 0 0 6px; }
.ops-bars-chart { flex: 1; display: flex; flex-direction: column; justify-content: center; }      /* 막대는 세로 가운데 */
.ops-bars .equity-chart { margin: 0; }
.ops-kpis .kpi { display: flex; flex-direction: column; justify-content: flex-start; padding-left: 10px; padding-right: 10px; }      /* 지시서 065후속: 좁은 4열 칸에서 제목이 한 줄에 들어가도록 좌우 여백만 줄임 */
.ops-kpis .kpi dd { font-size: 18px; }      /* 지시서 065후속: 이 카드의 칸만 18px(다른 카드 지표 칸은 그대로) — 4열 칸이 좁아 값이 두 줄로 깨지던 것 방지 */
.ops-kpis dd small.ops-small { display: block; color: var(--muted); font-size: var(--fs-note); font-weight: 400; margin-top: 2px; }
.ops-open { margin: 12px 0 0; color: var(--muted); font-size: var(--fs-note); }
.ops-note, .ops-open { max-width: none; }      /* 카드 전체 폭 */
.ops-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* 지시서 064 ⑧: 차트 안 글자 라벨은 카드 바탕색 테두리(halo)로 선·점 위에서도 읽히게(다크 모드는 --card 가 따라감) */
.equity-chart .label-halo { paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }

/* 지시서 058: 하락장 복기 — 좁은 칸용 목록형(구간마다 작은 칸) */
.dd-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.dd-item { background: var(--tile); border-radius: var(--radius-tile); padding: 14px 16px; min-width: 0; }
.dd-item p { margin: 0 0 4px; max-width: none; }
.dd-item p:last-child { margin-bottom: 0; }
.dd-item .dd-span { font-weight: 600; }
.dd-item .dd-line small { color: var(--muted); font-size: var(--fs-note); }
.dd-item .neg { color: var(--neg); }

/* 지시서 060: 줄 3 왼쪽 열(낙폭 곡선 → 연도별 MDD 세로 쌓기) · 연도별 MDD 카드 칸 · 일별 낙폭 곡선 */
.bt-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; min-width: 0; margin: 0 0 var(--gap); }
.bt-col > .card { margin: 0; }                  /* 카드 사이 간격은 열의 gap, 아래 여백은 열이 한 번만(다른 카드와 같은 높이 계산) */
.ymdd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }   /* 칸은 가로로 나열하고 자동 줄바꿈, 카드 밖으로 넘치지 않음 */
.ymdd-cell { background: var(--tile); border-radius: var(--radius-tile); padding: 8px 4px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ymdd-year { color: var(--muted); font-size: var(--fs-note); font-variant-numeric: tabular-nums; }
.ymdd-val { font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ymdd-val.neg { color: var(--neg); }
.ymdd-date { color: var(--muted); font-size: var(--fs-note); font-variant-numeric: tabular-nums; }
.ymdd-open { color: var(--muted); font-size: var(--fs-note); margin: 8px 0 0; }
.drawdown-daily .tip-area { cursor: crosshair; }
.equity-chart .mdd-dot { fill: var(--accent); stroke: none; }
.equity-chart .mdd-label { fill: var(--text); font-size: 10px; }
.equity-chart .mdd-lead { stroke: var(--text); fill: none; stroke-linecap: round; stroke-linejoin: round; }      /* 지시서 065: 최대낙폭 라벨 → 점 가는 연결선(1px, 실선, 꺾은선) */
.chart-tip .tip-sub { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.ymdd-all { grid-column: span 2; }
.ymdd-cell[data-ymdd-link] { cursor: pointer; }
.ymdd-cell[data-ymdd-link]:hover, .ymdd-cell[data-ymdd-link]:focus-visible { outline: 2px solid var(--line); outline-offset: -2px; }
.ymdd-cell[data-ymdd-link]:focus-visible { outline-color: var(--accent); }

/* 지시서 068 ②·069: 연도별 수익률 히트맵 표 — 행 = 연도, 열 = 모드. 폭은 카드 안쪽 폭에 고정(가로 스크롤 없음). 칸 색은 끝값 변수 4개(070: --heat-g-lo/hi, --heat-n-lo/hi)를 12단계로 섞은 클래스(.heat-g1~g12, .heat-n1~n12). [069 변수 9개는 070 에서 대체: --heat-g1~g5 이익, --heat-n1~n4 손실), 같은 부호 규칙(이익/손실)·고정 구간 단계 */
.heat-table { border-collapse: separate; border-spacing: 4px 0; width: 100%; table-layout: fixed; margin: 8px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.heat-table th, .heat-table td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: center; overflow: hidden; }
.heat-table thead th { background: var(--card); font-weight: 600; line-height: 1.25; vertical-align: bottom; }
.heat-table thead th:first-child, .heat-table tbody th { width: 76px; text-align: center; background: var(--card); }      /* 지시서 071후속 ⑥: 연도 칸 가운데 정렬, 열 사이 4px 틈(카드 배경색) */
.heat-table tbody th small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.heat-name { display: inline-block; vertical-align: middle; text-align: left; }
.heat-table thead .heat-name { text-align: center; }
.heat-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.heat-table thead .heat-sw { display: block; margin: 0 auto 4px; }
/* 지시서 071후속2 ②: SOXL 칩 견본 = 선 모양과 같은 짧은 회색 점선(약 14px) — 라이트·다크 모두 --muted */
.heat-sw-soxl { width: 14px; height: 0; border-top: 2px dotted var(--muted); border-radius: 0; background: none; }
.heat-sw-1 { background: var(--mc1); } .heat-sw-2 { background: var(--mc2); } .heat-sw-3 { background: var(--mc3); } .heat-sw-4 { background: var(--mc4); } .heat-sw-5 { background: var(--mc5); }
.heat-table td.heat-0 { color: var(--text); }
.heat-table tfoot th, .heat-table tfoot td { border-top: 2px solid var(--text); border-bottom: 0; font-weight: 700; }      /* 지시서 076: 맨 아래 CAGR 행 — 굵은 구분선·굵은 값 */
.heat-table tfoot th { width: 76px; text-align: center; background: var(--card); }
.heat-g1 { background: color-mix(in srgb, var(--heat-g-hi) 0%, var(--heat-g-lo)); color: var(--text); }
.heat-g2 { background: color-mix(in srgb, var(--heat-g-hi) 9%, var(--heat-g-lo)); color: var(--text); }
.heat-g3 { background: color-mix(in srgb, var(--heat-g-hi) 18%, var(--heat-g-lo)); color: var(--text); }
.heat-g4 { background: color-mix(in srgb, var(--heat-g-hi) 27%, var(--heat-g-lo)); color: var(--text); }
.heat-g5 { background: color-mix(in srgb, var(--heat-g-hi) 36%, var(--heat-g-lo)); color: var(--text); }
.heat-g6 { background: color-mix(in srgb, var(--heat-g-hi) 45%, var(--heat-g-lo)); color: var(--text); }
.heat-g7 { background: color-mix(in srgb, var(--heat-g-hi) 55%, var(--heat-g-lo)); color: var(--text); }
.heat-g8 { background: color-mix(in srgb, var(--heat-g-hi) 64%, var(--heat-g-lo)); color: var(--text); }
.heat-g9 { background: color-mix(in srgb, var(--heat-g-hi) 73%, var(--heat-g-lo)); color: var(--text); }
.heat-g10 { background: color-mix(in srgb, var(--heat-g-hi) 82%, var(--heat-g-lo)); color: var(--on-dark); }
.heat-g11 { background: color-mix(in srgb, var(--heat-g-hi) 91%, var(--heat-g-lo)); color: var(--on-dark); }
.heat-g12 { background: color-mix(in srgb, var(--heat-g-hi) 100%, var(--heat-g-lo)); color: var(--on-dark); }
.heat-n1 { background: color-mix(in srgb, var(--heat-n-hi) 0%, var(--heat-n-lo)); color: var(--text); }
.heat-n2 { background: color-mix(in srgb, var(--heat-n-hi) 9%, var(--heat-n-lo)); color: var(--text); }
.heat-n3 { background: color-mix(in srgb, var(--heat-n-hi) 18%, var(--heat-n-lo)); color: var(--text); }
.heat-n4 { background: color-mix(in srgb, var(--heat-n-hi) 27%, var(--heat-n-lo)); color: var(--text); }
.heat-n5 { background: color-mix(in srgb, var(--heat-n-hi) 36%, var(--heat-n-lo)); color: var(--text); }
.heat-n6 { background: color-mix(in srgb, var(--heat-n-hi) 45%, var(--heat-n-lo)); color: var(--text); }
.heat-n7 { background: color-mix(in srgb, var(--heat-n-hi) 55%, var(--heat-n-lo)); color: var(--text); }
.heat-n8 { background: color-mix(in srgb, var(--heat-n-hi) 64%, var(--heat-n-lo)); color: var(--text); }
.heat-n9 { background: color-mix(in srgb, var(--heat-n-hi) 73%, var(--heat-n-lo)); color: var(--on-dark); }
.heat-n10 { background: color-mix(in srgb, var(--heat-n-hi) 82%, var(--heat-n-lo)); color: var(--on-dark); }
.heat-n11 { background: color-mix(in srgb, var(--heat-n-hi) 91%, var(--heat-n-lo)); color: var(--on-dark); }
.heat-n12 { background: color-mix(in srgb, var(--heat-n-hi) 100%, var(--heat-n-lo)); color: var(--on-dark); }
@media (prefers-color-scheme: dark) {   /* 어두운 테마: 이익 5단계까지·손실 6단계까지 흰 글자, 그 위는 검정 글자(모든 단계 대비 4.5:1 시험) */
  .heat-g1 { color: var(--heat-ink-w); }
  .heat-g2 { color: var(--heat-ink-w); }
  .heat-g3 { color: var(--heat-ink-w); }
  .heat-g4 { color: var(--heat-ink-w); }
  .heat-g5 { color: var(--heat-ink-w); }
  .heat-g6 { color: var(--heat-ink-b); }
  .heat-g7 { color: var(--heat-ink-b); }
  .heat-g8 { color: var(--heat-ink-b); }
  .heat-g9 { color: var(--heat-ink-b); }
  .heat-g10 { color: var(--heat-ink-b); }
  .heat-g11 { color: var(--heat-ink-b); }
  .heat-g12 { color: var(--heat-ink-b); }
  .heat-n1 { color: var(--heat-ink-w); }
  .heat-n2 { color: var(--heat-ink-w); }
  .heat-n3 { color: var(--heat-ink-w); }
  .heat-n4 { color: var(--heat-ink-w); }
  .heat-n5 { color: var(--heat-ink-w); }
  .heat-n6 { color: var(--heat-ink-w); }
  .heat-n7 { color: var(--heat-ink-b); }
  .heat-n8 { color: var(--heat-ink-b); }
  .heat-n9 { color: var(--heat-ink-b); }
  .heat-n10 { color: var(--heat-ink-b); }
  .heat-n11 { color: var(--heat-ink-b); }
  .heat-n12 { color: var(--heat-ink-b); }
}
@media (max-width: 767.98px) {              /* 폰: 가로 스크롤 없이 칸 글자 10.5px, 열 머리는 두 줄까지 */
  .heat-table { font-size: 10.5px; border-spacing: 3px 0; }
  .heat-table th, .heat-table td { padding: 5px 1px; }
  .heat-table thead th:first-child, .heat-table tbody th { width: 46px; }
  .heat-table thead th { font-size: 10.5px; }
  .heat-table .col-grade, .heat-table .col-mode { font-size: 10.5px; overflow-wrap: anywhere; }
  .heat-table tbody th small { font-size: 9px; }
}

.heat-legend { margin: 10px 0 0; }
.heat-grad { display: flex; height: 12px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.heat-grad-n { flex: 1; background: linear-gradient(to right, var(--heat-n-hi), var(--heat-n-lo)); }
.heat-grad-g { flex: 2; background: linear-gradient(to right, var(--heat-g-lo), var(--heat-g-hi)); }
.heat-ticks { display: flex; margin-top: 2px; font-size: var(--fs-note); color: var(--muted); font-variant-numeric: tabular-nums; }
.heat-ticks span { flex: 1; text-align: left; } .heat-ticks span:last-child { flex: 0 0 auto; }

/* 지시서 068 ④: 모드별 월별 지수 곡선 — 작은 그림 5개(넓은 화면 한 줄 5개, 좁으면 3열·2열) */
.modes-small-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap) 8px; margin-top: 8px; }
@media (min-width: 600px) { .modes-small-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .modes-small-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.modes-small-fig { margin: 0; min-width: 0; }
.modes-small-fig figcaption { margin-bottom: 2px; }
.line-other { stroke: var(--muted); opacity: 0.35; }

/* 지시서 069 (a): 낙폭 깊이별 기간 비율 — 모드마다 가로 100% 누적 막대 1줄. 구간 색은 모드 색이 아닌 회색 4단계(순위·좋고 나쁨 색 아님) */
.depth-rows { margin-top: 8px; }
.depth-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 0; }
.depth-head { min-width: 0; }
.depth-track { position: relative; height: 36px; }
.depth-svg { display: block; width: 100%; height: 36px; border-radius: 6px; overflow: hidden; }
.depth-seg text { font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
.depth-seg-1 rect { fill: var(--depth-1); } .depth-seg-1 text { fill: var(--depth-ink); }
.depth-seg-2 rect { fill: var(--depth-2); } .depth-seg-2 text { fill: var(--depth-ink); }
.depth-seg-3 rect { fill: var(--depth-3); } .depth-seg-3 text { fill: var(--depth-ink-on); }
.depth-seg-4 rect { fill: var(--depth-4); } .depth-seg-4 text { fill: var(--depth-ink-on); }
.depth-seg text[data-on="1"] { fill: var(--depth-ink); } .depth-seg text[data-on="2"] { fill: var(--depth-ink); } .depth-seg text[data-on="3"] { fill: var(--depth-ink-on); } .depth-seg text[data-on="4"] { fill: var(--depth-ink-on); } .depth-seg text[data-on="0"] { fill: var(--text); }      /* 지시서 074 ②: 외곽선(halo) 없음 — 칸 밖으로 나온 숫자는 글자 가운데가 놓인 칸의 글자색(JS 가 data-on 에 그 칸 단계를 적음, 카드 배경 위면 0 = 본문색) */
.depth-seg text.depth-skip { display: none; }
.depth-seg:focus-visible { outline: none; } .depth-seg:focus-visible rect { stroke: var(--accent); stroke-width: 2; }
.depth-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 2px; padding: 0; list-style: none; font-size: var(--fs-note); color: var(--text); }
.depth-legend li { display: inline-flex; align-items: center; gap: 6px; }
.depth-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); }
.depth-sw-1 { background: var(--depth-1); } .depth-sw-2 { background: var(--depth-2); } .depth-sw-3 { background: var(--depth-3); } .depth-sw-4 { background: var(--depth-4); }
.depth-wave path { fill: none; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round; }
.depth-wave { pointer-events: none; }
@media (max-width: 767.98px) { .depth-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .depth-head .heat-name { display: inline-flex; gap: 6px; align-items: baseline; } }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 지시서 070 ③: 낙폭 곡선 비교 — 모드 칩(켜기·끄기) + 겹친 선 한 그림 */
.dd-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 6px; }
.dd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: var(--fs-note); cursor: pointer; }
.dd-chip .heat-sw { margin-right: 2px; }
.dd-chip .heat-name { display: inline; }
.dd-chip.is-on { border-color: var(--text); font-weight: 600; }
.dd-chip:not(.is-on) { color: var(--muted); background: transparent; border-style: dashed; }
.dd-chip:not(.is-on) .heat-sw { opacity: 0.35; }
.dd-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modes-dd-chip .dd-line.is-off { display: none; }
/* 지시서 071후속 ①③: 모두 꺼진 빈 그림 안내, 곡선 끝 라벨(수치만 / 이름 + 수치) — 글자 둘레 카드색 테두리(halo), 강조할 때 나머지도 선처럼 흐리게 */
.modes-dd-chip .dd-empty { display: none; font-size: 16px; fill: var(--muted); }
.modes-dd-chip.is-empty .dd-empty { display: block; }
.end-label { font-size: 10px; font-weight: 700; stroke: var(--card); stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.end-label-1 { fill: var(--mc1); } .end-label-2 { fill: var(--mc2); } .end-label-3 { fill: var(--mc3); } .end-label-4 { fill: var(--mc4); } .end-label-5 { fill: var(--mc5); } .end-label-6 { fill: var(--muted); }
.dd-lead { fill: none; stroke: var(--muted); stroke-width: 0.75; }      /* 지시서 077: 끝 연결선은 곡선과 다른 보조 글자색 0.75px(라벨 글자만 모드 색) */
.dd-lead.is-hot { stroke: var(--text); }
.dd-end-dot { stroke: none; }
.end-dot-1 { fill: var(--mc1); } .end-dot-2 { fill: var(--mc2); } .end-dot-3 { fill: var(--mc3); } .end-dot-4 { fill: var(--mc4); } .end-dot-5 { fill: var(--mc5); } .end-dot-6 { fill: var(--muted); }
.modes-dd-chip.has-hot .dd-label { opacity: 0.15; }
.modes-dd-chip.has-hot .dd-label.is-hot { opacity: 1; }
/* 지시서 071후속2 ①: 폰에서 그림 글자 10px 이상 — 칩 그림 둘은 JS 가 실제 폭에 맞춰 viewBox 를 다시 잡아 글자가 1:1 로 보이고, 작은 그림 5개는 좁은 폰(420px 미만)에서 한 열로 놓고 글자 단위를 줄여 화면 글자 ≥ 10px */
@media (max-width: 419.98px) {
  .modes-small-grid { grid-template-columns: minmax(0, 1fr); }
  .modes-small { font-size: 6.8px; }
  .modes-small .end-label { font-size: 6.8px; stroke-width: 2px; }
}
.chip-guide { margin: 8px 0 0; font-size: var(--fs-note); color: var(--muted); }
.dd-worst-lead { stroke: var(--muted); stroke-width: 1; }
.dd-worst-label { font-size: 10px; font-weight: 600; fill: var(--text); font-variant-numeric: tabular-nums; pointer-events: none; }
.dd-worst-hit { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }      /* 지시서 075: 라벨을 못 단 점에 대는 자리(마우스·터치) */
.dd-worst-tip { paint-order: stroke; }
.dd-worst-dot { stroke: var(--card); stroke-width: 1px; pointer-events: none; }
.dd-worst-dot-1 { fill: var(--mc1); } .dd-worst-dot-2 { fill: var(--mc2); } .dd-worst-dot-3 { fill: var(--mc3); } .dd-worst-dot-4 { fill: var(--mc4); } .dd-worst-dot-5 { fill: var(--mc5); }
.modes-dd-chip.has-hot .dd-line { opacity: 0.15; }
.modes-dd-chip.has-hot .dd-line.is-hot { opacity: 1; stroke-width: 1.8; }

/* 지시서 071 ③: 월별 지수 곡선 기간 칩(전체 / 연도) — 링크 한 줄, JS 없이도 동작 */
.period-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.period-chips-label { color: var(--muted); font-size: var(--fs-note); margin-right: 2px; }
.period-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text); font-size: var(--fs-note); text-decoration: none; font-variant-numeric: tabular-nums; }
.period-chip.is-on { background: var(--dark); color: var(--on-dark); border-color: var(--dark); font-weight: 600; }
.period-chip.is-in { background: var(--tile); border-color: var(--text); }      /* 지시서 079: 구간 사이 연도 — 켜진 칩(진한 바탕)보다 약하게 */
.period-hint { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-note); }
.period-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modes-curve-chip .grid-minor { opacity: 0.5; }