/*
 * 디자인 테마 "premium" (모든 화면). 기본 On. 로그인 화면 오른쪽 아래·상단 검색창 왼쪽 토글로 끄고 켠다 (이 브라우저에 기억).
 * 모든 규칙은 html[data-theme="premium"] 아래에만 있어 테마를 켜지 않으면 기존 화면(style.css) 그대로다.
 * 색: 로고의 짙은 네이비 + 네온 블루 / 글꼴: Pretendard (index.html에서 테마일 때만 불러옴)
 */

/* ===== 디자인 토큰 ===== */
html[data-theme="premium"] {
  --color-bg: #f2f4f8;
  --color-surface: #ffffff;
  --color-border: #e6e9f0;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-primary: #2563eb;
  --color-primary-weak: #eaf1ff;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .06);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .22);

  --navy-900: #070d1f;
  --navy-800: #0b1530;
  --navy-700: #13204a;
  --neon: #4f8cff;
  --neon-soft: rgba(79, 140, 255, .22);
  --grad-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);

  --font: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --sidebar-width: 248px;
  --topbar-height: 64px;
}
html[data-theme="premium"] body {
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* ===== 버튼 · 입력 공통 ===== */
html[data-theme="premium"] .btn { border-radius: 10px; transition: background-color .15s, box-shadow .15s, transform .05s; }
html[data-theme="premium"] .btn:active { transform: translateY(1px); }
html[data-theme="premium"] .btn-primary {
  background: var(--grad-primary);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}
html[data-theme="premium"] .btn-primary:hover { background: var(--grad-primary); filter: brightness(1.06); }
html[data-theme="premium"] .input { border-radius: 10px; }
html[data-theme="premium"] .input:focus { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); }

/* ===== 사이드바 (블랙: 상단 로고 logo4.jpg 배경 #111111 과 같은 색) ===== */
html[data-theme="premium"] .sidebar {
  padding: 20px 14px;
  background: #111111;
  border-right: 0;
}
html[data-theme="premium"] .sidebar .brand { padding: 4px 8px 22px; color: #fff; font-size: 18px; letter-spacing: -0.02em; }
html[data-theme="premium"] .sidebar .brand-logo { width: 40px; height: 40px; border-radius: 12px; box-shadow: none; }
html[data-theme="premium"] .sidebar-nav { gap: 4px; }
html[data-theme="premium"] .nav-link { padding: 11px 14px; border-radius: 12px; color: #a3a3a3; font-weight: 600; transition: background-color .15s, color .15s; }
html[data-theme="premium"] .nav-link:hover { background: rgba(255, 255, 255, .07); color: #f5f5f5; }
html[data-theme="premium"] .nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  box-shadow: inset 3px 0 0 #d4d4d4;
}

/* ===== 상단 바 ===== */
html[data-theme="premium"] .topbar {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}
html[data-theme="premium"] .search { height: 40px; border-color: transparent; border-radius: 999px; background: #eef1f6; padding: 0 16px; }
html[data-theme="premium"] .search:focus-within { background: #fff; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
html[data-theme="premium"] .user-name {
  border-radius: 999px;
  background: #eef1f6;
  font-weight: 700;
  line-height: 36px;
  min-height: 36px;
  padding: 0 14px;
}
html[data-theme="premium"] .logout { border-radius: 999px; min-height: 36px; }

/* ===== 페이지 공통 ===== */
html[data-theme="premium"] .page { padding: 28px 32px 40px; }
html[data-theme="premium"] .page-header { margin-bottom: 22px; }
html[data-theme="premium"] .page-header h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
html[data-theme="premium"] .page-header .muted { margin-top: 2px; font-size: 14px; }
html[data-theme="premium"] .card { border-color: rgba(15, 23, 42, .06); border-radius: var(--radius); padding: 22px; }
html[data-theme="premium"] .card-title { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
html[data-theme="premium"] .badge { font-weight: 700; }

/* ===== 대시보드: 확인 필요 알림 ===== */
html[data-theme="premium"] .dash-review {
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(90deg, #fff7e8, #fffaf2);
  box-shadow: inset 0 0 0 1px #f8dcaa, var(--shadow);
}

/* ===== 대시보드: 이번 달 요약 → 큰 숫자 타일 ===== */
html[data-theme="premium"] .dash-month { padding: 0; background: transparent; border: 0; box-shadow: none; }
html[data-theme="premium"] .dash-month .card-title { margin: 0 0 12px 2px; font-size: 15px; color: var(--color-muted); font-weight: 700; }
html[data-theme="premium"] .dash-month .stat-grid { gap: 16px; }
html[data-theme="premium"] .dash-month .stat {
  position: relative;
  gap: 6px;
  padding: 20px 20px 18px;
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06), var(--shadow);
  overflow: hidden;
}
html[data-theme="premium"] .dash-month .stat::before {
  content: "";
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--chip-bg, #eaf1ff) var(--chip-icon) center / 22px no-repeat;
}
html[data-theme="premium"] .dash-month .stat-label { font-size: 13px; font-weight: 600; }
html[data-theme="premium"] .dash-month .stat-value { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* 타일 아이콘 (SVG, 색은 타일마다) */
html[data-theme="premium"] .stat[data-stat="new"] {
  --chip-bg: #eaf1ff;
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0M19 8v6M16 11h6'/%3E%3C/svg%3E");
}
html[data-theme="premium"] .stat[data-stat="renewal"] {
  --chip-bg: #f1ecff;
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
}
html[data-theme="premium"] .stat[data-stat="done"] {
  --chip-bg: #fff3e3;
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea7a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 7v10M3.5 9.5v5M17.5 7v10M20.5 9.5v5M6.5 12h11'/%3E%3C/svg%3E");
}
/* 매출 타일은 로고 색(네이비 + 네온)으로 강조 */
html[data-theme="premium"] .stat[data-stat="revenue"] {
  --chip-bg: rgba(255, 255, 255, .12);
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(79, 140, 255, .45), transparent 70%),
    linear-gradient(135deg, var(--navy-700), var(--navy-900));
  box-shadow: 0 10px 28px rgba(11, 21, 48, .35);
  color: #fff;
}
html[data-theme="premium"] .stat[data-stat="revenue"] .stat-label { color: #a8b8d8; }

/* ===== 대시보드: 위젯 ===== */
html[data-theme="premium"] .dash-grid { gap: 20px; }
html[data-theme="premium"] .dash-side { gap: 20px; }
html[data-theme="premium"] .dash-widget-head { margin-bottom: 8px; }
html[data-theme="premium"] .dash-count { background: var(--color-primary-weak); color: var(--color-primary); font-weight: 800; font-size: 12px; min-width: 24px; line-height: 20px; }
html[data-theme="premium"] .dash-item + .dash-item { border-top-color: #f0f2f6; }
html[data-theme="premium"] .dash-item-link { min-height: 52px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; }
html[data-theme="premium"] .dash-item-link:hover { background: #f5f7fb; }
html[data-theme="premium"] .dash-item-main strong { font-weight: 700; }

/* 오늘의 수업 */
html[data-theme="premium"] .today-list { gap: 8px; }
html[data-theme="premium"] .today-item {
  min-height: 64px;
  padding: 10px 12px 10px 14px;
  border: 1px solid #edf0f5;
  border-left-width: 1px;
  border-radius: 12px;
  box-shadow: inset 4px 0 0 var(--c);
  background: #fff;
  transition: box-shadow .15s, border-color .15s;
}
html[data-theme="premium"] .today-item:hover { border-color: #dbe3f0; box-shadow: inset 4px 0 0 var(--c), 0 4px 14px rgba(15, 23, 42, .06); }
html[data-theme="premium"] .today-item.status-done { background: #f7fbf8; }
html[data-theme="premium"] .today-time { width: 52px; font-size: 15px; font-weight: 800; color: var(--navy-800); }
html[data-theme="premium"] .today-main a, html[data-theme="premium"] .today-main strong { font-weight: 700; }
html[data-theme="premium"] .today-done { border-radius: 10px; }

/* ===== 로그인 (로고 logo2.jpg 와 같은 블랙 + 실버) ===== */
html[data-theme="premium"] .auth-root {
  padding: 32px 16px;
  /* 로고 이미지(icon-192.png) 배경색(#111~#121212)과 같은 검정 단색. 그라데이션을 두면 로고 사각형이 배경과 달라 보인다 */
  background: #111111;
  color: #e5e5e5;
}
/* 카드는 위아래 빈 공간을 나눠 가운데, 카피라이트는 그 아래 맨 밑 */
html[data-theme="premium"] .auth-root > .auth-card { margin-block: auto; }
html[data-theme="premium"] .auth-footer { margin-top: 0; color: #737373; }
html[data-theme="premium"] .auth-card {
  max-width: 420px;
  padding: 24px 32px 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #e5e5e5;
}
html[data-theme="premium"] .auth-logo { margin: 0 0 28px; }
/* 로고: 테두리·그림자·둥근 모서리 없이 그대로 */
html[data-theme="premium"] .auth-logo img {
  width: 168px;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-theme="premium"] .auth-form { gap: 14px; }
html[data-theme="premium"] .auth-card .input {
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: #f1f5f9;
  font-size: 16px;
}
html[data-theme="premium"] .auth-card .input::placeholder { color: #8a8a8a; }
html[data-theme="premium"] .auth-card .input:focus { border-color: #d4d4d4; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
html[data-theme="premium"] .auth-card .input:-webkit-autofill {
  -webkit-text-fill-color: #f1f5f9;
  -webkit-box-shadow: 0 0 0 100px #262626 inset;
  caret-color: #f1f5f9;
}
html[data-theme="premium"] .auth-card .field-error { color: #fca5a5; }
html[data-theme="premium"] .auth-card .input[aria-invalid="true"] { border-color: #f87171; }
html[data-theme="premium"] .auth-card .toggle { color: #d4d4d4; font-size: 14px; }
html[data-theme="premium"] .auth-card .toggle-track { background: rgba(255, 255, 255, .22); }
html[data-theme="premium"] .auth-card .toggle input:checked + .toggle-track { background: #d4d4d4; }
html[data-theme="premium"] .auth-card .field-hint { color: #8a8a8a; }
html[data-theme="premium"] .auth-card .btn-block { min-height: 52px; margin-top: 6px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #f5f5f5, #c8c8c8); color: #111; font-size: 16px; font-weight: 700; letter-spacing: 0; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
html[data-theme="premium"] .auth-card .btn-block:hover { background: linear-gradient(180deg, #ffffff, #d6d6d6); }
html[data-theme="premium"] .auth-message { border: 1px solid rgba(248, 113, 113, .35); background: rgba(239, 68, 68, .12); color: #fecaca; }
/* 첫 로그인 비밀번호 변경 화면 (같은 배경) */
html[data-theme="premium"] .auth-brand { color: #fff; }
html[data-theme="premium"] .auth-brand .brand-logo { border-radius: 12px; }
html[data-theme="premium"] .auth-title { color: #fff; }
html[data-theme="premium"] .auth-card .muted, html[data-theme="premium"] .auth-card .field-label { color: #d4d4d4; }
html[data-theme="premium"] .auth-card .btn-ghost { color: #a3a3a3; }

/* ===== 나머지 화면 공통 부품 ===== */
/* 표 */
html[data-theme="premium"] .table-wrap { border-color: rgba(15, 23, 42, .07); border-radius: 14px; box-shadow: var(--shadow); }
html[data-theme="premium"] .table th { background: #f7f9fc; color: #64748b; font-size: 12.5px; font-weight: 700; letter-spacing: 0; border-bottom-color: #e9edf3; }
html[data-theme="premium"] .table td { border-bottom-color: #f0f2f6; }
html[data-theme="premium"] .table tr.clickable:hover, html[data-theme="premium"] .table tr.clickable:focus-visible { background: #f4f7ff; }
html[data-theme="premium"] .card .table-wrap { box-shadow: none; }

/* 페이지 버튼 */
html[data-theme="premium"] .pager-btn { border-radius: 10px; border-color: #e6e9f0; }
html[data-theme="premium"] .pager-num.is-current { background: var(--grad-primary); border-color: transparent; box-shadow: 0 4px 12px rgba(37, 99, 235, .3); }

/* 탭 (회원 상세): 알약 모양 */
html[data-theme="premium"] .tabs { gap: 6px; padding: 4px; border: 0; border-radius: 14px; background: #e9edf4; width: fit-content; max-width: 100%; }
html[data-theme="premium"] .tab { padding: 8px 16px; border: 0; border-radius: 10px; color: #64748b; transition: background-color .15s, color .15s; }
html[data-theme="premium"] .tab:hover { color: var(--color-text); }
html[data-theme="premium"] .tab[aria-selected="true"] { background: #fff; color: var(--color-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 10px rgba(15, 23, 42, .06); }

/* 숫자 칸 (매출/통계 요약 등): 회색 칸 → 테두리 있는 흰 칸 */
html[data-theme="premium"] .stat { padding: 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e9edf3; }
html[data-theme="premium"] .stat-value { font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* 팝업: 뒤 배경 흐림 + 둥근 창 */
html[data-theme="premium"] .modal-backdrop { background: rgba(7, 13, 31, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html[data-theme="premium"] .modal { border-radius: 20px; box-shadow: 0 30px 80px rgba(7, 13, 31, .35); }
html[data-theme="premium"] .modal-header { border-bottom-color: #eef1f6; }
html[data-theme="premium"] .modal-header h2 { font-weight: 800; letter-spacing: -0.02em; }
html[data-theme="premium"] .modal-footer { border-top-color: #eef1f6; }

/* 알림 (오른쪽 위) */
html[data-theme="premium"] .toast { border-radius: 12px; background: rgba(15, 23, 42, .94); backdrop-filter: blur(8px); font-weight: 600; }
html[data-theme="premium"] .toast-success { background: linear-gradient(135deg, #16a34a, #15803d); }
html[data-theme="premium"] .toast-error { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* 안내 상자 */
html[data-theme="premium"] .callout { border-radius: 14px; }

/* 선택 칩 (목표·컨디션 등) */
html[data-theme="premium"] .choice span { border-color: #e2e7ef; transition: background-color .15s, border-color .15s, color .15s; }
html[data-theme="premium"] .choice input:checked + span { background: var(--color-primary-weak); border-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }

/* 수강권 카드 */
html[data-theme="premium"] .pass-card { border-color: rgba(15, 23, 42, .06); }
html[data-theme="premium"] .progress { height: 8px; border-radius: 999px; background: #edf1f7; }
html[data-theme="premium"] .progress span { border-radius: 999px; background: var(--grad-primary); }

/* 수업 일정 (캘린더) */
html[data-theme="premium"] .cal-head { background: rgba(255, 255, 255, .96); }
html[data-theme="premium"] .cal-day-head.is-today .cal-date { background: var(--grad-primary); box-shadow: 0 4px 10px rgba(37, 99, 235, .35); }
html[data-theme="premium"] .cal-event { border-radius: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
html[data-theme="premium"] .cal-event.status-done { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 92%, #fff), var(--c)); box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 30%, transparent); }

/* 운동일지 */
html[data-theme="premium"] .wl-entry { border-color: rgba(15, 23, 42, .06); }
html[data-theme="premium"] .wl-savebar { background: rgba(242, 244, 248, .85); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-top-color: rgba(15, 23, 42, .06); }
html[data-theme="premium"] .wl-savebar { margin: 0 -32px -40px; padding: 12px 32px; }   /* 페이지 여백(28px 32px 40px)에 맞춤 */
html[data-theme="premium"] .wl-save { border-radius: 14px; }

/* 상단 검색 결과 */
html[data-theme="premium"] .search-results { border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 23, 42, .16); }

/* 디자인 테마 토글 */
html[data-theme="premium"] .theme-toggle { border-color: transparent; background: #eef1f6; }
html[data-theme="premium"] .theme-toggle[aria-checked="true"] .theme-toggle-track { background: var(--grad-primary); }
/* 로그인 화면(어두운 배경) 오른쪽 아래 */
html[data-theme="premium"] .theme-toggle-floating {
  border: 1px solid rgba(148, 163, 184, .25);
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #94a3b8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
html[data-theme="premium"] .theme-toggle-floating .theme-toggle-state { color: #e2e8f0; }

/* 회원 상세 위쪽 버튼: 뒤로 가기·수정·탈퇴 처리를 또렷한 테두리 버튼으로 */
html[data-theme="premium"] .back-link { border-color: #dfe4ec; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
html[data-theme="premium"] .back-link:hover { border-color: #c9d2e0; background: #fff; }
html[data-theme="premium"] .header-actions .btn:not(.btn-primary) { border-color: #dfe4ec; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
html[data-theme="premium"] .header-actions .btn:not(.btn-primary):hover { border-color: #c9d2e0; background: #fff; }
html[data-theme="premium"] .header-actions .btn-outline-danger { border-color: #f5c2bc; color: #dc2626; }
html[data-theme="premium"] .header-actions .btn-outline-danger:hover { border-color: #ef4444; background: #fef2f2; }

/* ===== 휴대폰 (768px 이하) ===== */
@media (max-width: 768px) {
  html[data-theme="premium"] .page { padding: 18px 16px 16px; }
  html[data-theme="premium"] .page-header h1 { font-size: 24px; }
  html[data-theme="premium"] .topbar { padding: 0 14px; }
  html[data-theme="premium"] .brand-compact .brand-logo { border-radius: 10px; }
  html[data-theme="premium"] .dash-month .stat-grid { gap: 10px; }
  html[data-theme="premium"] .dash-month .stat { padding: 14px; }
  html[data-theme="premium"] .dash-month .stat::before { width: 34px; height: 34px; margin-bottom: 4px; background-size: 18px; }
  html[data-theme="premium"] .dash-month .stat-value { font-size: 21px; }
  html[data-theme="premium"] .card { padding: 18px 16px; }
  html[data-theme="premium"] .tabbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .05);
  }
  html[data-theme="premium"] .tab-link { font-weight: 600; }
  html[data-theme="premium"] .tab-link[aria-current="page"] { color: var(--color-primary); }
  html[data-theme="premium"] .tab-link[aria-current="page"] .icon { filter: drop-shadow(0 2px 6px rgba(37, 99, 235, .35)); }
  html[data-theme="premium"] .auth-card { padding: 32px 22px 24px; border-radius: 22px; }
  html[data-theme="premium"] .auth-logo img { width: 148px; height: auto; border-radius: 0; }
  html[data-theme="premium"] .tabs { width: auto; }
  html[data-theme="premium"] .settings-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  html[data-theme="premium"] .tab { padding: 8px 12px; }
  html[data-theme="premium"] .wl-savebar { margin: 0 -16px; padding: 10px 16px; }
}

/* ===== 접근성 보강: 입력칸 포커스 링을 더 또렷하게, 오류칸 테두리 유지 ===== */
html[data-theme="premium"] .input:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, .35); }
html[data-theme="premium"] .has-error .input,
html[data-theme="premium"] .input[aria-invalid="true"] { border-color: var(--color-danger); }
html[data-theme="premium"] .has-error .input:focus { box-shadow: 0 0 0 3px rgba(217, 48, 37, .28); }