/* =====================================================================
   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{
  /* ── ① 시맨틱 토큰 — 단일 진실 공급원 ─────────────────────────── */
  /* 방향: Publicis Groupe — 화이트 지면 · 퍼블리시스 골드 · 딥 다크
     골드 #B8AB7E, 다크 #2D2D35 는 publicisgroupe.com 실측값.
     ⚠ 대비 주의: 골드 위 흰 글자는 2.29:1. 버튼은 브랜드 일치를 우선해
        이 조합을 쓴다(레퍼런스 CTA 와 동일). 본문 텍스트에는 쓰지 말 것. */

  /* 배경 · 서피스 */
  --pgk-bg:           #FAFAF9;   /* 페이지 배경 — 화이트. 카드가 떠 보이도록 미세하게만 낮춤 */
  --pgk-surface:      #FFFFFF;   /* 카드 · 패널 · 폼 필드 */
  --pgk-surface-2:    #F2F1ED;   /* 세컨더리 — 테이블 헤더 · 트랙 · 비활성 */
  --pgk-border:       #E3E1DA;   /* 헤어라인 */
  --pgk-ink:          #2D2D35;   /* 딥 다크 — 반전 밴드 · 헤더 */

  /* 텍스트 */
  --pgk-text:         #2D2D35;
  --pgk-text-2:       #5B5B64;
  --pgk-text-3:       #8D8D96;

  /* 액센트 — 퍼블리시스 골드 */
  --pgk-accent:       #B8AB7E;   /* 프라이머리 골드 — 포커스 링 · 탭 · 강조선 */
  --pgk-accent-hover: #A3956A;
  --pgk-btn:          #B8AB7E;   /* 버튼 배경 — publicisgroupe.com CTA 실측 골드.
                                    브랜드 기준으로 확정(2026-08-25 철완 지시).
                                    ⚠ 흰 글자 대비 2.29:1. 이전에 쓰던 딥 골드
                                    #9D833E 는 3.65:1 이었으나 브랜드색이 아니다.
                                    가독성이 문제되면 --pgk-on-accent 를 #2D2D35
                                    로 바꾸면 5.96:1 이 된다(레퍼런스는 흰 글자). */
  --pgk-btn-hover:    #A3956A;   /* 골드 한 단계 어둡게 — accent-hover 와 동일 */
  --pgk-accent-soft:  #F4F1E7;   /* 소프트 배경 — 알럿 · 하이라이트 */
  --pgk-accent-2:     #9D833E;   /* 딥 골드 — 로고와 동일. 큰 글자·보더용(작은 본문 금지) */
  --pgk-on-accent:    #FFFFFF;   /* 버튼 글자 — 딥 골드(--pgk-btn) 위 흰색 */

  /* 상태 — 골드/뉴트럴 계열에 맞춰 채도 정리 */
  --pgk-success:      #3D7A5C;
  --pgk-success-soft: #E7F0EA;
  --pgk-warn:         #A8802B;
  --pgk-warn-soft:    #F6EFDD;
  --pgk-danger:       #B3453A;
  --pgk-danger-soft:  #F7E7E4;
  --pgk-info:         #4A6B8A;
  --pgk-info-soft:    #E9EEF3;

  /* 차트 팔레트 — 골드 앵커 + 뮤트 보조 */
  --pgk-chart-1: #B8AB7E;
  --pgk-chart-2: #9D833E;
  --pgk-chart-3: #6E7F8D;
  --pgk-chart-4: #5E8A78;
  --pgk-chart-5: #8A7A8F;
  --pgk-chart-6: #B08268;
  --pgk-chart-7: #9A9A94;

  /* 타이포그래피 — Pretendard */
  --pgk-font: 'Pretendard Variable', Pretendard, -apple-system,
              BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* 관리자 화면의 숫자·ID·로그용. 웹폰트를 새로 받지 않는다 —
     관리자 화면은 4개 앱에서 매일 여는 화면이라 네트워크 비용이 누적된다. */
  --pgk-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --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+ */
  /* 모달 뒤를 덮는 막. 화면마다 rgba 리터럴로 흩어져 있어 값이 갈렸다.
     (Factbook rgba(34,30,25,.45) 등) 한 곳에서 정한다. */
  --pgk-scrim: rgba(45, 45, 53, .45);
  --pgk-shadow:      0 1px 4px rgba(45,45,53,.06);
  --pgk-shadow-lift: 0 2px 10px rgba(45,45,53,.08);
  --pgk-focus-ring:  0 0 0 3px rgba(184,171,126,.34);

  /* ── ② 호환 별칭 — 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); }

/* 버튼 — 프라이머리는 브랜드 골드(#B8AB7E) 필 + 흰 글자.
   publicisgroupe.com CTA 와 같은 조합이다. 대비는 2.29:1 로 낮으나
   브랜드 일치를 우선한 결정(2026-08-25). 되돌리려면 --pgk-on-accent 를
   #2D2D35 로 두면 5.96:1.
   border-radius:0 은 탭·세그먼트가 button 이라 전역 반경을 물려받아
   언더라인 끝이 말리는 것을 막기 위해 각 컴포넌트에서 되돌린다. */
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, form button[type=submit]{
  background: var(--pgk-btn) !important;
  color: var(--pgk-on-accent) !important; border: 0 !important;
  box-shadow: 0 1px 3px rgba(45,45,53,.10) !important;
  transform: none !important;
  /* ── 폼 통일 기준: 전체폭 · 15px/700 · 패딩 15px · 반경 8px ── */
  width: 100% !important;
  padding: 15px 20px !important;
  font-size: 15px !important;
  border-radius: var(--pgk-radius-s) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 9px !important;
  /* body 의 line-height 1.75 를 그대로 물려받으면 버튼 높이가 앱마다 달라진다
     (로컬 규칙이 있는 앱은 48px, 없는 앱은 56px 로 튀었다). 여기서 고정한다. */
  line-height: 1.2 !important;
}
.btn-primary:hover, button.primary:hover, .submit-btn:hover, .submit button:hover, form button[type=submit]:hover{
  background: var(--pgk-btn-hover) !important;
}
.btn-primary:disabled, .submit-btn:disabled, .submit button:disabled, form button[type=submit]:disabled{
  background: var(--pgk-surface-2) !important;
  color: var(--pgk-text-3) !important; box-shadow: none !important;
  opacity: 1 !important; cursor: not-allowed !important;
}

/* 인풋 — 통일 기준: 패딩 12·14 · 14px · 반경 8px · 흰 배경
   !important 인 이유: 4개 앱이 각자 로컬 규칙으로 패딩 4가지, 크기 3가지,
   반경 2가지로 갈라져 있었고(BriefFlow 는 배경까지 투명), 특이도로는 못 이긴다. */
input, select, textarea{
  font-family: var(--pgk-font);
  background: var(--pgk-surface) !important; color: var(--pgk-text);
  border: 1px solid var(--pgk-border) !important;
  border-radius: var(--pgk-radius-s) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
}
textarea{ resize: vertical; min-height: 84px; }
/* select 는 브라우저 내부 라인박스 계산이 input 과 달라 2px 낮게 잡힌다.
   줄높이로는 맞출 수 없어 최소 높이로 고정한다.
   47px = 패딩 12·12 + 줄높이 21(14px×1.5) + 보더 2. 나란히 놓이는 폼
   (예: 조회범위 · 국가)에서 단차가 보이던 문제. */
input:not([type=checkbox]):not([type=radio]), select{
  line-height: 1.5 !important;
  min-height: 47px !important;
}
input[type=checkbox], input[type=radio]{
  padding: 0 !important; accent-color: var(--pgk-accent);
}
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: #D6D4CC; 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')
   ──────────────────────────────────────────────────────────────────── */

/* ── ④ 타이포 위계 통일 (v260720) — 4개 탭 공통 ─────────────────────
   목적: 헤드/서브/메뉴 크기·굵기 위계를 4개 서비스에서 동일하게 맞추고
         국문·영문 전부 Pretendard 로 통일. 각 앱 로컬/인라인 크기를 !important 로 덮음. */
:root{
  --pgk-fs-head: 30px;   /* 800 — 히어로 헤드 메시지 */
  --pgk-fs-sub:  15px;   /* 400 — 서브 메시지 */
  --pgk-fs-sect: 13px;   /* 700 — 섹션·카드 헤더 */
  --pgk-fs-nav:  14px;   /* 600 — 탭·메뉴 */
  --pgk-fs-label:12.5px; /* 600 — 폼 라벨 */
}
/* 폰트 — 국문·영문·인라인 전부 Pretendard 강제 */
body, body *{ font-family: var(--pgk-font) !important; }

/* 헤드 메시지 — 히어로 헤드라인 (LM·Factbook·Sometrend·BriefFlow) */
.hero h2, #form-view > h1, .wrap h1, h1.display, .display{
  font-size: var(--pgk-fs-head) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}
/* 서브 메시지 — 히어로 서브 */
.hero p, .lede, .sub, .display + p{
  font-size: var(--pgk-fs-sub) !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--pgk-text-2) !important;
}
/* 섹션·카드 헤더 — 대문자화 제거해 국/영 위계 통일.
   color 가 빠져 있어 Factbook 은 muted(#8D8D96), BriefFlow 는 text(#2D2D35)로
   갈려 있었다. 섹션 헤더는 그 아래 폼 라벨(--pgk-text-2)보다 위계가 위이므로
   가장 진한 먹으로 고정한다. */
.card h2, .card h3{
  font-size: var(--pgk-fs-sect) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--pgk-text) !important;
}
/* 탭·메뉴 */
nav .tab, .tab-btn{
  font-size: var(--pgk-fs-nav) !important;
  font-weight: 600 !important;
}
/* 폼 라벨 */
.field label, .wrap label{
  font-size: var(--pgk-fs-label) !important;
  font-weight: 600 !important;
}

/* ── ⑤ 폼 요소 통일 (v260825) ─────────────────────────────────────
   감사 결과 4개 앱이 라벨 자간 3가지, 힌트 크기 3가지, 필수표시 색 3가지,
   카드 패딩 3가지로 갈려 있었다. 여기서 한 값으로 모은다.
   각 앱 로컬 규칙이 특이도로 이기는 경우가 많아 !important 를 쓴다. ── */

/* 라벨 — 12.5px / 600 / 자간 0 / 대문자화 없음 */
.field label, .wrap label, form label{
  color: var(--pgk-text-2) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 6px !important;
}
/* 필수 표시 — 골드. 생텍스트 " *" 로 쓰던 앱과 span.req 를 쓰던 앱이 섞여 있었다 */
.req{ color: var(--pgk-accent-2) !important; font-weight: 700 !important; margin-left: 3px !important; }

/* 힌트 · 도움말 — 11.5px / muted / 위 6px */
.field .hint, .hint, .field small, .form-hint{
  font-size: 11.5px !important;
  color: var(--pgk-text-3) !important;
  margin-top: 6px !important;
  line-height: 1.5 !important;
}
/* 제출 하단 고지문 */
.consent, .submit-note, .submit .note{
  font-size: 11.5px !important;
  color: var(--pgk-text-3) !important;
  text-align: center !important;
  margin-top: 12px !important;
}
/* 카드 — 패딩 28px / 반경 16px
   .panel 을 뺀다: 4개 앱 신청 페이지 중 .panel 을 쓰는 곳이 하나도 없고,
   전 저장소에서 이 클래스를 쓰는 파일은 BriefFlow 관리자 대시보드 하나뿐이다.
   그 화면의 차트 패널은 고정 높이라 28px 이 강제되면 레이아웃이 깨진다.
   즉 이 선택자의 .panel 쪽은 쓸모가 없었고 부수기만 했다.
   위 199행의 배경·테두리 규칙은 !important 가 아니고 실제로 도움이 되므로 둔다. */
.card{
  padding: 28px !important;
  border-radius: var(--pgk-radius-l) !important;
}

/* 제출 버튼 셰브론 — 4개 앱 동일한 형태로. 폰트 글리프(→)는 앱마다 다르게 그려져
   SVG 로 통일한다. currentColor 라 버튼 글자색을 그대로 따라간다. */
.btn-chev{ flex: 0 0 auto; margin-left: 2px; }

/* 파일 업로드 드롭존 — Factbook·BriefFlow 두 곳에 있고 형태가 달랐다
   (2px vs 1.5px 보더 · 반경 10 vs 12 · 이모지 유무 · 모노 폰트 유무).
   여기 한 곳에서 공급해 두 앱이 같은 것을 쓰게 한다. */
.drop{
  border: 1.5px dashed var(--pgk-border);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  background: var(--pgk-surface-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over, .drop.has-files{
  border-color: var(--pgk-accent);
  background: var(--pgk-accent-soft);
}
.drop .label{ font-size: 15px; font-weight: 700; color: var(--pgk-text); margin-bottom: 6px; }
/* 히어로 서브 규칙 `.hero p, .lede, .sub{font-size:15px!important}` 가 여기까지
   미쳐서 안내문이 15px 로 커진다. 같은 무기로 되돌린다. */
.drop .sub{ font-size: 12px !important; color: var(--pgk-text-3) !important;
  line-height: 1.55 !important; font-weight: 400 !important; }
.drop .sub + .sub{ margin-top: 3px; }
.drop .icon{ display: none; }   /* 이모지 아이콘 — 다른 앱과 맞추기 위해 숨김 */
/* 드롭존 안의 '파일 선택' 버튼 — div 클릭만으로는 키보드 접근이 안 되므로
   두 앱 모두 실제 button 을 둔다. 제출 버튼과 구분되게 아웃라인 스타일. */
.drop .pick{
  margin-top: 14px !important; padding: 8px 16px !important;
  border-radius: 8px !important; border: 1px solid var(--pgk-border) !important;
  background: var(--pgk-surface) !important; color: var(--pgk-text-2) !important;
  font-size: 12.5px !important; font-weight: 600 !important; width: auto !important;
  box-shadow: none !important; display: inline-flex !important; cursor: pointer;
}
.drop .pick:hover{ border-color: var(--pgk-accent) !important; color: var(--pgk-text) !important; }