@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('./assets/fonts/PretendardVariable.woff2') format('woff2-variations');
}

/* 디자인 토큰 — cuelog-mockup-v2.html 의 :root 를 그대로 이식.
   마크다운 설명과 어긋나면 HTML 이 정답이다 (P5.5 C 지시 1).

   방향: 조종석을 밝은 따뜻한 중성으로. 초판은 "레퍼런스 Surveys"를 선언해 놓고
   CentralFlow 의 어두운 SaaS 토큰을 써서 자기모순이었고, 그 결과 노란 메모가
   어두운 크롬 안에서 고아가 됐다. 캔버스가 따뜻해지면 노랑이 가족이 된다. */
:root {
  /* 조종석 — 밝은 영역: 탭 · 설정 패널 · 모달 · 컨트롤 */
  --paper: #E6E2D8;          /* 캔버스. 밝은 따뜻한 중성 (목업 값) */
  --paper-2: #DAD5C8;        /* 리세스 · 비활성 탭 */
  --paper-3: #CDC7B6;        /* hover */
  --card: #FFFDF9;           /* 컨트롤 표면 */

  /* 계기 — 시계 영역과 독. 따뜻한 검정, 차가운 #17171A 아님 */
  --stage: #1C1B19;
  --stage-lt: #F8F6F0;       /* 라이트 계기 — 캔버스보다 밝아야 갈린다 */
  --stage-ink: #F7F5F0;
  --stage-ink-2: rgba(247, 245, 240, 0.48);
  --stage-ink-3: rgba(247, 245, 240, 0.40);
  --stage-hover: rgba(247, 245, 240, 0.09);
  --stage-line: rgba(247, 245, 240, 0.15);

  /* 잉크 — 밝은 배경 기준 */
  --ink: #1A1917;
  --ink-2: #67635A;
  --ink-3: #9C968A;
  --line: rgba(26, 25, 23, 0.13);

  /* 액센트 — 용도는 5곳뿐: 툴바·독 활성 / 아이콘 토글 활성 / 슬라이더 트랙 / 포커스 링 / 모달 내 선택 세그먼트 */
  --accent: #4A90E2;
  --accent-fill: rgba(74, 144, 226, 0.15);
  --accent-ink: #2C68B4;
  --accent-fill-dark: rgba(122, 178, 240, 0.18);   /* 어두운 계기 위 */
  --accent-ink-dark: #97C5F6;

  --tally-live: #4E8C5C;
  --tally-warn: #E0A32E;
  --tally-over: #DE5B4E;

  --danger-ink: #B04C42;
  --danger-fill: rgba(222, 91, 78, 0.07);

  /* 스페이싱 — 4px 배수 (4.4) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;

  /* 모서리 — 값은 D 단계에서 배선한다 (4.5) */
  --r-memo: 18px;
  --r-stage: 20px;
  --r-panel: 14px;
  --r-tab: 11px;
  --r-ctl: 9px;
  --r-control: var(--r-ctl);
  --r-control-sm: var(--r-ctl);
  --r-modal: var(--r-panel);

  /* 모션 (4.6) */
  --t-state: 150ms;
  --t-panel: 200ms;
  --t-tally: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-state: 0ms;
    --t-panel: 0ms;
    --t-tally: 0ms;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Pretendard Variable', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: var(--paper);   /* 조종석 캔버스 */
}

/* 시계 하단 배치: flex order로 시계 블록만 맨 뒤로 */
#app.clock-bottom #topbar,
#app.clock-bottom #topbar-buttons {
  order: 10;
}

#app.clock-bottom #topbar {
  padding: 4px 12px 10px;
}

/* 시계가 하단이면 독과 같은 버튼이 8px 간격으로 겹쳐 보이므로 아이콘 행은 숨김 */
#app.clock-bottom #topbar-buttons {
  display: none;
}

/* 컴팩트 모드에선 독이 숨겨지므로 아이콘 행을 되살림 */
#app.clock-bottom.compact-mode #topbar-buttons {
  display: flex;
  order: 9;
  padding: 8px 12px 0;
}

#app.compact-mode #log-tabs,
#app.compact-mode #memo,
#app.compact-mode #bottom-buttons {
  display: none;
}

#topbar {
  display: flex;
  flex-direction: column;   /* 시계 / 보조 표시 / 기준 표시를 세로로 쌓는다 */
  align-items: center;
  justify-content: center;
  padding: 10px 12px 4px;
  background: var(--stage);
  color: var(--stage-ink);
  flex-shrink: 0;
  -webkit-app-region: drag;
}

/* 부모 #topbar 가 drag 라 명시적으로 빼지 않으면 드래그가 창 이동에 먹힌다.
   .button-row .icon-btn 이 이미 같은 이유로 no-drag 인 선례가 있다. */
#clock,
#clock-sub {
  -webkit-app-region: no-drag;
  cursor: ew-resize;
  user-select: none;
}

#clock.clock-dragging,
#clock-sub.clock-dragging {
  cursor: ew-resize;
}

/* 상한 도달 저항감 — 마우스는 움직이는데 숫자가 안 커지면 고장으로 보인다 */
@keyframes clock-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.clock-nudge {
  animation: clock-nudge 120ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .clock-nudge { animation: none; }
}

/* E1. Menlo -> Pretendard 700. 사선 0 이 사라지고 앱 전체가 한 서체가 된다.
   Pretendard 기본은 가변폭이라 tabular-nums 가 필수다 — 없으면 숫자가 매초 흔들린다.
   실측: 기본 폭 46.9~66.0 (8종) / tabular-nums 65.5 (1종). */
#clock {
  width: 100%;
  text-align: center;
  font-family: 'Pretendard Variable', sans-serif;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 0.98;
  font-size: 56px;
}

/* F. 탤리 레일 — 종료까지 남은 시간을 색면 하나로 말한다.
   P2 의 "종료 초과 시 시계 글자색 전환"을 대체한다. 시계 글자는 휘도 자동 대비
   결과를 그대로 유지해야 두 로직이 싸우지 않는다.
   점멸 금지 — 미러링 송출에 반복 점멸이 들어가면 화면 전체가 산만해진다. */
#tally-rail {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  margin-top: 12px;
  background: var(--tally-live);
  transition: background-color var(--t-tally) ease;
  flex-shrink: 0;
}

#tally-rail.warn {
  background: var(--tally-warn);
}

#tally-rail.over {
  background: var(--tally-over);
}

/* 종료 미설정이면 높이 0 */
#tally-rail.hidden {
  display: none;
}

/* E2. 콜론 디밍 — 시·분·초가 세 덩어리로 묶여 2m 에서 읽는 속도가 올라간다.
   큰 시계는 fitClockFont() 가 --colon-op 를 .30 으로 낮춘다 (P6.5 P3).
   transition 을 넣지 마라 — 드래그로 임계값을 넘나들 때 점이 깜빡인다. */
#clock .clock-colon {
  opacity: var(--colon-op, 0.38);
}

#clock-sub .clock-colon {
  opacity: 0.38;   /* 보조는 항상 .38 */
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--stage);
  flex-shrink: 0;
  -webkit-app-region: drag;
}

/* D1. 계기가 각지게 끝나면 검은 띠 하나가 얹힌 화면으로 읽힌다.
   아래 모서리를 둥글려 "위는 계기, 아래는 종이"를 만든다.
   계기는 #topbar + #topbar-buttons 두 요소라 마지막 요소가 반경을 갖는다. */
#topbar-buttons {
  padding: 0 12px 8px;
  border-radius: 0 0 var(--r-stage) var(--r-stage);
}

/* 시계 하단 배치에선 계기가 맨 아래로 가므로 위쪽을 둥글린다 */
#app.clock-bottom #topbar {
  border-radius: var(--r-stage) var(--r-stage) 0 0;
}

#app.clock-bottom.compact-mode #topbar-buttons {
  border-radius: var(--r-stage) var(--r-stage) 0 0;
}

/* 컴팩트에서 아이콘 행이 계기의 마지막 요소다 */
#app.compact-mode #topbar-buttons {
  border-radius: 0 0 var(--r-stage) var(--r-stage);
}

/* I. 독 — 반투명으로 흐려져 제 역할을 못 했다. 이 앱에서 가장 개성 있는 요소다.
   상시 opacity 를 걷고 불투명 카드로 세운다. 정리 모드에서만 .15 로 물러난다(P4 L2). */
#bottom-buttons {
  display: flex;
  justify-content: center;
  padding: 0 12px 12px;
  margin-top: -56px;
  position: relative;
  z-index: 5;
  pointer-events: none;
  opacity: 1;                 /* 흐리지 않다. 정리 모드에서만 .15 로 물러난다 (P4 L2) */
  transition: opacity var(--t-state) ease;
  flex-shrink: 0;
}

.bottom-dock {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 8px;
  background: var(--stage);
  border: 1px solid var(--stage-line);
  border-radius: 13px;
  box-shadow: 0 5px 15px rgba(38, 34, 26, 0.26);
}

.dock-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--stage-ink-2);
  padding-right: 6px;
}

.dock-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(247, 245, 240, 0.88);
}

.dock-divider {
  width: 1px;
  height: 26px;
  background: var(--stage-line);
  margin-right: 6px;
}

.dock-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: transparent;
  border: none;
  color: var(--stage-ink-2);
  border-radius: 8px;
  padding: 4px 8px 5px;
  cursor: pointer;
  transition: background var(--t-state) ease, color var(--t-state) ease;
}

.dock-btn svg {
  width: 14px;
  height: 14px;
}

.dock-label {
  font-size: 9px;
  line-height: 1;
  opacity: 0.85;
}

.dock-btn:hover {
  background: var(--stage-hover);
  color: var(--stage-ink);
}

.dock-btn.active {
  background: var(--accent-fill-dark);
  color: var(--accent-ink-dark);
}

.button-row .icon-btn {
  -webkit-app-region: no-drag;
  background: transparent;
  color: var(--stage-ink-2);
}

.button-row .icon-btn svg {
  width: 16px;
  height: 16px;
}

.button-row .icon-btn:hover {
  background: var(--stage-hover);
  color: var(--stage-ink);
}

.button-row .icon-btn.active {
  background: var(--accent-fill-dark);
  color: var(--accent-ink-dark);
}

.icon-btn {
  background: var(--card);
  border: none;
  color: inherit;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-state) ease;
}

.icon-btn:hover {
  background: var(--paper-2);
}

.icon-btn.active {
  background: var(--accent-fill);
  color: var(--accent-ink);
}

.icon-btn.small {
  width: 22px;
  height: 22px;
  font-size: 13px;
  padding: 0;
}

.ts-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 오버레이 — 패널이 흐름에서 빠져 메모 위에 겹친다.
   흐름 안에 두면 패널과 메모가 서로 밀어내 둘 다 잘리고, 하단 버튼이 창 밖으로 나가 도달 불가가 된다.
   높이는 내용에 맞춘다(bottom 고정 아님). 배경이 창 끝까지 이어지면 메모가 안 보이고,
   색·글자 크기를 조정하면서 결과를 확인할 수 없다.
   위치와 상한은 layoutSettingsOverlay() 가 메모 영역에 맞춰 잡는다. */
/* P6.6: 오버레이 철회. 흐름 안에 있어야 설정을 만지면서 메모가 함께 보인다.
   메모는 flex:1 로 남은 공간을 갖고 min-height 88px 를 지킨다 — 패널이 넘치면 패널이 스크롤한다. */
#settings-panel {
  margin: 0 11px;             /* D2. 좌우 끝까지 붙으면 카드가 아니라 벽으로 읽힌다 */
  flex: 0 1 auto;
  height: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper);       /* 불투명 — 아래 메모 글자가 비치면 읽기를 방해한다 */
  color: var(--ink);
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
}

/* 컴팩트는 메모를 숨기므로 겹칠 대상이 없다. 흐름 안으로 되돌린다.
   updateCompactWindowSize() 가 이미 패널 높이를 계산에 넣고 있어 추가 코드가 없다. */
#app.compact-mode #settings-panel {
  margin: 0;
  overflow: visible;
  padding: var(--sp-4);
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#settings-panel.hidden {
  display: none;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.section-caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

/* 팝오버가 프로그램적으로 클릭한다. 화면에서만 뺀다 */
.hidden-actions {
  display: none;
}

.setting-row.dual {
  justify-content: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.mini-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.mini-label {
  font-size: 11px;
  opacity: 0.6;
}

/* P1. flex-wrap 은 허용된 동작이지만 라벨과 컨트롤이 독립 아이템이면 사이에서 끊긴다.
   라벨만 덩그러니 남으면 무엇의 라벨인지 알 수 없다. 한 덩어리로 묶어 함께 접히게 한다. */
.ctl-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  /* 최소 창에서 그룹 자체가 컨테이너보다 넓으면 가로로 넘친다.
     그때는 그룹 '안에서' 접는다 — 라벨과 컨트롤이 여전히 붙어 있으므로
     무엇의 라벨인지 모르는 상태는 생기지 않는다. */
  max-width: 100%;
  flex-wrap: wrap;
}

/* 투명도는 슬라이더가 남는 폭을 먹어야 한다 — 유일하게 늘어나는 쌍이다 */
.ctl-group.opacity-group {
  flex: 1 1 auto;
  min-width: 140px;
}

.ctl-group.gap-left {
  margin-left: var(--sp-2);
}

/* 시계 행만 좁힌다. 전역으로 줄이면 P5.5 가 확정한 간격 체계를 건드린다.
   행 gap 8 + 마진 4 = 12px(라벨 그룹 사이) / 8px(아이콘 쌍 사이) — 기존 16/8 과 같은 리듬이다. */
#clock-row .ctl-group.gap-left {
  margin-left: var(--sp-1);
}

.v-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
  flex-shrink: 0;
  align-self: center;
}

.v-divider.tall {
  height: 34px;
  align-self: flex-end;
}

.seg-group.wrap {
  flex-wrap: wrap;
}

.opacity-readout {
  font-size: 11px;
  opacity: 0.75;
  min-width: 34px;
  text-align: right;
}

.setting-row.actions {
  gap: var(--sp-2);
  padding-top: var(--sp-1);
}

.setting-row.actions .text-btn {
  flex: 1 1 auto;
  margin-left: 0;
  text-align: center;
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}

/* space-between 은 라벨을 왼쪽 끝, 컨트롤을 오른쪽 끝으로 밀어 가운데를 비운다.
   행마다 컨트롤 수가 달라 그 구멍 크기도 제각각이라 세로로 훑을 때 시선이 튄다.
   좌측 정렬로 붙이고 남는 공간은 전부 오른쪽 끝에 몰리게 한다. */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
}

/* 라벨은 컨트롤 바로 왼쪽 8px. 고정 폭 라벨 열은 한 행에 2~3쌍이 들어가는 구조에 안 맞는다 */
.mini-label.gap-left,
.seg-group.gap-left {
  margin-left: var(--sp-2);
}

.section-caption {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.section-caption::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.setting-row label {
  white-space: nowrap;
  opacity: 0.85;
}

/* K3. 네이티브 <select> 를 유지한다. 커스텀으로 다시 만들면 드래그 선택·키보드
   접근·화면 밖 자동 반전·disabled 항목 처리를 전부 잃는다.
   열린 목록은 OS 가 그린다 — 건드리면 플랫폼별로 깨진다. */
.setting-row select,
.setting-row input[type="number"] {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-control-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: var(--sp-1) var(--sp-2);
}

.setting-row select {
  appearance: none;
  padding-right: 19px;        /* P6.8: 시계 행을 한 줄에 넣기 위해 4px 회수. 셰브론 자리는 그대로 */
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2367635A' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.setting-row select:hover,
.setting-row input[type="number"]:hover {
  background-color: var(--paper-2);
}

.setting-row select:disabled {
  color: var(--ink-3);
  opacity: 0.45;
}

#font-select {
  flex: 1;
  min-width: 96px;
}

/* 큰 시계 · 보조 · 크기 · 스탬프 — 폭이 제각각이면 행이 지저분해지므로 통일한다.
   P6.8: 72 → 66px. 최장값 "크게"·"절대"(21px)에 39px 이 남아 여유가 충분하다.
   select 에 명시 width 가 있어 padding-right 를 줄여도 레이아웃 폭은 안 줄어든다 —
   폭 자체를 줄여야 시계 행이 한 줄에 선다. */
.setting-row select.fixed-w {
  flex: 0 0 auto;
  width: 66px;
}

/* P6.8: 접힌 폭은 **선택 가능한** 최장값이 정한다.
   `(종료 시각 필요)` 가 붙은 옵션은 비활성이라 접힌 상태에 절대 나타나지 않는데,
   그것 때문에 폭이 168px 이 되어 `스탬프` 가 아랫줄로 밀려났다.
   87px = 최장 선택값 "남음 + 경과"(55px) + 좌우 패딩 31px + 1px.
   펼친 목록은 macOS·Chrome 모두 내용에 맞춰 넓어지므로 긴 라벨이 잘리지 않는다(실측).
   4px 배수가 아니어도 된다 — 여백이 아니라 컨트롤 치수다. */
#clock-combo-group {
  flex: 0 0 auto;
  width: 83px;   /* P6.8: 87 → 83. padding-right 23→19 로 확보한 4px 을 폭에서 회수한다 */
}

#settings-panel .setting-row {
  flex-wrap: wrap;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stepper input {
  width: 52px;
  text-align: center;
  cursor: ew-resize;
}

.color-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-control-sm);
  background: none;
  cursor: pointer;
}

.swatches {
  display: flex;
  gap: 4px;
}

.swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  padding: 0;
}

/* 방송 중 긴급 배경 전환에 쓰는 컨트롤이다. 지금 무엇이 선택됐는지 보여야 한다.
   색을 덧칠하지 않고 링으로만 표시한다 — 스와치 자체가 색이라 색 강조를 쓸 수 없다. */
.swatch.selected {
  box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2.5px var(--paper), 0 0 0 4px var(--ink);
}

.text-btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: var(--sp-1) var(--sp-3);
  font-size: 12px;
  cursor: pointer;
  margin-left: auto;
}

.text-btn:hover {
  background: var(--paper-2);
}

/* P6.6: 전 모달 통일 — 오른쪽 [취소] 는 투명 + 헤어라인 + 붉은 글씨.
   .subtle 의 유일한 사용처가 저장 모달의 [취소] 다. */
.text-btn.subtle {
  background: transparent;
  color: var(--danger-ink);
  border-color: var(--line);
  font-weight: 600;
}

.text-btn.subtle:hover {
  background: var(--paper-2);
}

/* B. neutral — 파랑을 버린다. 중성 고대비가 주동작을 나타낸다 */
.text-btn.save {
  background: var(--ink);
  color: var(--stage-ink);
  border-color: var(--ink);
  font-weight: 600;
  margin-left: 0;
}

.text-btn.save:hover {
  background: #2F2C27;
  border-color: #2F2C27;
}

/* B. destructive — 배경 채움을 없앤다. 빨간 면이 사라지고 빨간 글씨만 남는다.
   존재는 하되 시선을 끌지 않는다. */
.text-btn.danger {
  background: transparent;
  color: var(--danger-ink);
  border-color: var(--line);
}

.text-btn.danger:hover {
  background: var(--paper-2);
  border-color: var(--line);
}


.style-controls {
  display: flex;
  gap: var(--sp-1);
}

.text-style-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.style-btn {
  font-size: 15px;
}

.seg-group {
  display: flex;
  gap: 4px;
}

/* B. ghost 기조 — 보조 조작은 투명 바탕에 테두리만 */
.seg-btn {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: var(--sp-1) var(--sp-2);
  font-size: 12px;
  cursor: pointer;
}

.seg-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.seg-btn.active {
  background: var(--accent-fill);
  border-color: var(--accent);
  color: var(--accent-ink);
}

input[type="range"] {
  flex: 1;
  margin-left: 0;
  margin-right: 0;
}

#log-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  /* 왼쪽만 29px = 카드 여백 11 + 카드 반경 18. 곡선이 끝나는 지점이라
     탭이 항상 평평한 윗면에 앉는다. 카드 반경 18px 은 그대로 둔다. */
  padding: 9px 11px 0 29px;
  background: var(--paper);
  flex-shrink: 0;
  overflow-x: auto;
}

/* G. 인덱스 탭 — 활성 탭이 카드와 같은 배경색이라 종이로 이어진다.
   배경·글자색은 renderLogTabs() 가 그 탭의 bgColor 로 인라인 지정한다. */
.log-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px 7px;
  border-radius: var(--r-tab) var(--r-tab) 0 0;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transform: translateY(2px);
  transition: transform var(--t-state) ease, background var(--t-state) ease;
}

.log-tab-bar {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  opacity: 0.5;
  flex-shrink: 0;
}

.log-tab:hover {
  background: var(--paper-3);
}

.log-tab.active {
  transform: none;
  box-shadow: 0 -1px 2px rgba(38, 34, 26, 0.07);
}

.log-tab.active .log-tab-bar {
  opacity: 0.55;
}

.log-tab-name {
  max-width: 9ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.log-tab-name-input {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  width: 8ch;
  cursor: text;
}

.log-tab-name-input:focus {
  outline: none;
  text-decoration: underline;
}

.log-tab-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.55;
}

.log-tab:hover .log-tab-close {
  display: flex;
}

.log-tab-close:hover {
  background: rgba(0, 0, 0, 0.18);
  opacity: 1;
}

.log-tab.active .log-tab-close:hover {
  background: rgba(0, 0, 0, 0.12);
}

.log-tab-add {
  padding: 6px 10px;
  border-radius: var(--r-tab) var(--r-tab) 0 0;
  background: none;
  border: 1.5px dashed var(--line);
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(2px);
}


.log-tab-add:hover {
  background: var(--card);
}

.log-tab-add:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-modal);
  padding: 18px;
  width: min(320px, 88vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.modal-card h3 {
  margin: 0;
  font-size: 15px;
}

.modal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.modal-row input[type="text"] {
  font-family: inherit;
  font-size: 13px;
  border-radius: var(--r-control);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 6px 8px;
}

.modal-row .seg-group {
  flex-wrap: wrap;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-actions .text-btn {
  margin-left: 0;
}

.modal-actions .text-btn.save {
  font-weight: 700;
}

/* D3. 메모가 캔버스를 전부 덮으면 대비 계산의 전제(카드 주변에 캔버스가 보인다)가 무너진다.
   좌우 여백 11px + 상단만 둥근 반경으로 종이 카드를 만든다. */
#memo {
  flex: 1 1 auto;
  min-height: 88px;           /* P6.6: 기본 28px 글자 2줄. 미리보기가 목적인데 메모가 사라지면 의미가 없다 */
  margin: 0 11px;
  outline: none;
  border-radius: var(--r-memo) var(--r-memo) 0 0;
  /* 카드 경계는 휘도 대비가 아니라 기하학이 그린다 — 테두리 + 립 하이라이트 + 그림자.
     그림자만으로는 대비가 낮은 프리셋(핑크 1.05 · 블루 1.04)에서 약하다. */
  border: 1px solid var(--line);
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 -1px 3px rgba(38, 34, 26, 0.10);
  padding: 16px 16px 64px;
  background: #fff59d;
  color: #222222;
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 28px;
  line-height: 1.4;
  word-break: break-word;
  overflow-y: auto;
  white-space: pre-wrap;
}

#memo div,
#memo p {
  margin: 0;
}

#memo:empty:before {
  content: attr(data-placeholder);
  opacity: 0.5;
  pointer-events: none;
}

/* Custom tooltip (JS-positioned, always clamped inside the window) */
.app-tooltip {
  position: fixed;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  padding: 4px 8px;
  border-radius: var(--r-control-sm);
  width: max-content;
  max-width: 240px;
  text-align: center;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.app-tooltip.visible {
  opacity: 1;
}

/* Toast (with optional action) */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 20, 20, 0.94);
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  z-index: 10002;
  opacity: 0;
  transition: opacity var(--t-panel) ease;
  max-width: calc(100vw - 24px);
}

.app-toast.visible {
  opacity: 1;
}

.app-toast-action {
  background: var(--ink);
  color: var(--stage-ink);
  border: none;
  border-radius: var(--r-control);
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.app-toast-action:hover {
  background: #2F2C27;
}

/* Dock version + context menu */
#dock-version {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--stage-ink-3);
  margin-top: 1px;
}

.dock-brand {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

/* K4. 팝오버 3곳(지우기 ▾ · [+60▾] · 브랜드 우클릭)이 같은 컴포넌트다.
   블러 금지 — 방송 중 GPU 부담. */
.ctx-menu {
  position: fixed;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--sp-1);
  min-width: 168px;
  box-shadow: 0 4px 12px rgba(38, 34, 26, 0.35);
  z-index: 10003;
  display: flex;
  flex-direction: column;
}

.ctx-item {
  background: none;
  border: none;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-control);
  cursor: pointer;
  white-space: nowrap;
}

.ctx-item:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.ctx-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}

/* First-run tutorial */
#tutorial-overlay,
#shortcut-sheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10004;
  overflow-y: auto;
}

#tutorial-overlay.hidden,
#shortcut-sheet.hidden {
  display: none;
}

.tutorial-card {
  background: var(--card);
  color: var(--ink);
  border-radius: 12px;
  padding: 18px;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}

/* 단축키 시트 표 — 카드·kbd·버튼은 튜토리얼 것을 그대로 쓴다.
   단일 그리드라 단축키 열이 전 그룹에서 같은 폭으로 맞는다. max-content 이므로
   고정 폭을 크게 잡지 않는다 — 내용이 정하고, 설명은 그 바로 옆에 붙는다. */
.sc-table {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
  margin-bottom: var(--sp-4);   /* 닫기 버튼이 마지막 행에 붙는다 */
  font-size: 12px;
}

/* 색면을 쓰지 않는다. 크기·굵기·자간·여백·선으로만 위계를 세운다 —
   설정 패널의 구분선 캡션과 같은 방식이다. */
.sc-head {
  grid-column: 1 / -1;
  margin: var(--sp-4) 0 0;
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.sc-head:first-child {
  margin-top: 0;
}

.sc-desc {
  color: var(--ink-2);
}

#shortcut-sheet .tutorial-card h3 {
  margin: 0 0 12px;
}

.tutorial-card h3 {
  margin: 0 0 2px;
  font-size: 15px;
}

.tutorial-sub {
  margin: 0 0 12px;
  font-size: 11px;
  opacity: 0.6;
}

.tutorial-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tutorial-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  opacity: 0.9;
}

.tutorial-list b {
  color: var(--ink);
  margin-right: 2px;
}

.t-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--line);
  color: var(--ink-2);        /* P6.6: #9fc4ee 는 대비 1.36 이었다. 파랑 5곳 규칙에도 없던 용도다 */
}

.t-ico svg {
  width: 15px;
  height: 15px;
}

.t-ico.t-text {
  font-size: 9px;
  font-weight: 700;
}

.tutorial-foot {
  margin: 0 0 14px;
  max-width: 34em;
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.55;
}

.tutorial-card .text-btn {
  width: 100%;
  margin-left: 0;
  padding: 8px;
}

kbd {
  background: var(--paper-2);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: inherit;
  font-size: 10px;
  margin: 0 1px;
}

/* Confirm dialog — 앱 톤(다크 카드 + 파랑 액센트)에 맞춘 커스텀 모달 */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10005;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.confirm-overlay.visible {
  opacity: 1;
}

.confirm-card {
  background: var(--card);
  color: var(--ink);
  border-radius: 12px;
  padding: 18px;
  width: min(320px, 100%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  text-align: center;
  transform: translateY(4px);
  transition: transform 0.12s ease;
}

.confirm-overlay.visible .confirm-card {
  transform: translateY(0);
}

.confirm-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);          /* P6.6: #fff 는 밝은 카드 위 대비 1.02 로 보이지 않았다 */
}

.confirm-message {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.55;
  opacity: 0.7;
}

.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.confirm-actions .text-btn {
  flex: 0 1 108px;
  margin-left: 0;
  text-align: center;
  padding: 6px 10px;
  font-size: 12px;
}

/* P6.6: P1 의 "무거운 쪽이 안전한 쪽" 규칙 철회.
   실행 버튼이 비활성처럼 보였고, 한국어 UI 관습(왼쪽이 실행)과도 반대였다.
   방어는 P1 이 이미 확보했다 — Enter 무동작 · 기본 포커스 [취소] · 5초 실행 취소 토스트.
   기본 포커스는 여전히 [취소]다. 시각 위계와 포커스는 다른 층이다.
   (아래 원문 주석은 철회된 근거다)
   파괴적 모달에서는 시각적으로 무거운 쪽이 안전한 쪽이어야 한다.
   취소 = primary(진한 배경), 확인 = secondary(테두리만). 확인 모달 안에서만 적용. */
.confirm-actions .confirm-ok {
  background: var(--ink);
  color: var(--stage-ink);
  border-color: var(--ink);
  font-weight: 700;
}

.confirm-actions .confirm-ok:hover {
  background: #2F2C27;
}

.confirm-actions .confirm-cancel {
  background: transparent;
  color: var(--danger-ink);
  border-color: var(--line);
  font-weight: 600;
}

.confirm-actions .confirm-cancel:hover {
  background: var(--paper-2);
}

.confirm-actions .confirm-cancel:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nowrap {
  white-space: nowrap;
}

.ctx-item.ctx-credit {
  font-size: 11px;
  opacity: 0.45;
}

.ctx-item.ctx-credit:hover {
  opacity: 0.75;
}

.tutorial-list b {
  white-space: nowrap;
}

.confirm-message {
  white-space: pre-line;      /* 문장 사이 \n 만 의미 단위로 남긴다 */
  text-wrap: balance;         /* 문장 안쪽은 균형 배분 — <br> 로 고정하지 않는다 */
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
}

.tutorial-foot {
  text-align: left;
}

/* ---- P2: 보조 표시 / 기준 표시 / 방송 시간 입력 ---- */
#clock-sub {
  width: 100%;
  text-align: center;
  font-family: 'Pretendard Variable', sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 15px;
  color: #cfcfcf;
  margin-top: 2px;
}

#clock-sub.hidden {
  display: none;
}

#clock-basis {
  width: 100%;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--stage-ink-3);
  margin-top: 3px;
}


.bc-label {
  min-width: 26px;
}

.setting-row input.time-mask {
  font-family: 'Menlo', 'Pretendard Variable', monospace;
  font-size: 12px;
  border-radius: var(--r-control-sm);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: var(--sp-1) var(--sp-2);
  width: 62px;
  text-align: center;
  letter-spacing: 0.5px;
  width: 60px;
  flex: 0 0 auto;
}

.setting-row input.time-mask::placeholder {
  color: #777;
  letter-spacing: 0;
}

.setting-row input.time-mask:focus {
  outline: none;
  border-color: var(--accent);
}

/* 검증 실패 피드백: 토스트 대신 200ms 흔들림 + 붉은 테두리 */
.setting-row input.time-mask.time-invalid {
  border-color: #e05555;
  animation: time-shake var(--t-panel) ease;
}

@keyframes time-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.seg-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.seg-btn:disabled:hover {
  background: var(--card);
}

/* 시계에 no-drag 를 걸면 창을 잡을 곳이 사라진다. 기준 표시 줄이 전체 폭에 있으므로
   여기를 이동 영역으로 확보한다. 숨긴 상태에서도 8px 빈 영역을 남긴다 —
   시각적으로는 아무것도 안 보이고 OS 히트테스트에서만 잡힌다. */
#clock-basis {
  -webkit-app-region: drag;
}

#clock-basis.hidden {
  visibility: hidden;
  min-height: 8px;
}



/* ---- 시계 영역 라이트 테마 (메모 영역은 불변) ---- */
#app.clock-light #topbar,
#app.clock-light #topbar-buttons {
  background: var(--stage-lt);
  color: var(--ink);
}

/* 캔버스와 갈리도록 아래 경계에 헤어라인 */
#app.clock-light #topbar-buttons {
  box-shadow: inset 0 -1px 0 var(--line);
}

#app.clock-light #clock {
  color: var(--ink);
}

#app.clock-light #clock-sub {
  color: var(--ink);
  opacity: 0.66;
}

#app.clock-light #clock-basis {
  color: var(--ink-3);
}

#app.clock-light .button-row .icon-btn {
  color: var(--ink-3);
}

#app.clock-light .button-row .icon-btn:hover {
  background: rgba(26, 25, 23, 0.06);
  color: var(--ink);
}

#app.clock-light .button-row .icon-btn.active {
  background: var(--accent-fill);
  color: var(--accent-ink);
}

#app.clock-light 
/* ---- P3: 세션 시작 ---- */
/* [지금으로]는 입력 보조 버튼, [세션 시작]은 실행 버튼이다.
   같은 급으로 읽히지 않도록 구분선 아래 독립 행 + 무게 차이를 준다.
   기본 동작이 파괴적이지 않으므로 primary(파랑)·destructive(빨강) 색은 쓰지 않는다. */
.session-start-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.session-start-btn {
  flex: 0 0 auto;
  min-width: 116px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.session-start-btn:hover {
  background: var(--paper-2);
  border-color: var(--line);
}

.session-start-hint {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* 세션 시작 모달 — confirm 모달의 위계(취소 primary / 실행 secondary)를 그대로 재사용 */
.session-opts {
  text-align: center;         /* 상위 체크박스는 안내문의 연장이다 */
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.session-check {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}

.session-check input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.session-check.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.session-tabs {                /* 하위는 목록이라 좌측 기준을 유지한다 */
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-left: 22px;
  text-align: left;
}

.session-tabs .session-check {
  justify-content: flex-start;
}

.session-tabs .session-check {
  font-size: 11px;
  max-width: 13ch;
}

.session-tabs .session-check span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-note {
  margin: -8px 0 14px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-2);        /* P6.6: #8f8f8f 는 대비 3.18. 역산이 바뀐다는 경고문이라 읽혀야 한다 */
}

.session-note.hidden {
  display: none;
}

/* ---- 화면 정리 모드 (P4) ---- */
#app.focus-mode #topbar-buttons,
#app.focus-mode #log-tabs,
#app.focus-mode .dock-btn,
#app.focus-mode .dock-divider {
  display: none;
}

/* 컴팩트 모드는 이미 메모·탭·독을 숨긴다. 독이 숨겨졌다는 건 L2 복귀 경로인 브랜드도
   사라졌다는 뜻이라, 여기서 아이콘 행까지 숨기면 정리 효과는 0인데 마우스 복귀 수단만 전부 없어진다.
   #app.clock-bottom.compact-mode 가 같은 이유로 아이콘 행을 되살리는 것과 동일한 판단이다. */
#app.focus-mode.compact-mode #topbar-buttons {
  display: flex;
}

/* 알약 크롬을 벗겨 맨 텍스트만 남긴다 — 배경이 남으면 정리를 절반만 한 것이다 */
#app.focus-mode .bottom-dock {
  background: none;
  box-shadow: none;
  padding: 0;
}

/* 일반 모드의 독은 메모 위에 떠 있지만(음수 마진), 정리 모드에서는 진행자가 읽는 화면이라
   브랜드가 본문 글자를 덮으면 안 된다. 겹침을 없애고 메모 아래에 놓는다 */
#app.focus-mode #bottom-buttons {
  margin-top: 0;
  opacity: 0.15;
}

#app.focus-mode #bottom-buttons:hover {
  opacity: 1;
}

/* 방송 중 비상 탈출구다. 레이아웃을 건드리지 않고 조준 면적만 키운다.
   위쪽은 메모 본문의 클릭을 가로채므로 아래로 치우쳐 확장한다 */
#app.focus-mode .dock-brand {
  cursor: pointer;
  padding: 2px 14px 8px;
  margin: -2px -14px -8px;
}

#app.focus-mode .dock-name {
  font-size: 9px;
}

/* 지우기 ▾ 팝오버 (P4.5) — .ctx-menu 를 브랜드 메뉴와 공유한다 */
.ctx-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.ctx-hint {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
}

.ctx-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

#clear-menu-btn .caret {
  font-size: 11px;
  opacity: 0.7;
  margin-left: var(--sp-1);
}

/* ---- 설정 창 분리 (P5) ---- */
/* 분리창은 설정 패널만 보여준다. 같은 index.html 을 ?win=settings 로 띄우므로
   마크업이 하나뿐이고, P4.6에서 재편한 패널이 그대로 산다. */
body.settings-window #topbar,
body.settings-window #topbar-buttons,
body.settings-window #log-tabs,
body.settings-window #memo,
body.settings-window #bottom-buttons {
  display: none;
}

body.settings-window #settings-panel {
  margin: 0;
  overflow-y: auto;
  flex: 1;
  padding: var(--sp-4);
}

body.settings-window #settings-panel.hidden {
  display: flex;
}

.detached-only {
  display: none;
}

body.settings-window .detached-only {
  display: flex;
}

/* 웹에는 분리 기능이 없다. 숨기지 않고 비활성 + 툴팁으로 노출한다 (R3) */
#settings-detach-group .seg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 저장 모달 탭 선택 (P4.7) */
.save-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  flex: 1;
}

.save-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 12px;
  cursor: pointer;
  max-width: 120px;
}

.save-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.text-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- P4.7 신규 요소 (형태·동작만. 시각 규격은 P5.5 K절) ---- */
.ico-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--card);   /* 목업 .ico 와 동일 — 흰 카드 표면 */
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.ico-btn svg {
  width: 16px;
  height: 16px;
}

.ico-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
}

.ico-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* P6.7: HTML 의 hidden 속성이 SVG 자식에는 듣지 않는다 (Chrome UA 규칙이 HTML 요소에만 적용).
   아이콘 A/B 토글이 전부 두 모양을 겹쳐 그리고 있었다 — 테마(달+해)·시계 위치(막대 2개)·설정 분리.
   `hidden` 을 상태로 읽는 JS 는 그대로 두고 표시만 바로잡는다. */
svg [hidden] {
  display: none;
}

/* 웹에서 창 관련 컨트롤은 비활성이다 (R3). .ico-btn:disabled 와 같은 표현을 쓴다 */
.icon-btn:disabled,
.dock-btn:disabled,
#opacity:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.icon-btn:disabled:hover,
.dock-btn:disabled:hover {
  background: transparent;
}

/* 세로 구분선 — 실행(▶)과 입력을 가른다. --sp-4 로 벌려 ⌫ 와의 인접 오클릭을 막는다 */
.v-rule {
  align-self: stretch;
  border-left: 1px solid var(--line);
  margin: 0 var(--sp-2) 0 var(--sp-1);
}

.v-rule + .mini-label {
  margin-left: var(--sp-2);
}

/* [+60▾] — 클릭은 즉시 적용, 캐럿은 목록. 캐럿이 없으면 아무도 +30 을 발견하지 못한다 */
/* 본체와 캐럿이 한 덩어리다. 테두리를 나누면 사용자가 버튼 2개로 읽고
   캐럿이 무슨 버튼인지 알 수 없게 된다. */
.split-btn {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
  background: var(--card);
  color: var(--ink);
}

.split-btn > button {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
}

.split-btn > button:hover {
  background: var(--paper-2);
}

.split-btn .split-caret {
  padding-left: var(--sp-1);
  padding-right: var(--sp-1);
  font-size: 11px;
  line-height: 1;
  opacity: 0.6;            /* 부속임을 표시 */
}

.split-btn.disabled,
.split-btn > button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.setting-row.wrap {
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}

/* 이스터에그 문구 — 기준 표시와 같은 톤. 점멸·애니메이션 없음 (미러링 송출 고려) */
.clock-special {
  transition: opacity 0.3s ease;
}

/* ---- 스크롤 가시화 (P4.8) ----
   macOS 오버레이 스크롤바는 정지 상태에서 숨는다. 내용이 잘렸는지 알 수 없어
   "설정이 사라졌다"로 읽힌다. 항상 보이는 얇은 스크롤바 + 하단 페이드로 명시한다. */
#settings-panel::-webkit-scrollbar {
  width: 6px;
}

#settings-panel::-webkit-scrollbar-track {
  background: var(--paper-2);
}

#settings-panel::-webkit-scrollbar-thumb {
  background: var(--ink-3);
  border-radius: 3px;
}

#settings-panel::-webkit-scrollbar-thumb:hover {
  background: var(--ink-2);
}

/* 아래에 더 있다는 표준 어포던스. inset 그림자는 레이아웃에 높이를 더하지 않는다 —
   sticky ::after 로 하면 그 12px 이 다시 스크롤을 만들어 자기 자신을 유발한다. */
#settings-panel.scrollable {
  box-shadow: inset 0 -14px 12px -12px var(--paper);
}

/* B. destructive 팝오버 항목 — 배경 채움 없이 글씨만 */
.ctx-item.ctx-danger {
  color: var(--danger-ink);
}

/* A. 포커스 링은 액센트 2px — 파랑의 남은 용도 중 하나 */
.seg-btn:focus-visible,
.ico-btn:focus-visible,
.text-btn:focus-visible,
.split-btn > button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- H·K1. 아이콘 Klar 규격 (P5.5) ----
   viewBox 20x20 / stroke 1.5px / fill none / currentColor 전용.
   툴바 5종과 P4.7 신규 4종이 같은 시스템 안에 있어야 한다. */
.button-row .icon-btn svg,
.dock-btn svg,
.ico-btn svg,
.t-ico svg {
  flex: none;          /* 플렉스 아이템으로 축소되어 폭만 줄어드는 것을 막는다 */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* 원형 계열이 정사각형보다 크다 — 같은 크기로 그리면 원이 작아 보인다 */
.button-row .icon-btn svg {
  width: 17px;
  height: 17px;
}

.dock-btn svg {
  width: 15px;
  height: 15px;
}

.ico-btn svg {
  width: 16px;
  height: 16px;
}

/* K2. A/B 토글은 모양이 바뀐다. 파란 틴트를 쓰지 않는다 —
   파란 틴트는 툴바 ON/OFF 와 선택된 색 스와치 전용이다.
   id 를 나열하면 토글이 늘 때마다 빠뜨린다 — 실제로 P6.7 의 분리 버튼이 빠져
   혼자 --ink 로 진했다. 클래스로 묶어 재발 경로를 막는다. */
.ico-toggle {
  color: var(--ink-2);
}

.ico-btn:hover {
  color: var(--ink);
}

/* ⧉ 만 ON/OFF 성격이라 색상 규칙을 함께 쓴다 */
#settings-detach-btn.active {
  background: var(--accent-fill);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---- P6. 브랜드 락업 ----
   마크 높이 = 워드마크 cap height x 1.55, 간격 = 마크 높이 x 0.28.
   정렬은 baseline 이 아니라 광학 중앙이다. */
.tutorial-head {
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.015em;
}

.brand-mark {
  display: inline-flex;
  flex: none;
}

.brand-mark svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* ---- P6.5 워드마크 W1 — 콜론 치환 ----
   어두운 배경(--stage 계열) -> #FFE45C / 밝은 배경(--paper·--card) -> #C99A00.
   같은 노랑을 밝은 배경에 쓰면 --card 위 대비가 1.3 이라 읽히지 않는다. */
/* 워드마크는 한 덩어리다 — flex 컨테이너 안에서 텍스트 노드와 span 이 각각
   아이템이 되면 gap 만큼 벌어져 "Cue : Log" 로 읽힌다. */
.wordmark {
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.wm-colon {
  color: #FFE45C;
}

.tutorial-head .wm-colon {
  color: #C99A00;
}