/* ══════════════════════════════════════════════════════════════
   HERMES — Design System 공통 레이어 (2026-05-31)
   목적: ① style.css 미링크 페이지(doctor-*, lifelog, money, sessions)도
   토큰·폰트·폼컨트롤·유틸을 상속받도록 ② 네이티브 컨트롤 다크테마 통일
   ③ empty-state / skeleton / 진입 모션 / hover 유틸 제공.
   토큰 canonical = style.css :root. 여기 :root 는 미링크 페이지용 fallback(동일값)
   + 신규 토큰. style.css 와 함께 로드돼도 동일값이라 무해.
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&display=swap');

:root{
  /* ── style.css 미링크 페이지용 fallback (동일값, 중복 무해) ── */
  --bg:#060a13; --surface:#0b1120; --overlay:#142033;
  --text:#d0dae8; --subtext:#7a90a8;
  --accent:#00d4ff; --accent-dim:rgba(0,212,255,.15); --accent-glow:rgba(0,212,255,.4);
  --green:#00ff88; --red:#ff3366; --yellow:#ffaa00; --blue:#38bdf8; --peach:#ff8844; --teal:#00e5cc;
  --purple:#a78bfa;
  --glow:0 0 8px rgba(0,212,255,.25);
  --glow-strong:0 0 15px rgba(0,212,255,.4), 0 0 40px rgba(0,212,255,.15);
  --line:rgba(0,212,255,.12); --line-soft:rgba(0,212,255,.06);
  --font-ui:'Rajdhani',-apple-system,'Segoe UI','Pretendard','Apple SD Gothic Neo',sans-serif;
  --font-tech:'Orbitron',var(--font-ui);
  --font-mono:'Share Tech Mono','JetBrains Mono','Fira Code',monospace;
  --fs-xs:10px; --fs-sm:11px; --fs-md:12px; --fs-lg:13px; --fs-xl:16px; --fs-2xl:20px;
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --t-fast:.15s; --t-base:.2s; --t-slow:.3s;
  --text-0:#ffffff; --text-1:#d0dae8; --text-2:#7a90a8; --text-3:#5a6b80;

  /* ════════ 신규 토큰 ════════ */
  /* 비표준 간격 흡수 */
  --sp-3-5:14px; --sp-4-5:18px;
  /* 저대비 본문 보정 — text-3(#5a6b80) 대신 본문엔 이걸 */
  --text-readable:#a6b4c4;
  /* dim 배경 (자주 쓰는 rgba 패턴 토큰화) */
  --bg-accent-dim:rgba(0,212,255,.10);
  --bg-green-dim:rgba(0,255,136,.10);
  --bg-red-dim:rgba(255,51,102,.10);
  --bg-yellow-dim:rgba(255,170,0,.10);
  --bg-purple-dim:rgba(167,139,250,.10);
  /* semantic 분리: 경보(alert) ≠ 파괴(danger) */
  --alert:#ffaa00; --danger:#ff3366;
  /* 신규발견(2026-05-31): agora.html이 참조하나 어떤 CSS에도 미정의였던 토큰 보강 */
  --user:#a855f7;                       /* agora 사용자/요청 활동 색 */
  --accent-soft:rgba(0,212,255,.12);    /* accent soft 배경 */
  /* categorical 차트 팔레트 (HUI.COLORS 동기화) */
  --chart-1:#00d4ff; --chart-2:#00ff88; --chart-3:#ffaa00; --chart-4:#ff8844; --chart-5:#ff3366;
  --chart-6:#a78bfa; --chart-7:#00e5cc; --chart-8:#38bdf8; --chart-9:#d0dae8; --chart-10:#7a90a8;
  /* 깊이감 배경 (frontend-design: solid 대신 분위기/depth) */
  --depth-radial:radial-gradient(1100px 560px at 72% -12%, rgba(0,212,255,.055), transparent 60%),
                 radial-gradient(820px 460px at -5% 108%, rgba(167,139,250,.045), transparent 55%);
}

/* ════════ 깊이감 배경 유틸 ════════ */
.ds-depth-bg{ background-image:var(--depth-radial); background-attachment:fixed; }

/* ════════ 네이티브 폼컨트롤 다크테마 통일 ════════
   element 셀렉터(낮은 특이성) → 페이지가 명시 스타일링한 곳은 그쪽이 이김.
   스타일 안 된 네이티브 컨트롤에만 사실상 적용. */
select, input[type=date], input[type=time], input[type=datetime-local], input[type=month]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:var(--overlay); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:8px 10px; font-family:var(--font-ui); font-size:var(--fs-md);
  outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
select{
  padding-right:30px; background-repeat:no-repeat; background-position:right 9px center;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
select:focus, input[type=date]:focus, input[type=time]:focus, input[type=datetime-local]:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--bg-accent-dim);
}
select option{ background:var(--surface); color:var(--text); }
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{ filter:invert(.75) sepia(1) saturate(4) hue-rotate(150deg); cursor:pointer; opacity:.85; }

/* file input → 커스텀 버튼화 */
input[type=file]{ color:var(--subtext); font-family:var(--font-ui); font-size:var(--fs-sm); }
input[type=file]::-webkit-file-upload-button, input[type=file]::file-selector-button{
  appearance:none; background:var(--bg-accent-dim); color:var(--accent);
  border:1px solid var(--accent); border-radius:var(--r-md);
  padding:7px 16px; margin-right:12px; font-family:var(--font-ui); font-weight:600; font-size:var(--fs-md);
  cursor:pointer; transition:all var(--t-fast);
}
input[type=file]::-webkit-file-upload-button:hover, input[type=file]::file-selector-button:hover{
  background:var(--accent); color:var(--bg); box-shadow:var(--glow);
}

/* 클래스 없는 기본 button → 네이티브 회색 제거 (페이지가 class 부여한 버튼은 미적용) */
button:not([class]){
  appearance:none; background:var(--overlay); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:7px 14px; font-family:var(--font-ui); font-weight:600; font-size:var(--fs-md);
  cursor:pointer; transition:all var(--t-fast);
}
button:not([class]):hover{ border-color:var(--accent); color:var(--accent); box-shadow:var(--glow); }
button:not([class]):active{ transform:translateY(1px); }
button:not([class]):disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

/* ════════ Empty State ════════ */
.ds-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:44px 24px; text-align:center; color:var(--subtext); min-height:150px;
}
.ds-empty-icon{ font-size:32px; opacity:.45; line-height:1; }
.ds-empty-title{ font-family:var(--font-ui); font-size:var(--fs-lg); color:var(--text); font-weight:600; }
.ds-empty-desc{ font-size:var(--fs-sm); max-width:360px; line-height:1.65; color:var(--text-readable); }
.ds-empty-cta{ margin-top:8px; }

/* ════════ Skeleton (로딩 placeholder) ════════ */
.ds-skeleton{ position:relative; overflow:hidden; background:var(--overlay); border-radius:var(--r-md); }
.ds-skeleton::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(0,212,255,.09), transparent);
  animation:ds-shimmer 1.4s ease-in-out infinite;
}
.ds-skeleton-line{ height:12px; margin:9px 0; border-radius:var(--r-sm); }
.ds-skeleton-block{ width:100%; height:100%; min-height:120px; }
@keyframes ds-shimmer{ 100%{ transform:translateX(100%); } }

/* ════════ 진입 모션 — staggered reveal (frontend-design: 1회 페이지로드 delight) ════════ */
@keyframes ds-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.ds-reveal > *{ opacity:0; animation:ds-rise .5s cubic-bezier(.2,.7,.2,1) forwards; }
.ds-reveal > *:nth-child(1){ animation-delay:.03s }
.ds-reveal > *:nth-child(2){ animation-delay:.07s }
.ds-reveal > *:nth-child(3){ animation-delay:.11s }
.ds-reveal > *:nth-child(4){ animation-delay:.15s }
.ds-reveal > *:nth-child(5){ animation-delay:.19s }
.ds-reveal > *:nth-child(6){ animation-delay:.23s }
.ds-reveal > *:nth-child(7){ animation-delay:.27s }
.ds-reveal > *:nth-child(8){ animation-delay:.31s }
.ds-reveal > *:nth-child(n+9){ animation-delay:.35s }

/* ════════ Hover lift (카드 마이크로 인터랙션) ════════ */
.ds-hover-lift{ transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.ds-hover-lift:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.38), var(--glow);
  border-color:var(--accent);
}

/* ════════ 접근성: 모션 최소화 선호 ════════ */
@media (prefers-reduced-motion: reduce){
  .ds-reveal > *{ animation:none; opacity:1; }
  .ds-skeleton::after{ animation:none; }
  .ds-hover-lift:hover{ transform:none; }
}

/* ════════ 공통 유틸 ════════ */
.ds-muted{ color:var(--text-readable); }       /* 저대비 본문 보정 */
.ds-mono{ font-family:var(--font-mono); }
.ds-badge-legend{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--subtext); }
.ds-badge-legend .dot{ width:9px; height:9px; border-radius:var(--r-full); display:inline-block; }