/*
 * Rose Garden design foundation
 * Shared visual tokens and low-risk primitives for every garden surface.
 * Route styles may map their legacy variables to the --rg-* tokens while
 * preserving the existing DOM, Firebase, and accessibility contracts.
 */

:root {
  --rg-paper: #f7f1e5;
  --rg-paper-soft: #fffaf1;
  --rg-paper-deep: #e8dcc7;
  --rg-ink: #314238;
  --rg-ink-strong: #1f3329;
  --rg-muted: #5f6b62;
  --rg-leaf: #587061;
  --rg-leaf-deep: #344f41;
  --rg-leaf-soft: #dfe9df;
  --rg-rose: #cf8795;
  --rg-rose-deep: #a65e70;
  --rg-rose-soft: #f1d9dd;
  --rg-sky: #cfe2e7;
  --rg-water: #8bb5c5;
  --rg-gold: #e5c27b;
  --rg-gold-soft: #f7e8b9;
  --rg-night: #29384f;
  --rg-line: rgba(49, 66, 56, .16);
  --rg-line-strong: rgba(49, 66, 56, .28);
  --rg-focus: rgba(166, 94, 112, .8);
  --rg-danger: #994b58;
  --rg-success: #4d7254;

  --rg-serif: 'Gowun Batang', serif;
  --rg-display: 'Cormorant Garamond', Georgia, serif;
  --rg-sans: 'Noto Sans KR', sans-serif;

  --rg-radius-sm: 10px;
  --rg-radius-md: 16px;
  --rg-radius-lg: 26px;
  --rg-radius-pill: 999px;
  --rg-mobile-card-radius: 20px;
  --rg-radius-page: 36px 36px 12px 36px;
  --rg-shadow-soft: 0 16px 46px rgba(39, 53, 44, .09);
  --rg-shadow-paper: 0 26px 72px rgba(39, 53, 44, .15);
  --rg-shadow-scene: 0 38px 110px rgba(29, 42, 34, .27);

  --rg-space-1: 4px;
  --rg-space-2: 8px;
  --rg-space-3: 12px;
  --rg-space-4: 16px;
  --rg-space-5: 24px;
  --rg-space-6: 32px;
  --rg-space-7: 48px;
  --rg-space-8: 72px;
  --rg-action-inline: 20px;
  --rg-touch-comfortable: 48px;

  --rg-motion-fast: 180ms;
  --rg-motion: 280ms;
  --rg-motion-slow: 680ms;
  --rg-ease: cubic-bezier(.2, .72, .2, 1);

  /* 꿈결 템포 토큰 — 모든 잔류 CSS 애니메이션은 이 호흡의 배수를 쓴다.
   * 공유 앰비언트 엔진(garden-ambient.js)의 바람 드라이버와 함께
   * 장면 전체가 같은 속도로 숨 쉬게 만드는 기준점이다. */
  --tempo-drift: 26s;
  --tempo-breath: 9s;
  --tempo-sway: 14s;
  --ease-organic: cubic-bezier(.37, 0, .63, 1);

  /* 이야기 척추 시간대 토큰 — 그림책 다섯 장(表紙·아침·오후·석양·책방)의
   * 챕터 라벨과 브릿지에 같은 숨결의 색을 입힌다. (garden-story.css 사용) */
  --rg-tone-dawn: #8d7f62;
  --rg-tone-morning: #6d8f5e;
  --rg-tone-day: #a3824e;
  --rg-tone-sunset: #b06a75;
  --rg-tone-candle: #9c7c46;
  --rg-pageveil-ms: 880ms;

  /* 종이 결 질감 — 라이브 mix-blend-mode 대신 쓰는 사전 렌더링 노이즈.
   * feTurbulence로 만든 96px 타일이라 다운로드/합성 비용이 거의 없다. */
  --rg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

html {
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  accent-color: var(--rg-leaf);
  line-break: strict;
}

body {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Keep Korean eojeol and natural phrases together on narrow screens. Long
 * URLs and machine-generated tokens can still yield when a container has no
 * other safe break point. */
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, label, legend, summary, button, a, small, strong, em, figcaption) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

:where(p, li, blockquote, label, small, button, a) {
  text-wrap: pretty;
}

:where(pre, code, kbd, samp) {
  word-break: normal;
  overflow-wrap: anywhere;
}

::selection {
  color: var(--rg-ink-strong);
  background: var(--rg-rose-soft);
}

:where(button, input, textarea, select) {
  font: inherit;
}

:where(button, a, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--rg-focus);
  outline-offset: 3px;
}

:where(button, summary) {
  -webkit-tap-highlight-color: transparent;
}

.garden-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.garden-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #fff;
  background: var(--rg-leaf-deep);
  box-shadow: 0 12px 28px rgba(52, 79, 65, .18);
  font-family: var(--rg-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    translate var(--rg-motion-fast) var(--rg-ease),
    box-shadow var(--rg-motion-fast) ease,
    background-color var(--rg-motion-fast) ease;
}

.garden-button:hover,
.garden-button:focus-visible {
  translate: 0 -2px;
  box-shadow: 0 17px 34px rgba(52, 79, 65, .25);
}

.garden-button.is-quiet {
  color: var(--rg-leaf-deep);
  border-color: var(--rg-line-strong);
  background: rgba(255, 255, 255, .58);
  box-shadow: none;
}

.garden-status {
  min-height: 24px;
  color: var(--rg-muted);
  font-size: 13px;
  line-height: 1.65;
}

.garden-status.is-success {
  color: var(--rg-success);
}

.garden-status.is-error {
  color: var(--rg-danger);
}

/* 정원을 걷는 손잡이 — 조용한 잎사귀색 스크롤바 */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(88, 112, 97, .5) transparent;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(88, 112, 97, .42) padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(52, 79, 65, .58) padding-box;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

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

/* ------------------------------------------------------------------ */
/* 공유 앰비언트 엔진 레이어 (garden-ambient.js)                       */
/* ------------------------------------------------------------------ */

/* 먼 층: 미리 블러 처리한 배경 이미지. transform만 사용하는 느린 드리프트. */
.ambient-far {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  opacity: var(--ambient-far-opacity, .5);
  animation: ambientFarDrift calc(var(--tempo-drift) * 1.4) var(--ease-organic) infinite alternate;
  will-change: transform;
}

@keyframes ambientFarDrift {
  from { transform: translate3d(calc(var(--ambient-drift, 14px) * -1), -6px, 0) scale(1.02); }
  to { transform: translate3d(var(--ambient-drift, 14px), 6px, 0) scale(1.06); }
}

/* 가까운 층: 파티클 캔버스. 엔진이 30fps로 직접 그림. */
.ambient-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-far {
    animation: none !important;
  }
}

/* ---------- 음성으로 적기 버튼 ---------- */
.voice-input-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 18px;
  border: 1.5px solid var(--rg-rose-deep);
  border-radius: 999px;
  color: var(--rg-rose-deep);
  background: rgba(255, 250, 241, .9);
  font: 600 15px/1 var(--rg-sans);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s var(--rg-ease), box-shadow .2s ease;
}
.voice-input-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.voice-input-button:hover,
.voice-input-button:focus-visible {
  color: #fff;
  background: var(--rg-rose-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(166, 94, 112, .28);
}
.voice-input-button.is-listening {
  color: #fff;
  background: var(--rg-rose-deep);
  border-color: var(--rg-rose-deep);
}
.voice-input-button.is-listening svg {
  animation: voice-input-pulse 1.1s ease-in-out infinite;
}
.voice-input-unavailable {
  max-width: 28rem;
  color: var(--rg-muted);
  font: 500 13px/1.55 var(--rg-sans);
  word-break: keep-all;
}
@keyframes voice-input-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-input-button.is-listening svg { animation: none; }
}