/* ============================================================
   무채색(그레이스케일) 통일 테마 — 모든 페이지 공통
   각 페이지 <style> 뒤에 로드해서 '공통 겉모습'을 통일한다.
   (기능·레이아웃 구조는 그대로, 색·여백·버튼·카드 느낌만 통일)
   ============================================================ */
:root{
  --bg:#f2f2f4;          /* 페이지 배경 */
  --card:#ffffff;        /* 카드/패널 */
  --soft:#f6f6f8;        /* 옅은 면 */
  --line:#e6e6ea;        /* 옅은 경계 */
  --line2:#d5d5db;       /* 진한 경계 */
  --ink:#18181b;         /* 본문 글자 */
  --ink2:#57575f;        /* 보조 글자 */
  --ink3:#9a9aa4;        /* 흐린 글자 */
  --dark:#1d1d20;        /* 강조(검정 버튼) */
  --dark2:#000000;
  --r:14px;              /* 카드 라운드 */
  --rb:10px;             /* 버튼/입력 라운드 */
}

*{ -webkit-tap-highlight-color:transparent; }

body{
  background:var(--bg) !important;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","맑은 고딕","Malgun Gothic","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1{ font-weight:800; letter-spacing:-.02em; color:var(--ink); }
h2,h3{ font-weight:700; letter-spacing:-.01em; color:var(--ink); }
p{ color:var(--ink2); }
a{ color:var(--ink); }

/* ── 컨테이너 카드 ─────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 1px 2px rgba(24,24,27,.04), 0 10px 30px rgba(24,24,27,.04);
}

/* ── 상단/하단 네비 (탭) ───────────────────── */
.topnav{ gap:8px; }
.topnav button{
  background:var(--card); color:var(--ink2);
  border:1px solid var(--line); border-radius:var(--rb);
  font-weight:600; box-shadow:none; transition:all .12s ease;
}
.topnav button:hover{ border-color:var(--line2); color:var(--ink); opacity:1; }
.topnav button.navActive{ background:var(--dark); color:#fff; border-color:var(--dark); }
.subnav button{
  background:transparent; color:var(--ink3);
  border:1px solid var(--line); border-radius:8px;
}
.subnav button:hover{ color:var(--ink); border-color:var(--line2); opacity:1; }
.subnav button.navActive{ background:var(--dark); color:#fff; border-color:var(--dark); }

/* ── 기본 버튼 (인라인 색 지정 안 된 것) ────── */
button{ border-radius:var(--rb); font-weight:700; transition:opacity .12s ease, filter .12s ease; }
button:hover{ opacity:.92; }

/* ── 입력 요소 ─────────────────────────────── */
input,textarea,select{
  border:1px solid var(--line2); border-radius:var(--rb);
  background:#fff; color:var(--ink); font-family:inherit;
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--dark);
  box-shadow:0 0 0 3px rgba(24,24,27,.07);
}
::placeholder{ color:var(--ink3); }

/* ── 스크롤바 (은은하게) ───────────────────── */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#d3d3d9; border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:#bcbcc4; }