/* ════ ide.css ════ 단일 화면 IDE — 무채색, IDE 스타일. 전부 #ide-screen 하위로 스코프. */

#ide-screen.ide-screen {
  display: none;
  flex: 1; min-height: 0; flex-direction: column;
  background: #ffffff; color: #1a1a1a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* 상단 바 */
.ide-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid #dddddd; background: #fafafa;
  font-size: 13px; flex-shrink: 0;
}
.ide-brand { font-weight: 700; letter-spacing: 0.06em; }
.ide-select, .ide-num {
  font-family: inherit; font-size: 13px; color: #1a1a1a;
  border: 1px solid #cccccc; background: #fff; padding: 4px 6px; border-radius: 2px;
}
.ide-num { width: 42px; text-align: center; }
.ide-target-wrap { color: #555; display: inline-flex; align-items: center; gap: 4px; }
.ide-btn {
  font-family: inherit; font-size: 13px; padding: 5px 14px;
  border: 1px solid #1a1a1a; background: #1a1a1a; color: #fff; border-radius: 2px; cursor: pointer;
}
.ide-btn:hover:not(:disabled) { background: #333; }
.ide-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ide-btn-ghost { background: #fff; color: #1a1a1a; }
.ide-btn-ghost:hover:not(:disabled) { background: #eee; }
.ide-len { color: #555; font-size: 12px; font-variant-numeric: tabular-nums; }
.ide-spacer { flex: 1; }
/* ElevenLabs 음성별 잔여 문자(우측 상단) */
.ide-usage { color: #555; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ide-usage .u-low { color: #c92a2a; font-weight: 700; }
.ide-usage .u-name { color: #999; }

/* 2-pane */
.ide-main { flex: 1; min-height: 0; display: flex; }
.ide-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ide-pane-main { flex: 1; }
.ide-pane-diff { width: 320px; flex-shrink: 0; }
.ide-pane-chat { width: 360px; flex-shrink: 0; }
/* 수정 DIFF 패널 */
.ide-diff {
  flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px;
  font-size: 13px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  color: #1a1a1a; -webkit-user-select: text; user-select: text;
}
.ide-diff-empty { color: #aaa; font-size: 12px; line-height: 1.6; }
.ide-diff-del { background: #ffe3e3; color: #c92a2a; text-decoration: line-through; border-radius: 2px; }
.ide-diff-ins { background: #e3f7e8; color: #2b8a3e; border-radius: 2px; }
.ide-diff-note { color: #888; font-size: 11px; padding-bottom: 6px; border-bottom: 1px solid #eee; margin-bottom: 8px; }
/* diff 작업 스택(접기/펼치기) */
.ide-diff-entry { border-bottom: 1px solid #eee; }
.ide-diff-entry > summary { cursor: pointer; padding: 7px 0; font-size: 12px; color: #333; font-weight: 700; list-style: none; user-select: none; }
.ide-diff-entry > summary::-webkit-details-marker { display: none; }
.ide-diff-entry > summary::before { content: '▸ '; color: #aaa; }
.ide-diff-entry[open] > summary::before { content: '▾ '; }
.ide-diff-sub { color: #aaa; font-weight: 400; font-size: 11px; }
.ide-diff-body { padding: 2px 0 10px; }
.ide-pane-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-bottom: 1px solid #eeeeee;
  font-size: 12px; color: #555; letter-spacing: 0.04em; flex-shrink: 0;
}
.ide-pane-sub { color: #aaa; font-size: 10px; }
.ide-stop-btn {
  margin-left: auto; font-family: inherit; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border: 1px solid #f1aeb5; border-radius: 3px;
  background: #fff5f5; color: #c92a2a; cursor: pointer; letter-spacing: 0;
}
.ide-stop-btn:hover { background: #ffe3e3; }
.ide-stop-btn:active { transform: translateY(1px); }
.ide-mini-btn {
  font-family: inherit; font-size: 12px; padding: 3px 9px;
  border: 1px solid #cccccc; background: #fff; color: #1a1a1a; border-radius: 2px; cursor: pointer;
}
.ide-pane-head .ide-mini-btn { margin-left: auto; }
.ide-mini-btn:hover:not(:disabled) { background: #f0f0f0; }
.ide-mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 본문(원고) */
.ide-doc { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ide-fixed {
  color: #999; font-size: 13px; line-height: 1.7;
  padding: 2px 0 2px 9px; border-left: 2px solid #dddddd;
}
.ide-input {
  flex: 1; min-height: 220px; resize: none;
  border: 1px solid #dddddd; border-radius: 2px; padding: 10px;
  font-family: inherit; font-size: 13px; line-height: 1.7; color: #1a1a1a; background: #fff;
}
.ide-input:focus { outline: none; border-color: #999; }
.ide-body {
  flex: 1; min-height: 0; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  font-size: 13px; line-height: 1.85; color: #1a1a1a; cursor: text;
}
/* 기사 사이 빈 줄의 시간 표시 (은은한 회색, 본문 안 거슬리게) */
#ide-screen .ide-ts { color: #c7c7c7; font-size: 11px; user-select: none; -webkit-user-select: none; }
/* 본문/첫·끝인사 텍스트는 드래그 선택 허용(전역 user-select:none 상속 차단 → 마커 지정 가능) */
.ide-doc, .ide-body, .ide-fixed, .ide-fixed .rv-fixed-text, #ide-screen .rv-mk {
  -webkit-user-select: text; user-select: text;
}
.ide-doc-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-top: 1px solid #eeeeee; font-size: 12px; color: #555; flex-shrink: 0;
}
.ide-len-foot { color: #555; font-variant-numeric: tabular-nums; margin-left: auto; }

/* 하단 오디오 재생바 (유튜브 씨커 스타일) */
.ide-play-btn {
  width: 30px; height: 30px; flex-shrink: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 12px; line-height: 1;
  border: 1px solid #1a1a1a; background: #1a1a1a; color: #fff; border-radius: 2px; cursor: pointer;
}
.ide-play-btn:hover:not(:disabled) { background: #333; }
.ide-play-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ide-seek {
  flex: 1; min-width: 80px; height: 6px; position: relative;
  background: #e4e4e4; border-radius: 3px; cursor: pointer;
}
.ide-seek-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #1a1a1a; border-radius: 3px; pointer-events: none; }
.ide-seek-thumb {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-left: -6px;
  transform: translateY(-50%); background: #1a1a1a; border-radius: 50%; box-shadow: 0 0 0 2px #fff;
  opacity: 0; transition: opacity 0.12s; pointer-events: none;
}
.ide-seek:hover .ide-seek-thumb, .ide-seek.dragging .ide-seek-thumb { opacity: 1; }
.ide-seek.dragging .ide-seek-fill, .ide-seek.dragging { cursor: grabbing; }
.ide-time { color: #555; font-size: 11px; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* 두 패널 사이 가로 리사이즈 핸들 */
.ide-splitter {
  width: 6px; flex-shrink: 0; cursor: col-resize; background: #f0f0f0;
  border-left: 1px solid #dddddd; border-right: 1px solid #dddddd;
}
.ide-splitter:hover, .ide-splitter:active { background: #cfcfcf; }

/* 채팅(에이전트) */
.ide-chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.5; }
.ide-msg { padding: 6px 9px; border-radius: 2px; max-width: 100%; word-break: break-word; white-space: pre-wrap; }
.ide-msg-user { background: #1a1a1a; color: #fff; align-self: flex-end; }
.ide-msg-agent { background: #f2f2f2; color: #1a1a1a; align-self: flex-start; border: 1px solid #e6e6e6; }
/* 작업 로그 묶음(접기/펼치기) */
.ide-work { align-self: stretch; border: 1px solid #e6e6e6; border-radius: 2px; background: #fafafa; }
.ide-work > summary { cursor: pointer; padding: 6px 9px; font-size: 12px; color: #777; list-style: none; user-select: none; }
.ide-work > summary::-webkit-details-marker { display: none; }
.ide-work > summary::before { content: '▸ '; }
.ide-work[open] > summary::before { content: '▾ '; }
.ide-work-body { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.ide-work-body .ide-msg { background: #fff; }
/* 완료/주의 요약 (눈에 띄게) */
.ide-msg-sum { align-self: stretch; font-weight: 700; font-size: 13.5px; border: none; padding: 9px 11px; }
.ide-msg-sum-ok { background: #e6f7ec; color: #1b7a3d; }
.ide-msg-sum-warn { background: #fff2e0; color: #c2570a; }
.ide-msg-sum-rec { background: #fff8e6; color: #946200; font-weight: 600; font-size: 12.5px; }
.ide-chat-input-wrap { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #eeeeee; flex-shrink: 0; align-items: flex-end; }
/* 여러 줄 입력(textarea): 기본 3줄 높이로 보이고, 그 이상은 스크롤 */
.ide-chat-input {
  flex: 1; font-family: inherit; font-size: 13px; line-height: 1.5;
  border: 1px solid #cccccc; border-radius: 2px; padding: 6px 8px;
  color: #1a1a1a; background: #fff; resize: none; overflow-y: auto;
  min-height: calc(4.5em + 12px); max-height: calc(4.5em + 12px);
}
.ide-chat-input:focus { outline: none; border-color: #999; }
/* 에이전트 작업 중: 입력 차단을 명확히 표시 */
.ide-chat-input:disabled { background: #f1f1f1; color: #9aa3ad; cursor: not-allowed; border-color: #e2e2e2; }

/* 마커(무채색): 번호(왼쪽 위) + 음영 + ✕(오른쪽 위) */
#ide-screen .rv-mk { background: #ededed; box-shadow: inset 0 -2px 0 #888; border-radius: 2px; padding: 0 1px; }
#ide-screen .rv-mk-num { font-size: 9px; font-weight: 700; color: #fff; background: #1a1a1a; border-radius: 3px; padding: 0 3px; margin-right: 2px; vertical-align: super; line-height: 1; user-select: none; }
#ide-screen .rv-mk-x { font-size: 9px; font-weight: 700; vertical-align: super; line-height: 1; margin-left: 2px; padding: 0 3px; border: none; border-radius: 3px; cursor: pointer; background: #777; color: #fff; }
#ide-screen .rv-mk-x:hover { background: #1a1a1a; }

/* 토글 버튼(상단 네비) */
#btn-ide-toggle { font-family: inherit; }

/* 로그인 화면: 화면 모드 선택(레트로/IDE) */
.login-uimode { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 2px 0 6px; }
.login-uimode-label { font-size: 12px; color: #888; font-weight: 700; }
.login-uimode-btn { font-size: 12px; font-weight: 700; padding: 5px 14px; border: 1.5px solid #c2cedb; background: #fff; color: #54606c; border-radius: 8px; cursor: pointer; }
.login-uimode-btn:hover { background: #f0f4f8; }
.login-uimode-btn.active { background: #28343e; color: #fff; border-color: #28343e; }

/* IDE 활성 시 왼쪽 스텝 사이드바 숨김(메인 넓게) */
body.ide-active .left-sidebar { display: none !important; }
/* IDE 활성 시 상단 레트로 네비(헤더) 제거 — 화면 전부를 작업창에 */
body.ide-active .top-nav { display: none !important; }

@media (max-width: 768px) {
  .ide-pane-chat, .ide-pane-diff { width: 100% !important; }
  .ide-main { flex-direction: column; }
  .ide-pane-main, .ide-pane-diff { border-bottom: 1px solid #ddd; }
  .ide-splitter { display: none; }
}

/* 확정 리스트 모달 */
.ide-modal-overlay {
  position: fixed; inset: 0; z-index: 9999; background: rgba(20,20,20,0.32);
  display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px;
}
.ide-modal {
  width: 100%; max-width: 560px; background: #fff; border: 1px solid #ddd; border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18); max-height: 78vh; display: flex; flex-direction: column; overflow: hidden;
}
.ide-modal-head {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #eee;
  font-size: 14px; font-weight: 700; color: #1a1a1a;
}
.ide-modal-sub { font-weight: 400; font-size: 11px; color: #999; }
.ide-modal-x { margin-left: auto; border: none; background: none; font-size: 15px; color: #888; cursor: pointer; padding: 2px 6px; }
.ide-modal-x:hover { color: #1a1a1a; }
.ide-modal-body { overflow-y: auto; padding: 6px 0; }
.ide-sess-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #f2f2f2; }
.ide-sess-row:hover { background: #fafafa; }
.ide-sess-main { flex: 1; min-width: 0; }
.ide-sess-title { font-size: 13px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ide-sess-meta { font-size: 11px; color: #999; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ide-sess-badge { font-size: 10px; color: #2b8a3e; background: #e3f7e8; border-radius: 2px; padding: 1px 5px; margin-left: 4px; }
.ide-sess-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ide-sess-load {
  font-family: inherit; font-size: 12px; padding: 4px 12px; border: 1px solid #1a1a1a;
  background: #1a1a1a; color: #fff; border-radius: 2px; cursor: pointer;
}
.ide-sess-load:hover { background: #333; }
.ide-sess-del { border: 1px solid #eee; background: #fff; border-radius: 2px; cursor: pointer; padding: 4px 8px; font-size: 12px; }
.ide-sess-del:hover { background: #ffe3e3; border-color: #f1aeb5; }
.ide-sess-empty { padding: 28px 16px; text-align: center; color: #aaa; font-size: 12px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   v2 "친근한 레트로 윈도우" 스킨 (DESIGN.md §1 · 2026-07-03)
   — 기존 셀렉터 값 오버라이드(캐스케이드) + 홈/알람/칩/터미널 신규
═══════════════════════════════════════════════════════════════ */
#ide-screen {
  background: #e6eff9; color: #28343e;
  font-family: 'Manrope', 'Inter', -apple-system, sans-serif;
}
#ide-screen .ide-topbar {
  background: #dfe9f5; border-bottom: 2px solid #28343e; padding: 9px 14px; gap: 8px;
}
#ide-screen .ide-brand { font-weight: 900; letter-spacing: -0.02em; color: #1e2833; }
#ide-screen .ide-btn {
  font-family: inherit; font-weight: 700; font-size: 13px;
  border: 2px solid #28343e; border-radius: 8px; background: #28343e; color: #e6eff9;
  box-shadow: 2px 2px 0 #28343e; padding: 5px 14px;
  display: inline-flex; align-items: center; gap: 5px;
}
#ide-screen .ide-btn:hover:not(:disabled) { background: #3a4a58; }
#ide-screen .ide-btn:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #28343e; }
#ide-screen .ide-btn-ghost { background: #fff; color: #28343e; }
#ide-screen .ide-btn-ghost:hover:not(:disabled) { background: #dfe9f5; }
#ide-screen .ide-btn:disabled { opacity: 0.35; }
#ide-screen .ide-select, #ide-screen .ide-num {
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: #28343e;
  border: 2px solid #28343e; border-radius: 8px; background: #fff; padding: 4px 8px;
}
/* 패널 = 레트로 창 */
#ide-screen .ide-main { padding: 10px; gap: 0; background: #e6eff9; }
#ide-screen .ide-pane {
  border: 2px solid #28343e; border-radius: 10px; background: #fff;
  box-shadow: 3px 3px 0 #28343e; overflow: hidden;
}
#ide-screen .ide-pane-head {
  background: #dfe9f5; border-bottom: 2px solid #28343e; color: #1e2833;
  font-weight: 800; font-size: 12px; letter-spacing: 0.04em; padding: 8px 12px;
}
#ide-screen .ide-pane-sub { color: #54606c; font-weight: 400; }
#ide-screen .ide-splitter { width: 10px; background: transparent; cursor: col-resize; position: relative; }
#ide-screen .ide-splitter::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 34px; border-radius: 2px; background: #b9c9dc;
}
#ide-screen .ide-splitter:hover::after, #ide-screen .ide-splitter.dragging::after { background: #28343e; }
/* 본문·diff·프롬프트 텍스트는 모노 유지 */
#ide-screen .ide-doc, #ide-screen .ide-body, #ide-screen .ide-input, #ide-screen .ide-diff,
#ide-screen .ide-chat-log, #ide-screen .ide-chat-input, #ide-screen .ide-len, #ide-screen .ide-len-foot,
#ide-screen .ide-time, #ide-screen .ide-usage, #ide-screen .ide-title-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* 풋터(재생줄) */
#ide-screen .ide-doc-foot { border-top: 2px solid #28343e; background: #dfe9f5; }
#ide-screen .ide-play-btn { border: 2px solid #28343e; border-radius: 8px; background: #fff; color: #28343e; box-shadow: 2px 2px 0 #28343e; }
#ide-screen .ide-seek-fill { background: #28343e; }

/* 상태 배지 · 제목 칩 · 사용자 칩 */
.ide-status-badge {
  font-size: 13px; font-weight: 800; padding: 5px 14px; border-radius: 8px; border: 2px solid;
  box-shadow: 2px 2px 0 #28343e; display: inline-flex; align-items: center;
}
.ide-status-badge.st-review { color: #c92a2a; border-color: #c92a2a; background: #ffe3e3; }
.ide-status-badge.st-confirmed { color: #2b8a3e; border-color: #2b8a3e; background: #e3f7e8; }
.ide-status-badge.st-draft { color: #54606c; border-color: #b9c9dc; background: #fff; }
.ide-title-chip { font-size: 12px; font-weight: 700; color: #1e2833; padding: 3px 8px; background: #fff; border: 2px solid #28343e; border-radius: 6px; }
.ide-title-chip:empty { display: none; }
.ide-user-chip {
  font-size: 12px; font-weight: 800; color: #28343e; padding: 4px 10px;
  background: #fff; border: 2px solid #28343e; border-radius: 8px; white-space: nowrap;
}
/* 알람 벨 */
.ide-bell {
  position: relative; border: 2px solid #28343e; border-radius: 8px; background: #fff; color: #28343e;
  width: 32px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 2px 2px 0 #28343e;
}
.ide-bell:hover { background: #dfe9f5; }
.ide-bell-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #c92a2a; border: 2px solid #fff; }
.ide-bell-panel {
  position: fixed; top: 52px; right: 14px; z-index: 10000; width: 340px; max-height: 60vh;
  background: #fff; border: 2px solid #28343e; border-radius: 10px; box-shadow: 4px 4px 0 #28343e;
  display: flex; flex-direction: column; overflow: hidden;
}
.ide-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: #dfe9f5; border-bottom: 2px solid #28343e; font-weight: 800; font-size: 13px; color: #1e2833; }
.ide-bell-list { overflow-y: auto; }
.ide-bell-item { padding: 9px 12px; border-bottom: 1px solid #dfe9f5; cursor: pointer; }
.ide-bell-item:hover { background: #f2f7fd; }
.ide-bell-item.unread { border-left: 3px solid #c92a2a; }
.ide-bell-item .bi-title { font-weight: 800; font-size: 12px; color: #1e2833; }
.ide-bell-item .bi-msg { font-size: 12px; color: #54606c; margin-top: 2px; }
.ide-bell-item .bi-time { font-size: 10px; color: #8ea0b5; margin-top: 2px; font-family: ui-monospace, monospace; }
.ide-bell-empty { padding: 24px; text-align: center; color: #8ea0b5; font-size: 12px; }

/* ── 홈 화면 ── */
.ide-home { display: flex; flex-direction: column; height: 100%; background: #e6eff9; }
.ide-home-top { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: #dfe9f5; border-bottom: 2px solid #28343e; }
.ide-home-top .ide-brand { font-weight: 900; color: #1e2833; }
.ide-home-main { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 14px; }
.ide-home-panel {
  border: 2px solid #28343e; border-radius: 10px; background: #fff; box-shadow: 3px 3px 0 #28343e;
  display: flex; flex-direction: column; overflow: hidden;
}
.ide-home-list-panel { flex: 11; min-width: 0; }
.ide-home-form-panel { flex: 9; min-width: 0; }
.ide-home-panel-head { padding: 10px 14px; background: #dfe9f5; border-bottom: 2px solid #28343e; font-weight: 800; font-size: 13px; color: #1e2833; }
.ide-home-list { flex: 1; overflow-y: auto; }
.ide-home-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #dfe9f5; cursor: pointer; }
.ide-home-row:hover { background: #f2f7fd; }
.ide-home-row .hr-date { font-family: ui-monospace, monospace; font-size: 12px; color: #54606c; flex: none; width: 84px; font-variant-numeric: tabular-nums; }
.ide-home-row .hr-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #1e2833; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ide-home-row .hr-voice { flex: none; font-size: 12px; color: #54606c; }
.ide-home-row .hr-len { flex: none; font-family: ui-monospace, monospace; font-size: 12px; color: #54606c; font-variant-numeric: tabular-nums; }
.ide-home-row .hr-badge { flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; border: 1.5px solid; }
.ide-home-row .hr-badge.st-review { color: #c92a2a; border-color: #c92a2a; background: #ffe3e3; }
.ide-home-row .hr-badge.st-confirmed { color: #2b8a3e; border-color: #2b8a3e; background: #e3f7e8; }
.ide-home-empty { padding: 40px; text-align: center; color: #8ea0b5; font-size: 13px; }
.ide-home-form { flex: 1; padding: 16px 20px 18px; display: flex; flex-direction: column; overflow-y: auto; }
.ide-form-row { padding: 13px 0; border-bottom: 1px solid #e8eef6; }
.ide-form-row:last-of-type { border-bottom: none; }
.ide-form-label { font-size: 12px; font-weight: 800; color: #1e2833; margin-bottom: 9px; letter-spacing: 0.02em; }
.ide-form-hint { font-size: 11px; color: #8ea0b5; margin-left: 8px; }
.ide-preset-row { display: flex; gap: 8px; }
.ide-chip {
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px; color: #28343e;
  border: 2px solid #28343e; border-radius: 8px; background: #fff; padding: 8px 16px;
  cursor: pointer; box-shadow: 2px 2px 0 #28343e;
}
.ide-chip:hover { background: #dfe9f5; }
.ide-chip.active { background: #28343e; color: #e6eff9; }
.ide-chip-custom { margin-left: auto; }
.ide-assign-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #54606c; }
.ide-assign-gap { width: 18px; }
.ide-home-start { margin-top: 14px; width: 100%; justify-content: center; font-size: 15px; padding: 11px 0; }
#home-title .ht-date { border-bottom: 1.5px dashed #54606c; cursor: pointer; }
#home-title .ht-date:hover { background: #fff; }

/* ── 프롬프트 = 터미널 ── */
.ide-term { line-height: 1.35 !important; font-size: 12px; padding: 8px 10px; }
.ide-term .ide-msg { padding: 1px 0; border-radius: 0; max-width: 100%; background: none; }
.ide-term .tl { display: block; padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
.ide-term .tl-sys { color: #54606c; }
.ide-term .tl-sys::before { content: '> '; color: #8ea0b5; }
.ide-term .tl-user { color: #1e2833; font-weight: 700; }
.ide-term .tl-user::before { content: '$ '; color: #c92a2a; font-weight: 800; }
.ide-term .tl-ok { color: #2b8a3e; font-weight: 700; }
.ide-term .tl-ok::before { content: '> '; }
.ide-term .tl-warn { color: #c92a2a; font-weight: 700; }
.ide-term .tl-warn::before { content: '> '; }
.ide-term .tl-rec { color: #b7791f; }
.ide-term .tl-rec::before { content: '> '; }
.ide-term .ide-work { border: 1px solid #dfe9f5; border-radius: 6px; margin: 4px 0; }
.ide-term .ide-work summary { font-size: 11px; color: #54606c; padding: 3px 8px; }
.ide-term .ide-work-body { padding: 2px 8px; }
#ide-screen .ide-chat-input-wrap { position: relative; display: flex; align-items: flex-end; border-top: 2px solid #28343e; background: #dfe9f5; padding: 8px; }
#ide-screen .ide-chat-input { border: 2px solid #28343e; border-radius: 10px; padding-right: 44px; }
.ide-send-btn {
  position: absolute; right: 16px; bottom: 16px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #28343e; border-radius: 50%; background: #28343e; color: #e6eff9; cursor: pointer;
}
.ide-send-btn:hover:not(:disabled) { background: #3a4a58; }
.ide-send-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* 편집기 래퍼 */
.ide-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ide-home-row .hr-badge.st-draft-b { color: #54606c; border-color: #8ea0b5; background: #f2f7fd; }
.ide-home-row .hr-open {
  flex: none; display: none; font-family: inherit; font-weight: 800; font-size: 12px;
  border: 2px solid #28343e; border-radius: 8px; background: #28343e; color: #e6eff9;
  padding: 4px 12px; cursor: pointer; box-shadow: 2px 2px 0 #28343e;
}
.ide-home-row:hover .hr-open { display: inline-flex; }
/* 알람: 체크박스·헤더 버튼들 */
.ide-bell-head-btns { display: inline-flex; gap: 6px; }
.ide-mini-danger { color: #c92a2a; border-color: #f1aeb5; }
.ide-mini-danger:hover:not(:disabled) { background: #ffe3e3; }
.ide-bell-item { display: flex; align-items: flex-start; gap: 8px; }
.ide-bell-item .bi-check { margin-top: 3px; accent-color: #28343e; }
.ide-bell-item .bi-main { flex: 1; min-width: 0; }

/* ── v2.1 다듬기(2026-07-04): 글씨 확대·컨트롤 크기 통일·커스텀 시각·로딩 오버레이 ── */
.ide-home-panel-head { font-size: 15px; }
.ide-form-label { font-size: 14px; }
.ide-form-hint { font-size: 12px; }
.ide-home-row .hr-date { font-size: 13px; width: 96px; }
.ide-home-row .hr-title { font-size: 15px; }
.ide-home-row .hr-voice, .ide-home-row .hr-len { font-size: 13px; }
.ide-home-row .hr-badge { font-size: 12px; padding: 3px 10px; }
/* 폼 컨트롤 높이·글씨를 프리셋 칩과 통일(40px 라인) */
.ide-chip { font-size: 15px; padding: 9px 18px; }
.ide-home-form .ide-select, .ide-home-form .ide-num {
  font-size: 15px; padding: 8px 12px; border-radius: 8px;
  box-shadow: 2px 2px 0 #28343e;
}
.ide-home-form .ide-num { width: 64px; text-align: center; }
.ide-assign-wrap { font-size: 14px; }
.ide-usage { font-size: 13px; }
.ide-custom-time { font-family: ui-monospace, monospace; font-weight: 700; }
/* 로딩 오버레이 — 인계 열기 등 화면 전체 비활성 */
.ide-loading {
  position: fixed; inset: 0; z-index: 10050; background: rgba(230,239,249,0.72);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.ide-loading-box {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 2px solid #28343e; border-radius: 10px; box-shadow: 4px 4px 0 #28343e;
  padding: 18px 26px; font-weight: 800; font-size: 15px; color: #1e2833;
}
.ide-loading-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid #dfe9f5; border-top-color: #28343e;
  animation: ide-spin 0.8s linear infinite;
}
@keyframes ide-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   v3 "카툰 스페이스" 스킨 (2026-07-04 사용자 확정 — 이미지 55~58 레퍼런스)
   창=카툰 OS 윈도우(굵은 잉크 외곽선+신호등), 배경=우주(다크)/그리드(라이트)
═══════════════════════════════════════════════════════════════ */
:root {
  --cw-ink: #22252e; --cw-bar: #dfe3ee; --cw-body: #f4f6fb; --cw-white: #ffffff;
  --cw-blue: #57a8ff; --cw-blue-d: #2f7fe0;
  --sp-dark: #24272f; --sp-light: #a9c4f0;
}
/* 배경 장식(도형+별) — 공용 데이터 URI */
.ide-stage, .ide-editor, #screen-login {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cg fill='none' stroke-linejoin='round' opacity='0.55'%3E%3Cpath d='M210 120 L300 250 L120 250 Z' stroke='%237ef0c0' stroke-width='16'/%3E%3Ccircle cx='700' cy='170' r='75' stroke='%23ff6b5e' stroke-width='18'/%3E%3Crect x='120' y='430' width='150' height='150' rx='10' stroke='%23ff8de8' stroke-width='16'/%3E%3Cpath d='M660 450 l90 90 M750 450 l-90 90' stroke='%238b9df8' stroke-width='20' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.8'%3E%3Ccircle cx='80' cy='80' r='2'/%3E%3Ccircle cx='420' cy='60' r='1.6'/%3E%3Ccircle cx='560' cy='330' r='2'/%3E%3Ccircle cx='250' cy='350' r='1.4'/%3E%3Ccircle cx='830' cy='90' r='1.7'/%3E%3Ccircle cx='860' cy='600' r='2'/%3E%3Ccircle cx='380' cy='620' r='1.5'/%3E%3Ccircle cx='60' cy='640' r='1.6'/%3E%3Ccircle cx='520' cy='520' r='1.3'/%3E%3Ccircle cx='300' cy='560' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 900px 700px; background-position: center;
}
.ide-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ide-stage-dark { background-color: var(--sp-dark); }
.ide-stage-light, .ide-editor {
  background-color: var(--sp-light);
  background-image:
    linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cg fill='none' stroke-linejoin='round' opacity='0.4'%3E%3Cpath d='M210 120 L300 250 L120 250 Z' stroke='%2334d39b' stroke-width='16'/%3E%3Ccircle cx='700' cy='170' r='75' stroke='%23f05548' stroke-width='18'/%3E%3Crect x='120' y='430' width='150' height='150' rx='10' stroke='%23f070d8' stroke-width='16'/%3E%3Cpath d='M660 450 l90 90 M750 450 l-90 90' stroke='%236c82f0' stroke-width='20' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 46px 46px, 46px 46px, 900px 700px;
}
#ide-screen { background: var(--sp-dark); }
.ide-home { position: relative; }
/* 우상단 고정 위젯 */
.ide-corner { position: absolute; top: 14px; right: 16px; z-index: 50; display: flex; align-items: center; gap: 8px; }

/* ── 카툰 윈도우(cw) — 이미지58 언어 ── */
.cw {
  background: var(--cw-body); border: 3px solid var(--cw-ink); border-radius: 16px;
  box-shadow: 0 8px 0 rgba(20, 23, 32, 0.35);
  display: flex; flex-direction: column; overflow: hidden;
}
.cw-square { width: min(76vh, 660px, 92vw); aspect-ratio: 1 / 1; }
.cw-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--cw-bar); border-bottom: 3px solid var(--cw-ink);
  font-weight: 800; color: var(--cw-ink); flex-shrink: 0;
}
.cw-dots { display: inline-flex; gap: 6px; }
.cw-dots i { width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--cw-ink); background: #ff5f57; }
.cw-dots i:nth-child(2) { background: #e7e9ee; }
.cw-dots i:nth-child(3) { background: #37c837; }
.cw-title { flex: 1; text-align: center; font-size: 15px; letter-spacing: 0.02em; }
.cw-bar-r { width: 56px; }
.cw-back {
  font-family: inherit; font-weight: 800; font-size: 12px; color: var(--cw-ink);
  border: 2.5px solid var(--cw-ink); border-radius: 9px; background: var(--cw-white);
  padding: 4px 10px; cursor: pointer; box-shadow: 0 2.5px 0 var(--cw-ink);
}
.cw-back:active { transform: translateY(2px); box-shadow: 0 0.5px 0 var(--cw-ink); }
.cw-body { flex: 1; min-height: 0; padding: 22px; display: flex; flex-direction: column; }
.cw-body-scroll { overflow-y: auto; padding: 10px; }
.cw-btn {
  font-family: inherit; font-weight: 800; font-size: 15px; color: var(--cw-ink);
  border: 3px solid var(--cw-ink); border-radius: 12px; background: var(--cw-white);
  padding: 10px 22px; cursor: pointer; box-shadow: 0 4px 0 var(--cw-ink);
}
.cw-btn:hover:not(:disabled) { background: #eef2fa; }
.cw-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--cw-ink); }
.cw-btn-blue { background: var(--cw-blue); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.cw-btn-blue:hover:not(:disabled) { background: #6ab4ff; }
/* 대시보드 큰 버튼 2개 */
.ide-dash-body { justify-content: center; align-items: center; gap: 26px; }
.cw-bigbtn {
  width: 72%; padding: 26px 0; display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: inherit; font-weight: 900; font-size: 24px; color: var(--cw-ink);
  border: 3px solid var(--cw-ink); border-radius: 16px; background: var(--cw-white);
  box-shadow: 0 6px 0 var(--cw-ink); cursor: pointer;
}
.cw-bigbtn:hover { background: #eef2fa; }
.cw-bigbtn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--cw-ink); }
.cw-bigbtn-blue { background: var(--cw-blue); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.cw-bigbtn-blue:hover { background: #6ab4ff; }
/* 위저드 */
.ide-wiz-body { position: relative; }
.wiz-step { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.wiz-step[hidden] { display: none; }
.wiz-q { font-size: 21px; font-weight: 900; color: var(--cw-ink); }
.wiz-hint { font-size: 12px; color: #6b7686; }
.wiz-presets { justify-content: center; }
.wiz-custom-row { display: flex; align-items: center; gap: 10px; }
.wiz-center { display: flex; align-items: center; gap: 10px; }
.wiz-num { width: 84px !important; font-size: 24px !important; text-align: center; padding: 10px !important; }
.wiz-colon { font-size: 24px; font-weight: 900; color: var(--cw-ink); }
.wiz-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; flex-shrink: 0; }
.wiz-ind { font-family: ui-monospace, monospace; font-weight: 700; color: #6b7686; }
.ide-home-start { margin-top: 8px; font-size: 17px; padding: 12px 40px; }

/* ── 컨트롤 카툰화(칩·셀렉트·넘버·배지·벨·칩) ── */
.ide-chip, #ide-screen .ide-select, #ide-screen .ide-num {
  border: 3px solid var(--cw-ink); border-radius: 12px; background: var(--cw-white); color: var(--cw-ink);
  box-shadow: 0 3px 0 var(--cw-ink);
}
.ide-chip:hover { background: #eef2fa; }
.ide-chip.active { background: var(--cw-blue); color: #fff; }
.ide-user-chip { border: 3px solid var(--cw-ink); border-radius: 12px; background: var(--cw-white); color: var(--cw-ink); box-shadow: 0 3px 0 var(--cw-ink); font-size: 13px; }
.ide-bell { border: 3px solid var(--cw-ink); border-radius: 12px; background: var(--cw-white); color: var(--cw-ink); box-shadow: 0 3px 0 var(--cw-ink); width: 36px; height: 34px; }
.ide-bell:hover { background: #eef2fa; }
.ide-bell-panel { border: 3px solid var(--cw-ink); border-radius: 16px; box-shadow: 0 8px 0 rgba(20,23,32,0.35); }
.ide-bell-head { background: var(--cw-bar); border-bottom: 3px solid var(--cw-ink); }
.ide-loading-box { border: 3px solid var(--cw-ink); border-radius: 16px; box-shadow: 0 6px 0 rgba(20,23,32,0.35); }
.ide-home-row { border-bottom: 2px solid #e3e8f2; }
.ide-home-row:hover { background: #eef3fc; }
.ide-home-row .hr-open { border: 2.5px solid var(--cw-ink); background: var(--cw-blue); box-shadow: 0 3px 0 var(--cw-ink); border-radius: 10px; }
.ide-home-row .hr-badge { border-width: 2.5px; border-radius: 9px; box-shadow: none; }

/* ── 편집기(IDE 3패널) 카툰화 ── */
#ide-screen .ide-topbar {
  background: var(--cw-bar); border-bottom: 3px solid var(--cw-ink); padding: 10px 14px;
}
#ide-screen .ide-pane {
  border: 3px solid var(--cw-ink); border-radius: 14px; background: var(--cw-white);
  box-shadow: 0 6px 0 rgba(20, 23, 32, 0.3);
}
#ide-screen .ide-pane-head {
  background: var(--cw-bar); border-bottom: 3px solid var(--cw-ink); color: var(--cw-ink);
  font-weight: 800; padding: 9px 12px;
}
/* 패널 닫기 버튼 — 신호등 3개 대신 빨간 버튼 1개(누르면 그 창이 꺼짐, 2026-07-05 사용자 요청) */
.ide-pane-x {
  width: 15px; height: 15px; border-radius: 50%; flex: none; padding: 0;
  background: #ff5f57; border: 2px solid var(--cw-ink);
  margin-right: 12px; cursor: pointer; position: relative;
}
.ide-pane-x::after {
  content: '×'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; line-height: 1; color: rgba(0, 0, 0, 0);
}
.ide-pane-x:hover::after { color: #5c0f0b; }
.ide-pane-x:active { transform: translateY(1px); }
#ide-screen .ide-btn {
  border: 3px solid var(--cw-ink); border-radius: 12px; background: var(--cw-blue); color: #fff;
  box-shadow: 0 3px 0 var(--cw-ink); text-shadow: 0 1px 0 rgba(0,0,0,0.2); font-weight: 800;
}
#ide-screen .ide-btn:hover:not(:disabled) { background: #6ab4ff; }
#ide-screen .ide-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--cw-ink); }
#ide-screen .ide-btn-ghost { background: var(--cw-white); color: var(--cw-ink); text-shadow: none; }
#ide-screen .ide-btn-ghost:hover:not(:disabled) { background: #eef2fa; }
.ide-status-badge { border-width: 3px; border-radius: 12px; box-shadow: 0 3px 0 var(--cw-ink); }
.ide-title-chip { border: 3px solid var(--cw-ink); border-radius: 10px; box-shadow: 0 3px 0 var(--cw-ink); }
#ide-screen .ide-doc-foot { background: var(--cw-bar); border-top: 3px solid var(--cw-ink); }
#ide-screen .ide-play-btn { border: 3px solid var(--cw-ink); border-radius: 10px; background: var(--cw-blue); color: #fff; box-shadow: 0 3px 0 var(--cw-ink); }
#ide-screen .ide-seek-fill { background: var(--cw-blue-d); }
#ide-screen .ide-chat-input-wrap { background: var(--cw-bar); border-top: 3px solid var(--cw-ink); }
#ide-screen .ide-chat-input { border: 3px solid var(--cw-ink); border-radius: 12px; }
.ide-send-btn { border: 3px solid var(--cw-ink); background: var(--cw-blue); }
.ide-send-btn:hover:not(:disabled) { background: #6ab4ff; }
#ide-screen .ide-splitter::after { background: rgba(34,37,46,0.35); }
#ide-screen .ide-splitter:hover::after, #ide-screen .ide-splitter.dragging::after { background: var(--cw-ink); }

/* ── 로그인 = 우주 + 우주선 ── */
#screen-login { background-color: var(--sp-dark) !important; }
#screen-login .login-main { background: transparent !important; }
#screen-login .login-window {
  position: relative;
  border: 4px solid #12151c !important; border-radius: 34px 34px 22px 22px !important;
  background: #eef1f7 !important;
  box-shadow: 0 10px 0 rgba(10, 12, 18, 0.5) !important;
}
/* 우주선 안테나 + 좌우 날개(fins) */
#screen-login .login-window::before {
  content: ''; position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 30px; background: #12151c; border-radius: 4px;
  box-shadow: -4px -8px 0 2px #ff5f57;
}
#screen-login .login-window::after {
  content: ''; position: absolute; bottom: 24px; left: -26px;
  border-top: 34px solid transparent; border-bottom: 6px solid transparent;
  border-right: 24px solid #12151c;
}
#screen-login .login-win-bar { background: #dfe3ee !important; border-bottom: 3px solid #12151c !important; }
#screen-login .login-win-label::after { content: ' · NEWSMAKER SHUTTLE'; color: #6b7686; font-weight: 800; font-size: 10px; }
#ide-screen .ide-main { background: transparent; padding: 12px; }
.ide-editor { min-height: 0; }

/* ── v3.1 다듬기(2026-07-04): 알람창 카툰 통일 · 작성중 배지 일관성 · 전환 인터랙션 ── */
/* 알람 패널 내부 버튼·항목도 카툰 언어로 */
.ide-bell-head { font-weight: 900; }
.ide-bell-head .ide-mini-btn {
  font-family: inherit; font-weight: 800; font-size: 12px; color: var(--cw-ink);
  border: 2.5px solid var(--cw-ink); border-radius: 9px; background: var(--cw-white);
  padding: 4px 10px; box-shadow: 0 2.5px 0 var(--cw-ink); cursor: pointer;
}
.ide-bell-head .ide-mini-btn:hover:not(:disabled) { background: #eef2fa; }
.ide-bell-head .ide-mini-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0.5px 0 var(--cw-ink); }
.ide-bell-head .ide-mini-danger { color: #c92a2a; border-color: var(--cw-ink); background: #ffe3e3; }
.ide-bell-item { border-bottom: 2px solid #e8ecf5; }
.ide-bell-item.unread { border-left: 4px solid var(--cw-blue); }
.ide-bell-item .bi-check { width: 15px; height: 15px; accent-color: var(--cw-blue); }
/* 작성중 배지 — 다른 배지·버튼과 동일한 잉크 보더/섀도 */
.ide-status-badge.st-draft { color: var(--cw-ink); border-color: var(--cw-ink); background: var(--cw-white); }
.ide-home-row .hr-badge.st-draft-b { color: var(--cw-ink); border-color: var(--cw-ink); background: var(--cw-white); }
/* 사용자 칩 클릭(disconnect) 힌트 */
.ide-user-chip:hover { background: #ffe3e3; }
.ide-user-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cw-ink); }

/* ── 전환 인터랙션 ── */
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cw-pop {
  0% { opacity: 0; transform: translateY(26px) scale(0.94); }
  70% { opacity: 1; transform: translateY(-4px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes wiz-slide {
  from { opacity: 0; transform: translateX(36px); }
  to { opacity: 1; transform: translateX(0); }
}
.ide-stage { animation: stage-in 0.3s ease both; }
.ide-stage .cw { animation: cw-pop 0.42s cubic-bezier(0.34, 1.55, 0.64, 1) both; }
.wiz-step:not([hidden]) { animation: wiz-slide 0.3s ease both; }
.ide-editor .ide-pane { animation: cw-pop 0.42s cubic-bezier(0.34, 1.55, 0.64, 1) both; }
.ide-editor .ide-pane-diff { animation-delay: 0.07s; }
.ide-editor .ide-pane-chat { animation-delay: 0.14s; }
.ide-bell-panel { animation: cw-pop 0.3s cubic-bezier(0.34, 1.55, 0.64, 1) both; }
.ide-loading-box { animation: cw-pop 0.3s cubic-bezier(0.34, 1.55, 0.64, 1) both; }
.cw-bigbtn, .cw-btn, .ide-chip { transition: background 0.12s; }

/* ── v3.2(2026-07-04): 제목 라벨·셀렉트 통일·목소리 카드·카툰 모달·시작 버튼 ── */
/* 7) 현재 뉴스 표시 = 버튼 아님(밑줄 라벨) */
.ide-title-chip {
  border: none !important; background: transparent !important; box-shadow: none !important;
  font-family: inherit !important; font-weight: 900; font-size: 15px; color: var(--cw-ink);
  padding: 2px 2px 4px; border-bottom: 3px solid var(--cw-blue) !important; border-radius: 0 !important;
}
/* 6) 시작 버튼 = 다음 버튼과 동일 크기 */
.ide-home-start { margin-top: 18px; font-size: 15px; padding: 10px 34px; width: auto; }
/* 6) 셀렉트 통일(커스텀 화살표 + 산세리프 굵게) */
#ide-screen .ide-select {
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-weight: 800; font-size: 15px;
  padding: 9px 38px 9px 14px; border-radius: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2322252e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* 5) 목소리 카드 */
.wiz-voices { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.voice-card {
  width: 190px; padding: 18px 14px 14px; text-align: center; cursor: pointer;
  background: var(--cw-white); border: 3px solid var(--cw-ink); border-radius: 16px;
  box-shadow: 0 5px 0 var(--cw-ink); display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform 0.12s, background 0.12s;
}
.voice-card:hover { transform: translateY(-3px); }
/* 선택 표시 = 파란 보더 + 체크 배지 (파란 채움+흰 글자는 이름이 안 보였음 — 2026-07-05 수정) */
.voice-card { position: relative; }
.voice-card.active { border-color: var(--cw-blue); box-shadow: 0 5px 0 var(--cw-blue); }
.voice-card.active::after {
  content: ''; position: absolute; top: -11px; right: -11px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--cw-blue); border: 3px solid var(--cw-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='11' viewBox='0 0 13 11'%3E%3Cpath d='M1.5 5.5l3.5 3.5L11.5 1.5' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.voice-card.active .vc-name { color: var(--cw-ink); }
.voice-card .vc-avatar {
  width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--cw-ink);
  background: var(--cw-bar); color: var(--cw-ink); display: flex; align-items: center; justify-content: center;
}
.voice-card.active .vc-avatar { background: #e3efff; border-color: var(--cw-blue); }
.voice-card .vc-name { font-weight: 900; font-size: 18px; }
.voice-card .vc-rem { font-family: ui-monospace, monospace; font-size: 12px; color: #6b7686; font-variant-numeric: tabular-nums; }
.voice-card .vc-play {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-weight: 800; font-size: 12px; color: var(--cw-ink);
  border: 2.5px solid var(--cw-ink); border-radius: 9px; background: var(--cw-white);
  padding: 5px 12px; cursor: pointer; box-shadow: 0 2.5px 0 var(--cw-ink);
}
.voice-card .vc-play:hover { background: #eef2fa; }
.voice-card .vc-play.loading { opacity: 0.5; pointer-events: none; }
/* 8) 카툰 모달 */
.cw-modal-overlay {
  position: fixed; inset: 0; z-index: 10060; background: rgba(20, 23, 32, 0.45);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
.cw-modal { width: min(400px, 92vw); animation: cw-pop 0.32s cubic-bezier(0.34, 1.55, 0.64, 1) both; }
.cw-modal-body { gap: 14px; padding: 20px; }
.cw-modal-msg { font-weight: 700; font-size: 15px; color: var(--cw-ink); line-height: 1.55; white-space: pre-wrap; text-align: center; padding: 6px 0; }
.cw-modal-row { display: flex; align-items: center; gap: 12px; justify-content: center; }
.cw-modal-label { font-weight: 800; font-size: 14px; color: var(--cw-ink); width: 70px; text-align: right; }
.cw-modal-row .ide-num { width: auto; font-size: 15px; padding: 8px 12px; }
.cw-modal-btns { display: flex; justify-content: center; gap: 12px; padding-top: 4px; }

/* ── v3.3(2026-07-04): 로그인 = 우주 모빌 배경 + 라디오 기계 ── */
/* position은 .screen의 fixed; inset:0 유지(화면 꽉 채움) — fixed도 absolute 자식(.login-space)의 기준이 된다 */
#screen-login { overflow: hidden; background-image: none !important; }
/* 별만 은은하게(도형은 모빌 엘리먼트로) */
#screen-login::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(#ffffff 1.2px, transparent 1.3px), radial-gradient(#ffffffaa 1px, transparent 1.1px);
  background-size: 260px 220px, 170px 150px; background-position: 30px 40px, 90px 110px;
  opacity: 0.5;
}
/* 모빌 도형 — 각자 축 회전 + 궤도 부유 */
.login-space { position: absolute; inset: 0; pointer-events: none; }
.login-space .ls { position: absolute; display: block; }   /* 섬광(후광) 제거 — 2026-07-06 사용자 요청 */
.login-space .ls svg { width: 100%; height: 100%; display: block; }
@keyframes ls-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ls-spin-r { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes ls-orbit {
  0% { translate: 0 0; } 25% { translate: 14px -18px; } 50% { translate: -8px -30px; }
  75% { translate: -16px -10px; } 100% { translate: 0 0; }
}
.login-space .ls { animation: ls-orbit 14s ease-in-out infinite; }
.login-space .ls svg { animation: ls-spin 26s linear infinite; }
.ls-tri  { width: 150px; top: 12%; left: 12%; }
.ls-ring { width: 160px; top: 14%; right: 12%; animation-duration: 17s; }
.ls-ring svg { animation-name: ls-spin-r; animation-duration: 30s; }
.ls-sq   { width: 130px; bottom: 16%; left: 14%; animation-duration: 19s; }
.ls-sq svg { animation-duration: 34s; }
.ls-x    { width: 130px; bottom: 14%; right: 14%; animation-duration: 15s; }
.ls-x svg { animation-name: ls-spin-r; animation-duration: 22s; }
.ls-cube1 { width: 34px; top: 8%; left: 52%; animation-duration: 11s; }
.ls-cube2 { width: 28px; top: 55%; left: 6%; animation-duration: 13s; }
.ls-cube3 { width: 26px; top: 62%; right: 7%; animation-duration: 12s; }
.ls-cube1 svg, .ls-cube2 svg, .ls-cube3 svg { animation-duration: 9s; }

/* 라디오 기계(우주선 스킨 대체) */
#screen-login .login-window {
  border-radius: 26px !important;
  background: linear-gradient(#f2f4f9, #e7eaf2) !important;
}
#screen-login .login-window::before { content: none; }   /* 안테나 제거(2026-07-05 사용자 요청 — 창 위 검은 잔여물) */
#screen-login .login-window::after { content: none; }   /* 우주선 날개 제거 */
#screen-login .login-win-bar { border-radius: 20px 20px 0 0; }
#screen-login .login-win-label { font-weight: 900; letter-spacing: 0.12em; color: #c92a2a; }
#screen-login .login-win-label::after { content: ' ●'; color: #ff5f57; animation: onair 1.6s ease-in-out infinite; }
@keyframes onair { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* 라디오 페이스: 스피커 그릴 + 타이틀 + 노브 */
.radio-face { display: flex; align-items: center; justify-content: center; gap: 18px; }
.radio-speaker {
  width: 74px; height: 74px; border-radius: 50%; border: 3.5px solid #12151c; background: #dfe3ee;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none;
}
.radio-speaker i { display: block; height: 3.5px; border-radius: 2px; background: #12151c; }
.radio-speaker i:nth-child(1) { width: 26px; } .radio-speaker i:nth-child(2) { width: 42px; }
.radio-speaker i:nth-child(3) { width: 50px; } .radio-speaker i:nth-child(4) { width: 42px; }
.radio-speaker i:nth-child(5) { width: 26px; }
#screen-login .login-title { font-weight: 900 !important; color: #12151c !important; line-height: 1.15; text-align: center; }
.radio-sub { font-size: 12px; letter-spacing: 0.28em; color: #6b7686; font-weight: 800; }
.radio-knobs { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; }
.radio-knob {
  width: 34px; height: 34px; border-radius: 50%; border: 3.5px solid #12151c; background: #fff;
  position: relative; box-shadow: 0 3px 0 #12151c;
}
.radio-knob::after { content: ''; position: absolute; top: 3px; left: 50%; width: 3.5px; height: 11px; background: #12151c; border-radius: 2px; transform: translateX(-50%); }
.radio-knob-sm { width: 24px; height: 24px; }
.radio-knob-sm::after { height: 8px; }

/* ── v3.4(2026-07-04): 로그인 라디오 카툰 강화 — HLAI 로고 + 튜닝 다이얼, 자동로그인·모드 선택 제거 ── */
#screen-login .login-window { max-width: 380px; }
#screen-login .login-win-body { padding: 26px 28px 32px; gap: 20px; }
/* HLAI 로고 — 배경 도형과 같은 크레용 그림체라 라디오 브랜드에 그대로 섞음 */
.radio-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.radio-logo {
  width: 62px; height: 62px; object-fit: cover; border-radius: 14px;
  border: 3px solid #12151c; background: #fff; transform: rotate(-4deg);
  box-shadow: 0 3px 0 #12151c;
}
#screen-login .login-title { font-size: 22px !important; }
/* 튜닝 다이얼 — 눈금판 + 천천히 움직이는 빨간 바늘 */
.radio-dial {
  position: relative; width: 100%; height: 26px; flex: none;
  border: 3px solid #12151c; border-radius: 10px; background: #fff; overflow: hidden;
}
.radio-dial::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 11px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(90deg, #a7b0c2 0 2.5px, transparent 2.5px 13px);
}
.radio-needle {
  position: absolute; top: 2px; bottom: 2px; left: 34%; width: 6px; border-radius: 3px;
  background: #ff5f57; box-shadow: 0 0 0 1.5px #12151c;
  animation: dial-tune 8s ease-in-out infinite;
}
@keyframes dial-tune { 0%, 100% { left: 32%; } 40% { left: 60%; } 70% { left: 45%; } }
/* 인풋·버튼 = 카툰 잉크 보더 + 하드 섀도 */
#screen-login .login-card { gap: 16px; }
#screen-login .login-input {
  border: 3px solid #12151c; border-radius: 12px; height: 50px;
  box-shadow: 0 3px 0 #12151c; font-weight: 800;
}
#screen-login .login-input:focus { box-shadow: 0 3px 0 #12151c, 0 0 0 3px rgba(87, 168, 255, 0.4); }
#screen-login .login-btn-primary {
  height: 52px; background: var(--cw-blue); border: 3px solid #12151c; border-radius: 14px;
  box-shadow: 0 5px 0 #12151c;
}
#screen-login .login-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #12151c; background: #6ab4ff; }
#screen-login .login-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #12151c; }

/* ── v3.6(2026-07-05): 패널(원고/수정/프롬프트) 켜기·끄기 버튼 ── */
.ide-pv-group { display: inline-flex; gap: 6px; margin-right: 10px; }
.ide-pv {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-weight: 800; font-size: 11.5px; color: var(--cw-ink);
  border: 2.5px solid var(--cw-ink); border-radius: 9px; background: var(--cw-white);
  padding: 4px 10px; cursor: pointer; box-shadow: 0 2.5px 0 var(--cw-ink);
}
.ide-pv:hover { background: #eef2fa; }
.ide-pv:active { transform: translateY(2px); box-shadow: 0 0.5px 0 var(--cw-ink); }
.ide-pv.pv-off { opacity: 0.4; background: var(--cw-bar); box-shadow: none; transform: translateY(2px); }

/* ── v3.5(2026-07-04): 로그인 단순화 — 스피커·노브·RADIO 91.7·ON AIR 제거, 로고+타이틀만 ── */
#screen-login .login-title { font-size: 26px !important; }
.radio-brand { gap: 12px; }
.radio-logo { width: 72px; height: 72px; }