/* 딸깍 STUDIO 공용 디자인 토큰 (부티크 로즈) — 랜딩/gifcut 등 모든 페이지 공유.
   색 바꾸려면 여기 한 곳만 고치면 됨. */
:root {
  --ink: #F4F0EC;        /* page base (warm neutral) */
  --ink-2: #ECE6E0;      /* soft fill (inputs, strip, bars) */
  --panel: #ffffff;      /* card surface */
  --panel-2: #F6F2EE;    /* secondary button / soft surface */
  --line: #E4DAD1;       /* border */
  --line-soft: #EEE6DE;  /* soft border */
  --text: #2A2125;       /* deep plum ink */
  --muted: #82706A;      /* muted (가독성 위해 진하게) */
  --muted-2: #97806F;    /* fainter muted (연한 안내문 가독성 개선) */
  --lav: #C77F8E;        /* main accent — dusty rose */
  --lav-dim: #C77F8E1f;  /* soft rose fill */
  --coral: #C9A86A;      /* secondary accent — gold (playhead, active) */
  --coral-press: #B5934F;
  --gold: #C9A86A;       /* gold pinpoint */
  --good: #5BBFA0;       /* online sage */
  --danger: #C0392B;     /* 위험/경고 (탈퇴·할인배지·임박) */
  --grad: linear-gradient(135deg, #DCA7AE 0%, #C77F8E 52%, #C9A86A 135%);
  /* 딥 와인 — 앱 홈의 시그니처(GRAD_DEEP)를 웹에 이식. CTA·핵심 버튼 등 포인트에만 (면적 15% 원칙) */
  --wine: #763349;
  --wine-grad: linear-gradient(135deg, #914058 0%, #763349 55%, #5A2537 130%);
  /* 그림자 3단 — 따뜻한 플럼 틴트(차가운 검정 그림자보다 고급스럽고 팔레트와 한 몸) */
  --shadow: 0 1px 2px rgba(58,42,47,0.04), 0 10px 30px -12px rgba(58,42,47,0.13);
  --shadow-sm: 0 1px 2px rgba(58,42,47,0.05);
  --shadow-lg: 0 2px 4px rgba(58,42,47,0.05), 0 24px 56px -20px rgba(58,42,47,0.20);
  --r: 14px;
  --r-sm: 10px;
  --r-lg: 18px;
}
:root[data-theme="dark"] {
  --ink: #1A1518; --ink-2: #241D22; --panel: #2A2228; --panel-2: #322A30;
  --line: #3D343B; --line-soft: #342C32;
  --text: #F3EBE8; --muted: #C0B2B8; --muted-2: #A2939A;
  --lav: #D896A2; --lav-dim: #D896A222;
  --coral: #D9B877; --coral-press: #C7A766; --gold: #D9B877; --good: #5BBFA0;
  --danger: #E58275;     /* 다크에선 밝은 산호빛 빨강 (어두운 배경 대비) */
  --grad: linear-gradient(135deg, #E0AAB1 0%, #D896A2 52%, #D9B877 135%);
  --wine: #8E4560;       /* 다크에선 한 단계 밝힌 와인 (어두운 배경 대비) */
  --wine-grad: linear-gradient(135deg, #A34E68 0%, #8E4560 55%, #6E3549 130%);
  --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 10px 30px -16px rgba(0,0,0,0.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.5), 0 26px 60px -20px rgba(0,0,0,0.7);
}

/* ── 전역 마감 (모든 페이지 공통) — 폰트 스무딩·선택색·포커스 링·탭 하이라이트 ── */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
* { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(199, 127, 142, .26); }
:focus-visible { outline: 2px solid var(--lav); outline-offset: 2px; border-radius: 4px; }