/* =====================================================
   제안서 결과 페이지(#page2) — "블랙 헤더 + 아이보리 종이 제안서"
   화면(screen)에서만 적용한다. 인쇄(A4 2장)는 원본 그대로 — 색만 바꾸고 크기·줄바꿈은 건드리지 않는다.
   빨강은 상승 숫자 등 도형·숫자에 쓴다(상무님 2026-09-21 "빨강색도 써" 승인). 템플릿 톤은 블랙·골드·아이보리.
   ===================================================== */
@media screen {

:root { --cp-up: #E5484D; --cp-down: #4F8FD6; --paper: #FBF9F4; --paper2: #F4EFE2; --paper-line: #E7E0CE; }

/* 바깥은 블랙, 안쪽 제안서는 종이 */
body:has(#page2.active) {
  background:
    radial-gradient(900px 480px at 85% -8%, rgba(201,169,106,.12), transparent 60%),
    var(--cp-bg) !important;
}
#page2 .page2-main { position: relative; z-index: 1; }
#page2 .result-section, #page2 .p2-portfolio-wrap, #page2 .p2-sim-wrap {
  background: var(--paper) !important; border: 1px solid var(--paper-line) !important; border-radius: 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 60px rgba(0,0,0,.55) !important;
}

/* 상단 요약 카드 */
#page2 .pf-card { background: #fff !important; border: 1px solid var(--paper-line) !important; box-shadow: none !important; }
#page2 .pf-card.pf-amount-row {
  background: linear-gradient(135deg, #1A1810 0%, #0C0B09 100%) !important;
  border: 1px solid var(--cp-gold-dim) !important; box-shadow: 0 14px 34px rgba(0,0,0,.35) !important;
}
#page2 .pf-card.pf-amount-row * { color: #F4F2EC; }
#page2 .pf-card.pf-amount-row [class*="value"], #page2 .pf-card.pf-amount-row [class*="amount"] { color: var(--cp-gold2) !important; }
#page2 .pf-returns-grid { background: #fff !important; border: 1px solid var(--paper-line) !important; border-radius: 14px; overflow: hidden; }
#page2 .pf-rg-header { background: var(--paper2) !important; color: #5F5A4C !important; }
#page2 .pf-rg-cell--accent { background: linear-gradient(180deg, #F6EBD0, #F1E2B9) !important; }
#page2 .pf-sim-basis-card, #page2 .cross-fund-common-card { background: var(--paper2) !important; border: 1px solid var(--paper-line) !important; }

/* 비교표: 레벨UP | 모키적립식 */
#page2 .cross-header-banner { background: linear-gradient(135deg, #1A1810, #0C0B09) !important; color: var(--cp-gold2) !important; border: 1px solid var(--cp-gold-dim); }
#page2 .cross-header-banner * { color: inherit; }
#page2 th.cross-th-year { background: #14130F !important; color: #E9E4D6 !important; }
#page2 th.cross-th-lv { background: linear-gradient(180deg, #2A261B, #1A180F) !important; color: var(--cp-gold2) !important; border-bottom: 3px solid var(--cp-gold-dim) !important; }
#page2 th.cross-th-mk { background: linear-gradient(180deg, #DCC38A, #C9A96A) !important; color: #1A150A !important; border-bottom: 3px solid #8E7448 !important; }
#page2 th.cross-th-lv *, #page2 th.cross-th-mk * { color: inherit !important; }
#page2 td.cross-td-year { background: var(--paper2) !important; color: #3A362B !important; font-weight: 800; }
#page2 .cross-table-row { background: #fff !important; }
#page2 .cross-table-row td { border-color: var(--paper-line) !important; }
#page2 td.cross-td-mk.cross-td-win { background: linear-gradient(90deg, #FBF3DC, #F7EAC6) !important; }
#page2 td.cross-td-lv-7y, #page2 .cross-row-7y td { background: #F3ECD8 !important; box-shadow: inset 3px 0 0 var(--cp-gold) !important; }
#page2 .cross-7y-badge { background: #1A180F !important; color: var(--cp-gold2) !important; border: 1px solid var(--cp-gold-dim); }
#page2 .cross-summary-card { background: #fff !important; border: 1px solid var(--paper-line) !important; }
#page2 .cross-winner-box { background: linear-gradient(135deg, #1A1810, #0C0B09) !important; color: var(--cp-gold2) !important; border: 1px solid var(--cp-gold-dim); }
#page2 .cross-winner-box * { color: inherit; }

/* 상승은 빨강, 하락은 파랑 (도형·숫자) */
#page2 .pos, #page2 [class*="gain"].pos, #page2 [class*="-up"], #page2 [class*="plus"] { color: var(--cp-up) !important; }
#page2 .neg, #page2 [class*="-down"], #page2 [class*="minus"] { color: var(--cp-down) !important; }

/* 하단 증권사 안내 박스 */
#page2 .securities-box { background: linear-gradient(135deg, #1A1810, #0C0B09) !important; border: 1px solid var(--cp-gold-dim) !important; color: #E9E4D6 !important; }
#page2 .securities-box * { color: inherit; }
#page2 .page2-footer { color: var(--cp-ink3) !important; background: transparent !important; }

/* 화면 상단 줄: 파랑 → 금색 */
body::before { background: linear-gradient(90deg, #8E7448, #E6CC92, #8E7448) !important; }

/* 토스트(안내 말풍선) : 블랙·골드 */
.preset-toast, [class*="toast"] { background: rgba(18,18,20,.94) !important; border: 1px solid var(--cp-gold-dim) !important; color: var(--cp-gold2) !important; box-shadow: 0 14px 40px rgba(0,0,0,.6) !important; }

/* 인쇄·뒤로 버튼 */
#page2 .print-btn { background: linear-gradient(135deg, var(--cp-gold2), var(--cp-gold)) !important; color: #14100A !important; border: 0 !important; font-weight: 900; }
#page2 .back-btn, #page2 .logout-btn, #page2 .login-user-badge { background: var(--cp-raise) !important; border: 1px solid var(--cp-line) !important; color: var(--cp-ink) !important; }

/* 1페이지에서 넘어온 떠 있는 합계 배지는 제안서에서 숨긴다 */
body:has(#page2.active) #ratioFloatBadge { display: none !important; }
#ratioFloatBadge { background: var(--cp-surface) !important; border: 1px solid var(--cp-gold-dim) !important; color: var(--cp-gold2) !important; box-shadow: 0 10px 30px rgba(0,0,0,.5) !important; }

/* ── 1페이지 숫자도 상승 빨강 / 하락 파랑으로 (지침: 상승 숫자 빨강) ── */
#page1 .ret-value, #page1 .yield-value, #page1 .avg-return-value,
#page1 .ai-ret-value, #page1 .ai-dc-val.final, #page1 .ai-dc-val.pos, #page1 .ai-sim-gain, #page1 .ai-fund-ret1y.pos { color: var(--cp-up) !important; }
#page1 .ai-ret-value.neg, #page1 .ai-dc-val.neg, #page1 .ai-fund-ret1y.neg { color: var(--cp-down) !important; }

/* ══════ 개편: ① 결론 카드 → ② 공통 포트폴리오 → ③ 연도별 비교표 ══════ */
#page2 .cx-hero { background: linear-gradient(160deg, #1A1810 0%, #0C0B09 100%); border: 1px solid var(--cp-gold-dim); border-radius: 18px; padding: 20px 22px 18px; margin-bottom: 16px;
  box-shadow: 0 20px 44px rgba(0,0,0,.35); color: #F4F2EC; }
#page2 .cx-hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
#page2 .cx-eyebrow { font-size: 14px; font-weight: 900; letter-spacing: -.02em; color: var(--cp-gold2); }
#page2 .cx-eyebrow i { margin-right: 6px; color: var(--cp-gold); }
#page2 .cx-sub { font-size: 11.5px; color: #9C988C; }
#page2 .cx-hero-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
#page2 .cx-opt { background: #17150F; border: 1px solid #2E2A1E; border-radius: 14px; padding: 14px 16px; text-align: center; }
#page2 .cx-opt.win { border-color: var(--cp-gold); background: linear-gradient(180deg, #221E12, #17150F); box-shadow: 0 0 0 1px rgba(201,169,106,.25), 0 10px 30px rgba(201,169,106,.10); }
#page2 .cx-opt-name { font-size: 13px; font-weight: 800; color: #CFCABA; margin-bottom: 6px; }
#page2 .cx-opt-name i { color: var(--cp-gold); margin-right: 4px; }
#page2 .cx-opt.win .cx-opt-name, #page2 .cx-opt.win .cx-opt-name i { color: var(--cp-gold2); }
#page2 .cx-opt-fv { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; color: #F4F2EC; }
#page2 .cx-opt.win .cx-opt-fv { color: var(--cp-gold2); }
#page2 .cx-opt-fv em, #page2 .cross-td-fv em { font-style: normal; font-size: .5em; font-weight: 700; margin-left: 2px; opacity: .8; }
#page2 .cx-opt-gain { margin-top: 6px; font-size: 12px; color: #A9A597; }
#page2 .cx-opt-gain .pos { font-weight: 800; }
#page2 .cx-vs { align-self: center; font-size: 12px; font-weight: 900; color: var(--cp-gold-dim); letter-spacing: .1em; }
#page2 .cx-verdict { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #3A3526; text-align: center; font-size: 15px; color: #E9E4D6; }
#page2 .cx-verdict b { color: #fff; }
#page2 .cx-verdict .cx-diff { color: var(--cp-gold2); font-size: 22px; font-weight: 900; }
#page2 .cx-verdict small { display: block; margin-top: 6px; font-size: 10.5px; color: #8C8878; }

#page2 .cross-fund-common-card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 14px !important; margin-bottom: 14px; border-radius: 12px; }
#page2 .cx-chips-title { font-size: 12px; font-weight: 800; color: #5F5A4C; margin-right: 4px; }
#page2 .cx-chips-title i { color: var(--cp-gold-dim); margin-right: 4px; }
#page2 .cx-chip { background: #fff; border: 1px solid var(--paper-line); color: #3A362B; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; }
#page2 .cx-chip b { color: #14130F; }

#page2 .cross-main-table { width: 100%; border-collapse: collapse; }
#page2 .cx-th-sub { display: block; font-size: 10px; font-weight: 400; opacity: .8; margin-top: 2px; }
#page2 .cx-exp { font-size: 10.5px; color: #6B6656; padding: 5px 10px; background: var(--paper2); }
#page2 .cross-table-row td { padding: 12px 14px !important; vertical-align: middle; }
#page2 .cross-td-fv { font-size: 23px; font-weight: 900; letter-spacing: -.03em; color: #14130F; line-height: 1.15; }
#page2 .cross-td-fv .cross-win-badge { color: #C9A96A; font-size: .6em; margin-left: 4px; }
#page2 .cross-td-gain { margin-top: 4px; font-size: 12px; color: #6B6656 !important; }
#page2 .cross-td-gain .pos { font-weight: 800; }
#page2 .cross-td-rate { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: rgba(229,72,77,.10); font-weight: 800; font-size: 11.5px; }
#page2 .cross-td-rate.neg { background: rgba(79,143,214,.12); }
#page2 td.cross-td-year { text-align: center; font-size: 15px; }
#page2 .cross-td-principal { margin-top: 3px; font-size: 9.5px; font-weight: 500; color: #8C8878; white-space: nowrap; }
#page2 .cross-yr7 { font-size: 15px; font-weight: 900; }
#page2 .cross-yr7-tag { margin-top: 2px; font-size: 9.5px; font-weight: 700; color: #8E7448; }

/* 왼쪽 도넛은 작게 — 정보량(다섯 펀드 비율)에 맞춘 크기 */
#page2 .donut-canvas-wrap { max-width: 170px !important; max-height: 170px !important; margin: 4px auto 6px !important; }

}

/* ══════ 제안서 상단 제목 꾸미기 (2026-09-21) — 화면용. 인쇄는 아래 print 블록에서 단색으로 ══════ */
@media screen {
  #page2 .proposal-main-title { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 9px; font-size: 25px; font-weight: 900; letter-spacing: -.02em; line-height: 1.25; }
  #page2 .proposal-main-title .pt-name { color: #F1D68F; text-shadow: 0 0 18px rgba(230,204,146,.5); }
  #page2 .proposal-main-title .pt-nim { color: #D9D5C6; font-weight: 700; font-size: .78em; margin-right: 4px; }
  #page2 .proposal-main-title .pt-etf { color: #E6CC92; letter-spacing: .06em; text-shadow: 0 0 16px rgba(230,204,146,.5); }
  #page2 .proposal-main-title .pt-word {
    background: linear-gradient(100deg, rgba(255,243,201,0) 40%, #FFE9A8 50%, rgba(255,243,201,0) 60%) 0 0 / 260% 100% no-repeat, linear-gradient(#F4F2EC, #F4F2EC);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ltShine 5.5s ease-in-out infinite; }
  #page2 .proposal-main-title .pt-ai { padding: 1px 10px 2px; border-radius: 9px; font-size: .82em; letter-spacing: .04em; color: #14100A;
    background: linear-gradient(135deg, #F3DDA0, #C9A96A 55%, #A8813A);
    box-shadow: 0 0 0 1px rgba(255,240,200,.5) inset, 0 0 22px rgba(230,204,146,.5), 0 3px 10px rgba(0,0,0,.45); }
  #page2 .proposal-sub-title { color: #B39555 !important; letter-spacing: .06em; font-weight: 600; margin-top: 4px; }
}
@keyframes ltShine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@media print {
  #page2 .proposal-main-title { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; }
  #page2 .proposal-main-title .pt-name, #page2 .proposal-main-title .pt-etf { color: #E6CC92 !important; }
  #page2 .proposal-main-title .pt-nim, #page2 .proposal-main-title .pt-word { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; animation: none !important; }
  #page2 .proposal-main-title .pt-nim { font-size: .8em; }
  #page2 .proposal-main-title .pt-ai { padding: 0 6px; border-radius: 5px; color: #14100A !important; background: #C9A96A !important; }
}