/* ============================================================================
   Next Level Cycle Club — 컴포넌트 레이어
   ----------------------------------------------------------------------------
   SALITA 디자인 시스템(theme_guide.md)을 따른다.

   ▸ 색·간격·형태는 전부 themes/*.css 의 토큰만 사용한다. 하드코딩 금지.
     (이 파일에서 유일하게 허용되는 리터럴은 `transparent` / `currentColor` /
      토큰을 감싸는 color-mix() 뿐이다.)
   ▸ --deco-* 는 장식 '면' 전용 — 텍스트·아이콘·테두리 강조·차트 마크에 쓰지 않는다.
   ▸ 상태는 색만으로 전달하지 않는다(아이콘 + 레이블 동반).
   ▸ Bootstrap 5 를 토큰 위로 매핑한다. Bootstrap 변수(--bs-*)를 덮어써서
     유틸리티(bg-*, text-*, border 등)까지 한 번에 테마를 따르게 한다.
   ============================================================================ */

/* ── 0. Bootstrap 브리지 — 프레임워크 변수를 토큰으로 치환 ──────────────── */
:root{
  --bs-body-bg: var(--canvas);
  --bs-body-color: var(--ink-1);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: var(--lh-body);
  --bs-emphasis-color: var(--ink-1);
  --bs-secondary-color: var(--ink-2);
  --bs-tertiary-color: var(--ink-3);
  --bs-border-color: var(--rule);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-pill: var(--r-pill);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-press);
  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);
  --bs-success: var(--st-good);
  --bs-warning: var(--st-warn);
  --bs-danger: var(--st-crit);
  --bs-info: var(--ink-2);
  --bs-light: var(--surface-tint);
  --bs-dark: var(--surface-invert);
  --bs-heading-color: var(--ink-1);
}

/* ── 1. 베이스 ──────────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink-1);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:var(--primary-wash);
  overflow-x:hidden;
  min-height:100vh;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-weight:600;
  letter-spacing:var(--tracking-display);
  line-height:var(--lh-snug);
  color:var(--ink-1);
}
/* 스포츠 디스플레이 — 큰 제목일수록 무게를 올려 임팩트를 준다(본문 최대 굵기는 600 유지) */
h1,.h1,h2,.h2,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{ font-weight:700; }
/* 스타일가이드 §04 타이포 스펙: H1 34/1.08(-.035em) · H2 26/1.15(-.03em) · H3 20/1.3(-.02em) */
h1,.h1{ font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.035em; }
h2,.h2{ font-size:var(--fs-h2); line-height:1.15; letter-spacing:-.03em; }
h3,.h3{ font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.02em; }
h4,.h4{ font-size:var(--fs-body-l); line-height:1.35; letter-spacing:-.02em; }
h5,.h5{ font-size:var(--fs-body); line-height:1.45; letter-spacing:-.008em; }
h6,.h6{ font-size:var(--fs-sm); line-height:1.5; letter-spacing:0; }

/* 강조 구절 전용 세리프 — 헤드라인 안의 한 구절·인용까지만(본문 금지) */
.acc,em.acc{
  font-family:var(--font-accent); font-style:italic; font-weight:400;
  color:var(--primary); letter-spacing:-.01em;
}

/* 한글 줄바꿈은 어절 단위로 */
h1,h2,h3,h4,h5,h6,p,li,td,th,dt,dd,blockquote,label,figcaption,summary,
.card-body,.alert,.badge,.btn,.side-link,.form-text{
  word-break:keep-all; overflow-wrap:break-word;
}

/* 그리드/플렉스 아이템이 컨테이너를 밀어내지 않게 */
.row > *,.col,[class^="col-"],[class*=" col-"],
.d-flex > *,.card,.list-group-item{ min-width:0; }

/* 수치·오버라인은 모노 */
.metric,.num,.mono,.over,.table td .metric{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:.95em;              /* 모노 글리프가 커 보이는 만큼 미세 보정 */
  letter-spacing:-.01em;
}
.over{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:var(--tracking-over); text-transform:uppercase; color:var(--ink-3);
}

.text-muted{ color:var(--ink-2)!important; }
.small,small{ font-size:var(--fs-sm); }
hr{ border-color:var(--rule); opacity:1; }

/* 나머지 원시 태그도 토큰을 따르게 — 서드파티·에디터 출력 대비 */
p,li,dd,dt,figcaption{ color:inherit; }
strong,b{ font-weight:600; color:var(--ink-1); }
em,i{ font-style:italic; }
blockquote{
  margin:var(--s-4) 0; padding:var(--s-2) 0 var(--s-2) var(--s-4);
  border-left:2px solid var(--primary); color:var(--ink-2);
}
code,kbd,samp{
  font-family:var(--font-mono); font-size:.85em; color:var(--ink-1);
  background:var(--surface-tint); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:1px var(--s-1);
}
pre{
  font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--ink-1);
  background:var(--surface-tint); border:1px solid var(--rule);
  border-radius:var(--r-md); padding:var(--s-4); overflow:auto;
}
pre code{ background:transparent; border:0; padding:0; }
mark{ background:var(--primary-wash); color:var(--ink-1); border-radius:var(--r-sm); padding:0 var(--s-1); }
abbr[title]{ text-decoration-color:var(--rule-strong); }
details{
  border:1px solid var(--rule); border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4); background:var(--surface);
}
summary{ cursor:pointer; font-weight:600; color:var(--ink-1); }
progress{ accent-color:var(--primary); }
dl dt{ font-weight:600; color:var(--ink-1); }
dl dd{ color:var(--ink-2); margin-left:0; }
caption{ color:var(--ink-3); font-size:var(--fs-sm); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--canvas-sunk); }
::-webkit-scrollbar-thumb{ background:var(--rule-strong); border-radius:var(--r-pill); border:2px solid var(--canvas-sunk); }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-3); }

/* Bootstrap 타이포 유틸을 스케일·굵기 규칙 안으로 —
   시스템은 600 을 최대 굵기로 쓰고, fs-* 는 6단계 스케일에 스냅한다. */
.fw-bold,.fw-bolder,.fw-semibold{ font-weight:600!important; }
.fs-1{ font-size:var(--fs-h1)!important; }
.fs-2{ font-size:var(--fs-h2)!important; }
.fs-3{ font-size:var(--fs-h3)!important; }
.fs-4{ font-size:var(--fs-body-l)!important; }
.fs-5{ font-size:var(--fs-body)!important; }
.fs-6{ font-size:var(--fs-sm)!important; }
.lead{ font-size:var(--fs-body-l); line-height:var(--lh-body); color:var(--ink-2); }
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6{
  font-size:var(--fs-display-l); font-weight:600; letter-spacing:var(--tracking-display);
  line-height:var(--lh-tight);
}
/* 모서리 유틸도 토큰 반경으로 */
.rounded{ border-radius:var(--r-md)!important; }
.rounded-1,.rounded-2{ border-radius:var(--r-sm)!important; }
.rounded-3,.rounded-4,.rounded-5{ border-radius:var(--r-lg)!important; }
.rounded-pill{ border-radius:var(--r-pill)!important; }

/* 포커스 — 이중 링 */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--canvas), 0 0 0 4px var(--focus);
  border-radius:var(--r-sm);
}

/* 모션 최소화 요청 존중 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:0ms!important; animation-duration:0ms!important;
    animation-iteration-count:1!important; scroll-behavior:auto!important;
  }
}

/* 본문 컨테이너 */
.container{ max-width:var(--container); padding-left:var(--gutter); padding-right:var(--gutter); }
@media (min-width:1000px){ .container{ padding-left:var(--s-7); padding-right:var(--s-7); } }
@media (min-width:1600px){ .container{ max-width:var(--container); } }
/* 에디토리얼 텍스트는 최대 64ch */
.prose{ max-width:64ch; }

/* 넓은 화면 페이지(달력처럼 가로로 7칸을 모두 펼쳐야 하는 화면) —
   컨테이너 상한을 풀고 화면 우측 끝까지 사용한다. body 에 .page-wide 를 준다. */
body.page-wide main.container{ max-width:none; }

/* 페이지 머리말 — 제목과 우측 액션을 한 줄로, 아래 여백을 항상 동일하게 */
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  flex-wrap:wrap; margin-bottom:var(--s-4); }
.page-head h1,.page-head .h1{ margin:0; }

/* ── 2. 링크 ────────────────────────────────────────────────────────────── */
a{
  color:var(--primary); text-decoration:none;
  text-underline-offset:3px; text-decoration-thickness:1.5px;
  transition:color var(--dur-1) var(--ease);
}
a:hover{ color:var(--primary-press); text-decoration:underline; }
.btn:hover,.nav-link:hover,.page-link:hover,.dropdown-item:hover,.side-link:hover,
.navbar-brand:hover,.cat-head:hover,.guide-card:hover,.term-head:hover,
.nav-tabs .nav-link:hover,.nav-pills .nav-link:hover,.list-group-item-action:hover{
  text-decoration:none;
}

/* ── 3. 모바일/하이브리드 앱 대응 ───────────────────────────────────────── */
html,body{ overscroll-behavior-y:none; }
button,.btn,a.btn,[role="button"],.nav-link,.page-link,.side-link,summary{ touch-action:manipulation; }
.navbar{ padding-top:max(var(--s-2), env(safe-area-inset-top)); }
footer.site-footer{ padding-bottom:max(var(--s-4), env(safe-area-inset-bottom)); }
#toastStack{ top:calc(4.75rem + env(safe-area-inset-top))!important; }
.modal-dialog{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
img,table,.table-responsive,svg,canvas,video,iframe{ max-width:100%; }
canvas{ max-width:100%!important; }

/* ── 4. 내비게이션 바 ───────────────────────────────────────────────────── */
.navbar{
  background:color-mix(in srgb, var(--canvas) 82%, transparent)!important;
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:1040;
}
.navbar .navbar-brand,.navbar .navbar-brand span{ color:var(--ink-1)!important; }
.navbar-brand{ letter-spacing:.14em; font-weight:600; text-transform:uppercase; }
.navbar .brand-mark{ font-size:18px; font-weight:600; letter-spacing:.14em; }
.navbar .brand-cog{
  display:inline-block; width:16px; height:16px; border-radius:50%;
  margin-right:10px; vertical-align:-2px;
  background:conic-gradient(from 210deg, var(--primary), var(--deco-1), var(--primary));
}
.navbar .brand-sub{ font-size:var(--fs-xs); font-weight:500; color:var(--ink-3); }
.navbar .navbar-toggler{ border-color:var(--rule-strong); color:var(--ink-1); }
.navbar .navbar-toggler-icon{
  background-image:none; position:relative; width:1.2em; height:1.2em;
}
.navbar .navbar-toggler-icon::before{
  content:""; position:absolute; inset:20% 0;
  border-top:2px solid currentColor; border-bottom:2px solid currentColor;
}
.navbar .navbar-toggler-icon::after{
  content:""; position:absolute; left:0; right:0; top:50%; margin-top:-1px;
  border-top:2px solid currentColor;
}
/* 탑메뉴 — AWS 콘솔형: 잉크 텍스트 · 호버=짧은 밑줄 · 선택=박스 아웃라인 */
.navbar .nav-link{
  color:var(--ink-1)!important; border-radius:var(--r-sm);
  padding:var(--s-2) var(--s-3)!important; font-weight:500; font-size:14px;
  position:relative; border:1px solid transparent; background:transparent;
  transition:color var(--dur-1) var(--ease);
  white-space:nowrap;              /* 메뉴명이 두 줄로 접히지 않게 */
}
/* 호버 — 텍스트 폭만큼의 밑줄이 살짝 떠오른다(AWS 스타일) */
.navbar .nav-link::after{
  content:""; position:absolute; left:var(--s-2); right:var(--s-2); bottom:3px;
  height:2px; border-radius:var(--r-pill); background:var(--ink-1);
  opacity:0; transform:translateY(2px);
  transition:opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.navbar .nav-link:hover{ color:var(--ink-1)!important; }
.navbar .nav-link:hover::after{ opacity:1; transform:translateY(0); }
/* 선택된(현재) 메뉴 — 메뉴명 아래 틸 언더라인, 살짝 하트비트(두 번 콩콩) 펄스 */
.navbar .nav-link.active{
  color:var(--ink-1)!important; font-weight:600;
  background:transparent; border-color:transparent; box-shadow:none;
}
.navbar .nav-link.active::after{
  opacity:1; transform:none; height:2.5px;
  background:var(--primary); transform-origin:center;
  animation:navHeartbeat 2.2s var(--ease) infinite;
}
@keyframes navHeartbeat{
  0%, 42%, 100%{ transform:scaleX(1); opacity:1; }
  10%{ transform:scaleX(1.22); opacity:.85; }
  20%{ transform:scaleX(.94); }
  30%{ transform:scaleX(1.12); opacity:.9; }
}
/* 브랜드와 메뉴 사이 세로 구분선(AWS 스타일) */
.navbar .nav-divider{
  width:1px; height:22px; background:var(--rule-strong);
  margin:0 var(--s-3); align-self:center;
}
/* 상단 메뉴 폭 조정 — 항목 사이가 뚜렷이 구분되도록 간격을 확보하고,
   폭이 모자라면 여백보다 글자 크기를 먼저 한 단계 줄여 한 줄을 유지한다 */
@media (min-width: 992px){
  .navbar-nav{ flex-wrap:nowrap; gap:var(--s-1); }
  .navbar .navbar-nav .nav-link{ padding:var(--s-2) var(--s-3)!important; }
  .navbar-collapse{ min-width:0; }
}
@media (min-width: 992px) and (max-width: 1399.98px){
  /* 중간 폭 — 간격은 유지하고 글자만 살짝 줄여 줄바꿈을 막는다 */
  .navbar .navbar-nav .nav-link{ padding:var(--s-2) var(--s-2)!important; font-size:13px; }
  .navbar .brand-sub{ display:none; }
}
.navbar .dropdown-menu{
  background:var(--surface-raised); border:1px solid var(--rule);
  border-radius:var(--r-md); box-shadow:var(--shadow-2); z-index:1045;
}
.navbar .dropdown-item{ color:var(--ink-1); }
.navbar .dropdown-item:hover,.navbar .dropdown-item:focus{ background:var(--canvas-sunk); color:var(--ink-1); }
.nav-user{ color:var(--ink-1); font-size:14px; }
.nav-logout{
  background:transparent; border:0; cursor:pointer;
  font-family:var(--font-sans);
}
/* 운영진 표시 — 상단 메뉴 이름 앞에 붙는 플래그 */
.admin-flag{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.06em; color:var(--secondary);
  background:var(--secondary-wash); border-radius:var(--r-pill);
  padding:var(--s-1) var(--s-2); white-space:nowrap;
}
.nav-avatar-fallback{
  width:26px; height:26px; border-radius:var(--r-pill); background:var(--deco-3);
  display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-xs);
}
.nav-back-btn{
  color:var(--ink-1)!important; font-size:var(--fs-h2); font-weight:600; line-height:1;
  border:0; background:transparent; padding-top:0; padding-bottom:var(--s-1);
}
.nav-back-btn:active{ opacity:.6; }

/* 테마(라이트/다크) 토글 */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1);
  padding:var(--s-2) var(--s-3); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--rule); cursor:pointer;
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  box-shadow:var(--shadow-1);
  transition:all var(--dur-1) var(--ease);
}
.theme-toggle:hover{ color:var(--primary); border-color:var(--primary); }
.theme-toggle .t-dark{ display:none; }
:root[data-theme="dark"] .theme-toggle .t-dark{ display:inline; }
:root[data-theme="dark"] .theme-toggle .t-light{ display:none; }
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])) .theme-toggle .t-dark{ display:inline; }
  :root:where(:not([data-theme="light"])) .theme-toggle .t-light{ display:none; }
}

/* Bootstrap 그림자 유틸도 토큰 그림자로 */
.shadow-sm{ box-shadow:var(--shadow-1)!important; }
.shadow,.shadow-lg{ box-shadow:var(--shadow-2)!important; }

/* ── 5. 카드 / 패널 ─────────────────────────────────────────────────────── */
.card,.stat-card,.glass{
  background:var(--surface);
  border:1px solid var(--rule)!important;
  border-radius:var(--r-lg)!important;
  box-shadow:var(--shadow-1);
  color:var(--ink-1);
  min-width:0;
}
.card-body{ color:var(--ink-1); padding:var(--s-5); }
.card-header,.card-footer{ background:var(--surface-tint); border-color:var(--rule); color:var(--ink-1); }
.stat-card > .card-body{ padding:var(--s-5) var(--s-4); }

/* 스탯 타일을 가이드 .stat 구조로 강제 정렬 —
   사이트 마크업은 [값, 라벨] 순서·가운데 정렬이지만, 가이드는
   라벨(위·12px·ink-3) → 값(왼쪽·30px·산세리프 600) 순서다.
   column-reverse 로 시각 순서를 뒤집고 왼쪽 정렬로 통일한다. */
.stat-card > .card-body.text-center{
  display:flex; flex-direction:column-reverse; justify-content:center;
  align-items:flex-start; text-align:left; gap:3px;
}
.stat-card > .card-body.text-center > .text-muted.small{
  font-size:12px; color:var(--ink-3)!important; line-height:1.4;
}
.stat-card > .card-body > .num,
.stat-card > .card-body .num:not(td):not(th):not(.chart-num){
  /* 스포츠 대시보드 문법 — 수치는 팔 길이에서도 읽히게 크고 진하게 */
  font-family:var(--font-sans); font-variant-numeric:tabular-nums;
  font-size:2.25rem; font-weight:700; letter-spacing:-.045em; line-height:1.1;
}
.stat-card > .card-body > .num small,
.stat-card > .card-body .num small{
  font-size:15px; font-weight:500; color:var(--ink-3); letter-spacing:0;
}
.stat-card .lb,.stat-label{ font-size:12px; color:var(--ink-3); }
.stat-card .card-body .num{ margin-top:3px; }
.stat-card .dl,.stat-delta{ margin-top:4px; }
.stat-card .dl,.stat-delta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.stat-card .dl b,.stat-delta b{ color:var(--st-good); font-weight:500; }

/* 히어로 — 반전 밴드 */
/* 히어로 — 스타일가이드의 cover: 박스 없이 캔버스 위에 파스텔 블롭, 텍스트는 잉크 */
.hero{
  background:transparent; color:var(--ink-1);
  border:0; border-radius:0; box-shadow:none;
  padding:var(--s-8) 0 var(--s-7);
  position:relative; overflow:hidden; isolation:isolate;
}
.hero::before,.hero::after{
  content:""; position:absolute; border-radius:50%; filter:blur(70px);
  opacity:.5; pointer-events:none; z-index:-1;
}
.hero::before{ width:460px; height:460px; background:var(--deco-1); top:-160px; right:-80px; }
.hero::after{ width:340px; height:340px; background:var(--deco-4); top:180px; right:260px; opacity:.42; }
:root[data-theme="dark"] .hero::before,
:root[data-theme="dark"] .hero::after{ opacity:.26; filter:blur(90px); }
.hero h1{ font-size:var(--fs-display-xl); line-height:1.0; letter-spacing:-.035em; }
.hero h1,.hero h2,.hero h3{ color:var(--ink-1); }
.hero .lead,.hero p{ color:var(--ink-2); max-width:54ch; font-size:var(--fs-body-l); line-height:var(--lh-body); }
.hero .over{ margin-bottom:var(--s-4); }
.hero .btn-outline-light{ background:var(--surface); color:var(--ink-1); border-color:var(--rule-strong); }
.hero .btn-outline-light:hover{ border-color:var(--primary); color:var(--primary); background:var(--surface); }

/* ── 6. 버튼 ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--font-sans); font-size:14.5px; font-weight:600;
  letter-spacing:-.01em; padding:13px var(--s-5);
  border-radius:var(--r-pill); border:1px solid transparent; cursor:pointer;
  transition:all var(--dur-1) var(--ease);
  white-space:nowrap; width:auto;
}
.btn-sm{ padding:var(--s-2) var(--s-4); font-size:var(--fs-xs); }
.btn-lg{ padding:var(--s-4) var(--s-6); font-size:var(--fs-body); }
.btn-primary{
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 86%, var(--surface)) 0%, var(--primary) 100%);
  color:var(--surface); border-color:var(--primary);
  box-shadow:var(--shadow-pri, 0 6px 18px -8px rgba(10,96,73,.7));  /* 가이드 스펙 폴백 */
}
.btn-primary:hover,.btn-primary:focus{ background:var(--primary-press); border-color:var(--primary-press); color:var(--surface); transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.985); }
:root[data-theme="dark"] .btn-primary{ color:var(--canvas); }
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])) .btn-primary{ color:var(--canvas); }
}
.btn-outline-primary{ background:transparent; border-color:var(--primary); color:var(--primary); }
.btn-outline-primary:hover{ background:var(--primary); border-color:var(--primary); color:var(--surface); }

/* 보조 버튼 계열 — 전부 동일한 중립 스타일(구 .btn-glass 포함) */
.btn-glass,.btn-secondary,.btn-light,.btn-info,.btn-outline-secondary,.btn-outline-light,.btn-dark{
  background:var(--surface); color:var(--ink-1); border:1px solid var(--rule-strong);
}
.btn-glass:hover,.btn-secondary:hover,.btn-light:hover,.btn-info:hover,
.btn-outline-secondary:hover,.btn-outline-light:hover,.btn-dark:hover{
  border-color:var(--primary); color:var(--primary); background:var(--surface);
}
.hero .btn-outline-light{ background:transparent; color:var(--ink-invert); border-color:var(--ink-invert); }
.hero .btn-outline-light:hover{ background:var(--ink-invert); color:var(--surface-invert); }

/* 상태 버튼 — 파괴적·경고 동작에만 */
.btn-success{ background:var(--st-good); color:var(--surface); border-color:var(--st-good); }
.btn-warning{ background:var(--st-warn); color:var(--surface); border-color:var(--st-warn); }
.btn-danger{ background:var(--st-crit); color:var(--surface); border-color:var(--st-crit); }
.btn-success:hover,.btn-warning:hover,.btn-danger:hover{ filter:brightness(1.06); color:var(--surface); }
.btn-outline-danger{ background:transparent; border-color:var(--st-crit); color:var(--st-crit); }
.btn-outline-danger:hover{ background:var(--st-crit); border-color:var(--st-crit); color:var(--surface); }
.btn-link,.btn-gho{ background:transparent; border:0; padding:0; color:var(--primary); box-shadow:none; }
.btn-link:hover,.btn-gho:hover{ color:var(--primary-press); }

.btn:disabled,.btn.disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn:focus-visible{ box-shadow:0 0 0 2px var(--canvas), 0 0 0 4px var(--focus); }
.input-group > .btn{ flex:0 0 auto; white-space:nowrap; }

/* ── 7. 탭 / 필 ─────────────────────────────────────────────────────────── */
.nav-tabs,.nav-pills{
  --bs-nav-tabs-border-color:transparent;
  display:inline-flex; gap:var(--s-1); padding:var(--s-1);
  background:var(--surface-tint); border:1px solid var(--rule);
  border-radius:var(--r-pill);
}
.nav-tabs .nav-link,.nav-pills .nav-link{
  border:0!important; border-radius:var(--r-pill)!important; color:var(--ink-2);
  font-weight:600; padding:var(--s-2) var(--s-4); background:transparent;
}
.nav-tabs .nav-link:hover,.nav-pills .nav-link:hover{ color:var(--ink-1); background:var(--canvas-sunk); }
.nav-tabs .nav-link.active,.nav-pills .nav-link.active{
  color:var(--surface)!important; background:var(--primary)!important;
}
:root[data-theme="dark"] .nav-tabs .nav-link.active,
:root[data-theme="dark"] .nav-pills .nav-link.active{ color:var(--canvas)!important; }

/* ── 8. 좌측 사이드바(2-pane) ───────────────────────────────────────────── */
.side-nav{
  position:sticky; top:var(--s-4);
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s-2);
}
.side-nav .side-link{
  display:flex; align-items:center; gap:var(--s-2); width:100%;
  padding:var(--s-2) var(--s-3); margin-bottom:2px; border-radius:var(--r-sm);
  color:var(--ink-2); font-weight:600; font-size:var(--fs-xs);
  line-height:1.5; position:relative; background:transparent; border:0;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.side-nav .side-link:hover{ background:var(--surface-tint); color:var(--ink-1); }
.side-nav .side-link.active{ color:var(--primary); background:var(--primary-wash); }
.side-nav .side-link.active::before{ content:none; }
.side-nav .side-link.locked{ opacity:.6; }

/* 좌측 메뉴 열 폭 +10% — 마이페이지·시스템운영·팀·커뮤니티 등 모든 2-pane 화면 공통.
   각 화면이 쓰는 col-md-3(25%) / col-lg-2(16.67%) 기준으로 1.1배, 본문 열은 그만큼 좁힌다.
   (모바일에서는 좌측 메뉴가 접이식 드롭다운이라 적용하지 않는다) */
@media (min-width: 768px){
  .row > [class*="col-"]:has(.side-nav){ flex:0 0 auto; width:30.25%; }
  .row > [class*="col-"]:has(.side-nav) + [class*="col-"]{ flex:0 0 auto; width:69.75%; }
}
@media (min-width: 992px){
  .row > [class*="col-"]:has(.side-nav){ width:20.16%; }
  .row > [class*="col-"]:has(.side-nav) + [class*="col-"]{ width:79.84%; }
}
.side-emoji{ font-size:var(--fs-sm); width:1.2rem; text-align:center; flex-shrink:0; }
/* 좌측 메뉴 안의 그룹 구분(예: 마이페이지 아래에 붙는 관리자 메뉴) */
.side-nav .side-group{
  margin:var(--s-3) 0 var(--s-1); padding:var(--s-2) var(--s-3) 0;
  border-top:1px solid var(--rule);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--tracking-over); text-transform:uppercase; color:var(--ink-3);
}
.snav-toggle{ display:none; }


/* ── 보기 전환 탭(목록/달력) — 카드 상단 언더라인 탭, 시안과 동일 구조 ──── */
.view-tabs{
  display:flex; align-items:center; gap:var(--s-2);
  border-bottom:1px solid var(--rule); margin-bottom:0;
}
.view-tab{
  display:inline-flex; align-items:center; gap:var(--s-1);
  padding:var(--s-3) var(--s-4); margin-bottom:-1px;
  font-size:var(--fs-sm); font-weight:500; letter-spacing:var(--tracking-over);
  text-transform:uppercase; color:var(--ink-3);
  background:transparent; border:0; border-bottom:2px solid transparent;
  cursor:pointer; transition:color var(--dur-1) var(--ease);
}
.view-tab:hover{ color:var(--primary); text-decoration:none; }
.view-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }
.view-tabs .view-tabs-side{ margin-left:auto; display:flex; gap:var(--s-2); align-items:center; }

/* ── 9. 표 ──────────────────────────────────────────────────────────────── */
.table{ --bs-table-bg:transparent; color:var(--ink-1); border-color:var(--rule); }
.table-activities td,.table>:not(caption)>*>*{ vertical-align:middle; background:transparent; }
.table thead th{
  color:var(--ink-3); background:transparent;
  border-bottom:1px solid var(--rule-strong); font-weight:400;
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase;
  padding-top:9px; padding-bottom:9px;
}
.table tbody td{ color:var(--ink-2); font-size:13px; font-weight:400; }
.table tbody td:first-child{ color:var(--ink-1); font-weight:500; }
.table .num,.table .metric{ text-align:right; }
.table tbody tr:last-child > *{ border-bottom:0; }
.table>:not(caption)>*>*{ border-color:var(--rule); padding:var(--s-3); }
.table:not(.table-bordered) thead th{ padding:9px var(--s-3) 9px 0; }
.table:not(.table-bordered) tbody td,
.table:not(.table-bordered) tbody th{ padding:var(--s-3) var(--s-3) var(--s-3) 0; }
.table-hover tbody tr:hover>*{ background:var(--canvas-sunk); }
.table > thead.table-light,.table .table-light{
  --bs-table-bg:transparent; background:var(--surface-tint)!important; color:var(--ink-3);
}

/* ── 10. 폼 — 정밀 보더 + 뚜렷한 상태 전환(hover→focus)로 시인성 강화 ────── */
.form-control,.form-select{
  border-radius:var(--r-md); border:1px solid var(--rule-strong);
  background:var(--surface); color:var(--ink-1);
  font-size:14px; padding:12px 14px;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
             background var(--dur-1) var(--ease);
}
.form-control::placeholder{ color:var(--ink-3); }
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled){ border-color:var(--ink-3); }
.form-control:focus,.form-select:focus{
  border-color:var(--primary); background:var(--surface); color:var(--ink-1);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.form-control:disabled,.form-select:disabled{ background:var(--canvas-sunk); color:var(--ink-3); }
textarea.form-control{ border-radius:var(--r-md); }
/* 라벨은 오버라인 스타일 — 값(입력)이 주인공, 라벨은 조용한 안내선 */
.form-label{
  font-weight:600; font-size:11.5px; color:var(--ink-2); margin-bottom:6px;
  letter-spacing:.05em; text-transform:uppercase;
}
.form-text{ color:var(--ink-3); font-size:11.5px; margin-top:7px; }
/* Bootstrap 클래스가 없는 원시 폼 요소까지 테마를 적용한다 —
   서드파티 위젯·Django 기본 렌더링에도 동일한 톤이 걸리게. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select, textarea{
  font-family:var(--font-sans); font-size:14px; color:var(--ink-1);
  background:var(--surface); border:1px solid var(--rule-strong);
  border-radius:var(--r-md); padding:12px 14px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled){ border-color:var(--ink-3); }
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
input::placeholder, textarea::placeholder{ color:var(--ink-3); opacity:1; }
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly]{ background:var(--canvas-sunk); color:var(--ink-3); }
textarea{ line-height:var(--lh-body); min-height:calc(var(--s-8) + var(--s-2)); }
/* 셀렉트 셰브론 — currentColor 사각형 2개를 45° 회전해 또렷한 V 화살표로 */
select{
  appearance:none; -webkit-appearance:none; padding-right:var(--s-7);
  background-image:linear-gradient(45deg, transparent 49.5%, currentColor 49.5%),
                   linear-gradient(135deg, currentColor 50.5%, transparent 50.5%);
  background-position:calc(100% - 21px) 50%, calc(100% - 14px) 50%;
  background-size:7px 7px, 7px 7px; background-repeat:no-repeat;
}
select:focus{
  background-image:linear-gradient(225deg, transparent 49.5%, currentColor 49.5%),
                   linear-gradient(315deg, currentColor 50.5%, transparent 50.5%);
}
input[type="file"]{
  font-size:var(--fs-sm); color:var(--ink-2);
  background:var(--surface); border:1px solid var(--rule-strong);
  border-radius:var(--r-md); padding:var(--s-2) var(--s-3);
}
input[type="file"]::file-selector-button{
  font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600;
  color:var(--ink-1); background:var(--surface-tint);
  border:1px solid var(--rule-strong); border-radius:var(--r-pill);
  padding:var(--s-1) var(--s-3); margin-right:var(--s-3); cursor:pointer;
}
input[type="file"]::file-selector-button:hover{ border-color:var(--primary); color:var(--primary); }
input[type="range"]{ accent-color:var(--primary); }
input[type="checkbox"],input[type="radio"]{ accent-color:var(--primary); }
input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"]{ color-scheme:light; }
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="time"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] input[type="month"]{ color-scheme:dark; }
fieldset{ border:1px solid var(--rule); border-radius:var(--r-md); padding:var(--s-4); }
legend{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); padding:0 var(--s-2); width:auto; }
::selection{ background:var(--primary-wash); color:var(--ink-1); }

/* 숫자 입력이 좁아 값이 잘리지 않게 — 스피너 자리까지 감안한 최소 폭 */
input[type="number"]{ min-width:8ch; }
.form-control-sm,input.form-control-sm{ padding:var(--s-2) var(--s-3); font-size:var(--fs-sm); }

/* "오늘" 위치 강조 — 이동 직후 잠깐 테두리로 알린다 */
.today-flash{
  box-shadow:0 0 0 3px var(--primary-wash), 0 0 0 4px var(--primary)!important;
  border-radius:var(--r-sm);
  transition:box-shadow var(--dur-2) var(--ease);
}

/* 라디오·체크박스 — 크게, 두꺼운 보더, 체크 시 브랜드 발광 링 */
.form-check-input{
  width:1.25em; height:1.25em; margin-top:.15em;
  border:2px solid var(--rule-strong); background-color:var(--surface);
  cursor:pointer;
  transition:border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease),
             box-shadow var(--dur-1) var(--ease);
}
.form-check-input:hover:not(:checked):not(:disabled){
  border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}
.form-check-input[type="radio"]:checked{ background-color:var(--primary); border-color:var(--primary); }
.form-check-label{ color:var(--ink-1); font-size:var(--fs-sm); cursor:pointer; }
.form-switch .form-check-input{ background-color:var(--canvas-sunk); border-color:var(--rule-strong); }
.form-switch .form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); }
.form-range{ accent-color:var(--primary); }
.form-check-input:checked{
  background-color:var(--primary); border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.form-check-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
/* 체크 항목의 라벨은 살짝 진하게 — 선택 상태가 한눈에 */
.form-check-input:checked + .form-check-label{ color:var(--ink-1); font-weight:600; }
.input-group > .form-control:first-child,.input-group > .form-select:first-child{
  border-top-left-radius:var(--r-md); border-bottom-left-radius:var(--r-md);
}
.input-group > .btn:last-child{ border-top-right-radius:var(--r-pill); border-bottom-right-radius:var(--r-pill); }
/* 비밀번호 스택(위아래 붙임) */
.pw-stack .form-control{ border-radius:0; }
.pw-stack .form-control:first-child{ border-top-left-radius:var(--r-md); border-top-right-radius:var(--r-md); }
.pw-stack .form-control:last-child{ border-bottom-left-radius:var(--r-md); border-bottom-right-radius:var(--r-md); margin-top:-1px; }
.pw-stack .form-control:focus{ position:relative; z-index:2; }

/* ── 11. 배지 / 알림 ────────────────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  border-radius:var(--r-pill); font-weight:600; font-size:11.5px;
  padding:5px 12px; letter-spacing:-.01em;
  background:var(--primary-wash); color:var(--primary);
}
.badge.bg-primary{ background:var(--primary)!important; color:var(--surface)!important; }
.badge.bg-secondary{ background:var(--canvas-sunk)!important; color:var(--ink-2)!important; }
.badge.bg-light{ background:var(--surface-tint)!important; color:var(--ink-2)!important; }
.badge.bg-dark{ background:var(--surface-invert)!important; color:var(--ink-invert)!important; }
.badge.bg-info{ background:var(--surface-tint)!important; color:var(--ink-2)!important; }
.badge.bg-success{ background:var(--st-good-wash)!important; color:var(--st-good)!important; }
.badge.bg-warning{ background:var(--st-warn-wash)!important; color:var(--st-warn)!important; }
.badge.bg-danger{ background:var(--st-crit-wash)!important; color:var(--st-crit)!important; }
.text-bg-primary{ background:var(--primary)!important; color:var(--surface)!important; }

.bg-primary{ background-color:var(--primary)!important; }
.bg-secondary{ background-color:var(--surface-tint)!important; }
.bg-light{ background-color:var(--surface-tint)!important; }
.bg-dark{ background-color:var(--surface-invert)!important; }
.bg-body,.bg-white{ background-color:var(--surface)!important; }
.text-primary{ color:var(--primary)!important; }
.text-secondary{ color:var(--ink-2)!important; }
.text-info{ color:var(--ink-2)!important; }
.text-success{ color:var(--st-good)!important; }
.text-warning{ color:var(--st-warn)!important; }
.text-danger{ color:var(--st-crit)!important; }
.text-dark{ color:var(--ink-1)!important; }
.text-white{ color:var(--surface)!important; }
.border{ border-color:var(--rule)!important; }

.alert{
  border-radius:var(--r-md); border:1px solid var(--rule);
  background:var(--surface-tint); color:var(--ink-1); padding:var(--s-3) var(--s-4);
}
.alert-success{ background:var(--st-good-wash); border-color:var(--st-good); color:var(--ink-1); }
.alert-warning{ background:var(--st-warn-wash); border-color:var(--st-warn); color:var(--ink-1); }
.alert-danger{ background:var(--st-crit-wash); border-color:var(--st-crit); color:var(--ink-1); }
.alert-info,.alert-primary{ background:var(--primary-wash); border-color:var(--primary); color:var(--ink-1); }
.alert-secondary,.alert-light{ background:var(--surface-tint); border-color:var(--rule); color:var(--ink-1); }

/* ── 12. 토스트 ─────────────────────────────────────────────────────────── */
#toastStack{
  position:fixed!important; top:4.75rem; left:50%; transform:translateX(-50%); z-index:2000;
  display:flex; flex-direction:column; gap:var(--s-2); max-width:92vw; pointer-events:none;
}
#toastStack .app-toast{
  pointer-events:auto; display:flex; align-items:center; gap:var(--s-2);
  min-width:240px; max-width:540px; padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md); font-weight:600;
  background:var(--surface-raised); color:var(--ink-1);
  border:1px solid var(--rule); border-left:3px solid var(--ink-3);
  box-shadow:var(--shadow-2); animation:toastIn var(--dur-2) var(--ease);
}
#toastStack .app-toast-success{ border-left-color:var(--st-good); background:var(--st-good-wash); }
#toastStack .app-toast-error{ border-left-color:var(--st-crit); background:var(--st-crit-wash); }
#toastStack .app-toast-warning{ border-left-color:var(--st-warn); background:var(--st-warn-wash); }
#toastStack .app-toast-info,#toastStack .app-toast-debug{ border-left-color:var(--primary); background:var(--primary-wash); }
#toastStack .app-toast-close{
  margin-left:auto; background:none; border:0; color:var(--ink-2);
  font-size:var(--fs-body-l); line-height:1; cursor:pointer;
}
#toastStack .app-toast.hide{ animation:toastOut var(--dur-2) var(--ease) forwards; }
@keyframes toastIn{ from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut{ from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-14px)} }

/* ── 13. 아코디언 / 모달 / 페이지네이션 / 리스트 ────────────────────────── */
.accordion{ --bs-accordion-bg:transparent; }
.accordion-item{
  background:var(--surface); border:1px solid var(--rule)!important;
  margin-bottom:var(--s-2); border-radius:var(--r-md)!important; overflow:hidden;
}
/* 아코디언 제목은 h2 래퍼(마크업 관례) 안의 버튼 — 헤딩 스케일을 상속받지 않도록
   본문 타이포로 명시 고정한다(부트스트랩 원본도 1rem 명시). FAQ·고객센터·가이드 공통. */
.accordion-header{ margin:0; }
.accordion-button{
  background:transparent; color:var(--ink-1);
  font-family:var(--font-sans); font-size:var(--fs-body); font-weight:600;
  letter-spacing:-.01em; line-height:1.5;
  padding:var(--s-3) var(--s-4); box-shadow:none!important;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.accordion-button:hover{ background:var(--surface-tint); }
.accordion-button:not(.collapsed){ color:var(--primary); background:var(--primary-wash); }
.accordion-button::after{ filter:none; }
.accordion-body{ background:transparent; color:var(--ink-1); font-size:var(--fs-sm); line-height:var(--lh-body); }

.modal-content{
  background:var(--surface-raised); color:var(--ink-1);
  border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  overflow:hidden;
}
.modal-header{
  background:var(--surface-tint); border-bottom:1px solid var(--rule);
  padding:var(--s-4) var(--s-5);
}
.modal-title{ font-weight:600; letter-spacing:-.02em; }
.modal-body{ padding:var(--s-5); }
.modal-footer{ background:var(--surface-tint); border-top:1px solid var(--rule); }
/* 열림 모션 — 아래에서 살짝 떠오르며 안착(스프링 이징) */
.modal.fade .modal-dialog{
  transform:translateY(18px) scale(.985);
  transition:transform var(--dur-2) var(--ease);
}
.modal.show .modal-dialog{ transform:none; }
.btn-close{ transition:opacity var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.btn-close:hover{ background-color:var(--canvas-sunk); }
/* 백드롭 — 어둡게 + 블러로 모달에 시선 집중 */
.modal-backdrop{
  background-color:var(--surface-invert);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.modal-backdrop.show{ opacity:.55; }
/* 모바일 — 바텀 시트: 아래에서 올라와 하단에 붙는다(2026 모바일 표준 패턴) */
@media (max-width:575.98px){
  .modal-dialog:not(.modal-site){
    display:flex; align-items:flex-end;
    margin:0; max-width:none; height:100%;
    padding-top:max(var(--s-6), env(safe-area-inset-top)); padding-bottom:0;
  }
  .modal-dialog:not(.modal-site) .modal-content{
    border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:0;
    max-height:100%; width:100%;
  }
  .modal-dialog:not(.modal-site) .modal-content::before{
    content:""; flex:0 0 auto; width:44px; height:4px; margin:8px auto 0;
    border-radius:var(--r-pill); background:var(--rule-strong);
  }
  .modal-dialog:not(.modal-site) .modal-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal.fade .modal-dialog:not(.modal-site){ transform:translateY(48px); }
  .modal.show .modal-dialog:not(.modal-site){ transform:none; }
}
/* 사이트 콘텐츠 영역(좌측 메뉴 포함 컨테이너) 폭에 맞춘 모달 — 달력·주간 캘린더용.
   화면 전체가 아니라 본문과 같은 폭으로 열려 레이아웃 감각이 유지된다. */
.modal-dialog.modal-site{
  max-width:min(calc(100vw - (var(--gutter) * 2)), var(--container));
  margin-left:auto; margin-right:auto;
}
@media (min-width:1000px){
  .modal-dialog.modal-site{ max-width:min(calc(100vw - (var(--s-7) * 2)), var(--container)); }
}
.modal-site .modal-content{ max-height:calc(100vh - (var(--s-6) * 2)); }
.modal-site .modal-body{ overflow:auto; padding:var(--s-4); }
.modal-site .cal-table,.modal-site .plan-table-wrap table{ width:100%; }
.modal-site .plan-table-wrap{ max-height:none; }
.modal-backdrop{ background-color:var(--surface-invert); }

.pagination{ gap:var(--s-1); }
.pagination .page-link{
  border-radius:var(--r-sm)!important; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink-1); font-weight:600;
  min-width:2.2rem; text-align:center;
}
.pagination .page-link:hover{ background:var(--canvas-sunk); color:var(--primary); }
.pagination .page-item.active .page-link{
  background:var(--primary); border-color:var(--primary); color:var(--surface);
}
.pagination .page-item.disabled .page-link{ background:transparent; color:var(--ink-3); opacity:.55; }

.list-group{ --bs-list-group-bg:transparent; border-radius:var(--r-md); }
.list-group-item{
  background:transparent; border-color:var(--rule); color:var(--ink-1);
  padding:var(--s-3) var(--s-4);
  transition:background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
/* 클릭 가능한 행 — 호버 시 좌측 브랜드 인디케이터 + 옅은 배경으로 '눌린다'는 신호 */
.list-group-item-action:hover,.list-group-item-action:focus,
.list-group-item[role="button"]:hover{
  background:color-mix(in srgb, var(--primary-wash) 55%, transparent); color:var(--ink-1);
  box-shadow:inset 3px 0 0 var(--primary);
}
/* 도메인 색 보더(워크아웃 유형 등)가 이미 있는 행은 배경 틴트만 */
.list-group-item.wk-mrow:hover{ box-shadow:none; }

.progress{ background:var(--canvas-sunk); border-radius:var(--r-pill); }
.progress-bar{ background:var(--primary); }

.dropdown-menu{
  background:var(--surface-raised); border:1px solid var(--rule);
  border-radius:var(--r-md); box-shadow:var(--shadow-2); color:var(--ink-1);
}
.dropdown-item{ color:var(--ink-1); }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--canvas-sunk); color:var(--ink-1); }
.dropdown-divider{ border-color:var(--rule); }
.tooltip-inner{ background:var(--surface-invert); color:var(--ink-invert); border-radius:var(--r-sm); }

/* ── 14. 푸터 ───────────────────────────────────────────────────────────── */
footer.site-footer{
  background:var(--surface-invert); color:var(--ink-invert);
  border-top:1px solid var(--rule); margin-top:auto;
}
footer.site-footer a{ color:var(--ink-invert); opacity:.82; }
footer.site-footer a:hover{ opacity:1; text-decoration:underline; }
footer.site-footer .footer-fine{ font-size:var(--fs-xs); opacity:.6; }

/* ── 차트 표(table) 보기 토글 ───────────────────────────────────────────── */
.chart-table-bar{ display:flex; justify-content:flex-end; margin-bottom:var(--s-2); }
.chart-table-wrap{ margin-top:var(--s-2); }
.chart-table-wrap .table-responsive{ max-height:60vh; overflow:auto; }
.chart-table th{ position:sticky; top:0; background:var(--surface); z-index:1; }
.chart-table tbody th{ position:static; font-weight:500; color:var(--ink-1); }
.chart-table td,.chart-table th{ white-space:nowrap; font-size:var(--fs-sm); }
.chart-table .chart-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; }
/* 표·목록 안의 수치는 어떤 경우에도 본문 스케일을 넘지 않는다 */
table .num,table .metric,.list-group .num,.list-group .metric{ font-size:inherit!important; font-weight:inherit; }


/* ── 강도존 배지·칩 — 밝은 단계는 어두운 글자, 진한 단계는 밝은 글자 ─────── */
.iz-bg-recovery,.iz-bg-base,.iz-bg-tempo,
.izt-recovery,.izt-base,.izt-tempo{ color:var(--ink-1)!important; }
.iz-bg-threshold,.iz-bg-vo2,.iz-bg-sprint,
.izt-threshold,.izt-vo2,.izt-sprint{ color:var(--surface)!important; }
:root[data-theme="dark"] .iz-bg-recovery,:root[data-theme="dark"] .iz-bg-base,
:root[data-theme="dark"] .iz-bg-tempo,:root[data-theme="dark"] .izt-recovery,
:root[data-theme="dark"] .izt-base,:root[data-theme="dark"] .izt-tempo{ color:var(--ink-1)!important; }
/* 스택 막대 구간은 표면색 2px 갭으로 분리(테두리로 감싸지 않는다) */
.iz-bar > *{ border-right:2px solid var(--surface); }
.iz-bar > *:last-child{ border-right:0; }
/* 범례 점도 존 색을 그대로 */
.iz-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:var(--s-1); }


/* ── 가이드 섹션 헤더 패턴 ─────────────────────────────────────────────── */
.sec-head{ display:flex; align-items:baseline; gap:var(--s-4); margin-bottom:var(--s-5); }
.sec-num{ font-family:var(--font-mono); font-size:12px; color:var(--primary); letter-spacing:.1em; }
.sec-sub{ max-width:64ch; color:var(--ink-2); margin-bottom:var(--s-6); font-size:15px; }

/* ── 가이드 보조 컴포넌트 — note / 체크리스트 / do·don't 박스 ─────────────── */
.note{ border-left:2px solid var(--primary); padding:var(--s-2) 0 var(--s-2) var(--s-4);
  font-size:13.5px; color:var(--ink-2); }
.check{ list-style:none; padding:0; margin:0; font-size:var(--fs-sm); color:var(--ink-2); }
.check li{ padding:10px 0 10px 28px; border-bottom:1px solid var(--rule); position:relative; }
.check li::before{ content:""; position:absolute; left:2px; top:17px; width:10px; height:10px;
  border:1.5px solid var(--primary); border-radius:3px; }
.dd{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--rule); }
.dd .hd{ padding:10px var(--s-4); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.dd.do .hd{ background:var(--st-good-wash); color:var(--st-good); }
.dd.no .hd{ background:var(--st-crit-wash); color:var(--st-crit); }
.dd .bd{ padding:var(--s-5); font-size:13.5px; color:var(--ink-2); background:var(--surface); }

/* ── 15. 파워존 배지 (도메인 컴포넌트) ──────────────────────────────────── */
.zbadge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11px;
  padding:4px 11px; border-radius:var(--r-pill);
  background:var(--surface-tint); border:1px solid var(--rule); color:var(--ink-1);
}
.zbadge i{ width:8px; height:8px; border-radius:50%; flex:none; }

/* ── 16. 아티클(가이드 상세) ────────────────────────────────────────────── */
.article-hero{
  text-align:center; padding:var(--s-7) var(--s-5); border-radius:var(--r-lg);
  background:var(--surface); color:var(--ink-1); border:1px solid var(--rule);
}
.article-emoji{
  width:64px; height:64px; margin:0 auto var(--s-3); border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-h1);
  background:var(--deco-1); border:1px solid var(--rule);
}
.article-h1{ font-weight:600; letter-spacing:var(--tracking-display); margin-bottom:var(--s-2); color:var(--ink-1); }
.article-lead{ color:var(--ink-2); max-width:64ch; margin:0 auto; }
.article-body{ color:var(--ink-1); font-size:var(--fs-body); max-width:64ch; }
.article-body.article-wide{ max-width:none; }
.article-body h4{
  margin-top:var(--s-6); margin-bottom:var(--s-3); font-weight:600; color:var(--ink-1);
  position:relative; padding-left:var(--s-3);
}
.article-body h4::before{
  content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:2px;
  border-radius:var(--r-pill); background:var(--primary);
}
.article-body p{ line-height:var(--lh-body); margin-bottom:var(--s-3); }
.article-body ul,.article-body ol{ line-height:var(--lh-body); }
.article-body strong{ color:var(--ink-1); font-weight:600; }
.article-body a{ color:var(--primary); font-weight:600; }

/* ── 17. 업로드 진행바(상단 플로팅) ─────────────────────────────────────── */
.upload-sticky{
  position:sticky; top:var(--s-2); z-index:1020;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4); box-shadow:var(--shadow-1);
}

/* ── 18. 용어 사전 ──────────────────────────────────────────────────────── */
.cat-acc{ margin-bottom:var(--s-3); }
.cat-head{
  width:100%; border:1px solid var(--rule); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-4); font-weight:600; font-size:var(--fs-body); color:var(--ink-1);
  transition:border-color var(--dur-1) var(--ease);
}
.cat-head:hover{ border-color:var(--primary); }
.cat-head .cnt{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; color:var(--ink-2);
  background:var(--surface-tint); border:1px solid var(--rule);
  border-radius:var(--r-pill); padding:2px var(--s-2);
}
.cat-head .cat-chev{ margin-left:auto; color:var(--ink-3); transition:transform var(--dur-1) var(--ease); }
.cat-head[aria-expanded="true"]{ border-color:var(--primary); background:var(--primary-wash); }
.cat-head[aria-expanded="true"] .cat-chev{ transform:rotate(180deg); color:var(--primary); }
.cat-body{ padding:var(--s-4) var(--s-1) var(--s-1); }

.gl-term{
  background:var(--surface); border:1px solid var(--rule); border-left:2px solid var(--rule-strong);
  border-radius:var(--r-sm); padding:var(--s-3) var(--s-4); height:100%;
  transition:border-color var(--dur-1) var(--ease);
}
.gl-term:hover{ border-left-color:var(--primary); }
.gl-term-head{ display:flex; align-items:center; gap:var(--s-2); }
.gl-term-name{ font-weight:600; color:var(--ink-1); font-size:var(--fs-body); }
.gl-term-abbr{
  margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600;
  color:var(--ink-2); white-space:nowrap; background:var(--surface-tint);
  border:1px solid var(--rule); border-radius:var(--r-pill); padding:2px var(--s-2);
}
.gl-term-desc{
  margin-top:var(--s-2); padding-top:var(--s-2); border-top:1px solid var(--rule);
  color:var(--ink-2); font-size:var(--fs-sm); line-height:var(--lh-body);
}
.term-item{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md);
  overflow:hidden; height:100%; transition:border-color var(--dur-1) var(--ease);
}
.term-item:hover{ border-color:var(--primary); }
.term-head{
  width:100%; border:0; background:transparent; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:var(--s-2); padding:var(--s-3) var(--s-4);
}
.term-head .term-name{ font-weight:600; color:var(--ink-1); }
.term-head .term-abbr{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; color:var(--ink-2);
  padding:2px var(--s-2); border-radius:var(--r-pill);
  background:var(--surface-tint); border:1px solid var(--rule); white-space:nowrap;
}
.term-head .term-chev{ margin-left:auto; color:var(--ink-3); transition:transform var(--dur-1) var(--ease); flex:0 0 auto; }
.term-head[aria-expanded="true"]{ background:var(--primary-wash); }
.term-head[aria-expanded="true"] .term-chev{ transform:rotate(180deg); color:var(--primary); }
.term-desc{ padding:0 var(--s-4) var(--s-3); color:var(--ink-2); font-size:var(--fs-sm); line-height:var(--lh-body); }

/* ── 19. 가이드 카드 ────────────────────────────────────────────────────── */
.guide-card{
  position:relative; border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-1); height:100%; display:block;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.guide-card:hover{ border-color:var(--primary); box-shadow:var(--shadow-2); transform:translateY(-2px); transition:all var(--dur-1) var(--ease); }
.guide-card .guide-bar{ height:3px; background:var(--primary); }
.guide-card .guide-inner{ padding:var(--s-5); }
.guide-card .guide-emoji{
  width:48px; height:48px; border-radius:var(--r-md); display:flex; align-items:center;
  justify-content:center; font-size:var(--fs-h3); background:var(--deco-2);
  border:1px solid var(--rule); margin-bottom:var(--s-3);
}
.guide-card .guide-title{ font-weight:600; color:var(--ink-1); font-size:var(--fs-body-l); margin-bottom:var(--s-1); }
.guide-card .guide-sum{ color:var(--ink-2); font-size:var(--fs-sm); line-height:var(--lh-body); margin-bottom:var(--s-3); }
.guide-card .guide-more{ color:var(--primary); font-weight:600; font-size:var(--fs-sm); }

/* ── 20. 공지 카드 ──────────────────────────────────────────────────────── */
.signup-notice{
  border-radius:var(--r-md); padding:var(--s-4) var(--s-5);
  background:var(--deco-5); border:1px solid var(--rule);
}

/* ── 21. 중고장터 메시지 / 썸네일 ───────────────────────────────────────── */
.market-bubble{ border-radius:var(--r-md); white-space:pre-line; font-size:var(--fs-sm); padding:var(--s-2) var(--s-3); }
.market-bubble-me{ background:var(--primary); color:var(--surface); border-bottom-right-radius:var(--r-sm); }
:root[data-theme="dark"] .market-bubble-me{ color:var(--canvas); }
.market-bubble-them{ background:var(--surface-tint); color:var(--ink-1); border:1px solid var(--rule); border-bottom-left-radius:var(--r-sm); }
.market-thumb{ overflow:hidden; background:var(--canvas-sunk); border-radius:var(--r-sm); flex-shrink:0; }
.market-thumb-lg{ width:52px; height:52px; }
.market-thumb-sm{ width:44px; height:44px; }

/* ── 22. 번개 코스 지도 ─────────────────────────────────────────────────── */
.course-map-stats{
  position:absolute; top:var(--s-3); right:var(--s-3); z-index:1000; pointer-events:none;
  background:var(--surface-raised); border:1px solid var(--rule); border-radius:var(--r-pill);
  padding:var(--s-1) var(--s-3); font-family:var(--font-mono); font-size:var(--fs-sm);
  font-weight:600; color:var(--ink-1); box-shadow:var(--shadow-1);
}
.course-endpoint{
  display:flex; align-items:center; justify-content:center; width:34px; height:22px;
  border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:600;
  color:var(--surface); border:2px solid var(--surface); box-shadow:var(--shadow-1);
}
.course-endpoint.is-start{ background:var(--st-good); }
.course-endpoint.is-end{ background:var(--st-crit); }
.course-arrow{ color:var(--primary); font-size:13px; line-height:18px; text-align:center; }
.course-climb-no{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; background:var(--surface-invert); color:var(--ink-invert);
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600;
  border:2px solid var(--surface); box-shadow:var(--shadow-1);
}
.course-climb-no.is-inline{ display:inline-flex; width:18px; height:18px; border-width:0; vertical-align:-3px; }
.course-climb-chip{
  display:inline-flex; align-items:center; gap:var(--s-1);
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-pill);
  padding:var(--s-1) var(--s-3); font-size:var(--fs-sm); font-weight:600; color:var(--ink-1);
}
.grade-key{
  display:inline-block; width:10px; height:10px; border-radius:2px;
  vertical-align:-1px; margin-right:2px; color:transparent;
}
.leaflet-container{ background:var(--canvas-sunk); font-family:var(--font-sans); }
.leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:var(--surface-raised); color:var(--ink-1); }

/* ── 23. 모바일 하단 탭바 ───────────────────────────────────────────────── */
.mobile-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:flex; align-items:stretch;
  background:var(--surface); border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobile-tabbar .mtab{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:var(--s-2) 0; color:var(--ink-3);
  font-size:var(--fs-xs); font-weight:600; line-height:1;
}
.mobile-tabbar .mtab-ic{ font-size:var(--fs-body-l); line-height:1; }
.mobile-tabbar .mtab.active{ color:var(--primary); }

/* ── 24. 반응형 ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px){
  /* 좌측 메뉴를 접이식 드롭다운으로 */
  .side-nav{ position:static; top:auto; display:block; overflow:visible; margin-bottom:var(--s-3); }
  .side-nav .side-link{ width:100%; margin-bottom:var(--s-1); white-space:normal;
    font-size:var(--fs-sm); padding:var(--s-3) var(--s-4); }
  .snav-toggle{
    display:flex; align-items:center; gap:var(--s-2); width:100%;
    padding:var(--s-3) var(--s-4); border-radius:var(--r-md); font-weight:600;
    font-size:var(--fs-sm); color:var(--ink-1); border:1px solid var(--rule);
    cursor:pointer; background:var(--surface);
  }
  .snav-toggle .snav-caret{ margin-left:auto; transition:transform var(--dur-1) var(--ease); }
  .side-nav:not(.snav-collapsed) .snav-toggle .snav-caret{ transform:rotate(180deg); }
  .side-nav.snav-collapsed{ margin-bottom:var(--s-3); }
  .side-nav.snav-collapsed .side-link,
  .side-nav.snav-collapsed .side-group{ display:none; }
  .side-nav:not(.snav-collapsed) .side-link{ display:flex; margin-top:var(--s-1); }
  .side-nav:not(.snav-collapsed) .side-link + .side-link{ margin-top:0; }
  /* 헤더·카드 헤더 줄바꿈 */
  .d-flex.justify-content-between.align-items-center,
  .d-flex.justify-content-between.align-items-start{ flex-wrap:wrap; gap:var(--s-2); }
  .card-header,.card-footer{ flex-wrap:wrap; gap:var(--s-1); }
  /* 탭/필은 가로 스크롤 */
  .nav-tabs,.nav-pills{ max-width:100%; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; }
  .dropdown-menu{ max-width:92vw; }
  .card-body,.glass,.article-body{ overflow-wrap:anywhere; word-break:break-word; }
  .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .stat-card > .card-body > .num,
  .stat-card > .card-body .num:not(td):not(th):not(.chart-num){ font-size:1.375rem; }
  /* 탭바에 가리지 않게 하단 여백 */
  body{ padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
}

@media (max-width: 575.98px){
  .container{ padding-left:var(--s-4); padding-right:var(--s-4); }
  .card-body{ padding:var(--s-4); }
  .hero{ padding:var(--s-6) var(--s-4); }
  .btn{ min-height:42px; }
  .btn-sm{ min-height:36px; }
  .navbar .nav-link{ padding:var(--s-3) var(--s-3)!important; }
  .dropdown-item{ padding-top:var(--s-2); padding-bottom:var(--s-2); }
  .pagination{ flex-wrap:wrap; }
  .btn-group,.btn-toolbar{ flex-wrap:wrap; }
  .plan-table-wrap{ max-height:72vh; }
  /* 모바일 타이포 — 스케일 비율 축소 */
  html{ font-size:15px; }
  .table{ font-size:var(--fs-sm); }
  /* 입력창은 16px 유지 — iOS 포커스 시 자동 확대 방지 */
  .form-control,.form-select,input,select,textarea{ font-size:16px; }
}
@media (max-width: 360px){
  html{ font-size:14px; }
}

/* ── 전역 플로팅(맨위로·문의하기) + 쪽지 UI ─────────────────────────────── */
.float-stack{ position:fixed; right:var(--s-4); bottom:calc(var(--s-5) + env(safe-area-inset-bottom));
  z-index:1041; display:flex; flex-direction:column; gap:var(--s-2); }
.float-btn{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--ink-1); border:1px solid var(--rule-strong);
  box-shadow:var(--shadow-2); cursor:pointer; font-size:var(--fs-body-l);
  transition:all var(--dur-1) var(--ease);
}
.float-btn:hover{ color:var(--primary); border-color:var(--primary); transform:translateY(-2px); }
#scrollTopBtn{ opacity:0; pointer-events:none; transform:translateY(8px); }
#scrollTopBtn.show{ opacity:1; pointer-events:auto; transform:none; }
.dm-badge{
  position:absolute; top:2px; right:0; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--r-pill); background:var(--st-crit); color:var(--surface);
  font-size:10px; font-weight:600; line-height:16px; text-align:center;
}
.dm-msg{ border:1px solid var(--rule); border-radius:var(--r-md); padding:var(--s-3); margin-bottom:var(--s-2);
  background:var(--surface-tint); font-size:var(--fs-sm); }
.dm-msg.dm-mine{ background:var(--primary-wash); }
[data-user-menu]{ cursor:pointer; }
[data-user-menu]:hover{ text-decoration:underline; text-underline-offset:2px; }
.user-pop{ z-index:2000; min-width:180px; }