/* AWC Workshop · Design Tokens
 * Mobile-first (default = phone, min-width breakpoints scale up)
 * Base: dark · Accent: gradient #FF6B6B → #FFA500
 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

:root {
  /* Surface (dark · 5 tiers) */
  --bg:             #0a0a0a;
  --bg-elevated:    #0a0a0a;   /* unified with --bg; section tier retained semantically */
  --surface:        #141414;
  --surface-hover:  #1a1a1a;
  --surface-raised: #1c1c1c;

  /* Border */
  --border-subtle:  #1f1f1f;
  --border-default: #2a2a2a;
  --border-strong:  #3a3a3a;

  /* Foreground */
  --fg:             #fafafa;
  --text-1:         #e8e8e8;
  --text-2:         #b7b7b7;
  --text-3:         #9a9a9a;
  --text-4:         #909090;

  /* ── Accent system — gradient-only ────────────────────────────────
   * 원칙:
   *   1. 그라디언트는 "포인트 인디케이터" layer에만 (Surface/Body/Structure/Brand X).
   *   2. 그라디언트에 들어간 두 hex(#ff6b6b, #ffa500)는 단색 호출 금지.
   *      단색 강조가 필요하면 무채색 위계(--fg / --text-1 / --text-2)로만.
   *   3. 동위 set(축·step·옵션 등 의미상 한 묶음)은 set 단위로 1 슬롯 차감.
   *      예: axis-glyph 3개(Reduce/Expand/Explore)는 한 묶음이라 fold 정원에서 1로 카운트.
   *
   * Whitelist (강제):
   *   --grad-stroke    → SVG <linearGradient id="grad-stroke"> 호출. 현재: Reduce/Expand/Explore 동위 set.
   *                      (axis-defs 카드의 axis-glyph 3개 + matrix thead의 axis-mark 3개 = 같은 의미체계, 1 슬롯)
   *   --grad-mark-bar  → (1) 비교 강조 영역 fill: vs-us thead 셀, vs-card.is-us 행 background.
   *                      (2) 헤딩 핵심 단어/문장 (background-clip:text via .thesis-text class).
   *                      (3) 데이터 인디케이터 fill: pain-bar-fill (취준 슬럼프·취업 정보 막대).
   *                      현재 .thesis-text 사용처: hero H1 "워크플로우를 설계하는 신입", compare-after H3 동일 텍스트,
   *                      curriculum H2 "3시간", final-cta H2 "워크플로우 설계자", apply card "D-21", price "무료".
   *   --grad-ambient-top    → 상단 halo. 현재: hero-shell, final-cta.
   *   --grad-ambient-corner → 코너 halo. 현재: apply-card, price-main, week-list, compare-after.
   *                            ambient = 텍스트 없는 배경 톤. alpha 8% 상한, 최대 3 영역, 한 fold 1 ambient.
   *                            인디케이터 정원(6)과 별도 카운트 (layer 분리).
   *
   * 금지:
   *   - 본문 텍스트에 그라디언트 (background-clip:text 류)
   *   - 로고/워드마크에 그라디언트 (solid 유지)
   *   - 카드/버튼 background 그라디언트
   *   - border-image 그라디언트 보더
   *   - solid #ff6b6b / #ff8a5b / #ffa500 직접 호출 (그라디언트 토큰 안에서만 등장 OK)
   *   - 단색 accent 토큰 정의 (--accent, --accent-solid 등) — 부활 금지
   *   - 페이지 그라디언트 슬롯 6 초과, 한 섹션 2 초과, 한 fold 2 초과
   * ───────────────────────────────────────────────────────────────── */

  /* Gradient stops 단색 노출 토큰 없음. sprite <stop>(#ff6b6b → #ffa500)과 아래 토큰 값을 손으로 동기화. */
  --grad-mark-bar:        linear-gradient(90deg, #ff6b6b 0%, #ffa500 100%);
  /* ambient halo — 텍스트 없는 영역 배경 톤. alpha 0.08 상한, 위치별 2 variant. */
  --grad-ambient-top:     radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255,165,0,0.08), transparent 70%);
  --grad-ambient-corner:  radial-gradient(ellipse 65% 55% at 90% 100%, rgba(255,165,0,0.08), transparent 70%);

  /* Typography */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --font-num:  'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale — fluid clamp(min, vw, max). Mobile = min, Desktop = max */
  --fs-display: clamp(28px, 7vw, 48px);
  --fs-h1:      clamp(22px, 4vw, 32px);
  --fs-h2:      clamp(18px, 2.6vw, 24px);
  --fs-h3:      clamp(16px, 2vw, 18px);
  --fs-body:    16px;        /* never below 16 — mobile readability */
  --fs-small:   14px;
  --fs-caption: 12px;

  /* Line-heights (Korean marketing) */
  --lh-tight:   1.20;
  --lh-snug:    1.35;
  --lh-base:    1.6;
  --lh-relaxed: 1.7;

  /* Weights — three-step */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Letter-spacing — Korean-first negative tracking by size */
  --tracking-display: -0.04em;   /* very large headlines */
  --tracking-h1:      -0.03em;
  --tracking-h2:     -0.025em;
  --tracking-h3:      -0.02em;
  --tracking-base:   -0.01em;    /* body default */
  --tracking-small: -0.005em;
  --tracking-wide:    0.04em;    /* uppercase latin only */

  /* Spacing — mobile-first defaults (small) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  48px;
  --s-9:  64px;       /* section vertical (mobile) */
  --s-10: 88px;       /* hero ↔ body (mobile) */

  /* Radius */
  --r-1:    4px;
  --r-soft: 8px;
  --r-card: 12px;
  --r-lg:   16px;
  --r-pill: 999px;
  --r-tag:  3px;

  /* Border width */
  --bw: 1px;

  /* Shadow */
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.30);

  /* Layout — mobile-first */
  --container-max: 1080px;
  --container-pad: 20px;          /* mobile default (Korean standard) */
  --content-max:   840px;
  --price-rail:    336px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
}

/* ===== Min-width scale-up tiers ===== */
@media (min-width: 768px) {
  :root {
    --container-pad: 28px;
    --s-7: 40px;
    --s-8: 64px;
    --s-9: 88px;
    --s-10: 112px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 32px;
    --s-9: 104px;
    --s-10: 144px;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }

[id] { scroll-margin-top: 100px; }

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 14px;
  background: var(--fg);
  color: var(--bg);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  border-radius: 0 0 var(--r-soft) 0;
  transform: translateY(-100%);
  transition: transform var(--dur-2) var(--ease);
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); outline: none; }

.tnum { font-variant-numeric: tabular-nums; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Korean word-wrap — global */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: pretty;
}

/* Korean headlines — strict word-break, balanced line breaks */
h1, h2, h3, h4, .display, .h1, .h2, .h3 {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Chrome 123+ · Safari TP — remove bracket/quote half-width gaps */
@supports (text-spacing-trim: trim-start) {
  body { text-spacing-trim: trim-start; }
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: var(--r-1); }
button { font-family: inherit; cursor: pointer; }
img, svg { max-width: 100%; display: block; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text-1);
}

::selection { background: rgba(250, 250, 250, 0.18); color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile-only / desktop-only helpers */
.mobile-only { display: block; }
.desktop-only { display: none; }
@media (min-width: 768px) {
  .mobile-only { display: none; }
  .desktop-only { display: block; }
}