/* Hallmark · genre: modern-minimal · macrostructure: Split Studio hero + alternating feature bands (main reference: rulebase.co) · theme: custom · nav: N11 · footer: Ft1
 * theme: custom · vibe: "따뜻한 회색 바탕 위 제품 화면, 네이비 면과 레드 행동색" · axes: light / neo-grotesk / warm
 * display/body: Pretendard Variable · outlier: IBM Plex Mono (software version numbers only)
 *
 * 디자인을 바꿀 때는 이 파일의 값만 고치면 됩니다. style.css 는 여기 이름만 참조합니다.
 *
 * 값의 출처 — rulebase.co 계산된 스타일 (2026-10-09, 1440px에서 측정)
 *   바탕 #efedeb · 카드면 #e8e5e3 · 타일 #e4e1df · 선 #d9d7d5 · 글자 #1e1e1e · 밝은 글자 #f7f7f4
 *   카드: 흰 면, 모서리 4px, 그림자 0 16px 48px rgba(0,0,0,.13) + 0 2px 8px rgba(0,0,0,.06)
 *   버튼: 모서리 2px, 안쪽 여백 6px 12px, 높이 36px, 16px/24px
 *   말풍선: #f3f2f2, 모서리 3px, 8px 12px, 13px/19px · 경고 말풍선 #fbebed 글자 #8c1f29 안쪽 테두리 #cc3542
 *   제목: H2 60px/60px -1.2px · H2 작은 40px/44px -0.8px · H1(히어로) 46px/47px -1.38px · H3 16px/18px -0.32px
 *   본문: 16px/24px -0.09px · 작은 글 14px/20px · 섹션 위 여백 80~120px · 좌우 여백 40px · 4단 격자 간격 약 40px
 * 브랜드에서 가져온 것: 강조색 자리(레퍼런스 주황 #fe4c00)에 브랜드 레드, 어두운 면에 브랜드 네이비, 로고, 이름.
 */
:root {
  /* paper & surfaces — rulebase 바탕 체계 */
  --color-paper:      #efedeb;
  --color-paper-2:    #e8e5e3;
  --color-paper-3:    #e4e1df;
  --color-surface:    #ffffff;
  --color-bubble:     #f3f2f2;
  --color-rule:       #d9d7d5;
  --color-rule-2:     #e2dfdc;
  --color-field-line: #8a8682;   /* 입력칸 테두리 (바탕 대비 3:1 이상) */

  /* ink — rulebase 글자색 */
  --color-ink:        #1e1e1e;
  --color-ink-2:      #3f3d3b;
  --color-muted:      #605d5a;

  /* deep band — 브랜드 네이비 면 (rulebase 어두운 면 #1a1716 자리) */
  --color-deep:        oklch(21% 0.07 265);
  --color-deep-2:      oklch(26% 0.07 265);
  --color-deep-rule:   oklch(34% 0.055 265);
  --color-deep-ink:    #f7f7f4;
  --color-deep-muted:  oklch(80% 0.02 262);
  --color-deep-accent: oklch(72% 0.15 30);

  /* accent — 브랜드 레드 (rulebase 주황 CTA 자리: 버튼, 선화, 포커스, 현재 위치) */
  --color-accent:      oklch(56% 0.205 27);
  --color-accent-text: oklch(48% 0.19 27);
  --color-accent-soft: #fbebed;
  --color-accent-ring: #cc3542;
  --color-accent-deep: #8c1f29;
  --color-cta:         oklch(56% 0.205 27);
  --color-cta-hover:   oklch(49% 0.19 27);
  --color-cta-ink:     #f7f7f4;
  --color-focus:       oklch(57% 0.22 27);
  --color-error:       #8c1f29;

  /* relief texture (SVG 조명 필터의 빛 색) */
  --color-relief-light: #f1ece4;
  --color-relief-2:     #e6e9ef;

  /* status — 점(dot)으로만 쓴다. 글자는 잉크색 */
  --color-live:  oklch(52% 0.13 155);
  --color-build: oklch(58% 0.13 70);
  --color-plan:  oklch(55% 0.03 262);

  /* overlays (투명도는 덮개·그림자에만) */
  --color-scrim:  rgb(0 0 0 / 0.28);
  --shadow-whisper: 0 2px 8px rgb(0 0 0 / 0.06);
  --shadow-panel:   0 16px 48px rgb(0 0 0 / 0.13), 0 2px 8px rgb(0 0 0 / 0.06);

  /* type */
  --font-display: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-body:    "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-2xs:  0.75rem;      /* 12px */
  --text-ui:   0.8125rem;    /* 13px — 제품 화면 안 글자 */
  --text-xs:   0.875rem;     /* 14px */
  --text-sm:   0.9375rem;
  --text-base: 1rem;         /* 16px */
  --text-lg:   1.125rem;
  --text-hero: clamp(2.125rem, 1.6vw + 1.5rem, 2.875rem);   /* → 46px */
  --text-2xl:  clamp(1.75rem, 1.4vw + 1.2rem, 2.5rem);      /* → 40px */
  --text-display: clamp(2.125rem, 3vw + 1.1rem, 3.75rem);   /* → 60px */

  --leading-tight: 1.12;     /* rulebase 1.0~1.1, 한글 받침이 닿지 않게 1.12 */
  --leading-body:  1.6;
  --leading-ui:    1.46;
  --tracking-display: -0.02em;
  --tracking-hero: -0.03em;
  --tracking-body: -0.005em;
  --weight-display: 500;     /* rulebase 400, 한글 획이 얇아 500 */

  /* space — 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 7.5rem;       /* 120px — rulebase 섹션 위 여백 */
  --page-gutter: clamp(1.25rem, 2.8vw, 2.5rem);   /* → 40px */
  --page-max: 85rem;         /* 1360px — 1440에서 좌우 40px */
  --grid-gap: 2.5rem;
  --header-h: 4rem;

  /* shape */
  --radius-xs: 2px;          /* 버튼 */
  --radius-sm: 3px;          /* 말풍선, 입력칸 */
  --radius-md: 4px;          /* 카드 */
  --radius-pill: 999px;
  --rule-hair: 1px;
  --rule-axis: 2px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* z — 이름 붙인 단계만 쓴다 */
  --z-raised: 10;
  --z-subnav: 90;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:      #171615;
    --color-paper-2:    #1f1d1c;
    --color-paper-3:    #262423;
    --color-surface:    #22201f;
    --color-bubble:     #2c2a28;
    --color-rule:       #3a3734;
    --color-rule-2:     #2f2c2a;
    --color-field-line: #8a8682;
    --color-ink:        #f2f0ed;
    --color-ink-2:      #d6d2cd;
    --color-muted:      #aaa49d;
    --color-deep:        oklch(17% 0.05 265);
    --color-deep-2:      oklch(21% 0.055 265);
    --color-deep-rule:   oklch(30% 0.05 265);
    --color-deep-ink:    #f7f7f4;
    --color-deep-muted:  oklch(78% 0.02 262);
    --color-deep-accent: oklch(74% 0.15 30);
    --color-accent:      oklch(68% 0.17 27);
    --color-accent-text: oklch(74% 0.15 27);
    --color-accent-soft: #3a1d20;
    --color-accent-ring: #d45a64;
    --color-accent-deep: #f3c5ca;
    --color-cta:         oklch(68% 0.17 27);
    --color-cta-hover:   oklch(74% 0.15 27);
    --color-cta-ink:     #171615;
    --color-focus:       oklch(72% 0.17 27);
    --color-error:       #f3c5ca;
    --color-relief-light: #6f6a63;
    --color-relief-2:     #5e6470;
    --color-live:  oklch(74% 0.14 155);
    --color-build: oklch(80% 0.13 75);
    --color-plan:  oklch(70% 0.03 262);
    --color-scrim:  rgb(0 0 0 / 0.55);
    --shadow-whisper: 0 2px 8px rgb(0 0 0 / 0.35);
    --shadow-panel:   0 16px 48px rgb(0 0 0 / 0.45), 0 2px 8px rgb(0 0 0 / 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-paper:      #171615;
  --color-paper-2:    #1f1d1c;
  --color-paper-3:    #262423;
  --color-surface:    #22201f;
  --color-bubble:     #2c2a28;
  --color-rule:       #3a3734;
  --color-rule-2:     #2f2c2a;
  --color-field-line: #8a8682;
  --color-ink:        #f2f0ed;
  --color-ink-2:      #d6d2cd;
  --color-muted:      #aaa49d;
  --color-deep:        oklch(17% 0.05 265);
  --color-deep-2:      oklch(21% 0.055 265);
  --color-deep-rule:   oklch(30% 0.05 265);
  --color-deep-ink:    #f7f7f4;
  --color-deep-muted:  oklch(78% 0.02 262);
  --color-deep-accent: oklch(74% 0.15 30);
  --color-accent:      oklch(68% 0.17 27);
  --color-accent-text: oklch(74% 0.15 27);
  --color-accent-soft: #3a1d20;
  --color-accent-ring: #d45a64;
  --color-accent-deep: #f3c5ca;
  --color-cta:         oklch(68% 0.17 27);
  --color-cta-hover:   oklch(74% 0.15 27);
  --color-cta-ink:     #171615;
  --color-focus:       oklch(72% 0.17 27);
  --color-error:       #f3c5ca;
  --color-relief-light: #6f6a63;
  --color-relief-2:     #5e6470;
  --color-live:  oklch(74% 0.14 155);
  --color-build: oklch(80% 0.13 75);
  --color-plan:  oklch(70% 0.03 262);
  --color-scrim:  rgb(0 0 0 / 0.55);
  --shadow-whisper: 0 2px 8px rgb(0 0 0 / 0.35);
  --shadow-panel:   0 16px 48px rgb(0 0 0 / 0.45), 0 2px 8px rgb(0 0 0 / 0.3);
  color-scheme: dark;
}