@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   세무법인 넥스트 고양지점 — 디자인 토큰
   3계층: Primitive(원시) → Semantic(의미) → Component(컴포넌트)
   컴포넌트 CSS는 Semantic/Component 토큰을 참조한다.
   서피스 전환(data-surface)이 재바인딩하면 안 되는 고정값(역전 버튼·로고 마크)에 한해 Primitive를 직접 쓴다.
   문서: ../DESIGN-TOKENS.md
   ═══════════════════════════════════════════════════════════════════════════ */

:root{

/* ─────────────────────────────────────────────────────────────────────────
   TIER 1 · PRIMITIVE — 원시값. 의미 없음. 여기서만 실제 색/수치를 정의한다.
   ───────────────────────────────────────────────────────────────────────── */

  /* Brand ramp — 본사 #FF6C00(=500) 기준, OKLch에서 hue 고정하고 L/C만 이동 */
  --p-brand-50:   oklch(0.972 0.017 65);   /* #FFF5EB  본사 관측값 */
  --p-brand-100:  oklch(0.941 0.038 63);
  --p-brand-200:  oklch(0.886 0.076 58);
  --p-brand-300:  oklch(0.822 0.121 54);
  --p-brand-400:  oklch(0.757 0.166 50);
  --p-brand-500:  oklch(0.695 0.202 45);   /* #FF6C00  브랜드 기준색 — 변경 불가 */
  --p-brand-600:  oklch(0.638 0.192 44);   /* #E55F00  본사 hover 관측값 */
  --p-brand-700:  oklch(0.560 0.172 42);   /* 흰 텍스트 4.7:1 — 액션 기본 */
  --p-brand-800:  oklch(0.470 0.142 41);   /* 흰 텍스트 6.8:1 — 액션 hover */
  --p-brand-900:  oklch(0.385 0.112 40);   /* 액션 active */

  /* Neutral ramp — 약한 한기(hue 257). 순수 무채색보다 화면에서 깨끗하게 읽힌다 */
  --p-neutral-0:    oklch(1 0 0);
  --p-neutral-25:   oklch(0.988 0.002 250);
  --p-neutral-50:   oklch(0.972 0.004 250);  /* #F2F5F7  본사 관측값 */
  --p-neutral-100:  oklch(0.951 0.004 250);  /* #EFF1F3  본사 관측값 */
  --p-neutral-200:  oklch(0.912 0.005 252);  /* #E3E7EC  본사 관측값 */
  --p-neutral-300:  oklch(0.855 0.007 254);
  --p-neutral-400:  oklch(0.740 0.010 256);
  --p-neutral-450:  oklch(0.660 0.012 257);  /* 흰 배경 3.1:1 — 폼 테두리 하한 */
  --p-neutral-500:  oklch(0.620 0.014 258);
  --p-neutral-600:  oklch(0.505 0.016 258);  /* 흰 배경 5.9:1 — 보조 텍스트 하한 */
  --p-neutral-700:  oklch(0.425 0.016 258);
  --p-neutral-800:  oklch(0.340 0.016 258);
  --p-neutral-900:  oklch(0.265 0.016 258);
  --p-neutral-950:  oklch(0.205 0.016 258);  /* #1D232B  본사 dark panel 관측값 */
  --p-neutral-1000: oklch(0.165 0.014 258);  /* #171C22  본사 footer 관측값 */

  /* Feedback ramp */
  --p-red-50:    oklch(0.966 0.017 25);
  --p-red-200:   oklch(0.870 0.070 26);
  --p-red-600:   oklch(0.530 0.196 27);   /* 흰 배경 5.9:1 */
  --p-green-50:  oklch(0.966 0.024 158);
  --p-green-200: oklch(0.870 0.070 158);
  --p-green-600: oklch(0.520 0.128 157);  /* 흰 배경 5.3:1 */
  --p-amber-50:  oklch(0.972 0.030 85);
  --p-amber-600: oklch(0.585 0.132 72);

  /* Typography — Pretendard 단일 패밀리(본사 아이덴티티, 변경 불가) */
  --p-font-sans: 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
                 system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --p-font-num:  ui-monospace,'SFMono-Regular',Menlo,monospace;

  --p-size-2xs:  12px;
  --p-size-xs:   13px;
  --p-size-sm:   15px;   /* 본문 하한 — 40~60대 가독성 요건 */
  --p-size-md:   16px;   /* 본문 기본 */
  --p-size-lg:   17px;   /* 장문 콘텐츠 본문 */
  --p-size-xl:   20px;
  --p-size-2xl:  clamp(21px, 1.6vw, 23px);
  --p-size-3xl:  clamp(23px, 2.2vw, 27px);
  --p-size-4xl:  clamp(26px, 3.0vw, 34px);
  --p-size-5xl:  clamp(28px, 3.6vw, 38px);
  --p-size-6xl:  clamp(30px, 4.2vw, 42px);

  --p-weight-regular:  400;
  --p-weight-medium:   500;
  --p-weight-semibold: 600;
  --p-weight-bold:     700;
  --p-weight-black:    800;

  /* 한글은 em box를 가득 채우므로 라틴보다 행간 하한이 높다 */
  --p-leading-display: 1.34;
  --p-leading-heading: 1.42;
  --p-leading-body:    1.75;
  --p-leading-loose:   1.9;

  /* 음수 트래킹은 라틴 전용. 한글은 0 — 자간이 좁아지면 글자가 붙어 보인다 */
  --p-track-korean: 0;
  --p-track-latin:  -0.02em;
  --p-track-caps:   0.09em;
  --p-track-wide:   0.02em;

  /* Spacing — 4px 베이스 */
  --p-space-1:  4px;   --p-space-2:  8px;   --p-space-3:  12px;
  --p-space-4:  16px;  --p-space-5:  20px;  --p-space-6:  24px;
  --p-space-8:  32px;  --p-space-10: 40px;  --p-space-12: 48px;
  --p-space-14: 56px;  --p-space-16: 64px;  --p-space-20: 80px;
  --p-space-24: 96px;  --p-space-32: 128px;

  /* Radius */
  --p-radius-xs:   4px;
  --p-radius-sm:   8px;
  --p-radius-md:   12px;
  --p-radius-lg:   16px;
  --p-radius-xl:   24px;
  --p-radius-full: 999px;

  /* Elevation — 한기 섞인 그림자. 순수 검정 그림자는 화면에서 탁해진다 */
  --p-shadow-1: 0 1px 2px oklch(0.205 0.016 258 / .06);
  --p-shadow-2: 0 2px 6px oklch(0.205 0.016 258 / .06), 0 8px 20px oklch(0.205 0.016 258 / .06);
  --p-shadow-3: 0 4px 12px oklch(0.205 0.016 258 / .08), 0 20px 44px oklch(0.205 0.016 258 / .10);
  --p-shadow-4: 0 8px 24px oklch(0.205 0.016 258 / .12), 0 32px 72px oklch(0.205 0.016 258 / .16);

  /* Motion */
  --p-duration-fast: 120ms;
  --p-duration-base: 190ms;
  --p-duration-slow: 300ms;
  --p-ease-out: cubic-bezier(.22,.61,.36,1);
  --p-ease-inout: cubic-bezier(.4,0,.2,1);

  /* Layering */
  --p-z-base: 1;
  --p-z-sticky: 100;
  --p-z-dock: 120;
  --p-z-float: 130;
  --p-z-overlay: 200;
  --p-z-modal: 210;


/* ─────────────────────────────────────────────────────────────────────────
   TIER 2 · SEMANTIC — 역할. 컴포넌트는 여기서부터 참조한다.
   ───────────────────────────────────────────────────────────────────────── */

  /* Surface */
  --color-bg-page:         var(--p-neutral-0);
  --color-bg-subtle:       var(--p-neutral-50);
  --color-bg-muted:        var(--p-neutral-100);
  --color-bg-raised:       var(--p-neutral-0);
  --color-bg-inverse:      var(--p-neutral-950);
  --color-bg-inverse-deep: var(--p-neutral-1000);
  --color-bg-brand:        var(--p-brand-500);   /* 대면적. 반드시 잉크 텍스트와 */
  --color-bg-brand-subtle: var(--p-brand-50);

  /* Text — 흰 배경 대비 배수를 주석에 명시 */
  --color-text-primary:    var(--p-neutral-900);  /* 15.3:1 */
  --color-text-secondary:  var(--p-neutral-700);  /*  8.2:1 */
  --color-text-tertiary:   var(--p-neutral-600);  /*  5.9:1  캡션 하한 */
  --color-text-brand:      var(--p-brand-700);    /*  4.7:1  링크·아이브로우 */
  --color-text-on-brand:   var(--p-neutral-950);  /* #FF6C00 위 5.9:1 */
  --color-text-on-action:  var(--p-neutral-0);    /* brand-700 위 4.7:1 */
  --color-text-on-inverse: var(--p-neutral-100);  /* 잉크 위 13.8:1 */
  --color-text-on-inverse-dim: var(--p-neutral-400);
  --color-text-disabled:   var(--p-neutral-450);

  /* Border */
  --color-border-subtle:  var(--p-neutral-100);
  --color-border-default: var(--p-neutral-200);
  --color-border-strong:  var(--p-neutral-300);
  --color-border-field:   var(--p-neutral-450);   /* 3.1:1 — 폼 요소는 UI 대비 기준 적용 */
  --color-border-brand:   var(--p-brand-500);
  --color-border-inverse: oklch(1 0 0 / .14);

  /* Action */
  --color-action-primary:        var(--p-brand-700);
  --color-action-primary-hover:  var(--p-brand-800);
  --color-action-primary-active: var(--p-brand-900);
  --color-action-secondary:        var(--p-neutral-0);
  --color-action-secondary-hover:  var(--p-neutral-50);
  --color-action-secondary-active: var(--p-neutral-100);
  --color-action-inverse:       var(--p-neutral-0);
  --color-action-inverse-hover: var(--p-neutral-100);

  --color-focus-ring: var(--p-brand-700);
  --color-focus-halo: oklch(0.560 0.172 42 / .22);

  /* Feedback */
  --color-error:      var(--p-red-600);
  --color-error-bg:   var(--p-red-50);
  --color-error-border: var(--p-red-200);
  --color-success:    var(--p-green-600);
  --color-success-bg: var(--p-green-50);
  --color-success-border: var(--p-green-200);
  --color-warning:    var(--p-amber-600);
  --color-warning-bg: var(--p-amber-50);

  /* Type roles */
  --font-display: var(--p-font-sans);
  --font-body:    var(--p-font-sans);

  --text-display-size:   var(--p-size-6xl);
  --text-display-weight: var(--p-weight-black);
  --text-h1-size:        var(--p-size-5xl);
  --text-h2-size:        var(--p-size-4xl);
  --text-h3-size:        var(--p-size-xl);
  --text-body-size:      var(--p-size-md);
  --text-body-lg-size:   var(--p-size-lg);
  --text-caption-size:   var(--p-size-xs);

  /* Space roles */
  /* 공간은 Primitive(--p-space-*)를 직접 참조하는 것이 이 코드베이스의 규칙이다.
     Semantic 공간 토큰은 실제로 8회 vs Primitive 131회로 쓰이지 않아 걷어냈다.
     선언만 남겨두면 "Semantic 을 고치면 따라온다"는 거짓 약속이 된다.
     아래 둘은 실제로 쓰이므로 남긴다. */
  --space-section-y:  clamp(56px, 7vw, 100px);
  --space-gutter:     clamp(16px, 2vw, 20px);

  /* Elevation roles */
  --elevation-card:   var(--p-shadow-1);
  --elevation-raised: var(--p-shadow-2);
  --elevation-sticky: var(--p-shadow-3);
  --elevation-overlay: var(--p-shadow-4);


/* ─────────────────────────────────────────────────────────────────────────
   TIER 3 · COMPONENT — 컴포넌트별 계약. 여기 값만 바꾸면 컴포넌트가 바뀐다.
   ───────────────────────────────────────────────────────────────────────── */

  --container-max: 1180px;
  --container-pad: clamp(20px, 4vw, 32px);

  --header-height: 76px;
  --header-height-compact: 62px;

  /* 터치 타깃 하한 48px — 40~60대 주 이용자 요건 */
  --control-height-sm: 44px;
  --control-height-md: 48px;
  --control-height-lg: 56px;

  --btn-radius: var(--p-radius-sm);
  --btn-pad-x: var(--p-space-6);
  --btn-font-size: var(--p-size-md);
  --btn-font-weight: var(--p-weight-bold);

  --field-height: 52px;
  --field-radius: var(--p-radius-sm);
  --field-pad-x: var(--p-space-4);
  --field-font-size: var(--p-size-md);

  --card-radius: var(--p-radius-md);
  --card-padding: clamp(20px, 2.4vw, 28px);
  --card-border: 1px solid var(--color-border-default);

  --dock-height: 73px;          /* 모바일 하단 고정 CTA 바 — 8+56+8 패딩·버튼 + 상단 테두리 1px */
  --float-reserve: 84px;        /* 채널톡 위젯 예약 영역 — 겹침 방지 */

  --thumb-ratio: 16 / 10;       /* 인사이트 타이포 썸네일 */
}

/* 브랜드 오렌지 위 텍스트는 예외 없이 잉크로 뒤집는다.
   #FF6C00 + #FFFFFF = 2.9:1 로 AA 미달이기 때문이다. */
[data-surface="brand"]{
  --color-text-primary: var(--color-text-on-brand);
  --color-text-secondary: oklch(0.205 0.016 258 / .78);
  --color-border-default: oklch(0.205 0.016 258 / .22);
}

/* 잉크 서피스 안에서는 의미 토큰만 재바인딩하면 하위 컴포넌트가 전부 따라온다 */
[data-surface="inverse"]{
  --color-bg-page: var(--color-bg-inverse);
  --color-bg-raised: oklch(1 0 0 / .05);
  --color-bg-subtle: oklch(1 0 0 / .04);
  --color-text-primary: var(--color-text-on-inverse);
  --color-text-secondary: var(--p-neutral-400);
  --color-text-tertiary: var(--p-neutral-500);
  --color-text-brand: var(--p-brand-400);
  --color-border-default: var(--color-border-inverse);
  --color-border-subtle: oklch(1 0 0 / .08);
  --color-border-strong: oklch(1 0 0 / .24);
}

@media (prefers-reduced-motion: reduce){
  :root{ --p-duration-fast:1ms; --p-duration-base:1ms; --p-duration-slow:1ms; }
}