/* ============================================================
   InfraTree v2 — 레거시 페이지 다크 브리지
   아직 v2로 다시 쓰지 않은 화면(가이드·허브·법적 고지·계정 등)을
   v2 팔레트로 맞춘다. styles.css 다음에 링크한다.

   styles.css는 전부 CSS 변수로 짜여 있으므로 값만 v2 토큰으로 덮는다.
   마크업·클래스는 건드리지 않는다 — SSR 주입 지점이 그대로 살아 있어야 한다.
   이 파일은 임시 다리다. 각 페이지가 v2로 다시 쓰이면 링크를 빼면 된다.
   ============================================================ */
:root {
  /* 표면 */
  --it-bg: #0b0e14;
  --it-surface: #11151d;
  --it-surface-2: #151b25;
  --it-surface-code: #07090d;

  /* 텍스트 */
  --it-ink: #e6edf3;
  --it-ink-2: #98a3b3;
  --it-ink-3: #5c6878;

  /* 경계 */
  --it-border: #1f2735;
  --it-border-strong: #2a3446;

  /* 액션 — v2는 그린 하나 */
  --it-primary: #3fb950;
  --it-primary-strong: #4ac95c;
  --it-primary-soft: rgba(63, 185, 80, 0.12);
  --it-on-primary: #04120a;
  --it-primary-text: #3fb950;

  /* 보조 강조 */
  --it-teal: #63d8e3;
  --it-teal-soft: rgba(99, 216, 227, 0.12);

  /* 상태 */
  --it-success: #3fb950;
  --it-success-soft: rgba(63, 185, 80, 0.12);
  --it-warning: #d29922;
  --it-warning-soft: rgba(210, 153, 34, 0.12);
  --it-danger: #f85149;
  --it-danger-soft: rgba(248, 81, 73, 0.12);

  /* Pro */
  --it-pro: #d29922;
  --it-pro-soft: rgba(210, 153, 34, 0.12);
  --it-pro-line: rgba(210, 153, 34, 0.35);

  /* 모양 — v2는 그림자 없음 */
  --it-radius-sm: 8px;
  --it-radius: 10px;
  --it-shadow-sm: none;
  --it-shadow-md: none;
  --it-shadow-lg: none;

  /* 레거시 별칭 중 값이 직접 박힌 것들 */
  --card-strong: #151b25;
  --radius-xl: 10px;
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 8px;

  --font-body: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Pretendard, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

/* ---- 변수를 안 쓰고 값이 박혀 있던 자리들 ---- */

/* 흰 배경 카드/시트 */
.page-shell .form-card,
.page-shell .detail-card,
.page-shell .modal-card,
.page-shell .table-shell,
.page-shell .panel-card {
  background: var(--it-surface);
  color: var(--it-ink);
}

/* 밝은 슬레이트 텍스트 */
.page-shell .muted,
.page-shell .form-note,
.page-shell .table-shell td,
.page-shell .table-shell th {
  color: var(--it-ink-2);
}

/* 입력 요소 */
.page-shell input,
.page-shell select,
.page-shell textarea {
  background: var(--it-surface-2);
  color: var(--it-ink);
  border-color: var(--it-border-strong);
}
.page-shell input::placeholder,
.page-shell textarea::placeholder {
  color: var(--it-ink-3);
}
.page-shell input:focus,
.page-shell select:focus,
.page-shell textarea:focus {
  border-color: rgba(63, 185, 80, 0.35);
  outline: 2px solid var(--it-primary);
  outline-offset: 1px;
}

/* 코드 · 프리 */
.page-shell code,
.page-shell pre,
.page-shell .code-block {
  background: var(--it-surface-code);
  color: var(--it-ink);
  border-color: var(--it-border);
}

/* 그림자 제거 (v2는 경계선으로만 구분) */
.page-shell .card,
.page-shell .hero-panel,
.page-shell .value-card,
.page-shell .problem-card,
.page-shell .detail-card,
.page-shell .form-card,
.page-shell .topbar {
  box-shadow: none;
}

/* 브랜드 마크 */
.page-shell .brand-mark {
  background: var(--it-primary-soft);
  color: var(--it-primary);
}

/* 이미지·아이콘이 흰 배경을 가정한 경우 톤 다운 */
.page-shell img[src$=".svg"] {
  opacity: 0.92;
}

/* ---- 흰색 그라데이션으로 칠해진 자리 ----
   styles.css는 카드·패널 배경을 변수가 아니라 rgba(255,255,255,...) 그라데이션으로
   직접 칠한 곳이 많다. 토큰만 덮으면 이 자리들은 흰 상태로 남고, 글자만 밝아져서
   흰 배경에 흰 글씨가 된다. styles.css에서 뽑아낸 목록을 그대로 덮는다. */
.topbar,
.topbar-profile-panel,
.hero-copy,
.hero-mini-card,
.quick-intent-card,
.admin-hero-points span,
.hero-signal-card-strong,
.hero-track-item,
.hero-role-resume-card,
.hero-role-resume-card.family-role,
.hero-role-resume-card.family-scenario,
.hero-role-resume-card.family-specialist,
.intake-copy,
.section-soft,
.plan-card,
.category-card-security,
.level-distribution-card,
.field textarea,
.library-tools,
.library-tools.is-desktop-collapsed,
.log-match-item,
.mobile-filter-applied,
.account-identity-card,
.account-security-panel,
.learning-weakness-card,
.learning-weakness-summary,
.problem-card-security,
.empty-state,
.section-security,
.security-spotlight-problem,
.security-focus-card,
.recommend-card,
.recommend-card-role.family-role,
.recommend-card-role.family-scenario,
.recommend-card-role.family-specialist,
.recommend-role-activity,
.recommend-role-spotlight-card,
.recommend-role-spotlight-card.is-review,
.recommend-role-spotlight-card.is-progress,
.recommend-role-resume-card,
.recommend-role-resume-card.is-review,
.recommend-role-starter,
.recommend-role-featured-guide,
.recommend-role-stage,
.recommend-item,
.plan-card-plan-team .plan-tier,
.ad-slot-shell,
.ad-slot-frame,
.account-provider-card,
.problem-hero-kicker span,
.detail-focus-card,
.detail-editorial-card,
.detail-practice-card,
.terminal-window,
.practice-tip,
.detail-level-path-item,
.faq-item,
.admin-backlog-item,
.cms-template-shell,
.team-report-highlight,
.team-report-highlight-risk,
.team-report-highlight-review,
.team-report-score,
.team-report-highlight-grid span,
.admin-role-review-card,
.admin-role-review-section.is-spotlight .admin-role-review-section-head,
.admin-role-review-section-head,
.admin-role-review-empty-state,
.admin-role-next-step,
.admin-role-note-item,
.admin-role-problem-list li,
.mobile-nav-drawer,
.mobile-nav-drawer-current,
.page-shell-taxonomy .mobile-filter-sheet,
.page-shell-taxonomy .mobile-filter-sheet-foot,
.problem-brief-card,
.problem-brief-card-primary,
.problem-choice-option,
.problem-choice-option.is-selected-correct,
.problem-choice-option.is-selected-incorrect,
.detail-pro-card.is-locked,
.attempt-feedback-cta,
.page-shell-detail .terminal-window-head,
.attempt-feedback-cta.is-review {
  background-image: none;
  background-color: var(--it-surface);
  color: var(--it-ink);
}

/* 콘텐츠 카드·섹션·패널 계열 — styles.css 에서 rgba(255,255,255,...) 흰
   배경/그라데이션이 박혀 있고 위 목록엔 .plan-card / .section-soft 만 들어가
   있어 나머지가 흰 상태로 남았다. 가이드/허브/택소노미 체크리스트 카드가
   흰 배경+밝은 글자로 안 보이던 원인. 관리자 화면(admin-*)까지 포함해 덮는다. */
.page-shell .value-card,
.page-shell .audience-card,
.page-shell .track-card,
.page-shell .workflow-card,
.page-shell .category-card,
.page-shell .section,
.page-shell .stats-card,
.page-shell .detail-hero-panel,
.page-shell .learning-weakness-panel,
.page-shell .admin-hero-card,
.page-shell .admin-auth-card,
.page-shell .admin-card,
.page-shell .admin-metric-card {
  background-image: none;
  background-color: var(--it-surface);
  color: var(--it-ink);
}

/* styles.css 955행: 위 카드들 테두리가 rgba(255,255,255,0.88) 흰색이라
   다크에서 굵은 흰 윤곽으로 남는다. 경계선 토큰으로 교체. */
.page-shell .section,
.page-shell .stats-card,
.page-shell .detail-hero-panel,
.page-shell .detail-card,
.page-shell .admin-hero-card,
.page-shell .admin-auth-card,
.page-shell .admin-card,
.page-shell .admin-metric-card {
  border-color: var(--it-border);
}

.topbar-locale-switch,
.button-secondary,
.security-filter-chip,
.learning-role-family-chip.is-active .learning-role-family-icon,
.tab-button,
.problem-table-wrap,
.mobile-filter-toolbar,
.mobile-filter-close,
.recommend-role-sequence-link span,
.recommend-sample-link,
.social-auth-icon,
.social-auth-icon-google,
.social-auth-icon-naver,
.back-link,
.admin-role-preset-chip,
.nav a,
.topbar-mobile-nav.is-mobile-nav-ready .nav a,
.mobile-nav-drawer-action,
.attempt-feedback-action,
.attempt-feedback-action.is-primary,
.attempt-feedback-cta.is-review .attempt-feedback-action.is-primary {
  background-image: none;
  background-color: var(--it-surface-2);
  color: var(--it-ink);
}

/* 밝은 배경을 전제로 박아둔 어두운 글자색 */
.category-card-accent,
.security-filter-chip,
.mobile-filter-summary-chip,
.problem-tag-emphasis,
.account-provider-badge.is-disabled,
.admin-role-note-pill.is-complete,
.admin-role-review-status-pill.is-pending,
.admin-role-review-status-pill.is-reviewed,
.admin-role-priority-pill.is-stable,
.admin-role-urgent-signal-pill.is-ready,
.admin-role-impact-chip.is-pinned,
.admin-role-impact-chip.is-auto,
.topbar-mobile-nav.is-mobile-nav-ready .topbar-menu-toggle,
.topbar-mobile-nav .topbar-menu-toggle,
.page-shell-detail .detail-story-card #problem-scenario,
.problem-assist-tab,
.problem-assist-section > strong,
.problem-assist-ordered li,
.problem-assist-link p,
.page-shell-detail.is-solving-mode .detail-header .detail-description {
  color: var(--it-ink);
}

/* 위 목록에서 예외 — 코드/터미널은 더 어두운 면을 쓴다 */
.terminal-window,
.page-shell-detail .terminal-window-head {
  background-color: var(--it-surface-code);
}

/* 변수 대신 밝은 hex가 직접 박혀 있던 나머지 */
.problem-field-note-form select,
.problem-assist-tab,
.problem-assist-link,
.page-shell-detail .problem-brief-card,
.page-shell-detail .detail-story-card #problem-scenario,
.page-shell-detail.is-solving-mode .problem-assist-card,
.page-shell-detail.is-solving-mode .detail-story-card #problem-scenario,
.page-shell-admin-report .team-report-highlight {
  background-image: none;
  background-color: var(--it-surface-2);
  color: var(--it-ink);
}