/* ============================================================
   static/colors.css — 사이트 전역 디자인 토큰 (단일 소스)
   ------------------------------------------------------------
   static/fonts.css와 같은 원칙: 색상·반경(radius)·그림자를 바꾸려면
   이 파일만 고치면 된다. 각 페이지의 :root는 자기 변수 이름(--accent,
   --navy-mid, --border, --line, --r-md 등 — 페이지마다 이미 제각각인
   이름)은 그대로 두고, 값만 이 파일의 --c-* · --radius-* · --shadow-*
   토큰을 참조("가리키기")하도록 바꿨다. fonts.css 때와 동일한 이유:
   변수 "이름"까지 통일하려면 그 이름을 쓰는 CSS 규칙 수백 곳을 다시
   훑어야 해서 위험이 크다 — "값의 출처"만 하나로 모으는 쪽이 훨씬
   안전하면서도 목적(하나 바꾸면 전체 반영)을 달성한다.

   적용 범위: 색상 계열은 사이트 전체(정적 가이드 페이지 20여 개 +
   home/compare/learn/about + insight.css/insight_additions.css)가
   전부 이 파일을 통해서만 실제 색상값을 갖는다 — Research(insight)가
   그동안 독립적인 색 체계처럼 보였던 근본 원인(자기만의 :root에
   같은 값을 따로 박아둔 것)이 여기서 해소된다.

   ⚠️ 작업 중 실제로 서로 다른 값이 섞여 있던 게 2곳 발견됐다 — 억지로
   하나로 합치지 않고 둘 다 토큰으로 보존했다(밑에 주석 참고). 완전히
   똑같이 맞추고 싶다면 이 파일에서 한쪽을 다른 쪽과 같은 값으로
   바꾸면 전체에 반영된다.
   ============================================================ */
:root {
  /* ── 네이비 (브랜드 프라이머리) ── */
  --c-navy-deep: #0f172a;   /* 가장 어두운 네이비 — 히어로 배경 시작색 + 헤딩 텍스트 겸용 */
  --c-navy-mid:  #1d4ed8;   /* 주 액션 컬러 — 버튼·링크·강조 */
  --c-navy-soft: #3b82f6;   /* 액센트 hover/보조 */

  /* ── 중성색 ── */
  --c-slate:  #64748b;      /* 보조/뮤트 텍스트 */
  --c-line:   #e2e8f0;      /* 테두리 */
  --c-bg:     #f8fafc;      /* 페이지 배경 */
  --c-white:  #ffffff;      /* 카드/표면 배경 */

  /* 표면 2단계(surface2) — 실제로 두 갈래로 나뉘어 있던 걸 그대로 보존.
     담보 가이드류는 파란 틴트, 생애주기·도구류는 회색 틴트를 써왔다.
     새로 만드는 페이지는 --c-surface-tint(파란)를 기본으로 쓸 것. */
  --c-surface-tint:      #eff6ff;  /* 옅은 파란 틴트 */
  --c-surface-tint-gray: #f1f5f9;  /* 옅은 회색 틴트 */

  /* 본문 텍스트 — 이것도 두 갈래(진하기 미세하게 다름)로 나뉘어 있던 걸 보존 */
  --c-text:      #334155;   /* 담보가이드류 본문 */
  --c-text-dark: #1e293b;   /* 생애주기·도구류 본문(조금 더 어두움) */
  --c-text-hi:   #0f172a;   /* 헤딩 — navy-deep과 값이 같다 */

  /* ── 상태색 — 기본 + 옅은 배경 틴트 ── */
  --c-warn:        #d97706;
  --c-warn-soft:   #fffbeb;
  --c-danger:      #dc2626;
  --c-danger-soft: #fef2f2;
  --c-ok:          #16a34a;
  --c-ok-soft:     #f0fdf4;

  --c-on-accent: #ffffff;   /* accent 배경 위에 얹는 텍스트 색 */

  /* ── 반경(border-radius) ── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* ── 그림자 ── */
  --shadow-card:    0 2px 14px rgba(15,23,42,.06);
  --shadow-card-lg: 0 4px 24px rgba(15,23,42,.06), 0 1px 4px rgba(15,23,42,.04);

  /* ── 다크 배경 전용(footer 등) ── */
  --c-navy-deepest:   #0b1120;  /* footer 배경 — 히어로보다 한 단계 더 어두움 */
  --c-slate-on-dark:  #94a3b8;  /* 다크 배경 위의 뮤트 텍스트(--c-slate보다 밝은 톤) */

  /* ── 히어로 그라디언트 ── */
  /* (2026-07-10) 23개 넘는 페이지가 이 정확한 3단 그라디언트를 리터럴로
     반복하고 있었다 — 톤을 조정하고 싶을 때마다 그만큼의 파일을 찾아
     고쳐야 했다는 뜻. 하나의 토큰으로 묶는다. */
  --gradient-hero: linear-gradient(160deg, var(--c-navy-deep) 0%, #1e293b 70%, var(--c-navy-mid) 130%);
}

/* ============================================================
   중앙 툴팁 컴포넌트  [data-tooltip]  — 전 사이트 공용 (2026-07-21 신설)
   ------------------------------------------------------------
   잘린 상품명·약어·지표 등에 '전체 내용'을 보여주는 통일 툴팁. 순수 CSS라
   어느 페이지에서든 요소에 data-tooltip="전체 내용" 하나만 붙이면 동작한다.
   기본은 요소 '위'에 뜨고, data-tooltip-pos="bottom"이면 '아래'에 뜬다
   (표 헤더 등 화면 상단 요소는 bottom 을 쓴다).
   디자인(미국 탑티어 기준): 딥네이비 버블 + 화살표 + 부드러운 페이드/상승,
   키보드 포커스에도 표시(접근성). 색은 사이트 토큰(--c-navy-deep)만 사용.
   ============================================================ */
[data-tooltip]{position:relative}
[data-tooltip]:not([data-tooltip=""]){cursor:help}
[data-tooltip]::after,
[data-tooltip]::before{
  position:absolute;left:50%;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;z-index:60;
}
[data-tooltip]::after{                       /* 버블 */
  content:attr(data-tooltip);
  bottom:calc(100% + 9px);transform:translate(-50%,4px);
  background:var(--c-navy-deep);color:#fff;
  font-size:12px;font-weight:600;line-height:1.5;letter-spacing:-.1px;
  padding:8px 11px;border-radius:8px;
  width:max-content;max-width:min(300px,74vw);white-space:normal;
  word-break:keep-all;overflow-wrap:anywhere;text-align:left;
  box-shadow:0 8px 24px rgba(15,23,42,.24);
}
[data-tooltip]::before{                       /* 화살표 */
  content:"";bottom:calc(100% + 3px);transform:translate(-50%,4px);
  border:6px solid transparent;border-top-color:var(--c-navy-deep);
}
[data-tooltip]:hover::after,[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,[data-tooltip]:focus-visible::before{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
[data-tooltip][data-tooltip-pos="bottom"]::after{  /* 아래로 뜨는 변형 */
  bottom:auto;top:calc(100% + 9px);
}
[data-tooltip][data-tooltip-pos="bottom"]::before{
  bottom:auto;top:calc(100% + 3px);
  border-top-color:transparent;border-bottom-color:var(--c-navy-deep);
}