@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
/* =====================================================
   (주)컨설팅을 더하다 홈페이지(consultingplus.co.kr) 톤 맞춤 레이어
   블랙 + 골드 + Noto Sans KR + 컨트롤타워 홀로그램 링
   기준: consulting-plus-ai/docs/homepage/site.css 의 변수값
   화면(screen)에만 적용한다. 인쇄·제안서 2페이지(#page2)는 흰 종이 그대로 둔다.
   빨강은 상승 숫자 등 도형·숫자 강조에만 쓴다(템플릿 톤은 블랙·골드).
   ===================================================== */
@media screen {

:root {
  /* 밝은 화면(2026-09-21 "너무 어두워 잘 안 보인다" 의견 반영): 바탕은 아이보리·흰색, 글씨는 진한 먹색, 포인트는 금색 */
  --cp-bg:#F3F0E8; --cp-bg2:#FFFFFF; --cp-surface:#FFFFFF; --cp-raise:#F7F3E8; --cp-line:#E0D8C4; --cp-hair:#ECE6D6;
  --cp-ink:#1B1A16; --cp-ink2:#4A463B; --cp-ink3:#7B7666;
  --cp-gold:#C9A96A; --cp-gold2:#E6CC92; --cp-gold-dim:#C9AE73; --cp-goldbg:rgba(176,138,62,.10);
  --cp-goldtx:#8A6516;   /* 밝은 바탕 위 금색 글씨(대비 확보) */
}
/* 검은 헤더 안에서는 예전 어두운 팔레트 값으로 되돌린다 */
#page1 .page-header, #page2 .page-header, .header-inner {
  --cp-ink:#F4F2EC; --cp-ink2:#B7B4AB; --cp-ink3:#8C8878; --cp-raise:#1F1E1A; --cp-line:#3A382F; --cp-surface:#141310; --cp-bg2:#0C0C0E;
  --cp-gold-dim:#8E7448; --cp-goldtx:#E6CC92; --cp-goldbg:rgba(201,169,106,.10);
}

/* ── 글꼴: 홈페이지와 같은 Noto Sans KR ── */
body, button, input, select, textarea {
  font-family: "Noto Sans KR", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Pretendard", sans-serif !important;
  word-break: keep-all;
}

/* ── 1페이지(입력 화면) + 로그인 : 블랙 ── */
body:has(#page1.active) {
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(201,169,106,.10), transparent 60%),
    radial-gradient(700px 480px at 0% 100%, rgba(201,169,106,.05), transparent 60%),
    var(--cp-bg) !important;
  color: var(--cp-ink);
}

#page1 {
  --card: var(--cp-surface);
  --bg: var(--cp-bg);
  --white: var(--cp-surface);
  --text: var(--cp-ink);
  --muted: var(--cp-ink3);
  --border: var(--cp-line);
  --primary: var(--cp-goldtx);
  --primary-light: var(--cp-gold);
  --accent: var(--cp-gold);
  --shadow: 0 1px 2px rgba(70,55,20,.06), 0 10px 28px rgba(70,55,20,.10);
  --shadow-lg: 0 2px 4px rgba(70,55,20,.08), 0 18px 46px rgba(70,55,20,.14);
  position: relative;
  color: var(--cp-ink);
}

/* 헤더 */
#page1 .page-header,
#page2 .page-header {
  background: linear-gradient(180deg, #0C0C0E 0%, #070708 100%) !important;
  border-bottom: 1px solid var(--cp-gold-dim) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.6) !important;
}
#page1 .page-header::before,
#page2 .page-header::before { background: linear-gradient(90deg, transparent, var(--cp-gold), transparent) !important; }
#page1 .header-inner .logo-icon { color: var(--cp-goldtx) !important; }
#page1 .logo-main, #page1 .logo-main-title { color: var(--cp-ink) !important; font-weight: 900 !important; letter-spacing: -.03em; }
#page1 .logo-author { color: var(--cp-goldtx) !important; }

/* 카드 : 반투명 블랙 + 금색 헤어라인 (뒤의 홀로그램이 은은히 비친다) */
#page1 .step-card,
#page1 .preview-card {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid var(--cp-line) !important;
  border-left: 2px solid var(--cp-gold) !important;
  color: var(--cp-ink);
  backdrop-filter: blur(6px);
}
#page1 .step-header { border-bottom: 1px solid var(--cp-hair) !important; }
#page1 .step-header .step-num {
  background: var(--cp-goldbg) !important; color: var(--cp-goldtx) !important;
  border: 1px solid var(--cp-gold-dim) !important;
}
#page1 .step-title { color: var(--cp-ink) !important; font-weight: 700; }
#page1 .step-header .propose-date-inline { background: var(--cp-raise) !important; color: var(--cp-ink3) !important; }

/* 라벨·본문 글자 */
#page1 label, #page1 .form-label, #page1 .field-label { color: var(--cp-ink2) !important; }
#page1 h1, #page1 h2, #page1 h3, #page1 h4 { color: var(--cp-ink); }

/* 입력칸 */
#page1 input[type="text"], #page1 input[type="number"], #page1 input[type="tel"], #page1 input[type="date"],
#page1 select, #page1 textarea, #page1 .amount-input-wrap input {
  background: var(--cp-bg2) !important;
  border: 1px solid var(--cp-line) !important;
  color: var(--cp-ink) !important;
}
#page1 input::placeholder, #page1 textarea::placeholder { color: var(--cp-ink3) !important; }
#page1 input:focus, #page1 select:focus, #page1 textarea:focus {
  border-color: var(--cp-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,169,106,.16) !important;
  outline: none;
}

/* 버튼류(금액 단축·유형 선택 등) */
#page1 .amount-shortcuts button, #page1 .quick-btn, #page1 .preset-btn, #page1 .type-btn, #page1 .reset-btn,
#page1 .portfolio-preset-btn, #page1 .step-card button:not(.generate-btn):not(.pw-login-submit-btn) {
  background: var(--cp-raise);
  border: 1px solid var(--cp-line);
  color: var(--cp-ink2);
}
#page1 .amount-shortcuts button:hover, #page1 .quick-btn:hover, #page1 .preset-btn:hover, #page1 .type-btn:hover,
#page1 .step-card button:not(.generate-btn):hover {
  border-color: var(--cp-gold);
  color: var(--cp-goldtx);
  background: var(--cp-goldbg);
}
#page1 .step-card button.active, #page1 .step-card button.selected {
  border-color: var(--cp-gold) !important; color: var(--cp-goldtx) !important; background: var(--cp-goldbg) !important;
}

/* 제안서 생성 버튼 : 홈페이지 CTA 와 같은 금색 */
#page1 .generate-btn {
  background: linear-gradient(135deg, var(--cp-gold2), var(--cp-gold)) !important;
  color: #14100A !important;
  font-weight: 900;
  box-shadow: 0 14px 40px rgba(201,169,106,.28), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* 예상수익률 요약 타일 */
#page1 .expected-return-card .ret-box, #page1 .expected-return-card .return-item, #page1 .return-tile {
  background: var(--cp-raise) !important; border: 1px solid var(--cp-line) !important; color: var(--cp-ink) !important;
}
#page1 .ret-value, #page1 .yield-value, #page1 .avg-return-value { color: var(--cp-goldtx) !important; }

/* 로그인 화면 */
.pw-lock-overlay, #pwLockOverlay {
  background:
    radial-gradient(800px 480px at 50% 42%, rgba(201,169,106,.14), transparent 62%),
    var(--cp-bg) !important;
}
.pw-lock-box {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid var(--cp-gold-dim) !important;
  box-shadow: 0 24px 60px rgba(70,55,20,.16), 0 0 0 1px rgba(201,169,106,.25) !important;
  color: var(--cp-ink);
}
.pw-login-submit-btn {
  background: linear-gradient(135deg, var(--cp-gold2), var(--cp-gold)) !important;
  color: #14100A !important; box-shadow: 0 12px 30px rgba(201,169,106,.28) !important;
}
.pw-signup-link { border: 1px dashed var(--cp-gold-dim) !important; }
.pw-signup-link b, .pw-signup-link strong { color: var(--cp-goldtx) !important; }

/* 금액 단축·유형 선택·동시체크 탭 (원본 클래스명) */
#page1 .amt-btn, #page1 .preset-btn, #page1 .etab {
  background: var(--cp-raise) !important; border: 1px solid var(--cp-line) !important; color: var(--cp-ink2) !important;
  box-shadow: none !important;
}
#page1 .amt-btn:hover, #page1 .preset-btn:hover, #page1 .etab:hover {
  border-color: var(--cp-gold) !important; color: var(--cp-goldtx) !important; background: var(--cp-goldbg) !important;
}
#page1 .amt-btn.active, #page1 .preset-btn.active, #page1 .etab.active, #page1 .etab:has(input:checked) {
  border-color: var(--cp-gold) !important; color: var(--cp-goldtx) !important; background: var(--cp-goldbg) !important;
}
#page1 .etab * { color: inherit; }
#page1 .amt-btn *, #page1 .preset-btn * { color: inherit; }

/* 로그인 오버레이는 뒤의 홀로그램이 비치도록 반투명 */
.pw-lock-overlay, #pwLockOverlay {
  background: radial-gradient(800px 480px at 50% 42%, rgba(201,169,106,.10), transparent 62%), rgba(244,241,233,.90) !important;
  backdrop-filter: blur(2px);
}
.cp-holo { opacity: .6; }

/* ── 컨트롤타워 홀로그램 (홈페이지 메인과 같은 링·노드·스포크) ── */
.cp-holo {
  position: fixed; z-index: 0; pointer-events: none;
  right: -14vmin; top: 50%; transform: translateY(-50%);
  width: 118vmin; height: 118vmin; max-width: 1100px; max-height: 1100px;
  opacity: .5; display: none;
}
body:has(#page1.active) .cp-holo { display: block; }
body:has(.pw-lock-overlay:not(.pw-hidden):not([style*="display: none"])) .cp-holo { display: block; }
.cp-holo svg { width: 100%; height: 100%; overflow: visible; }
.cp-holo .ring { fill: none; stroke: var(--cp-line); stroke-width: 1; }
.cp-holo .ring.g { stroke: var(--cp-gold-dim); stroke-dasharray: 3 7; opacity: .7; }
.cp-holo .ring.slow { stroke: var(--cp-gold-dim); stroke-dasharray: 2 10; opacity: .5; animation: cpSpin 140s linear infinite reverse; transform-origin: 300px 300px; }
.cp-holo .spoke { stroke: var(--cp-gold-dim); stroke-width: 1.2; opacity: .5; }
.cp-holo .spoke.flow { stroke: var(--cp-gold2); opacity: .8; stroke-width: 1.5; stroke-dasharray: 3 14; animation: cpFlow 1.4s linear infinite; }
.cp-holo .node { fill: #FFFFFF; stroke: var(--cp-line); stroke-width: 1.4; }
.cp-holo .node.g { stroke: var(--cp-gold); }
.cp-holo .core { fill: #0E0D0B; stroke: var(--cp-gold); stroke-width: 2; filter: drop-shadow(0 0 18px rgba(201,169,106,.55)); }
.cp-holo .core-ring { fill: none; stroke: var(--cp-gold-dim); stroke-dasharray: 6 6; animation: cpSpin 30s linear infinite; transform-origin: 300px 300px; }
.cp-holo .halo { fill: rgba(201,169,106,.10); animation: cpHalo 4s ease-in-out infinite; transform-origin: 300px 300px; }
.cp-holo .orbit { animation: cpSpin 36s linear infinite; transform-origin: 300px 300px; }
.cp-holo .pk { fill: var(--cp-gold2); filter: drop-shadow(0 0 6px rgba(230,204,146,.9)); }
@keyframes cpSpin { to { transform: rotate(360deg); } }
@keyframes cpFlow { to { stroke-dashoffset: -34; } }
@keyframes cpHalo { 0%,100% { opacity: .6; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .cp-holo * { animation: none !important; } }

/* 본문이 홀로그램 위에 오도록 */
#page1 .main-content, #page1 .container, #page1 main, #page1 .page-body { position: relative; z-index: 1; }
#page1 .page-header { z-index: 100; }

}

/* 좁은 화면에서는 링을 줄인다 */
@media screen and (max-width: 768px) {
  .cp-holo { right: -40vmin; width: 130vmin; height: 130vmin; opacity: .35; }
}
@media print { .cp-holo { display: none !important; } }