/* =====================================================================
   분석 보고서 공통 디자인 시스템  (네이비 + 골드 기관 리서치 스타일)
   - BOTZ / 옵티머스·FigureAI / 우주섹터 ETF 보고서 + index 포털 공통 스타일
   - 토큰·컴포넌트 규칙은 디자인_가이드라인.md 기준
   ===================================================================== */

/* ---------- 1. 컬러 토큰 ---------- */
:root{
  --navy:#0b1f3a; --navy2:#122c52; --ink:#1a2233; --muted:#4a5668;
  --gold:#c8a24a; --gold2:#e7c878; --line:#e4e8ef; --bg:#f6f7fb;
  --green:#1f8a5b; --red:#c0392b; --blue:#1f6feb; --card:#ffffff;
  --bull:#1f8a5b; --base:#b8862b; --bear:#c0392b;
  /* 밝은 배경 위 텍스트 — WCAG AA 4.5:1 (본문·12px 라벨) */
  --gold-text:#785f0f; --green-text:#145a38; --red-text:#8f271c;
  --amber-text:#6d5208; --blue-text:#1550b8;
  /* 주제별 강조색 (테슬라 / Figure AI / 퍼플) */
  --tesla:#e23434; --figure:#6b3df0; --purple:#6b3df0;
}

/* ---------- 2. 기본 ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Pretendard','Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px;}
h1,h2,h3,h4{font-family:'Pretendard','Noto Sans KR',serif;line-height:1.3;color:var(--navy);}
a{color:var(--blue);text-decoration:none;}

/* ---------- 3. 커버 ---------- */
.cover{background:linear-gradient(135deg,#0b1f3a 0%,#12345e 55%,#1c4a82 100%);color:#fff;padding:64px 0 54px;position:relative;overflow:hidden;}
.cover:after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,162,74,.30),transparent 65%);}
.cover .wrap{position:relative;z-index:2;}
.eyebrow{letter-spacing:.28em;text-transform:uppercase;font-size:12px;color:var(--gold2);font-weight:700;margin-bottom:14px;}
.cover h1{color:#fff;font-size:40px;margin:0 0 10px;font-weight:800;letter-spacing:-.5px;}
.cover .sub{font-size:18px;color:#cdddf2;max-width:780px;margin:0 0 26px;}
.cover .meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13.5px;color:#aebfd6;border-top:1px solid rgba(255,255,255,.16);padding-top:18px;margin-top:24px;}
.cover .meta b{color:#fff;font-weight:600;}
.tickerbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.chip{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#dfeaf7;
  padding:5px 12px;border-radius:30px;font-size:12.5px;font-weight:600;}
.chip b{color:var(--gold2);}

/* ---------- 4. 섹션 헤더 ---------- */
section{padding:46px 0;border-bottom:1px solid var(--line);}
.kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--gold-text);
  text-transform:uppercase;margin-bottom:10px;}
h2.sec{font-size:27px;margin:0 0 6px;font-weight:800;position:relative;padding-left:16px;}
h2.sec:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:3px;
  background:linear-gradient(var(--gold),var(--gold2));}
.lead{color:var(--muted);font-size:16.5px;margin:6px 0 26px;max-width:880px;}
h3.sub{font-size:19px;margin:30px 0 12px;font-weight:700;}
p{margin:0 0 14px;}
.small{font-size:13px;color:var(--muted);}

/* ---------- 5. 목차 ---------- */
.toc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.toc a{display:block;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:14px;font-weight:600;color:var(--navy);transition:.15s;}
.toc a:hover{border-color:var(--gold);box-shadow:0 4px 12px rgba(200,162,74,.18);transform:translateY(-1px);}
.toc a b{color:var(--gold-text);font-weight:800;margin-right:6px;}

/* ---------- 6. 등급 / 요약 박스 ---------- */
.rating{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(11,31,58,.07);margin:0 0 8px;}
.rating>div{padding:20px 22px;border-right:1px solid var(--line);}
.rating>div:last-child{border-right:none;}
.rating .lab{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:6px;}
.rating .big{font-size:26px;font-weight:800;color:var(--navy);}
.rating .big.gold{color:var(--gold-text);}
.rating .note{font-size:12.5px;color:var(--muted);margin-top:3px;}

/* ---------- 7. 그리드 / 카드 / 스탯 ---------- */
.grid{display:grid;gap:16px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 6px 18px rgba(11,31,58,.05);}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;}
.stat .v{font-size:26px;font-weight:800;color:var(--navy);line-height:1.1;}
.stat .v.g{color:var(--gold-text);}
.stat .k{font-size:12.5px;color:var(--muted);margin-top:6px;font-weight:600;}

/* ---------- 8. 표 ---------- */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);font-size:14px;}
thead th{background:var(--navy);color:#fff;text-align:left;padding:11px 12px;font-weight:600;font-size:13px;}
tbody td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top;}
tbody tr:nth-child(even){background:#fafbfd;}
tbody tr:hover{background:#f0f5ff;}
.w-cell{font-weight:800;color:var(--navy);}
.bar-mini{height:7px;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold2));}
.flag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;background:#eef2f8;color:#3a4a63;white-space:nowrap;}

/* ---------- 9. 비중 / 배분 막대 ---------- */
.alloc{display:flex;flex-direction:column;gap:11px;}
.alloc .row{display:grid;grid-template-columns:150px 1fr 52px;align-items:center;gap:12px;font-size:14px;}
.alloc .track{height:14px;background:#eef1f6;border-radius:8px;overflow:hidden;}
.alloc .fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#13345e,#2f6db5);}
.alloc .pct{text-align:right;font-weight:700;color:var(--navy);font-size:13px;}

/* ---------- 10. 종목 / 기업 카드 ---------- */
.co{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;box-shadow:0 6px 18px rgba(11,31,58,.05);margin-bottom:16px;}
.co .hd{display:flex;align-items:center;gap:12px;padding:15px 18px;background:linear-gradient(90deg,#0e2746,#163a66);color:#fff;}
.co .hd .nm{font-weight:800;font-size:16.5px;}
.co .hd .tk{font-size:12px;color:#bcd0ea;font-weight:600;}
.co .hd .wt{margin-left:auto;text-align:right;}
.co .hd .wt b{font-size:18px;color:var(--gold2);}
.co .hd .wt span{display:block;font-size:11px;color:#bcd0ea;}
.co .bd{padding:16px 18px;}
.co .bd p{margin:0 0 10px;font-size:14.5px;}
.co .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}

/* ---------- 11. ETF 카드 ---------- */
.etf{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(11,31,58,.05);margin-bottom:16px;}
.etf .hd{display:flex;align-items:center;gap:12px;padding:15px 18px;background:linear-gradient(90deg,#0e2746,#1d3f6e);color:#fff;}
.etf .hd .tkr{font-size:22px;font-weight:800;letter-spacing:.5px;}
.etf .hd .nm{font-size:12.5px;color:#bcd0ea;}
.etf .hd .score{margin-left:auto;text-align:right;}
.etf .hd .score b{font-size:15px;color:var(--gold2);}
.etf .hd .score span{display:block;font-size:10.5px;color:#bcd0ea;}
.etf .bd{padding:16px 18px;}
.etf .bd p{font-size:14px;margin:0 0 10px;}
.etf .metrics{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}

/* ---------- 12. 태그 / 알약 / 판정 ---------- */
.tag{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;background:#f1f4f9;color:#34507a;}
.tag.pos{background:#e6f4ec;color:var(--green-text);}
.tag.neg{background:#fbecea;color:var(--red-text);}
.tag.neu{background:#fdf6e7;color:var(--amber-text);}
.tag.purple{background:#f0eafe;color:var(--purple);}
.pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:8px;background:#f1f4f9;color:#34507a;}
.pill.t{background:#fdeaea;color:var(--tesla);}
.pill.f{background:#f0eafe;color:var(--figure);}
.pill.pos{background:#e6f4ec;color:var(--green-text);}
.verdict{font-size:13.5px;border-top:1px dashed var(--line);padding-top:10px;margin-top:4px;}
.verdict b{color:var(--navy);}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#fff;font-weight:800;font-size:13px;}

/* ---------- 13. 콜아웃 ---------- */
.callout{border-left:4px solid var(--gold);background:#fffaf0;border-radius:0 12px 12px 0;padding:16px 20px;margin:18px 0;}
.callout.blue{border-color:var(--blue);background:#f0f6ff;}
.callout.red{border-color:var(--red);background:#fdf1ef;}
.callout.purple{border-color:var(--figure);background:#f4f0fe;}
.callout h3.callout-title,
.callout h4{margin:0 0 6px;font-size:15.5px;font-weight:700;color:var(--navy);}
.callout h3.callout-title.lg{font-size:17px;}
.callout p{margin:0;font-size:14px;color:var(--ink);}
.card h3.card-title{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--navy);}
.card h3.card-title.danger{color:var(--red-text);}
.chartbox .bar-label{font-size:12px;font-weight:800;color:var(--navy);margin-bottom:4px;}
.chartbox .bar-label.hl{color:var(--gold-text);font-size:13px;}
.chartbox .axis-label{font-size:12px;color:var(--muted);font-weight:700;}

/* ---------- 14. 시나리오 카드 ---------- */
.scen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.scen .s{border-radius:14px;border:1px solid var(--line);overflow:hidden;background:#fff;}
.scen .s .top{padding:14px 16px;color:#fff;font-weight:800;display:flex;justify-content:space-between;align-items:center;}
.scen .s.bull .top{background:linear-gradient(90deg,#157046,#1f9c63);}
.scen .s.base .top{background:linear-gradient(90deg,#9a7414,#c79b34);}
.scen .s.bear .top{background:linear-gradient(90deg,#9c2c20,#c0392b);}
.scen .s .top .p{font-size:13px;background:rgba(255,255,255,.2);padding:3px 9px;border-radius:20px;}
.scen .s .bd{padding:14px 16px;font-size:13.5px;}
.scen .s .bd ul{margin:8px 0 0;padding-left:18px;}
.scen .s .bd li{margin-bottom:6px;}
.scen .s .prob{font-size:12px;color:var(--muted);margin-top:10px;font-weight:700;}

/* ---------- 15. 타임라인 ---------- */
.tl{position:relative;margin:10px 0 0;padding-left:22px;}
.tl:before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line);}
.tl .ev{position:relative;margin-bottom:16px;}
.tl .ev:before{content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 0 0 2px var(--gold);}
.tl .yr{font-weight:800;color:var(--navy);font-size:14.5px;}
.tl .tx{font-size:13.5px;color:#3a4658;}

/* ---------- 16. 차트 / 비교 막대 / VS ---------- */
.chartbox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 6px 18px rgba(11,31,58,.05);}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;margin-top:8px;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.dot{width:11px;height:11px;border-radius:3px;display:inline-block;}
/* 가로 비교 막대 */
.bars{display:flex;flex-direction:column;gap:12px;}
.bars .row{display:grid;grid-template-columns:96px 1fr 46px;align-items:center;gap:12px;font-size:13.5px;}
.bars .track{height:22px;background:#eef1f6;border-radius:6px;overflow:hidden;}
.bars .fill{height:100%;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:11px;font-weight:700;}
.bars .pct{text-align:right;font-weight:800;color:var(--navy);}
/* VS 비교 */
.vs{display:grid;grid-template-columns:1fr 60px 1fr;gap:0;align-items:stretch;margin:14px 0;}
.vs .col{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;}
.vs .col .top{padding:12px 16px;color:#fff;font-weight:800;font-size:16px;}
.vs .col.t .top{background:linear-gradient(90deg,#b81e1e,#e23434);}
.vs .col.f .top{background:linear-gradient(90deg,#4a23b0,#6b3df0);}
.vs .col .row{display:flex;justify-content:space-between;gap:10px;padding:9px 16px;border-top:1px solid var(--line);font-size:13px;}
.vs .col .row span:first-child{color:var(--muted);}
.vs .col .row span:last-child{font-weight:700;text-align:right;}
.vs .mid{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted);font-size:14px;}

/* ---------- 17. 키-값 행 / 노트 (펀더멘털 등) ---------- */
.kv{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:7px 0;border-top:1px solid var(--line);}
.kv:first-of-type{border-top:none;}
.kv span:last-child{font-weight:700;color:var(--navy);text-align:right;}
.note{margin-top:12px;font-size:13px;padding:10px 13px;border-radius:10px;background:#f1f4f9;color:#34507a;}
.note.good{background:#e6f4ec;color:var(--green-text);}
.note.warn{background:#fbecea;color:var(--red-text);}
.pos{color:var(--green-text);font-weight:700;}
.neg{color:var(--red-text);font-weight:700;}
.text-gold{color:var(--gold-text);}
.text-green{color:var(--green-text);}
.text-red{color:var(--red-text);}
.text-blue{color:var(--blue-text);}
h3.sub.accent-gold{color:var(--gold-text);}
h3.sub.accent-green{color:var(--green-text);}
h3.sub.accent-blue{color:var(--blue-text);}

/* ---------- 18. 기타: 리스트 / 형광펜 / 출처 / 푸터 / 면책 ---------- */
ul.clean{padding-left:20px;margin:0 0 14px;}
ul.clean li{margin-bottom:8px;}
.hl{background:linear-gradient(transparent 62%,rgba(200,162,74,.35) 0);font-weight:700;}
.hl.t{background:linear-gradient(transparent 62%,rgba(226,52,52,.22) 0);}
.hl.f{background:linear-gradient(transparent 62%,rgba(107,61,240,.20) 0);}
.src{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:8px;}
.footer{background:var(--navy);color:#aebfd6;padding:30px 0;font-size:12.5px;}
.footer b{color:#fff;}
.disc{background:#fff3f1;border:1px solid #f3cfc9;border-radius:12px;padding:16px 18px;font-size:12.5px;color:#7a4039;margin-top:18px;}

/* ---------- 19. 상단 탐색 (전 페이지) ---------- */
.site-nav{background:#fff;border-bottom:1px solid var(--line);padding:10px 0;position:sticky;top:0;z-index:100;
  box-shadow:0 2px 10px rgba(11,31,58,.06);}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:40px;}
.site-nav .nav-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
/* 홈·뒤로가기 동일 박스 높이(8px 14px + border) — index nav가 낮아지지 않도록 */
.site-nav-home{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;line-height:1.4;
  color:var(--navy);padding:8px 14px;border:1px solid transparent;border-radius:8px;box-sizing:border-box;transition:.15s;}
.site-nav-home:hover{color:var(--gold-text);}
.site-nav-home .ico{font-size:15px;line-height:1;color:var(--gold-text);}
.site-nav-back{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13.5px;font-weight:700;
  line-height:1.4;color:var(--navy);padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  box-sizing:border-box;cursor:pointer;transition:.15s;}
.site-nav-back:hover{border-color:var(--gold);background:#fffaf0;color:var(--gold-text);}
.site-nav-back .ico{font-size:14px;line-height:1;}
/* 포털 현재 위치 — 보고서 .site-nav-home 링크와 동일 색·박스, 클릭만 비활성 */
.site-nav-home[aria-current="page"],
.site-nav-home.site-nav-current{cursor:default;pointer-events:none;}
.site-nav-home[aria-current="page"]:hover,
.site-nav-home.site-nav-current:hover{color:var(--navy);}

/* ---------- 20. 포털 (index) ---------- */
.portal-notice{background:#fffaf0;border:1px solid #e8d4a8;border-left:5px solid var(--gold);border-radius:14px;
  padding:20px 22px;margin:0 0 28px;box-shadow:0 6px 18px rgba(200,162,74,.12);}
.portal-notice-title{margin:0 0 10px;font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
.portal-notice p{margin:0;font-size:15px;line-height:1.75;color:var(--ink);}
.portal-notice b{color:var(--navy);}
.portal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(11,31,58,.05);transition:.18s;color:inherit;}
.pcard:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,31,58,.13);border-color:var(--gold);}
.pcard .ribbon{height:6px;background:linear-gradient(90deg,var(--gold),var(--gold2));}
.pcard.t1 .ribbon{background:linear-gradient(90deg,#13345e,#2f6db5);}
.pcard.t2 .ribbon{background:linear-gradient(90deg,#b81e1e,#6b3df0);}
.pcard.t3 .ribbon{background:linear-gradient(90deg,#1f6feb,#9b6bff);}
.pcard .pbody{padding:24px 22px 20px;display:flex;flex-direction:column;flex:1;}
.pcard .pnum{position:absolute;right:18px;top:20px;font-size:40px;font-weight:800;color:#eef1f6;line-height:1;}
.pcard .peyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px;}
.pcard h3{font-size:19px;margin:0 0 10px;color:var(--navy);max-width:80%;}
.pcard p{font-size:13.5px;color:var(--muted);margin:0 0 16px;flex:1;}
.pcard .ptags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.pcard .go{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px;color:var(--navy);}
.pcard:hover .go{color:var(--gold-text);}
.pcard .go .arrow{transition:.18s;}
.pcard:hover .go .arrow{transform:translateX(4px);}

/* ---------- 21. 반응형 ---------- */
@media(max-width:860px){
  .g2,.g3,.g4,.scen,.toc,.vs,.portal{grid-template-columns:1fr;}
  .rating{grid-template-columns:1fr;}
  .rating>div{border-right:none;border-bottom:1px solid var(--line);}
  .rating>div:last-child{border-bottom:none;}
  .cover h1{font-size:30px;}
  .alloc .row{grid-template-columns:110px 1fr 46px;}
  .bars .row{grid-template-columns:80px 1fr 42px;}
  .vs .mid{padding:6px;}
}