/*! ==========================================================================
 *  ambleworks.css  ·  AmbleWorks Design System — Concept A "Quiet Signal" 적용판
 *  v3.0 · 2026.08.09 · ambleworks.com
 *
 *  Amble works. — 사람의 속도로 걷고, 그리고 작동한다.
 *
 *  이력
 *    v1  최초 CI 확정판 — 빨강(#D6281A) + Pretendard/Inter, 그림자 카드
 *    v2  타이포 스케일 확대 + 헤어라인 깊이 + 그레인/그라디언트 메시 (색·폰트는 v1 유지)
 *    v3  ci_inovation/ Concept A 채택 — 색·폰트·로고를 전부 새로 그림 (지금 이 파일)
 *
 *  v2 대비 바뀐 것 — 근거는 ci_inovation/CI_혁신안.html, concept-a.css 참고
 *    · 브랜드 원색을 경보성 빨강에서 흙빛 테라코타(클레이, #C1552B)로 교체
 *      (변수명 --aw-red-*는 유지 — 연결된 모든 컴포넌트를 안전하게 보존하기 위해)
 *    · 위험(danger) 상태는 브랜드색과 분리해 진짜 빨강을 별도로 둠 — 에러가 클레이색으로
 *      바뀌어 안 보이는 문제를 방지
 *    · 잉크·다크 팔레트를 순수 회색에서 따뜻한 흙톤 뉴트럴로 교체
 *    · 본문 서체 1순위를 Plus Jakarta Sans(라운드 그로테스크)로 교체 — Pretendard는 한글 폴백
 *    · 모서리를 전반적으로 더 둥글게(카드 20px), 카드 그림자는 완전히 제거(헤어라인만)
 *    · 그레인 블렌드 모드를 라이트에서 multiply로 — 종이 질감에 더 가깝게
 *    · 네오브루탈리즘 플랫 팝 섀도우(.aw-card--pop 등, v2에서 추가)는 제거 — Concept A의
 *      "부드러움" 언어와 맞지 않아 뺐다. 그 언어를 쓰고 싶다면 ci_inovation/concept-c.css 참고
 *
 *  구조
 *    01 layers        @layer 선언
 *    02 primitives    원시 토큰 (색 램프 · 원본 수치)
 *    03 semantics     의미 토큰 (표면 · 텍스트 · 테두리 · 상태)
 *    04 dark          다크 모드 오버라이드
 *    05 reset         최소 리셋
 *    06 base          타이포 기본값
 *    07 layout        컨테이너 · 섹션 · 그리드 · 스택
 *    08 components    버튼 · 폼 · 카드 · 내비 · 배지 · 알럿 · 표 · 요금표 · 탭 …
 *    09 utilities     최소 유틸리티
 *    10 확장 유틸리티  그레인 · 그라디언트 메시 · 시그니처 언더라인
 *
 *  원칙
 *    · 시그니처 색은 한 화면에 하나, 면적은 넓히지 않는다 — 색이 빨강에서 클레이로
 *      바뀌었을 뿐, "한 색만 확신 있게 쓴다"는 원칙 자체는 그대로다.
 *    · 여백이 브랜드의 일부다. 화면을 정보로 꽉 채우지 않는다.
 *    · 깊이는 그림자가 아니라 헤어라인 + 표면 단차로 낸다. 카드에 그림자를 쓰지 않는다.
 *    · 모서리는 둥글게, 어조는 부드럽게 — Concept A는 "온기"가 핵심이다.
 * ========================================================================== */

/* ── 01 layers ─────────────────────────────────────────────────────────── */
@layer aw.reset, aw.tokens, aw.base, aw.layout, aw.components, aw.utilities;

/* ── 02 primitives ─────────────────────────────────────────────────────── */
@layer aw.tokens {
:root {
  /* 브랜드 원색 — CI 혁신안 Concept A "Quiet Signal" 적용 (2026.08.09).
     변수명은 --aw-red-*를 유지한다(연결된 컴포넌트 전부를 안전하게 유지하기 위해) —
     실제 값은 경보성 빨강이 아니라 흙빛 테라코타(클레이)다. */
  --aw-red-50:#FBF0EA;  --aw-red-100:#F6DFD1; --aw-red-200:#EABC9E; --aw-red-300:#DD9367;
  --aw-red-400:#CE6E45; --aw-red-500:#C1552B; --aw-red-600:#9A4020; --aw-red-700:#7A3319;
  --aw-red-800:#5C2612; --aw-red-900:#401A0C;

  /* 보조 악센트 — 세이지(올리브그린). 배지 등 2차 강조 전용, 화면 주역은 아니다 */
  --aw-sage-50:#F2F4EE;  --aw-sage-100:#E7EBE0; --aw-sage-200:#D3DAC5; --aw-sage-300:#B7C2A0;
  --aw-sage-400:#96A57A; --aw-sage-500:#6B7A5E; --aw-sage-600:#566349; --aw-sage-700:#434D39;
  --aw-sage-800:#313829; --aw-sage-900:#21261C;

  /* 잉크 — Concept A: 종이/흙 톤 중립색. 순수 회색이 아니라 살짝 데운 브라운 뉴트럴 */
  --aw-ink-50:#FCF9F4;  --aw-ink-100:#F7F2EA; --aw-ink-200:#EFE7D8; --aw-ink-300:#E2D8C4;
  --aw-ink-400:#C7BBA0; --aw-ink-500:#9A8E76; --aw-ink-600:#6F6555; --aw-ink-700:#5B5142;
  --aw-ink-800:#3D362A; --aw-ink-900:#2B241C;

  --aw-blue-50:#F0F3FC;  --aw-blue-100:#DEE5F9; --aw-blue-200:#B9C9F6; --aw-blue-300:#86A2F1;
  --aw-blue-400:#4773EE; --aw-blue-500:#123FBE; --aw-blue-600:#0E35A5; --aw-blue-700:#0B2A82;
  --aw-blue-800:#092163; --aw-blue-900:#081947;

  --aw-yellow-50:#FDF9EF;  --aw-yellow-100:#FCF4DB; --aw-yellow-200:#FCE9B3; --aw-yellow-300:#FCDA7B;
  --aw-yellow-400:#FFCA36; --aw-yellow-500:#FFC72C; --aw-yellow-600:#E0A800; --aw-yellow-700:#CB9500;
  --aw-yellow-800:#9B7200; --aw-yellow-900:#6F5202;

  --aw-green-50:#F0FCF7;  --aw-green-100:#DFF9ED; --aw-green-200:#BAF4DA; --aw-green-300:#88EFC0;
  --aw-green-400:#2FB577; --aw-green-500:#0E7C4A; --aw-green-600:#0B6C40; --aw-green-700:#095532;
  --aw-green-800:#074026; --aw-green-900:#062E1C;

  /* Concept A 다크 — 따뜻한 흙빛 다크(중립 회색이 아니라 짙은 브라운) */
  --aw-dark-canvas:#171310; --aw-dark-1:#211C17; --aw-dark-2:#2B241D;
  --aw-dark-3:#362E24;      --aw-dark-line:#3A3226; --aw-dark-line-strong:#4A4030;

  /* ── 타이포그래피 ────────────────────────────────────────────────────
     Concept A: 라운드 그로테스크 Plus Jakarta Sans를 1순위로 — 한글 글리프는
     자동으로 Pretendard로 폴백된다(브라우저가 글리프 단위로 대체함, 별도 처리 불요).
     로고타입은 전용 작도(AmbleWorks Construct). 본문에는 절대 쓰지 않는다. */
  --aw-font-sans: "Plus Jakarta Sans", "Pretendard Variable", Pretendard,
                  -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
                  "Noto Sans KR", system-ui, sans-serif;
  --aw-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
                  Menlo, Consolas, monospace;

  /* 크기 — v2: 히어로급을 시장 상단(2026 트렌드: "oversized, assertive type")으로 재설정.
     최대값을 v1 대비 +40~60% 키우고, 좁은 화면에서는 v1과 비슷하게 시작해 큰 화면에서 확 벌어지게 clamp. */
  --aw-text-display-1: clamp(2.75rem, 0.9rem + 9.2vw, 6.5rem);   /* 44 → 104 (v1: 40→64) */
  --aw-text-display-2: clamp(2.25rem, 1rem + 6vw, 4.75rem);      /* 36 → 76 (v1: 34→52) */
  --aw-text-h1:        clamp(1.875rem, 1.2rem + 3.2vw, 3rem);    /* 30 → 48 (v1: 28→40) */
  --aw-text-h2:        2.25rem;   /* 36 (v1: 32) */
  --aw-text-h3:        1.625rem;  /* 26 (v1: 24) */
  --aw-text-h4:        1.25rem;   /* 20 */
  --aw-text-lead:      1.3125rem; /* 21 (v1: 20) */
  --aw-text-body:      1rem;      /* 16 */
  --aw-text-sm:        0.875rem;  /* 14 */
  --aw-text-xs:        0.8125rem; /* 13 */
  --aw-text-overline:  0.6875rem; /* 11 */

  /* 행간 — 대형 타이포가 늘어난 만큼 display 계열은 더 촘촘하게 */
  --aw-lh-tight: 0.98;  --aw-lh-heading: 1.18; --aw-lh-snug: 1.4;
  --aw-lh-body: 1.7;    --aw-lh-relaxed: 1.85;

  /* 자간 — v2: 대형 타이포일수록 더 좁혀서 "확신 있는" 인상을 준다(2026 트렌드: tight tracking on bold headlines) */
  --aw-tracking-display: -0.045em; --aw-tracking-h1: -0.035em;
  --aw-tracking-h2: -0.028em;      --aw-tracking-h3: -0.02em;
  --aw-tracking-base: 0;           --aw-tracking-overline: 0.2em;

  --aw-weight-regular:400; --aw-weight-medium:500;
  --aw-weight-semibold:600; --aw-weight-bold:700; --aw-weight-black:800; --aw-weight-heavy:900;

  /* ── 간격 — 4px 베이스. "보폭(stride)" ──────────────────────────────── */
  --aw-space-0:0;      --aw-space-1:.25rem;  --aw-space-2:.5rem;   --aw-space-3:.75rem;
  --aw-space-4:1rem;   --aw-space-5:1.25rem; --aw-space-6:1.5rem;  --aw-space-7:1.75rem;
  --aw-space-8:2rem;   --aw-space-10:2.5rem; --aw-space-12:3rem;   --aw-space-14:3.5rem;
  --aw-space-16:4rem;  --aw-space-20:5rem;   --aw-space-24:6rem;   --aw-space-32:8rem;

  /* ── 레이아웃 ─────────────────────────────────────────────────────── */
  --aw-container:      1200px;  /* 시장 표준 */
  --aw-container-wide: 1360px;
  --aw-container-prose: 68ch;
  --aw-gutter:         1.5rem;  /* 24 */
  --aw-gutter-sm:      1.25rem; /* 20 */
  --aw-section-y:      6rem;    /* 96 */
  --aw-section-y-sm:   3.5rem;  /* 56 */

  /* ── 반경 — Concept A: 각보다 둥긂. 부드러움이 컨셉의 핵심이다 ──────── */
  --aw-radius-xs:4px;  --aw-radius-sm:8px;  --aw-radius-md:12px;
  --aw-radius-lg:16px; --aw-radius-xl:20px; --aw-radius-2xl:28px;
  --aw-radius-pill:999px;
  --aw-radius-button: var(--aw-radius-pill);
  --aw-radius-input:  var(--aw-radius-md);
  --aw-radius-card:   var(--aw-radius-xl);
  --aw-radius-modal:  var(--aw-radius-2xl);
  --aw-radius-mark:   22.37%;   /* 마크 필드와 동일한 스퀘어클 비율 */

  /* ── 깊이 — 헤어라인 우선, 그림자는 부유 요소에만 ──────────────────── */
  /* v2: 흐릿한 다중 블러 그림자를 줄이고 더 얇고 단단하게 — "떠 있는 카드"보다 "붙어 있는 판" 느낌 */
  --aw-shadow-xs: 0 1px 0 rgb(43 36 28 / .05);
  --aw-shadow-sm: 0 1px 0 rgb(43 36 28 / .06), 0 1px 3px rgb(43 36 28 / .05);
  --aw-shadow-md: 0 1px 0 rgb(43 36 28 / .06), 0 4px 10px rgb(43 36 28 / .06);
  --aw-shadow-lg: 0 2px 0 rgb(43 36 28 / .06), 0 10px 24px rgb(43 36 28 / .08);
  --aw-shadow-xl: 0 4px 0 rgb(43 36 28 / .06), 0 20px 40px rgb(43 36 28 / .10);
  --aw-shadow-none: none;

  /* ── 모션 ─────────────────────────────────────────────────────────── */
  --aw-duration-press:100ms; --aw-duration-fast:150ms; --aw-duration-base:200ms;
  --aw-duration-slow:250ms;  --aw-duration-enter:350ms;
  --aw-ease: cubic-bezier(0, 0, .2, 1);            /* ease-out */
  --aw-ease-inout: cubic-bezier(.4, 0, .2, 1);
  --aw-transition: var(--aw-duration-base) var(--aw-ease);

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

/* ── 03 semantics ──────────────────────────────────────────────────────── */
:root, [data-theme="light"] {
  color-scheme: light;

  --aw-canvas:      var(--aw-ink-100);   /* Paper */
  --aw-surface:     #FFFFFF;
  --aw-surface-2:   var(--aw-ink-50);
  --aw-surface-3:   var(--aw-ink-200);
  --aw-surface-inverse: var(--aw-ink-900);
  --aw-overlay:     rgb(20 20 20 / .45);

  --aw-fg:          var(--aw-ink-900);   /* 16.5:1 */
  --aw-fg-muted:    var(--aw-ink-700);   /*  8.2:1 */
  --aw-fg-subtle:   var(--aw-ink-600);   /*  4.8:1 — AA 하한 */
  --aw-fg-disabled: var(--aw-ink-500);
  --aw-fg-inverse:  var(--aw-ink-100);

  --aw-border:        var(--aw-ink-300);
  --aw-border-subtle: var(--aw-ink-200);
  --aw-border-strong: var(--aw-ink-400);

  --aw-brand:         var(--aw-red-500);
  --aw-brand-hover:   var(--aw-red-600);
  --aw-brand-active:  var(--aw-red-700);
  --aw-brand-subtle:  var(--aw-red-50);
  --aw-brand-border:  var(--aw-red-200);
  --aw-brand-fg:      var(--aw-ink-100);  /* 빨강 위의 글자 4.5:1 */
  --aw-brand-text:    var(--aw-red-600);  /* 종이 위의 빨강 글자 5.7:1 */

  --aw-info:    var(--aw-blue-500);  --aw-info-subtle:   var(--aw-blue-50);
  --aw-info-text: var(--aw-blue-600); --aw-info-border:  var(--aw-blue-200);
  --aw-success: var(--aw-green-500); --aw-success-subtle:var(--aw-green-50);
  --aw-success-text: var(--aw-green-700); --aw-success-border: var(--aw-green-200);
  --aw-warning: var(--aw-yellow-500);--aw-warning-subtle:var(--aw-yellow-50);
  --aw-warning-text: var(--aw-yellow-800); --aw-warning-border: var(--aw-yellow-300);
  /* 위험(danger)은 브랜드색(클레이)과 별개로 진짜 빨강을 쓴다 — 에러는 브랜드 톤과 섞이면 안 된다 */
  --aw-danger:  #B91C1C;   --aw-danger-subtle: #FDECEC;
  --aw-danger-text: #B91C1C; --aw-danger-border: #F3C6C6;

  /* 포커스 링은 중립색이다. 빨간 버튼 위에 빨간 링은 보이지 않는다. */
  --aw-focus:      var(--aw-ink-900);
  --aw-focus-halo: var(--aw-canvas);

  --aw-link:       var(--aw-blue-600);
  --aw-link-hover: var(--aw-blue-700);
  --aw-code-bg:    var(--aw-ink-200);
  --aw-selection:  var(--aw-red-100);
}

/* ── 04 dark ───────────────────────────────────────────────────────────── */
/* Ink ↔ Paper 를 반전한다. 빨강은 그대로 두되 텍스트용은 한 단계 밝힌다. */
[data-theme="dark"] {
  color-scheme: dark;

  --aw-canvas:      var(--aw-dark-canvas);
  --aw-surface:     var(--aw-dark-1);
  --aw-surface-2:   var(--aw-dark-2);
  --aw-surface-3:   var(--aw-dark-3);
  --aw-surface-inverse: var(--aw-ink-100);
  --aw-overlay:     rgb(0 0 0 / .65);

  --aw-fg:          var(--aw-ink-100);   /* 16.9:1 */
  --aw-fg-muted:    var(--aw-ink-400);   /* 10.4:1 */
  --aw-fg-subtle:   var(--aw-ink-500);   /*  6.2:1 */
  --aw-fg-disabled: var(--aw-ink-600);
  --aw-fg-inverse:  var(--aw-ink-900);

  --aw-border:        var(--aw-dark-line);
  --aw-border-subtle: #2C2620;
  --aw-border-strong: var(--aw-dark-line-strong);

  --aw-brand:         var(--aw-red-500);
  --aw-brand-hover:   var(--aw-red-400);
  --aw-brand-active:  var(--aw-red-300);
  --aw-brand-subtle:  #2A1810;
  --aw-brand-border:  #4A2C1C;
  --aw-brand-fg:      var(--aw-ink-100);
  --aw-brand-text:    var(--aw-red-400);  /* 어두운 바탕 위 4.9:1 */

  --aw-info-subtle:#101a33; --aw-info-text:var(--aw-blue-300); --aw-info-border:#1d2c52;
  --aw-success-subtle:#0c1f16; --aw-success-text:var(--aw-green-300); --aw-success-border:#16382a;
  --aw-warning-subtle:#241c07; --aw-warning-text:var(--aw-yellow-400); --aw-warning-border:#3d3110;
  /* 위험(danger)은 브랜드색과 별개로 진짜 빨강을 쓴다 */
  --aw-danger-subtle:#2A1310; --aw-danger-text:#F87171; --aw-danger-border:#4A1C16;

  --aw-focus:      var(--aw-ink-100);
  --aw-focus-halo: var(--aw-canvas);
  --aw-link:       var(--aw-blue-300);
  --aw-link-hover: var(--aw-blue-200);
  --aw-code-bg:    var(--aw-dark-2);
  --aw-selection:  #4A2C1C;

  --aw-shadow-xs: 0 1px 0 rgb(0 0 0 / .4);
  --aw-shadow-sm: 0 1px 0 rgb(0 0 0 / .4), 0 1px 3px rgb(0 0 0 / .3);
  --aw-shadow-md: 0 1px 0 rgb(0 0 0 / .4), 0 4px 10px rgb(0 0 0 / .35);
  --aw-shadow-lg: 0 2px 0 rgb(0 0 0 / .4), 0 10px 24px rgb(0 0 0 / .4);
  --aw-shadow-xl: 0 4px 0 rgb(0 0 0 / .4), 0 20px 40px rgb(0 0 0 / .5);
}
/* 사용자가 테마를 고르지 않았으면 OS 설정을 따른다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --aw-canvas:var(--aw-dark-canvas); --aw-surface:var(--aw-dark-1);
    --aw-surface-2:var(--aw-dark-2); --aw-surface-3:var(--aw-dark-3);
    --aw-surface-inverse:var(--aw-ink-100); --aw-overlay:rgb(0 0 0 / .65);
    --aw-fg:var(--aw-ink-100); --aw-fg-muted:var(--aw-ink-400);
    --aw-fg-subtle:var(--aw-ink-500); --aw-fg-disabled:var(--aw-ink-600);
    --aw-fg-inverse:var(--aw-ink-900);
    --aw-border:var(--aw-dark-line); --aw-border-subtle:#2C2620;
    --aw-border-strong:var(--aw-dark-line-strong);
    --aw-brand-hover:var(--aw-red-400); --aw-brand-active:var(--aw-red-300);
    --aw-brand-subtle:#2A1310; --aw-brand-border:#4A1C16; --aw-brand-text:var(--aw-red-400);
    --aw-info-subtle:#101a33; --aw-info-text:var(--aw-blue-300); --aw-info-border:#1d2c52;
    --aw-success-subtle:#0c1f16; --aw-success-text:var(--aw-green-300); --aw-success-border:#16382a;
    --aw-warning-subtle:#241c07; --aw-warning-text:var(--aw-yellow-400); --aw-warning-border:#3d3110;
    --aw-danger-subtle:#2A1310; --aw-danger-text:var(--aw-red-400); --aw-danger-border:#4A1C16;
    --aw-focus:var(--aw-ink-100); --aw-link:var(--aw-blue-300); --aw-link-hover:var(--aw-blue-200);
    --aw-code-bg:var(--aw-dark-2); --aw-selection:#4A1C16;
    --aw-shadow-sm:0 1px 0 rgb(0 0 0 / .4), 0 1px 3px rgb(0 0 0 / .3);
    --aw-shadow-md:0 1px 0 rgb(0 0 0 / .4), 0 4px 10px rgb(0 0 0 / .35);
    --aw-shadow-lg:0 2px 0 rgb(0 0 0 / .4), 0 10px 24px rgb(0 0 0 / .4);
    --aw-shadow-xl:0 4px 0 rgb(0 0 0 / .4), 0 20px 40px rgb(0 0 0 / .5);
  }
}
} /* @layer aw.tokens */

/* ── 05 reset ──────────────────────────────────────────────────────────── */
@layer aw.reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; }
body { min-height: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: keep-all; }
ul[class], ol[class] { list-style: none; padding: 0; }
:where(a) { color: inherit; }
::selection { background: var(--aw-selection); }
:target { scroll-margin-block: 6rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
}

/* ── 06 base ───────────────────────────────────────────────────────────── */
@layer aw.base {
body {
  background: var(--aw-canvas);
  color: var(--aw-fg);
  font-family: var(--aw-font-sans);
  font-size: var(--aw-text-body);
  line-height: var(--aw-lh-body);
  font-weight: var(--aw-weight-regular);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-numeric: tabular-nums;
}
h1,h2,h3,h4 { font-weight: var(--aw-weight-bold); line-height: var(--aw-lh-heading); text-wrap: balance; }
h1 { font-size: var(--aw-text-h1); letter-spacing: var(--aw-tracking-h1); }
h2 { font-size: var(--aw-text-h2); letter-spacing: var(--aw-tracking-h2); }
h3 { font-size: var(--aw-text-h3); letter-spacing: var(--aw-tracking-h3); }
h4 { font-size: var(--aw-text-h4); font-weight: var(--aw-weight-semibold); line-height: var(--aw-lh-snug); }
p  { text-wrap: pretty; }
small { font-size: var(--aw-text-sm); }
code, kbd, samp, pre { font-family: var(--aw-font-mono); font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--aw-border); }
b, strong { font-weight: var(--aw-weight-bold); }

/* 텍스트 스타일 유틸 — 시맨틱 태그와 분리해서 쓸 수 있게 */
.aw-display-1 { font-size: var(--aw-text-display-1); line-height: var(--aw-lh-tight);
  letter-spacing: var(--aw-tracking-display); font-weight: var(--aw-weight-black); text-wrap: balance; }
.aw-display-2 { font-size: var(--aw-text-display-2); line-height: 1.1;
  letter-spacing: var(--aw-tracking-display); font-weight: var(--aw-weight-black); text-wrap: balance; }
.aw-h1 { font-size: var(--aw-text-h1); line-height: var(--aw-lh-heading); letter-spacing: var(--aw-tracking-h1); font-weight: var(--aw-weight-bold); }
.aw-h2 { font-size: var(--aw-text-h2); line-height: var(--aw-lh-heading); letter-spacing: var(--aw-tracking-h2); font-weight: var(--aw-weight-bold); }
.aw-h3 { font-size: var(--aw-text-h3); line-height: 1.3; letter-spacing: var(--aw-tracking-h3); font-weight: var(--aw-weight-bold); }
.aw-h4 { font-size: var(--aw-text-h4); line-height: var(--aw-lh-snug); font-weight: var(--aw-weight-semibold); }
.aw-lead { font-size: var(--aw-text-lead); line-height: 1.62; color: var(--aw-fg-muted); letter-spacing: -.01em; }
.aw-body { font-size: var(--aw-text-body); line-height: var(--aw-lh-body); }
.aw-sm   { font-size: var(--aw-text-sm);   line-height: 1.65; }
.aw-xs   { font-size: var(--aw-text-xs);   line-height: 1.55; }
.aw-overline { font-family: var(--aw-font-mono); font-size: var(--aw-text-overline);
  letter-spacing: var(--aw-tracking-overline); text-transform: uppercase;
  font-weight: var(--aw-weight-semibold); color: var(--aw-brand-text); line-height: 1; }
.aw-mono { font-family: var(--aw-font-mono); font-variant-numeric: tabular-nums; }

.aw-muted  { color: var(--aw-fg-muted); }
.aw-subtle { color: var(--aw-fg-subtle); }
.aw-accent { color: var(--aw-brand-text); }

/* 링크 — 밑줄은 남기되 두껍지 않게 */
.aw-link, .aw-prose a {
  color: var(--aw-link); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .18em;
  transition: color var(--aw-transition), text-decoration-color var(--aw-transition);
}
.aw-link:hover, .aw-prose a:hover { color: var(--aw-link-hover); text-decoration-thickness: 2px; }

/* 포커스 — 두 겹 링. 어떤 배경에서도 읽힌다 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--aw-focus-halo), 0 0 0 4px var(--aw-focus);
  border-radius: var(--aw-radius-sm);
}
}

/* ── 07 layout ─────────────────────────────────────────────────────────── */
@layer aw.layout {
.aw-container { width: 100%; max-width: var(--aw-container); margin-inline: auto; padding-inline: var(--aw-gutter); }
.aw-container--wide  { max-width: var(--aw-container-wide); }
.aw-container--prose { max-width: var(--aw-container-prose); }
@media (max-width: 640px) { .aw-container { padding-inline: var(--aw-gutter-sm); } }

.aw-section { padding-block: var(--aw-section-y); }
.aw-section--tight { padding-block: var(--aw-section-y-sm); }
.aw-section--line  { border-top: 1px solid var(--aw-border-subtle); }
@media (max-width: 768px) { .aw-section { padding-block: var(--aw-section-y-sm); } }

.aw-stack > * + * { margin-top: var(--aw-stack-gap, var(--aw-space-4)); }
.aw-stack--sm { --aw-stack-gap: var(--aw-space-2); }
.aw-stack--lg { --aw-stack-gap: var(--aw-space-8); }
.aw-cluster { display: flex; flex-wrap: wrap; gap: var(--aw-cluster-gap, var(--aw-space-3)); align-items: center; }
.aw-grid { display: grid; gap: var(--aw-grid-gap, var(--aw-space-6)); }
.aw-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.aw-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.aw-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.aw-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px,100%), 1fr)); }
@media (max-width: 900px) { .aw-grid--3, .aw-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .aw-grid--2, .aw-grid--3, .aw-grid--4 { grid-template-columns: 1fr; } }

.aw-prose { max-width: var(--aw-container-prose); }
.aw-prose > * + * { margin-top: var(--aw-space-5); }
.aw-prose h2 { margin-top: var(--aw-space-12); }
.aw-prose h3 { margin-top: var(--aw-space-10); }
.aw-prose ul, .aw-prose ol { padding-left: 1.35em; }
.aw-prose li + li { margin-top: var(--aw-space-2); }
.aw-prose blockquote { border-left: 3px solid var(--aw-brand); padding-left: var(--aw-space-5);
  color: var(--aw-fg-muted); font-size: var(--aw-text-lead); line-height: 1.6; }
}

/* ── 08 components ─────────────────────────────────────────────────────── */
@layer aw.components {

/* ---------- Button ------------------------------------------------------
   높이 44px(md) — 시장 중앙값. 굵기 600 — 800은 소리를 지르는 느낌이 된다. */
.aw-btn {
  --_h: 2.75rem; --_px: 1.25rem; --_fs: var(--aw-text-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: var(--_h); padding-inline: var(--_px);
  font-size: var(--_fs); font-weight: var(--aw-weight-semibold); line-height: 1;
  letter-spacing: -.01em; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--aw-radius-button);
  cursor: pointer; user-select: none;
  transition: background-color var(--aw-transition), border-color var(--aw-transition),
              color var(--aw-transition), transform var(--aw-duration-press) var(--aw-ease),
              box-shadow var(--aw-transition);
}
.aw-btn:active { transform: translateY(1px); }
.aw-btn[disabled], .aw-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.aw-btn--sm { --_h: 2.25rem; --_px: .875rem; --_fs: var(--aw-text-xs); }
.aw-btn--lg { --_h: 3.25rem; --_px: 1.75rem; --_fs: var(--aw-text-body); }
.aw-btn--block { display: flex; width: 100%; }
.aw-btn--icon { --_px: 0; width: var(--_h); }

.aw-btn--primary { background: var(--aw-brand); color: var(--aw-brand-fg); }
.aw-btn--primary:hover { background: var(--aw-brand-hover); }
.aw-btn--primary:active { background: var(--aw-brand-active); }

.aw-btn--secondary { background: var(--aw-surface); color: var(--aw-fg); border-color: var(--aw-border); }
.aw-btn--secondary:hover { background: var(--aw-surface-2); border-color: var(--aw-border-strong); }

.aw-btn--ghost { background: transparent; color: var(--aw-fg-muted); }
.aw-btn--ghost:hover { background: var(--aw-surface-3); color: var(--aw-fg); }

.aw-btn--inverse { background: var(--aw-surface-inverse); color: var(--aw-fg-inverse); }
.aw-btn--inverse:hover { opacity: .88; }

/* 파괴적 액션은 채우지 않는다 — 채운 빨강은 우리의 기본 CTA다 */
.aw-btn--danger { background: transparent; color: var(--aw-danger-text); border-color: var(--aw-danger-border); }
.aw-btn--danger:hover { background: var(--aw-danger-subtle); border-color: var(--aw-danger-text); }

.aw-btn--link { height: auto; padding: 0; background: none; color: var(--aw-link);
  font-weight: var(--aw-weight-medium); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .2em; }
.aw-btn--link:hover { color: var(--aw-link-hover); }
.aw-btn--link:active { transform: none; }

/* ---------- Brand loader — 아치가 뒤집힌다. m → w → m -------------------- */
.aw-loader {
  display: inline-block; width: 1.15em; height: 1em; box-sizing: border-box;
  border: .22em solid currentColor; border-bottom: 0;
  border-radius: .6em .6em 0 0;
  animation: aw-flip 1.5s var(--aw-ease-inout) infinite;
  vertical-align: -.08em;
}
@keyframes aw-flip {
  0%, 34%   { transform: rotate(0deg); }
  50%, 84%  { transform: rotate(180deg); }
  100%      { transform: rotate(360deg); }
}
.aw-btn .aw-loader { font-size: .9em; }

/* ---------- Card ---------------------------------------------------------
   Concept A: 그림자 없음. 표면 위에 "붙어 있는 판"처럼 헤어라인·배경 전환만으로
   상호작용을 표시한다. 모서리는 더 둥글게(--aw-radius-card), 테두리는 살짝 두껍게. */
.aw-card {
  background: var(--aw-surface); border: 1.5px solid var(--aw-border-subtle);
  border-radius: var(--aw-radius-card); padding: var(--aw-space-6);
  transition: border-color var(--aw-transition), background-color var(--aw-transition);
}
.aw-card--flat  { background: var(--aw-surface-2); border-color: transparent; }
.aw-card--brand { background: var(--aw-brand); color: var(--aw-brand-fg); border-color: transparent; }
.aw-card--ink   { background: var(--aw-surface-inverse); color: var(--aw-fg-inverse); border-color: transparent; }
.aw-card--pad-lg { padding: var(--aw-space-8); }
a.aw-card, .aw-card--interactive { display: block; text-decoration: none; cursor: pointer; }
a.aw-card:hover, .aw-card--interactive:hover {
  border-color: var(--aw-brand); background: var(--aw-surface-2);
}
.aw-card__title { font-size: var(--aw-text-h4); font-weight: var(--aw-weight-semibold); letter-spacing: -.012em; }
.aw-card__body  { color: var(--aw-fg-muted); font-size: var(--aw-text-sm); margin-top: var(--aw-space-2); }

/* ---------- Form -------------------------------------------------------- */
.aw-field { display: grid; gap: var(--aw-space-2); }
.aw-label { font-size: var(--aw-text-sm); font-weight: var(--aw-weight-semibold); }
.aw-help  { font-size: var(--aw-text-xs); color: var(--aw-fg-subtle); }
.aw-error { font-size: var(--aw-text-xs); color: var(--aw-danger-text); font-weight: var(--aw-weight-medium); }

.aw-input, .aw-textarea, .aw-select {
  width: 100%; min-height: 2.75rem; padding: .625rem .875rem;
  background: var(--aw-surface); color: var(--aw-fg);
  border: 1px solid var(--aw-border); border-radius: var(--aw-radius-input);
  font-size: var(--aw-text-sm); line-height: 1.5;
  transition: border-color var(--aw-transition), background-color var(--aw-transition);
}
.aw-input::placeholder, .aw-textarea::placeholder { color: var(--aw-fg-disabled); }
.aw-input:hover, .aw-textarea:hover, .aw-select:hover { border-color: var(--aw-border-strong); }
.aw-input[aria-invalid="true"], .aw-textarea[aria-invalid="true"] { border-color: var(--aw-danger-text); }
.aw-input[disabled], .aw-textarea[disabled], .aw-select[disabled] { background: var(--aw-surface-3); opacity: .7; }
.aw-textarea { min-height: 7rem; resize: vertical; }
.aw-select {
  appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right .75rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.aw-check { display: inline-flex; align-items: flex-start; gap: .625rem; cursor: pointer; font-size: var(--aw-text-sm); }
.aw-check input[type="checkbox"], .aw-check input[type="radio"] {
  appearance: none; width: 1.125rem; height: 1.125rem; margin-top: .18em; flex: none;
  border: 1.5px solid var(--aw-border-strong); background: var(--aw-surface);
  border-radius: var(--aw-radius-sm); cursor: pointer;
  transition: background-color var(--aw-duration-fast) var(--aw-ease), border-color var(--aw-duration-fast) var(--aw-ease);
}
.aw-check input[type="radio"] { border-radius: 50%; }
.aw-check input:checked { background: var(--aw-brand); border-color: var(--aw-brand); }
.aw-check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F6F2E9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-size: 100%;
}
.aw-check input[type="radio"]:checked { box-shadow: inset 0 0 0 3.5px var(--aw-surface); }
.aw-switch { position: relative; display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; font-size: var(--aw-text-sm); }
.aw-switch input { appearance: none; width: 2.5rem; height: 1.4rem; flex: none;
  background: var(--aw-border-strong); border-radius: var(--aw-radius-pill); cursor: pointer;
  transition: background-color var(--aw-transition); }
.aw-switch input::after { content: ""; position: absolute; left: .175rem; top: 50%;
  width: 1.05rem; height: 1.05rem; translate: 0 -50%; background: #fff;
  border-radius: 50%; transition: translate var(--aw-transition); }
.aw-switch input:checked { background: var(--aw-brand); }
.aw-switch input:checked::after { translate: 1.1rem -50%; }

/* ---------- Badge · Tag ------------------------------------------------- */
.aw-badge {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .1875rem .5rem; border-radius: var(--aw-radius-sm);
  font-size: var(--aw-text-overline); font-weight: var(--aw-weight-semibold);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;
  background: var(--aw-surface-3); color: var(--aw-fg-muted); border: 1px solid transparent;
}
.aw-badge--brand   { background: var(--aw-brand-subtle);   color: var(--aw-brand-text);   border-color: var(--aw-brand-border); }
.aw-badge--info    { background: var(--aw-info-subtle);    color: var(--aw-info-text);    border-color: var(--aw-info-border); }
.aw-badge--success { background: var(--aw-success-subtle); color: var(--aw-success-text); border-color: var(--aw-success-border); }
.aw-badge--warning { background: var(--aw-warning-subtle); color: var(--aw-warning-text); border-color: var(--aw-warning-border); }
.aw-badge--solid   { background: var(--aw-brand); color: var(--aw-brand-fg); border-color: transparent; }
.aw-badge--pill    { border-radius: var(--aw-radius-pill); padding-inline: .625rem; }

/* 알림 점 — 숫자로 압박하지 않는다 */
.aw-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--aw-brand); }

/* ---------- Alert · Callout --------------------------------------------- */
.aw-alert {
  display: grid; grid-template-columns: auto 1fr; gap: var(--aw-space-3);
  padding: var(--aw-space-4) var(--aw-space-5);
  border: 1px solid var(--aw-border-subtle); border-left: 3px solid var(--aw-fg-subtle);
  border-radius: var(--aw-radius-md); background: var(--aw-surface-2);
  font-size: var(--aw-text-sm); line-height: 1.65;
}
.aw-alert__title { font-weight: var(--aw-weight-semibold); }
.aw-alert--info    { background: var(--aw-info-subtle);    border-left-color: var(--aw-info-text);    border-color: var(--aw-info-border); }
.aw-alert--success { background: var(--aw-success-subtle); border-left-color: var(--aw-success-text); border-color: var(--aw-success-border); }
.aw-alert--warning { background: var(--aw-warning-subtle); border-left-color: var(--aw-warning-text); border-color: var(--aw-warning-border); }
.aw-alert--danger  { background: var(--aw-danger-subtle);  border-left-color: var(--aw-danger-text);  border-color: var(--aw-danger-border); }

/* ---------- Header · Nav ------------------------------------------------ */
.aw-header {
  position: sticky; top: 0; z-index: var(--aw-z-header);
  background: color-mix(in srgb, var(--aw-canvas) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--aw-border-subtle);
}
.aw-header__inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--aw-space-8); height: 4rem; }
.aw-header--ink { background: var(--aw-surface-inverse); color: var(--aw-fg-inverse); border-bottom-color: transparent; }
.aw-nav { display: flex; align-items: center; gap: var(--aw-space-1); }
.aw-nav a {
  padding: .5rem .75rem; border-radius: var(--aw-radius-sm);
  font-size: var(--aw-text-sm); font-weight: var(--aw-weight-medium);
  color: var(--aw-fg-muted); text-decoration: none;
  transition: color var(--aw-transition), background-color var(--aw-transition);
}
.aw-nav a:hover { color: var(--aw-fg); background: var(--aw-surface-3); }
.aw-nav a[aria-current] { color: var(--aw-fg); font-weight: var(--aw-weight-semibold); }
.aw-header--ink .aw-nav a { color: color-mix(in srgb, var(--aw-fg-inverse) 72%, transparent); }
.aw-header--ink .aw-nav a:hover { color: var(--aw-fg-inverse); background: rgb(255 255 255 / .08); }
@media (max-width: 800px) { .aw-nav--collapse { display: none; } }

/* 로고 — SVG 애셋을 넣고 높이만 지정한다 */
.aw-logo { display: block; height: 1.375rem; width: auto; }
.aw-logo--lg { height: 2rem; }
.aw-mark { display: block; width: 2rem; height: 2rem; border-radius: var(--aw-radius-mark); }

/* ---------- Table ------------------------------------------------------- */
.aw-table { width: 100%; border-collapse: collapse; font-size: var(--aw-text-sm); }
.aw-table th, .aw-table td { padding: .875rem 1rem; text-align: left; border-bottom: 1px solid var(--aw-border-subtle); }
.aw-table th {
  font-family: var(--aw-font-mono); font-size: var(--aw-text-overline);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--aw-fg-subtle); font-weight: var(--aw-weight-semibold);
}
.aw-table tbody tr { transition: background-color var(--aw-duration-fast) var(--aw-ease); }
.aw-table tbody tr:hover { background: var(--aw-surface-2); }
.aw-table td.aw-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pricing ----------------------------------------------------- */
.aw-price { display: grid; gap: var(--aw-space-5); }
.aw-price__amount { font-size: var(--aw-text-display-2); font-weight: var(--aw-weight-black);
  letter-spacing: var(--aw-tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
.aw-price__period { font-size: var(--aw-text-sm); color: var(--aw-fg-subtle); font-weight: var(--aw-weight-regular); }
.aw-price__list { display: grid; gap: var(--aw-space-2); font-size: var(--aw-text-sm); color: var(--aw-fg-muted); }
.aw-price__list li { display: grid; grid-template-columns: 1.25rem 1fr; align-items: start; }
.aw-price__list li::before { content: "→"; color: var(--aw-brand); font-weight: var(--aw-weight-bold); }
.aw-card--featured { border-color: var(--aw-brand); position: relative; }
.aw-card--featured::after {
  content: attr(data-flag); position: absolute; top: 0; right: var(--aw-space-6);
  translate: 0 -50%; background: var(--aw-brand); color: var(--aw-brand-fg);
  padding: .25rem .625rem; border-radius: var(--aw-radius-sm);
  font-size: var(--aw-text-overline); font-weight: var(--aw-weight-bold);
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- Tabs -------------------------------------------------------- */
.aw-tabs { display: flex; gap: var(--aw-space-1); border-bottom: 1px solid var(--aw-border-subtle); }
.aw-tabs button {
  padding: .75rem 1rem; font-size: var(--aw-text-sm); font-weight: var(--aw-weight-medium);
  color: var(--aw-fg-subtle); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--aw-transition), border-color var(--aw-transition);
}
.aw-tabs button:hover { color: var(--aw-fg); }
.aw-tabs button[aria-selected="true"] { color: var(--aw-fg); border-bottom-color: var(--aw-brand);
  font-weight: var(--aw-weight-semibold); }

/* ---------- Code · kbd -------------------------------------------------- */
.aw-code { background: var(--aw-code-bg); padding: .1em .4em; border-radius: var(--aw-radius-sm); font-size: .875em; }
.aw-pre {
  background: var(--aw-surface-inverse); color: var(--aw-fg-inverse);
  padding: var(--aw-space-5); border-radius: var(--aw-radius-md);
  font-size: var(--aw-text-xs); line-height: 1.7; overflow-x: auto;
}
.aw-kbd { display: inline-block; padding: .1em .45em; min-width: 1.7em; text-align: center;
  background: var(--aw-surface); border: 1px solid var(--aw-border);
  border-bottom-width: 2px; border-radius: var(--aw-radius-sm);
  font-family: var(--aw-font-mono); font-size: .8em; }

/* ---------- Avatar · Divider · Skeleton --------------------------------- */
.aw-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover;
  background: var(--aw-surface-3); display: grid; place-items: center;
  font-size: var(--aw-text-sm); font-weight: var(--aw-weight-semibold); color: var(--aw-fg-muted); }
.aw-divider { border: 0; border-top: 1px solid var(--aw-border-subtle); margin-block: var(--aw-space-8); }
.aw-skeleton { background: var(--aw-surface-3); border-radius: var(--aw-radius-sm);
  animation: aw-pulse 1.6s var(--aw-ease-inout) infinite; }
@keyframes aw-pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }

/* ---------- Footer ------------------------------------------------------ */
.aw-footer { background: var(--aw-surface-inverse); color: var(--aw-fg-inverse);
  padding-block: var(--aw-space-16); font-size: var(--aw-text-sm); }
.aw-footer a { color: color-mix(in srgb, var(--aw-fg-inverse) 68%, transparent); text-decoration: none; }
.aw-footer a:hover { color: var(--aw-fg-inverse); }
}

/* ── 09 utilities ──────────────────────────────────────────────────────── */
@layer aw.utilities {
.aw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.aw-center { text-align: center; }
.aw-right  { text-align: right; }
.aw-balance{ text-wrap: balance; }
.aw-hairline { border: 1px solid var(--aw-border-subtle); }
.aw-surface  { background: var(--aw-surface); }
.aw-surface-2{ background: var(--aw-surface-2); }
.aw-canvas   { background: var(--aw-canvas); }
.aw-ink      { background: var(--aw-surface-inverse); color: var(--aw-fg-inverse); }
.aw-brand-bg { background: var(--aw-brand); color: var(--aw-brand-fg); }
.aw-round-card { border-radius: var(--aw-radius-card); }
.aw-round-pill { border-radius: var(--aw-radius-pill); }
.aw-nowrap { white-space: nowrap; }
.aw-full { width: 100%; }
@media (max-width: 640px) { .aw-hide-sm { display: none !important; } }
@media (min-width: 641px) { .aw-only-sm { display: none !important; } }
}

/* ── 10 v2 additions ───────────────────────────────────────────────────────
   2026 트렌드 리서치(CI_v2_제안.html 1장)에서 가져온 신규 유틸리티.
   전부 opt-in — 기존 v1 마크업에 얹으면 그대로 굴러가고, 안 쓰면 v1과 동일하게 보인다. */
@layer aw.utilities {

/* 그레인 텍스처 — "매끈한 디지털" 느낌을 깨는 촉감, Concept A에서는 "종이 결"에 가깝다.
   SVG feTurbulence를 data-uri로 인라인 — 이미지 요청 없이 순수 CSS.
   라이트에서는 multiply(종이 위 잉크 느낌), 다크에서는 overlay(은은한 발광)로 블렌드 모드를 다르게 쓴다. */
.aw-grain { position: relative; isolation: isolate; }
.aw-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .aw-grain::after, :root:not([data-theme="light"]) .aw-grain::after {
  opacity: .08; mix-blend-mode: overlay;
}

/* 그라디언트 메시 — 정적인 아치 모티프 배경 대신 쓸 수 있는 브랜드 톤 그라디언트.
   빨강은 여전히 "한 화면에 한 번"이므로 저채도로, 아주 넓은 영역에서만 옅게 깔린다. */
.aw-gradient-mesh {
  background:
    radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--aw-brand) 16%, transparent), transparent 70%),
    radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--aw-brand) 10%, transparent), transparent 70%),
    var(--aw-canvas);
}
[data-theme="dark"] .aw-gradient-mesh, :root:not([data-theme="light"]) .aw-gradient-mesh {
  background:
    radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--aw-brand) 22%, transparent), transparent 70%),
    radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--aw-brand) 14%, transparent), transparent 70%),
    var(--aw-canvas);
}

/* 대형 타이포용 굵기·자간 유틸 — 히어로 한 줄을 "확신 있게" 보이도록 */
.aw-weight-heavy { font-weight: var(--aw-weight-heavy); }
.aw-tracking-tight { letter-spacing: -0.05em; }

/* 시그니처 언더라인 — 브랜드 색을 텍스트 밑줄로, 강조 없이도 "우리 색"임을 알린다 */
.aw-underline-brand { text-decoration: underline; text-decoration-color: var(--aw-brand);
  text-decoration-thickness: .09em; text-underline-offset: .16em; }
}