/* =========================================
   SkillLens — 전역 디자인 시스템
   Pretendard 폰트 + 웅진 오렌지 계열
   ========================================= */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  /* 브랜드 컬러 */
  --o:  #F47721;
  --o2: #FF9A52;
  --og: linear-gradient(135deg, var(--o), var(--o2));

  /* 중성 컬러 */
  --bk:   #0A0A0A;
  --g9:   #111111;
  --g8:   #1a1a1a;
  --g7:   #333333;
  --g5:   #666666;
  --g4:   #999999;
  --g3:   #bbbbbb;
  --g2:   #dddddd;
  --g1:   #F5F4F1;
  --wh:   #FAFAF8;
  --bg:   #FFFFFF;

  /* 시맨틱 컬러 */
  --green:  #15803d;
  --blue:   #1d4ed8;
  --amber:  #b45309;
  --red:    #dc2626;
  --purple: #6d28d9;
  --teal:   #0d9488;

  /* 상태 배경 */
  --green-bg:  rgba(21,128,61,0.08);
  --blue-bg:   rgba(29,78,216,0.08);
  --amber-bg:  rgba(180,83,9,0.08);
  --red-bg:    rgba(220,38,38,0.08);
  --orange-bg: rgba(244,119,33,0.08);

  /* 테두리 */
  --bd:   rgba(0,0,0,0.08);
  --bd2:  rgba(0,0,0,0.04);

  /* 타이포그래피 */
  --font:  'Pretendard', -apple-system, sans-serif;
  --mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* 본문 텍스트 색 — 풀블랙(--bk:#0A0A0A)은 눈이 피로해 본문엔 안 씀.
     --bk는 강조/제목용으로 남기고, 일반 본문은 --ink 사용 */
  --ink:       #2a2a2a;   /* 본문 기본 */
  --ink-soft:  #5a5a5a;   /* 보조 텍스트 (= 기존 --g5 계열) */
  --ink-faint: #8a8a8a;   /* 캡션·placeholder */

  /* 타입 스케일 (PC 기준 · 웹 우선 · 시원하게) — 한 개념 = 한 토큰 */
  --fs-hero:    52px;   /* 페이지 대표 제목 */
  --fs-h1:      36px;   /* 섹션 대제목 */
  --fs-h2:      24px;   /* 소제목 */
  --fs-h3:      19px;   /* 작은 제목 */
  --fs-body-lg: 18px;   /* 리드 문장 */
  --fs-body:    16px;   /* 기본 본문 / 입력칸(모바일 줌 방지) */
  --fs-sm:      14px;   /* 보조·라벨 */
  --fs-xs:    12.5px;   /* 캡션·각주 */

  --lh-tight: 1.15;     /* 큰 제목 */
  --lh-snug:  1.35;     /* 소제목 */
  --lh-base:  1.65;     /* 본문 */

  /* 여백 (시원한 레이아웃) */
  --section-y: 112px;   /* 섹션 상하 */
  --page-x:    32px;    /* 페이지 좌우 */
  --maxw:      1120px;  /* 전체 컨테이너 */
  --maxw-text: 720px;   /* 본문 줄길이 제한 */

  /* 레이아웃 */
  --sidebar-w: 240px;
  --header-h:  56px;
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* 그림자 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);

  /* 트랜지션 */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --dur:  0.2s;
}

/* ── 리셋 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font); }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ── 스크롤바 ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--g2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--g3); }

/* ── 공통 유틸리티 ── */
.hidden  { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── 타입 스케일 유틸 (페이지는 px 박지 말고 이 클래스/변수 사용) ── */
.t-hero { font-size: var(--fs-hero); font-weight: 800; line-height: var(--lh-tight); letter-spacing: -.6px; color: var(--bk); }
.t-h1   { font-size: var(--fs-h1);   font-weight: 800; line-height: var(--lh-tight); letter-spacing: -.3px; color: var(--bk); }
.t-h2   { font-size: var(--fs-h2);   font-weight: 700; line-height: var(--lh-snug);  color: var(--bk); }
.t-h3   { font-size: var(--fs-h3);   font-weight: 700; line-height: var(--lh-snug);  color: var(--bk); }
.t-lead { font-size: var(--fs-body-lg); line-height: var(--lh-base); color: var(--ink-soft); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--ink); }
.t-sm   { font-size: var(--fs-sm);   line-height: var(--lh-base); color: var(--ink-soft); }
.t-xs   { font-size: var(--fs-xs);   line-height: var(--lh-base); color: var(--ink-faint); }
.t-accent { color: var(--o); }

/* ── 시원한 레이아웃 헬퍼 ── */
.section { padding: var(--section-y) var(--page-x); }
.container { max-width: var(--maxw); margin: 0 auto; }
.container-text { max-width: var(--maxw-text); margin: 0 auto; }

/* 뱃지 */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
}
.badge-hot    { background: rgba(220,38,38,0.1);  color: var(--red);   }
.badge-grow   { background: rgba(21,128,61,0.1);  color: var(--green); }
.badge-new    { background: rgba(244,119,33,0.1); color: var(--o);     }
.badge-ai     { background: rgba(109,40,217,0.1); color: var(--purple);}

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  transition: all var(--dur) var(--ease);
}
.btn-primary  { background: var(--o); color: #fff; }
.btn-primary:hover { background: var(--o2); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-outline  { background: transparent; color: var(--bk); border: 1px solid var(--bd); }
.btn-outline:hover { border-color: var(--o); color: var(--o); background: var(--orange-bg); }
.btn-ghost    { background: transparent; color: var(--g5); }
.btn-ghost:hover { color: var(--bk); background: var(--g1); }

/* 카드 */
.card {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 24px;
  transition: box-shadow var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow); }
.card-sm { padding: 16px; border-radius: var(--radius-sm); }

/* 칩 */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
  background: var(--g1); color: var(--g7);
  border: 1px solid var(--bd); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.chip:hover, .chip.active {
  background: var(--orange-bg);
  border-color: var(--o);
  color: var(--o);
}

/* 스켈레톤 로딩 */
.skeleton {
  background: linear-gradient(90deg, var(--g1) 25%, var(--g2) 50%, var(--g1) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 로딩 스피너 (귀엽게) */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--g2);
  border-top-color: var(--o);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 로딩 도트 (귀엽게) */
.loading-dots {
  display: inline-flex; gap: 6px; align-items: center;
}
.loading-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--o); animation: dot-bounce 1.2s infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1;   }
}

/* 섹션 헤더 */
.sec-ey    { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--o); margin-bottom: 6px; }
.sec-title { font-size: 22px; font-weight: 800; color: var(--bk); margin-bottom: 8px; }
.sec-sub   { font-size: 14px; color: var(--g5); line-height: 1.6; }

/* 브레드크럼 */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--g4); margin-bottom: 20px;
}
.breadcrumb a { color: var(--g4); }
.breadcrumb a:hover { color: var(--o); }
.breadcrumb .sep { color: var(--g3); }
.breadcrumb .current { color: var(--bk); font-weight: 600; }

/* 인풋 */
.input-wrap {
  position: relative;
}
.input-wrap input {
  width: 100%; height: 44px;
  padding: 0 40px 0 14px;
  border: 1.5px solid var(--g2);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--bk);
  background: var(--bg);
  transition: border-color var(--dur);
  outline: none;
}
.input-wrap input:focus { border-color: var(--o); }
.input-wrap input::placeholder { color: var(--g4); }

/* 태블릿 이하 */
@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px; --header-h: 52px;
    /* 모바일 타입 스케일 (PC와 분리) */
    --fs-hero:    34px;
    --fs-h1:      27px;
    --fs-h2:      21px;
    --fs-h3:      18px;
    --fs-body-lg: 16px;
    --fs-body:    15.5px;
    --fs-sm:      13.5px;
    --fs-xs:      12px;
    --section-y:  64px;
    --page-x:     20px;
  }
}

/* ══════════════════════════════════════════════════════════════
   디자인 규칙 (docs/design-system.md) — 유일한 기준. 새로 만들지 말고 이거 써라.
   ══════════════════════════════════════════════════════════════ */
:root{
  --fs-display:36px;   /* 랜딩 큰 헤드라인 전용 */
  --fs-title:24px;     /* 페이지·섹션 제목 */
  --fs-subtitle:15px;  /* 컬럼 제목·카드 라벨·버튼 */
  --fs-body:13px;      /* 본문·이름 등 대부분 */
  --fs-caption:11.5px; /* 힌트·작은 라벨·뱃지 */
  --fs-num:24px;       /* 대시보드 빅넘버 예외 */
  --r-control:9px;     /* 버튼·인풋 */
  --r-card:12px;       /* 카드 */
  --r-badge:8px;       /* 뱃지 */
  --r-pill:999px;      /* 알약칩 */
}
/* 글자 크기: 이 6개 유틸만 쓴다 (px 하드코딩 금지) */
.t-display{font-size:var(--fs-display);font-weight:800;color:var(--bk);line-height:1.15}
.t-title{font-size:var(--fs-title);font-weight:800;color:var(--bk);line-height:1.25}
.t-subtitle{font-size:var(--fs-subtitle);font-weight:700;color:var(--bk)}
.t-body{font-size:var(--fs-body);font-weight:400;color:var(--ink-soft)}
.t-caption{font-size:var(--fs-caption);font-weight:500;color:var(--g4)}
.t-num{font-size:var(--fs-num);font-weight:800;color:var(--bk);line-height:1}