@charset "utf-8";

/* ============================================
   Material Design 3 — 디자인 토큰 (단일 진실원)
   하루이야기 커스텀 팔레트
   ============================================
   write/view 진입점 양쪽에서 로드되어야 함.
   write.skin.php: voice-recorder.css 보다 먼저
   view.skin.php : voice-player-view.css / voice-player-md3.css 보다 먼저
   ============================================ */

:root {
  /* SEC-CSS-001: 부모 테마(rb.basic)에서 정의되는 변수의 폴백.
     스킨이 단독 로드되거나 부모 토큰이 늦게 들어오는 상황에서도
     surface/elevation 색이 transparent로 빠지지 않게 한다.
     실제 값은 항상 부모 테마가 덮어쓴다 (cascading 우선순위 동일하므로
     선언 순서상 이 :root 가 먼저, 부모 :root 가 나중). */
  --bg-content: #ffffff;
  --bg-secondary: #f7f7f7;
  --shadow-color: rgba(0, 0, 0, 0.08);

  /* 메인 컬러 - 소프트 코랄 */
  --md-sys-color-primary: #E7A89D;
  --md-sys-color-on-primary: var(--bg-content);
  --md-sys-color-primary-container: #f5d1c9;
  --md-sys-color-on-primary-container: #2F2F2F;

  /* 보조 배경 - 페일 그레이 */
  --md-sys-color-secondary: #E6E6E6;
  --md-sys-color-on-secondary: #2F2F2F;
  --md-sys-color-secondary-container: #f0f0f0;
  --md-sys-color-on-secondary-container: #2F2F2F;

  /* 보조 강조 - 세이지 그린 */
  --md-sys-color-tertiary: #A8B8A0;
  --md-sys-color-on-tertiary: var(--bg-content);
  --md-sys-color-tertiary-container: #d4e0d0;
  --md-sys-color-on-tertiary-container: #2F2F2F;

  /* 포인트 - 소프트 코랄 */
  --md-sys-color-accent: #E7A89D;
  --md-sys-color-on-accent: var(--bg-content);
  --md-sys-color-accent-container: #f5d1c9;
  --md-sys-color-on-accent-container: #2F2F2F;

  /* 에러 - 테라코타 */
  --md-sys-color-error: #CC4F4F;
  --md-sys-color-on-error: var(--bg-content);
  --md-sys-color-error-container: #f5d1c9;
  --md-sys-color-on-error-container: #2F2F2F;

  /* 성공 - 세이지 그린 */
  --md-sys-color-success: #A8B8A0;
  --md-sys-color-on-success: var(--bg-content);

  /* 경고 - 소프트 코랄 */
  --md-sys-color-warning: #E7A89D;
  --md-sys-color-on-warning: #2F2F2F;

  /* 기본 배경 - 소프트 화이트 */
  --md-sys-color-surface: var(--bg-secondary);
  --md-sys-color-on-surface: #2F2F2F;
  --md-sys-color-surface-variant: #E6E6E6;
  --md-sys-color-on-surface-variant: #7A7A7A;
  --md-sys-color-surface-container: var(--bg-secondary);
  --md-sys-color-surface-container-low: #fcfcfc;
  --md-sys-color-surface-container-high: #E6E6E6;
  --md-sys-color-surface-container-highest: #C8C8C8;

  /* 아웃라인 */
  --md-sys-color-outline: #C8C8C8;
  --md-sys-color-outline-variant: #E6E6E6;

  /* Elevation shadows */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0px 1px 3px var(--shadow-color),
    0px 1px 2px var(--shadow-color);
  --md-sys-elevation-2: 0px 2px 6px var(--shadow-color),
    0px 3px 8px var(--shadow-color);
  --md-sys-elevation-3: 0px 4px 12px var(--shadow-color),
    0px 2px 6px var(--shadow-color);
  --md-sys-elevation-4: 0px 6px 16px var(--shadow-color),
    0px 3px 8px var(--shadow-color);

  /* Shape */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Motion */
  --md-sys-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --md-sys-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 400ms;
}