/* Agency Kit v0.3 — 기본 CSS
   값의 원본은 DESIGN.md. 이름은 피그마 변수와 같은 규칙: "분류/단계" → --분류-단계 (예: Label/Strong → --label-strong).
   HTML 속성 이름 = 피그마 속성 이름. 예: 피그마 Variant=Primary ↔ data-variant="primary".
   프로젝트에서는 이 파일을 복사해 :root 값만 브랜드 것으로 바꾼다. */

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

/* 기본 색 — 브랜드 (DESIGN.md brand-50~950, 피그마 Primitives Brand/…). 화면에 직접 쓰지 말고 의미 색을 거친다.
   서브 색이 정해지면 --sub-50 ~ --sub-950으로 같은 자리에 추가한다. */
:root {
  --brand-50: #fef7ef;
  --brand-100: #ffecd8;
  --brand-200: #fed4ac;
  --brand-300: #feb476;
  --brand-400: #ff883a;
  --brand-500: #fc6418;
  --brand-600: #e65918;
  --brand-700: #c44400;
  --brand-800: #9b360c;
  --brand-900: #7c2e0e;
  --brand-950: #431405;
}

:root {
  /* 색 — 밝은 모드 (피그마 Color 컬렉션 Light) */
  /* Background · 바탕 */
  --background-normal: #ffffff;
  --background-alternative: #f1ebe5;
  --background-elevated: #ffffff;
  --background-floating: #ffffff;
  /* Label · 글자·아이콘 (진함 → 흐림) */
  --label-strong: #26221f;
  --label-normal: #3a3430;
  --label-alternative: #6f6862;
  --label-disable: #aba39c;
  /* Primary · Secondary · 행동 */
  --primary-normal: var(--brand-500); /* 흰 글자 대비 3.0:1 예외(DESIGN.md) */
  --primary-label: #ffffff;
  --secondary-normal: #f1ebe5;
  --secondary-label: #2f2a26;
  /* Line · 선 */
  --line-normal: #ded7d0;
  --line-strong: #d3cbc6;
  --line-focus: #2f2a26;
  /* Status · 상태 */
  --status-positive: #15803d;
  --status-cautionary: #b45309;
  --status-destructive: #dc2626;
  /* Overlay · 겹침 */
  --overlay-dimmer: rgba(0, 0, 0, .5);


  /* 서체 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* 간격 (4의 배수) */
  --spacing-4: 4px;  --spacing-8: 8px;  --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px;
  --spacing-48: 48px; --spacing-64: 64px; --spacing-80: 80px; --spacing-96: 96px;
  --container: 1280px;
  --page-x: 24px;
  --section-y: 64px; /* 톤 B안 · 구획 위아래 여백, 768 이상 96 (정리 대기) */

  /* 컨트롤 높이 (피그마 Size/Small·Medium·Large) */
  --size-small: 36px; --size-medium: 44px; --size-large: 52px;

  /* 모서리 */
  --radius-none: 0; --radius-small: 4px; --radius-medium: 8px;
  --radius-large: 12px; --radius-xlarge: 16px; --radius-full: 9999px;
  --radius-xxlarge: 24px; /* 톤 B안 · 큰 카드 (정리 대기: DESIGN.md·피그마 Radius/XXLarge 아직 없음) */

  /* 그림자 */
  --shadow-small: 0 1px 2px rgba(0,0,0,.06);
  --shadow-medium: 0 4px 16px rgba(0,0,0,.08);
  --shadow-large: 0 16px 48px rgba(0,0,0,.16);
}
@media (min-width: 1024px) { :root { --page-x: 48px; } }
@media (min-width: 768px) { :root { --section-y: 96px; } }

/* 어두운 모드 — 페이지 전체(html)나 구간 하나에 data-theme="dark" (피그마 Color 컬렉션 Dark 모드) */
[data-theme="dark"] {
  --background-normal: #26221f;
  --background-alternative: #3a3430;
  --background-elevated: #2f2a26;
  --background-floating: #3a3430;
  --label-strong: #ffffff;
  --label-normal: #f1ebe5;
  --label-alternative: #aba39c;
  --label-disable: #6f6862;
  --primary-normal: var(--brand-500);
  --primary-label: #ffffff;
  --secondary-normal: #3a3430;
  --secondary-label: #faf7f4;
  --line-normal: #3a3430;
  --line-strong: #4a433e;
  --line-focus: #d3cbc6;
  --status-positive: #22c55e;
  --status-cautionary: #f59e0b;
  --status-destructive: #ef4444;
  --overlay-dimmer: rgba(0, 0, 0, .7);
  background: var(--background-normal);
  color: var(--label-normal);
}

/* 기본 */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background-normal);
  color: var(--label-normal);
  -webkit-font-smoothing: antialiased;
}

/* 글자 역할 (피그마 글자 스타일과 같은 이름) */
/* 톤 B안(정리 대기): Display 56→64 · Title 1 40→48 · Title 2 32→36, 제목 굵기 700→600. 모바일(767 이하)은 아래 따로. DESIGN.md·피그마는 아직 옛 값 */
/* 줄 간격·자간은 한글 기준: 큰 제목도 1.3 이상, 자간은 -0.02em까지만(영문보다 덜 좁힌다) */
.t-display   { font-size: 64px; font-weight: 600; line-height: 1.3;  letter-spacing: -0.02em; }
.t-title-1 { font-size: 48px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; }
.t-title-2 { font-size: 36px; font-weight: 600; line-height: 1.4;  letter-spacing: -0.015em; }
.t-title-3 { font-size: 24px; font-weight: 600; line-height: 1.4;  letter-spacing: -0.01em; }
.t-body-large   { font-size: 18px; font-weight: 400; line-height: 1.7; } /* 한글 본문 1.6 → 1.7 (정리 대기) */
.t-body   { font-size: 16px; font-weight: 400; line-height: 1.7; }
.t-label-large  { font-size: 16px; font-weight: 500; line-height: 1.4; }
.t-label     { font-size: 14px; font-weight: 500; line-height: 1.4; }
.t-caption   { font-size: 12px; font-weight: 400; line-height: 1.5; }
.t-display, .t-title-1, .t-title-2, .t-title-3, .t-body-large, .t-body, .t-label-large, .t-label, .t-caption { margin: 0; }
.t-display, .t-title-1, .t-title-2, .t-title-3 { word-break: keep-all; }
@media (max-width: 767px) {
  .t-display { font-size: 36px; }
  .t-title-1 { font-size: 32px; }
  .t-title-2 { font-size: 28px; }
}

/* ───────── 02 Elements ───────── */

/* Icon — 피그마 Icon/… (원본 24×24, 선 2, 색 = 글자색)
   선은 살려 두고 크기마다 보이는 선 두께를 정한다(비율보다 조금 덜 바꿈).
   --icon-stroke-NN = 화면에 보이는 두께(px). 얇은 톤 프로젝트는 이 다섯 값만 바꾼다.
   stroke-width는 viewBox 24 기준이라 "보이는 두께 × 24 ÷ 크기"로 계산한다. */
:root { --icon-stroke-16: 1.5; --icon-stroke-20: 1.75; --icon-stroke-24: 2; --icon-stroke-32: 2.5; --icon-stroke-48: 3; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: calc(var(--icon-stroke-20) * 24 / 20); stroke-linecap: round; stroke-linejoin: round; }
.icon[data-size="16"] { width: 16px; height: 16px; stroke-width: calc(var(--icon-stroke-16) * 24 / 16); }
.icon[data-size="20"] { width: 20px; height: 20px; stroke-width: calc(var(--icon-stroke-20) * 24 / 20); }
.icon[data-size="24"] { width: 24px; height: 24px; stroke-width: var(--icon-stroke-24); }
.icon[data-size="32"] { width: 32px; height: 32px; stroke-width: calc(var(--icon-stroke-32) * 24 / 32); }
.icon[data-size="48"] { width: 48px; height: 48px; stroke-width: calc(var(--icon-stroke-48) * 24 / 48); }

/* Spinner — 피그마 Spinner (도는 움직임은 HTML이 기준) */
.spinner {
  width: 16px; height: 16px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* Interaction — 피그마 Interaction (Normal 0 / Hover .08 / Pressed .12 / Focus 테두리)
   글자색(currentColor)을 얇게 덮는다. 그래서 버튼마다 따로 마우스 올림 색을 만들지 않는다. */
.has-interaction { position: relative; isolation: isolate; }
.has-interaction::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: currentColor; opacity: 0; transition: opacity .15s;
}
.has-interaction:hover::after  { opacity: .08; }
.has-interaction:active::after { opacity: .12; }
.has-interaction:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }

/* Slot — 피그마 Slot (빈 자리. 프로젝트 부품을 넣는다. 비어 있으면 안 보인다) */
.slot:empty { display: none; }

/* ───────── 03 Components ───────── */

/* Button — 피그마 Button
   data-variant = primary | secondary | outline | ghost   (Variant)
   data-size    = sm | md(기본) | lg                       (Size)
   disabled                                               (Disabled)
   aria-busy="true" + .spinner                            (Loading)
   앞·뒤 아이콘은 <svg class="icon">                       (Leading/Trailing icon) */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  height: var(--size-medium); padding: 0 var(--spacing-20);
  border: 1px solid transparent; border-radius: var(--radius-full);
  font: 500 14px/1.4 var(--font-sans);
  background: var(--primary-normal); color: var(--primary-label);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: currentColor; opacity: 0; transition: opacity .15s;
}
.btn:hover::after  { opacity: .08; }
.btn:active::after { opacity: .12; }
.btn:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }

.btn[data-variant="secondary"] { background: var(--secondary-normal); color: var(--secondary-label); }
.btn[data-variant="outline"]   { background: transparent; color: var(--label-normal); border-color: var(--line-strong); }
.btn[data-variant="ghost"]     { background: transparent; color: var(--label-normal); }

.btn[data-size="sm"] { height: var(--size-small); padding: 0 var(--spacing-12); }
.btn[data-size="lg"] { height: var(--size-large); padding: 0 var(--spacing-24); font-size: 16px; }
.btn .icon { width: 20px; height: 20px; stroke-width: calc(var(--icon-stroke-20) * 24 / 20); }
.btn[data-size="sm"] .icon { width: 16px; height: 16px; stroke-width: calc(var(--icon-stroke-16) * 24 / 16); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn[aria-busy="true"] { pointer-events: none; cursor: progress; }

/* Input — 피그마 Input
   data-status = normal | error | success   (Status)
   :focus-within = State=Focus · input:disabled = State=Disabled */
.field { display: flex; flex-direction: column; gap: var(--spacing-8); }
.field__label { font: 500 14px/1.4 var(--font-sans); color: var(--label-strong); display: flex; gap: var(--spacing-4); }
.field__required { color: var(--status-destructive); }
.field__control {
  display: flex; align-items: center; gap: var(--spacing-8);
  height: var(--size-medium); padding: 0 var(--spacing-16);
  background: var(--background-normal);
  border: 1px solid var(--line-strong); border-radius: var(--radius-medium);
}
.field__control .icon { color: var(--label-alternative); }
.input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--label-normal); font: 400 16px/1.6 var(--font-sans);
}
.input::placeholder { color: var(--label-alternative); }
.field__control:focus-within { border-color: var(--line-focus); box-shadow: 0 0 0 1px var(--line-focus); }
.field__help { font: 400 12px/1.5 var(--font-sans); color: var(--label-alternative); }
.field[data-status="error"] .field__control   { border-color: var(--status-destructive); }
.field[data-status="error"] .field__control:focus-within { box-shadow: 0 0 0 1px var(--status-destructive); }
.field[data-status="error"] .field__help      { color: var(--status-destructive); }
.field[data-status="success"] .field__control { border-color: var(--status-positive); }
.field[data-status="success"] .field__control:focus-within { box-shadow: 0 0 0 1px var(--status-positive); }
.field[data-status="success"] .field__help    { color: var(--status-positive); }
.field:has(.input:disabled) { opacity: .5; }
.field:has(.input:disabled) .field__control { background: var(--background-alternative); cursor: not-allowed; }

/* Card — 피그마 Card (Show image · Show description · Show slot · Show button) */
.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--background-elevated); color: var(--label-normal);
  border: 1px solid var(--line-normal); border-radius: var(--radius-xxlarge); /* 톤 B안 12→24 (정리 대기) */
}
.card__media { aspect-ratio: 16 / 9; background: var(--background-alternative); object-fit: cover; width: 100%; display: block; }
.card__body { display: flex; flex-direction: column; gap: var(--spacing-8); padding: var(--spacing-24); }
.card__title { margin: 0; }
.card__text { margin: 0; color: var(--label-alternative); }
.card__actions { display: flex; gap: var(--spacing-8); padding: 0 var(--spacing-24) var(--spacing-24); }

/* Modal — 피그마 Modal (Show body · Show slot · Show close · Show cancel). 뒤 배경 = overlay */
.modal {
  width: min(480px, calc(100vw - 32px)); padding: var(--spacing-32);
  background: var(--background-floating); color: var(--label-normal);
  border: 0; border-radius: var(--radius-xlarge); box-shadow: var(--shadow-large);
}
.modal[open] { display: flex; flex-direction: column; gap: var(--spacing-32); }
.modal::backdrop { background: var(--overlay-dimmer); }
.modal__content { display: flex; flex-direction: column; gap: var(--spacing-12); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-16); }
.modal__title { margin: 0; }
.modal__close {
  position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  background: transparent; color: var(--label-alternative); border: 0; border-radius: var(--radius-small); cursor: pointer;
}
.modal__close::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity .15s; }
.modal__close:hover::after { opacity: .08; }
.modal__close:focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; }
.modal__body { margin: 0; color: var(--label-alternative); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--spacing-8); }