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

/* ============================================
   Design Tokens — Apple-Inspired Minimal System
   Pretendard + 포인트 컬러 2색 기반
   ============================================ */

:root {

  /* ─────────────────────────────────────────
     1. COLOR SYSTEM
     ───────────────────────────────────────── */

  /* 포인트 컬러 */
  --color-accent:            #0071e3;   /* Apple Blue — CTA, 링크, 강조 */
  --color-accent-hover:      #0077ed;
  --color-accent-active:     #006edb;
  --color-accent-subtle:     rgba(0, 113, 227, 0.08);
  --color-accent-muted:      rgba(0, 113, 227, 0.12);

  --color-accent-2:          #1d1d1f;   /* Ink Black — 제목, 주요 텍스트 */

  /* 배경 */
  --color-bg:                #ffffff;
  --color-bg-secondary:      #f5f5f7;   /* Apple 시그니처 라이트 그레이 */
  --color-bg-tertiary:       #fbfbfd;
  --color-bg-elevated:       #ffffff;
  --color-bg-grouped:        #f5f5f7;
  --color-bg-translucent:    rgba(255, 255, 255, 0.72);

  /* 텍스트 */
  --color-text-primary:      #1d1d1f;
  --color-text-secondary:    #6e6e73;
  --color-text-tertiary:     #86868b;
  --color-text-quaternary:   #aeaeb2;
  --color-text-on-accent:    #ffffff;
  --color-text-link:         var(--color-accent);

  /* 보더 & 구분선 */
  --color-border:            #d2d2d7;
  --color-border-light:      #e8e8ed;
  --color-border-focus:      var(--color-accent);
  --color-separator:         rgba(0, 0, 0, 0.06);
  --color-separator-opaque:  #e5e5ea;

  /* 시맨틱 */
  --color-success:           #34c759;
  --color-warning:           #ff9f0a;
  --color-error:             #ff3b30;
  --color-info:              var(--color-accent);


  /* ─────────────────────────────────────────
     2. TYPOGRAPHY
     ───────────────────────────────────────── */

  --font-sans:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
                "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono:  "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Font Weight — Pretendard의 가변 굵기 활용 */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* Font Size Scale (Apple 대형 타이포 + 본문 계층) */
  --text-xs:           0.75rem;     /* 12px — 캡션, 라벨 */
  --text-sm:           0.875rem;    /* 14px — 보조 텍스트 */
  --text-base:         1.0625rem;   /* 17px — 본문 (Apple 기본) */
  --text-lg:           1.25rem;     /* 20px */
  --text-xl:           1.5rem;      /* 24px */
  --text-2xl:          2rem;        /* 32px */
  --text-3xl:          2.5rem;      /* 40px */
  --text-4xl:          3rem;        /* 48px — 섹션 헤드라인 */
  --text-5xl:          3.5rem;      /* 56px — 히어로 */
  --text-6xl:          4.5rem;      /* 72px — 대형 히어로 */

  /* Line Height */
  --leading-tight:     1.1;         /* 헤드라인 */
  --leading-snug:      1.25;        /* 서브헤드 */
  --leading-normal:    1.5;         /* 본문 */
  --leading-relaxed:   1.65;        /* 긴 본문 */

  /* Letter Spacing */
  --tracking-tighter:  -0.03em;     /* 대형 헤드라인 */
  --tracking-tight:    -0.022em;    /* 헤드라인 */
  --tracking-normal:   -0.01em;     /* 본문 */
  --tracking-wide:      0.02em;     /* 라벨, 캡션 */


  /* ─────────────────────────────────────────
     3. SPACING SYSTEM (8px 기반 그리드)
     ───────────────────────────────────────── */

  --space-0:     0;
  --space-1:     0.25rem;   /* 4px */
  --space-2:     0.5rem;    /* 8px */
  --space-3:     0.75rem;   /* 12px */
  --space-4:     1rem;      /* 16px */
  --space-5:     1.25rem;   /* 20px */
  --space-6:     1.5rem;    /* 24px */
  --space-8:     2rem;      /* 32px */
  --space-10:    2.5rem;    /* 40px */
  --space-12:    3rem;      /* 48px */
  --space-16:    4rem;      /* 64px */
  --space-20:    5rem;      /* 80px */
  --space-24:    6rem;      /* 96px */
  --space-32:    8rem;      /* 128px — 섹션 간격 */

  /* 섹션 간격 시맨틱 토큰 */
  --section-gap:           var(--space-24);   /* 섹션 사이 여백 */
  --section-gap-sm:        var(--space-16);
  --content-gap:           var(--space-8);    /* 콘텐츠 블록 간격 */
  --element-gap:           var(--space-4);    /* 인접 요소 간격 */


  /* ─────────────────────────────────────────
     4. LAYOUT
     ───────────────────────────────────────── */

  --max-width:           980px;      /* Apple 콘텐츠 폭 */
  --max-width-wide:      1200px;
  --max-width-narrow:    692px;      /* 읽기 전용 영역 */

  --page-margin:         max(1.5rem, 5vw);   /* 반응형 좌우 여백 */

  --header-height:       48px;
  --header-blur:         20px;


  /* ─────────────────────────────────────────
     5. RADIUS
     ───────────────────────────────────────── */

  --radius-xs:     6px;
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     20px;
  --radius-2xl:    24px;
  --radius-full:   9999px;


  /* ─────────────────────────────────────────
     6. SHADOWS
     ───────────────────────────────────────── */

  --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.04),
                   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.06),
                   0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.08),
                   0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl:     0 16px 48px rgba(0, 0, 0, 0.10),
                   0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-card:   0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.10);


  /* ─────────────────────────────────────────
     7. MOTION
     ───────────────────────────────────────── */

  --duration-fast:       120ms;
  --duration-normal:     250ms;
  --duration-slow:       400ms;
  --duration-slower:     600ms;

  --ease-default:        cubic-bezier(0.25, 0.1, 0.25, 1);       /* ease */
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);          /* Apple 기본 */
  --ease-in-out:         cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);      /* 바운스 */

  --transition-colors:   color var(--duration-fast) var(--ease-default),
                         background-color var(--duration-fast) var(--ease-default),
                         border-color var(--duration-fast) var(--ease-default);
  --transition-shadow:   box-shadow var(--duration-normal) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-all:      all var(--duration-normal) var(--ease-out);


  /* ─────────────────────────────────────────
     8. Z-INDEX
     ───────────────────────────────────────── */

  --z-base:        0;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-header:      300;
  --z-overlay:     400;
  --z-modal:       500;
  --z-toast:       600;
  --z-tooltip:     700;


  /* ─────────────────────────────────────────
     9. COMPONENT TOKENS — Button
     ───────────────────────────────────────── */

  /* Primary (Filled) */
  --btn-primary-bg:           var(--color-accent);
  --btn-primary-bg-hover:     var(--color-accent-hover);
  --btn-primary-bg-active:    var(--color-accent-active);
  --btn-primary-text:         var(--color-text-on-accent);
  --btn-primary-radius:       var(--radius-full);

  /* Secondary (Outline) */
  --btn-secondary-bg:         transparent;
  --btn-secondary-bg-hover:   var(--color-accent-subtle);
  --btn-secondary-text:       var(--color-accent);
  --btn-secondary-border:     var(--color-accent);
  --btn-secondary-radius:     var(--radius-full);

  /* Ghost (Text-only) */
  --btn-ghost-text:           var(--color-accent);
  --btn-ghost-text-hover:     var(--color-accent-hover);

  /* Size Scale */
  --btn-height-sm:            32px;
  --btn-height-md:            40px;
  --btn-height-lg:            48px;

  --btn-padding-sm:           var(--space-2) var(--space-4);
  --btn-padding-md:           var(--space-3) var(--space-6);
  --btn-padding-lg:           var(--space-4) var(--space-8);

  --btn-font-sm:              var(--text-xs);
  --btn-font-md:              var(--text-sm);
  --btn-font-lg:              var(--text-base);
  --btn-font-weight:          var(--weight-medium);


  /* ─────────────────────────────────────────
     10. COMPONENT TOKENS — Card
     ───────────────────────────────────────── */

  --card-bg:                  var(--color-bg-elevated);
  --card-bg-hover:            var(--color-bg-elevated);
  --card-border:              none;
  --card-radius:              var(--radius-xl);
  --card-padding:             var(--space-8);
  --card-padding-sm:          var(--space-5);
  --card-shadow:              var(--shadow-card);
  --card-shadow-hover:        var(--shadow-card-hover);
  --card-transition:          var(--transition-shadow), var(--transition-transform);

  /* Card — Tinted (회색 배경 위 사용) */
  --card-tinted-bg:           var(--color-bg);
  --card-tinted-shadow:       none;
  --card-tinted-border:       1px solid var(--color-border-light);

  /* Card — Flat (배경 구분 없이 사용) */
  --card-flat-bg:             var(--color-bg-secondary);
  --card-flat-radius:         var(--radius-lg);


  /* ─────────────────────────────────────────
     11. COMPONENT TOKENS — Typography
     ───────────────────────────────────────── */

  /* 히어로 헤드라인 */
  --typo-hero-size:           var(--text-6xl);
  --typo-hero-weight:         var(--weight-bold);
  --typo-hero-leading:        var(--leading-tight);
  --typo-hero-tracking:       var(--tracking-tighter);
  --typo-hero-color:          var(--color-text-primary);

  /* 섹션 헤드라인 */
  --typo-headline-size:       var(--text-4xl);
  --typo-headline-weight:     var(--weight-semibold);
  --typo-headline-leading:    var(--leading-tight);
  --typo-headline-tracking:   var(--tracking-tight);
  --typo-headline-color:      var(--color-text-primary);

  /* 서브헤드 */
  --typo-subhead-size:        var(--text-xl);
  --typo-subhead-weight:      var(--weight-semibold);
  --typo-subhead-leading:     var(--leading-snug);
  --typo-subhead-tracking:    var(--tracking-normal);
  --typo-subhead-color:       var(--color-text-primary);

  /* 본문 */
  --typo-body-size:           var(--text-base);
  --typo-body-weight:         var(--weight-regular);
  --typo-body-leading:        var(--leading-relaxed);
  --typo-body-tracking:       var(--tracking-normal);
  --typo-body-color:          var(--color-text-secondary);

  /* 캡션 */
  --typo-caption-size:        var(--text-sm);
  --typo-caption-weight:      var(--weight-regular);
  --typo-caption-leading:     var(--leading-normal);
  --typo-caption-color:       var(--color-text-tertiary);

  /* 라벨 */
  --typo-label-size:          var(--text-xs);
  --typo-label-weight:        var(--weight-semibold);
  --typo-label-tracking:      var(--tracking-wide);
  --typo-label-color:         var(--color-text-tertiary);
}


/* ============================================
   DARK MODE
   ============================================ */

[data-theme="dark"] {

  /* 배경 */
  --color-bg:                #000000;
  --color-bg-secondary:      #1c1c1e;
  --color-bg-tertiary:       #2c2c2e;
  --color-bg-elevated:       #1c1c1e;
  --color-bg-grouped:        #1c1c1e;
  --color-bg-translucent:    rgba(0, 0, 0, 0.72);

  /* 텍스트 */
  --color-text-primary:      #f5f5f7;
  --color-text-secondary:    #a1a1a6;
  --color-text-tertiary:     #8e8e93;
  --color-text-quaternary:   #636366;

  /* 포인트 컬러 (다크에서 밝기 보정) */
  --color-accent:            #2997ff;
  --color-accent-hover:      #40a9ff;
  --color-accent-active:     #1a8aef;
  --color-accent-subtle:     rgba(41, 151, 255, 0.10);
  --color-accent-muted:      rgba(41, 151, 255, 0.16);

  --color-accent-2:          #f5f5f7;

  /* 보더 & 구분선 */
  --color-border:            #38383a;
  --color-border-light:      #2c2c2e;
  --color-separator:         rgba(255, 255, 255, 0.08);
  --color-separator-opaque:  #38383a;

  /* 시맨틱 */
  --color-success:           #30d158;
  --color-warning:           #ffd60a;
  --color-error:             #ff453a;

  /* 그림자 (다크에서는 절제) */
  --shadow-xs:     none;
  --shadow-sm:     0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:     0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-card:   0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.4);

  /* 카드 — 다크 모드에서 보더 추가 */
  --card-border:   1px solid var(--color-border-light);
  --card-tinted-border: 1px solid var(--color-border);
}


/* ============================================
   AUTO DARK (시스템 설정 따라감)
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:                #000000;
    --color-bg-secondary:      #1c1c1e;
    --color-bg-tertiary:       #2c2c2e;
    --color-bg-elevated:       #1c1c1e;
    --color-bg-grouped:        #1c1c1e;
    --color-bg-translucent:    rgba(0, 0, 0, 0.72);

    --color-text-primary:      #f5f5f7;
    --color-text-secondary:    #a1a1a6;
    --color-text-tertiary:     #8e8e93;
    --color-text-quaternary:   #636366;

    --color-accent:            #2997ff;
    --color-accent-hover:      #40a9ff;
    --color-accent-active:     #1a8aef;
    --color-accent-subtle:     rgba(41, 151, 255, 0.10);
    --color-accent-muted:      rgba(41, 151, 255, 0.16);

    --color-accent-2:          #f5f5f7;

    --color-border:            #38383a;
    --color-border-light:      #2c2c2e;
    --color-separator:         rgba(255, 255, 255, 0.08);
    --color-separator-opaque:  #38383a;

    --color-success:           #30d158;
    --color-warning:           #ffd60a;
    --color-error:             #ff453a;

    --shadow-xs:     none;
    --shadow-sm:     0 1px 4px rgba(0, 0, 0, 0.3);
    --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl:     0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-card:   0 1px 4px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.4);

    --card-border:   1px solid var(--color-border-light);
    --card-tinted-border: 1px solid var(--color-border);
  }
}


/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}

@media (prefers-contrast: high) {
  :root {
    --color-border:       #000000;
    --color-border-light: #333333;
    --color-separator:    rgba(0, 0, 0, 0.2);
  }

  [data-theme="dark"] {
    --color-border:       #ffffff;
    --color-border-light: #cccccc;
    --color-separator:    rgba(255, 255, 255, 0.2);
  }
}


/* ============================================
   RESPONSIVE BREAKPOINTS (참조용 주석)
   mobile:  0 ~ 734px
   tablet:  735px ~ 1068px
   desktop: 1069px+
   ============================================ */

@media (max-width: 734px) {
  :root {
    --typo-hero-size:       var(--text-4xl);
    --typo-headline-size:   var(--text-2xl);
    --typo-subhead-size:    var(--text-lg);
    --typo-body-size:       1rem;

    --section-gap:          var(--space-16);
    --section-gap-sm:       var(--space-10);
    --card-padding:         var(--space-6);
    --page-margin:          1.25rem;
  }
}

@media (min-width: 735px) and (max-width: 1068px) {
  :root {
    --typo-hero-size:       var(--text-5xl);
    --typo-headline-size:   var(--text-3xl);

    --section-gap:          var(--space-20);
    --page-margin:          max(1.5rem, 4vw);
  }
}