/* ============================================================
   KHA-VDM — Apple-style design system
   화이트 베이스 · 시스템 폰트 · pill 버튼 · 부드러운 그림자 · 라운드 카드
   (Tailwind Play CDN 유틸리티와 병행. 여기엔 토큰·컴포넌트 클래스만 둔다)
   ============================================================ */

:root {
  --bg:            #fbfbfd;   /* 앱 배경(near-white) */
  --surface:       #ffffff;   /* 카드 표면 */
  --text:          #1d1d1f;   /* 본문(애플 다크 그레이) */
  --text-2:        #6e6e73;   /* 보조 텍스트 */
  --text-3:        #86868b;   /* 캡션 */
  --border:        rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.14);
  --accent:        #0071e3;   /* 애플 블루 — 포커스·링크 한정 */
  --radius-card:   1rem;      /* rounded-2xl 느낌 */
  --radius-field:  .75rem;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.02);
  --shadow-md:     0 8px 24px rgba(0,0,0,.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Segoe UI", Roboto, Helvetica, Arial, "Apple SD Gothic Neo",
               "Pretendard", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

/* HTMX 스왑 중 부드러운 페이드 */
#tab-content.htmx-swapping { opacity: 0; transition: opacity .12s ease-out; }
#tab-content { transition: opacity .2s ease-in; }

/* htmx-indicator 기본 숨김 */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: .6; }

/* ── 버튼 (pill) ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: 9999px; border: 1px solid transparent;
  font-size: .875rem; font-weight: 500; line-height: 1;
  padding: .6rem 1.15rem; cursor: pointer;
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .12s ease, color .18s ease;
  white-space: nowrap;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* primary: 블랙 배경 + 화이트 텍스트 */
.btn-primary { background: var(--text); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: #000; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* secondary: 보더만 */
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: #f5f5f7; }

/* subtle: 배경 없는 텍스트 버튼 */
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: rgba(0,0,0,.04); color: var(--text); }

.btn-sm { padding: .4rem .85rem; font-size: .8125rem; }

/* ── 카드 ─────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

/* 사진 카드 — 호버 시 살짝 떠오름 */
.photo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.photo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ── 입력 필드 ─────────────────────────────────────── */
.field {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-field);
  padding: .65rem .9rem;
  font-size: .9rem; color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: var(--text-3); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,.15); }

/* select: 커스텀 chevron */
.select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center;
  padding-right: 1.8rem;
}
.select-sm {
  font-size: .8125rem; padding: .3rem 1.5rem .3rem .55rem;
  background-position: right .4rem center;
}

/* ── 탭 네비게이션 (미니멀, 활성 = 얇은 하단 보더) ──── */
.tab-link {
  position: relative; white-space: nowrap; background: none; cursor: pointer;
  padding: 1.05rem .9rem; font-size: .875rem; font-weight: 500;
  color: var(--text-3); border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s ease, border-color .15s ease;
}
.tab-link:hover { color: var(--text); }
.tab-active { color: var(--text); border-bottom-color: var(--text); }

/* ── 보조 요소 ─────────────────────────────────────── */
/* subtle 정보 노트 */
.note {
  background: #f5f5f7; border: 1px solid var(--border);
  border-radius: var(--radius-field); padding: .7rem 1rem;
  font-size: .875rem; color: var(--text);
}

/* 작은 태그 칩 */
.chip {
  display: inline-flex; align-items: center;
  border-radius: 9999px; padding: .15rem .6rem;
  font-size: .6875rem; font-weight: 500;
  background: #f5f5f7; color: var(--text-2);
}

/* 상태 점 */
.dot { width: .5rem; height: .5rem; border-radius: 9999px; display: inline-block; }
.dot-on  { background: #34c759; }   /* 애플 그린 */
.dot-warn{ background: #ff9f0a; }   /* 애플 오렌지 */
.dot-off { background: #d2d2d7; }   /* 그레이 */

/* 빈 상태 박스 */
.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-card);
  background: var(--surface); padding: 3.5rem 1.5rem; text-align: center;
  color: var(--text-3); font-size: .9rem;
}

/* 스크롤바 — 은은하게 */
* { scrollbar-width: thin; scrollbar-color: #d2d2d7 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #d2d2d7; border-radius: 9999px; }
*::-webkit-scrollbar-thumb:hover { background: #b8b8bd; }

/* 포커스 접근성 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 세션 상세 슬라이드아웃 드로어 */
#session-drawer .drawer-backdrop { opacity: 0; transition: opacity .25s ease; }
#session-drawer.open .drawer-backdrop { opacity: 1; }
#session-drawer .drawer-panel { transform: translateX(100%); transition: transform .25s ease; }
#session-drawer.open .drawer-panel { transform: translateX(0); }