/* ==========================================================================
   Grid Simulation Training Web — 인터페이스 스타일
   밝은 워크스페이스, 짙은 계통 지도, 청록색의 실제 상태 표시.
   같은 서체와 간격 체계를 탐색·훈련·실적 화면에 적용합니다.
   ========================================================================== */

:root {
  --bg: #f2f5f7;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #e8eef2;

  --line: #dfe7eb;
  --line-strong: #c7d4dc;

  --ink: #132c3b;
  --ink-2: #4c6371;
  --ink-3: #536b78;

  --accent: #14635f;
  --accent-hover: #0d4d4a;
  --accent-soft: #e5f3ef;
  --accent-line: #b4d7cc;

  /* 보조 색. 카드마다 성격을 달리 줄 때만 씁니다. */
  --teal: #0a7359;
  --teal-soft: #e7f6f1;
  --teal-line: #c5e9dd;
  --orange: #a84a08;
  --orange-soft: #fdf0e6;
  --orange-line: #f7d9bf;

  --amber: #a16207;
  --amber-soft: #fdf5e6;
  --amber-line: #f1e0bd;
  --danger: #c2334d;
  --danger-soft: #fdeff2;
  --danger-line: #f6d3da;

  --sidebar-w: 252px;
  --topbar-h: 72px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;

  /* 카드를 지면에서 살짝 띄웁니다. 짙은 그림자는 쓰지 않습니다. */
  --shadow-card: 0 1px 2px rgba(20, 22, 31, .04), 0 6px 20px rgba(20, 22, 31, .05);
  --shadow-lift: 0 2px 4px rgba(20, 22, 31, .05), 0 14px 34px rgba(20, 22, 31, .09);
  --shadow-pop: 0 18px 48px rgba(20, 22, 31, .16), 0 2px 8px rgba(20, 22, 31, .07);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --font: "Pretendard Variable", -apple-system, "Malgun Gothic", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

/* 훈련 중심 탐색: 조직 집계와 실제 실행 과정을 같은 시각 언어로 표시합니다. */
.report-switch { display: flex; gap: 6px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.report-switch button { padding: 12px 20px; color: var(--ink-2); border-bottom: 2px solid transparent; }
.report-switch [aria-current="page"] { color: var(--accent); border-color: var(--accent); font-weight: 700; }
.training-preview > summary { cursor: pointer; list-style: none; padding: 18px 22px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
.training-preview > summary::-webkit-details-marker { display: none; }
.training-preview > summary::after { content: '펼치기 +'; color: var(--accent); font-size: 13px; white-space: nowrap; }
.training-preview[open] > summary::after { content: '접기 −'; }
.process-panel { margin-bottom: 20px; overflow: hidden; }
.process-panel .report-controls { padding: 16px 24px; margin: 0; gap: 12px; align-items: end; border: 0; border-radius: 0; background: var(--surface-2); }
.process-panel .report-controls label { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 125px; flex: 1 1 130px; }
.process-panel .report-controls label > span { white-space: nowrap; }
.process-panel .report-controls button { min-height: 38px; }
.process-panel .report-controls input, .process-panel .report-controls select { width: 100%; min-width: 0; }
.process-note { padding: 0 24px; font-size: 12px; color: var(--ink-3); }
.process-stats { display: flex; gap: 28px; flex-wrap: wrap; padding: 18px 24px; color: var(--ink-2); }
.process-stats b { color: var(--ink); font-size: 20px; font-variant-numeric: tabular-nums; margin-left: 8px; }
.process-periods { display: flex; gap: 22px; overflow-x: auto; padding: 0 24px 22px; }
.process-period { display: grid; flex: 0 0 145px; gap: 8px; }
.process-period strong { font-size: 12px; font-weight: 600; }
.process-period small { color: var(--ink-3); font-size: 11px; }
.process-period .report-track { width: 100%; background: var(--accent-soft); }
.process-period .report-track i { background: var(--accent); }
.process-run { border-top: 1px solid var(--line); }
.process-run > summary { display: grid; grid-template-columns: minmax(110px, .65fr) minmax(0, 2fr) auto auto; align-items: center; gap: 20px; padding: 20px 24px; cursor: pointer; list-style: none; }
.process-run > summary::-webkit-details-marker { display: none; }
.process-run > summary:hover, .process-run[open] > summary { background: var(--surface-2); }
.process-run summary strong, .process-run summary small { display: block; }
.process-run summary small { color: var(--ink-3); font-size: 12px; margin-top: 5px; }
.process-expand { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 12px; }
.process-expand svg { width: 14px; height: 14px; flex: 0 0 auto; }
.process-run[open] .process-expand svg { transform: rotate(90deg); }
.process-run[open] .process-open-label, .process-run:not([open]) .process-close-label { display: none; }
.process-panel .me-card-head { flex-wrap: wrap; }
#processQuerySummary { max-width: 100%; line-height: 1.6; overflow-wrap: anywhere; }
.process-filter-error { margin: 12px 24px; }
.process-run-body { padding: 0 24px 24px; }
.process-run-body > p { color: var(--ink-2); font-size: 13px; }
.process-run-body .process-stats, .process-run-body .process-note { padding-left: 0; padding-right: 0; }
.process-trace { list-style: none; padding: 0 0 0 16px; margin: 18px 0; max-height: 420px; overflow-y: auto; }
.process-trace li { position: relative; padding: 0 18px 22px; border-left: 1px solid var(--line-strong); }
.process-trace li::before { content: ''; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.process-trace li:last-child { padding-bottom: 0; }
.process-trace time { display: block; color: var(--ink-3); font-size: 11px; }
.process-trace strong { font-size: 13px; }
.process-trace p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.process-trace .is-blocked::before { background: var(--danger); }
.process-trace .is-blocked strong { color: var(--danger); }
.process-pagination { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--ink-3); font-size: 12px; }
.process-run summary:focus-visible, .training-preview > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-width: 650px) {
  .process-run > summary { grid-template-columns: 1fr auto; gap: 12px; padding: 18px 16px; }
  .process-run-title { grid-row: 2; grid-column: 1 / -1; }
  .process-expand { grid-column: 1 / -1; }
  .process-stats { gap: 14px; }
  .process-panel .report-controls, .process-run-body { padding-left: 16px; padding-right: 16px; }
  .training-preview > summary { padding: 14px; }
  .training-preview > summary h2 { font-size: 16px; }
}

* { box-sizing: border-box; }
/* display를 지정한 규칙이 UA의 [hidden]을 덮어쓰지 못하게 한다. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  background: #102b3b;
  color: #e8eef2;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  /* 한국어는 어절 단위로 끊어야 읽힌다. 긴 영문 토큰만 강제로 접는다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

html { color-scheme: dark; background: #102b3b; }
body.auth-pending,
body.auth-opening,
body.auth-required {
  background: #102b3b;
  color: #e8eef2;
}
body.authenticated {
  color-scheme: dark;
  background: #102b3b;
  color: var(--ink);
}
body.authenticated .app-shell {
  color-scheme: light;
  background: var(--bg);
}
html.soft-dark body.authenticated .app-shell,
body.soft-dark.authenticated .app-shell {
  color-scheme: dark;
  background: var(--bg);
}

button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
/* 단선도 기호의 각은 유지하고, 인터페이스 아이콘에만 공통 선형 규격을 적용합니다. */
svg {
  display: block; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 2.6;
}
svg:has(> use[href^="#i-"]) { stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 어두운 밴드 위에서는 --accent(진녹)가 배경에 묻혀 초점 위치를 알 수 없습니다. */
.lp-hero :focus-visible, .lp-metrics :focus-visible, .auth-story :focus-visible {
  outline-color: var(--accent);
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }

/* ── 앱 골격 ────────────────────────────────────────────────────────────── */

/* 오프닝이 걷힐 때 업무 화면이 한 프레임에 튀어나오지 않도록 옅어짐을 둡니다.
   이 한 줄이 없어서 게이트는 부드럽게 사라지는데 뒤쪽 화면만 딱 나타났습니다. */
.app-shell { min-height: 100vh; transition: opacity .42s var(--ease); }

.sidebar {
  position: fixed; z-index: 40; inset: 16px auto 16px 16px;
  width: calc(var(--sidebar-w) - 16px); padding: 24px 12px 14px;
  display: flex; flex-direction: column;
  --ink: #eff5f6; --ink-2: #bfced6; --ink-3: #9eb6c2;
  --surface: #102b3b; --surface-2: #173747; --surface-3: #204452;
  --line: #294652; --line-strong: #41606d;
  --accent: #a8dfce; --accent-line: #557f79; --danger: #ffadb9;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
}
.mobile-nav-toggle { display: none; }
.sidebar-logo { width: 100%; display: flex; align-items: center; gap: 10px; padding: 4px 6px 24px; text-align: left; }
.brand-icon { display: block; flex: 0 0 auto; object-fit: contain; border-radius: 10px; }
/* 이름이 길어 임의로 감기지 않도록 두 줄을 직접 지정합니다. */
.sidebar-logo-name { display: grid; gap: 6px; color: var(--ink-3); font-size: 12px; line-height: 1.3; font-weight: 450; letter-spacing: .035em; }
.sidebar-logo-name b { color: var(--ink); font-size: 19px; font-weight: 620; letter-spacing: -.045em; white-space: nowrap; }

.sidebar-nav { display: grid; align-content: start; gap: 4px; margin-top: 4px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.sidebar-search { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; text-align: left; }
.sidebar-search:hover { color: var(--ink); background: var(--surface-3); }
.sidebar-search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sidebar-search kbd { margin-left: auto; font: 11px var(--font); color: var(--ink-3); }
.nav-item {
  position: relative; width: 100%; min-height: 46px; padding: 11px 12px;
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-2); border-radius: 10px;
  font-size: 14px; font-weight: 500; text-align: left; line-height: 1.55;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.nav-item > span { min-width: 0; word-break: keep-all; }
.nav-item:hover { color: var(--ink); background: var(--surface-3); }
.nav-item.active { color: #c4ecdf; background: #204452; font-weight: 600; }
.operations-nav { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.nav-item b {
  min-width: 22px; height: 22px; margin-left: auto; padding: 0 6px; flex: 0 0 auto;
  display: grid; place-items: center; color: var(--ink-2); background: var(--surface-3);
  border-radius: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.nav-item b[hidden] { display: none; }

.sidebar-bottom { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: 1fr auto; gap: 12px 4px; align-items: center; }
.sidebar-bottom .sync-badge { grid-row: 1; grid-column: 1; }
.sidebar-bottom .utility-pair { grid-row: 1; grid-column: 2; gap: 0; }
.sidebar-bottom .icon-button.soft { width: 44px; height: 44px; }
.sidebar-bottom .icon-button.soft svg { width: 16px; height: 16px; }
.sidebar-bottom .profile-card { grid-column: 1 / -1; }
.sidebar .account-avatar { color: #102b3b; }
.utility-pair { display: flex; gap: 6px; }
.icon-button.soft {
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--ink-2); border-radius: 8px;
  transition: .12s var(--ease);
}
.icon-button.soft:hover { color: var(--ink); background: var(--surface-3); }
.icon-button.soft svg { width: 18px; height: 18px; }

.sync-badge {
  height: 28px; padding: 0 9px; display: flex; align-items: center; gap: 7px;
  color: var(--ink-3); border: 0; font-size: 12px;
}
.sync-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.sync-badge[data-state="online"] { color: var(--accent); border-color: var(--accent-line); }
.sync-badge[data-state="online"] i { background: var(--accent); }
.sync-badge[data-state="error"] { color: var(--danger); border-color: var(--danger-line); }
.sync-badge[data-state="error"] i { background: var(--danger); }

.profile-card {
  width: 100%; padding: 14px 10px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; text-align: left;
  transition: .12s var(--ease);
}
.profile-card:hover { background: var(--surface-3); }
.avatar, .account-avatar, .avatar-token, .member-avatar-xl {
  display: grid; place-items: center; color: #fff; background: var(--accent);
  border-radius: 50%; font-weight: 700; letter-spacing: -.02em;
}
.avatar, .account-avatar { width: 34px; height: 34px; flex: 0 0 auto; font-size: 12px; }
.account-avatar::before, .account-avatar span { display: none; }
.profile-copy { min-width: 0; display: grid; }
.profile-copy strong { overflow: hidden; font-size: 14px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy small { overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.workspace { margin-left: var(--sidebar-w); min-height: 100vh; }
.route-page { display: none; min-height: 100vh; }
.route-page.is-active { display: block; }

/* ── 상단 바 ────────────────────────────────────────────────────────────── */

.inner-topbar {
  position: sticky; z-index: 30; top: 0; height: var(--topbar-h);
  padding: 0 clamp(24px, 3vw, 40px); display: flex; align-items: center; gap: 18px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
}
.inner-topbar > .inner-actions { margin-left: auto; }
.inner-community {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink); font-size: 14px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap;
}
.inner-community > svg { width: 16px; height: 16px; }

.topbar-search, .inner-search-trigger {
  width: 100%; max-width: 420px; height: 40px; padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-3); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 9px;
  font-size: 14px; text-align: left; transition: .12s var(--ease);
}
.topbar-search:focus-within, .inner-search-trigger:hover { border-color: var(--line-strong); background: var(--surface); }
.topbar-search svg, .inner-search-trigger svg { width: 15px; height: 15px; flex: 0 0 auto; }
.topbar-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-size: 14px; }
.topbar-search input::placeholder { color: var(--ink-3); }
.inner-search-trigger span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search kbd, .inner-search-trigger kbd {
  padding: 2px 5px; color: var(--ink-2); background: var(--surface-3);
  border-radius: 4px; font: 500 11px var(--font);
}

.training-topbar-copy { min-width: 0; display: grid; }
.training-topbar-copy strong { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.training-topbar-copy small { overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.inner-actions { display: flex; align-items: center; gap: 8px; }
.top-icon {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--ink-2); border-radius: 8px; transition: .12s var(--ease);
}
.top-icon:hover { color: var(--ink); background: var(--surface-3); }
.top-icon svg { width: 18px; height: 18px; }
.notification-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ── 페이지 기본 요소 ───────────────────────────────────────────────────── */

.inner-page, .home-page { background: var(--bg); }
.page-container { width: min(1160px, calc(100% - 64px)); margin: 0 auto; padding: 32px 0 72px; }
.page-heading { margin-bottom: 24px; }
.page-heading h1 { font-size: 24px; line-height: 1.3; }
.page-heading p { margin-top: 6px; max-width: 66ch; color: var(--ink-2); font-size: 14px; }
.page-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-heading-row > div { flex: 1 1 auto; min-width: 0; }
.page-heading-row > .page-primary { flex: 0 0 auto; }
/* 눈썹 라벨. 화면마다 클래스 이름은 달라도 규격은 둘뿐입니다 — 본문용과 구획 제목용. */
.eyebrow, .card-label, .page-eyebrow, .ops-eyebrow, .me-eyebrow, .lp-eyebrow {
  display: block; color: var(--ink-3); font-size: 12px; font-weight: 600;
}
.eyebrow, .card-label, .page-eyebrow { margin-bottom: 6px; }
.ops-eyebrow { margin-bottom: 2px; }
.me-eyebrow, .lp-eyebrow { font-size: 11.5px; letter-spacing: .06em; }

/* 주요 동작과 보조 동작은 같은 높이로 맞추고, 작은 버튼도 읽기 쉽게 유지합니다. */
.page-primary {
  min-height: 42px; height: auto; padding: 9px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #ffffff; background: var(--accent); border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 2px 3px #102b3b0d; transition: background .16s var(--ease), box-shadow .16s var(--ease);
}
.page-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 4px 10px #102b3b14; }
.page-primary svg { width: 15px; height: 15px; }
.page-primary.compact { min-height: 36px; height: auto; padding: 7px 12px; font-size: 14px; }
.ghost-action {
  min-height: 42px; height: auto; padding: 9px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font-size: 14px; line-height: 1.4; transition: background .16s var(--ease), border-color .16s var(--ease);
}
.ghost-action:hover:not(:disabled) { color: var(--ink); border-color: var(--accent-line); background: var(--surface-2); }
.ghost-action svg { width: 15px; height: 15px; }
.text-button { min-height: 40px; padding: 8px 10px; color: var(--accent); border-radius: 8px; font-size: 14px; font-weight: 550; }
.text-button:hover:not(:disabled) { color: var(--accent-hover); background: var(--accent-soft); }
.page-primary:disabled, .ghost-action:disabled, .text-button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
:is(.page-primary, .ghost-action, .text-button):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.breadcrumb { margin-bottom: 18px; display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.breadcrumb button { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13px; }
.breadcrumb button:hover { color: var(--accent); }
.breadcrumb button svg { width: 14px; height: 14px; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.panel > header {
  min-height: 48px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line);
}
.panel > header h2 { margin: 0; font-size: 15px; }
.panel > header span { color: var(--ink-3); font-size: 12.5px; }
.panel > header > button { color: var(--accent); font-size: 13px; font-weight: 600; }

.status-pill {
  height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.live { color: var(--accent); background: var(--accent-soft); }
.status-pill.expired { color: var(--amber); background: var(--amber-soft); }
.topic-badge { padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.topic-badge, .topic-badge.idea, .topic-badge.question, .topic-badge.training { color: var(--accent); background: var(--accent-soft); }
.topic-badge.solved { color: #1d6b46; background: #e2f2e9; box-shadow: inset 0 0 0 1px #bfe0cd; }
.topic-badge.review { color: var(--amber); background: var(--amber-soft); }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-row span { padding: 3px 7px; color: var(--ink-2); background: var(--surface-3); border-radius: 4px; font-size: 12px; }

/* 목록을 기다리는 자리. 첫 화면부터 운영 콘솔까지 같은 것을 씁니다. */
.load-note {
  min-height: 104px; padding: 28px 20px; display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink-3); font-size: 14px; line-height: 1.7;
}
.load-note i {
  width: 13px; height: 13px; border: 2px solid var(--line-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: load-spin .7s linear infinite;
}
@keyframes load-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .load-note i { animation: none; } }

.training-empty {
  min-height: 140px; padding: 24px; display: grid; place-items: center; align-content: center; gap: 8px;
  color: var(--ink-3); text-align: center;
}
.training-empty.compact { min-height: 110px; }
.training-empty-icon {
  width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink-3);
}
.training-empty-icon svg { width: 22px; height: 22px; }
.training-empty h3 { color: var(--ink-2); font-size: 18px; font-weight: 550; }
.training-empty p { max-width: 40ch; font-size: 16px; line-height: 1.75; }
.training-empty > small { max-width: 54ch; font-size: 13px; line-height: 1.7; }
.training-empty.error .training-empty-icon { color: var(--danger); }

.page-note {
  margin-top: 20px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); font-size: 13px;
}
.page-note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--accent); }

/* ── 홈 대시보드 ────────────────────────────────────────────────────────── */

.stat-row {
  margin-bottom: 20px; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.stat-row > div { padding: 16px 18px; display: grid; gap: 2px; }
.stat-row > div + div { border-left: 1px solid var(--line); }
.stat-row span { color: var(--ink-3); font-size: 13px; }
.stat-row strong { font-size: 26px; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.stat-row small { color: var(--ink-3); font-size: 12px; }

.panel-primary { grid-row: span 1; }


/* ── 훈련 목록 ──────────────────────────────────────────────────────────── */

.practice-explorer {
  margin-bottom: 24px; padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 20px 32px;
  color: #f1f7fa; background: #173b4a; border-radius: 16px;
}
.practice-explorer > header { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.practice-explorer .detail-kicker { color: #a8e6d2; font-size: 11px; }
.practice-explorer h2 { margin-top: 6px; font-size: 21px; font-weight: 600; }
.practice-explorer > header > span, .practice-explorer > footer { color: #b6cfd9; font-size: 12px; }
.practice-path { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
.practice-path::before { content: ''; position: absolute; top: 27px; left: 12%; right: 12%; height: 1px; background: #527481; }
.practice-path button { position: relative; min-width: 0; padding: 10px 4px 12px; display: grid; justify-items: center; gap: 9px; color: #c7dce5; border: 1px solid transparent; border-radius: 10px; transition: background .2s, border-color .2s; }
.practice-path button:hover { background: #204957; }
.practice-path button[aria-pressed="true"] { color: #fff; background: #244e5d; border-color: #689d9e; }
.practice-path b { width: 32px; height: 32px; display: grid; place-items: center; background: #173b4a; border: 1px solid #7495a3; border-radius: 50%; font-size: 12px; font-weight: 500; }
.practice-path [aria-pressed="true"] b { color: #163a43; background: #a8e6d2; border-color: #a8e6d2; }
.practice-path button > span { font-size: 15px; font-weight: 600; }
.practice-path small { color: #b6cfd9; font-size: 11px; word-break: keep-all; }
.practice-readout { min-width: 0; padding: 2px 0; align-self: center; }
.practice-readout [hidden] { display: none; }
.practice-readout > div > span { color: #a8e6d2; font-size: 10px; letter-spacing: .12em; }
.practice-readout h3 { margin: 7px 0 9px; font-size: 20px; font-weight: 550; letter-spacing: -.02em; }
.practice-readout p { max-width: 52ch; color: #c7dce5; font-size: 14px; line-height: 1.75; word-break: keep-all; }
.practice-explorer > footer { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid #345663; }
.practice-explorer :focus-visible { outline: 2px solid #a8e6d2; outline-offset: 3px; }

.training-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.training-section-heading { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.training-section-heading h2, .training-history h2 { font-size: 16px; }
.training-scenario-grid { display: grid; gap: 12px; }

.training-scenario-card {
  overflow: hidden; display: grid; grid-template-columns: 260px minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.training-scenario-art { overflow: hidden; background: var(--surface); }
.training-scenario-card > div:last-child { padding: 18px 20px; display: flex; flex-direction: column; }
.training-scenario-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.training-scenario-card header small, .training-scenario-card footer > span { color: var(--ink-3); font-size: 12.5px; }
.training-scenario-card h2 { margin: 12px 0 6px; font-size: 18px; }
.training-scenario-card p { color: var(--ink-2); font-size: 13.5px; }
.training-scenario-meta { margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.training-scenario-meta div { padding: 9px 11px; background: var(--surface); }
.training-scenario-meta dt { color: var(--ink-3); font-size: 12px; }
.training-scenario-meta dd { margin: 2px 0 0; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.training-scenario-note { margin: 12px 0 0; padding-left: 10px; color: var(--ink-2); border-left: 2px solid var(--accent-line); font-size: 12.5px; }
.training-scenario-card footer { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* 대시보드 패널은 폭이 좁아 카드를 세로로 쌓는다. */

.training-history { position: sticky; top: calc(var(--topbar-h) + 16px); }
/* 두 칸의 제목 블록을 같은 모양으로 맞춥니다. 한쪽만 padding과 아래 선을 갖고 있어
   왼쪽 '훈련 시나리오'와 오른쪽 '내 훈련 기록'의 기준선이 12px 어긋나 있었습니다.
   오른쪽 목록은 카드 하나가 아니라 카드 여러 장이라, 머리에 선을 두를 이유도 없습니다. */
.training-history > header { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.training-section-heading, .training-history > header { min-height: 44px; align-items: flex-end; }
.training-section-heading > div, .training-history > header > div { display: grid; gap: 2px; }
#trainingRunList { padding: 10px; display: grid; gap: 8px; }

.training-run-card { padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.training-run-card > div, .training-run-card footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.training-run-card > div small { color: var(--ink-3); font-size: 12px; }
.training-run-card > strong { display: block; overflow: hidden; margin: 8px 0; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.training-run-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.training-run-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.training-run-status.in_progress { color: var(--accent); }
.training-run-status.in_progress i { background: var(--accent); }
.training-run-status.completed i, .training-run-status.published i { background: var(--accent); }
.training-run-status.expired { color: var(--amber); }
.training-run-status.expired i { background: var(--amber); }
.training-run-card code { color: var(--ink-3); font: 12px var(--mono); }
.training-run-card button { padding: 4px 9px; color: var(--accent); background: var(--accent-soft); border-radius: 4px; font-size: 12px; font-weight: 600; }
.training-run-card:has(.training-run-status.expired) { background: var(--amber-soft); border-color: var(--amber-line); }
.training-run-card:has(.training-run-status.expired) button { color: var(--amber); background: var(--amber-soft); }

/* ── 훈련 워크스페이스 ──────────────────────────────────────────────────── */

.training-workspace-container { width: min(1440px, calc(100% - 48px)); padding-top: 20px; }
.training-workspace-heading { margin-bottom: 12px; }
.training-workspace-heading > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.training-workspace-heading p { color: var(--ink-3); font-size: 13px; }
.training-frame-shell {
  overflow: hidden; height: min(78vh, 860px); min-height: 540px;
  background: #0d1014; border: 1px solid var(--line-strong); border-radius: var(--r);
}
.training-frame-shell iframe { width: 100%; height: 100%; display: block; border: 0; background: #0d1014; }

.training-expired-notice {
  padding: 18px 20px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: var(--r);
}
.training-expired-notice[hidden] { display: none; }
.training-expired-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--amber); }
.training-expired-icon svg { width: 24px; height: 24px; }
.training-expired-notice strong { display: block; font-size: 14px; }
.training-expired-notice p { margin-top: 3px; color: var(--ink-2); font-size: 13px; }
.training-expired-notice .page-primary { color: #24200f; background: #e6c979; }
.training-expired-notice .page-primary:hover { background: #dcbc5f; }

.training-result-panel { max-width: 900px; margin: 16px auto 0; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.training-result-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.training-result-panel h2 { font-size: 18px; }
.training-result-integrity { max-width: 100%; color: var(--ink-3); font-size: 12px; }
.training-result-integrity summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
.training-result-integrity > span { display: block; padding-bottom: 8px; font-family: var(--mono); overflow-wrap: anywhere; }
.training-result-metrics {
  margin: 16px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.training-result-metrics div { padding: 12px 14px; background: var(--surface); }
.training-result-metrics dt { color: var(--ink-3); font-size: 12px; }
.training-result-metrics dd { margin: 4px 0 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }

.training-publish-form { display: grid; gap: 14px; }
.training-publish-preview { padding: 14px 16px; display: grid; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.training-publish-preview > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.training-publish-preview h3 { font-size: 14px; }
.training-publish-preview header small { color: var(--ink-3); font-size: 12px; }
.training-preview-summary { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.training-preview-summary strong { font-size: 13px; }
.training-preview-summary span { color: var(--ink-2); font-size: 12.5px; text-align: right; }
.training-preview-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.training-preview-copy p { padding: 10px 12px; display: grid; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.training-preview-copy b { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.training-preview-copy span { color: var(--ink-2); font-size: 12.5px; }
.training-publish-form > label:not(.training-publish-consent) { display: grid; gap: 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.training-publish-form textarea, .reply-composer textarea, .modal textarea, .modal input, .modal select, .auth-form input {
  width: 100%; padding: 9px 11px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); outline: 0;
  font-size: 13.5px; line-height: 1.6; resize: vertical; transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.training-publish-form textarea:focus, .reply-composer textarea:focus, .modal textarea:focus,
.modal input:focus, .modal select:focus, .auth-form input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.training-publish-consent { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: 13px; }
.training-publish-consent input { margin-top: 3px; accent-color: var(--accent); }
.training-publish-form footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.training-publish-form footer small { color: var(--ink-3); font-size: 12px; }
.training-publish-form button:disabled, .training-workspace-page button:disabled { opacity: .5; cursor: not-allowed; }

/* ── 함께 복기 ──────────────────────────────────────────────────────────── */

.discussion-highlight {
  margin-bottom: 18px; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.discussion-highlight h2 { font-size: 17px; }
.discussion-highlight > div:first-child { flex: 1 1 440px; min-width: 0; }
.discussion-highlight > div > p { max-width: 72ch; margin-top: 5px; color: var(--ink-2); font-size: 13.5px; }
.discussion-highlight footer { display: flex; align-items: center; gap: 16px; }
.discussion-highlight-meta { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 12.5px; }
.discussion-highlight-meta svg { width: 14px; height: 14px; color: var(--accent); }
.discussion-highlight footer > button { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); font-size: 13px; font-weight: 600; }
.discussion-highlight footer > button svg { width: 14px; height: 14px; }

.discussion-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.discussion-layout > * , .training-layout > *, .thread-layout > * { min-width: 0; }
.discussion-toolbar {
  margin-bottom: 12px; padding: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.chip-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-filter button { min-height: 36px; padding: 6px 13px; color: var(--ink-2); border-radius: 7px; font-size: 14px; transition: .12s var(--ease); }
.chip-filter button:hover { background: var(--surface-3); }
.chip-filter button.active { color: #fff; background: var(--accent); font-weight: 600; }
/* select 한 벌. 토론 화면은 --surface, 운영 콘솔은 --surface-2를 쓰고 있었고
   양쪽 다 브라우저 기본 화살표라 같은 제품으로 보이지 않았습니다.
   여기서 면과 화살표를 맞춥니다. 화살표는 테마별로 색을 따로 그립니다
   (data URI 안에서는 currentColor가 동작하지 않습니다). */
/* 경계가 배경과 1.16:1이면 입력칸의 끝을 눈으로 못 찾습니다(WCAG 1.4.11). */
.toolbar-select {
  height: 32px; padding: 0 28px 0 10px; color: var(--ink-2); background-color: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); outline: 0; font-size: 13px;
}
.toolbar-select, .ops-toolbar-controls select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 28px;
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23666d84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.soft-dark .toolbar-select, body.soft-dark .ops-toolbar-controls select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23949ab0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.toolbar-select:hover, .ops-toolbar-controls select:hover { border-color: var(--line-strong); }

.discussion-feed { display: grid; gap: 10px; }
.discussion-feed article {
  position: relative; padding: 16px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; transition: border-color .12s var(--ease);
}
.discussion-feed article:hover { border-color: var(--line-strong); }
.discussion-feed article[hidden] { display: none; }
.vote-box { display: grid; justify-items: center; align-content: start; gap: 3px; }
.vote-box button { width: 44px; min-height: 42px; display: grid; place-items: center; color: var(--ink-2); background: var(--surface-3); border-radius: var(--r-sm); }
.vote-box button:hover, .vote-box button.active { color: var(--accent); background: var(--accent-soft); }
.vote-box b { font-size: 13px; font-variant-numeric: tabular-nums; }
.vote-box small { color: var(--ink-3); font-size: 11px; }
.vote-icon { width: 13px; height: 13px; transform: rotate(-90deg); }
.feed-copy > div:first-child { display: flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 12px; }
.feed-copy h2 { margin: 9px 0 5px; font-size: 16px; }
.feed-copy > p { color: var(--ink-2); font-size: 13.5px; }
.feed-copy footer { margin-top: 14px; display: flex; align-items: center; gap: 16px; color: var(--ink-3); font-size: 12.5px; }
.feed-copy footer .article-author { margin-right: auto; }
.feed-copy footer > span { display: flex; align-items: center; gap: 5px; }
.feed-copy footer svg { width: 14px; height: 14px; }
.feed-copy footer > button { color: var(--accent); font-size: 13px; font-weight: 600; }
.article-author { display: flex; align-items: center; gap: 8px; }
.article-author > span { display: grid; }
.article-author strong { font-size: 13px; font-weight: 600; }
.article-author small { color: var(--ink-3); font-size: 12px; }
.avatar-token { width: 30px; height: 30px; flex: 0 0 auto; font-size: 11px; }
.avatar-token.blue, .member-avatar-xl.blue { background: #2f6f9e; }
.avatar-token.mint, .member-avatar-xl.mint { background: #2a7f68; }
.avatar-token.amber, .member-avatar-xl.amber { background: #916a2b; }
.avatar-token.rose, .member-avatar-xl.rose { background: #944258; }
.avatar-token.violet, .member-avatar-xl.violet { background: #5a4f8c; }
.avatar-token.neutral, .member-avatar-xl.neutral { background: #5b6561; }
.training-result-inline { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.training-result-inline span { padding: 3px 8px; color: var(--ink-2); background: var(--surface-3); border-radius: 4px; font-size: 12px; }
.training-result-inline b { color: var(--ink); }

.discussion-aside { display: grid; gap: 12px; }
.discussion-aside > section { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.discussion-aside h3 { margin-bottom: 12px; font-size: 14px; }
.feedback-guide { display: grid; gap: 8px; }
.feedback-guide p { display: flex; gap: 8px; color: var(--ink-2); font-size: 13px; }
.feedback-guide b { color: var(--accent); font-variant-numeric: tabular-nums; }
.popular-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.popular-tags button { height: 30px; padding: 0 10px; display: flex; align-items: center; color: var(--ink-2); background: var(--surface-3); border-radius: var(--r-sm); text-align: left; font-size: 13px; }
.popular-tags button:hover { color: var(--accent); background: var(--accent-soft); }
/* 태그는 실제로 글에 붙어 있는 것만 나오고, 옆의 숫자는 그 태그의 글 수입니다. */
.popular-tags button { gap: 6px; }
.popular-tags button > i {
  color: var(--ink-3); font-family: var(--mono); font-size: 11px; font-style: normal;
}
.popular-tags button.active {
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.popular-tags button.active > i { color: var(--accent); }
/* 필터로 아무 글도 안 남았을 때. 빈 화면만 남으면 고장으로 읽힙니다. */
.feed-empty { padding: 30px 16px; color: var(--ink-3); font-size: 13px; text-align: center; }
.ask-card h3 { margin: 0 0 6px; }
.ask-card p { color: var(--ink-2); font-size: 13px; }
.ask-card button { margin-top: 14px; display: flex; align-items: center; gap: 7px; color: var(--accent); font-size: 13px; font-weight: 600; }
.ask-card button svg { width: 14px; height: 14px; }

/* ── 결과 글 ────────────────────────────────────────────────────────────── */

.thread-container { padding-top: 24px; }
.thread-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.thread-question { padding: 24px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.thread-vote { display: grid; align-content: start; gap: 4px; }
.thread-vote button { min-height: 38px; display: grid; place-items: center; color: var(--ink-2); background: var(--surface-3); border-radius: var(--r-sm); }
.thread-vote button:hover { color: var(--accent); background: var(--accent-soft); }
.thread-vote b { font-size: 13px; font-variant-numeric: tabular-nums; }
.thread-labels { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 12.5px; }
.thread-question h1 { margin: 12px 0 8px; font-size: 22px; line-height: 1.35; }
.thread-question > div:last-child > p { color: var(--ink-2); font-size: 14px; }
.thread-body { margin-top: 20px; padding-top: 18px; color: var(--ink-2); border-top: 1px solid var(--line); font-size: 14px; }
.thread-body p { margin-bottom: 12px; }
.thread-body ol { padding-left: 20px; }
.thread-body li { margin: 5px 0; }
.thread-question footer { margin-top: 20px; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); }
.thread-question footer > div:last-child { display: flex; flex-shrink: 0; gap: 6px; }
.thread-question footer > div:last-child button { min-height: 44px; padding: 8px 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink-2); background: var(--surface-3); border-radius: var(--r-sm); font-size: 12.5px; }
.thread-question footer > div:last-child button:hover { color: var(--ink); }
.thread-question footer svg { width: 14px; height: 14px; }

.answers-section { margin-top: 20px; }
.answers-section > header { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.answers-section > header select { max-width: 100%; min-width: 0; min-height: 44px; }
.answers-section > header h2 { font-size: 16px; white-space: nowrap; }
.reply-status { padding: 18px; color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-sm); font-size: 14px; line-height: 1.7; }
.reply-status:empty { display: none; }
#replyRetry { margin-top: 12px; }
.reply-label { display: block; margin-top: 18px; font-size: 13px; font-weight: 600; }
.answer { margin-bottom: 10px; padding: 18px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.answer.accepted { border-color: var(--accent-line); }
.answer .avatar-token { width: 32px; height: 32px; }
.answer > div > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.answer header > span { display: grid; }
.answer header strong { font-size: 13px; font-weight: 600; }
.answer header small { color: var(--ink-3); font-size: 12px; }
.answer header em { display: flex; align-items: center; gap: 5px; color: var(--accent); font-size: 12px; font-style: normal; font-weight: 600; white-space: nowrap; }
.answer header em svg { width: 14px; height: 14px; }
.answer p { margin: 10px 0; color: var(--ink-2); font-size: 14px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.answer blockquote { margin: 10px 0; padding: 10px 12px; color: var(--ink-2); background: var(--surface-2); border-left: 2px solid var(--accent-line); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13px; }
.answer footer { display: flex; gap: 6px; }
.answer footer button { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); background: var(--surface-3); border-radius: var(--r-sm); font-size: 13px; }
.answer footer button:hover { color: var(--accent); }
.server-answer { border-left: 2px solid var(--accent) !important; }

.reply-composer { margin-top: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.reply-composer textarea { margin: 8px 0 10px; min-height: 120px; }
.reply-composer footer { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.reply-composer footer small { flex: 1 1 160px; color: var(--ink-3); font-size: 12px; line-height: 1.6; }
.reply-composer footer button { margin-left: auto; flex-shrink: 0; }
.reply-composer footer svg { width: 15px; height: 15px; }

.thread-aside { position: sticky; top: calc(var(--topbar-h) + 16px); display: grid; gap: 12px; }
.thread-aside section { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.thread-aside dl { margin: 10px 0 0; }
.thread-aside dl div { min-height: 32px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.thread-aside dl div:last-child { border-bottom: 0; }
.thread-aside dt { color: var(--ink-3); font-size: 12.5px; }
.thread-aside dd { margin: 0; font-size: 13px; font-weight: 600; }
.thread-aside section > button { width: 100%; min-height: 34px; margin-top: 10px; padding: 8px 10px; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); font-size: 13px; font-weight: 600; }
.thread-aside section:last-child > button { display: grid; gap: 3px; color: var(--ink-2); background: var(--surface-3); text-align: left; }
.thread-aside section:last-child strong { font-size: 13px; }
.thread-aside section:last-child small { color: var(--ink-3); font-size: 12px; }

/* ── 인증 게이트 ────────────────────────────────────────────────────────────
   로그인 폼은 없습니다. 사내 인증이 앞단에서 끝나므로 접속하면 바로 들어갑니다.
   이 화면은 확인이 진행 중이거나 실패했을 때만 보입니다.

   두 상태를 별개의 화면으로 만들지 않고, 같은 회로의 두 위치로 그립니다 —
   확인 중에는 전류가 흐르고, 실패하면 개폐기가 열린 채 아래 구간이 죽습니다.
   이 제품이 하루 종일 다루는 바로 그 그림입니다. */

body.auth-pending, body.auth-required { overflow: hidden; }
body.auth-pending .app-shell, body.auth-required .app-shell { opacity: 0; pointer-events: none; }
body.authenticated .app-shell { opacity: 1; }

/* 첫 Tab에서만 나타나는 본문 바로가기. 평소에는 화면 밖에 있습니다. */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 6000;
  padding: 10px 16px;
  color: var(--surface); background: var(--ink);
  border-radius: var(--r-sm); font-size: 13px; font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform .16s var(--ease);
}
.skip-link:focus-visible { transform: none; outline: 2px solid var(--accent); outline-offset: 2px; }
#mainContent:focus { outline: none; }

.auth-gate {
  position: fixed; z-index: 5000; inset: 0; overflow: hidden auto;
  display: grid; grid-template-rows: auto minmax(min-content, 1fr) auto;
  color-scheme: dark;
  --surface: #173646;
  --surface-3: #1b3b4c;
  --line: #294652;
  --line-strong: #41606d;
  --ink: #eff5f6;
  --ink-2: #bfced6;
  --ink-3: #9eb6c2;
  --accent: #a8dfce;
  --accent-hover: #c4ecdf;
  --accent-line: #557f79;
  --teal: #a8dfce;
  --amber: #e7c382;
  color: var(--ink); background: #102b3b; opacity: 1; visibility: visible;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
body.authenticated .auth-gate { opacity: 0; visibility: hidden; pointer-events: none; }
/* 영상 뒤에만 옅은 계통 격자를 둡니다. */
.auth-gate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(#a8dfce06 1px, transparent 1px),
    linear-gradient(90deg, #a8dfce06 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 70% 50%, #000, transparent 70%);
}

/* ── 접속 오프닝 ─────────────────────────────────────────────────────────────
   영상이 주인공입니다. 글씨는 영상 위에 얹지 않고 바깥에 둡니다 — 얹으면 둘 다 안 읽힙니다.
   진행 표시는 소개 문구 아래에서 실제로 끝난 단계만 셉니다.
   이 화면은 브라우저 세션의 첫 접속에만 재생하고, 이후에는 예전처럼 즉시 지나갑니다.
   모션을 끈 사용자에게는 재생하지 않고, 건너뛰기로 언제든 넘어갑니다. */
.auth-film {
  width: min(1240px, 100%); min-width: 0;
  display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr);
  grid-template-rows: auto auto; grid-template-areas: "copy screen" "steps screen";
  gap: 32px clamp(32px, 5vw, 72px); align-content: center; text-align: left;
}
.auth-film-copy { grid-area: copy; align-self: end; padding-top: 12px; }
.auth-kicker {
  margin: 0 0 22px; color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
}
.auth-headline {
  margin: 0; color: var(--ink);
  font-size: clamp(36px, 3.4vw, 52px); font-weight: 570;
  line-height: 1.32; letter-spacing: -.045em;
}
.auth-headline em { color: var(--accent); font-style: normal; }
.auth-sub { margin: 22px 0 0; max-width: 32ch; color: var(--ink-2); font-size: 14px; line-height: 1.8; }

/* ── 영상 액자 ───────────────────────────────────────────────────────────── */
/* 액자 폭에 맞춰 줄어들게 두면 아래 메타 줄도 같은 폭으로 정렬됩니다. */
.auth-screen {
  grid-area: screen; margin: 0; min-width: 0; align-self: center;
  display: grid; gap: 16px; width: 100%;
}
.auth-screen-frame {
  width: 100%;
  position: relative; aspect-ratio: 1920 / 1088; overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 24px 64px #071b2940;
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
body.auth-opening .auth-screen-frame { opacity: 1; transform: none; }
.auth-video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 가장자리를 아주 살짝 눌러 액자 안으로 들어가 보이게 합니다. */
.auth-screen-vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px #ffffff14;
}
/* 영상 진행은 액자 아래 모서리에 붙은 2px 선입니다. 영상 위를 가리지 않습니다. */
.auth-screen-bar {
  position: absolute; right: 0; bottom: 0; left: 0; height: 2px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.auth-screen-bar > i {
  display: block; width: 0; height: 100%; background: var(--accent);
  transition: width .18s linear;
}
.auth-screen-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  color: var(--ink-3); font-size: 11.5px;
}
.auth-screen-tag { display: inline-flex; align-items: center; gap: 8px; }
.auth-screen-tag > i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.auth-screen-time { font-variant-numeric: tabular-nums; }
.auth-screen-time b { color: var(--ink-2); font-weight: 600; }
.auth-screen-time small { margin-left: 4px; }

/* ── 진행 레일 ───────────────────────────────────────────────────────────── */
.auth-steps {
  grid-area: steps; margin: 0; padding: 24px 0 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px; align-content: start; align-self: start; border-top: 1px solid var(--line);
}
.auth-steps li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start;
}
.auth-steps li > i {
  width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; position: relative;
  border: 1px solid var(--ink-3);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.auth-steps li > span { display: grid; gap: 2px; min-width: 0; }
.auth-steps li b { color: var(--ink); font-size: 13px; font-weight: 600; }
.auth-steps li small { color: var(--ink-3); font-size: 12px; }
.auth-steps li.is-active > i {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 3px, transparent 3px);
  animation: auth-pulse 1.1s var(--ease) infinite;
}
.auth-steps li.is-done { opacity: 1; }
.auth-steps li.is-done > i { border-color: var(--teal); background: var(--teal); }
.auth-steps li.is-done > i::after { content: ''; position: absolute; top: 3px; left: 5px; width: 4px; height: 7px; border: solid #102b3b; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.auth-steps li.is-done small { color: var(--ink-2); }
@keyframes auth-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 34%, transparent); }
  60% { box-shadow: 0 0 0 6px transparent; }
}

/* 실패 화면에서는 부팅 구도를 통째로 감춥니다. */
body.auth-required .auth-film { display: none; }

.auth-skip, .auth-sound {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 10px 18px; color: #102b3b; background: var(--accent);
  border: 1px solid transparent; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.auth-skip:hover, .auth-sound:hover { background: var(--accent-hover); }
.auth-skip svg, .auth-sound svg { width: 13px; height: 13px; }
.auth-sound { color: var(--ink-2); background: transparent; border-color: var(--line-strong); }
.auth-sound:hover { color: #102b3b; }

/* ── 인계 ────────────────────────────────────────────────────────────────
   게이트가 사라지는 게 아니라 자리를 넘깁니다.

   박자는 겹칩니다. 업무 화면이 먼저(0ms부터 420ms) 자리를 잡고, 게이트는 그보다
   느리게(0ms부터 560ms) 살짝 앞으로 나오면서 옅어집니다. 그래서 게이트가 완전히
   사라질 때쯤엔 뒤쪽 화면이 이미 자리에 있습니다 — 바뀌는 순간이 아니라 지나가는
   느낌이 됩니다.

   사이드바는 왼쪽에서, 본문은 아래에서 들어옵니다. 한 덩어리로 같이 나타나는 것보다
   화면이 조립되는 것처럼 읽힙니다. */
body.auth-opening.auth-lifting .auth-gate {
  opacity: 0; transform: scale(1.015);
  transition: opacity .56s var(--ease), transform .56s cubic-bezier(.4, 0, .2, 1);
}
/* 액자는 조금 더 앞으로 나오며 사라져, 그 안을 통과하는 것처럼 보입니다. */
body.auth-opening.auth-lifting .auth-screen-frame {
  transform: translateY(-8px) scale(1.05); opacity: 0;
  transition: transform .56s cubic-bezier(.4, 0, .2, 1), opacity .42s var(--ease);
}
/* 글자는 먼저 비웁니다. 남아 있으면 뒤쪽 화면과 겹쳐 읽혀 지저분합니다. */
body.auth-opening.auth-lifting .auth-film-copy,
body.auth-opening.auth-lifting .auth-steps,
body.auth-opening.auth-lifting .auth-screen-meta,
body.auth-opening.auth-lifting .auth-gate-bar,
body.auth-opening.auth-lifting .auth-gate-foot {
  opacity: 0; transform: translateY(-6px);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}

body.auth-opening.auth-lifting .app-shell > .sidebar {
  animation: auth-rail .52s var(--ease) both;
}
body.auth-opening.auth-lifting .app-shell > .workspace {
  animation: auth-main .58s var(--ease) .05s both;
}
@keyframes auth-rail { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes auth-main { from { opacity: 0; transform: translateY(14px) scale(.994); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .auth-film {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
    grid-template-areas: "copy" "screen" "steps"; max-width: 680px; gap: 28px;
  }
  .auth-film-copy { padding-top: 0; }
  .auth-kicker { margin-bottom: 16px; }
  .auth-sub { max-width: none; margin-top: 16px; }
  .auth-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .auth-film { gap: 24px; }
  .auth-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 18px; }
  .auth-headline { font-size: clamp(32px, 9vw, 42px); }
  .auth-screen-meta { gap: 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-screen-frame { opacity: 1; transform: none; transition: none; }
  .auth-steps li { transition: none; transform: none !important; }
  .auth-steps li.is-active > i { animation: none; }
  .app-shell { transition: none; }
  body.auth-opening.auth-lifting .auth-gate { transition: opacity .01ms; transform: none; }
  body.auth-opening.auth-lifting .auth-screen-frame,
  body.auth-opening.auth-lifting .auth-film-copy,
  body.auth-opening.auth-lifting .auth-steps,
  body.auth-opening.auth-lifting .app-shell > .sidebar,
  body.auth-opening.auth-lifting .app-shell > .workspace { animation: none; transition: none; transform: none; }
}

/* 상단과 하단은 본문 폭에 맞춰 정렬합니다. */
.auth-gate-bar {
  position: relative; z-index: 1; min-height: 80px;
  padding: 20px max(24px, calc((100vw - 1240px) / 2));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--line);
}
.auth-gate-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.auth-gate-mark {
  width: 32px; height: 32px; border-radius: 8px;
}
.auth-gate-brand b { color: var(--ink); font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; }
.auth-gate-brand i {
  color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; font-style: normal;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.auth-gate-state {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
}
.auth-gate-state::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
body.auth-required .auth-gate-state { color: var(--amber); }
body.auth-required .auth-gate-state::before { background: var(--amber); animation: none; }

.auth-gate-stage {
  position: relative; z-index: 1; min-width: 0;
  padding: 48px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.auth-boot p { margin: 0; }

/* ── 회로 ─────────────────────────────────────────────────────────────────
   개폐기 하나가 이 화면의 전부입니다. 확인 중에는 닫혀 전류가 흐르고,
   실패하면 날이 젖혀지며 오른쪽 구간이 죽습니다. */
.auth-circuit { display: block; width: 100%; height: auto; overflow: visible; }
.auth-circuit line, .auth-circuit circle, .auth-circuit rect { fill: none; }
.ac-line { stroke: var(--ink-3); stroke-width: 2; transition: stroke .4s var(--ease); }
.ac-node { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.7; }
.ac-blade {
  stroke: var(--accent); stroke-width: 2.6;
  transform-box: fill-box; transform-origin: 0% 50%;
  transition: transform .5s var(--ease), stroke .4s var(--ease);
}
.ac-src-mark { fill: var(--accent); stroke: var(--accent); stroke-width: 1.6; }
.ac-load-mark { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.8; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.ac-lab {
  fill: var(--ink-3); stroke: none; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
}
.ac-lab.right { text-anchor: end; }
.ac-tag {
  fill: var(--ink-3); stroke: none; text-anchor: middle;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
}
/* 활선 표시. 길이를 정규화해서 어떤 폭에서도 같은 박자로 흐릅니다. */
.ac-flow {
  stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; opacity: .9;
  stroke-dasharray: 16 84; stroke-dashoffset: 100;
  animation: ac-run 2.6s linear infinite;
}
@keyframes ac-run { to { stroke-dashoffset: 0; } }

/* 확인 실패: 날이 열리고 부하 쪽이 죽습니다. */
body.auth-required .ac-blade { transform: rotate(-34deg); stroke: var(--ink-3); }
body.auth-required .ac-load { stroke: var(--line-strong); stroke-dasharray: 5 7; }
body.auth-required .ac-load-mark { stroke: var(--ink-3); }
body.auth-required .ac-flow { opacity: 0; animation: none; }

.auth-boot, .auth-blocked { display: none; }
body.auth-pending .auth-boot { display: block; }
body.auth-required .auth-blocked { display: block; }
.auth-boot p { margin: 0; color: var(--ink-2); font-size: 14px; }

/* 제목은 한 줄로 떨어져야 합니다. 본문만 읽기 좋은 폭으로 조입니다. */
.auth-blocked h1 { margin: 0; font-size: clamp(20px, 2.6vw, 27px); letter-spacing: -.03em; white-space: nowrap; }
.auth-blocked > p { max-width: 44ch; margin: 13px auto 0; color: var(--ink-2); font-size: 14px; line-height: 1.62; }
.auth-blocked-actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.auth-retry, .auth-sso-link {
  height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.auth-retry { color: #102b3b; background: var(--accent); }
.auth-retry:hover { background: var(--accent-hover); }
.auth-retry[data-busy] { opacity: .7; cursor: wait; }
.auth-sso-link { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 4%, transparent); }
.auth-sso-link:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.auth-sso-link[hidden] { display: none; }
.auth-retry svg, .auth-sso-link svg { width: 15px; height: 15px; }

/* 진단. 막힌 사람이 담당자에게 그대로 읽어 줄 수 있어야 합니다. */
.auth-diag {
  max-width: 44ch; margin: 28px auto 0; padding: 14px 16px; display: grid; gap: 9px; text-align: left;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.auth-diag > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.auth-diag dt { color: var(--ink-3); font-size: 11.5px; }
.auth-diag dd {
  margin: 0; overflow-wrap: anywhere; color: var(--ink);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
}

.auth-gate-foot {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 16px;
  padding: 20px max(24px, calc((100vw - 1240px) / 2));
  border-top: 1px solid var(--line);
}
.auth-gate-foot p { margin: 0 auto 0 0; color: var(--ink-3); font-size: 12px; }
.auth-gate :focus-visible { outline-color: var(--accent); }

@media (max-width: 520px) {
  /* 좁은 화면에서는 한 줄을 강제할 수 없습니다. */
  .auth-blocked h1 { white-space: normal; }
  .auth-gate-brand i { display: none; }
  .auth-gate-bar { min-height: 68px; padding-block: 16px; }
  .auth-gate-foot { flex-wrap: wrap; padding-block: 16px; gap: 12px; }
  .auth-gate-foot p { flex-basis: 100%; }
  .auth-gate-stage { padding-block: 28px; }
  .auth-circuit { margin-bottom: 24px; }
  .auth-blocked-actions { width: 100%; flex-direction: column; }
  .auth-retry, .auth-sso-link { justify-content: center; }
  .auth-diag > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  /* 상태는 날의 각도와 파선으로 이미 읽힙니다. 움직임은 필요 없습니다. */
  .ac-flow { animation: none; opacity: 0; }
  .auth-gate-state::before { animation: none; }
  .ac-blade, .ac-line, .ac-load-mark { transition: none; }
}

/* 작은 휴대폰에서도 건너뛰기 버튼이 첫 화면에 들어오게 합니다. */
@media (max-width: 620px) and (max-height: 740px) {
  .auth-gate-bar { min-height: 60px; padding-block: 12px; }
  .auth-gate-stage { padding-block: 16px; }
  .auth-film { gap: 16px; }
  .auth-kicker { margin-bottom: 12px; }
  .auth-headline { font-size: 28px; }
  .auth-sub { margin-top: 12px; font-size: 13px; line-height: 1.65; }
  .auth-screen { gap: 10px; }
  .auth-steps { padding-top: 14px; gap: 10px; }
  .auth-gate-foot { padding-block: 12px; gap: 8px; }
}

/* ── 오버레이 ───────────────────────────────────────────────────────────── */

.modal, .command-palette { position: fixed; z-index: 150; inset: 0; opacity: 0; pointer-events: none; transition: opacity .16s var(--ease); }
/* 세로가 짧은 화면에서 패널이 잘려 취소/공개 버튼에 닿지 못했습니다. 넘치면 스크롤합니다. */
.modal { display: grid; place-items: start center; padding: 16px; overflow-y: auto; }
.command-palette { display: grid; place-items: start center; padding: min(8vh, 64px) 16px 16px; }
.modal.open, .command-palette.open { opacity: 1; pointer-events: auto; }
.modal-backdrop, .command-backdrop, .panel-scrim { position: absolute; inset: 0; background: rgba(10, 16, 14, .45); }
.panel-scrim { position: fixed; z-index: 140; opacity: 0; pointer-events: none; transition: opacity .16s var(--ease); }
.panel-scrim.open { opacity: 1; pointer-events: auto; }

.modal-panel, .command-panel {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
}
.modal-panel {
  width: min(520px, calc(100vw - 32px)); margin-block: auto; padding: 22px;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  transform: translateY(8px); transition: transform .16s var(--ease);
}
.modal.open .modal-panel { transform: none; }
.modal-header { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-header span { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.modal-header h2 { margin-top: 7px; font-size: 26px; font-weight: 560; letter-spacing: -.035em; }
.modal-close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-3); background: var(--surface-3); border-radius: var(--r-sm); }
.modal-close svg { width: 15px; height: 15px; }
.modal form { display: grid; gap: 13px; }
.modal label { display: grid; gap: 8px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.modal input, .modal select { height: 44px; font-size: 16px; border-radius: 8px; }
.modal textarea { font-size: 16px; line-height: 1.75; border-radius: 8px; }
.modal textarea { min-height: 110px; }
.review-toggle {
  position: relative; min-height: 48px; padding: 9px 44px 9px 11px; display: flex !important; align-items: center; gap: 10px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.review-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.review-toggle span { display: grid; gap: 2px; }
.review-toggle b { font-size: 13px; font-weight: 600; }
.review-toggle small { color: var(--ink-3); font-size: 12px; }
.review-toggle > i { position: absolute; right: 11px; top: 50%; width: 30px; height: 18px; background: var(--line-strong); border-radius: 9px; transform: translateY(-50%); transition: background .14s var(--ease); }
.review-toggle > i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .14s var(--ease); }
.review-toggle input:checked ~ i { background: var(--accent); }
.review-toggle input:checked ~ i::after { transform: translateX(12px); }
.form-helper { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; color: var(--ink-3); font-size: 12px; }
.form-error { color: var(--danger); font-size: 13px; line-height: 1.6; }
.form-error:empty { display: none; }
.review-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.modal-actions { margin-top: 4px; display: flex; justify-content: flex-end; gap: 8px; }
.secondary-button, .primary-button { min-width: 88px; min-height: 44px; padding: 10px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; }
.secondary-button { color: var(--ink-2); background: var(--surface-3); }
.primary-button { color: #fff; background: var(--accent); }
.primary-button:hover { background: var(--accent-hover); }

.command-panel { display: flex; flex-direction: column; width: min(620px, calc(100vw - 32px)); max-height: min(680px, 84dvh); overflow: hidden; transform: translateY(-8px); transition: transform .16s var(--ease); }
.command-panel > :not(.command-results) { flex-shrink: 0; }
.command-palette.open .command-panel { transform: none; }
.command-panel > header { height: 52px; padding: 0 14px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.command-panel > header svg { width: 17px; height: 17px; color: var(--ink-3); }
.command-panel > header input { height: 100%; border: 0; outline: 0; background: none; font-size: 15px; }
.command-panel > header kbd, .command-panel > footer kbd { padding: 2px 6px; color: var(--ink-3); background: var(--surface-3); border-radius: 4px; font: 500 11px var(--font); }
.command-context { padding: 12px 14px 8px; }
.command-context > span { display: block; margin-bottom: 8px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.command-context > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.command-context button { min-height: 44px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--ink-2); background: var(--surface-3); border-radius: var(--r-sm); font-size: 13px; }
.command-context button:hover { color: var(--accent); background: var(--accent-soft); }
.command-context svg { width: 15px; height: 15px; }
.command-results { min-height: 0; max-height: 400px; padding: 4px 8px 10px; overflow: auto; overscroll-behavior: contain; }
.command-group-label { padding: 10px 6px 5px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.command-result { width: 100%; min-height: 48px; padding: 7px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; border-radius: var(--r-sm); text-align: left; }
.command-result:hover, .command-result.selected { background: var(--accent-soft); }
.command-result > i { width: 32px; height: 32px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); font-size: 11px; font-style: normal; font-weight: 700; }
.command-result > i svg, .command-empty svg { width: 16px; height: 16px; }
.command-result > span { min-width: 0; display: grid; }
.command-result strong { font-size: 13.5px; font-weight: 600; }
.command-result small { color: var(--ink-3); font-size: 12px; }
.command-result > em { color: var(--ink-3); font-size: 12px; font-style: normal; }
.command-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--ink-3); }
.command-empty span { color: var(--accent); }
.command-empty p { font-size: 13px; }
.command-panel > footer { height: 36px; padding: 0 14px; display: flex; align-items: center; gap: 16px; color: var(--ink-3); background: var(--surface-2); border-top: 1px solid var(--line); font-size: 12px; }
.command-panel > footer span { display: flex; align-items: center; gap: 5px; }

.floating-panel, .profile-drawer {
  position: fixed; z-index: 145; overflow: auto; background: var(--surface);
  transition: transform .2s var(--ease);
}
.floating-panel { top: 12px; right: 12px; bottom: 12px; width: min(380px, calc(100vw - 24px)); padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); transform: translateX(calc(100% + 24px)); }
.floating-panel.open { transform: none; }
.floating-panel > header { display: flex; align-items: flex-start; justify-content: space-between; }
.floating-panel > header span { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.floating-panel > header h2 { margin-top: 4px; font-size: 20px; }
.floating-panel > header button, .profile-drawer > header button { width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink-3); background: var(--surface-3); border-radius: var(--r-sm); }
.floating-panel > header svg, .profile-drawer > header svg { width: 15px; height: 15px; }
.panel-tabs { margin: 18px 0 8px; padding-bottom: 8px; display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.panel-tabs button { min-height: 44px; padding: 0 12px; color: var(--ink-2); border-radius: var(--r-sm); font-size: 13px; }
.panel-tabs button.active { color: var(--ink); background: var(--surface-3); font-weight: 600; }
.notification-list { display: grid; }
.notification-list > button { position: relative; width: 100%; min-height: 66px; padding: 12px 4px; display: grid; grid-template-columns: 32px 1fr; align-items: start; gap: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.notification-list > button:hover { background: var(--surface-2); }
.notification-list > button > span { display: grid; gap: 4px; }
.notification-list strong { font-size: 13px; font-weight: 600; }
.notification-list small { color: var(--ink-3); font-size: 12px; }
.notification-list b { position: absolute; right: 4px; top: 16px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.notification-symbol { width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink-2); }
.notification-symbol svg { width: 20px; height: 20px; }
.notification-empty { padding: 36px 16px; color: var(--ink-3); text-align: center; font-size: 13px; }
.floating-panel > footer button { width: 100%; height: 34px; margin-top: 14px; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); font-size: 13px; font-weight: 600; }

.profile-drawer { z-index: 155; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); border-left: 1px solid var(--line); transform: translateX(102%); }
.profile-drawer.open { transform: none; }
.profile-drawer > header { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding: 14px; display: flex; justify-content: space-between; }
.profile-hero { padding: 58px 24px 24px; text-align: center; color: var(--ink); background: var(--surface); }
.member-avatar-xl { position: relative; width: 66px; height: 66px; margin: 0 auto 12px; border-radius: var(--r-lg); font-size: 16px; }
.member-avatar-xl span { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; background: var(--accent); border: 3px solid var(--surface); border-radius: 50%; }
.online-pill { height: 22px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; font-size: 12px; }
.online-pill i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.profile-hero h2 { margin: 10px 0 4px; font-size: 20px; }
.profile-hero p { color: var(--ink-2); font-size: 13px; }
.drawer-actions { margin-top: 16px; display: flex; justify-content: center; gap: 8px; }
.drawer-actions .ghost-action { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); border-color: color-mix(in srgb, var(--ink) 4%, transparent); }
.profile-drawer-body { padding: 22px 24px 48px; }
.profile-drawer-body section { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.profile-drawer-body section:last-child { border-bottom: 0; }
.profile-drawer-body section > p { margin-top: 10px; color: var(--ink-2); font-size: 13px; }
.profile-drawer-body .tag-row { margin-top: 10px; }
.drawer-stats { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.drawer-stats > div { min-height: 60px; display: grid; place-items: center; align-content: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.drawer-stats strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.drawer-stats span { color: var(--ink-3); font-size: 12px; }
.current-work { width: 100%; min-height: 50px; margin-top: 8px; padding: 9px; display: grid; grid-template-columns: 32px 1fr 14px; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); text-align: left; }
.current-work:hover { border-color: var(--accent-line); }
.current-work > i { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--accent); border-radius: var(--r-sm); font-size: 11px; font-style: normal; font-weight: 700; }
.current-work > span { display: grid; }
.current-work strong { font-size: 13px; font-weight: 600; }
.current-work small { color: var(--ink-3); font-size: 12px; }
.current-work > svg { width: 14px; height: 14px; color: var(--ink-3); }
.account-session { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; padding: 14px !important; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.account-session > div { display: grid; gap: 6px; }
.account-session p { margin: 0 !important; display: grid; }
.account-session p b { font-size: 13px; }
.account-session p small { color: var(--ink-3); font-size: 12px; }
.account-session-actions { display: flex; gap: 6px; }
.account-session button { height: 30px; padding: 0 10px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; }
.account-session button:hover { color: var(--danger); border-color: var(--danger-line); }
.account-session-actions #myContentButton:hover { color: var(--accent); border-color: var(--accent-line); }

.toast {
  position: fixed; z-index: 200; left: 50%; bottom: 24px; min-height: 40px; padding: 0 16px;
  display: flex; align-items: center; gap: 10px; color: var(--ink); background: var(--surface);
  border-radius: var(--r); box-shadow: var(--shadow-pop);
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: .18s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.toast p { font-size: 13px; }

/* ── 서버 콘텐츠 모달과 첨부 (런타임 생성) ──────────────────────────────── */

.server-content-modal { position: fixed; z-index: 4600; inset: 0; display: grid; place-items: center; padding: 16px; opacity: 0; visibility: hidden; pointer-events: none; transition: .18s var(--ease); }
.server-content-modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.server-content-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 14, .5); }
.server-content-panel { position: relative; width: min(760px, 100%); min-width: 0; max-height: min(820px, calc(100dvh - 32px)); overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.server-content-panel > header { position: sticky; top: 0; z-index: 3; min-height: 82px; padding: 20px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.server-content-panel > header span { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.server-content-panel > header h2 { margin-top: 6px; font-size: 22px; }
.server-content-panel > header > div { min-width: 0; }
.server-content-panel > header button { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; color: var(--ink-3); background: var(--surface-3); border-radius: var(--r-sm); }
.server-content-panel > header button svg { width: 15px; height: 15px; }
.server-content-author { margin: 20px 24px 0; display: flex; align-items: center; gap: 10px; }
.server-content-author > i { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--accent); border-radius: 50%; font-size: 11px; font-style: normal; font-weight: 700; }
.server-content-author > span { display: grid; }
.server-content-author strong { font-size: 13px; font-weight: 600; }
.server-content-author small { color: var(--ink-3); font-size: 12px; }
.server-content-statusbar { margin: 16px 24px 0; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.server-content-statusbar > div { display: flex; align-items: center; gap: 8px; }
.server-content-statusbar small { color: var(--ink-3); font-size: 12px; }
.server-content-statusbar strong { font-size: 12.5px; }
.server-content-summary { margin: 16px 24px 0; padding: 14px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13.5px; }
.server-content-body { margin: 18px 24px 24px; color: var(--ink-2); white-space: pre-wrap; font-size: 14px; }
.server-content-manager { padding: 0 24px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.server-content-manager .danger { color: var(--danger); }
.server-content-manager > div { display: flex; flex-wrap: wrap; gap: 6px; }
.server-content-manager [data-content-report] { margin-left: auto; }
.server-content-panel > footer { min-height: 68px; margin-top: 20px; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.server-content-panel > footer > span { display: flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 12.5px; }
.server-content-panel > footer > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.server-content-panel > footer button { min-height: 44px; margin-left: auto; padding: 0 16px; color: #fff; background: var(--accent); border-radius: var(--r-sm); font-size: 13px; font-weight: 600; }
.server-version-list { margin: 0 24px 20px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.server-version-list > header { height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.server-version-list > header strong { font-size: 13px; }
.server-version-list > header button { color: var(--accent); font-size: 12.5px; }
.server-search-group { display: contents; }

.server-attachments { margin: 20px 24px 0; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.server-attachments > header { min-height: 54px; padding: 0 12px 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.server-attachments > header > div { display: grid; }
.server-attachments > header span { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.server-attachments > header strong { font-size: 13px; }
.server-attachments form button { min-height: 44px; padding: 0 11px; display: flex; align-items: center; gap: 6px; color: var(--accent); background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600; }
.server-attachments form button:hover { background: var(--accent-soft); }
.server-attachments form button:disabled { opacity: .55; cursor: wait; }
.server-attachments form button svg, .attachment-row > a svg, .attachment-row > button svg { width: 14px; height: 14px; }
#serverAttachmentList { min-height: 60px; padding: 6px; display: grid; gap: 2px; }
.attachment-row { min-height: 52px; padding: 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 44px 44px; align-items: center; gap: 9px; border-radius: var(--r-sm); }
.attachment-row:hover { background: var(--surface); }
.attachment-row:has(> a:last-child) { grid-template-columns: 34px minmax(0, 1fr) 44px; }
.attachment-file-mark { width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); font-size: 11px; font-weight: 700; }
.attachment-row > div { min-width: 0; display: grid; }
.attachment-row strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-row small { overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-row > a, .attachment-row > button { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); }
.attachment-row > a:hover { color: var(--accent); border-color: var(--accent-line); }
.attachment-row > button:hover { color: var(--danger); border-color: var(--danger-line); }
.attachment-empty, .attachment-loading { min-height: 72px; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.attachment-empty span { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; color: var(--ink-3); }
.attachment-empty svg { width: 22px; height: 22px; }
.attachment-empty.error span { color: var(--danger); }
.attachment-loading i { width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 다크 모드 ──────────────────────────────────────────────────────────── */

html.soft-dark,
html.soft-dark body.authenticated,
body.soft-dark,
body.soft-dark.authenticated {
  color-scheme: dark;
  --bg: #0b1822;
  --surface: #10232e;
  --surface-2: #142c36;
  --surface-3: #1a3944;
  --line: #26424d;
  --line-strong: #3d5c67;
  --ink: #e6f1f4;
  --ink-2: #b4c9d2;
  --ink-3: #9bb4c0;
  --accent: #9be1c7;
  --accent-hover: #c1f4dd;
  --accent-soft: #1c403f;
  --accent-line: #3c7166;
  --teal: #35c9a3;
  --teal-soft: #16302a;
  --teal-line: #265044;
  --orange: #f0954b;
  --orange-soft: #332214;
  --orange-line: #573a22;
  --amber: #d9ad5a;
  --amber-soft: #2c2517;
  --amber-line: #453a22;
  --danger: #ef8ca2;
  --danger-soft: #2e1a22;
  --danger-line: #4a2c37;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .3);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 34px rgba(0, 0, 0, .45);
  --shadow-pop: 0 18px 48px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
}
body.soft-dark .lp-hero-photo { filter: brightness(.58) saturate(.76) contrast(1.05); }
body.soft-dark .lp-hero-scrim {
  background:
    radial-gradient(circle at 72% 32%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 31%),
    linear-gradient(94deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 98%, transparent) 30%, color-mix(in srgb, var(--surface) 72%, transparent) 52%, color-mix(in srgb, var(--surface) 20%, transparent) 82%),
    linear-gradient(0deg, color-mix(in srgb, var(--surface) 98%, transparent) 0%, transparent 42%);
}
body.soft-dark .lp-twin-toolbar, body.soft-dark .lp-twin-steps button,
body.soft-dark .lp-twin-readout, body.soft-dark .lp-twin-trend,
body.soft-dark .lp-hero-briefing, body.soft-dark .lp-metric { backdrop-filter: blur(20px); }
body.soft-dark .lp-primary, body.soft-dark .lp-board-cta, body.soft-dark .auth-retry,
body.soft-dark .auth-submit,
body.soft-dark .lp-write,
body.soft-dark .avatar, body.soft-dark .account-avatar, body.soft-dark .avatar-token,
body.soft-dark .member-avatar-xl, body.soft-dark .chip-filter button.active,
body.soft-dark .current-work > i, body.soft-dark .auth-sso-mark, body.soft-dark .server-content-author > i,
body.soft-dark .server-content-panel > footer button, body.soft-dark .review-toggle input:checked ~ i {
  color: var(--surface);
}

/* 하지만 .avatar-token의 여섯 색은 테마와 무관한 고정 hex라, 어두운 글자를 얹으면
   2.45~3.62:1로 떨어집니다. 이 칩들만 흰 글자를 유지하면 4.85~7.16:1입니다. */
body.soft-dark .avatar-token, body.soft-dark .member-avatar-xl { color: #fff; }
body.soft-dark .topic-badge.solved { color: #6fd6a4; background: #162a20; box-shadow: inset 0 0 0 1px var(--line-strong); }
body.soft-dark .training-frame-shell { border-color: var(--line-strong); }
body.soft-dark .profile-hero, body.soft-dark .toast { background: #0e1615 !important; }
body.soft-dark .training-expired-notice .page-primary { color: #24200f; }
html.soft-dark .page-primary,
body.soft-dark .page-primary,
html.soft-dark .primary-button,
body.soft-dark .primary-button {
  color: #10232e;
  background: var(--accent);
}
html.soft-dark .page-primary:hover:not(:disabled),
body.soft-dark .page-primary:hover:not(:disabled),
html.soft-dark .primary-button:hover:not(:disabled),
body.soft-dark .primary-button:hover:not(:disabled) {
  color: #10232e;
  background: var(--accent-hover);
}
html.soft-dark .practice-launch .page-primary,
body.soft-dark .practice-launch .page-primary {
  color: #ffffff;
  background: #102e3d;
}
html.soft-dark .training-expired-notice .page-primary,
body.soft-dark .training-expired-notice .page-primary {
  color: #24200f;
}

/* ── 반응형 ─────────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  :root { --sidebar-w: 222px; }
  .sidebar-logo .brand-icon { width: 36px; height: 36px; }
  .sidebar-logo-name b { font-size: 17px; }
  .panel-primary { grid-column: 1 / -1; }
  .training-layout, .discussion-layout, .thread-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .training-scenario-card { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 0px; }
  /* 하단 고정 내비 뒤로 마지막 요소가 숨지 않도록 여백과 스크롤 여백을 함께 둡니다. */
  html { scroll-padding-bottom: 76px; }
  body { padding-bottom: 64px; }
  .sidebar {
    inset: auto 12px 12px; width: auto; height: auto; padding: 6px;
    flex-direction: column; align-items: stretch; max-height: calc(100dvh - 32px);
    border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 32px #102b3b26;
  }
  .sidebar-logo, .sidebar-bottom, .nav-divider { display: none; }
  .sidebar-nav { min-width: 0; display: none; margin: 0; overflow: auto; }
  .sidebar.nav-open .sidebar-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; }
  .sidebar-search { grid-column: 1 / -1; margin: 0; }
  .sidebar-search kbd { display: none; }
  .sidebar.nav-open .sidebar-bottom { display: grid; padding: 12px 6px; border-top: 1px solid var(--line); }
  .sidebar .nav-item { width: 100%; min-width: 0; justify-content: flex-start; }
  .mobile-nav-toggle { order: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; width: 100%; padding: 12px; text-align: left; font-size: 13px; }
  .mobile-nav-toggle > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav-toggle b { color: var(--accent); font-size: 12px; white-space: nowrap; }
  .mobile-nav-toggle b span { display: inline-block; margin-left: 5px; }
  .mobile-nav-toggle[aria-expanded="true"] b span { transform: rotate(45deg); }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .nav-item {
    width: auto; min-width: 0; min-height: 44px; padding: 10px 14px; flex: 0 0 auto;
    justify-content: center; gap: 8px; font-size: 14px; white-space: nowrap;
  }
  .operations-nav { margin: 0; border: 0; }
  .nav-item b { margin: 0; }
  .inner-topbar { padding: 0 16px; gap: 10px; }
  .topbar-search, .inner-search-trigger { display: none; }
  .training-topbar-copy small { display: none; }
  .page-container { width: calc(100% - 32px); padding: 22px 0 40px; }
  .page-heading-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-row > div:nth-child(odd) { border-left: 0; }
  .stat-row > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .training-layout, .discussion-layout, .thread-layout { grid-template-columns: minmax(0, 1fr); }
  .training-history, .thread-aside { position: static; }
  .training-scenario-card { grid-template-columns: 1fr; }
  .training-workspace-container { width: calc(100% - 24px); }
  .training-frame-shell { height: 66vh; min-height: 420px; }
  .training-preview-copy { grid-template-columns: 1fr; }
  .training-publish-form footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .discussion-highlight { padding: 16px; }
  .discussion-toolbar { flex-direction: column; align-items: stretch; }
  .chip-filter { overflow-x: auto; flex-wrap: nowrap; }
  .chip-filter button { white-space: nowrap; }
  .toolbar-select { width: 100%; }
  .discussion-feed article, .thread-question { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .command-context > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floating-panel { top: 8px; right: 8px; bottom: 72px; width: calc(100vw - 16px); }
  .toast { bottom: 76px; }
}

@media (max-width: 520px) {
  .stat-row > div:nth-child(odd) { border-left: 0 !important; }
  .training-expired-notice { grid-template-columns: 36px minmax(0, 1fr); }
  .training-expired-notice .page-primary { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 훈련 과제 · 이행률 · 고장 사례 · 실적관리 ───────────────────────────── */

.nav-divider {
  margin: 16px 12px 6px; padding: 0; display: block;
  color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.nav-divider:first-child { margin-top: 0; }
.panel-empty { min-height: 112px; padding: 28px 22px; display: grid; align-content: center; gap: 12px; color: var(--ink-3); font-size: 14px; line-height: 1.7; text-align: center; }


/* 내 훈련 */
.assignment-board { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
.assignment-board:has(.assignment-calendar[hidden]) { grid-template-columns: minmax(0, 1fr); }
.assignment-calendar { margin: 24px 0 24px 24px; padding: 22px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.assignment-calendar[hidden] { display: none; }
.assignment-calendar header { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.assignment-calendar header span { color: var(--ink-3); font-size: 12px; }
.assignment-calendar h3 { margin-top: 7px; font-size: 23px; font-weight: 550; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.calendar-navigation { display: flex; gap: 4px; }
.calendar-navigation button { width: 32px; height: 36px; color: var(--ink); border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 24px; }
.calendar-navigation button:hover { border-color: var(--accent); }
.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.calendar-week { margin-bottom: 12px; color: var(--ink-3); font-size: 12px; }
.calendar-days button { min-height: 72px; display: grid; align-content: center; justify-items: center; gap: 4px; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 8px; background: var(--surface); transition: background .16s, border-color .16s; }
.calendar-days b { font-size: 16px; font-weight: 550; font-variant-numeric: tabular-nums; }
.calendar-days small { min-height: 14px; font-size: 12px; }
.calendar-days button.is-done { background: var(--accent-soft); }
.calendar-days button:hover:not(:disabled) { border-color: var(--accent); }
.calendar-days button[aria-pressed="true"] { color: #fff; border-color: #173b4a; background: #173b4a; box-shadow: 0 3px 8px #173b4a18; }
.calendar-days button[aria-pressed="true"] small { color: #b8ecd7; }
.calendar-days button:disabled { color: var(--ink-3); border-color: transparent; background: none; cursor: default; }
.calendar-days button[aria-current="date"] b { text-decoration: underline; text-underline-offset: 4px; }
.assignment-calendar > footer { display: grid; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.assignment-calendar > footer p { color: var(--ink-3); font-size: 12px; line-height: 1.65; }
.assignment-calendar > footer button { min-height: 38px; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 7px; font-size: 14px; }
.assignment-calendar > footer button:disabled { color: var(--ink-3); border-color: var(--line); cursor: default; }
.assignment-calendar :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.assignment-list { min-height: 0; min-width: 0; align-self: start; }
.assignment-row { padding: 14px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.assignment-row + .assignment-row { border-top: 1px solid var(--line); }
.assignment-main { min-width: 0; }
.assignment-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.assignment-labels span:not(.status-chip) { padding: 2px 7px; color: var(--ink-2); background: var(--surface-3); border-radius: 4px; font-size: 11.5px; }
.assignment-main h3 { display: block; margin: 6px 0 2px; font-size: 18px; line-height: 1.5; letter-spacing: -.025em; overflow-wrap: anywhere; }
.assignment-main p { color: var(--ink-2); font-size: 13px; }
.assignment-context { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink-3); font-size: 13px; line-height: 1.7; }
.assignment-context span + span::before { content: '·'; margin-right: 10px; color: var(--ink-3); }
.assignment-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.assignment-footer > small { color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.assignment-row.overdue .assignment-footer > small { color: var(--danger); }
.assignment-metrics { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px 0 2px; border-top: 1px solid var(--line); }
.assignment-metrics dt { color: var(--ink-3); font-size: 12px; }
.assignment-metrics dd { margin: 6px 0 0; color: var(--ink); font-size: 20px; font-weight: 550; font-variant-numeric: tabular-nums; }
.assignment-metrics dd small { margin-left: 4px; color: var(--ink-3); font-size: 12px; font-weight: 400; }
.assignment-action { flex: 0 0 auto; }
.assignment-done { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13px; font-weight: 600; }
.assignment-done svg { width: 15px; height: 15px; }

.status-chip {
  min-height: 26px; padding: 3px 9px; display: inline-flex; align-items: center;
  color: var(--ink-2); background: var(--surface-3); border-radius: var(--r-sm);
  font-size: 14px; font-weight: 550;
}
.status-chip.completed { color: var(--accent); background: var(--accent-soft); }
.status-chip.in_progress { color: var(--amber); background: var(--amber-soft); }
.status-chip.overdue { color: var(--danger); background: var(--danger-soft); }
.status-chip.basic { color: var(--accent); background: var(--accent-soft); }
.status-chip.intermediate { color: var(--amber); background: var(--amber-soft); }
.status-chip.advanced { color: var(--danger); background: var(--danger-soft); }


/* 고장 사례 */
.fault-case-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.fault-case-card { padding: 16px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.fault-case-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fault-case-card > header time { color: var(--ink-3); font-size: 12.5px; }
.fault-case-card h3 { margin: 10px 0 0; font-size: 15px; }
.fault-case-facts { margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); }
.fault-case-facts > div { padding: 8px 10px; background: var(--surface); }
.fault-case-facts dt { color: var(--ink-3); font-size: 11.5px; }
.fault-case-facts dd { margin: 2px 0 0; overflow: hidden; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fault-case-card > p { margin-top: 12px; color: var(--ink-2); font-size: 13px; }
.fault-case-cause { color: var(--ink-3); font-size: 12.5px; }
.fault-case-cause b { color: var(--ink-2); }
.fault-case-card footer { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fault-case-card footer small { color: var(--ink-3); font-size: 12px; }

/* 실적관리 */
/* 왼쪽 칸에 대회가 한 건뿐이면 그 아래가 통째로 빈 흰 공간이 됩니다.
   점수 산식을 이 레일로 내려 두 칸의 무게를 맞춥니다. */
.competition-layout { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.competition-rail { display: grid; gap: 12px; align-content: start; }
.competition-rail .page-note { margin: 0; }
/* 목록이 짧을 때 빈 흰 공간이 남지 않도록 최소 높이는 불러오는 동안에만 잡습니다. */
.competition-list:has(.load-note), .competition-list:has(.panel-empty) { min-height: 200px; }
.competition-row { width: 100%; padding: 13px 16px; display: grid; gap: 4px; text-align: left; }
.competition-row + .competition-row { border-top: 1px solid var(--line); }
.competition-row:hover { background: var(--surface-2); }
.competition-row.active { background: var(--accent-soft); }
.competition-row .status-chip { justify-self: start; }
.competition-row strong { font-size: 14px; }
.competition-row small { color: var(--ink-2); font-size: 12.5px; }
.competition-row em { color: var(--ink-3); font-size: 12px; font-style: normal; }

.leaderboard { min-height: 240px; }
.leaderboard-head, .leaderboard-row {
  padding: 10px 16px; display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 56px 56px 92px 132px;
  align-items: center; gap: 10px;
}
.leaderboard-head { color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; }
.leaderboard-head span:not(:nth-child(2)), .leaderboard-row > span:not(.who) { text-align: right; font-variant-numeric: tabular-nums; }
.leaderboard-head span:first-child, .leaderboard-row .rank { text-align: center; }
.leaderboard-row + .leaderboard-row { border-top: 1px solid var(--line); }
.leaderboard-row { font-size: 13px; }
/* 점수는 숫자와 막대를 함께 둡니다. 막대 기준은 만점 1000점이라 대회끼리 비교됩니다. */
.leaderboard-row .score { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.leaderboard-row .score-track {
  flex: 1 1 auto; min-width: 0; height: 6px;
  background: var(--surface-3); border-radius: 3px; overflow: hidden;
}
.leaderboard-row .score-track > i { display: block; height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }
.leaderboard-row .score > b { flex: 0 0 auto; }
/* 내 줄로 이동했을 때 어디로 갔는지 한 번 알려 줍니다. */
.leaderboard-row.is-found { animation: lb-found 1.4s var(--ease); }
.leaderboard-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@keyframes lb-found {
  0%, 55% { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
  100% { background: var(--accent-soft); }
}
.lb-jump {
  padding: 3px 9px; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.lb-jump:hover { background: var(--surface); }
@media (prefers-reduced-motion: reduce) {
  .leaderboard-row.is-found { animation-duration: .01ms; }
}
.leaderboard-row.is-me { background: var(--accent-soft); }
.leaderboard-row .rank { font-size: 14px; font-weight: 700; }
.leaderboard-row .rank.top { color: var(--accent); }
.leaderboard-row .who { display: grid; min-width: 0; }
.leaderboard-row .who strong { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-row .who small { color: var(--ink-3); font-size: 12px; }
.leaderboard-row .score { font-size: 14px; font-weight: 700; }

/* 이행률 */
.report-controls {
  margin-bottom: 16px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: end; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.report-controls label { display: flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: 12.5px; }
.report-controls input, .report-controls select {
  height: 32px; padding: 0 10px; color: var(--ink); background-color: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); outline: 0; font-size: 13px;
}
.report-controls input:focus, .report-controls select:focus { border-color: var(--accent); }
.report-controls .ghost-action { height: 32px; }

/* 이행률 화면의 추이는 홈과 같은 .tr-* 선 차트를 씁니다. 이 상자는 자리만 잡습니다. */
.trend-chart { padding: 16px 18px 12px; }

.report-table { min-height: 120px; }
.report-head, .report-row {
  padding: 11px 16px; display: grid;
  grid-template-columns: minmax(0, 1.6fr) 64px 64px 80px minmax(120px, 1fr);
  align-items: center; gap: 12px;
}
.report-head { color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; }
.report-head span:not(:first-child), .report-row > span:not(.report-name) { text-align: right; font-variant-numeric: tabular-nums; }
.report-row + .report-row { border-top: 1px solid var(--line); }
.report-row { font-size: 13px; }
.report-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.report-ontime { display: none; }
.report-rate { display: flex; align-items: center; gap: 9px; }
.report-track {
  flex: 1 1 auto; min-width: 40px; height: 6px; overflow: hidden;
  background: var(--surface-3); border-radius: 3px;
}
.report-track i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.report-rate.warn .report-track i { background: var(--amber); }
.report-rate.bad .report-track i { background: var(--danger); }
.report-rate b { min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.report-rate.warn b { color: var(--amber); }
.report-rate.bad b { color: var(--danger); }

@media (max-width: 1180px) {
  .competition-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .assignment-row { flex-direction: column; gap: 12px; }
  .assignment-action { width: 100%; }
  .assignment-action .page-primary { width: 100%; }
  .fault-case-grid { grid-template-columns: minmax(0, 1fr); }
  .report-controls label { width: 100%; }
  .report-controls input, .report-controls select { flex: 1; }
  .leaderboard-head, .leaderboard-row { grid-template-columns: 36px minmax(0, 1fr) 64px; }
  .leaderboard-head span:nth-child(3), .leaderboard-head span:nth-child(4), .leaderboard-head span:nth-child(5),
  .leaderboard-row > span:nth-child(3), .leaderboard-row > span:nth-child(4), .leaderboard-row > span:nth-child(5) { display: none; }
  .report-head, .report-row { grid-template-columns: minmax(0, 1fr) 52px minmax(96px, 1fr); }
  .report-head span:nth-child(3), .report-head span:nth-child(4),
  .report-row > span:nth-child(3), .report-row > span:nth-child(4) { display: none; }
  /* 지운 열의 값은 버리지 않고 이름 아래 줄로 내립니다. */
  .report-name { white-space: normal; }
  .report-ontime {
    display: block; margin-top: 2px; color: var(--ink-3);
    font-size: 11.5px; font-style: normal; font-weight: 400;
  }
  .member-head, .member-row { grid-template-columns: minmax(0, 1fr) 44px 58px; }
  .member-head span:nth-child(2), .member-head span:nth-child(4),
  .member-row > span:nth-child(2), .member-row > span:nth-child(4) { display: none; }
}

/* ── 개인 대시보드 ───────────────────────────────────────────────────────
   위계: 제목 → 성과 히어로(가장 큰 숫자와 다음 행동) → 보조 카드 → 목록.
   같은 무게의 상자를 늘어놓지 않고, 크기와 여백으로 읽는 순서를 만듭니다. */

.me-page { padding-top: 28px; }

.me-intro {
  margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px 24px;
}
.me-intro h1 { margin: 7px 0 0; font-size: 28px; line-height: 1.28; letter-spacing: -.035em; }
.training-purpose { margin: 12px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; word-break: keep-all; }
.training-personal-status { margin: 10px 0 0; color: var(--ink-3); font-size: 14px; }
.me-card-list:has(.assignment-period-controls) { margin: 0 0 20px; }
.performance-scope { display: inline-block; margin-left: 12px; color: var(--accent); font-size: 18px; font-weight: 500; vertical-align: middle; }
.assignment-period-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.assignment-period-controls input { min-width: 145px; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); background: var(--surface); font: inherit; }
.assignment-period-controls button { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2); background: var(--surface); font: inherit; }
.assignment-period-controls button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.assignment-period-controls :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#assignmentPeriodSummary { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.me-org { color: var(--ink-2); font-size: 13.5px; }

/* 히어로: 이행률과 다음 행동을 한 덩어리로 붙여 시선을 한 번에 잡습니다. */
.me-hero {
  margin-bottom: 16px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 372px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.me-hero-perf {
  padding: 30px 32px; display: grid; grid-template-columns: 176px minmax(0, 1fr);
  align-items: center; gap: 34px;
}
.me-ring { position: relative; width: 176px; height: 176px; }
.me-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.me-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.me-ring-track { stroke: var(--surface-3); }
.me-ring-value {
  stroke: var(--accent); stroke-dasharray: 351.86; stroke-dashoffset: 351.86;
  transition: stroke-dashoffset 1s var(--ease), stroke .3s var(--ease);
}
.me-ring-value.warn { stroke: var(--amber); }
.me-ring-value.bad { stroke: var(--danger); }
.me-ring-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.me-ring-center strong { font-size: 46px; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.me-ring-center em { margin-left: 2px; font-size: 19px; font-style: normal; font-weight: 600; color: var(--ink-3); }
.me-ring-center small { margin-top: 7px; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.me-hero-figures { min-width: 0; }
.me-hero-note { margin: 6px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.me-compare { margin: 18px 0 0; display: grid; gap: 10px; }
.me-compare > div { display: grid; grid-template-columns: 46px minmax(0, 1fr) 52px; align-items: center; gap: 12px; }
.me-compare dt { color: var(--ink-3); font-size: 12px; }
.me-compare dd { margin: 0; height: 7px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.me-compare dd i { display: block; height: 100%; background: var(--line-strong); border-radius: 4px; transition: width .8s var(--ease); }
.me-compare > div.is-me dt { color: var(--ink); font-weight: 600; }
.me-compare > div.is-me dd i { background: var(--accent); }
.me-compare b { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.me-hero-chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.me-hero-chips span, .me-hero-chips button {
  height: 28px; padding: 0 11px; display: inline-flex; align-items: center;
  color: var(--ink-2); background: var(--surface-3); border-radius: 999px; font-size: 12.5px;
}
.me-hero-chips b { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.me-hero-chips button { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.me-hero-chips button:hover { background: var(--accent-line); }

/* 다음 과제: 히어로 오른쪽에 세로 구분선으로 붙습니다. */
.me-hero-next { padding: 26px 28px; display: flex; flex-direction: column; background: var(--surface-2); border-left: 1px solid var(--line); }
.me-next-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.me-next-top .me-eyebrow { display: inline-block; }
.me-dday {
  height: 24px; padding: 0 9px; display: inline-flex; align-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm);
  font-size: 12px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.me-dday.warn { color: var(--amber); background: var(--amber-soft); }
.me-dday.bad { color: var(--danger); background: var(--danger-soft); }
.me-hero-next h3 { margin: 13px 0 0; font-size: 18px; line-height: 1.36; letter-spacing: -.025em; }
.me-next-where { margin-top: 7px; color: var(--ink-2); font-size: 13px; }
.me-next-where b { color: var(--ink); font-weight: 600; }
.me-next-meta { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.me-next-meta span {
  height: 25px; padding: 0 9px; display: inline-flex; align-items: center;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 12px;
}
.me-hero-next .page-primary { width: 100%; margin-top: auto; justify-content: center; }
.me-next-instruction { margin-top: 12px; padding-left: 10px; color: var(--ink-2); border-left: 2px solid var(--accent-line); font-size: 12.5px; }
.me-next-done { margin: auto 0; display: grid; justify-items: center; gap: 9px; text-align: center; }
.me-next-done i { width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 50%; }
.me-next-done i svg { width: 20px; height: 20px; }
.me-next-done strong { font-size: 15px; }
.me-next-done small { max-width: 30ch; color: var(--ink-3); font-size: 12.5px; }

/* 보조 카드 */
.me-support { margin-bottom: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 16px; align-items: stretch; }
.me-card-timeline { display: flex; flex-direction: column; }
.me-card-side { display: flex; flex-direction: column; }
.me-card-side .me-score { flex: 1; display: grid; align-content: center; }
.me-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.me-card-list { margin-bottom: 8px; }
.me-card-head {
  min-height: 46px; padding: 12px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line);
}
.me-card-head-inner { border-top: 1px solid var(--line); }
.me-card-head h2 { margin: 0; font-size: 14.5px; letter-spacing: -.022em; }
.me-card-head > span { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.me-card-head > button { color: var(--accent); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* 훈련 이력 타임라인: 데이터가 적어도 성기게 보이지 않도록 사건 축으로 그립니다. */
.me-timeline { flex: 1; padding: 20px 26px 18px; display: flex; flex-direction: column; justify-content: center; }
.me-rail { position: relative; height: 168px; }
.me-rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 132px; height: 1px;
  background: linear-gradient(90deg, var(--line), var(--line-strong), var(--line));
}
.me-rail-month {
  position: absolute; top: 140px; transform: translateX(-50%);
  color: var(--ink-3); font-size: 11px; white-space: nowrap;
}
.me-rail-month i { position: absolute; left: 50%; top: -9px; width: 1px; height: 5px; background: var(--line-strong); }
/* 점이 축 위에 앉아야 사건으로 읽힙니다. 위에서 재면 라벨 높이만큼 어긋나므로
   아래에서 고정하고 라벨을 위로 쌓습니다. 바닥 168px - (축 132px + 점 반지름 6.5px) = 29.5px. */
.me-event { position: absolute; bottom: 29.5px; transform: translateX(-50%); display: grid; justify-items: center; }
.me-event-label {
  max-width: 190px; margin-bottom: 6px; padding: 5px 10px; overflow: hidden;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 11px; line-height: 1.35; letter-spacing: -.01em;
  text-align: center; text-overflow: ellipsis; white-space: nowrap;
}
.me-event-stem { width: 1px; background: var(--line-strong); }
.me-event-dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--surface);
}
.me-event.pending .me-event-dot { background: var(--surface); border: 2px solid var(--amber); }
.me-event.overdue .me-event-dot { background: var(--surface); border: 2px solid var(--danger); }
.me-event.pending .me-event-label { color: var(--ink-2); }
.me-timeline-legend {
  margin-top: 14px; padding-top: 13px; display: flex; flex-wrap: wrap; gap: 16px;
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px;
}
.me-timeline-legend span { display: inline-flex; align-items: center; gap: 6px; }
.me-timeline-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.me-timeline-legend i.pending { background: var(--surface); border: 2px solid var(--amber); }
.me-timeline-empty { padding: 30px 0; color: var(--ink-3); font-size: 13px; text-align: center; }

/* 고장 유형 분포 */
.me-mix { padding: 15px 18px 18px; display: grid; gap: 12px; }
.me-mix-row { display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: center; gap: 10px; }
.me-mix-row span { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.me-mix-row b { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.me-mix-bar { grid-column: 1 / -1; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.me-mix-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .8s var(--ease); }

/* 대회 기록 */
.me-score { padding: 16px 18px 18px; }
.me-score-card { display: grid; gap: 2px; }
.me-score-card strong { font-size: 34px; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.me-score-card strong em { margin-left: 3px; color: var(--ink-3); font-size: 15px; font-style: normal; font-weight: 600; }
.me-score-card span { margin-top: 7px; font-size: 13px; }
.me-score-card small { color: var(--ink-3); font-size: 12px; }

@media (max-width: 1180px) {
  .me-hero { grid-template-columns: minmax(0, 1fr); }
  .me-hero-next { border-left: 0; border-top: 1px solid var(--line); }
  .me-support { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .me-intro h1 { font-size: 23px; }
  .me-hero-perf { padding: 22px; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; text-align: center; }
  .me-hero-figures { width: 100%; }
  .me-compare > div { grid-template-columns: 44px minmax(0, 1fr) 50px; }
  .me-hero-chips { justify-content: center; }
  .me-hero-next { padding: 20px; }
  .me-timeline { padding: 26px 18px 16px; overflow-x: auto; }
  .me-rail { min-width: 520px; }
}

.leaderboard-actions { display: flex; align-items: center; gap: 12px; }
.leaderboard-actions > span { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.entry-pick { display: grid; gap: 8px; }
.entry-pick button {
  padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.entry-pick button:hover { border-color: var(--accent); background: var(--accent-soft); }
.entry-pick strong { display: block; font-size: 13.5px; }
.entry-pick small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 12px; }
.entry-pick code { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; }

/* 이행률 표: 행을 눌러 구성원별 이행으로 내려갑니다. */
button.report-row { width: 100%; text-align: left; background: none; }
button.report-row:hover { background: var(--surface-2); }
.report-outstanding {
  margin-left: 8px; padding: 1px 6px; color: var(--danger); background: var(--danger-soft);
  border-radius: 4px; font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap;
}
.member-table { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.member-head, .member-row {
  padding: 9px 12px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 44px 44px 58px;
  align-items: center; gap: 10px;
}
.member-head {
  position: sticky; top: 0; color: var(--ink-3); background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: 11.5px;
}
.member-head span:not(:first-child), .member-row > span:not(.member-name):not(.member-office) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.member-row + .member-row { border-top: 1px solid var(--line); }
.member-row { font-size: 12.5px; }
.member-row.is-outstanding .member-rate { color: var(--danger); font-weight: 700; }
.member-name { min-width: 0; display: grid; }
.member-name strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.member-name small { color: var(--ink-3); font-size: 11.5px; }
.member-office { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }

/* ── 첫 화면 히어로 ─────────────────────────────────────────────────────
   밝은 지면 위에 큰 두 톤 제목. 배경은 도면이 아니라 흐르는 선 다발입니다. */

.lp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(94vh, 900px); padding: 34px 0 24px;
  display: grid; grid-template-rows: 1fr auto; align-content: stretch;
  color: var(--ink); background: var(--surface);
  border-bottom: 1px solid var(--line);
}

/* ── 디지털 트윈 배경 ───────────────────────────────────────────────────── */
.lp-hero-media { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lp-hero-photo {
  position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px);
  object-fit: cover; object-position: 62% 52%;
  transform: translate3d(var(--hero-photo-x, 0px), var(--hero-photo-y, 0px), 0) scale(1.025);
  transition: transform .8s var(--ease), filter .25s var(--ease);
  will-change: transform;
}
.lp-hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 72% 32%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 31%),
    linear-gradient(94deg,
      var(--surface) 0%, color-mix(in srgb, var(--surface) 98%, transparent) 27%,
      color-mix(in srgb, var(--surface) 76%, transparent) 43%,
      color-mix(in srgb, var(--surface) 12%, transparent) 75%),
    linear-gradient(0deg, color-mix(in srgb, var(--surface) 96%, transparent) 0%, transparent 34%);
}

.lp-hero-inner {
  position: relative; z-index: 2; align-self: center;
  width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding-block: 24px;
}
.lp-kicker {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  color: var(--ink-3); font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
}
.lp-kicker > i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent);
}
.lp-kicker > b { color: var(--ink-2); font-weight: 600; letter-spacing: .04em; }
.lp-kicker > b::before { content: "·"; margin: 0 8px 0 4px; color: var(--line-strong); }

/* 표어가 아니라 상태를 말하는 자리라 예전만큼 클 이유가 없습니다.
   대신 아래 지표 띠에 자리를 내줍니다. */
.lp-hero h1 {
  margin: 16px 0 0; max-width: 17ch;
  font-size: clamp(30px, 3.1vw, 48px); line-height: 1.2;
  font-weight: 700; letter-spacing: -.045em; text-wrap: balance;
}
.lp-hero h1 em { font-style: normal; color: var(--accent); }
.lp-hero-briefing {
  width: fit-content; max-width: 44ch; margin-top: 18px; padding: 7px 11px;
  color: var(--ink-2); background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent); border-radius: 999px;
  box-shadow: var(--shadow-card); backdrop-filter: blur(14px);
  font-size: 12.5px; font-weight: 600;
}
.lp-hero-briefing em { color: var(--accent); font-style: normal; }
.lp-hero-lead { max-width: 46ch; margin-top: 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.62; }

.lp-hero-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-primary, .lp-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.lp-primary { color: #fff; background: var(--accent); box-shadow: var(--shadow-card); }
.lp-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.lp-ghost { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); }
.lp-ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.lp-primary svg, .lp-ghost svg { width: 16px; height: 16px; }

/* ── 첫 장면 디지털 트윈 ───────────────────────────────────────────────── */
.lp-twin {
  position: relative; min-width: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) 164px; gap: 14px;
  align-items: center;
  transform: translate3d(var(--hero-twin-x, 0px), var(--hero-twin-y, 0px), 0);
  transition: transform .8s var(--ease); will-change: transform;
}
.lp-twin::before {
  content: ""; position: absolute; inset: 4% -5% 8% 2%; border-radius: 48%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--surface) 38%, transparent), transparent 69%);
  filter: blur(18px); pointer-events: none;
}
.lp-twin-toolbar {
  position: relative; z-index: 4; grid-column: 1 / -1;
  min-height: 38px; padding: 0 10px 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  color: var(--ink-2); background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent); border-radius: 12px;
  box-shadow: var(--shadow-card); backdrop-filter: blur(18px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
}
.lp-twin-toolbar > span { display: inline-flex; align-items: center; gap: 8px; }
.lp-twin-toolbar > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 14%, transparent); }
.lp-twin-toolbar button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; color: var(--accent); font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.lp-twin-toolbar button:hover { background: var(--accent-soft); }
.lp-twin-toolbar svg { width: 13px; height: 13px; }

.lp-twin-diagram {
  position: relative; z-index: 2; width: 100%; height: auto; grid-column: 1;
  color: var(--ink-2);
  transform: translate3d(var(--hero-diagram-x, 0px), var(--hero-diagram-y, 0px), 0);
  transition: transform .8s var(--ease);
  filter: drop-shadow(0 6px 18px rgba(24, 33, 60, .09));
}
.lp-twin-sheet { fill: color-mix(in srgb, var(--surface) 94%, transparent); stroke: var(--line-strong); stroke-width: 1; }
.lp-twin-grid { stroke: none; opacity: .14; }
.lp-twin-label { fill: currentColor; stroke: none; font: 600 10px var(--mono); letter-spacing: .025em; }
.lp-twin-label.muted { font-size: 8px; opacity: .65; }
.lp-twin-secondary { fill: none; stroke: var(--teal); stroke-width: 1.6; }
.lp-twin-context { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1; opacity: .45; }
.lp-twin-feed, .lp-twin-route, .lp-twin-branch path { fill: none; vector-effect: non-scaling-stroke; }
.lp-twin-feed { stroke: var(--accent); stroke-width: 2.2; opacity: .72; }
.lp-twin-route { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 100; stroke-dashoffset: 68; opacity: .92; transition: stroke-dashoffset .75s var(--ease); }
.lp-twin-branch { opacity: .72; transition: opacity .3s var(--ease), color .3s var(--ease); }
.lp-twin-branch path, .lp-twin-branch rect, .lp-twin-branch circle { stroke: currentColor; stroke-width: 1.25; fill: var(--surface); vector-effect: non-scaling-stroke; }
.lp-twin-branch path { fill: none; }
.lp-twin-dot { fill: var(--surface) !important; stroke: var(--accent) !important; stroke-width: 2.4 !important; }
.lp-twin-beacon { fill: color-mix(in srgb, var(--accent) 68%, transparent); stroke: #fff; stroke-width: 2; transform-origin: center; transition: transform .7s var(--ease); animation: lp-twin-pulse 2.2s ease-in-out infinite; }
.lp-twin[data-stage="0"] [data-twin-stage="0"], .lp-twin[data-stage="1"] [data-twin-stage="1"], .lp-twin[data-stage="2"] [data-twin-stage="2"] { color: var(--accent); opacity: 1; }
.lp-twin[data-stage="0"] .lp-twin-beacon { transform: translate(-168px, 110px); }
.lp-twin[data-stage="1"] .lp-twin-route { stroke-dashoffset: 34; }
.lp-twin[data-stage="2"] .lp-twin-route { stroke-dashoffset: 0; }
.lp-twin[data-stage="2"] .lp-twin-beacon { transform: translate(168px, 110px); }

.lp-twin-steps { position: relative; z-index: 5; grid-column: 2; display: grid; gap: 8px; }
.lp-twin-steps button {
  position: relative; min-height: 60px; padding: 10px; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 7px;
  color: var(--ink-2); background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-strong) 78%, transparent); border-radius: 12px;
  box-shadow: var(--shadow-card); backdrop-filter: blur(18px); text-align: left;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.lp-twin-steps button + button::before { content: ""; position: absolute; right: 28px; top: -10px; height: 9px; border-left: 1px dashed var(--accent-line); }
.lp-twin-steps button:hover { transform: translateX(-4px); border-color: var(--accent-line); }
.lp-twin-steps button.is-active { color: var(--ink); background: color-mix(in srgb, var(--surface) 94%, transparent); border-color: var(--accent-line); box-shadow: var(--shadow-lift); transform: translateX(-6px); }
.lp-twin-steps button > i { width: 30px; height: 30px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 9px; }
.lp-twin-steps button > i svg { width: 15px; height: 15px; }
.lp-twin-steps button > span { min-width: 0; display: grid; }
.lp-twin-steps b { font-size: 12px; }
.lp-twin-steps small { color: var(--ink-3); font-size: 10px; white-space: nowrap; }
.lp-twin-steps em { color: var(--accent); font-family: var(--mono); font-size: 9px; font-style: normal; }

.lp-twin-readout {
  position: relative; z-index: 5; grid-column: 2; grid-row: 3; align-self: end; padding: 13px;
  color: var(--ink-2); background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--line-strong) 76%, transparent); border-radius: 12px;
  box-shadow: var(--shadow-card); backdrop-filter: blur(18px);
}
.lp-twin-readout > span { display: flex; align-items: center; gap: 8px; }
.lp-twin-readout > span i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent); }
.lp-twin-readout b { font-size: 11.5px; }
.lp-twin-readout small { display: block; margin: 4px 0 0 15px; color: var(--ink-3); font-size: 10.5px; }

@keyframes lp-twin-pulse { 50% { opacity: .55; r: 13px; } }

/* ── 지표 띠 ───────────────────────────────────────────────────────────────
   첫 화면이 허전했던 진짜 이유는 숫자가 아래로 흩어져 있었기 때문입니다.
   핵심 지표 네 개만 보여줍니다. */
.lp-metrics {
  position: relative; z-index: 3; width: min(1280px, calc(100% - 64px)); margin: 0 auto;
  display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 8px; background: transparent;
}
.lp-metric { padding: 14px 16px; display: grid; gap: 5px; align-content: start; min-width: 0; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); border-radius: 12px; box-shadow: var(--shadow-card); backdrop-filter: blur(16px); }
.lp-metric + .lp-metric { border-left: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); }
.lp-metric dt { color: var(--ink-3); font-size: 11.5px; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-metric dd { margin: 0; display: grid; gap: 7px; }
.lp-metric b {
  color: var(--ink); font-size: 23px; line-height: 1;
  font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.lp-metric.is-lead b { font-size: 30px; color: var(--accent); }
.lp-metric.is-warn b { color: var(--orange); }
.lp-metric-bar { display: block; height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.lp-metric-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 1s var(--ease); }
/* 마우스를 올린 칸만 살짝 떠오릅니다. 여덟 개가 붙어 있어 어디를 보는지 표시가 필요합니다. */
.lp-metric { transition: background .16s var(--ease); }
.lp-metric:hover { background: var(--surface-2); }

/* 구획 번호 */
.lp-section-head h2 { display: flex; align-items: baseline; gap: 12px; }
.lp-section-head h2 b {
  color: var(--accent); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) {
  .lp-metrics { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .lp-metric:nth-child(4n+1) { border-left: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); }
  .lp-metric:nth-child(n+5) { border-top: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); }
}
@media (max-width: 900px) {
  .lp-hero { min-height: 0; padding: 30px 0 18px; }
  .lp-hero-inner { width: calc(100% - 32px); }
  .lp-hero-scrim { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent) 0%, color-mix(in srgb, var(--surface) 72%, transparent) 50%, var(--surface) 100%); }
  .lp-hero-photo { object-position: 68% 64%; opacity: .72; }
  .lp-metrics { width: calc(100% - 32px); }
  .lp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-metric:nth-child(odd) { border-left: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); }
  .lp-metric:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); }
}
@media (max-width: 520px) {
  .lp-metrics { grid-template-columns: minmax(0, 1fr); }
  .lp-metric + .lp-metric { border-left: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); border-top: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent); }
  .lp-twin { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lp-twin-diagram { grid-column: 1; width: 100%; }
  .lp-twin-steps { grid-column: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-twin-steps button { min-height: 76px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
  .lp-twin-steps small, .lp-twin-steps em, .lp-twin-steps button + button::before { display: none; }
  .lp-twin-steps button.is-active, .lp-twin-steps button:hover { transform: none; }
  .lp-twin-readout { grid-column: 1; grid-row: 4; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero-photo, .lp-twin, .lp-twin-diagram { transform: none !important; transition: none; }
  .lp-twin-route, .lp-twin-beacon { animation: none; }
  .lp-metric-bar > i { transition: none; }
}

/* ── 조작반: 단선도를 배경 그림이 아니라 조작 가능한 기기로 다룹니다 ─────
   전원에서 닫힌 기기를 타고 퍼지는 급전 계산이 색을 정합니다. CSS는 상태를
   그릴 뿐이고, 어떤 도체가 살아 있는지는 script.js가 매 조작마다 계산합니다. */

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.lp-board-note { color: var(--ink-3); font-size: 12.5px; }
.lp-board {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(258px, 306px);
  overflow: hidden; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .3s var(--ease);
}
.lp-board[data-state="restored"] { border-color: var(--accent-line); }
.lp-board-main {
  --surface: #111d30; --line: #25374d; --line-strong: #51627c;
  --ink: #eff3fc; --ink-2: #c4cee0; --ink-3: #a6b5cb;
  --accent: #b1a8ff; --accent-line: #665d9e; --teal: #79d6be; --amber: #f1c778;
  min-width: 0; display: flex; flex-direction: column; color: var(--ink);
  background: linear-gradient(135deg, #17253c, var(--surface));
}
.lp-board-head {
  padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--ink-3); font-size: 11.5px; letter-spacing: .05em;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.lp-board-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.lp-board-name i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }
.lp-board[data-state="restored"] .lp-board-name { color: var(--accent); }
.lp-board-clock { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.lp-board-scroll { flex: 1; padding: 20px 12px 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; background-image: radial-gradient(#53668038 .65px, transparent .65px); background-size: 22px 22px; }
.lp-board-svg { display: block; width: 100%; max-width: 920px; height: auto; margin-inline: auto; }
.lp-board-svg :is(line, path, circle, .sym) { vector-effect: non-scaling-stroke; }
/* 선과 기호는 클릭 대상이 아닙니다. 44px 히트 영역만 포인터를 받습니다. */
.lp-board-svg * { pointer-events: none; }
/* 전역 svg 규칙이 stroke: currentColor / 1.7을 겁니다. 끄지 않으면
   흰 사각형 아홉 개가 도면 위에 그려집니다. */
.lp-hit { fill: transparent; stroke: none; pointer-events: fill; cursor: pointer; }

.lp-bus { stroke: var(--line-strong); stroke-width: 3.2; transition: stroke .22s var(--ease); }
.lp-seg { stroke: var(--ink-3); stroke-width: 1.9; transition: stroke .22s var(--ease); }
.lp-bus.is-live, .lp-seg.is-live { stroke: var(--accent); }
.lp-bus.is-dead, .lp-seg.is-dead { stroke: var(--line-strong); stroke-dasharray: 5 7; }
.lp-coil { stroke: var(--teal); stroke-width: 1.8; fill: none; transition: stroke .22s var(--ease); }
.lp-coil.is-dead { stroke: var(--line-strong); }
.lp-lab { fill: var(--ink-3); stroke: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; }
.lp-lab.on { fill: var(--ink-2); }

/* 활선 흐름. pathLength="100"으로 길이를 정규화했기 때문에 24단위짜리 짧은
   구간과 540단위짜리 모선이 같은 박자로 흐릅니다. 정규화 없이 공용 dasharray를
   쓰면 짧은 도체는 깜빡이고 긴 도체는 기어갑니다. */
.lp-flow {
  stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; fill: none; opacity: 0;
  stroke-dasharray: 14 86; stroke-dashoffset: 100;
  animation: lp-run 4.6s linear infinite; animation-play-state: paused;
  transition: opacity .22s var(--ease);
}
.lp-flow.is-live { opacity: .9; }
/* 화면 밖이면 멈춥니다. 일이 늘어나는 게 아니라 줄어드는 최적화입니다. */
.lp-board.is-onscreen .lp-flow.is-live { animation-play-state: running; }
@keyframes lp-run { to { stroke-dashoffset: 0; } }
/* 전부 같은 순간에 출발하면 흐름이 아니라 점멸로 읽힙니다. */
.lp-flow[data-node="busA"] { animation-delay: -.6s; }
.lp-flow[data-node="busB"] { animation-delay: -2.9s; }
.lp-flow[data-node="dl1out"] { animation-delay: -1.4s; }
.lp-flow[data-node="dl2out"] { animation-delay: -3.5s; }
.lp-flow[data-node="dl3mid"] { animation-delay: -2.2s; }
.lp-flow[data-node="dl4out"] { animation-delay: -4.1s; }
.lp-flow[data-node="dl5out"] { animation-delay: -1.9s; }

.lp-dev { outline: none; }
.sym { fill: var(--accent); stroke: var(--accent); stroke-width: 1.6; transition: fill .16s var(--ease), stroke .16s var(--ease); }
.lp-dev[data-state="open"] .sym { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.9; }
.lp-dev[data-state="tripped"] .sym { fill: var(--surface); stroke: var(--amber); stroke-width: 2; }
.lp-node { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.6; }
/* 단로기 날이 실제로 젖혀집니다. 이 화면에서 가장 확실한 조작 감각입니다. */
.lp-blade {
  stroke: var(--accent); stroke-width: 2.4; transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform .24s var(--ease), stroke .24s var(--ease);
}
.lp-dev[data-state="open"] .lp-blade { transform: rotate(-38deg); stroke: var(--ink-3); }

/* 초점 표시는 제도 도면의 선택 괄호입니다. SVG outline은 브라우저마다 다릅니다. */
.lp-focus { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 6 4; opacity: 0; transition: opacity .12s var(--ease); }
.lp-dev:focus-visible .lp-focus { opacity: 1; }
.lp-dev:focus-visible { outline: none; }

/* 하나를 집으면 나머지 계통이 물러납니다. 흐름 오버레이도 같이 물러나야
   합니다. 빠뜨리면 흐릿한 도체 위로 민트 선만 선명하게 떠오릅니다. */
.lp-board-svg.is-probing .lp-seg, .lp-board-svg.is-probing .lp-bus,
.lp-board-svg.is-probing .lp-coil, .lp-board-svg.is-probing .lp-lab,
.lp-board-svg.is-probing .lp-flow, .lp-board-svg.is-probing .lp-spark,
.lp-board-svg.is-probing .lp-dev { opacity: .58; transition: opacity .14s var(--ease); }
.lp-board-svg.is-probing .lp-lab { opacity: .8; }
.lp-board-svg.is-probing .lp-flow.is-live.is-probed { opacity: .9; }
.lp-board-svg.is-probing .is-probed { opacity: 1; }

.lp-spark { stroke: var(--amber); stroke-width: 2.2; stroke-linejoin: round; fill: none; transition: stroke .3s var(--ease); }
.lp-halo { fill: none; stroke: var(--amber); stroke-width: 1.3; opacity: 0; animation: lp-halo 3.4s ease-in-out infinite; animation-play-state: paused; }
.lp-board.is-onscreen .lp-halo { animation-play-state: running; }
.lp-board-svg.is-isolated .lp-halo { animation: none; opacity: 0; }
.lp-board-svg.is-isolated .lp-spark { stroke: var(--amber); }
@keyframes lp-halo { 0%, 100% { opacity: 0; r: 15; } 42% { opacity: .55; r: 22; } 72% { opacity: 0; r: 29; } }

/* 인터록 거부: 기기가 거부하는 감각. 1회 재생 후 클래스가 제거됩니다. */
.lp-dev.is-refused { animation: lp-refuse .17s linear; }
@keyframes lp-refuse { 25% { transform: translateX(1.7px); } 60% { transform: translateX(-1.7px); } 100% { transform: none; } }

/* 복구 확인 스윕. pathLength 정규화라 꺾인 경로 전체를 정확히 한 번 지납니다. */
.lp-verify {
  fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 18 82; stroke-dashoffset: 100;
}
.lp-board[data-state="restored"] .lp-verify { animation: lp-verify 1.1s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes lp-verify { 0% { opacity: .95; stroke-dashoffset: 100; } 100% { opacity: 0; stroke-dashoffset: -18; } }

.lp-board-hint { margin: 4px 16px 14px; color: var(--ink-3); font-size: 12px; line-height: 1.5; }

.lp-board-side {
  display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: var(--surface-2); border-left: 1px solid var(--line);
}
.lp-annunciator {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.lp-annunciator li {
  position: relative; padding: 9px 11px 9px 14px; display: grid; gap: 2px;
  background: var(--surface-2); transition: background-color .5s var(--ease);
}
.lp-annunciator li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--line-strong); }
.lp-annunciator b { color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.lp-annunciator span { color: var(--ink-2); font-size: 11.5px; }
.lp-annunciator em {
  position: absolute; top: 9px; right: 11px; color: var(--accent);
  font-family: var(--mono); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .09em;
}
.lp-annunciator li[data-state="normal"]::before { background: var(--accent); }
.lp-annunciator li[data-state="trip"] { background: var(--amber-soft); }
.lp-annunciator li[data-state="trip"]::before { background: var(--amber); }
.lp-annunciator li[data-state="trip"] em { color: var(--amber); }
/* 실제 경보램프는 부드럽게 사라지지 않습니다. */
.lp-annunciator li[data-state="trip"]::before { animation: lp-lamp 1.375s steps(1, end) infinite; }
.lp-annunciator li[data-state="standby"]::before, .lp-annunciator li[data-state="open"]::before { background: var(--ink-3); }
.lp-annunciator li[data-state="standby"] em, .lp-annunciator li[data-state="open"] em { color: var(--ink-3); }
.lp-annunciator li[data-state="interlock"] { background: var(--amber-soft); }
.lp-annunciator li[data-state="interlock"]::before { background: var(--amber); }
.lp-annunciator li[data-state="interlock"] em { color: var(--amber); }
@keyframes lp-lamp { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .16; } }
.lp-annunciator li[data-flash] { background: var(--accent-soft); transition-duration: 0s; }
.lp-annunciator li[data-flash="trip"], .lp-annunciator li[data-flash="interlock"] { background: var(--amber-soft); }

.lp-board-readout {
  margin: 0; min-height: 56px; display: flex; align-items: center;
  padding: 10px 12px; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 12.5px; line-height: 1.5;
}
.lp-board-readout[data-mode="refuse"] { color: var(--amber); border-left-color: var(--amber); }
.lp-board-readout[data-mode="win"] { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.lp-board-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-board-counters { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lp-board-reset {
  height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 4%, transparent); border-radius: var(--r-sm); font-size: 12px;
}
.lp-board-reset:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lp-board-reset svg { width: 13px; height: 13px; }
.lp-board-cta {
  height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--surface); background: var(--accent); border-radius: var(--r-sm); font-size: 13px; font-weight: 700;
}
.lp-board-cta:hover { background: var(--accent-hover); }
.lp-board-cta svg { width: 15px; height: 15px; }
.lp-board-cta[hidden] { display: none; }
.lp-hero :focus-visible, .lp-board :focus-visible { outline-color: var(--accent); }

@media (max-width: 1080px) {
  .lp-board { grid-template-columns: minmax(0, 1fr); }
  .lp-board-side { border-left: 0; border-top: 1px solid var(--line); }
  .lp-annunciator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  /* 도면을 뭉개는 대신 조작반 안에서 가로로 스크롤합니다.
     44px 히트 영역과 10.5px 레터링이 실제 크기로 유지됩니다. */
  .lp-board-svg { width: 620px; max-width: none; }
  .lp-board-note { display: none; }
}
@media (max-width: 520px) {
  .lp-annunciator { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  /* 흐름과 스윕은 장식입니다. 상태는 색과 파선으로 이미 읽힙니다. */
  .lp-flow, .lp-verify { animation: none; opacity: 0; }
  .lp-halo { animation: none; opacity: .5; }
  .lp-board-svg.is-isolated .lp-halo { opacity: 0; }
  .lp-dev.is-refused { animation: none; }
  .lp-annunciator li[data-state="trip"]::before { animation: none; opacity: 1; }
}

/* ── 공식 홈 구성 ───────────────────────────────────────────────────────────
   대시보드와 홈페이지를 가르는 것은 장식이 아니라 문장의 방향입니다.
   대시보드는 "당신의 이행률은 87%입니다"라고 보고하고,
   홈페이지는 "훈련을 시작하려면 여기로"라고 보냅니다. */

/* 오늘 할 일 — 통계가 아니라 링크. 할 일이 없으면 구획째 감춥니다. */
.lp-errands-section { margin-top: 0; }
.lp-errand-date { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* auto-fit이라 카드가 둘이든 넷이든 빈 칸이 남지 않습니다. */
.lp-errands { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 10px; }
.lp-errand {
  position: relative; padding: 16px 34px 16px 17px; display: grid; gap: 7px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; transition: border-color .16s var(--ease), background .16s var(--ease);
}
.lp-errand:hover { background: var(--surface-2); border-color: var(--accent-line); }
.lp-errand[data-tone="overdue"] { border-color: var(--danger-line); }
.lp-errand-tag { color: var(--ink-3); font-size: 12px; letter-spacing: .02em; }
.lp-errand[data-tone="overdue"] .lp-errand-tag { color: var(--danger); }
.lp-errand[data-tone="soon"] .lp-errand-tag { color: var(--amber); }
.lp-errand[data-tone="open"] .lp-errand-tag { color: var(--accent); }
.lp-errand strong { font-size: 16px; font-weight: 550; letter-spacing: -.02em; line-height: 1.5; }
.lp-errand strong b { font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-errand::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid var(--line-strong); border-top: 1.5px solid var(--line-strong);
  transform: rotate(45deg); transition: border-color .16s var(--ease);
}
.lp-errand:hover::after { border-color: var(--accent); }

/* 바로가기 — 자리가 바뀌지 않아야 손이 기억합니다. */
/* 운영 권한이 없으면 타일 8개 중 5개만 보입니다. 5와 8은 같은 열 수로 나누어
   떨어지지 않으므로, 열 수를 보이는 개수에 맞춰 JS가 정합니다(--quick-cols). */
.lp-quick {
  display: grid; gap: 10px;
  grid-template-columns: repeat(var(--quick-cols, 4), minmax(0, 1fr));
}
.lp-quick > button {
  position: relative; padding: 15px 30px 15px 16px; text-align: left;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.lp-quick > button:hover { border-color: var(--accent-line); background: var(--surface-2); }
.lp-quick > button > i {
  width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm);
}
.lp-quick > button > i svg { width: 17px; height: 17px; }
.lp-quick > button > span { min-width: 0; display: grid; gap: 2px; }
.lp-quick b { font-size: 13.5px; letter-spacing: -.02em; }
.lp-quick small { overflow: hidden; color: var(--ink-3); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.lp-quick > button::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid var(--line-strong); border-top: 1.5px solid var(--line-strong);
  transform: rotate(45deg); transition: border-color .16s var(--ease);
}
.lp-quick > button:hover::after { border-color: var(--accent); }

/* 조작 해설 — 복구를 마치면 형제 선택자만으로 세 단계에 불이 들어옵니다.
   JS는 한 줄도 쓰지 않습니다. */
.lp-debrief {
  margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .3s var(--ease);
}
.lp-debrief > li { padding: 18px 20px 20px; list-style: none; }
.lp-debrief > li + li { border-left: 1px solid var(--line); }
.lp-debrief-step {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
}
/* 단계 표시는 범용 아이콘이 아니라 개폐 기기 기호입니다 — 닫히면 채워집니다. */
.lp-debrief-step i {
  width: 11px; height: 11px; flex: 0 0 auto; background: transparent;
  box-shadow: inset 0 0 0 1.6px var(--line-strong);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.lp-debrief strong { display: block; margin-top: 11px; font-size: 15px; letter-spacing: -.022em; }
.lp-debrief p { margin-top: 7px; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.lp-debrief code {
  padding: 1px 5px; border-radius: var(--r-sm);
  color: var(--ink); background: var(--surface-3); font-family: var(--mono); font-size: 12px;
}
.lp-board[data-state="restored"] ~ .lp-board-pair .lp-debrief { border-color: var(--accent-line); }
.lp-board[data-state="restored"] ~ .lp-board-pair .lp-debrief .lp-debrief-step { color: var(--accent); }
.lp-board[data-state="restored"] ~ .lp-board-pair .lp-debrief .lp-debrief-step i {
  background: var(--accent); box-shadow: inset 0 0 0 1.6px var(--accent);
}
.lp-board[data-state="restored"] ~ .lp-board-pair .lp-debrief > li:nth-child(2) .lp-debrief-step i { transition-delay: .12s; }
.lp-board[data-state="restored"] ~ .lp-board-pair .lp-debrief > li:nth-child(3) .lp-debrief-step i { transition-delay: .24s; }

/* ── 사진 밴드 ──────────────────────────────────────────────────────────────
   모서리가 둥근 인셋 밴드입니다. 사진은 <img src>가 아니라 배경이라
   파일이 없으면 제도 격자 지면이 그대로 남고 깨진 상자가 나오지 않습니다.
   글자 대비는 사진이 아니라 스크림이 책임집니다. */
.lp-band {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 44px 0 40px; min-height: 340px; display: flex; align-items: center;
  color: #fff; background: #4d5670; border-radius: var(--r-lg);
}
.lp-band::before {
  content: ""; position: absolute; inset: 0; z-index: -3; opacity: .5;
  background-image:
    linear-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}
.lp-band-photo {
  position: absolute; inset: 0; z-index: -2; display: block;
  background-position: center 42%; background-size: cover; background-repeat: no-repeat;
  filter: saturate(.86) contrast(1.03);
}
.lp-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(92deg, rgba(38, 44, 62, .92) 0%, rgba(38, 44, 62, .74) 38%, rgba(38, 44, 62, .18) 76%),
    linear-gradient(0deg, rgba(38, 44, 62, .5) 0%, transparent 46%);
}
.lp-band-inner { position: relative; padding: 46px clamp(24px, 4vw, 56px); max-width: min(560px, 62%); }
.lp-band-eyebrow { display: block; color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 500; }
.lp-band h2 {
  margin: 18px 0 0; color: #fff;
  font-size: clamp(24px, 3.1vw, 36px); line-height: 1.34; letter-spacing: -.035em; font-weight: 700;
}
.lp-band-rule { display: block; width: 54px; height: 2px; margin-top: 26px; background: rgba(255, 255, 255, .6); }
.lp-band-caption {
  position: absolute; right: 20px; bottom: 16px;
  /* .62로는 어두운 막 위에서 3.96:1이라 기준 미달입니다. 눈금 글씨라 작아서 더 그렇습니다. */
  color: rgba(255, 255, 255, .84); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
}

/* ── 현장 소식 ─────────────────────────────────────────────────────────────
   번호 배지 · 라벨 · 화살표 / 제목 / 사진 순서. 사진이 없으면 회색 상자가
   아니라 제도 도면 표제란이 그려집니다. */
.lp-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-field {
  padding: 18px 18px 18px; display: grid; gap: 14px; text-align: left;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-lg);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.lp-field:nth-child(2) { background: var(--teal-soft); border-color: var(--teal-line); }
.lp-field:nth-child(3) { background: var(--orange-soft); border-color: var(--orange-line); }
.lp-field:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.lp-field-head { display: flex; align-items: center; gap: 10px; }
.lp-field-no {
  min-width: 26px; height: 24px; display: grid; place-items: center; padding: 0 7px;
  color: var(--ink-2); background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-radius: 7px; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
}
.lp-field-label { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.lp-field-go {
  width: 30px; height: 30px; margin-left: auto; display: grid; place-items: center;
  color: var(--ink); background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-radius: 50%; transition: background .16s var(--ease), transform .16s var(--ease);
}
.lp-field-go svg { width: 14px; height: 14px; }
.lp-field:hover .lp-field-go { background: var(--surface); transform: translateX(2px); }
.lp-field strong { font-size: 17px; font-weight: 700; letter-spacing: -.03em; line-height: 1.45; }

.lp-plate {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); border-radius: var(--r);
}
.lp-plate::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 8px 8px;
}
.lp-plate-art { position: absolute; inset: 12% 14%; width: 72%; height: 76%; color: var(--line-strong); opacity: .9; }
/* non-scaling-stroke가 없으면 확대 배율만큼 획이 두꺼워져 제도선이 아니라
   굵은 낙서로 보입니다. */
.lp-plate-art line, .lp-plate-art rect, .lp-plate-art circle {
  fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke;
}
.lp-plate-cap {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 8px;
  color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
}
/* 사진이 들어오면 표제란은 물러나고 사진이 자리를 전부 차지합니다. */
.lp-plate[data-filled]::before, .lp-plate[data-filled] .lp-plate-art,
.lp-plate[data-filled] .lp-plate-cap { display: none; }
.lp-plate-photo {
  position: absolute; inset: 0; display: block;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: saturate(.88) contrast(1.04);
}

/* ── 문의·고지 ─────────────────────────────────────────────────────────── */
.lp-desk { margin-top: 38px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-desk-card { padding: 18px 20px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lp-desk-card h3 { margin: 0 0 13px; display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: -.02em; }
.lp-desk-card h3 svg { width: 15px; height: 15px; color: var(--accent); }
.lp-desk-card dl { margin: 0; display: grid; gap: 12px; }
.lp-desk-card dt { color: var(--ink-3); font-size: 11.5px; }
.lp-desk-card dd { margin: 3px 0 0; font-size: 13px; line-height: 1.5; }
.lp-desk-card p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.lp-desk-notice { background: var(--accent-soft); border-color: var(--accent-line); }
.lp-desk-notice p b { color: var(--ink); font-weight: 700; }

/* ── 반응형 ─────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .lp-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* 히어로 하단 여백이 0이라 음수 마진을 쓰면 마지막 줄과 겹칩니다. */
  .lp-errands-section { margin-top: 0; }
  .lp-band { margin: 32px 0 30px; min-height: 260px; }
  .lp-band-inner { max-width: none; padding: 30px 22px; }
  .lp-debrief { grid-template-columns: minmax(0, 1fr); }
  .lp-debrief > li + li { border-left: 0; border-top: 1px solid var(--line); }
  .lp-quick { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lp-fields { grid-template-columns: minmax(0, 1fr); }
  .lp-plate { max-width: 420px; }
  .lp-desk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .lp-band { min-height: 230px; }
  .lp-quick { grid-template-columns: minmax(0, 1fr) !important; }
  .lp-errands { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-debrief .lp-debrief-step i { transition-delay: 0s !important; }
}

/* 본문 */
.home-page .lp-body { width: min(1600px, calc(100% - clamp(32px, 4vw, 80px))); padding-top: 40px; }
.lp-section + .lp-section { margin-top: 40px; }
.lp-section-head {
  margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 12px;
}
.lp-section-head h2 { margin: 6px 0 0; font-size: 25px; font-weight: 560; letter-spacing: -.035em; }
.lp-section-head > button:not(.lp-write) {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 14px; font-weight: 550;
}
.lp-section-head > button svg { width: 14px; height: 14px; }
.lp-write {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px;
  color: #fff; background: var(--accent); border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
}
.lp-write:hover { background: var(--accent-hover); }
.lp-write svg { width: 14px; height: 14px; }

/* ── 촘촘한 배치 ────────────────────────────────────────────────────────────
   구획을 세로로 줄세우지 않고 짝을 지어 앉힙니다.
   짝은 여백이 남아서가 아니라 함께 읽혀야 해서 붙습니다 —
   본부 막대를 누르면 옆의 사업소 표가 걸러집니다. */
.lp-hero-inner {
  display: grid; grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr);
  align-items: center; gap: 28px;
}
.lp-hero-copy { min-width: 0; }
/* 이미지 위에 놓인 실데이터 카드만 한 단계 띄웁니다. */
.lp-hero .lp-chart { box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.lp-hero .lp-chart-hero b { font-size: 32px; }
.lp-hero .tr-svg { height: auto; }

/* 본부 순위 | 사업소 표 */
.lp-pair { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.lp-pair-side, .lp-pair-main { min-width: 0; display: grid; gap: 20px; align-content: start; }
.lp-pair .lp-section-head { margin-bottom: 0; }

/* 조작반 구획: 해설 옆에 밴드를 세워 전폭 한 줄을 없앱니다. */
.lp-board-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 16px; align-items: stretch; margin-top: 12px; }
.lp-board-pair .lp-debrief { margin: 0; grid-template-columns: minmax(0, 1fr); align-content: start; }
.lp-board-pair .lp-debrief > li + li { border-left: 0; border-top: 1px solid var(--line); }
.lp-board-pair .lp-band { margin: 0; min-height: 0; }
.lp-board-pair .lp-band-inner { max-width: none; padding: 26px 24px; }
.lp-board-pair .lp-band h2 { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.34; }
.lp-board-pair .lp-band::after {
  background:
    linear-gradient(0deg, rgba(38, 44, 62, .93) 6%, rgba(38, 44, 62, .55) 52%, rgba(38, 44, 62, .2) 100%);
}
.lp-board-pair .lp-band-inner { align-self: end; }

@media (max-width: 1180px) {
  .lp-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .lp-twin { width: min(760px, 100%); justify-self: center; }
  .lp-pair { grid-template-columns: minmax(0, 1fr); }
  .lp-board-pair { grid-template-columns: minmax(0, 1fr); }
  .lp-board-pair .lp-debrief { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-board-pair .lp-debrief > li + li { border-left: 1px solid var(--line); border-top: 0; }
  .lp-board-pair .lp-band { min-height: 240px; }
}
@media (max-width: 900px) {
  .lp-board-pair .lp-debrief { grid-template-columns: minmax(0, 1fr); }
  .lp-board-pair .lp-debrief > li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── 기간별 이행률 추이 ──────────────────────────────────────────────────────
   단일 계열이라 범례가 없습니다. 제목이 무엇을 그렸는지 말하고,
   끝점 라벨과 아래 표가 값을 책임집니다. 호버는 거들 뿐입니다. */
.lp-chart {
  position: relative; padding: 20px 22px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.lp-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.lp-chart-head h3 { margin: 0; font-size: 18px; font-weight: 550; letter-spacing: -.022em; }
.lp-chart-head span { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.lp-chart-hero { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 10px; }
.lp-chart-hero b { font-size: 38px; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.lp-chart-hero span { color: var(--ink-2); font-size: 13px; }

.tr-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* 격자는 표면에서 한 단계 떨어진 회색, 1px 실선. 물러나 있어야 합니다. */
.tr-grid { stroke: var(--line); stroke-width: 1; }
.tr-tick { fill: var(--ink-3); font-size: 12px; text-anchor: end; }
/* 면은 계열색 10% 워시. 진한 블록이 되면 선이 안 보입니다. */
.tr-area { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: none; }
.tr-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* 끝점 표식은 지름 10px에 표면색 2px 링. 선과 겹쳐도 읽힙니다. */
.tr-end, .tr-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
/* 기준선은 데이터가 아니라 참조선이라 점선으로, 계열색이 아닌 중립 잉크로 둡니다. */
.tr-mark { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; opacity: .75; }
.tr-mark-label { fill: var(--ink-3); font-size: 10px; text-anchor: end; }
.tr-cross { stroke: var(--ink-3); stroke-width: 1; }
.tr-hit { fill: transparent; stroke: none; cursor: crosshair; }
.tr-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tr-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
/* 차트를 그리는 상자가 툴팁의 기준점입니다. 홈이든 이행률 화면이든 같게 동작합니다. */
.tr-host { position: relative; }
/* 이행률은 대개 위쪽에 붙으므로 툴팁은 아래에 둡니다. 선을 가리지 않습니다. */
.tr-tip {
  position: absolute; bottom: 30px; transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 7px 11px; white-space: nowrap;
  color: var(--surface); background: var(--ink); border-radius: var(--r-sm);
  font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none;
}
.tr-tip[hidden] { display: none; }

/* 히어로 차트는 기본 차트 규칙이 모두 적용된 뒤 다시 부유 카드로 고정합니다. */
.lp-twin .lp-twin-trend {
  position: relative; z-index: 4; grid-column: 1; grid-row: 3; width: 100%; max-width: 300px; padding: 13px 14px 10px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border-color: color-mix(in srgb, var(--line-strong) 76%, transparent);
  box-shadow: var(--shadow-card); backdrop-filter: blur(18px);
}
.lp-twin-trend .lp-chart-head { margin-bottom: 0; }
.lp-twin-trend .lp-chart-hero { margin: 2px 0 0; }
.lp-twin-trend .lp-chart-hero b { font-size: 24px; }
.lp-twin-trend #lpTrend { max-height: 126px; overflow: hidden; }
.lp-twin-trend .tr-svg { margin-top: -32px; }
@media (max-width: 520px) {
  .lp-twin .lp-twin-trend { grid-column: 1; grid-row: 5; width: 100%; max-width: none; }
}

/* ── 본부별 이행률: 순위 막대 ────────────────────────────────────────────────
   본부는 순서 없는 이름이라 색으로 정체성을 나타내지 않습니다.
   색은 이수 기준 90% 대비 상태만 말하고, 상태는 글자로도 함께 적습니다. */
.lp-hq { display: grid; gap: 2px; }
.hq-row {
  display: grid; grid-template-columns: 24px minmax(0, 1.1fr) minmax(0, 2.2fr) auto auto;
  align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm);
  transition: background .14s var(--ease);
}
.hq-row:hover, .hq-row:focus-visible { background: var(--surface-2); outline: none; }
.hq-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.hq-rank { color: var(--ink-3); font-family: var(--mono); font-size: 11.5px; text-align: center; }
.hq-name { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* 막대는 24px보다 얇게, 데이터 끝만 둥글게, 바닥은 각지게. */
.hq-track { height: 10px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.hq-track i {
  display: block; height: 100%; background: var(--teal);
  border-radius: 0 5px 5px 0; transition: width .9s var(--ease);
}
.hq-row[data-tone="warn"] .hq-track i { background: var(--amber); }
.hq-row[data-tone="bad"] .hq-track i { background: var(--danger); }
.hq-value { min-width: 4.5em; text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 상태는 색만으로 전하지 않습니다. */
.hq-state { min-width: 0; color: var(--ink-3); font-size: 11.5px; text-align: right; white-space: nowrap; }
.hq-row[data-tone="ok"] .hq-state { color: var(--teal); }
.hq-row[data-tone="warn"] .hq-state { color: var(--amber); }
.hq-row[data-tone="bad"] .hq-state { color: var(--danger); }

.lp-figures { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }

@media (max-width: 1180px) {
  /* 우측 칸이 좁아지면 순위 막대의 값·상태가 칸을 밀어냅니다. 더 일찍 풉니다. */
  .lp-figures { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hq-row { grid-template-columns: 22px minmax(0, 1fr) 52px; row-gap: 6px; }
  .hq-track { grid-column: 1 / -1; }
  .hq-state { grid-column: 2 / -1; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .hq-track i, .lp-metric-bar > i { transition: none; }
}

/* ── 등장 · 정렬 · 필터 ────────────────────────────────────────────────────
   숨김은 body.reveal-on 안에서만 걸립니다. JS가 없거나 모션을 끄면 그 클래스가
   붙지 않으므로 첫 페인트에서 모든 것이 그대로 보입니다. */
body.reveal-on [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
body.reveal-on [data-reveal].is-shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* 정렬 가능한 열 머리 */
.lp-office-sort {
  display: inline-flex; align-items: center; gap: 5px; padding: 0;
  color: inherit; font: inherit; text-align: inherit;
  border-radius: 4px; transition: color .12s var(--ease);
}
.lp-office-sort:hover { color: var(--ink); }
.lp-office-sort.is-active { color: var(--accent); font-weight: 600; }
.lp-office-sort i { font-size: 9px; font-style: normal; opacity: .55; }
.lp-office-sort.is-active i { opacity: 1; }
.lp-office-head > *:nth-child(n+4) { justify-content: flex-end; text-align: right; }

/* 본부 필터 안내 */
.lp-office-filter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 18px; color: var(--ink-2); background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-line); font-size: 12.5px;
}
.lp-office-filter b { color: var(--ink); }
.lp-office-filter button {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  color: var(--accent); background: var(--surface); border: 1px solid var(--accent-line);
  border-radius: 999px; font-size: 12px; font-weight: 600;
}
.lp-office-filter button:hover { background: var(--accent-soft); }
.lp-office-filter svg { width: 12px; height: 12px; }

/* 누른 본부 줄 */
.hq-row { width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; }
.hq-row.is-picked { background: var(--accent-soft); }
.hq-row.is-picked .hq-name { color: var(--accent); }

/* 사업소별 현황 */
.lp-office { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lp-office-head, .lp-office-row {
  padding: 11px 18px; display: grid;
  grid-template-columns: 28px minmax(0, 1.5fr) minmax(0, 1fr) 64px 64px minmax(110px, 1fr);
  align-items: center; gap: 12px;
}
.lp-office-head {
  color: var(--ink-3); background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: 11.5px;
}
.lp-office-head > *:nth-child(n+4), .lp-office-row > span:nth-child(n+4) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.lp-office-row + .lp-office-row { border-top: 1px solid var(--line); }
.lp-office-row { font-size: 13px; }
.lp-office-row:hover { background: var(--surface-2); }
.lp-office-rank { color: var(--ink-3); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.lp-office-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lp-office-hq { overflow: hidden; color: var(--ink-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.lp-office-rate { display: flex; align-items: center; gap: 9px; }
/* 트랙이 없으면 막대가 flex 안에서 줄어들어 비율로 읽히지 않습니다. */
.lp-office-track {
  flex: 1 1 auto; min-width: 40px; height: 6px; overflow: hidden;
  background: var(--surface-3); border-radius: 3px;
}
.lp-office-track i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.lp-office-rate.warn .lp-office-track i { background: var(--amber); }
.lp-office-rate.bad .lp-office-track i { background: var(--danger); }
.lp-office-rate b { min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.lp-office-rate.warn b { color: var(--amber); }
.lp-office-rate.bad b { color: var(--danger); }

/* 기능 */
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-feature {
  padding: 22px; display: grid; justify-items: start; gap: 10px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: .16s var(--ease);
}
.lp-feature:hover { border-color: var(--accent-line); background: var(--surface-2); transform: translateY(-2px); }
.lp-feature i {
  width: 36px; height: 36px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: 10px;
}
.lp-feature i svg { width: 17px; height: 17px; }
.lp-feature strong { font-size: 15px; letter-spacing: -.022em; }
.lp-feature p { color: var(--ink-2); font-size: 13px; line-height: 1.55; }

/* 사용자 의견 */
.lp-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-voice {
  padding: 20px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.lp-voice-quote { color: var(--accent); font-size: 22px; line-height: 1; }
.lp-voice p { margin: 10px 0 0; color: var(--ink); font-size: 13.5px; line-height: 1.62; }
.lp-voice footer { margin-top: 16px; padding-top: 14px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.lp-voice-avatar {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: 50%;
  font-size: 11.5px; font-style: normal; font-weight: 700;
}
.lp-voice footer div { min-width: 0; display: grid; }
.lp-voice footer strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.lp-voice footer small { overflow: hidden; color: var(--ink-3); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1180px) {
  .lp-hq, .lp-features, .lp-voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-office-head, .lp-office-row { grid-template-columns: 28px minmax(0, 1.4fr) 60px minmax(100px, 1fr); }
  .lp-office-hq, .lp-office-head > *:nth-child(3),
  .lp-office-row > span:nth-child(5), .lp-office-head > *:nth-child(5) { display: none; }
}
@media (max-width: 900px) {
  .lp-hq, .lp-features, .lp-voices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  /* 좁은 화면에서는 순위·이름·이행률만 남깁니다. 여섯 칸은 320px에서 서로를 밀어냅니다. */
  .lp-office-head, .lp-office-row {
    padding: 10px 14px; grid-template-columns: 24px minmax(0, 1fr) minmax(96px, .9fr); gap: 10px;
  }
  .lp-office-head > *:nth-child(4), .lp-office-row > span:nth-child(4) { display: none; }
}


/* ── 엔진 직접 조작 ─────────────────────────────────────────────────────────
   훈련 문제를 만들기 전에 같은 조건을 엔진에 직접 걸어 검수하는 화면입니다.
   정답과 진단 근거가 그대로 나오므로 운영자만 열 수 있습니다. */
.engine-entry {
  margin-top: 18px; padding: 20px 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 24px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.engine-entry-copy h2 { margin: 6px 0 8px; font-size: 18px; letter-spacing: -.025em; }
.engine-entry-copy p { margin: 0; max-width: 62ch; color: var(--ink-2); font-size: 13.5px; line-height: 1.62; }
.engine-entry-points {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.engine-entry-points li {
  padding: 10px 12px; display: grid; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.engine-entry-points b { font-size: 12.5px; font-weight: 650; }
.engine-entry-points small { color: var(--ink-3); font-size: 11.5px; }
.engine-entry-action { display: grid; gap: 8px; justify-items: stretch; }
.engine-entry-action .page-primary { width: 100%; justify-content: center; }
.engine-entry-note { margin: 0; color: var(--ink-3); font-size: 11.5px; text-align: center; }
.engine-entry-note[data-state="ready"] { color: var(--teal); }
.engine-entry-note[data-state="down"] { color: var(--danger); }

.engine-console-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.engine-console-badge > i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
/* 조작 화면은 자체 레이아웃을 가지므로 남은 높이를 통째로 넘깁니다. */
.engine-console-shell {
  position: relative; height: calc(100vh - var(--topbar-h, 52px));
  background: var(--surface-2); border-top: 1px solid var(--line);
}
.engine-console-shell iframe { display: block; width: 100%; height: 100%; border: 0; }
.engine-console-fallback {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center; padding: 24px;
  color: var(--ink-2); font-size: 13.5px; text-align: center;
}

@media (max-width: 900px) {
  .engine-entry { grid-template-columns: minmax(0, 1fr); }
  .engine-entry-points { grid-template-columns: minmax(0, 1fr); }
}

/* ── 세부 화면: 읽기 쉬운 작업 지면, 짧은 소개, 실제 과제 중심 ───────────── */
.inner-page { --font: "Pretendard Variable", -apple-system, "Malgun Gothic", sans-serif; font-family: var(--font); }
.inner-page:not(.training-workspace-page) > .page-container {
  width: min(1600px, calc(100% - clamp(32px, 4vw, 80px))); padding: 24px 0 64px;
}
.inner-page .inner-topbar { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.inner-page .page-heading { margin-bottom: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line-strong); }
.inner-page .page-heading h1, .me-intro h1 { font-size: clamp(28px, 2.5vw, 38px); font-weight: 560; line-height: 1.3; letter-spacing: -.045em; text-wrap: balance; }
.inner-page .page-heading p { margin-top: 12px; font-size: 16px; line-height: 1.7; }
.inner-page .page-primary, .inner-page .ghost-action { min-height: 44px; border-radius: 9px; font-size: 14px; }
.inner-page .panel { min-width: 0; border-radius: 16px; box-shadow: 0 2px 6px #132c3b03; overflow: hidden; }
.inner-page .panel > header { min-height: 62px; padding: 18px 22px; background: var(--surface-2); }
.inner-page .panel > header h2 { font-size: 18px; }
.inner-page .card-label, .inner-page .page-eyebrow { font-size: 12px; font-weight: 550; letter-spacing: .015em; }

/* 소개 이미지는 작은 가로 프레임 안에만 두고, 목록을 바로 이어 보여 줍니다. */
.detail-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center;
  gap: 32px; min-height: 176px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line-strong);
}
.detail-hero-copy { min-width: 0; padding: 8px 0; }
.detail-kicker { display: block; color: var(--ink-3); font-size: 12px; font-weight: 550; letter-spacing: .015em; }
.detail-hero h1 { margin-top: 12px; font-size: clamp(28px, 2.5vw, 38px); font-weight: 560; line-height: 1.3; letter-spacing: -.045em; text-wrap: balance; }
.detail-hero h1 em { color: var(--ink); font-style: normal; }
.detail-hero-copy > p { max-width: 58ch; margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.detail-hero-facts { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.detail-hero-facts span { color: var(--ink-3); font-size: 13px; }
.detail-hero-action { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 18px; padding: 8px 14px; color: #fff; background: var(--accent); border-radius: 8px; font-size: 14px; }
.detail-hero-action:hover { background: var(--accent-hover); }
.detail-hero-action svg { width: 16px; height: 16px; }

/* 모의 훈련 연습 */
.training-catalog-page .training-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; }
.training-catalog-page .training-section-heading { margin-bottom: 14px; }
.training-catalog-page .training-section-heading h2, .training-catalog-page .training-history h2 { font-size: 20px; letter-spacing: -.03em; }
.training-catalog-page .training-scenario-card {
  grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); min-height: 320px;
  border-color: var(--line); border-radius: 14px; box-shadow: 0 2px 4px #182d3c03;
  transition: border-color .18s, box-shadow .18s;
}
.training-catalog-page .training-scenario-card:hover { border-color: #9eb3bd; box-shadow: 0 8px 24px #182d3c08; }
.training-catalog-page .training-scenario-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.training-catalog-page .training-scenario-card.is-compact { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.training-catalog-page .training-scenario-art { position: relative; min-width: 0; background: #cbd4dc; }
.scenario-equipment { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.scenario-art-caption { position: absolute; bottom: 0; left: 0; right: 0; display: grid; gap: 5px; padding: 16px 18px; background: #112338; }
.scenario-art-caption b { color: #ffffff; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.scenario-art-caption small { color: #dce4ef; font-size: 12px; }
.training-catalog-page .training-scenario-card > div:last-child { padding: 28px; }
.scenario-index { color: var(--ink-3); font-size: 12px; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.training-catalog-page .training-scenario-card h2 { margin-top: 20px; font-size: clamp(22px, 1.7vw, 27px); font-weight: 570; line-height: 1.4; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }
.training-catalog-page .training-scenario-card > div:last-child > p { max-width: 56ch; margin-top: 8px; font-size: 16px; line-height: 1.65; }
.training-catalog-page .training-scenario-meta { margin-top: 22px; padding: 16px; border: 1px solid var(--line); gap: 16px 22px; background: var(--surface-2); border-radius: 10px; }
.training-catalog-page .training-scenario-meta div { padding: 0; background: none; min-width: 0; }
.training-catalog-page .training-scenario-meta dt { color: var(--ink-2); font-size: 14px; }
.training-catalog-page .training-scenario-meta dd { margin-top: 6px; font-size: 16px; font-weight: 550; white-space: normal; overflow-wrap: anywhere; }
.training-catalog-page .training-scenario-meta div:first-child dd { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.training-scenario-meta dd small { margin-left: 4px; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.scenario-brief { margin-top: 22px; }
.scenario-brief summary { display: flex; justify-content: space-between; align-items: center; min-height: 36px; color: var(--ink-2); font-size: 14px; cursor: pointer; list-style: none; }
.scenario-brief summary::-webkit-details-marker { display: none; }
.scenario-brief summary svg { width: 16px; height: 16px; transform: rotate(90deg); }
.scenario-brief[open] summary svg { transform: rotate(-90deg); }
.training-catalog-page .scenario-brief p { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.training-catalog-page .training-scenario-card footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.training-catalog-page .training-scenario-card footer .page-primary { min-width: 138px; min-height: 44px; justify-content: space-between; gap: 24px; }
.training-catalog-page .training-history { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.training-catalog-page .training-history > header { min-height: 76px; margin: 0; padding: 18px 20px; align-items: center; border-bottom: 1px solid var(--line); }
.training-history-lead { padding: 16px 20px 8px; }
.training-history-lead strong { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 550; }
.training-history-lead p { color: var(--ink-3); font-size: 13px; line-height: 1.7; }
.training-catalog-page #trainingRunList { padding: 12px; gap: 8px; }
.training-catalog-page .training-run-card { padding: 18px 14px; background: var(--surface); border-color: transparent; border-radius: 9px; }
.training-catalog-page .training-run-card + .training-run-card { border-top-color: var(--line); }
.training-catalog-page .training-run-card h3 { font-size: 16px; line-height: 1.55; font-weight: 550; }
.training-catalog-page .training-run-card:hover { border-color: var(--line-strong); }

/* 월간 테스트: 과제가 먼저, 누적 성과는 하나의 요약으로 */
.me-intro { margin-bottom: 28px; padding-bottom: 26px; align-items: center; border-bottom: 1px solid var(--line-strong); }
.me-intro-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.me-intro-meta .me-eyebrow { color: var(--ink-3); font-size: 12px; }
.me-intro h1 { margin-top: 12px; }
.me-org { max-width: 34ch; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; }
.me-intro .training-overview .me-org { max-width: none; margin: 10px 0 14px; }
.me-page .me-card, .me-page .me-hero { border-color: var(--line); border-radius: 16px; box-shadow: 0 2px 6px #132c3b03; }
.me-page .me-card-head { min-height: 64px; padding: 18px 24px; }
.me-page .me-card-head h2 { font-size: 18px; }
.me-page .me-card-head > button { min-height: 32px; font-size: 14px; }
.me-page .assignment-period-controls { margin: 0; padding: 16px 24px; background: var(--surface-2); }
.me-page .assignment-period-controls button { border-color: transparent; background: none; }
.me-page .assignment-period-controls button[aria-pressed="true"] { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.me-page .assignment-row { display: grid; grid-template-columns: minmax(0, 1fr); padding: 26px 28px; align-items: start; gap: 20px; transition: background .15s; }
.me-page .assignment-row:hover { background: var(--surface-2); }
.me-page .assignment-main h3 { margin-top: 12px; font-size: 21px; font-weight: 570; }
.me-page .assignment-main p { max-width: 70ch; margin-top: 12px; font-size: 16px; line-height: 1.7; }
.me-page .assignment-labels span:not(.status-chip) { padding: 0; background: none; font-size: 12px; }
.me-page .assignment-labels { gap: 12px; }
.me-page .assignment-action .page-primary { min-width: 112px; justify-content: center; }
.me-page .me-hero { margin: 0 0 24px; background: var(--surface); }
.me-page .me-hero-perf {
  --ink: #f1f7fa; --ink-2: #c5d8e1; --ink-3: #acc5d0; --surface-3: #315561;
  --line-strong: #7e9faa; --accent: #a8e6d2; --accent-soft: #264e5b; --accent-line: #4b7a87;
  --amber: #e8bc77; --danger: #ffb0b8;
  padding: 32px; gap: 32px; color: var(--ink); background: #122e3b;
}
.me-page .me-hero-perf :focus-visible { outline-color: #a8e6d2; }
.me-page .me-hero-next { padding: 30px; border: 0; background: var(--surface); }
.me-page .me-next-instruction { padding: 0; border: 0; font-size: 14px; line-height: 1.6; }
.me-page .me-hero-next h3 { font-size: 24px; font-weight: 570; line-height: 1.45; }
.me-page .me-next-where { font-size: 14px; }
.me-page .me-next-done i { width: 28px; height: 28px; background: none; }
.me-page .me-next-done small { font-size: 14px; }
.me-page .me-support { gap: 24px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.me-page .process-note { padding-top: 14px; font-size: 13px; line-height: 1.7; }
.me-page .process-run summary strong, .me-page .process-trace p { font-size: 14px; }

/* 최근고장 사례: 구분·원인·대응을 읽는 자료 카드 */
.library-toolbar { margin: 2px 0 0; padding: 0 0 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.library-toolbar h2 { font-size: 20px; }
.library-toolbar .chip-filter { justify-content: flex-end; flex-wrap: wrap; overflow: visible; }
.fault-library-page .fault-case-grid { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.fault-library-page .fault-case-card { min-width: 0; min-height: 340px; padding: 24px; border-color: var(--line); border-radius: 14px; box-shadow: none; transition: border-color .18s; }
.fault-library-page .fault-case-card:hover { border-color: var(--line-strong); }
.fault-library-page .fault-case-card > header { gap: 10px; flex-wrap: wrap; }
.fault-library-page .fault-case-card h3 { margin-top: 18px; font-size: 21px; line-height: 1.45; letter-spacing: -.03em; }
.fault-library-page .fault-case-facts { margin-top: 20px; border: 0; gap: 14px; border-radius: 0; background: none; }
.fault-library-page .fault-case-facts > div { padding: 0; background: none; }
.fault-library-page .fault-case-facts dt { font-size: 12px; }
.fault-library-page .fault-case-facts dd { margin-top: 5px; font-size: 14px; }
.fault-library-page .fault-case-card > p { margin-top: 18px; font-size: 16px; line-height: 1.7; }
.case-analysis { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-analysis summary { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.case-analysis summary::-webkit-details-marker { display: none; }
.case-analysis summary svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .2s; }
.case-analysis[open] summary svg { transform: rotate(-90deg); }
.case-analysis summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.case-analysis-path { padding: 2px 0 20px; display: grid; gap: 16px; }
.case-analysis-path section { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 18px; }
.case-analysis-path section > span { padding-top: 1px; color: var(--ink-3); font-size: 22px; font-weight: 450; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.case-analysis-path h4 { padding-top: 3px; color: var(--ink); font-size: 14px; font-weight: 600; }
.case-analysis-path p { margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.fault-library-page .fault-case-card footer { margin-top: auto; padding-top: 22px; gap: 14px; }
.fault-library-page .fault-case-card footer .page-primary { min-height: 40px; }

/* 실적관리: 요약 수치, 조건, 추이와 조직 비교 */
.inner-page .report-controls { gap: 14px; padding: 20px 22px; border-radius: 12px; background: var(--surface-2); }
.inner-page .report-controls label { min-width: 0; display: grid; gap: 7px; color: var(--ink-2); font-size: 14px; }
.inner-page .report-controls input, .inner-page .report-controls select { min-height: 44px; height: auto; max-width: 100%; padding: 9px 12px; background: var(--surface); font-size: 14px; }
.inner-page .report-controls .ghost-action, .inner-page .report-controls .chip-filter button { min-height: 44px; height: auto; }
.inner-page .report-controls :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 사이드바를 제외한 실제 콘텐츠 폭으로 배치합니다. 요약과 추이는 각각 한 줄을 씁니다. */
.report-page { container: report / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.report-page > * { min-width: 0; grid-column: 1 / -1; margin: 0; }
.report-page .report-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin: 0; padding-bottom: 22px; }
.report-heading > div { min-width: 0; }
.report-page .report-switch { flex-shrink: 0; max-width: 100%; gap: 4px; margin: 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); }
.report-page .report-switch button { min-height: 44px; padding: 10px 22px; border: 0; border-radius: 7px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.report-page .report-switch [aria-current="page"] { color: #f0f8f6; background: #173747; font-weight: 600; }
.report-page .report-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin: 0; padding: 18px 22px; gap: 14px 20px; background: var(--surface); }
.report-page .report-controls > * { min-width: 0; }
.report-page .report-controls input, .report-page .report-controls select { width: 100%; min-width: 0; }
.report-period-control { display: grid; gap: 7px; color: var(--ink-2); font-size: 14px; }
.report-period-control .chip-filter { flex-wrap: nowrap; gap: 2px; padding: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.report-page .report-period-control button { flex: 1; min-height: 44px; padding: 8px 14px; }
.report-filter-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.report-controls > .form-error { flex-basis: 100%; grid-column: 1 / -1; margin: 0; }
.report-filter-actions .text-button { min-height: 44px; }
.report-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.report-overview > * { min-width: 0; margin: 0; }
.report-page .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.report-page .stat-row > div { min-width: 0; padding: 22px 24px; border: 0; border-radius: 0; background: var(--surface); }
.report-page .stat-row > div + div { border-left: 1px solid var(--line); }
.report-page .stat-row span { color: var(--ink-2); font-size: 14px; }
.report-page .stat-row strong { margin: 12px 0 8px; font-size: clamp(30px, 2.5vw, 42px); line-height: 1.15; font-weight: 520; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.report-page .stat-row small { color: var(--ink-3); font-size: 12px; line-height: 1.5; }
.report-page .stat-row .report-key-metric { background: #143746; }
.report-page .report-key-metric :is(span, small) { color: #c2d9e1; }
.report-page .report-key-metric strong { color: #c2f3dd; }
.report-page .panel > header { gap: 16px; flex-wrap: wrap; background: var(--surface); border-bottom: 1px solid var(--line); }
.report-page .panel > header span { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.report-organizations > header > div > span { display: block; margin-top: 5px; }
.report-series { min-width: 0; padding: 20px 24px; }
.report-series-readout { min-height: 62px; display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.report-series-readout span { color: var(--ink); font-size: 16px; font-weight: 550; font-variant-numeric: tabular-nums; }
.report-series-readout p { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.report-series-readout strong { color: var(--accent); font-size: 36px; font-weight: 500; line-height: 1.1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.report-period-chart { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.report-period-axis { height: 114px; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink-3); font-size: 12px; text-align: right; }
.report-periods { min-width: 0; display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding: 0 2px 5px; }
.report-periods button { flex: 1 0 84px; min-width: 0; display: grid; justify-items: center; gap: 10px; padding: 5px 10px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; transition: background .18s, border-color .18s; }
.report-periods button:hover { background: var(--surface-2); }
.report-periods button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.report-period-track { display: flex; align-items: end; height: 108px; width: 100%; max-width: 48px; border-radius: 5px; overflow: hidden; background: var(--surface-3); }
.report-period-track i { display: block; width: 100%; background: #90aeb9; border-radius: 4px 4px 0 0; }
[aria-pressed="true"] .report-period-track i { background: var(--accent); }
.report-periods :focus-visible, .report-page .report-switch :focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.performance-explorer { --peer: #496fb8; --peer-bg: #eef3fd; --peer-line: #a7bce6; --peer-ink: #294878; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; padding: 24px; }
body.soft-dark .performance-explorer { --peer: #9bbbf4; --peer-bg: #1b304d; --peer-line: #5477ab; --peer-ink: #c3d8ff; }
.performance-explorer > header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; color: var(--ink); font-size: 16px; }
.performance-explorer > header small { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.performance-legend { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.performance-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.performance-legend i + i, .performance-legend i:nth-of-type(2) { margin-left: 10px; background: var(--peer); }
.performance-chart { min-width: 0; }
.performance-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-content: start; gap: 12px; max-height: 620px; padding: 2px 4px 2px 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.performance-bars > button { min-width: 0; min-height: 120px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 10px; padding: 18px; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .18s, background .18s, box-shadow .18s; }
.performance-bars > button:hover { border-color: var(--line-strong); box-shadow: 0 3px 10px #1535460a; background: var(--surface-2); }
.performance-bars > button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.performance-bar-name { font-size: 15px; font-weight: 550; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.performance-bar-value { font-size: 22px; font-weight: 520; line-height: 1.2; letter-spacing: -.035em; text-align: right; font-variant-numeric: tabular-nums; }
.performance-bar-track { grid-column: 1 / -1; height: 5px; width: 100%; overflow: hidden; border-radius: 4px; background: var(--surface-3); }
.performance-bar-track i { display: block; height: 100%; background: #91aeb7; border-radius: inherit; transition: width .35s, background .18s; }
[aria-pressed="true"] .performance-bar-track i { background: var(--accent); }
.performance-bar-meta, .performance-bar-state { color: var(--ink-2); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.performance-bar-state { text-align: right; }
.performance-bars > button.is-comparison { color: var(--peer-ink); background: var(--peer-bg); border-color: var(--peer-line); }
.performance-bars > button.is-comparison .performance-bar-track i { background: var(--peer); }
.performance-dock { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.performance-inspector { --ink: #f1f7fa; --ink-3: #bdd3de; --line: #355361; min-width: 0; padding: 24px; display: grid; gap: 22px; color: var(--ink); background: #122f3e; border: 1px solid #244858; border-radius: 14px; }
.performance-inspector-head { min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 16px; }
.performance-inspector-head > div { min-width: 0; }
.performance-inspector-head span { color: var(--ink-3); font-size: 14px; }
.performance-inspector-head h3 { margin-top: 8px; color: var(--ink); font-size: 24px; font-weight: 550; letter-spacing: -.035em; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.performance-completion { display: grid; justify-items: center; gap: 16px; }
.performance-gauge { position: relative; width: min(180px, 100%); aspect-ratio: 1; }
.performance-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.performance-gauge circle { fill: none; stroke: #355766; stroke-width: 8; }
.performance-gauge .performance-gauge-fill { stroke: #b5eed7; stroke-dasharray: var(--completion, 0) 100; stroke-linecap: butt; transition: stroke-dasharray .55s cubic-bezier(.22, 1, .36, 1); }
.performance-gauge > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.performance-gauge strong { color: #c3f5de; font-size: 40px; line-height: 1.1; font-weight: 500; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.performance-gauge span { color: #bdd3de; font-size: 14px; }
.performance-completion small { color: #c0d5df; font-size: 14px; text-align: center; line-height: 1.6; }
.performance-facts { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.performance-facts dt { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.performance-facts dd { margin: 8px 0 0; color: var(--ink); font-size: 22px; font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.performance-no-data { grid-column: 1 / -1; }
.performance-no-data dd { font-size: 16px; line-height: 1.65; }
.performance-actions { display: grid; gap: 8px; }
.performance-actions button { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; text-align: left; color: #123c3d; background: #c2efdc; border: 1px solid #c2efdc; border-radius: 8px; font-size: 14px; line-height: 1.5; transition: background .18s; }
.performance-actions button:hover { background: #e0ffef; }
.performance-actions button + button { color: #d5e8ed; background: transparent; border-color: #426776; }
.performance-actions button + button:hover { background: #264958; }
.performance-actions svg { flex-shrink: 0; width: 16px; height: 16px; }
.performance-compare-control { min-width: 0; display: grid; gap: 9px; color: var(--ink-2); font-size: 14px; }
.performance-compare-control select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); font-size: 14px; }
.performance-comparison { --ink: var(--peer-ink); --ink-3: var(--peer-ink); --line: var(--peer-line); min-width: 0; padding: 22px; display: grid; gap: 20px; border: 1px solid var(--peer-line); border-radius: 12px; background: var(--peer-bg); }
.performance-comparison .performance-inspector-head h3 { font-size: 20px; }
.performance-inspector-rate { display: grid; flex-shrink: 0; gap: 6px; text-align: right; }
.performance-inspector-rate strong { color: var(--peer-ink); font-size: 30px; line-height: 1.15; font-weight: 500; font-variant-numeric: tabular-nums; }
.performance-delta { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--peer-ink); font-size: 14px; line-height: 1.7; }
.performance-explorer :focus-visible, .report-details > summary:focus-visible, .report-data-table button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.performance-inspector :focus-visible { outline-color: #e0fff0; }
.report-details > summary { padding: 20px 24px; color: var(--ink); background: var(--surface-2); border-top: 1px solid var(--line); font-size: 16px; font-weight: 550; cursor: pointer; }
.report-details > summary small { display: inline-block; margin-left: 12px; color: var(--ink-3); font-size: 13px; font-weight: 400; }
.report-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.report-data-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.report-data-table th, .report-data-table td { padding: 18px 24px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.report-data-table thead th { color: var(--ink-2); background: var(--surface-2); font-weight: 500; font-size: 14px; }
.report-data-table th:first-child { text-align: left; }
.report-data-table tbody th { white-space: normal; font-size: 15px; font-weight: 550; }
.report-data-table tbody tr:hover { background: var(--surface-2); }
.report-data-table button { padding-block: 6px; color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 4px; }
.report-data-table strong { font-weight: 600; }
.report-method { color: var(--ink-3); font-size: 13px; line-height: 1.7; }
@container report (min-width: 1100px) {
  .performance-explorer { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
}
@container report (max-width: 700px) {
  .report-page .report-heading { align-items: start; flex-direction: column; gap: 18px; }
  .report-page .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-page .stat-row > div { padding: 20px; }
  .report-page .stat-row > div:nth-child(odd) { border-left: 0; }
  .report-page .stat-row > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .report-page .report-controls { padding: 16px; gap: 14px; }
  .report-filter-actions > button { flex: 1; }
  .report-series { padding: 18px 16px; }
  .report-series-readout { gap: 12px; }
  .report-series-readout strong { font-size: 30px; }
  .performance-explorer { padding: 16px; }
  .performance-bars { max-height: 430px; }
  .report-details > summary { padding: 18px 16px; }
  .report-details > summary small { display: block; margin: 8px 0 0; }
}
@container report (max-width: 420px) {
  .report-page .stat-row { grid-template-columns: minmax(0, 1fr); }
  .report-page .stat-row > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .report-page .report-switch { width: 100%; }
  .report-page .report-switch button { flex: 1; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .performance-bars > button, .performance-bar-track i, .performance-gauge .performance-gauge-fill, .report-periods button, .performance-actions button { transition: none; }
}

/* 피드백과 운영 화면에도 같은 글자 크기와 표면을 적용합니다. */
.analytics-page .analytics-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.analytics-page .analytics-split > .panel > header,
.analytics-page .panel > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 24px 0; }
.analytics-list { display: grid; gap: 0; padding: 8px 24px 20px; }
.analytics-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.analytics-row:last-child { border-bottom: 0; }
.analytics-row-name { font-size: 15px; font-weight: 550; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.analytics-row-name small { display: block; margin-top: 4px; color: var(--ink-2); font-size: 12px; font-weight: 450; }
.analytics-row-value { font-size: 20px; font-weight: 520; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.analytics-row .performance-bar-track { grid-column: 1 / -1; }
.analytics-row-meta { grid-column: 1 / -1; color: var(--ink-2); font-size: 12px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.analytics-page [data-analytics-members] { padding: 0 0 8px; }
@container report (min-width: 900px) {
  .analytics-page .analytics-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container report (max-width: 700px) {
  .analytics-page .analytics-split > .panel > header,
  .analytics-page .panel > header { padding: 18px 16px 0; }
  .analytics-list { padding: 4px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .analytics-row .performance-bar-track i { transition: none; }
}
 
.discussion-page-container .discussion-highlight { margin-bottom: 28px; padding: 30px; background: var(--accent-soft); border: 0; border-radius: 14px; box-shadow: none; }
.discussion-page-container .discussion-highlight h2 { max-width: 32ch; margin-top: 16px; font-size: 27px; line-height: 1.45; font-weight: 550; letter-spacing: -.035em; }
.discussion-page-container .discussion-highlight > div > p { font-size: 16px; line-height: 1.7; }
.discussion-page-container .discussion-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
.discussion-page-container .discussion-feed { gap: 14px; }
.discussion-page-container .discussion-toolbar { flex-wrap: wrap; }
.discussion-view-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.discussion-view-controls > button { min-height: 40px; padding: 8px 12px; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 7px; font-size: 14px; white-space: nowrap; }
.discussion-view-controls > button[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.discussion-view-controls :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.discussion-feed.is-card-view { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); align-items: stretch; }
.discussion-feed.is-card-view article { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 18px; }
.discussion-feed.is-card-view .vote-box { display: flex; align-items: center; gap: 8px; }
.discussion-feed.is-card-view .vote-box button { width: 36px; min-height: 36px; }
.discussion-feed.is-card-view .feed-copy > div:first-child, .discussion-feed.is-card-view .feed-copy footer { flex-wrap: wrap; }
.discussion-feed.is-card-view .feed-copy { display: flex; flex-direction: column; }
.discussion-feed.is-card-view .feed-copy footer { margin-top: auto; padding-top: 20px; gap: 12px; }
.discussion-feed.is-card-view > .feed-empty { grid-column: 1 / -1; }
.discussion-page-container .discussion-feed article { padding: 28px; border-color: var(--line); border-radius: 12px; box-shadow: 0 1px 3px #16343f03; transition: border-color .18s, box-shadow .18s; }
.discussion-page-container .discussion-feed article:hover { border-color: #9eb3bd; box-shadow: 0 8px 24px #16343f06; }
.discussion-page-container .discussion-feed article:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.discussion-page-container .feed-copy > div:first-child { flex-wrap: wrap; gap: 8px 12px; }
.discussion-page-container .feed-copy h2 { margin: 16px 0 10px; font-size: 21px; line-height: 1.5; font-weight: 570; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; }
.discussion-page-container .feed-copy > p { font-size: 16px; line-height: 1.8; }
.discussion-page-container .feed-copy footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 12px; }
.discussion-page-container .vote-box button { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.discussion-page-container .vote-box button.active { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.discussion-page-container .vote-box b { margin-top: 5px; font-size: 16px; font-weight: 550; }
.discussion-page-container .vote-box small { font-size: 12px; }
.discussion-page-container .avatar-token { width: 32px; height: 32px; font-size: 12px; }
.discussion-page-container .training-result-inline { margin-top: 16px; gap: 8px; }
.discussion-page-container .training-result-inline span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.discussion-page-container .discussion-aside > section { padding: 20px; border-radius: 12px; }
.discussion-page-container .discussion-aside h3 { font-size: 17px; }
.inner-page .thread-body { font-size: 16px; line-height: 1.85; }
.inner-page .engine-entry { margin-top: 24px; border-radius: 12px; box-shadow: none; }

@media (max-width: 1180px) {
  .practice-explorer { grid-template-columns: minmax(0, 1fr); }
  .practice-readout { min-height: 110px; padding: 16px 0 0; border-top: 1px solid #345663; }
  .practice-readout p { max-width: 75ch; }
  .assignment-board { grid-template-columns: 300px minmax(0, 1fr); }
  .detail-hero { grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; }
  .training-catalog-page .training-layout { grid-template-columns: minmax(0, 1fr); }
  .training-catalog-page .training-history { position: static; }
  .training-catalog-page #trainingRunList { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .me-page .me-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .me-page .me-hero-perf { grid-template-columns: 132px minmax(0, 1fr); padding: 24px; gap: 20px; }
  .me-page .me-ring { width: 132px; height: 132px; }
  .discussion-page-container .discussion-layout { grid-template-columns: minmax(0, 1fr) 250px; }
}
@media (max-width: 850px) {
  .assignment-board { grid-template-columns: minmax(0, 1fr); }
  .assignment-calendar { margin: 20px 24px 0; }
  .calendar-days button { min-height: 88px; }
  .detail-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  .detail-hero-copy { padding: 0; }
  .detail-hero-facts { gap: 8px 16px; }
  .training-catalog-page .training-scenario-card { grid-template-columns: minmax(160px, .65fr) minmax(0, 1.35fr); }
  .library-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .library-toolbar .chip-filter { width: 100%; justify-content: flex-start; }
  .me-page .me-hero { grid-template-columns: minmax(0, 1fr); }
  .me-page .me-hero-perf { grid-template-columns: 150px minmax(0, 1fr); }
  .me-page .me-ring { width: 150px; height: 150px; }
  .me-page .me-support { grid-template-columns: minmax(0, 1fr); }
  .discussion-page-container .discussion-layout { grid-template-columns: minmax(0, 1fr); }
  .discussion-page-container .discussion-aside { position: static; }
}
@media (max-width: 560px) {
  .inner-page:not(.training-workspace-page) > .page-container { padding-top: 24px; }
  .practice-explorer { padding: 20px; gap: 18px; }
  .practice-explorer > header > span { display: none; }
  .practice-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-path::before { display: none; }
  .practice-path small { font-size: 11px; }
  .practice-path button { background: #204553; }
  .assignment-calendar { margin: 16px 20px 0; padding: 14px; }
  .training-catalog-page .training-scenario-card { grid-template-columns: minmax(0, 1fr); }
  .training-catalog-page .training-scenario-art { height: 220px; }
  .scenario-equipment { object-position: 50% 40%; }
  .training-catalog-page .training-scenario-card > div:last-child { padding: 20px; }
  .me-page .assignment-row { align-items: stretch; flex-direction: column; padding: 20px; gap: 16px; }
  .me-page .assignment-action .page-primary { width: 100%; }
  .me-page .assignment-period-controls, .me-page .me-card-head { padding: 16px 20px; }
  .me-page #assignmentPeriodSummary { flex-basis: 100%; margin: 0; }
  .me-page .me-hero-perf { grid-template-columns: 112px minmax(0, 1fr); padding: 20px; gap: 16px; }
  .me-page .me-ring { width: 112px; height: 112px; }
  .me-page .me-ring-center strong { font-size: 32px; }
  .me-page .me-compare > div { grid-template-columns: 36px minmax(0, 1fr) 40px; gap: 6px; }
  .me-page .me-hero-chips { gap: 6px; }
  .fault-library-page .fault-case-card { padding: 20px; }
  .inner-page .report-controls { padding: 16px; }
  .inner-page .report-controls label { flex: 1 1 140px; min-width: 0; flex-direction: column; align-items: stretch; }
  .inner-page .report-controls input, .inner-page .report-controls select { width: 100%; min-width: 0; }
  .discussion-page-container .discussion-feed article, .discussion-page-container .discussion-highlight { padding: 20px; }
}

/* 네 가지 기본 흐름. 실제 조작과 기록을 중심에 둡니다. */
/* Experience surfaces: one working canvas, a clear selection, an observable result. */
.inner-page:not(.home-page) { background: var(--bg); }
.inner-page :is(button, a, summary, select, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.inner-page .page-primary { transition: background .18s, transform .18s; }
.inner-page .page-primary:active { transform: translateY(1px); }
.inner-page .page-primary:disabled { cursor: default; opacity: .6; transform: none; }
.inner-page .detail-hero h1, .inner-page .me-intro h1, .inner-page .page-heading h1 { font-size: clamp(32px, 2.8vw, 46px); font-weight: 560; letter-spacing: -.05em; }
.training-catalog-hero { min-height: 0; align-items: start; grid-template-columns: minmax(0, 680px) minmax(340px, 480px); justify-content: start; column-gap: 32px; }
.practice-launch { display: grid; justify-items: end; gap: 12px; }
.practice-launch .page-primary,
html.soft-dark .practice-launch .page-primary,
body.soft-dark .practice-launch .page-primary {
  min-height: 52px; padding: 14px 24px; gap: 36px; font-size: 16px;
  color: #ffffff; background: #102e3d;
}
.practice-launch > span { font-size: 12px; color: var(--ink-3); }
.practice-launch .page-primary:hover:not(:disabled) { background: #1d4a58; }
.training-catalog-hero .detail-hero-facts { display: none; }
.practice-guide { margin: 20px 0 32px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.practice-guide > summary { padding: 16px 20px; color: var(--ink); font-size: 14px; cursor: pointer; }
.practice-guide > summary > span { margin-left: 16px; color: var(--ink-3); font-size: 12px; }
.practice-guide .practice-explorer { margin: 0; border-radius: 0 0 10px 10px; }
.practice-guide .practice-path small, .practice-guide .practice-readout > div > span, .practice-guide .detail-kicker { font-size: 12px; }
/* 체험 화면의 제목·상세·로그는 현재 테마를 따르고, 단선도만 어두운 작업면을 유지합니다. */
#practiceStageMount > .training-preview { border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; color: var(--ink); background: var(--surface); box-shadow: 0 4px 8px #102c3903, 0 18px 40px #102c3908; }
#practiceStageMount .training-preview > summary { margin: 0; padding: 18px 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); background: var(--surface); }
#practiceStageMount .training-preview > summary::after, #practiceStageMount .lp-board-note { color: var(--ink-3); font-size: 12px; }
#practiceStageMount .lp-eyebrow { color: var(--ink-3); font-size: 12px; letter-spacing: .04em; }
#practiceStageMount .lp-section-head h2 { margin-top: 6px; color: var(--ink); font-size: 22px; font-weight: 570; letter-spacing: -.03em; }
#practiceStageMount .lp-board { border: 0; border-radius: 0; grid-template-columns: minmax(0, 1fr) 320px; }
#practiceStageMount .lp-board-main {
  --surface: #0b202c; --line: #24414e; --line-strong: #587580; --ink: #edf6f7; --ink-2: #c1d6df; --ink-3: #96b3c1;
  --accent: #acf0d1; --accent-line: #639b8c; --teal: #acf0d1; --amber: #f5bc72; background: #0b202c; box-shadow: inset 0 1px #ffffff08;
}
#practiceStageMount .lp-board-head { min-height: 58px; padding: 16px 26px; font-family: var(--font); font-size: 13px; }
#practiceStageMount .lp-board-clock { color: #bfd3dc; font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.board-toolbar { padding: 16px 26px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; color: #abc2ce; font-size: 12px; }
.board-toolbar > div { display: flex; align-items: center; gap: 10px; }
.board-legend { display: flex; align-items: center; gap: 16px; }
.board-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.board-legend i { width: 14px; border-top: 2px solid #acf0d1; }
.board-legend i.is-dead { border-color: #809ba8; border-top-style: dashed; }
.board-legend i.is-trip { border-color: #f5bc72; }
.board-toolbar button { min-height: 36px; padding: 6px 12px; color: #c5dae1; border: 1px solid #496572; border-radius: 7px; font-size: 13px; }
.board-toolbar button[aria-pressed="true"] { color: #b9f4d9; border-color: #457866; background: #183b3f; }
.board-toolbar input { width: 80px; accent-color: #acf0d1; }
.board-toolbar output { min-width: 40px; font-variant-numeric: tabular-nums; }
#practiceStageMount .lp-board-scroll { max-height: 620px; padding: 34px 26px 16px; overflow: auto; background-image: linear-gradient(#b6d1da05 1px, transparent 1px), linear-gradient(90deg, #b6d1da05 1px, transparent 1px); background-size: 64px 64px; scrollbar-color: #547480 #102b38; }
#practiceStageMount .lp-board-svg { max-width: 850px; min-width: 520px; max-height: none; margin: 0 auto; }
#practiceStageMount .lp-lab { font-family: var(--font); font-size: 12px; letter-spacing: .01em; }
#practiceStageMount .lp-board-hint { margin: 14px 26px 24px; padding-top: 16px; border-top: 1px solid #24414e; color: #a9c2cd; font-size: 12px; line-height: 1.75; }
.lp-dev[aria-pressed="true"] .lp-focus { opacity: 1; stroke: #b5f6dc; stroke-width: 1.5; }
.lp-board.flow-paused .lp-flow { animation-play-state: paused !important; opacity: 0 !important; }
#practiceStageMount .lp-board-side { padding: 26px; gap: 22px; border: 0; color: var(--ink); background: var(--surface); }
.board-device-inspector { display: grid; gap: 18px; }
.board-inspector-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-state-badge { flex-shrink: 0; padding: 4px 9px; color: #526b77; background: #eef2f4; border-radius: 5px; font-size: 14px; font-weight: 550; }
.board-state-badge[data-state="tripped"] { color: #8b561c; background: #fbedd8; }
.board-state-badge[data-state="closed"] { color: #24614f; background: #e5f3ec; }
.board-device-inspector h3 { min-height: 64px; font-size: 26px; line-height: 1.3; font-weight: 560; letter-spacing: -.04em; text-wrap: balance; }
.board-device-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.board-device-facts dt { color: var(--ink-3); font-size: 12px; }
.board-device-facts dd { margin: 7px 0 0; color: var(--ink); font-size: 20px; font-weight: 550; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.board-device-facts [data-power="live"] { color: var(--accent); }
.board-device-facts [data-power="off"] { color: var(--amber); }
#practiceStageMount .board-device-inspector .page-primary { justify-content: center; min-height: 46px; margin-top: 4px; color: #ffffff; background: #123747; font-size: 15px; }
#practiceStageMount .board-device-inspector .page-primary:hover:not(:disabled) { background: #205266; }
.board-state-list { min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.board-state-list h4 { margin: 0 0 10px; color: var(--ink-3); font-size: 12px; font-weight: 500; }
#practiceStageMount .lp-annunciator { margin: 0; border: 0; border-radius: 0; gap: 2px; grid-template-columns: minmax(0, 1fr); background: none; }
#practiceStageMount .lp-annunciator li { padding: 10px 0; border: 0; background: none; }
#practiceStageMount .lp-annunciator li::before { display: none; }
#practiceStageMount .lp-annunciator b, #practiceStageMount .lp-annunciator span, #practiceStageMount .lp-annunciator em { font-family: var(--font); font-size: 12px; }
#practiceStageMount .lp-annunciator em { padding: 3px 6px; border-radius: 4px; background: var(--surface-3); letter-spacing: 0; }
#practiceStageMount .lp-annunciator li[data-state="normal"] em { color: #24614f; background: #e5f3ec; }
#practiceStageMount .lp-annunciator li:is([data-state="trip"], [data-state="interlock"]) em { color: #8b561c; background: #fbedd8; }
#practiceStageMount .lp-board-readout { min-height: 80px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--ink-2); font-size: 14px; line-height: 1.75; }
#practiceStageMount .lp-board-readout[data-mode="refuse"] { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
#practiceStageMount .lp-board-readout[data-mode="win"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
#practiceStageMount .lp-board-counters, #practiceStageMount .lp-board-reset { font-size: 12px; }
#practiceStageMount .lp-board-pair { margin: 0; padding: 26px; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); border-top: 1px solid var(--line); gap: 28px; color: var(--ink); background: var(--surface); }
#practiceStageMount .lp-debrief { grid-template-columns: repeat(3, minmax(0, 1fr)); border: 0; border-radius: 0; background: none; }
#practiceStageMount .lp-debrief { gap: 20px; }
#practiceStageMount .lp-debrief > li { min-width: 0; padding: 16px 0 0; border: 0; border-top: 2px solid var(--line); }
#practiceStageMount .lp-debrief-step { font-family: var(--font); font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
#practiceStageMount .lp-debrief-step i { display: none; }
#practiceStageMount .lp-debrief strong { margin-top: 12px; color: var(--ink); font-size: 16px; font-weight: 560; }
#practiceStageMount .lp-debrief p { font-size: 14px; line-height: 1.8; }
#practiceStageMount .lp-debrief [data-complete="true"] { border-top-color: var(--accent); }
#practiceStageMount .lp-debrief [data-complete="true"] .lp-debrief-step { color: var(--accent); }
#practiceStageMount .lp-debrief [data-complete="true"] .lp-debrief-step i { background: #2b8d70; box-shadow: none; }
.board-log-panel { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface-2); }
.board-log-panel > summary { cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 550; }
.board-log-panel summary small { margin-left: 12px; color: var(--ink-3); font-size: 12px; }
.board-log-panel ol { max-height: 156px; margin: 14px 0 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; }
.board-log-panel li { display: flex; gap: 12px; padding: 10px 0; color: var(--ink-2); font-size: 12px; line-height: 1.7; }
.board-log-panel li + li { border-top: 1px solid var(--line); }
.board-log-panel time { flex: 0 0 auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.board-log-panel [data-mode="refuse"] span { color: var(--amber); }
.board-log-panel [data-mode="win"] span { color: var(--accent); }
#practiceStageMount :focus-visible, .practice-guide > summary:focus-visible { outline: 2px solid #3c997d; outline-offset: 3px; }
.assignment-view-switch { display: flex; padding: 3px; gap: 3px; margin-left: auto; border-radius: 9px; background: #eaf0f2; }
.me-page .assignment-view-switch button { min-height: 36px; padding: 6px 14px; color: var(--ink-2); border: 0; border-radius: 7px; font-size: 14px; }
.me-page .assignment-view-switch [aria-pressed="true"] { color: #fff; background: #173b4a; }
.assignment-view-switch :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.assignment-board:has(.is-stage-view) { grid-template-columns: minmax(0, 1fr); }
.assignment-board:has(.is-stage-view) .assignment-calendar { display: none; }
.assignment-list.is-stage-view { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); align-items: start; gap: 18px; padding: 24px; overflow-x: auto; overscroll-behavior-x: contain; }
.assignment-lane { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.assignment-lane > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 16px; }
.assignment-lane h3 { color: var(--ink); font-size: 16px; font-weight: 550; }
.assignment-lane > header > span { min-width: 26px; padding: 3px 6px; border-radius: 5px; background: #e0e8ec; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.assignment-lane[data-stage="1"] > header { color: var(--accent); }
.assignment-lane[data-stage="2"] > header > span { color: #24614f; background: #e5f3ec; }
.me-page .assignment-lane .assignment-row { gap: 18px; padding: 22px 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 2px 4px #16343f03; }
.me-page .assignment-lane .assignment-row + .assignment-row { margin-top: 12px; }
.me-page .assignment-lane .assignment-main h3 { font-size: 18px; line-height: 1.55; }
.me-page .assignment-lane .assignment-main p { font-size: 16px; }
.assignment-lane .assignment-context { font-size: 12px; gap: 4px 8px; }
.assignment-lane .assignment-context span + span::before { margin-right: 8px; }
.assignment-lane .assignment-footer { align-items: stretch; gap: 14px; }
.assignment-lane .assignment-action, .assignment-lane .assignment-action .page-primary { width: 100%; }
.assignment-lane .assignment-metrics { gap: 10px; }
.assignment-lane .assignment-metrics dd { font-size: 18px; }
.assignment-lane-empty { padding: 24px 8px; color: var(--ink-3); font-size: 14px; text-align: center; }
.assignment-list.is-stage-view > .training-empty { grid-column: 1 / -1; }
.fault-library-page .case-workbench { grid-template-columns: minmax(260px, .6fr) minmax(0, 1.4fr); align-items: start; gap: 24px; }
.case-workbench > .training-empty, .case-workbench > .load-note, .case-workbench > .panel-empty { grid-column: 1 / -1; }
.case-index { min-width: 0; max-height: 730px; overflow-y: auto; overscroll-behavior: contain; position: sticky; top: calc(var(--topbar-h) + 20px); padding: 14px; color: #c5d7df; border: 1px solid #243e4d; border-radius: 14px; background: #102b3a; scrollbar-width: thin; scrollbar-color: #547383 transparent; }
.case-index > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 26px; color: #e2ecef; font-size: 16px; font-weight: 550; }
.case-index > header b { color: #bad0da; font-size: 12px; font-weight: 400; }
.case-index > button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; align-items: start; gap: 12px; padding: 14px 12px; color: #c4d6df; text-align: left; border: 1px solid transparent; border-radius: 9px; transition: background .18s, border-color .18s, color .18s; }
.case-index > button + button { margin-top: 6px; }
.case-index > button:hover { background: #183848; }
.case-index > button[aria-pressed="true"] { background: #f1f6f4; border-color: #f1f6f4; color: #14372f; box-shadow: 0 4px 10px #0000000d; }
.case-index > button[aria-pressed="true"] :is(small, .case-index-number) { color: #536e73; }
.case-index > button[aria-pressed="true"] em { color: #286551; }
.case-index-number { padding-top: 2px; color: #99b7c5; font-size: 12px; font-variant-numeric: tabular-nums; }
.case-index small { display: block; color: #b3cbd7; font-size: 12px; line-height: 1.6; }
.case-index button b { display: block; margin-top: 6px; font-size: 15px; font-weight: 550; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.case-index em { display: block; margin-top: 6px; color: #b4d6d1; font-size: 12px; font-style: normal; }
.case-index svg { width: 16px; height: 16px; margin-top: 3px; }
.case-index :focus-visible { outline: 2px solid #b0f4d6; outline-offset: -2px; }
.fault-library-page .case-dossier { --dossier-inset: clamp(24px, 2.8vw, 40px); min-height: 610px; padding: var(--dossier-inset); overflow: hidden; border-radius: 14px; box-shadow: 0 4px 16px #16343f04; animation: dossier-arrive .24s ease-out; }
.case-dossier > header { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.case-dossier-label { margin-right: auto; color: var(--accent); font-size: 13px; font-weight: 550; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.case-dossier-label i { color: var(--ink-3); font-style: normal; }
.fault-library-page .case-dossier h3 { max-width: 26ch; margin-top: 28px; font-size: clamp(26px, 2.25vw, 36px); line-height: 1.4; font-weight: 570; text-wrap: balance; }
.fault-library-page .case-dossier .fault-case-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; border-radius: 0; gap: 20px; }
.fault-library-page .case-dossier .fault-case-facts dt { font-size: 12px; }
.fault-library-page .case-dossier .fault-case-facts dd { margin-top: 9px; font-size: 16px; font-weight: 550; line-height: 1.5; overflow-wrap: anywhere; }
.case-brief { margin-top: 28px; }
.case-brief h4 { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.case-brief p { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; }
.case-dossier .case-analysis { margin-top: 28px; border: 0; }
.case-dossier .case-analysis summary { min-height: 44px; padding-bottom: 18px; font-size: 16px; color: var(--ink); }
.case-dossier .case-analysis-path { gap: 0; padding-bottom: 8px; }
.case-dossier .case-analysis-path section { padding: 22px 0; border-top: 1px solid var(--line); }
.case-dossier .case-analysis-path h4 { font-size: 16px; font-weight: 550; }
.case-dossier .case-analysis-path p { margin-top: 10px; font-size: 16px; line-height: 1.85; }
.fault-library-page .case-dossier footer { margin: 24px calc(-1 * var(--dossier-inset)) calc(-1 * var(--dossier-inset)); padding: 24px var(--dossier-inset); border-top: 1px solid var(--line); background: var(--surface-2); }
.case-dossier footer small { max-width: 52%; color: var(--ink-2); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.case-dossier footer small > span { display: block; margin-bottom: 4px; color: var(--ink-3); font-size: 12px; }
.fault-library-page .case-dossier footer .page-primary { min-height: 46px; justify-content: space-between; gap: 24px; }
.discussion-page-container .discussion-highlight { --ink: #e5f0f3; --ink-2: #bdd2dc; --ink-3: #bdd2dc; --accent: #b5f2d9; color: #e5f0f3; background: #143545; }
.discussion-page-container .discussion-highlight > div > p, .discussion-page-container .discussion-highlight footer { color: #bdd2dc; }
.discussion-page-container .discussion-highlight h2 { color: #f4faf9; }
.discussion-page-container .discussion-highlight .topic-badge { color: #b5f2d9; background: #264c53; }
@keyframes dossier-arrive { from { opacity: .55; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 1440px) {
  .inner-page:not(.training-workspace-page) > .page-container,
  .home-page .lp-body,
  .training-workspace-container {
    width: min(1680px, calc(100% - clamp(24px, 3vw, 56px)));
  }
  .training-entry-grid,
  .lp-quick.training-paths { gap: 18px; }
  .discussion-page-container .discussion-layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (min-width: 1600px) {
  .inner-page:not(.training-workspace-page) > .page-container,
  .home-page .lp-body,
  .training-workspace-container {
    width: min(1840px, calc(100% - clamp(20px, 2.4vw, 48px)));
  }
  .training-entry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .training-library-workbench { grid-template-columns: minmax(0, 1fr) 340px; }
  .monthly-workbench .assignment-board { grid-template-columns: minmax(520px, 1.05fr) minmax(0, 1fr); }
  .discussion-page-container .discussion-layout { grid-template-columns: minmax(0, 1fr) 340px; }
  .report-page .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  #practiceStageMount .lp-board { grid-template-columns: minmax(0, 1fr) 270px; }
  #practiceStageMount .lp-board-side { padding: 20px; }
  #practiceStageMount .lp-board-pair { grid-template-columns: minmax(0, 1fr); }
  .fault-library-page .case-workbench { grid-template-columns: minmax(230px, .65fr) minmax(0, 1.35fr); gap: 16px; }
  .fault-library-page .case-dossier .fault-case-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 850px) {
  .training-catalog-hero, .fault-library-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .training-overview { width: 100%; max-width: none; }
  .practice-launch { justify-items: start; }
  #practiceStageMount .lp-board { grid-template-columns: minmax(0, 1fr); }
  #practiceStageMount .lp-board-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; }
  #practiceStageMount .lp-board-readout { margin: 0; }
  .fault-library-page .case-workbench { grid-template-columns: minmax(0, 1fr); }
  .fault-library-page .case-index { position: static; display: block; max-height: 280px; overflow: auto; }
  .case-index > header { padding: 4px 12px 14px; }
  .fault-library-page .case-dossier { min-height: 0; }
  .fault-library-page .case-dossier .fault-case-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  #practiceStageMount .training-preview > summary { padding: 18px; }
  #practiceStageMount .lp-board-note { display: none; }
  #practiceStageMount .lp-board-head { padding-inline: 18px; }
  .board-toolbar { padding-inline: 18px; }
  #practiceStageMount .lp-board-scroll { padding-inline: 18px; }
  #practiceStageMount .lp-board-side { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  #practiceStageMount .lp-board-pair { padding: 20px; }
  #practiceStageMount .lp-debrief { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .practice-guide > summary > span { display: none; }
  .me-page .me-card-head { flex-wrap: wrap; gap: 12px; }
  .assignment-view-switch { margin-left: 0; }
  .assignment-list.is-stage-view { padding: 16px; gap: 12px; }
  .fault-library-page .case-dossier .fault-case-facts { grid-template-columns: minmax(0, 1fr); }
  .case-dossier footer { flex-direction: column; align-items: stretch; }
  .case-dossier footer small { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .case-dossier { animation: none !important; }
  .case-index > button, .inner-page .page-primary, .training-catalog-page .training-scenario-card, .discussion-page-container .discussion-feed article { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-path button, .calendar-days button, .case-analysis summary svg, .performance-bars > button, .performance-bar-track i { transition: none; }
}
.lp-quick.training-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.training-paths > button { min-height: 240px; padding: 28px; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 22px; border-radius: 16px; transition: background .2s, border-color .2s, box-shadow .2s; }
.training-paths > button:first-child { --ink: #eef8f5; --ink-2: #bad0d9; --ink-3: #bad0d9; --accent: #b6efd7; color: var(--ink); background: #143646; border-color: #143646; }
.training-paths > button:hover { border-color: var(--accent-line); box-shadow: 0 10px 30px #16343f0b; }
.training-paths > button:first-child:hover { background: #1a4655; border-color: #3d6d71; }
.training-paths > button > i { width: auto; height: auto; justify-self: start; color: var(--ink-3); background: none; font-size: 14px; font-style: normal; font-weight: 450; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.training-paths > button > span { gap: 7px; }
.training-paths b { color: var(--ink); font-size: 23px; line-height: 1.45; font-weight: 550; letter-spacing: -.035em; word-break: keep-all; text-wrap: balance; }
.training-paths small { color: var(--accent); font-size: 14px; line-height: 1.5; white-space: normal; }
.training-paths .training-path-detail { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; word-break: keep-all; }
.training-paths > button::after { top: 35px; right: 30px; width: 8px; height: 8px; border-color: var(--ink-3); }
.training-paths > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.training-paths > button:first-child:focus-visible { outline-color: #427b74; }
@media (max-width: 1300px) {
  .lp-quick.training-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lp-quick.training-paths { grid-template-columns: minmax(0, 1fr); }
  .training-paths > button { min-height: 0; padding: 24px; grid-template-columns: 26px minmax(0, 1fr); gap: 10px 16px; }
  .training-paths > button > i { font-size: 14px; padding-top: 5px; }
  .training-paths b { max-width: none; font-size: 21px; }
  .training-paths .training-path-detail { grid-column: 2; }
  .training-paths > button::after { display: none; }
  #assignmentPeriodSummary { flex-basis: 100%; margin: 0; }
  .performance-scope { margin-left: 7px; font-size: 16px; }
}

/* 작업면 구성: 현황 → 선택 → 상세. 넓은 화면은 관련 정보를 나란히 보여 줍니다. */
.inner-page :is(.detail-hero, .me-intro, .page-heading) { margin-bottom: 22px; padding-bottom: 22px; }
.inner-page :is(.detail-hero, .me-intro, .page-heading) h1 { font-size: clamp(28px, 2.5vw, 40px); }
.training-catalog-hero { min-height: 0; }
.workspace-pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 22px; overflow: hidden; color: #f1f8f7; background: #112f3e; border: 1px solid #294a59; border-radius: 16px; }
.workspace-pulse > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px 20px; padding: 22px 28px; }
.workspace-pulse > div + div { border-left: 1px solid #315160; }
.workspace-pulse span { color: #d7e6eb; font-size: 14px; }
.workspace-pulse strong { grid-column: 2; grid-row: 1 / 3; color: #b4eed5; font-size: 40px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.workspace-pulse small { color: #afc7d2; font-size: 12px; line-height: 1.6; }
.training-library-workbench { gap: 22px; margin-bottom: 28px; align-items: start; }
.training-library-workbench > section { min-width: 0; }
.training-library-workbench .training-section-heading { padding: 0 0 18px; }
.training-library-workbench .training-history { margin-top: 0; border-color: var(--line-strong); background: var(--surface); }
.training-library-workbench .training-history-lead { padding-block: 18px; background: var(--surface-2); }
.training-library-workbench #trainingRunList { max-height: 560px; overflow: auto; scrollbar-width: thin; }
.training-run-archive > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 16px 22px; list-style: none; color: var(--ink-2); background: var(--surface-2); cursor: pointer; font-size: 13px; }
.training-run-archive > summary::-webkit-details-marker { display: none; }
.training-run-archive b { margin-left: 8px; color: var(--ink); }
.training-run-archive svg { width: 14px; height: 14px; }
.training-run-archive[open] > summary svg { transform: rotate(90deg); }
.training-library-workbench .training-run-card { position: relative; border-radius: 0; border-width: 0 0 1px; padding: 20px 22px; }
.training-library-workbench .training-run-card > strong { font-size: 16px; line-height: 1.6; }
.training-library-workbench .training-run-card footer button { min-height: 44px; padding: 8px 12px; font-size: 13px; }
.training-library-workbench .training-scenario-card.is-compact { background: var(--surface); }
.training-library-workbench .training-scenario-card > div:last-child { display: flex; flex-direction: column; }
.training-library-workbench .training-scenario-card footer { margin-top: auto; padding-top: 20px; }
.training-library-workbench .training-scenario-meta { margin-bottom: 18px; }
.training-library-workbench .training-scenario-card h2 { font-size: 22px; }
.training-library-workbench .training-scenario-card .scenario-brief { margin-bottom: 18px; }
.run-progress { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.run-progress li { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 26px; color: var(--ink-2); }
.run-progress li + li { border-left: 1px solid var(--line); }
.run-progress li > b { font-size: 26px; font-weight: 450; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.run-progress strong { display: block; font-size: 16px; font-weight: 550; }
.run-progress small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.6; }
.run-progress li[aria-current="step"] { color: #f1f8f7; background: #143746; }
.run-progress li[aria-current="step"] > b { color: #b4eed5; }
.run-progress li[aria-current="step"] small { color: #bdd3dc; }
.run-progress li.is-complete:not([aria-current]) { color: var(--accent); background: var(--accent-soft); }
.training-workspace-container { width: min(1600px, calc(100% - clamp(32px, 4vw, 80px))); }
.training-workspace-heading { padding: 14px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.training-frame-shell { margin-top: 14px; border-radius: 14px; box-shadow: 0 12px 32px #112f3e0c; }
.training-result-panel { max-width: 1080px; padding: 0; border-radius: 16px; overflow: hidden; }
.training-result-panel > header { padding: 20px 24px; flex-wrap: wrap; }
.training-result-panel h2 { margin-top: 6px; font-size: 24px; }
.training-result-metrics { margin: 0; padding: 18px 24px; gap: 0; color: #e7f2f5; background: #143746; border: 0; border-radius: 0; }
.training-result-metrics > div { min-width: 0; padding: 8px 18px; background: transparent; }
.training-result-metrics > div + div { border-left: 1px solid #385b69; }
.training-result-metrics dt { color: #bdd3dc; font-size: 13px; }
.training-result-metrics dd { margin-top: 10px; color: #c2f1dd; font-size: clamp(20px, 2vw, 30px); font-weight: 500; overflow-wrap: anywhere; }
.training-publish-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 28px; padding: 28px; }
.training-publish-preview { grid-column: 1; grid-row: 1 / 3; margin: 0; align-self: stretch; }
.training-publish-form > label:not(.training-publish-consent) { grid-column: 2; margin: 0; }
.training-publish-form > .training-publish-consent, .training-publish-form > footer { grid-column: 1 / -1; }
.monthly-workbench { display: grid; gap: 22px; margin-bottom: 22px; align-items: start; }
.monthly-workbench > :is(.me-card, .me-hero) { margin: 0; min-width: 0; }
.assignment-stage-meter { padding: 18px 24px; border-bottom: 1px solid var(--line); }
.assignment-state-track { height: 7px; display: flex; gap: 4px; overflow: hidden; border-radius: 8px; background: var(--surface-3); }
.assignment-state-track i { flex-basis: 0; min-width: 0; border-radius: 8px; background: #90a6b4; }
.assignment-state-track i[data-stage="1"] { background: #ae7637; }
.assignment-state-track i[data-stage="2"] { background: #28866d; }
.assignment-state-labels { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 12px; }
.assignment-state-labels span { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); }
.assignment-state-labels b { color: var(--ink); font-weight: 550; font-variant-numeric: tabular-nums; }
.assignment-state-labels i { width: 6px; height: 6px; border-radius: 50%; background: #90a6b4; }
.assignment-state-labels [data-stage="1"] i { background: #ae7637; }
.assignment-state-labels [data-stage="2"] i { background: #28866d; }
.monthly-workbench .assignment-board { grid-template-columns: minmax(300px, .7fr) minmax(0, 1fr); }
.monthly-workbench .assignment-board:has(.assignment-calendar[hidden]), .monthly-workbench .assignment-board:has(.is-stage-view) { grid-template-columns: minmax(0, 1fr); }
.monthly-workbench .assignment-calendar { min-width: 0; margin: 24px 0 24px 24px; padding: 24px; color: #eff6f8; background: #123444; border: 1px solid #244c5d; border-radius: 14px; }
.monthly-workbench .assignment-calendar header { margin-bottom: 18px; }
.monthly-workbench .assignment-calendar :is(header span, footer p, .calendar-week) { color: #bdd0da; }
.monthly-workbench .assignment-calendar h3 { margin-top: 6px; color: #f4faf9; font-size: clamp(24px, 2vw, 30px); font-weight: 550; line-height: 1.3; }
.monthly-workbench .calendar-navigation { gap: 8px; }
.monthly-workbench .calendar-navigation button { width: 42px; height: 42px; }
.monthly-workbench .calendar-week, .monthly-workbench .calendar-days { gap: 6px; }
.monthly-workbench .calendar-week { margin-bottom: 10px; font-size: 14px; }
.monthly-workbench .calendar-days > :is(button, span) { min-height: 60px; aspect-ratio: auto; border-radius: 9px; }
.monthly-workbench .calendar-days > span { background: #173b4b; opacity: .45; }
.monthly-workbench .calendar-days button { padding: 8px 4px; gap: 5px; color: #edf6f6; background: #234959; border-color: #547787; }
.monthly-workbench .calendar-days b { font-size: 17px; line-height: 1.25; }
.monthly-workbench .calendar-days button small { min-width: 26px; min-height: 16px; padding: 1px 4px; border-radius: 4px; color: #d0e5ec; background: #123444; line-height: 1.2; }
.monthly-workbench .calendar-days button small:empty { background: none; }
.monthly-workbench .calendar-days button.is-done { color: #d3f7e5; background: #234d46; border-color: #6f9f90; }
.monthly-workbench .calendar-days button.is-done small { color: #c6eed9; background: #1b3e38; }
.monthly-workbench .calendar-days button:disabled { color: #afc7d2; background: #173b4b; border-color: #294d5e; opacity: 1; }
.monthly-workbench .calendar-days button[aria-current="date"] { box-shadow: inset 0 0 0 1px #a9d9ce; }
.monthly-workbench .calendar-days button:is(:hover:not(:disabled), [aria-pressed="true"]) { color: #133b35; background: #bbefd9; border-color: #bbefd9; }
.monthly-workbench .calendar-days button:is(:hover:not(:disabled), [aria-pressed="true"]) small { color: #214d40; background: #e1f9ec; }
.monthly-workbench .calendar-navigation button, .monthly-workbench .assignment-calendar footer button { color: #d6f5e9; background: #254b58; border-color: #486976; }
.monthly-workbench .assignment-calendar > footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-color: #385b6a; }
.monthly-workbench .assignment-calendar footer button { min-height: 40px; padding: 8px 16px; }
.monthly-workbench .assignment-calendar footer button:disabled { color: #9fbac7; background: transparent; border-color: #385b6a; }
.monthly-workbench .assignment-calendar footer p { margin-top: 8px; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 16px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 7px; color: #d1e2e8; font-size: 12px; }
.calendar-legend i { width: 9px; height: 9px; border: 1px solid #7394a3; border-radius: 3px; background: #234959; }
.calendar-legend .is-done i { background: #a4d8bf; border-color: #bde9d3; }
.monthly-workbench .assignment-calendar :focus-visible { outline-color: #b5f2d9; }
.monthly-workbench .assignment-list:not(.is-stage-view) { display: grid; align-content: start; gap: 14px; padding: 24px; }
.monthly-workbench .assignment-list:not(.is-stage-view) > .assignment-row { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.monthly-workbench .assignment-list:not(.is-stage-view) > .assignment-row.in_progress { border-color: var(--accent-line); }
.monthly-workbench .assignment-list:not(.is-stage-view) > .assignment-row:hover { border-color: var(--line-strong); background: var(--surface-2); }
.me-page .monthly-workbench .me-hero-perf { --ink: #edf6f6; --ink-2: #c1d7df; --ink-3: #b5cdd7; --accent: #b6ecd5; --line-strong: #6b939f; --surface-3: #2c4d5c; color: var(--ink); background: #143746; }
.monthly-workbench .me-hero-figures :is(.me-eyebrow, .me-compare dt) { color: #c1d7df; font-size: 14px; }
.monthly-workbench .me-hero-chips span { color: #d6e8ee; background: #284b5c; }
.monthly-workbench .me-hero-chips b { color: #c0f0d9; }
.monthly-workbench .me-hero-next { border-left: 0; }
#processStats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; color: #d2e4ea; background: #183b4a; }
#processStats > span { padding: 20px 26px; font-size: 14px; }
#processStats > span + span { border-left: 1px solid #385b69; }
#processStats b { display: block; margin: 10px 0 0; color: #eaf7f4; font-size: 30px; font-weight: 500; }
.process-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; padding: 22px 24px; }
.process-period { min-width: 0; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.process-period strong { font-size: 14px; font-weight: 550; }
.process-period .report-track { width: 100%; height: 6px; }
.process-period small { font-size: 12px; color: var(--ink-2); }
.process-run[open] > summary { color: var(--accent); background: var(--accent-soft); }
.process-run-body .process-trace { padding-block: 20px; }
.fault-library-hero { min-height: 0; align-items: start; grid-template-columns: minmax(0, 680px) minmax(340px, 480px); justify-content: start; column-gap: 32px; }
.case-library-stats { display: flex; flex-wrap: wrap; gap: 22px 34px; margin: 22px 0 0; }
.case-library-stats > div { display: flex; align-items: baseline; gap: 14px; }
.case-library-stats dt { color: var(--ink-2); font-size: 14px; }
.case-library-stats dd { margin: 0; color: var(--ink); font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fault-library-page .case-workbench { grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
.fault-library-page .case-index { max-height: 840px; overflow: auto; scrollbar-width: thin; }
.fault-library-page .case-dossier { min-height: 0; --dossier-inset: 28px; }
.fault-library-page .case-dossier h3 { max-width: none; margin-top: 22px; font-size: clamp(24px, 2vw, 32px); }
.fault-library-page .case-dossier .fault-case-facts { margin-top: 22px; padding: 22px; color: #e9f4f5; background: #153747; border: 0; border-radius: 12px; }
.fault-library-page .case-dossier .fault-case-facts dt { color: #bbd2dd; font-size: 14px; }
.fault-library-page .case-dossier .fault-case-facts dd { color: #eef8f6; }
.case-dossier .case-analysis-path { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.case-dossier .case-analysis-path section { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.case-dossier .case-analysis-path section > span { margin: 0; color: var(--accent); font-size: 20px; font-weight: 450; }
.case-dossier .case-analysis-path section:last-child { background: var(--accent-soft); border-color: var(--accent-line); }
.case-dossier .case-analysis-path p { margin-top: 6px; font-size: 14px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.discussion-page-container .discussion-layout { gap: 22px; }
.discussion-page-container .discussion-toolbar { padding: 16px 18px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.discussion-page-container .discussion-toolbar .chip-filter { gap: 4px; }
.discussion-page-container .discussion-feed article { padding: 24px; }
.discussion-page-container .discussion-feed.is-card-view article { height: 100%; }
.discussion-page-container .discussion-feed.is-card-view .feed-copy { display: flex; flex-direction: column; min-width: 0; }
.discussion-page-container .discussion-feed.is-card-view footer { margin-top: auto; padding-top: 18px; }
.discussion-page-container .discussion-feed.is-card-view .feed-copy > p { margin-bottom: 18px; }
.discussion-aside .discussion-queue { color: #e8f4f3; background: #163a49; border-color: #335765; }
.discussion-queue .card-label { color: #c4dbdf; }
#discussionQueue > button { width: 100%; display: grid; gap: 10px; padding: 20px 0; text-align: left; border-bottom: 1px solid #375763; }
#discussionQueue > button:last-child { border-bottom: 0; padding-bottom: 0; }
#discussionQueue small { color: #b7ced7; font-size: 12px; }
#discussionQueue strong { color: #f0f8f5; font-size: 16px; font-weight: 550; line-height: 1.6; }
#discussionQueue span { display: flex; align-items: center; justify-content: space-between; color: #b3ebd3; font-size: 14px; }
#discussionQueue svg { width: 16px; height: 16px; }
#discussionQueue > p { margin-top: 18px; color: #c3d8df; font-size: 14px; line-height: 1.8; }
#discussionQueue > button:hover strong { color: #b3ebd3; }
#discussionQueue > button:focus-visible { outline-color: #b3ebd3; }
.thread-container .thread-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
.thread-container .thread-question { padding: 30px; border-radius: 16px; background: var(--surface); border-color: var(--line-strong); }
.thread-container .thread-question h1 { margin-block: 20px; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.4; }
.thread-container .thread-body { font-size: 16px; line-height: 1.95; }
.thread-container .thread-body :is(ol, ul) { padding: 22px 22px 22px 42px; border-radius: 12px; background: var(--surface-2); }
.thread-container .answers-section { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.thread-container .answer { padding: 24px 0; }
.thread-container .reply-composer { border-color: var(--line-strong); border-radius: 16px; background: var(--surface); }
.thread-container .reply-composer textarea, .training-publish-form textarea { font-size: 16px; line-height: 1.75; }
.thread-container .reply-composer:focus-within { border-color: var(--accent); }
.training-publish-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.thread-aside > section:first-child { --ink: #e9f4f5; --ink-2: #c2d7de; --ink-3: #b4ccd7; --line: #365a69; --accent: #b5eed7; --accent-soft: #28505d; color: var(--ink); background: #163a49; border-color: #365a69; }
.engine-console-shell { height: max(480px, calc(100svh - var(--topbar-h) - 36px)); margin: 18px 22px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: #102b3b; }
@media (min-width: 1500px) {
  .training-library-workbench { grid-template-columns: minmax(0, 1fr) 310px; }
  .training-library-workbench .training-scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .training-library-workbench .training-scenario-card.is-featured { grid-column: 1 / -1; }
  .training-library-workbench .training-scenario-card.is-compact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1300px) {
  .monthly-workbench .assignment-board { grid-template-columns: minmax(0, 1fr); }
  .monthly-workbench .assignment-calendar { margin: 24px 24px 0; }
}
@media (max-width: 1440px) {
  .case-dossier .case-analysis-path { grid-template-columns: minmax(0, 1fr); }
  .case-dossier .case-analysis-path section { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; }
  .case-dossier .case-analysis-path section > span { margin-bottom: 0; }
}
@media (max-width: 1100px) {
  .workspace-pulse > div { padding: 20px; gap: 7px 12px; }
  .workspace-pulse strong { font-size: 32px; }
  .fault-library-page .case-workbench { grid-template-columns: 260px minmax(0, 1fr); }
  .thread-container .thread-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 850px) {
  .fault-library-page .case-workbench { grid-template-columns: minmax(0, 1fr); }
  .fault-library-page .case-index { max-height: 360px; }
  .training-result-panel > header { padding: 16px 20px; }
  .training-result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .training-result-metrics > div { padding: 12px 10px; }
  .training-result-metrics > div:nth-child(odd) { border-left: 0; }
  .training-result-metrics > div:nth-child(n+3) { border-top: 1px solid #385b69; }
  .training-publish-form { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .training-publish-preview, .training-publish-form > label:not(.training-publish-consent) { grid-column: 1; grid-row: auto; }
  .run-progress li { align-items: start; padding: 16px; gap: 10px; }
  .run-progress small { display: none; }
  .run-progress li > b { font-size: 20px; }
}
@media (max-width: 600px) {
  .monthly-workbench .assignment-calendar { margin: 16px 16px 0; padding: 16px 12px; }
  .monthly-workbench .assignment-calendar header { margin-bottom: 20px; }
  .monthly-workbench .calendar-week, .monthly-workbench .calendar-days { gap: 3px; }
  .monthly-workbench .calendar-days > :is(button, span) { min-height: 58px; }
  .monthly-workbench .calendar-days button { padding: 6px 1px; gap: 2px; }
  .monthly-workbench .calendar-days b { font-size: 14px; }
  .monthly-workbench .calendar-days button small { min-width: 0; padding-inline: 2px; }
  .monthly-workbench .assignment-list:not(.is-stage-view) { padding: 16px; }
  .monthly-workbench .assignment-list:not(.is-stage-view) > .assignment-row { padding: 18px; }
  .workspace-pulse { grid-template-columns: minmax(0, 1fr); }
  .workspace-pulse > div { padding: 16px 20px; }
  .workspace-pulse > div + div { border-left: 0; border-top: 1px solid #315160; }
  .workspace-pulse strong { font-size: 30px; }
  .run-progress li { flex-direction: column; }
  .run-progress strong { font-size: 14px; }
  .fault-library-page .case-dossier { --dossier-inset: 20px; }
  .fault-library-page .case-dossier .fault-case-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fault-library-page .case-dossier .fault-case-facts > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .fault-library-page .case-dossier .fault-case-facts dd { margin: 0; }
  #processStats > span { padding: 18px; }
  .process-periods { padding: 18px; grid-template-columns: minmax(0, 1fr); }
  .case-library-stats { gap: 14px 22px; }
  .case-library-stats > div { gap: 9px; }
  .case-library-stats dd { font-size: 24px; }
  .thread-container .thread-question, .thread-container .answers-section { padding: 20px; }
  .engine-console-shell { margin: 12px; }
}
/* Training entry: compact choices, shared light/dark surface tokens. */
.training-catalog-page .training-catalog-hero { min-height: 0; padding: 8px 0 22px; border: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; }
.training-catalog-page .training-catalog-hero h1 { margin: 10px 0 0; font-size: clamp(30px, 2.8vw, 42px); }
.training-catalog-hero .detail-kicker { color: var(--accent); font-size: 12px; font-weight: 650; }
.training-brief {
  max-width: 54ch;
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
}
.training-brief-points { list-style:none; margin:16px 0 0; padding:0; max-width:54ch; display:grid; }
.training-brief-points li {
  display:grid; grid-template-columns:max-content minmax(0,1fr);
  gap:10px 14px; align-items:baseline; padding:10px 0;
  border-top:1px solid var(--line); color:var(--ink-2); font-size:13px; line-height:1.45;
}
.training-brief-points li:first-child { border-top:0; padding-top:2px; }
.training-brief-points b { color:var(--ink); font-weight:620; }
.training-overview {
  min-width: 0;
  width: min(100%, 480px);
  justify-self: end;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.training-overview > span {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: .02em;
}
.training-overview h2 {
  margin: 8px 0 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -.03em;
  line-height: 1.35;
}
.training-overview dl {
  margin: 0;
  display: grid;
}
.training-overview dl > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 14px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}
.training-overview dl > div:first-child { border-top: 0; padding-top: 2px; }
.training-overview dt { color: var(--ink); font-weight: 620; }
.training-overview dd { margin: 0; }
.training-overview > p {
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}

.training-entry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.training-entry-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .18s, box-shadow .18s, transform .18s; }
.training-entry-card.is-primary { border-color: var(--accent); background: var(--accent-soft); }
.training-entry-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 16px; font-size: 14px; color: var(--ink-2); }
.training-entry-label > span:first-child { font-weight: 650; color: var(--accent); }
.training-entry-card h2 { margin: 0 0 12px; color: var(--ink); font-size: clamp(21px, 1.6vw, 27px); letter-spacing: -.045em; line-height: 1.3; }
.training-entry-card p { margin: 0 0 22px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.training-entry-meta { margin-top: auto; padding-bottom: 20px; font-size: 14px; color: var(--ink-3); }
.training-entry-action { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 650; color: var(--accent); }
.training-entry-action svg { width: 20px; height: 20px; }
.training-entry-card .practice-launch { width: 100%; align-items: stretch; text-align: left; }
.training-entry-card .practice-launch .page-primary { width: 100%; min-width: 0; white-space: normal; }
.training-entry-card .practice-launch > span { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
a.training-entry-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 28px #102b3b0d; }
.training-entry-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1200px) { .training-entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .training-entry-grid { grid-template-columns: minmax(0, 1fr); } .training-entry-label { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .training-entry-card { transition: none; } a.training-entry-card:hover { transform: none; } }

/* Shared workspace finish: aligned navigation, quiet surfaces, readable controls. */
.sidebar-logo, .sidebar-bottom { flex-shrink: 0; }
.sidebar-logo { padding-bottom: 20px; }
.sidebar-bottom { padding-top: 18px; }
.sidebar .nav-item > span { flex: 1; }
.sidebar .nav-item b { flex: 0 0 auto; margin-left: auto; }
.sidebar .operations-nav { margin-top: 0; }
.sidebar :is(button, input):focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.route-page:not(.station-page) h1:focus-visible, .training-run-archive > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.sidebar .profile-card { background: var(--surface-2); border-color: transparent; border-radius: 12px; }
.workspace { min-width: 0; }
.inner-topbar { border-bottom-color: var(--line); }
.inner-page:not(.station-page) .inner-topbar { min-height: var(--topbar-h); height: auto; padding-block: 12px; flex-wrap: wrap; }
.inner-actions { min-width: 0; flex-wrap: wrap; }
.inner-page .detail-hero { gap: 28px; margin-bottom: 24px; align-items: start; }
.training-catalog-hero, .fault-library-hero { grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); }
.inner-page .training-boundary { display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 0; padding: 5px 9px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 7px; font-size: 11px; line-height: 1.6; }
.training-boundary svg { flex: 0 0 14px; width: 14px; height: 14px; }
.training-overview:not(details) dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.training-overview:not(details) dl > div { padding: 8px 0; }
.training-overview .case-library-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; }
.training-overview .case-library-stats > div { display: flex; flex-direction: column; gap: 8px; border-top: 0; }
.training-overview .case-library-stats dd { font-size: 28px; }
.training-start-guide { width: 100%; padding: 0; align-self: center; box-shadow: none; }
.training-start-guide > summary { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 12px; min-height: 86px; padding: 16px 18px; color: var(--ink); cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; border-radius: inherit; }
.training-start-guide > summary::-webkit-details-marker { display: none; }
.training-start-guide > summary > svg:first-child { width: 36px; height: 36px; padding: 9px; color: var(--accent); background: var(--accent-soft); border-radius: 10px; }
.training-start-guide > summary small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 11px; font-weight: 400; line-height: 1.5; }
.training-guide-chevron { width: 16px; height: 16px; color: var(--ink-3); }
.training-start-guide[open] .training-guide-chevron { transform: rotate(90deg); }
.training-start-guide > summary:hover { background: var(--surface-2); }
.training-start-guide > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.training-start-guide > dl, .training-start-guide .training-brief-points { margin: 0 18px 16px; }
.training-start-guide[open] > summary { margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.me-page .me-intro .training-overview .me-org { margin: 8px 0 0; padding: 0; border: 0; background: none; }
.inner-page .detail-hero h1, .inner-page .page-heading h1 { font-weight: 620; letter-spacing: -.045em; line-height: 1.25; }
.inner-page .detail-kicker, .inner-page .card-label { font-size: 14px; line-height: 1.5; }
.inner-page .detail-hero-copy > p { color: var(--ink-2); max-width: 60ch; }
.inner-page:not(.station-page) .ghost-action { padding: 10px 14px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.inner-page:not(.station-page) .ghost-action:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.inner-page :is(.page-primary, .ghost-action):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.inner-page :is(.panel, .me-card, .training-history) { border-color: var(--line); border-radius: 16px; box-shadow: 0 2px 8px #102b3b04; }
.training-catalog-page .training-catalog-hero { margin-bottom: 22px; padding-bottom: 4px; border-bottom: 0; }
.training-entry-grid { gap: clamp(12px, 1.2vw, 20px); }
.training-entry-card { border-radius: 16px; padding: 22px; box-shadow: 0 3px 10px #102b3b04; }
.training-entry-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.training-entry-top > svg { width: 38px; height: 38px; padding: 9px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 11px; }
.training-entry-top > span { color: var(--ink-3); font-size: 12px; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.training-entry-card h2 { margin-bottom: 10px; font-size: 21px; word-break: keep-all; }
.training-entry-card p { font-size: 14px; margin-bottom: 18px; line-height: 1.75; }
.training-entry-card .training-entry-meta { font-size: 12px; padding-bottom: 14px; }
.training-entry-card .training-entry-label { min-height: 0; margin-bottom: 12px; align-items: center; align-content: start; gap: 6px; font-size: 11px; }
.training-entry-label > span:last-child { padding: 3px 6px; color: var(--ink-3); background: var(--surface-2); border-radius: 5px; font-size: 10px; }
.training-entry-card .training-entry-action { min-height: 52px; padding: 14px 0; }
.training-entry-action svg, .training-entry-card .page-primary svg { transition: transform .18s ease; }
a.training-entry-card:hover .training-entry-action svg, .training-entry-card .page-primary:hover:not(:disabled) svg { transform: translateX(3px); }
.training-entry-card .practice-launch { min-height: 52px; }
.training-entry-card .practice-launch .page-primary { justify-content: space-between; gap: 12px; }
.training-entry-card.is-primary {
  --ink: #eff5f6; --ink-2: #bfced6; --ink-3: #a7c2cb; --accent: #a8dfce;
  --line: #335563; --surface-2: #234957; --accent-soft: #264e58; --accent-line: #41666b;
  background: linear-gradient(145deg, #173747, #183f47); border-color: #335563;
}
.training-entry-card.is-primary .practice-launch .page-primary { color: #102b3b; background: #a8dfce; border-color: #a8dfce; }
.training-entry-card.is-primary .practice-launch .page-primary:hover:not(:disabled) { color: #102b3b; background: #c4ecdf; }
.training-section-heading { align-items: center; gap: 16px; flex-wrap: wrap; }
.training-catalog-page .training-history { background: var(--surface); }
.training-catalog-page .training-history > header { padding: 22px; border-bottom: 1px solid var(--line); }
.training-catalog-page .training-scenario-card { border-radius: 14px; }
.training-catalog-page .workspace-pulse { color: var(--ink); background: var(--surface); border-color: var(--line); border-radius: 14px; }
.training-catalog-page .workspace-pulse > div { padding: 20px 24px; }
.training-catalog-page .workspace-pulse > div + div { border-color: var(--line); }
.training-catalog-page .workspace-pulse span { color: var(--ink-2); font-size: 13px; }
.training-catalog-page .workspace-pulse strong { color: var(--accent); font-size: 34px; }
.training-catalog-page .workspace-pulse small { color: var(--ink-3); font-size: 11px; }
#trainingRefreshButton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#trainingRefreshButton svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) {
  .training-entry-action svg, .training-entry-card .page-primary svg { transition: none; }
  a.training-entry-card:hover .training-entry-action svg, .training-entry-card .page-primary:hover:not(:disabled) svg { transform: none; }
}
#trainingRunList { max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
.inner-page :is(.page-primary, .ghost-action, .toolbar-select) { min-height: 44px; border-radius: 9px; }
.inner-page :is(input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inner-page :is(.chip-filter button, .text-button) { min-height: 40px; }
.discussion-toolbar .chip-filter { min-width: 0; max-width: 100%; flex-wrap: wrap; overflow: visible; }
.discussion-toolbar .discussion-view-controls { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.discussion-feed .feed-empty { grid-column: 1 / -1; padding: 32px 20px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink-2); text-align: center; }
.discussion-feed .feed-empty p { margin: 8px 0 18px; color: var(--ink-3); font-size: 14px; }
.discussion-feed .feed-empty button { margin-inline: auto; }
.case-search-row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 18px; margin-bottom: 18px; }
.case-search { display: grid; flex: 1 1 280px; gap: 6px; max-width: 480px; color: var(--ink-2); font-size: 13px; }
.case-search input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px; font: inherit; font-size: 14px; }
.case-search input::placeholder { color: var(--ink-3); }
#faultCaseResultCount { align-self: center; margin-top: 18px; color: var(--ink-3); font-size: 13px; }
.case-dossier { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.case-dossier:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.assignment-view-switch { background: var(--surface-3); }
.assignment-lane > header > span { background: var(--surface-3); color: var(--ink-2); }
.assignment-lane[data-stage="2"] > header > span { background: var(--accent-soft); color: var(--accent); }
.inner-page .report-controls :is(select, input) { min-height: 44px; border-radius: 9px; }
.inner-page .report-switch { gap: 4px; }
.inner-page .report-switch button { min-height: 46px; font-size: 14px; }
.inner-page .panel > header { background: var(--surface); border-bottom: 1px solid var(--line); }
.inner-page .panel > header h2 { font-size: 18px; font-weight: 600; }
@media (min-width: 901px) {
  .sidebar-nav .nav-item { min-height: 46px; }
  .sidebar-nav .nav-item > span { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 900px) {
  .sidebar-nav .nav-divider { display: none; }
  .sidebar { bottom: calc(12px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .sidebar .nav-item { border-radius: 9px; }
  .sidebar .nav-item > span { white-space: normal; }
  .sidebar .icon-button.soft { width: 44px; height: 44px; }
  .fault-library-page .case-index { max-height: 280px; }
  .inner-page .detail-hero { gap: 18px; }
  .training-catalog-hero, .fault-library-hero { grid-template-columns: minmax(0, 1fr); }
  .training-overview { width: 100%; max-width: none; justify-self: stretch; }
  .me-page .me-intro .training-overview { padding: 16px 18px; }
  .me-page .me-intro .training-overview h2, .me-page .me-intro .training-overview > span, .me-page .me-intro .training-overview dl { display: none; }
  .me-page .me-intro .training-overview .me-org { margin: 0; padding: 0; border: 0; background: none; }
  .fault-library-hero .training-overview > span, .fault-library-hero .training-overview h2 { display: none; }
  .fault-library-hero .training-overview .case-library-stats { margin: 0; }
}
@media (max-width: 600px) {
  .inner-page:not(.station-page) .inner-topbar { align-items: center; gap: 8px; }
  #faultCaseResultCount { margin-top: 0; }
  .inner-page .inner-topbar .ghost-action { padding: 9px 10px; font-size: 13px; }
  .training-entry-card .training-entry-label { min-height: 0; margin-bottom: 16px; }
  .inner-page .detail-hero h1, .inner-page .page-heading h1 { font-size: 28px; }
  .training-entry-grid { gap: 12px; }
  .training-entry-card { padding: 20px; }
  .training-entry-card .training-entry-top { margin-bottom: 14px; }
  .training-entry-card.is-primary p { margin-bottom: 12px; }
  .training-entry-card.is-primary .training-entry-meta { display: none; }
  a.training-entry-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px 12px; padding: 16px 18px; }
  a.training-entry-card .training-entry-top { grid-column: 1; grid-row: 1 / 4; align-self: start; margin: 0; }
  a.training-entry-card .training-entry-top > span { display: none; }
  a.training-entry-card .training-entry-label { grid-column: 2; margin: 0; }
  a.training-entry-card h2 { grid-column: 2; margin: 0; font-size: 18px; align-self: center; }
  a.training-entry-card p, a.training-entry-card .training-entry-meta { display: none; }
  a.training-entry-card .training-entry-action { grid-column: 2; border: 0; padding: 0; min-height: 28px; font-size: 12px; gap: 10px; }
  a.training-entry-card .training-entry-action svg { width: 16px; height: 16px; }
}


/* design2 densify */
html.soft-dark .chip-filter button.active,
body.soft-dark .chip-filter button.active {
  color: #10232e;
  background: var(--accent);
}
.report-series:empty,
[data-compliance-series]:empty,
[data-analytics-series]:empty,
[data-analytics-assignment-trend]:empty,
[data-compliance-rows]:empty,
[data-analytics-headquarters-rows]:empty,
[data-analytics-office-rows]:empty,
[data-analytics-faults]:empty,
[data-analytics-members]:empty {
  min-height: 168px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background:
    linear-gradient(var(--surface-2), var(--surface-2)),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
}
.report-series:empty::before,
[data-compliance-series]:empty::before,
[data-analytics-series]:empty::before,
[data-analytics-assignment-trend]:empty::before {
  content: "선택한 기간의 추이가 없습니다.";
  font-size: 14px;
}
[data-compliance-rows]:empty::before,
[data-analytics-headquarters-rows]:empty::before,
[data-analytics-office-rows]:empty::before,
[data-analytics-faults]:empty::before,
[data-analytics-members]:empty::before {
  content: "표시할 집계가 없습니다.";
  font-size: 14px;
}
.analytics-page .analytics-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.analytics-list { padding: 4px 20px 14px; }
.analytics-row { padding: 10px 0; gap: 4px 12px; }
.report-page .report-timeline .report-series { min-height: 168px; }
.engine-console-fallback:not([hidden]) {
  background: #102b3b;
  color: #d6e8ee;
}
.home-page .lp-body { padding-top: 24px; padding-bottom: 40px; }
.lp-section + .lp-section { margin-top: 24px; }
.training-page > .page-container { padding-top: 20px; padding-bottom: 40px; }
.training-entry-grid { margin-bottom: 16px; }
@media (min-width: 1440px) {
  .inner-page:not(.training-workspace-page) > .page-container { padding: 18px 0 36px; }
  .inner-page .page-heading { margin-bottom: 16px; padding-bottom: 16px; }
  .report-overview { gap: 14px; }
  .report-page { gap: 14px; }
  .monthly-workbench { gap: 16px; }
  .monthly-workbench .assignment-list:not(.is-stage-view) { padding: 16px; gap: 10px; }
  .monthly-workbench .assignment-list:not(.is-stage-view) > .assignment-row { padding: 16px 18px; }
  .training-entry-card { padding: 20px 22px; }
  .lp-features, .lp-voices, .lp-hq { gap: 10px; }
}
@media (min-width: 1600px) {
  .analytics-page .analytics-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-page .lp-body { padding-top: 20px; }
}


/* design3 polish */
.engine-console-shell:has(iframe:not([src])),
.engine-console-shell:has(iframe[src=""]) { background: #102b3b; }
.engine-console-idle,
.training-frame-idle {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px 32px;
  text-align: center;
  pointer-events: none;
}
.engine-console-idle { background: #102b3b; color: #e7f3f4; }
.training-frame-shell { position: relative; }
.training-frame-idle { background: #10232e; color: #e7f3f4; }
.engine-console-idle strong,
.training-frame-idle strong { font-size: 20px; font-weight: 560; letter-spacing: -.03em; }
.engine-console-idle p,
.training-frame-idle p { margin: 0; max-width: 36ch; color: #9db8c3; font-size: 14px; line-height: 1.55; }
.engine-console-shell:has(iframe:not([src])) .engine-console-idle,
.engine-console-shell:has(iframe[src=""]) .engine-console-idle,
.training-frame-shell:has(iframe:not([src])) .training-frame-idle,
.training-frame-shell:has(iframe[src=""]) .training-frame-idle { display: grid; }
.monthly-workbench .assignment-board { align-items: stretch; }
.monthly-workbench .assignment-list:not(.is-stage-view) {
  min-height: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}
.monthly-workbench .assignment-list:not(.is-stage-view) > .assignment-row { background: var(--surface); }
.analytics-list { padding: 2px 16px 10px; }
.analytics-row { padding: 8px 0; }
.report-series:empty,
[data-compliance-series]:empty,
[data-analytics-series]:empty,
[data-analytics-assignment-trend]:empty { min-height: 148px; }
.home-page .lp-body { padding-top: 16px; padding-bottom: 28px; }
.lp-section + .lp-section { margin-top: 16px; }
.lp-section-head { margin-bottom: 12px; }
.training-paths > button { min-height: 188px; padding: 20px 22px; gap: 14px; }
.training-paths b { font-size: 20px; }
.lp-voices { gap: 10px; }
.lp-voice { padding: 16px 18px; }
.training-page > .page-container { padding-top: 16px; padding-bottom: 28px; }
.training-library-workbench { gap: 14px; margin-bottom: 16px; }
.training-library-workbench .training-section-heading { padding: 0 0 12px; }
.practice-guide { margin: 12px 0 16px; }
.practice-guide > summary { padding: 14px 18px; }
.engine-entry { margin-top: 12px; padding: 16px 18px; }
@media (min-width: 1440px) {
  .home-page .lp-body { padding-top: 14px; padding-bottom: 24px; }
  .training-page > .page-container { padding-top: 14px; padding-bottom: 24px; }
  .lp-quick.training-paths { gap: 12px; }
  .lp-hq .hq-row { padding: 7px 8px; }
}
@media (min-width: 1600px) {
  .training-paths > button { min-height: 176px; }
  .analytics-page .analytics-split { gap: 14px; }
}


/* design4 polish */
.engine-console-shell iframe:not([src]),
.engine-console-shell iframe[src=""],
.engine-console-shell iframe[src="about:blank"],
.training-frame-shell iframe:not([src]),
.training-frame-shell iframe[src=""],
.training-frame-shell iframe[src="about:blank"] { display: none; }
.engine-console-idle,
.training-frame-idle { z-index: 2; }
.engine-console-shell:has(iframe:not([src])) .engine-console-idle,
.engine-console-shell:has(iframe[src=""]) .engine-console-idle,
.engine-console-shell:has(iframe[src="about:blank"]) .engine-console-idle,
.training-frame-shell:has(iframe:not([src])) .training-frame-idle,
.training-frame-shell:has(iframe[src=""]) .training-frame-idle,
.training-frame-shell:has(iframe[src="about:blank"]) .training-frame-idle { display: grid; }

/* design5 polish */
.engine-console-idle,
.training-frame-idle { place-items: center; align-content: center; }
.idle-card {
  width: min(440px, 100%);
  padding: 28px 30px 26px;
  border: 1px solid #3d6a7a;
  border-radius: 16px;
  background: #163847;
  box-shadow: 0 18px 40px #06141c55;
  text-align: center;
}
.training-frame-idle .idle-card { background: #152f3c; border-color: #365f6e; }
.idle-card strong {
  display: block;
  font-size: 22px;
  font-weight: 560;
  letter-spacing: -.03em;
  color: #eef7f6;
}
.idle-card p {
  margin: 10px 0 0;
  max-width: none;
  color: #9db8c3;
  font-size: 14px;
  line-height: 1.55;
}
@media (min-width: 1600px) {
  .training-workspace-container { width: min(1760px, calc(100% - clamp(24px, 2.4vw, 48px))); }
  .run-progress li { padding: 18px 22px; }
}

/* design6 polish */
.engine-console-idle,
.training-frame-idle {
  place-items: center;
  padding: 36px 28px;
  background-image: radial-gradient(circle at 50% 42%, #1a4254 0%, transparent 58%);
}
.engine-console-idle { background-color: #102b3b; }
.training-frame-idle { background-color: #10232e; }
.idle-card {
  width: min(720px, 100%);
  padding: 32px 34px 28px;
}
.idle-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border: 1px solid #3d6a7a;
  border-radius: 999px;
  color: #b7d3dc;
  font-size: 12px;
  letter-spacing: .04em;
}
.idle-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.idle-meta li {
  padding: 12px 10px;
  border: 1px solid #355f6e;
  border-radius: 12px;
  background: #123544;
}
.idle-meta b {
  display: block;
  margin-bottom: 4px;
  color: #8eacb7;
  font-size: 11px;
  font-weight: 550;
}
.idle-meta span {
  color: #e7f3f4;
  font-size: 14px;
}
@media (min-width: 1600px) {
  .idle-card { width: min(800px, 100%); }
}

/* design7 polish */
.engine-console-idle,
.training-frame-idle {
  place-items: stretch;
  padding: 22px;
  background-image: none;
}
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  border-radius: 16px;
  box-shadow: none;
}
.engine-console-idle .idle-card p,
.training-frame-idle .idle-card p {
  max-width: 42em;
}
.engine-console-idle .idle-meta,
.training-frame-idle .idle-meta {
  width: min(720px, 100%);
}
.training-frame-shell {
  height: min(62vh, 680px);
  min-height: 520px;
}
@media (min-width: 1600px) {
  .engine-console-idle .idle-card,
  .training-frame-idle .idle-card { width: 100%; }
}

/* design8 polish */
.engine-console-idle,
.training-frame-idle {
  align-content: stretch;
  justify-content: stretch;
  place-items: stretch;
  padding: 20px;
  background-image: none;
}
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  width: 100%;
  height: 100%;
  min-height: 100%;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  align-content: center;
  justify-items: center;
  border-radius: 14px;
  box-shadow: none;
}

/* design9 polish */
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: stretch;
  justify-items: start;
  text-align: left;
  padding: 28px 32px 24px;
}
.engine-console-idle .idle-kicker,
.training-frame-idle .idle-kicker {
  margin-bottom: 8px;
}
.engine-console-idle .idle-card strong,
.training-frame-idle .idle-card strong {
  font-size: 28px;
}
.engine-console-idle .idle-card p,
.training-frame-idle .idle-card p {
  align-self: center;
  justify-self: start;
  max-width: 36em;
  margin: 0;
}
.engine-console-idle .idle-meta,
.training-frame-idle .idle-meta {
  width: 100%;
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid #355f6e;
}

/* design10 polish */
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  grid-template-rows: auto auto minmax(168px, 1fr) auto;
  row-gap: 14px;
}
.engine-console-idle .idle-card p,
.training-frame-idle .idle-card p {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 30px;
  border: 1px solid #355f6e;
  border-radius: 14px;
  background: #123544;
  display: grid;
  align-content: center;
  color: #d5e6ec;
  font-size: 15px;
}
.engine-console-idle .idle-meta,
.training-frame-idle .idle-meta {
  width: 100%;
}

/* design11 polish */
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  grid-template-rows: auto auto minmax(240px, 1fr) auto;
  row-gap: 14px;
}
.engine-console-idle .idle-body,
.training-frame-idle .idle-body {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid #355f6e;
  border-radius: 14px;
  background: #123544;
}
.engine-console-idle .idle-card p,
.training-frame-idle .idle-card p {
  align-self: start;
  justify-self: start;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: block;
  color: #d5e6ec;
  font-size: 15px;
}
.engine-console-idle .idle-steps,
.training-frame-idle .idle-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.engine-console-idle .idle-steps li,
.training-frame-idle .idle-steps li {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  min-height: 0;
  padding: 18px 16px;
  border: 1px solid #355f6e;
  border-radius: 12px;
  background: #163847;
}
.engine-console-idle .idle-steps b,
.training-frame-idle .idle-steps b {
  color: #8eacb7;
  font-size: 12px;
  font-weight: 550;
}
.engine-console-idle .idle-steps span,
.training-frame-idle .idle-steps span {
  color: #e7f3f4;
  font-size: 16px;
}

/* design12 polish */
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.engine-console-idle .idle-body,
.training-frame-idle .idle-body {
  grid-template-rows: auto auto;
  align-content: start;
}
.engine-console-idle .idle-steps,
.training-frame-idle .idle-steps {
  height: auto;
  align-self: stretch;
}
.engine-console-idle .idle-steps li,
.training-frame-idle .idle-steps li {
  height: auto;
  min-height: 0;
  align-content: start;
  padding: 16px 16px 18px;
}
/* design13 polish */
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  grid-template-rows: auto auto auto 1fr auto;
}
.engine-console-idle .idle-body,
.training-frame-idle .idle-body {
  padding: 0;
  border: 0;
  background: none;
  align-content: start;
}
.engine-console-idle .idle-steps,
.training-frame-idle .idle-steps {
  height: auto;
}
/* design14 polish */
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  grid-template-rows: auto auto auto auto;
  align-content: space-between;
}
.engine-console-idle .idle-body,
.training-frame-idle .idle-body {
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
  align-content: start;
}
.engine-console-idle .idle-meta,
.training-frame-idle .idle-meta {
  height: auto;
  align-self: stretch;
}
.engine-console-idle .idle-meta li,
.training-frame-idle .idle-meta li {
  height: auto;
  min-height: 0;
  align-content: start;
  padding: 12px 14px;
}
/* design15 polish */
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  grid-template-rows: auto auto auto auto;
  align-content: start;
  row-gap: 16px;
}
.engine-console-idle .idle-body,
.training-frame-idle .idle-body {
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
  align-content: start;
}
.engine-console-idle .idle-meta,
.training-frame-idle .idle-meta {
  height: auto;
  align-self: stretch;
}
.engine-console-idle .idle-meta li,
.training-frame-idle .idle-meta li {
  height: auto;
  min-height: 0;
  align-content: start;
  padding: 12px 14px;
}
/* design16 polish */
.engine-console-idle,
.training-frame-idle {
  place-items: start stretch;
  align-content: start;
  background-image:
    radial-gradient(circle at 50% 12%, #1a4254 0%, transparent 36%),
    linear-gradient(#184056 1px, transparent 1px),
    linear-gradient(90deg, #184056 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.engine-console-idle .idle-card,
.training-frame-idle .idle-card {
  height: auto;
  min-height: 0;
  align-self: start;
  align-content: start;
  row-gap: 16px;
}
@media (min-width: 1440px) {
  .engine-console-idle .idle-card,
  .training-frame-idle .idle-card {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    grid-template-rows: auto auto auto;
    column-gap: 28px;
    align-items: start;
  }
  .engine-console-idle .idle-kicker,
  .training-frame-idle .idle-kicker,
  .engine-console-idle .idle-card > strong,
  .training-frame-idle .idle-card > strong,
  .engine-console-idle .idle-body,
  .training-frame-idle .idle-body {
    grid-column: 1;
  }
  .engine-console-idle .idle-meta,
  .training-frame-idle .idle-meta {
    grid-column: 2;
    grid-row: 1 / span 3;
    grid-template-columns: 1fr;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    align-content: start;
  }
}
/* design17 polish */
.training-frame-shell:has(iframe:not([src])),
.training-frame-shell:has(iframe[src=""]),
.training-frame-shell:has(iframe[src="about:blank"]) {
  height: auto;
  min-height: 0;
}
.training-frame-shell:has(iframe:not([src])) .training-frame-idle,
.training-frame-shell:has(iframe[src=""]) .training-frame-idle,
.training-frame-shell:has(iframe[src="about:blank"]) .training-frame-idle {
  position: relative;
  inset: auto;
}
/* design18 polish */
.analytics-page .report-controls {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(168px, 1.25fr) minmax(0, 0.9fr) minmax(0, 0.9fr) max-content;
}
.analytics-page .report-filter-actions {
  flex-wrap: nowrap;
  white-space: nowrap;
  align-self: end;
}
@media (max-width: 1100px) {
  .analytics-page .report-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .analytics-page .report-filter-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}
/* design19 polish */
.monthly-workbench .assignment-board {
  align-items: start;
}
.monthly-workbench .assignment-list:not(.is-stage-view) {
  min-height: 0;
  height: auto;
  align-content: start;
}

/* design20 polish */
.inner-page.station-page {
  background: var(--sl-bg, #0c171d);
  color: var(--sl-text, #edf6f7);
}
.inner-page.station-page .inner-topbar {
  background: var(--sl-bg, #0c171d);
  border-color: var(--sl-line, #30434d);
  color: var(--sl-text, #edf6f7);
}

/* design21 polish */
.station-page .inner-topbar .ghost-action {
  color: var(--sl-text, #edf6f7);
  background: var(--sl-panel, #14232b);
  border-color: var(--sl-line, #30434d);
}
.station-page .station-viewport {
  scrollbar-gutter: stable;
}

.training-tool-dialog { width: min(1200px, 96vw); max-width: 96vw; max-height: 94dvh; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); }
.training-tool-dialog::backdrop { background: rgb(8 20 28 / 65%); }
.training-tool-dialog > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.training-tool-dialog > header > button { flex-shrink: 0; white-space: nowrap; }
.training-tool-dialog h2 { margin: 0 0 8px; font-size: 22px; }
.training-tool-dialog p { line-height: 1.6; }
#trainingSceneDialog { height: 90dvh; }
#trainingSceneFrame { display: block; width: 100%; height: calc(100% - 100px); min-height: 240px; border: 0; border-radius: 8px; }
#trainingSceneButtons { display: flex; flex-wrap: wrap; gap: 8px; }
#trainingSceneButtons[hidden] { display: none; }
#diagnosisDialog { width: min(920px, calc(100vw - 24px)); }
#diagnosisForm { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
#diagnosisForm label { display: grid; gap: 8px; max-width: 100%; }
#diagnosisForm input { min-width: 0; max-width: 100%; min-height: 44px; padding: 8px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
#diagnosisStatus { margin: 16px 0 24px; color: var(--ink-2); font-size: 13px; }
#diagnosisHistoryTitle { margin-bottom: 12px; font-size: 16px; }
#diagnosisHistory { display: grid; gap: 8px; }
#diagnosisHistory > p { padding: 18px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink-3); text-align: center; font-size: 14px; }
.diagnosis-incident { margin: 16px 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.diagnosis-incident summary { cursor: pointer; font-weight: 600; }
.diagnosis-incident pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.diagnosis-events { overflow-x: auto; margin: 12px 0; }
.diagnosis-events table { width: 100%; min-width: 600px; border-collapse: collapse; text-align: left; }
.diagnosis-events th, .diagnosis-events td { padding: 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
@media (max-width: 640px) { .training-tool-dialog { padding: 12px; } .training-tool-dialog > header { margin-bottom: 12px; } #trainingSceneFrame { height: calc(100% - 132px); } }