/* ==========================================================================
   Business Coach Ab.K — 통합 디자인 시스템 (Type 1)
   colors_and_type.css
   --------------------------------------------------------------------------
   본 시스템은 13종 디자인 테마 매트릭스와 한국어 최적화 타이포그래피,
   그리고 9종 산출물 형식(HTML/슬라이드/PPTX/PDF/Word/Excel/포스터 등)에
   공통 적용되는 시각적 파운데이션을 정의합니다.

   • 기본 폰트: Paperlogy(웹) → Pretendard → 시스템 sans-serif
   • PPTX 대체 폰트 순서: Pretendard → Malgun Gothic → Noto Sans KR
   ========================================================================== */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: 'Pretendard';
  font-weight: 300;
  font-style: normal;
  src: url('../fonts/Pretendard-Light.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-style: normal;
  src: url('../fonts/Pretendard-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-style: normal;
  src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-style: normal;
  src: url('../fonts/Pretendard-ExtraBold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  font-weight: 900;
  font-style: normal;
  src: url('../fonts/Pretendard-Black.woff2') format('woff2');
  font-display: swap;
}

:root {

  /* =========================================================================
     1. TYPOGRAPHY — 한국어 가독성 우선, line-height 1.5 이상 유지
     ========================================================================= */
  --font-primary:
    'Paperlogy', 'Pretendard',
    -apple-system, BlinkMacSystemFont,
    'Malgun Gothic', 'Noto Sans KR',
    'Segoe UI', system-ui, sans-serif;

  --font-display: 'Paperlogy', 'Pretendard', -apple-system, sans-serif;
  --font-body:    'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;
  --font-mono:    'JetBrains Mono', 'D2Coding', ui-monospace, Menlo, monospace;

  /* Weight scale */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Size scale — 웹 기본 */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  44px;
  --fs-5xl:  56px;
  --fs-6xl:  72px;

  /* Line heights */
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;   /* 한국어 본문 최소값 */
  --lh-relax:  1.7;
  --lh-loose:  1.9;

  /* Letter spacing (한국어 최적화) */
  --ls-tight:  -0.03em;   /* 큰 제목 */
  --ls-snug:   -0.015em;  /* 중간 제목 */
  --ls-normal: -0.005em;  /* 본문 */
  --ls-wide:    0.06em;   /* 라벨/캡션 */

  /* Semantic type tokens */
  --type-hero:     var(--fw-extrabold) var(--fs-6xl)/var(--lh-tight) var(--font-display);
  --type-h1:       var(--fw-bold)      var(--fs-5xl)/var(--lh-tight) var(--font-display);
  --type-h2:       var(--fw-bold)      var(--fs-4xl)/var(--lh-snug)  var(--font-display);
  --type-h3:       var(--fw-semibold)  var(--fs-3xl)/var(--lh-snug)  var(--font-display);
  --type-h4:       var(--fw-semibold)  var(--fs-2xl)/var(--lh-snug)  var(--font-primary);
  --type-h5:       var(--fw-semibold)  var(--fs-xl) /var(--lh-normal) var(--font-primary);
  --type-h6:       var(--fw-semibold)  var(--fs-lg) /var(--lh-normal) var(--font-primary);
  --type-lead:     var(--fw-medium)    var(--fs-lg) /var(--lh-relax) var(--font-primary);
  --type-body:     var(--fw-regular)   var(--fs-base)/var(--lh-normal) var(--font-primary);
  --type-body-sm:  var(--fw-regular)   var(--fs-sm) /var(--lh-normal) var(--font-primary);
  --type-caption:  var(--fw-medium)    var(--fs-xs) /var(--lh-snug)  var(--font-primary);
  --type-label:    var(--fw-semibold)  var(--fs-sm) /var(--lh-snug)  var(--font-primary);

  /* =========================================================================
     2. NEUTRAL PALETTE — 공통 중립색
     ========================================================================= */
  --ink-900: #0f1114;   /* 최고 강조 텍스트 */
  --ink-800: #1f2328;
  --ink-700: #2f353c;
  --ink-600: #4a515a;
  --ink-500: #6b7280;   /* 보조 텍스트 */
  --ink-400: #9aa1ac;
  --ink-300: #c6ccd4;   /* 구분선 */
  --ink-200: #e3e6eb;
  --ink-100: #f1f3f6;
  --ink-050: #f7f8fa;
  --ink-000: #ffffff;

  /* Semantic surface tokens */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-700);   /* body text */
  --fg-3: var(--ink-500);   /* subtle / meta */
  --fg-4: var(--ink-400);   /* hint */
  --bg-1: var(--ink-000);   /* base surface */
  --bg-2: var(--ink-050);   /* raised surface */
  --bg-3: var(--ink-100);   /* recessed / muted */
  --border-1: var(--ink-200);
  --border-2: var(--ink-300);

  /* =========================================================================
     3. 13 THEME MATRIX — 시스템 프롬프트에 정의된 정확한 HEX 매핑
        각 테마는 primary / accent / bg / text 4토큰 세트를 제공합니다.
     ========================================================================= */

  /* 01. Professional Blue — 기업·금융·전략 */
  --t01-primary: #0052cc;
  --t01-accent:  #4c9aff;
  --t01-bg:      #f0f2f5;
  --t01-text:    #172b4d;

  /* 02. Futuristic Tech — 기술·혁신·AI */
  --t02-primary: #00ffff;
  --t02-accent:  #ff00ff;
  --t02-bg:      #121212;
  --t02-text:    #e0e0e0;

  /* 03. Vibrant Creative — 문화·예술·교육 */
  --t03-primary: #8a2be2;
  --t03-accent:  #ff1493;
  --t03-bg:      #f8f7f4;
  --t03-text:    #1f2937;

  /* 04. Urgent Alert — 경고·위기·리스크 */
  --t04-primary: #ff4d4f;
  --t04-accent:  #b91c1c;
  --t04-bg:      #ffffff;
  --t04-text:    #1f2937;

  /* 05. Earthy Green — 자연·환경·웰빙 */
  --t05-primary: #2e7d32;
  --t05-accent:  #66bb6a;
  --t05-bg:      #fbfaf5;
  --t05-text:    #3d403a;

  /* 06. Elegant Noir — 럭셔리·프리미엄 */
  --t06-primary: #d4af37;
  --t06-accent:  #b0863c;
  --t06-bg:      #191919;
  --t06-text:    #f5f5f5;

  /* 07. Classic Academia — 학술·법률·연구 */
  --t07-primary: #800000;
  --t07-accent:  #a06a3f;
  --t07-bg:      #fdf6e3;
  --t07-text:    #4a443a;

  /* 08. Creative Pop — 스타트업·젊은 타깃 */
  --t08-primary: #ffca28;
  --t08-accent:  #42a5f5;
  --t08-bg:      #ffffff;
  --t08-text:    #212121;

  /* 09. Monochrome Minimal — 미니멀·건축 */
  --t09-primary: #000000;
  --t09-accent:  #555555;
  --t09-bg:      #ffffff;
  --t09-text:    #000000;

  /* 10. Data-Driven Teal — 데이터·대시보드 */
  --t10-primary: #009688;
  --t10-accent:  #4db6ac;
  --t10-bg:      #263238;
  --t10-text:    #cfd8dc;

  /* 11. Warm Faith Editorial — 신앙·공동체·따뜻한 강의 */
  --t11-primary: #8b5e3c;
  --t11-accent:  #d9a441;
  --t11-bg:      #fffaf2;
  --t11-text:    #2f2a24;

  /* 12. Premium Personal Brand — 코치·전문가 (기본 테마) */
  --t12-primary: #1a8754;
  --t12-accent:  #111827;
  --t12-bg:      #ffffff;
  --t12-text:    #1f2937;

  /* 13. Gallery Modern — 예술·전시·작가 */
  --t13-primary: #111111;
  --t13-accent:  #c9a227;
  --t13-bg:      #f7f3ea;
  --t13-text:    #222222;

  /* =========================================================================
     4. STATUS / SEMANTIC COLORS
     ========================================================================= */
  --status-success: #1a8754;
  --status-info:    #0052cc;
  --status-warning: #d97706;
  --status-danger:  #d92d20;
  --status-neutral: var(--ink-500);

  --note-source:  #6b7280;   /* "출처 미제공" / "데이터 없음" 라벨 */
  --note-flag:    #d97706;   /* "확인 필요" */
  --note-input:   #0052cc;   /* "사용자 입력 필요" */

  /* =========================================================================
     5. SPACING — 4px 베이스
     ========================================================================= */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  /* =========================================================================
     6. RADIUS / SHADOW / BORDER
     ========================================================================= */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 999px;

  --shadow-1: 0 1px 2px rgba(15,17,20,.05), 0 1px 1px rgba(15,17,20,.04);
  --shadow-2: 0 2px 6px rgba(15,17,20,.06), 0 4px 12px rgba(15,17,20,.05);
  --shadow-3: 0 8px 24px rgba(15,17,20,.08), 0 2px 6px rgba(15,17,20,.05);
  --shadow-4: 0 20px 48px rgba(15,17,20,.12), 0 4px 12px rgba(15,17,20,.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.06);

  --border-thin:  1px solid var(--border-1);
  --border-med:   1.5px solid var(--border-2);
  --border-strong:2px solid var(--ink-800);

  /* =========================================================================
     7. LAYOUT / CANVAS
     ========================================================================= */
  --canvas-slide-w:   1280px;   /* HTML 슬라이드 덱 표준 */
  --canvas-slide-h:   720px;
  --canvas-pptx-w:    13.333in; /* PPTX 규격 */
  --canvas-pptx-h:    7.5in;
  --canvas-a4-w:      210mm;
  --canvas-a4-h:      297mm;

  --container-max:   1200px;
  --gutter:          24px;

  /* =========================================================================
     8. MOTION — 과도한 애니메이션 금지, fade/slide 0.3~0.4s
     ========================================================================= */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
  --dur-quick:  180ms;
  --dur-base:   300ms;
  --dur-slide:  400ms;
}

/* =========================================================================
   9. RESET-LIKE BASELINE (opt-in via .abk-doc)
   ========================================================================= */
.abk-doc {
  font: var(--type-body);
  color: var(--fg-1);
  background: var(--bg-1);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.abk-doc h1 { font: var(--type-h1); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-6); }
.abk-doc h2 { font: var(--type-h2); letter-spacing: var(--ls-snug);  margin: 0 0 var(--sp-5); }
.abk-doc h3 { font: var(--type-h3); letter-spacing: var(--ls-snug);  margin: 0 0 var(--sp-4); }
.abk-doc h4 { font: var(--type-h4); margin: 0 0 var(--sp-3); }
.abk-doc h5 { font: var(--type-h5); margin: 0 0 var(--sp-2); }
.abk-doc h6 { font: var(--type-h6); margin: 0 0 var(--sp-2); }
.abk-doc p  { font: var(--type-body); margin: 0 0 var(--sp-4); color: var(--fg-2); }
.abk-doc .lead { font: var(--type-lead); color: var(--fg-2); }
.abk-doc .caption { font: var(--type-caption); color: var(--fg-3); letter-spacing: var(--ls-wide); text-transform: uppercase; }