/* WANS 디자인 토큰 — PPT 양식과 완벽 동일.
 * 사장님 홈페이지 (wans.quest) + 트렌드 리포트 PDF 와 같은 디자인 언어.
 * 출처: WANS_PPT_Template/STYLE_GUIDE.md
 */

:root {
  /* 컬러 팔레트 (6단계 그라데이션) */
  --wans-bg:     #EAEEF4;   /* 슬라이드 배경 (옅은 푸른 회색) */
  --wans-light:  #D2D6DC;   /* 테두리·구분선 */
  --wans-mid:    #949DA8;   /* 푸터·부가 정보·메타 */
  --wans-dark2:  #37424C;   /* 본문 텍스트 (기본) */
  --wans-dark1:  #121D2B;   /* 페이지 제목·헤더·강조 텍스트 */
  --wans-white:  #FFFFFF;   /* 콘텐츠 박스 */

  /* 강조 (Accent) */
  --wans-accent: #0074FF;   /* Electric Blue — 강조·링크·코드·페이지번호 */

  /* 보조 (의미 전달용) */
  --wans-green:  #27AE60;   /* 안전·검증 완료 */
  --wans-red:    #C0392B;   /* 위험·경고 */

  /* 폰트 */
  --wans-font-head: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --wans-font-body: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif;
  --wans-font-dot:  'Galmuri11', 'VT323', 'LED Dot-Matrix', monospace;

  /* 사이즈 스케일 (PPT STYLE_GUIDE.md 와 동일 비율) — rem 기반.
   * 가독성 130% 는 html 의 font-size 를 16px → 20.8px 로 키워 모든 rem 단위 자동 비례 */
  --fs-title:   2rem;
  --fs-eyebrow: 1.125rem;
  --fs-box-title: 0.75rem;
  --fs-body:    0.6875rem;
  --fs-caption: 0.5625rem;
  --fs-led-pn:  0.6875rem;

  /* 여백 (PPT 의 0.2" / 0.1" 등 → web 8px / 4px 단위로 매핑) */
  --space-1: 0.25rem;       /* 4px */
  --space-2: 0.5rem;        /* 8px — 박스 내부 패딩 (상하) */
  --space-3: 0.75rem;       /* 12px */
  --space-4: 1rem;          /* 16px — 박스 내부 패딩 (좌우) */
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* 액센트 바 두께 (PPT 양식의 박스 좌측 0.08" → web 4px) */
  --accent-bar-w: 4px;
}

/* 폰트 — Galmuri11 (한글 도트 폰트, 무료) + Pretendard (한글 본문) + VT323 (영문 도트) */
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-04@1.0/Galmuri11.woff2');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

@font-face {
  font-family: 'Galmuri11';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-04@1.0/Galmuri11.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
 * 글로벌 리셋 + 기본 스타일
 * ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* 가독성 115% — 기본 16px → 18.4px. rem 단위 자동 1.15배.
   * html 과 body 를 분리해야 — `html, body { font-size: var(--fs-body) }` 로 묶으면
   * html 의 font-size 가 작은 rem 값으로 덮어써져 자동 확대가 무력화됨. */
  font-size: 18.4px;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: var(--wans-bg);
  color: var(--wans-dark2);
  font-family: var(--wans-font-body);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow: hidden;  /* 데스크탑 메타포 — 페이지 스크롤 X. 창 안에서만 스크롤 */
}

/* ============================================================
 * 점선 구분선 (WANS 양식 표준)
 * ============================================================ */

.wans-dotted {
  border: none;
  border-top: 1.5px dotted var(--wans-mid);
  margin: var(--space-3) 0;
}

.wans-dotted-accent {
  border-top-color: var(--wans-accent);
}

.wans-dotted-light {
  border-top-color: var(--wans-light);
}

/* ============================================================
 * 텍스트 유틸 — LED 폰트
 * ============================================================ */

.wans-led {
  font-family: var(--wans-font-dot);
  letter-spacing: 0.05em;
}

.wans-eyebrow {
  font-family: var(--wans-font-dot);
  font-size: var(--fs-eyebrow);
  color: var(--wans-dark1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wans-title {
  font-family: var(--wans-font-head);
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--wans-dark1);
  margin: 0;
}

.wans-accent-color {
  color: var(--wans-accent);
}

.wans-mid-color {
  color: var(--wans-mid);
}

/* ============================================================
 * 박스 (좌측 액센트 바 + 흰 배경)  — PPT 양식의 콘텐츠 박스
 * ============================================================ */

.wans-box {
  position: relative;
  background: var(--wans-white);
  border: 1px solid var(--wans-light);
  padding: var(--space-3) var(--space-4);
  padding-left: calc(var(--space-4) + var(--accent-bar-w));
}

.wans-box::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--accent-bar-w);
  background: var(--wans-accent);
}

.wans-box--muted::before {
  background: var(--wans-mid);
}

.wans-box--bg {
  background: var(--wans-bg);
}

/* ============================================================
 * 버튼 — PPT 의 OK 버튼 톤
 * ============================================================ */

.wans-btn {
  display: inline-block;
  font-family: var(--wans-font-dot);
  font-size: var(--fs-body);
  letter-spacing: 0.05em;
  padding: var(--space-2) var(--space-4);
  background: var(--wans-accent);
  color: var(--wans-white);
  border: 1px solid var(--wans-dark1);
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
}

.wans-btn:hover {
  background: var(--wans-dark1);
}

.wans-btn--ghost {
  background: var(--wans-white);
  color: var(--wans-dark1);
  border-color: var(--wans-mid);
}

.wans-btn--ghost:hover {
  background: var(--wans-bg);
}