/* 무채색 다크 메뉴 + 차분한 움직임 (2026-11-06 대표 지시 — Linear 사진처럼)
   색: 하늘색 · 민트 빛을 걷어내고 회색(zinc) + 강조색 하나. 색은 왼쪽 메뉴 아이콘에만 묶음별로 조금씩.
   움직임: 계속 도는 빛 · 반짝임 · 눈 · 오로라는 끄고, 올림 · 누름 · 펼침만 0.15초 안팎으로 짧게.
   style.css · motion.css · reactbits.css 뒤에 읽혀서 덮어쓴다 — 되돌리려면 base.html 의 이 파일 한 줄만 빼면 된다 */

:root, :root:not([data-theme]) {
  --ground: #F4F4F5; --surface: #FFFFFF; --ink: #18181B; --muted: #71717A;
  --line: #E4E4E7; --soft: #F4F4F5;
  --accent: #5E6AD2; --accent-hover: #4C58C0; --accent-ink: #FFFFFF; --accent-soft: #ECEDFB;
  --brass: #5E6AD2; --wood: #18181B; --wood-2: #18181B; --glow: transparent; --glass-line: rgba(255, 255, 255, .08);
  --good: #2F9E6B; --good-soft: #E3F5EC; --warn: #B7791F; --warn-soft: #FBF0DC; --bad: #D1435B; --bad-soft: #FBE4E8;
  --snow: transparent; --snow-edge: transparent;
}
@media (prefers-color-scheme: dark) {
  :root, :root:not([data-theme]) {
    --ground: #0F0F11; --surface: #18181B; --ink: #F4F4F5; --muted: #A1A1AA;
    --line: #27272A; --soft: #1F1F23;
    --accent: #8B93F0; --accent-hover: #A5ABF4; --accent-ink: #0F0F11; --accent-soft: #23243A;
    --brass: #8B93F0; --wood: #131316; --wood-2: #131316;
    --good: #5CC797; --good-soft: #15291F; --warn: #E2B866; --warn-soft: #2E2410; --bad: #F08A9B; --bad-soft: #36181E;
  }
}

/* ── 왼쪽 메뉴 ── */
/* 메뉴 색은 본문 밝기를 따라간다 (2026-11-06 대표: "얼굴이랑 몸이 따로 논다" — 밝은 화면에 메뉴만 검정이었음) */
:root, :root:not([data-theme]) {
  --sb-bg: #F4F4F5; --sb-line: #E4E4E7; --sb-text: #3F3F46; --sb-strong: #18181B; --sb-muted: #71717A;
  --sb-hover: rgba(0, 0, 0, .04); --sb-on: rgba(0, 0, 0, .07); --sb-focus: #5E6AD2;
  --g-planning: #B7791F; --g-upload: #2563EB; --g-lecture: #D9581E; --g-comments: #1F9D63; --g-site: #8B5CF6; --g-data: #5E6AD2;
}
@media (prefers-color-scheme: dark) {
  :root, :root:not([data-theme]) {
    --sb-bg: #131316; --sb-line: #232327; --sb-text: #D4D4D8; --sb-strong: #FAFAFA; --sb-muted: #8B8B93;
    --sb-hover: rgba(255, 255, 255, .05); --sb-on: rgba(255, 255, 255, .08); --sb-focus: #8B93F0;
    --g-planning: #E5B83B; --g-upload: #5B9CF6; --g-lecture: #F07A3E; --g-comments: #4CC38A; --g-site: #B07CF0; --g-data: #7C83F0;
  }
}
@media (min-width: 1101px) { .workspace-layout { grid-template-columns: 232px minmax(0, 1fr); } }   /* 1100px 이하는 style.css 의 서랍 메뉴 — 덮으면 본문이 232px 로 찌그러진다 */
.workspace-sidebar, .rb .workspace-sidebar {
  gap: 14px; padding: 14px 10px 12px; color: var(--sb-text); background: var(--sb-bg);
  border-right: 1px solid var(--sb-line); -webkit-backdrop-filter: none; backdrop-filter: none;
  -webkit-mask-image: none; mask-image: none; }
.workspace-sidebar::after { display: none; }
.workspace-brand { padding: 2px 8px 10px; }
.workspace-brand::after { display: none; }
.ws-mark { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; }
.ws-word { font-size: 14px; font-weight: 650; background: none; color: var(--sb-strong); }

.workspace-menu { gap: 10px; }
.ws-hover { display: none; }
.workspace-group { border-top: 0; padding-top: 0; }   /* style.css 의 details 윗줄 — 메뉴 안에서는 빼기 */
.workspace-group > summary { list-style: none; cursor: pointer; border-radius: 6px; margin-bottom: 0; }
.workspace-group > summary::-webkit-details-marker { display: none; }
.workspace-group h2, .workspace-group-settings h2 { display: flex; align-items: center; gap: 4px; margin: 0; padding: 4px 8px;
  color: var(--sb-muted); font-size: 12px; font-weight: 500; letter-spacing: 0; transition: color 150ms ease; }
.workspace-group > summary:hover h2, .workspace-group.is-current h2 { color: var(--sb-text); }
.ws-caret { display: grid; place-items: center; transition: transform 150ms cubic-bezier(.23, 1, .32, 1); }
.ws-caret .hm-svg { width: 12px; height: 12px; }
.workspace-group:not([open]) .ws-caret { transform: rotate(-90deg); }
.workspace-items { gap: 1px; margin-top: 2px; }

.workspace-item, .rb .workspace-item { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 6px;
  color: var(--sb-text); font-size: 13px; font-weight: 500; line-height: 1.4; background: none; box-shadow: none;
  transition: background-color 120ms ease, color 120ms ease; }
.workspace-item:hover { color: var(--sb-strong); background: var(--sb-hover); }
.workspace-item:active { transform: none; background: var(--sb-on); }
.workspace-item.is-current { color: var(--sb-strong); font-weight: 500; background: var(--sb-on); box-shadow: none; }
.workspace-item.is-current::before { display: none; }
.workspace-item.is-reference { color: var(--sb-muted); }
.workspace-item:focus-visible, .workspace-group > summary:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: -2px; }

/* 메뉴 아이콘 — 묶음마다 색 하나 (사진의 노랑 · 파랑 · 주황 …) */
.workspace-item .ws-icon { color: var(--ws-c, var(--sb-muted)); }
.workspace-item .ws-icon .hm-svg { width: 15px; height: 15px; }
.workspace-item .ws-icon .hm-svg * { animation: none !important; }
[data-g="planning"] { --ws-c: var(--g-planning); }
[data-g="upload"]   { --ws-c: var(--g-upload); }
[data-g="lecture"]  { --ws-c: var(--g-lecture); }
[data-g="comments"] { --ws-c: var(--g-comments); }
[data-g="site"]     { --ws-c: var(--g-site); }
[data-g="data"]     { --ws-c: var(--g-data); }

.workspace-group-settings { padding-top: 10px; border-top: 1px solid var(--sb-line); }
.workspace-group-settings .workspace-section-title { margin: 8px 8px 2px; color: var(--sb-muted); font-size: 11px; font-weight: 500; }
.workspace-group-settings .workspace-item { padding: 4px 8px; font-size: 12px; color: var(--sb-muted); }
.workspace-logout { padding: 8px 8px 0; border-top: 1px solid var(--sb-line); }
.workspace-logout::before { display: none; }
.workspace-logout .linkbtn { color: var(--sb-muted); font-size: 12px; }
.workspace-logout .linkbtn:hover { color: var(--sb-text); }
@media (max-width: 1100px) {
  .ws-toggle { background: var(--sb-bg); border-color: var(--sb-line); color: var(--sb-strong); }
}

/* ── 본문 바탕 · 상자도 메뉴와 같은 회색으로 — 위쪽 하늘빛 · 파란 그림자 걷기 ── */
body { background: var(--ground); }
.panel, .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }

/* ── 차분한 움직임: 계속 도는 효과 끄기 (도는 중 표시 .spin 은 그대로) ── */
.ws-intro .workspace-brand, .ws-intro .workspace-group h2, .ws-intro .workspace-item, .ws-intro .ws-icon .hm-svg * { animation: none; }
.rb-aurora, .rb-glare, .hm-beam { display: none; }
.hm-lecture.is-next, .hm-lecture.is-next.hm-enter { animation: none; }
.hm-cta::after { animation: none; }
.rb .hm-ch, .hm-ch { animation: none !important; }
body::before, body::after { display: none; }   /* 눈 · 오로라 · 점 격자 */
.mo-live::after { animation-iteration-count: 3; }

/* ── 버튼 · 접기 · 입력칸 — 사이트 전체 (2026-11-06 점검: 하늘빛 그러데이션 · 반짝임 · 파란 접기 제목 · 흐린 안내 글) ── */
.btn.primary, .btn.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary::after { display: none; }
.btn { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 100ms ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
summary { color: var(--ink); }
summary:hover { color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
/* 접기 표시는 글자(▸ ▾) 대신 그린 꺾쇠 하나 — 닫히면 →, 열리면 ↓ (라이브 전 페이지는 live_day.html 안에 같은 모양) */
details.slot > summary::before {
  content: ""; display: inline-block; flex: none; width: 6px; height: 6px; margin: 0 10px 2px 2px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform 150ms cubic-bezier(.23, 1, .32, 1); }
details.slot[open] > summary::before { content: ""; transform: rotate(45deg); }

/* ── 첫 화면: 등장 효과 없이 바로 (2026-11-06 대표 지시) ── */
.hm-enter, .hm-lecture.is-next.hm-enter, .hm .home-category { animation: none; opacity: 1; }
.hm .hm-beam, .hm .hm-scan { display: none; }
.hm-brand { animation: none; }