/* ==========================================================================
   ToLive 디자인 시스템 v3.0 — 로고 톤 (블루 + 오렌지)
   - 라이트 베이스 (시청자 페이지 본문)
   - 영상 박스만 검정 (.player 에서 직접 #000 사용)
   - 8px grid · HSL color tokens · 'Noto Sans KR' 한글 폰트
   - 'Noto Sans KR' 는 view.php 에서 자체 호스팅 link (preload+onload) 로 비차단 로드
   ========================================================================== */

:root {
  /* === Color tokens (HSL) — mkt24 라이트 톤 === */
  --hd-bg:        0 0% 100%;     /* 페이지 배경 — 흰색 (2026-10-28 요청) */
  --hd-fill:      220 17% 97%;   /* #f7f8fa — hover·눌림 등 '반응' 전용. 페이지 배경 아님 */
  --hd-surface:   0 0% 100%;     /* 카드 배경 */
  --hd-elevated:  220 14% 96%;   /* 카드 안 강조 영역 */
  --hd-border:    220 13% 91%;   /* 보더 #e4e7ee */
  --hd-border-strong: 0 0% 86%;  /* mkt24 #dbdbdb */

  --hd-text:      228 14% 22%;   /* mkt24 #303440 */
  --hd-text-soft: 224 8% 40%;
  --hd-muted:     0 0% 60%;      /* mkt24 #999 */
  --hd-faint:     0 0% 77%;

  --hd-brand:     216 90% 45%;   /* #0B5FD9 — 로고 블루(본문 대비 확보용으로 명도만 낮춤) */
  --hd-brand-2:   214 100% 47%;  /* #0068F0 — 로고 원색 그대로. 그라디언트 윗단·호버 */
  --hd-brand-deep: 219 100% 20%; /* #002468 — 로고 딥네이비 그대로 */
  --hd-accent:    17 97% 54%;    /* #FC5A18 — 로고 오렌지. ⚠️ 밝아서 흰 글자는 미달(3.17).
                                    이 위에 올리는 글자는 --hd-on-accent 를 쓴다. */
  --hd-danger:    0 84% 60%;     /* #ef4444 */
  --hd-warn:      48 100% 60%;
  --hd-info:      214 100% 47%;
  --hd-gold:      16 95% 40%;    /* #C93A05 — 오렌지를 '글자'로 쓸 때. 흰 배경 대비 5.13 */
  --hd-on-accent: 18 100% 14%;   /* #471500 — --hd-accent 배경 위 글자. 대비 4.81 */

  /* Live red */
  --hd-live:      0 84% 60%;

  /* === Spacing (8px grid) === */
  --hd-1: 4px;
  --hd-2: 8px;
  --hd-3: 12px;
  --hd-4: 16px;
  --hd-5: 20px;
  --hd-6: 24px;
  --hd-8: 32px;
  --hd-10: 40px;
  --hd-12: 48px;
  --hd-16: 64px;

  /* === Radius === */
  --hd-r-xs: 4px;
  --hd-r-sm: 6px;
  --hd-r-md: 10px;
  --hd-r-lg: 14px;
  --hd-r-xl: 20px;
  --hd-r-pill: 999px;

  /* === Shadows (mkt24 매우 얕음) === */
  --hd-shadow-1: 0 1px 2px hsl(0 0% 0% / 0.04), 0 1px 3px hsl(0 0% 0% / 0.03);
  --hd-shadow-2: 0 4px 12px hsl(0 0% 0% / 0.06), 0 1px 3px hsl(0 0% 0% / 0.04);
  --hd-shadow-3: 0 12px 28px hsl(0 0% 0% / 0.1), 0 4px 10px hsl(0 0% 0% / 0.05);
  --hd-shadow-glow-brand: 0 4px 14px hsl(var(--hd-brand) / 0.28);
  --hd-shadow-glow-live:  0 4px 14px hsl(var(--hd-live) / 0.32);

  /* === Motion === */
  --hd-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hd-dur-fast: 120ms;
  --hd-dur: 200ms;
  --hd-dur-slow: 360ms;

  /* === Type === */
  --hd-font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --hd-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --hd-fs-xs: 11px;
  --hd-fs-sm: 12.5px;
  --hd-fs-base: 14px;
  --hd-fs-md: 15px;
  --hd-fs-lg: 17px;
  --hd-fs-xl: 20px;
  --hd-fs-2xl: 24px;
  --hd-fs-3xl: 32px;
}

/* === Base reset === */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--hd-font);
  font-size: var(--hd-fs-base);
  line-height: 1.55;
  color: hsl(var(--hd-text));
  background: hsl(var(--hd-bg));
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: hsl(var(--hd-brand)); color: white; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--hd-2);
  padding: 11px 18px;
  font-family: inherit;
  font-size: var(--hd-fs-base);
  font-weight: 700;
  letter-spacing: -0.02em;
  border-radius: var(--hd-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  transition: transform var(--hd-dur-fast) var(--hd-ease),
              background var(--hd-dur) var(--hd-ease),
              box-shadow var(--hd-dur) var(--hd-ease),
              border-color var(--hd-dur) var(--hd-ease);
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid hsl(var(--hd-brand)); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: hsl(var(--hd-brand));
  color: white;
  box-shadow: var(--hd-shadow-glow-brand);
}
.btn-primary:hover { background: hsl(var(--hd-brand-deep)); }

.btn-danger {
  background: hsl(var(--hd-danger));
  color: white;
  box-shadow: var(--hd-shadow-glow-live);
}
.btn-danger:hover { background: hsl(0 75% 52%); }

.btn-accent {
  background: hsl(var(--hd-accent));
  color: hsl(var(--hd-on-accent));
  box-shadow: 0 4px 14px hsl(var(--hd-accent) / 0.4);
}
.btn-accent:hover { background: hsl(16 95% 48%); }

.btn-ghost {
  background: hsl(var(--hd-surface));
  border-color: hsl(var(--hd-border-strong));
  color: hsl(var(--hd-text-soft));
}
.btn-ghost:hover { background: hsl(var(--hd-elevated)); color: hsl(var(--hd-text)); }

.btn-pill { border-radius: var(--hd-r-pill); padding: 9px 18px; }
.btn-sm { padding: 8px 12px; font-size: var(--hd-fs-sm); min-height: 36px; }
.btn-lg { padding: 14px 22px; font-size: var(--hd-fs-md); min-height: 50px; border-radius: var(--hd-r-lg); }
.btn-block { width: 100%; }

/* === Card === */
.card {
  background: hsl(var(--hd-surface));
  border: 1px solid hsl(var(--hd-border));
  border-radius: var(--hd-r-lg);
  overflow: hidden;
}
.card-elev { box-shadow: var(--hd-shadow-2); }

/* === Badge / Pill === */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--hd-r-pill);
  font-size: var(--hd-fs-xs);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.pill-live   { background: hsl(var(--hd-live)); color: white; }
.pill-brand  { background: hsl(216 90% 93%); color: hsl(var(--hd-brand-deep)); }
.pill-warn   { background: hsl(48 100% 90%); color: hsl(46 100% 28%); }
.pill-info   { background: hsl(216 90% 93%); color: hsl(var(--hd-brand-deep)); }
.pill-soft   { background: hsl(var(--hd-elevated)); color: hsl(var(--hd-text-soft)); }

/* === Glass surface (영상 위 오버레이 — 다크 유지) === */
.glass {
  background: hsl(0 0% 0% / 0.55);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid hsl(0 0% 100% / 0.1);
  color: white;
}

/* === Input === */
.input {
  display: block; width: 100%;
  background: hsl(var(--hd-surface));
  border: 1px solid hsl(var(--hd-border-strong));
  border-radius: var(--hd-r-md);
  padding: 12px 14px;
  color: hsl(var(--hd-text));
  font-family: inherit;
  font-size: var(--hd-fs-base);
  min-height: 46px;
  transition: border-color var(--hd-dur) var(--hd-ease),
              box-shadow var(--hd-dur) var(--hd-ease);
}
.input:focus {
  outline: none;
  border-color: hsl(var(--hd-brand));
  box-shadow: 0 0 0 3px hsl(var(--hd-brand) / 0.15);
}
.input::placeholder { color: hsl(var(--hd-faint)); }

/* === Skeleton === */
.skel {
  background: linear-gradient(90deg, hsl(var(--hd-elevated)) 0%, hsl(var(--hd-border)) 50%, hsl(var(--hd-elevated)) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s linear infinite;
  border-radius: var(--hd-r-sm);
}
@keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === Live dot pulse === */
.live-dot {
  position: relative; display: inline-block;
  width: 8px; height: 8px;
  background: hsl(var(--hd-live)); border-radius: 50%;
  box-shadow: 0 0 0 0 hsl(var(--hd-live) / 0.7);
  animation: liveRing 1.6s var(--hd-ease) infinite;
}
@keyframes liveRing {
  0%   { box-shadow: 0 0 0 0 hsl(var(--hd-live) / 0.7); }
  70%  { box-shadow: 0 0 0 8px hsl(var(--hd-live) / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--hd-live) / 0); }
}

/* === Misc === */
.text-soft  { color: hsl(var(--hd-text-soft)); }
.text-muted { color: hsl(var(--hd-muted)); }
.text-brand { color: hsl(var(--hd-brand-deep)); }
.text-danger{ color: hsl(var(--hd-live)); }
.text-gold  { color: hsl(var(--hd-gold)); }
.mono       { font-family: var(--hd-font-mono); font-variant-numeric: tabular-nums; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Responsive container === */
.hd-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--hd-4);
}
@media (min-width: 720px) {
  .hd-container { max-width: 720px; padding-inline: var(--hd-6); }
}
@media (min-width: 1024px) {
  .hd-container { max-width: 980px; }
}

/* === Scrollbar (light) === */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--hd-border-strong)) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: hsl(var(--hd-border-strong)); border-radius: var(--hd-r-pill); }
*::-webkit-scrollbar-thumb:hover { background: hsl(var(--hd-muted)); }

/* 표 머리줄 — 배경이 흰색이 되면서 머리와 본문의 구분이 사라졌다.
 페이지마다 따로 만든 표(.cu-tbl · .so-tbl · .at-log-table …)에도 걸리도록
 요소 선택자로 한 번 깔아 둔다. 페이지에서 직접 border-bottom 을 준 표는
 그 선언이 이긴다(명시도). (2026-10-28) */
thead th { border-bottom: 2px solid #e5e7eb; }
/* ============================================================
   모바일 가로 넘침 방지 (2026-10-28 요청)
   ⚠️ body 에 overflow-x:hidden 을 걸지 않는다 — position:sticky 가 죽고,
      넘친 버튼이 '잘려서 안 보이는' 상태가 되어 더 나쁘다.
      넘치는 원인(표·이미지·긴 문자열·버튼 줄)을 각각 가둔다.
   ============================================================ */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tbl-scroll > table { margin-bottom: 0; }

@media (max-width: 768px) {
  /* 이미지·영상·프레임이 칸보다 커서 페이지를 밀어내는 것을 막는다 */
  img, video, canvas, svg, iframe { max-width: 100%; }
  /* 긴 URL·토큰·JSON 이 한 줄로 뻗어 나가는 것을 막는다 */
  pre { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
  code, .copy-input { word-break: break-all; }
  /* ⚠️ word-break 를 주면 body 의 keep-all(단어 기준)을 덮어써서
      한글이 다시 글자 단위로 쪼개진다. 긴 토큰만 끊는
      overflow-wrap 으로 바꾼다 (2026-11-01). */
  td, th { overflow-wrap: anywhere; }
  /* 버튼 줄 — 화면 밖으로 나가지 않고 다음 줄로 넘어가게 */
  .btn-group, .btn-toolbar, .d-flex[class*="gap-"], .sl-page-header { flex-wrap: wrap; }
  /* 모달이 화면보다 넓어지지 않게 */
  .modal-dialog { max-width: calc(100vw - 16px); margin: 8px auto; }
}