/* ============================================================================
   BEAKER Design System — Apple design language
   ----------------------------------------------------------------------------
   단일 토큰 레이어. index.html / card-editor.html / caption-dashboard.html 이
   모두 이 파일을 링크한다. 값은 여기서만 바꾼다.

   철학 (DESIGN.md 참조):
     - 재질(material)로 계층을 만든다. 테두리가 아니라.
     - 모션은 스프링이다. 지속시간이 아니라 물리다.
     - 반응은 pointer-down에 일어난다. click이 아니라.
     - 타이포 트래킹은 크기별이다. 고정값이 아니라.
   ========================================================================= */

/* ── 1. 색 (Color) ─────────────────────────────────────────────────────────
   Apple의 시맨틱 레이어 구조를 따른다: label / fill / background / separator.
   원시 hex는 --p-* 에만 두고, 컴포넌트는 절대 원시값을 직접 쓰지 않는다.       */

:root {
  /* 라이트 전용 — 시스템 다크모드를 따라가지 않는다 (의도적 결정) */
  color-scheme: light;

  /* 원시 팔레트 — 중립 뉴트럴 (화이트 톤)
     기존 웜 베이지 램프에서 중립 그레이로 교체.
     주의: 카드 캔버스(출력물) 색은 별개다 — 브랜드 아트워크이므로 건드리지 않는다. */
  --p-warm-000: #FFFFFF;
  --p-warm-050: #FAFAFA;
  --p-warm-100: #FFFFFF;
  --p-warm-150: #F5F5F5;
  --p-warm-200: #EDEDED;
  --p-warm-300: #DEDEDE;
  --p-warm-400: #B1B1B1;
  --p-warm-500: #8A8A8A;
  --p-warm-700: #3A3A3A;
  --p-warm-900: #141414;

  /* 틴트 — 시스템 전체에서 상호작용을 뜻하는 유일한 유채색 */
  --p-tint:        #0A6CFF;
  --p-tint-press:  #0055D4;
  --p-red:         #D70015;
  --p-green:       #1D7F3C;
  --p-amber:       #9A6400;

  /* ── 시맨틱: 라벨 (텍스트) ── 불투명도가 아닌 고정색. 재질 위에서도 또렷하게 */
  --label-primary:    var(--p-warm-900);
  --label-secondary:  var(--p-warm-700);
  --label-tertiary:   var(--p-warm-500);
  --label-quaternary: var(--p-warm-400);
  --label-on-tint:    #FFFFFF;
  --label-on-dark:    #FFFFFF;

  /* ── 시맨틱: 배경 ── base(가장 뒤) → elevated(카드) → raised(떠 있는 것) */
  --bg-base:     var(--p-warm-100);   /* #FFFFFF — 페이지 */
  --bg-elevated: var(--p-warm-000);   /* #FFFFFF — 카드 (헤어라인으로 구분) */
  --bg-raised:   var(--p-warm-000);
  --bg-inset:    var(--p-warm-150);   /* #F5F5F5 — 입력 필드가 파고든 면 */
  --bg-canvas:   #EBEBEB;             /* 에디터 스테이지 (중립) */

  /* ── 시맨틱: 필 (컨트롤 표면) ── */
  --fill-primary:   rgba(0, 0, 0, 0.05);
  --fill-secondary: rgba(0, 0, 0, 0.08);
  --fill-tertiary:  rgba(0, 0, 0, 0.12);
  --fill-selected:  rgba(10, 108, 255, 0.10);

  /* ── 시맨틱: 구분선 ── Apple은 hairline을 쓴다. 1px 실선 상자가 아니라 */
  --separator:        rgba(0, 0, 0, 0.10);
  --separator-opaque: var(--p-warm-200);

  /* ── 시맨틱: 강조 ── */
  --tint:         var(--p-tint);
  --tint-press:   var(--p-tint-press);
  --tint-bg:      rgba(10, 108, 255, 0.10);
  --danger:       var(--p-red);
  --danger-bg:    rgba(215, 0, 21, 0.08);
  --success:      var(--p-green);
  --success-bg:   rgba(29, 127, 60, 0.08);
  --warning:      var(--p-amber);
  --warning-bg:   rgba(154, 100, 0, 0.09);
}

/* ── 2. 타이포그래피 ───────────────────────────────────────────────────────
   트래킹은 크기별이다. 큰 글자는 음수, 작은 글자는 양수.
   고정 letter-spacing 하나를 전 크기에 쓰는 것이 가장 흔한 실수.             */

:root {
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Segoe UI', 'Noto Sans KR', sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'Fira Mono', 'Courier New', monospace;

  /* 크기 / 행간 / 트래킹 — 세 값을 한 세트로 쓴다 */
  --type-display:   700 34px/1.10 var(--font-sans);
  --track-display:  -0.022em;

  --type-title-1:   700 26px/1.18 var(--font-sans);
  --track-title-1:  -0.018em;

  --type-title-2:   700 20px/1.25 var(--font-sans);
  --track-title-2:  -0.012em;

  --type-title-3:   650 17px/1.32 var(--font-sans);
  --track-title-3:  -0.006em;

  --type-body:      400 14px/1.55 var(--font-sans);
  --track-body:     0em;

  --type-body-em:   600 14px/1.45 var(--font-sans);
  --track-body-em:  0em;

  --type-callout:   400 13px/1.50 var(--font-sans);
  --track-callout:  0.002em;

  --type-footnote:  500 12px/1.45 var(--font-sans);
  --track-footnote: 0.006em;

  --type-caption:   600 11px/1.35 var(--font-sans);
  --track-caption:  0.012em;

  /* 대문자 라벨은 트래킹을 더 벌린다 — 대문자는 본래 붙어 보인다 */
  --track-caption-upper: 0.075em;
}

.t-display  { font: var(--type-display);  letter-spacing: var(--track-display);  color: var(--label-primary); }
.t-title-1  { font: var(--type-title-1);  letter-spacing: var(--track-title-1);  color: var(--label-primary); }
.t-title-2  { font: var(--type-title-2);  letter-spacing: var(--track-title-2);  color: var(--label-primary); }
.t-title-3  { font: var(--type-title-3);  letter-spacing: var(--track-title-3);  color: var(--label-primary); }
.t-body     { font: var(--type-body);     letter-spacing: var(--track-body);     color: var(--label-secondary); }
.t-callout  { font: var(--type-callout);  letter-spacing: var(--track-callout);  color: var(--label-secondary); }
.t-footnote { font: var(--type-footnote); letter-spacing: var(--track-footnote); color: var(--label-tertiary); }
.t-caption  { font: var(--type-caption);  letter-spacing: var(--track-caption);  color: var(--label-tertiary); }

/* 섹션 라벨 — 패널 제목용 */
.t-section-label {
  font: var(--type-caption);
  letter-spacing: var(--track-caption-upper);
  text-transform: uppercase;
  color: var(--label-tertiary);
}

/* ── 3. 공간 & 반경 ────────────────────────────────────────────────────────
   4px 기반. 반경은 5단계 — 그 이상은 시스템이 아니라 사고다.
   중첩된 모서리는 동심(concentric)이어야 한다: 안쪽 = 바깥쪽 − 패딩.        */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-xs: 6px;    /* 스와치, 태그, 인라인 칩 */
  --radius-s:  9px;    /* 버튼, 인풋, 작은 컨트롤 */
  --radius-m:  13px;   /* 카드, 패널, 팝오버 */
  --radius-l:  20px;   /* 시트, 모달, 큰 표면 */
  --radius-full: 999px;

  /* 히트 타겟 — 44px는 최소값이지, 목표값이 아니다 */
  --hit-min: 44px;
  --control-h: 32px;
  --control-h-lg: 40px;
}

/* ── 4. 모션 ───────────────────────────────────────────────────────────────
   Apple의 damping-ratio + response 파라미터로 계산한 스프링을 CSS linear()로
   샘플링했다. 값은 임의가 아니다 — 감쇠비 0.8은 실제로 약 1.5% 오버슈트한다.

     --spring-move   : damping 1.0 / response 0.40s — 오버슈트 없음. 기본값.
     --spring-sheet  : damping 0.8 / response 0.30s — 시트, 드로어.
     --spring-rotate : damping 0.8 / response 0.40s — 회전, 모멘텀.

   오버슈트는 제스처가 모멘텀을 실어줬을 때만 쓴다. 그냥 페이드인한 메뉴가
   튕기면 틀린 느낌이 든다.                                                   */

:root {
  --spring-move: linear(0, 0.0781, 0.2342, 0.4004, 0.548, 0.6682, 0.7611, 0.8306,
    0.8813, 0.9177, 0.9433, 0.9612, 0.9737, 0.9822, 0.988, 0.9919, 0.9946,
    0.9964, 0.9976, 0.9984, 0.999, 0.9993, 0.9995, 0.9997, 0.9998, 0.9999, 1);
  --spring-move-dur: 0.42s;

  --spring-sheet: linear(0, 0.0461, 0.1541, 0.2893, 0.429, 0.5596, 0.6736, 0.7683,
    0.8437, 0.9012, 0.9434, 0.973, 0.9927, 1.0049, 1.0116, 1.0146, 1.0151,
    1.0141, 1.0124, 1.0103, 1.0082, 1.0062, 1.0046, 1.0032, 1.0021, 1.0013, 1);
  --spring-sheet-dur: 0.41s;

  --spring-rotate: linear(0, 0.0461, 0.1541, 0.2893, 0.429, 0.5596, 0.6736, 0.7683,
    0.8437, 0.9012, 0.9434, 0.973, 0.9927, 1.0049, 1.0116, 1.0146, 1.0151,
    1.0141, 1.0124, 1.0103, 1.0082, 1.0062, 1.0046, 1.0032, 1.0021, 1.0013, 1);
  --spring-rotate-dur: 0.55s;

  /* 제스처가 아닌 것: 색/불투명도. 스프링이 필요 없다 */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-instant: 0.10s;   /* 프레스 피드백 — 사실상 즉시 */
  --dur-fast:    0.18s;   /* 호버, 색 전환 */
  --dur-medium:  0.28s;   /* 사라짐 */
}

/* ── 5. 재질 & 깊이 ───────────────────────────────────────────────────────
   Apple은 그림자로 계층을 만들지 않는다. 재질로 만든다.
   큰 표면 = 더 강한 블러 + 더 깊은 그림자. 작은 칩 = 가볍게.
   반투명 표면 위에 반투명 표면을 겹치지 않는다 — 가독성이 무너진다.          */

:root {
  --material-thin:    rgba(255, 255, 255, 0.62);
  --material-regular: rgba(255, 255, 255, 0.76);
  --material-thick:   rgba(255, 255, 255, 0.88);
  --material-blur-thin:    blur(14px) saturate(180%);
  --material-blur-regular: blur(24px) saturate(180%);
  --material-blur-thick:   blur(36px) saturate(190%);

  /* 재질 상단의 밝은 가장자리 — 빛이 표면에 걸리는 느낌 */
  --material-edge: inset 0 1px 0 rgba(255, 255, 255, 0.55);

  --scrim: rgba(0, 0, 0, 0.32);

  /* 고도 — 그림자는 두 겹이다: 접촉(tight) + 확산(ambient) */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.07);
  --elev-3: 0 2px 4px rgba(0, 0, 0, 0.07), 0 10px 28px rgba(0, 0, 0, 0.11);
  --elev-4: 0 4px 8px rgba(0, 0, 0, 0.09), 0 24px 60px rgba(0, 0, 0, 0.17);
  --focus-ring: 0 0 0 3.5px rgba(10, 108, 255, 0.32);
}

/* 재질 유틸리티 — 콘텐츠가 그 아래로 흐른다 */
.material-thin,
.material-regular,
.material-thick { box-shadow: var(--material-edge); }

.material-thin    { background: var(--material-thin);    -webkit-backdrop-filter: var(--material-blur-thin);    backdrop-filter: var(--material-blur-thin); }
.material-regular { background: var(--material-regular); -webkit-backdrop-filter: var(--material-blur-regular); backdrop-filter: var(--material-blur-regular); }
.material-thick   { background: var(--material-thick);   -webkit-backdrop-filter: var(--material-blur-thick);   backdrop-filter: var(--material-blur-thick); }

/* 스크롤 엣지 — 1px 구분선 대신 콘텐츠가 크롬 아래로 페이드된다 */
.scroll-edge {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}

/* ── 6. 상호작용 프리미티브 ────────────────────────────────────────────────
   프레스 피드백은 :active에 붙는다 — click을 기다리면 죽은 느낌이 든다.      */

.ds-pressable {
  transition: transform var(--dur-instant) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ds-pressable:active:not(:disabled) { transform: scale(0.97); }

/* 넓은 표면은 덜 눌린다 — 큰 판이 3% 줄면 과하게 보인다 */
.ds-pressable-surface:active:not(:disabled) { transform: scale(0.988); }

/* 포커스는 항상 보인다. 단, 키보드에서만 */
.ds-focusable:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 등장: 재질은 페이드가 아니라 "물질화"된다 — 블러와 스케일이 함께 움직인다 */
@keyframes ds-materialize {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ds-scrim-in { from { opacity: 0; } to { opacity: 1; } }

.ds-materialize {
  animation: ds-materialize var(--spring-sheet-dur) var(--spring-sheet) both;
  transform-origin: var(--ds-origin, center);
}
.ds-scrim-in { animation: ds-scrim-in var(--dur-medium) var(--ease-out) both; }

/* ── 7. 접근성 대응 ────────────────────────────────────────────────────────
   reduced-motion은 "피드백 없음"이 아니라 "전정기관을 건드리지 않는 피드백".
   이동과 오버슈트는 없애되, 불투명도 변화는 남긴다 — 이해를 돕기 때문.       */

@media (prefers-reduced-motion: reduce) {
  :root {
    --spring-move: linear(0, 1);
    --spring-sheet: linear(0, 1);
    --spring-rotate: linear(0, 1);
    --spring-move-dur: 0.01s;
    --spring-sheet-dur: 0.01s;
  }
  .ds-pressable:active:not(:disabled),
  .ds-pressable-surface:active:not(:disabled) { transform: none; }
  .ds-pressable { transition-duration: var(--dur-fast); }

  @keyframes ds-materialize {
    from { opacity: 0; transform: none; }
    to   { opacity: 1; transform: none; }
  }
  .ds-materialize { animation-duration: 0.16s; animation-timing-function: var(--ease-out); }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.12s !important;
    scroll-behavior: auto !important;
  }
}

/* 투명도 감소 — 블러를 걷고 표면을 불투명하게 */
@media (prefers-reduced-transparency: reduce) {
  .material-thin,
  .material-regular,
  .material-thick {
    background: var(--bg-elevated);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 1px solid var(--separator-opaque);
  }
  .scroll-edge { -webkit-mask-image: none; mask-image: none; }
}

/* 고대비 — 거의 불투명한 배경 + 분명한 테두리 */
@media (prefers-contrast: more) {
  :root {
    --separator: rgba(0, 0, 0, 0.42);
    --label-tertiary: var(--p-warm-700);
    --label-quaternary: var(--p-warm-500);
    --fill-primary: rgba(0, 0, 0, 0.10);
  }
  .material-thin,
  .material-regular,
  .material-thick {
    background: var(--bg-elevated);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--label-primary);
  }
}