/* =====================================================================
   PGK Design System v2 — pgk-theme.css
   방향: 1b "Warm Paper" (라이트 · Pretendard · 웜 오렌지 포인트)
   배포: 이 파일 하나만 교체. 각 서비스의 로컬 :root 블록은 삭제할 것.
   로드 순서: 서비스 로컬 CSS "이후"에 로드해야 스킨이 우선 적용됨.
   ===================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  /* ── ① 시맨틱 토큰 — 단일 진실 공급원 ─────────────────────────── */
  /* 배경 · 서피스 */
  --pgk-bg:           #FAF7F2;   /* 페이지 배경 — 웜 오프화이트(종이) */
  --pgk-surface:      #FFFFFF;   /* 카드 · 패널 · 폼 필드 컨테이너 */
  --pgk-surface-2:    #F3EEE6;   /* 세컨더리 서피스 — 테이블 헤더 · 세그먼트 트랙 · 비활성 */
  --pgk-border:       #E9E1D4;   /* 헤어라인 보더 */
  --pgk-ink:          #221E19;   /* 잉크 — 반전 영역(다크 밴드)이 필요할 때 */

  /* 텍스트 */
  --pgk-text:         #221E19;   /* 본문 제목 · 강조 */
  --pgk-text-2:       #5C554B;   /* 본문 */
  --pgk-text-3:       #97907F;   /* 캡션 · 힌트 · 라벨 */

  /* 액센트 — 웜 포인트 */
  --pgk-accent:       #E0731F;   /* 프라이머리 오렌지 — 버튼 · 포커스 · 필수표시 */
  --pgk-accent-hover: #C46113;
  --pgk-accent-soft:  #FAEBDD;   /* 소프트 배경 — 알럿 · 하이라이트 */
  --pgk-accent-2:     #A63D2F;   /* 딥레드 보조 — 텍스트 링크 · 세컨더리 강조 */

  /* 상태 */
  --pgk-success:      #2E9163;
  --pgk-success-soft: #E3F1E9;
  --pgk-warn:         #C98A1B;
  --pgk-warn-soft:    #F7EDD8;
  --pgk-danger:       #CE4B33;
  --pgk-danger-soft:  #F9E4DE;
  --pgk-info:         #4A7BA6;
  --pgk-info-soft:    #E6EEF5;

  /* 차트 팔레트 — 웜 앵커 + 어스톤 보조 (Chart.js 등 JS에서 읽기) */
  --pgk-chart-1: #E0731F;
  --pgk-chart-2: #A63D2F;
  --pgk-chart-3: #C98A1B;
  --pgk-chart-4: #4A8F7B;
  --pgk-chart-5: #4A7BA6;
  --pgk-chart-6: #8A6FA8;
  --pgk-chart-7: #A79E8E;

  /* 타이포그래피 — Pretendard */
  --pgk-font: 'Pretendard Variable', Pretendard, -apple-system,
              BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pgk-fs-display: 38px;   /* 800 / -1.5% / 1.2  — 히어로 */
  --pgk-fs-h1:      25px;   /* 750 / 1.3          — 페이지 타이틀 */
  --pgk-fs-h2:      18px;   /* 700 / 1.4          — 섹션 타이틀 */
  --pgk-fs-body:    15px;   /* 400 / 1.75         — 본문 */
  --pgk-fs-caption: 12.5px; /* 400 / 1.5          — 힌트 · 캡션 */

  /* 라운드 · 간격 · 섀도 */
  --pgk-radius-s:  8px;    /* 인풋 · 작은 버튼 */
  --pgk-radius-m: 12px;    /* 버튼 · 세그먼트 · 알럿 */
  --pgk-radius-l: 16px;    /* 카드 · 모달 */
  --pgk-space-unit: 8px;   /* 간격은 8px 배수 — 여유로운 밀도: 카드 패딩 28px, 섹션 간 40px+ */
  --pgk-shadow:      0 1px 4px rgba(34,30,25,.05);
  --pgk-shadow-lift: 0 2px 10px rgba(34,30,25,.06);
  --pgk-focus-ring:  0 0 0 3px rgba(224,115,31,.14);

  /* ── ② 호환 별칭 — 4개 서비스 기존 변수명 전부 리다이렉트 ───────── */
  /* ListeningMind · 셸 */
  --bg: var(--pgk-bg);            --surface: var(--pgk-surface);
  --surface2: var(--pgk-surface-2);
  --border: var(--pgk-border);
  --text: var(--pgk-text);        --text2: var(--pgk-text-2);
  --muted: var(--pgk-text-3);
  /* Factbook · BriefFlow */
  --panel: var(--pgk-surface);    --panel2: var(--pgk-surface-2);
  --ink: var(--pgk-text);
  /* Sometrend */
  --text-muted: var(--pgk-text-3);
  /* 액센트 계열 — 구 네이비 시스템의 컬러명 흡수 */
  --accent: var(--pgk-accent);    --cyan: var(--pgk-accent);
  --magenta: var(--pgk-accent-2); --gold: var(--pgk-chart-3);
  --blue: var(--pgk-chart-5);     --violet: var(--pgk-chart-6);
  --purple: var(--pgk-chart-6);   --teal: var(--pgk-chart-4);
  /* 상태 계열 */
  --green: var(--pgk-success);    --accent2: var(--pgk-success);
  --amber: var(--pgk-warn);       --warn: var(--pgk-warn);
  --red: var(--pgk-danger);       --danger: var(--pgk-danger);
}

/* ── ③ 컴포넌트 스킨 — 서비스 로컬 CSS 이후에 로드 ──────────────── */

/* 기본 */
body{
  background: var(--pgk-bg) !important;
  color: var(--pgk-text);
  font-family: var(--pgk-font);
  font-size: var(--pgk-fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* 헤드라인 */
h1,h2,h3{ color: var(--pgk-text); font-weight: 800; letter-spacing: -0.02em; }
h1{ font-size: var(--pgk-fs-h1); }
h2{ font-size: var(--pgk-fs-h2); font-weight: 700; }

/* 링크 · 강조 */
a{ color: var(--pgk-accent-2); }
strong,b{ color: var(--pgk-text); }

/* 버튼 — 프라이머리는 오렌지 필 */
button, .btn, input[type=submit]{
  font-family: var(--pgk-font); font-weight: 700;
  border-radius: var(--pgk-radius-s); cursor: pointer;
}
.btn-primary, button.primary, .btn.primary,
.submit-btn, .submit button{
  background: var(--pgk-accent) !important;
  color: #fff !important; border: 0 !important;
  box-shadow: 0 2px 8px rgba(224,115,31,.25) !important;
  transform: none !important;
}
.btn-primary:hover, button.primary:hover, .submit-btn:hover, .submit button:hover{
  background: var(--pgk-accent-hover) !important;
}
.btn-primary:disabled, .submit-btn:disabled, .submit button:disabled{
  background: var(--pgk-surface-2) !important;
  color: #B5AC9C !important; box-shadow: none !important;
}

/* 인풋 */
input, select, textarea{
  font-family: var(--pgk-font);
  background: var(--pgk-surface); color: var(--pgk-text);
  border: 1px solid var(--pgk-border);
  border-radius: var(--pgk-radius-s);
}
input::placeholder, textarea::placeholder{ color: var(--pgk-text-3); }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--pgk-accent);
  box-shadow: var(--pgk-focus-ring);
}
input.error{ border-color: var(--pgk-danger); }

/* 카드 · 서피스 (4개 서비스의 흔한 클래스명 커버) */
.card, .surface, .panel, .gate, .kpi-card, .step-mini, .tier,
.insight-card, .doc-item, .issue-item{
  background: var(--pgk-surface);
  border: 1px solid var(--pgk-border);
  box-shadow: var(--pgk-shadow);
}
.tier.selected{ border-color: var(--pgk-accent); box-shadow: 0 0 0 1px var(--pgk-accent); }

/* 테이블 */
table{ background: transparent; }
th{ background: var(--pgk-surface-2); color: var(--pgk-text-3); }
th,td{ border-color: var(--pgk-border); }

/* 배지 · 필 — 라운드 필 + 소프트 배경 */
.pill, .badge, .tag{ font-weight: 700; border-radius: 999px; }
.pill.ok, .badge.ok, .badge.green, .tag.pos{
  background: var(--pgk-success-soft); color: var(--pgk-success); border-color: transparent; }
.badge.gold, .tag.gold{
  background: var(--pgk-warn-soft); color: var(--pgk-warn); border-color: transparent; }
.badge.red, .tag.neg{
  background: var(--pgk-danger-soft); color: var(--pgk-danger); border-color: transparent; }
.tag.neutral{
  background: var(--pgk-surface-2); color: var(--pgk-text-3); border-color: transparent; }

/* 알럿 */
.alert, .success-msg, .error-msg{ border-radius: var(--pgk-radius-m); }
.alert.gold{ background: var(--pgk-warn-soft); border-color: var(--pgk-warn); }
.alert.info{ background: var(--pgk-info-soft); border-color: var(--pgk-info); }
.alert.green, .success-msg{ background: var(--pgk-success-soft); border-color: var(--pgk-success); }
.alert.red, .error-msg, .error{ background: var(--pgk-danger-soft); border-color: var(--pgk-danger); color: var(--pgk-danger); }
.success-msg h4{ color: var(--pgk-success); }

/* 탭 — 액티브는 텍스트 잉크 + 오렌지 표시 */
.tab-btn, nav .tab{ color: var(--pgk-text-3); }
.tab-btn:hover, nav .tab:hover{ color: var(--pgk-text-2); }
.tab-btn.active, nav .tab.active{
  color: var(--pgk-text); border-bottom-color: var(--pgk-accent); }

/* PGK 시그니처 유틸 (구 그라데이션 유틸 대체) */
.pgk-logo{ background: var(--pgk-accent); box-shadow: none; }
.pgk-grad-text{
  background: none; -webkit-text-fill-color: initial;
  color: var(--pgk-accent);
}
.pgk-gold{ color: var(--pgk-chart-3); }
.pgk-hairline{ height: 1px; background: var(--pgk-border); border: 0; }

/* 스크롤바 (웹킷) — 라이트 */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: #D8CFC0; border-radius: 6px; }
::-webkit-scrollbar-track{ background: var(--pgk-surface-2); }

/* ── 차트 팔레트 JS 헬퍼 ─────────────────────────────────────────────
   Chart.js 등 하드코딩 hex 치환용:

   const css = getComputedStyle(document.documentElement);
   const PGK_CHART = [1,2,3,4,5,6,7].map(i =>
     css.getPropertyValue(`--pgk-chart-${i}`).trim());
   const PGK = (name) => css.getPropertyValue(`--pgk-${name}`).trim();
   // 예: borderColor: PGK_CHART[0], gridColor: PGK('border')
   ──────────────────────────────────────────────────────────────────── */