.admin-page.svelte-up4a5i {
    display: grid;
    gap: 1rem;
  }
  .hero.svelte-up4a5i,
  .panel.svelte-up4a5i {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .center.svelte-up4a5i {
    text-align: center;
    padding: 3rem;
  }
  .eyebrow.svelte-up4a5i {
    margin: 0 0 0.4rem;
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  h2.svelte-up4a5i {
    margin: 0;
  }
  .hero.svelte-up4a5i p:where(.svelte-up4a5i):last-child,
  .hint.svelte-up4a5i {
    margin: 0.75rem 0 0;
    color: var(--text-soft);
    line-height: 1.7;
  }
  .alert.svelte-up4a5i {
    margin: 0;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--danger-soft-border);
    border-radius: 14px;
    background: var(--danger-soft-bg);
    color: var(--danger);
  }
  .tab-bar.svelte-up4a5i {
    display: flex;
    gap: 0.5rem;
  }
  .tab-bar.svelte-up4a5i button:where(.svelte-up4a5i) {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.88rem;
    transition:
      background 140ms,
      color 140ms,
      border-color 140ms;
  }
  .tab-bar.svelte-up4a5i button.active:where(.svelte-up4a5i) {
    color: var(--primary);
    background: var(--primary-soft-bg);
    border-color: var(--primary-soft-border);
  }
  .table-wrap.svelte-up4a5i {
    overflow-x: auto;
  }
  table.svelte-up4a5i {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
  }
  th.svelte-up4a5i,
  td.svelte-up4a5i {
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  th.svelte-up4a5i {
    color: var(--text-faint);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  tr.inactive.svelte-up4a5i td:where(.svelte-up4a5i) {
    opacity: 0.5;
  }
  code.svelte-up4a5i {
    font-size: 0.82em;
    background: var(--surface-muted);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
  }
  select.svelte-up4a5i {
    min-height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--input-bg);
    font-size: 0.84rem;
  }
  .badge.svelte-up4a5i {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    background: var(--surface-muted);
    color: var(--text-faint);
  }
  .badge.on.svelte-up4a5i {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
  }
  .badge.used.svelte-up4a5i {
    background: var(--primary-soft-bg);
    color: var(--primary);
  }
  .badge.expired.svelte-up4a5i {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
  }
  .sm-btn.svelte-up4a5i {
    min-height: 1.8rem;
    padding: 0 0.6rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--primary-soft-bg);
    color: var(--primary);
    transition: background 140ms;
  }
  .sm-btn.svelte-up4a5i:hover {
    background: var(--button-secondary-hover);
  }
  .sm-btn.danger.svelte-up4a5i {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
  }
  .sm-btn.danger.svelte-up4a5i:hover {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
  }
  .you.svelte-up4a5i {
    font-size: 0.78rem;
    color: var(--text-faint);
    font-style: italic;
  }
  .invite-form.svelte-up4a5i {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .invite-form.svelte-up4a5i label:where(.svelte-up4a5i) {
    display: grid;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-soft);
  }
  .invite-form.svelte-up4a5i input:where(.svelte-up4a5i) {
    min-height: 2.5rem;
    width: 100px;
    padding: 0 0.7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--input-bg);
  }
  .btn.svelte-up4a5i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #e5e7eb, #a3a8b2);
    color: #0a0d12;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition:
      transform 140ms,
      box-shadow 140ms;
  }
  .btn.svelte-up4a5i:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  }
  .new-token.svelte-up4a5i {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--success-soft-border);
    border-radius: 14px;
    background: var(--success-soft-bg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .new-token.svelte-up4a5i code:where(.svelte-up4a5i) {
    font-size: 0.88em;
    word-break: break-all;
    white-space: normal;
  }

  /* =====================================================================
   * 일반모드(light) — Dashboard / Assistant / Settings 카드 톤과 통일
   * ===================================================================== */
  html[data-theme="light"] .hero.svelte-up4a5i,
  html[data-theme="light"] .panel.svelte-up4a5i {
    padding: 1rem 1.05rem;
    border-radius: var(--radius-md);
    box-shadow: none;
  }
  html[data-theme="light"] .eyebrow.svelte-up4a5i {
    margin: 0 0 0.25rem;
    color: var(--text-faint);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.06em;
  }
  html[data-theme="light"] .hero.svelte-up4a5i h2:where(.svelte-up4a5i) {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  html[data-theme="light"] .hero.svelte-up4a5i p:where(.svelte-up4a5i):last-child,
  html[data-theme="light"] .hint.svelte-up4a5i {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-soft);
  }
  /* 탭 바: 라운드 알약 → 사각형 라인 톤 (Settings 와 동일) */
  html[data-theme="light"] .tab-bar.svelte-up4a5i button:where(.svelte-up4a5i) {
    min-height: 2.1rem;
    padding: 0 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-soft);
  }
  html[data-theme="light"] .tab-bar.svelte-up4a5i button.active:where(.svelte-up4a5i) {
    background: var(--text);
    border-color: var(--text);
    color: #ffffff;
  }
  /* 표 톤: 옅은 라인 + 작은 폰트 */
  html[data-theme="light"] table.svelte-up4a5i {
    font-size: 0.82rem;
  }
  html[data-theme="light"] th.svelte-up4a5i {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-faint);
    letter-spacing: 0;
  }
  html[data-theme="light"] th.svelte-up4a5i,
  html[data-theme="light"] td.svelte-up4a5i {
    padding: 0.55rem 0.7rem;
  }
  /* 알림/초대 박스 라운드/패딩 정리 */
  html[data-theme="light"] .alert.svelte-up4a5i,
  html[data-theme="light"] .new-token.svelte-up4a5i {
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
  }
  /* 작은 액션 버튼 — flat */
  html[data-theme="light"] .sm-btn.svelte-up4a5i {
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    font-weight: 400;
    font-size: 0.78rem;
  }
  html[data-theme="light"] .sm-btn.svelte-up4a5i:hover {
    background: rgba(0, 0, 0, 0.035);
  }
  html[data-theme="light"] .sm-btn.danger.svelte-up4a5i {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
    color: var(--danger);
    background: transparent;
  }
  html[data-theme="light"] .sm-btn.danger.svelte-up4a5i:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
  }
  /* 메인 액션 (.btn): 차콜 솔리드 */
  html[data-theme="light"] .btn.svelte-up4a5i {
    background: var(--text);
    color: #ffffff;
    border: 1px solid var(--text);
    border-radius: var(--radius-sm);
    font-weight: 400;
    font-size: 0.82rem;
    min-height: 2.1rem;
    box-shadow: none;
  }
  html[data-theme="light"] .btn.svelte-up4a5i:hover {
    transform: none;
    box-shadow: none;
    background: #000000;
  }
  /* 초대 폼 입력칸 톤 */
  html[data-theme="light"] .invite-form.svelte-up4a5i label:where(.svelte-up4a5i) {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-soft);
  }
  html[data-theme="light"] .invite-form.svelte-up4a5i input:where(.svelte-up4a5i) {
    min-height: 2.1rem;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
  }

  .cal-chat-panel.svelte-18l50zi {
    position: fixed;
    width: 380px;
    max-width: calc(100vw - 16px);
    height: 540px;
    max-height: calc(100vh - 16px);
    background: var(--surface, #1f2433);
    color: var(--text, #e6e9f2);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1200;
  }
  .ccp-head.svelte-18l50zi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--surface-card, #262b3b);
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    cursor: grab;
    user-select: none;
  }
  .ccp-head.svelte-18l50zi:active { cursor: grabbing; }
  .ccp-title.svelte-18l50zi { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
  .ccp-dot.svelte-18l50zi {
    width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #a855f7);
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.8);
  }
  .ccp-ctx.svelte-18l50zi { color: var(--text-faint, #9aa3bb); font-weight: 400; }
  .ccp-close.svelte-18l50zi {
    background: transparent; color: var(--text-soft, #b8bdcc); border: 0;
    font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  }
  .ccp-close.svelte-18l50zi:hover { background: rgba(255, 255, 255, 0.08); }

  .ccp-quick.svelte-18l50zi {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    display: flex; flex-direction: column; gap: 6px;
    background: rgba(255, 255, 255, 0.02);
  }
  .ccp-quick-row.svelte-18l50zi { display: flex; align-items: center; gap: 6px; }
  .ccp-input.svelte-18l50zi {
    flex: 1 1 auto; min-width: 0;
    background: var(--surface-card, #262b3b);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    color: var(--text, #e6e9f2);
    padding: 6px 8px; border-radius: 6px; font-size: 0.82rem;
  }
  .ccp-input.small.svelte-18l50zi { flex: 0 1 auto; font-size: 0.78rem; }
  .ccp-check.svelte-18l50zi { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text-soft, #b8bdcc); }
  .ccp-tilde.svelte-18l50zi { color: var(--text-faint, #9aa3bb); font-size: 0.8rem; }
  .ccp-add-btn.svelte-18l50zi {
    flex: 0 0 auto;
    background: linear-gradient(135deg, #60a5fa, #6366f1);
    color: #fff; border: 0; padding: 6px 12px; border-radius: 6px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
  }
  .ccp-add-btn.svelte-18l50zi:disabled { opacity: 0.5; cursor: not-allowed; }
  .ccp-err.svelte-18l50zi { color: #f87171; font-size: 0.78rem; }

  .ccp-msgs.svelte-18l50zi {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .ccp-empty.svelte-18l50zi { color: var(--text-faint, #9aa3bb); font-size: 0.82rem; }
  .ccp-empty.svelte-18l50zi p:where(.svelte-18l50zi) { margin: 0 0 4px; }
  .ccp-empty.svelte-18l50zi .hint:where(.svelte-18l50zi) { font-size: 0.78rem; opacity: 0.85; }
  .ccp-empty.svelte-18l50zi code:where(.svelte-18l50zi) { background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 3px; font-size: 0.76rem; }
  .ccp-msg.svelte-18l50zi {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 9px; border-radius: 8px;
    background: var(--surface-card, #262b3b);
    align-self: flex-start; max-width: 88%; font-size: 0.84rem;
  }
  .ccp-msg.user.svelte-18l50zi { background: rgba(96, 165, 250, 0.18); align-self: flex-end; }
  .ccp-msg.sys.svelte-18l50zi {
    background: transparent; border: 1px dashed rgba(255, 255, 255, 0.12);
    color: var(--text-soft, #b8bdcc); font-size: 0.78rem; align-self: stretch;
  }
  .ccp-msg-meta.svelte-18l50zi { font-size: 0.7rem; color: var(--text-faint, #9aa3bb); }
  .ccp-msg-text.svelte-18l50zi { white-space: pre-wrap; word-break: break-word; }

  .ccp-foot.svelte-18l50zi {
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    padding: 8px;
    display: flex; align-items: flex-end; gap: 6px;
    position: relative;
    background: var(--surface-card, #262b3b);
  }
  .ccp-textarea.svelte-18l50zi {
    flex: 1 1 auto;
    background: var(--surface, #1f2433);
    color: var(--text, #e6e9f2);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.84rem;
    resize: none;
    font-family: inherit;
  }
  .ccp-send.svelte-18l50zi {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff; border: 0; border-radius: 6px;
    padding: 8px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  }
  .ccp-send.svelte-18l50zi:disabled { opacity: 0.5; cursor: not-allowed; }

  .ccp-tagmenu.svelte-18l50zi {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 8px; right: 8px;
    background: var(--surface, #1f2433);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
    max-height: 180px; overflow-y: auto;
    padding: 4px 0;
    z-index: 5;
  }
  .ccp-tagitem.svelte-18l50zi {
    display: flex; align-items: center; gap: 6px;
    width: 100%; background: transparent; border: 0;
    color: var(--text, #e6e9f2);
    padding: 6px 10px; font-size: 0.82rem;
    cursor: pointer; text-align: left;
  }
  .ccp-tagitem.svelte-18l50zi:hover { background: rgba(96, 165, 250, 0.16); }
  .ccp-tag-act.svelte-18l50zi { color: var(--text-faint, #9aa3bb); font-size: 0.74rem; }

  html[data-theme="light"] .cal-chat-panel.svelte-18l50zi {
    background: #ffffff; color: #111827;
    border-color: #e5e7eb;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
  }
  html[data-theme="light"] .ccp-head.svelte-18l50zi { background: #f8fafc; border-color: #e5e7eb; }
  html[data-theme="light"] .ccp-foot.svelte-18l50zi { background: #f8fafc; border-color: #e5e7eb; }
  html[data-theme="light"] .ccp-input.svelte-18l50zi,
  html[data-theme="light"] .ccp-textarea.svelte-18l50zi { background: #ffffff; border-color: #d1d5db; color: #111827; }
  html[data-theme="light"] .ccp-msg.svelte-18l50zi { background: #f1f5f9; }
  html[data-theme="light"] .ccp-msg.user.svelte-18l50zi { background: rgba(99, 102, 241, 0.14); }
  html[data-theme="light"] .ccp-msg.sys.svelte-18l50zi { color: #6b7280; }
  html[data-theme="light"] .ccp-tagmenu.svelte-18l50zi { background: #fff; border-color: #d1d5db; }
  html[data-theme="light"] .ccp-close.svelte-18l50zi:hover { background: rgba(15, 23, 42, 0.08); }

  .cal.svelte-1oznmde {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .cal-header.svelte-1oznmde {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
  }
  .title-row.svelte-1oznmde {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .title.svelte-1oznmde {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
  }
  .conn-dot.svelte-1oznmde {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
  }
  .controls.svelte-1oznmde {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .view-toggle.svelte-1oznmde {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .view-toggle.svelte-1oznmde button:where(.svelte-1oznmde) {
    background: transparent;
    color: var(--text-soft);
    border: 0;
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    border-right: 1px solid var(--line);
  }
  .view-toggle.svelte-1oznmde button:where(.svelte-1oznmde):last-child { border-right: 0; }
  .view-toggle.svelte-1oznmde button.active:where(.svelte-1oznmde) {
    background: var(--text);
    color: #fff;
  }

  .nav-group.svelte-1oznmde { display: inline-flex; gap: 0.25rem; }
  .nav-btn.svelte-1oznmde {
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.32rem 0.6rem;
    font-size: 0.82rem;
    cursor: pointer;
  }
  .nav-btn.svelte-1oznmde:hover { background: rgba(127,127,127,0.05); color: var(--text); }

  .primary-btn.svelte-1oznmde {
    background: var(--text);
    color: #fff;
    border: 1px solid var(--text);
    border-radius: var(--radius-sm);
    padding: 0.36rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
  }
  .primary-btn.svelte-1oznmde:hover:not(:disabled) { opacity: 0.9; }
  .primary-btn.lg.svelte-1oznmde { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
  .primary-btn.svelte-1oznmde:disabled { opacity: 0.5; cursor: default; }
  .ghost-btn.svelte-1oznmde {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text-soft);
    border-radius: var(--radius-sm);
    padding: 0.32rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
  }
  .ghost-btn.svelte-1oznmde:hover { background: rgba(127,127,127,0.04); color: var(--text); }
  .danger-btn.svelte-1oznmde {
    background: transparent;
    border: 1px solid var(--danger-soft-border, rgba(220,38,38,0.4));
    color: var(--danger, #dc2626);
    border-radius: var(--radius-sm);
    padding: 0.36rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
  }

  .state.svelte-1oznmde, .alert.svelte-1oznmde {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-soft);
    font-size: 0.84rem;
  }
  .alert.svelte-1oznmde {
    background: var(--danger-soft-bg, rgba(220,38,38,0.06));
    border-color: var(--danger-soft-border, rgba(220,38,38,0.25));
    color: var(--danger, #dc2626);
  }

  .connect-card.svelte-1oznmde {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-card);
  }
  .connect-text.svelte-1oznmde strong:where(.svelte-1oznmde) { display: block; font-size: 0.95rem; color: var(--text); }
  .connect-text.svelte-1oznmde p:where(.svelte-1oznmde) { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--text-faint); }

  /* ----- Month grid ----- */
  .month-grid.svelte-1oznmde {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    /* 패닝 컨테이너: 휠을 굴려도 페이지가 스크롤되지 않도록. */
    overscroll-behavior: contain;
    touch-action: none;
  }
  .dow-row.svelte-1oznmde {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--surface-card);
    border-bottom: 1px solid var(--line);
  }
  .dow.svelte-1oznmde {
    padding: 0.45rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-soft);
    text-align: center;
    border-right: 1px solid var(--line);
  }
  .dow.svelte-1oznmde:last-child { border-right: 0; }
  .dow.sun.svelte-1oznmde { color: #ef4444; }
  .dow.sat.svelte-1oznmde { color: #2563eb; }
  /** 메인 6주만 보이는 뷰포트, 안쪽 8주를 패닝. */
  .month-body.svelte-1oznmde {
    position: relative;
    overflow: hidden;
    /* 메인 6주 = 6 * 96px (모바일 쿼리에서 재조정). */
    height: calc(96px * 6);
  }
  .month-cells.svelte-1oznmde {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* 8주 고정 높이 — 패닝 버퍼 위·아래 1주씩 포함. */
    grid-template-rows: repeat(8, 96px);
    will-change: transform;
  }
  .month-cells.snapping.svelte-1oznmde {
    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cell.svelte-1oznmde {
    position: relative;
    text-align: left;
    padding: 0.35rem 0.4rem 0.4rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* 셀 안 콘텐츠가 길어도 셀 크기는 고정되도록 */
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    min-height: 88px;
  }
  .cell.svelte-1oznmde:nth-child(7n) { border-right: 0; }
  .cell.svelte-1oznmde:nth-last-child(-n+7) { border-bottom: 0; }
  .cell.svelte-1oznmde:hover { background: rgba(127,127,127,0.04); }
  /* 월간 뷰 드래그 선택 하이라이트 — Google Calendar 와 동일한 파란 틴트 */
  .cell.selecting.svelte-1oznmde {
    background: rgba(37, 99, 235, 0.14);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.55);
  }
  .cell.selecting.svelte-1oznmde:hover { background: rgba(37, 99, 235, 0.18); }
  .cell-date.svelte-1oznmde {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
  }
  .cell.out.svelte-1oznmde .cell-date:where(.svelte-1oznmde) { color: var(--text-faint); opacity: 0.55; }
  .cell.today.svelte-1oznmde .cell-date:where(.svelte-1oznmde) {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--text);
    color: #fff;
  }
  .cell-events.svelte-1oznmde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
  }
  .ev-pill.svelte-1oznmde {
    display: flex;
    gap: 4px;
    align-items: baseline;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(96, 165, 250, 0.16);
    color: var(--text);
    border: 0;
    text-align: left;
    cursor: pointer;
    /* 한 줄 + 셀 너비 초과 방지 */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 0.72rem;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .ev-pill.svelte-1oznmde:hover { background: rgba(96, 165, 250, 0.28); }
  .ev-pill.svelte-1oznmde { position: relative; cursor: grab; }
  .ev-pill.dragging.svelte-1oznmde { opacity: 0.5; cursor: grabbing; }
  .ev-pill.ghost.svelte-1oznmde {
    background: rgba(96, 165, 250, 0.42);
    color: var(--text);
    pointer-events: none;
    border: 1px dashed rgba(96, 165, 250, 0.85);
  }
  .ev-handle.svelte-1oznmde {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: ew-resize;
    z-index: 2;
  }
  .ev-handle-left.svelte-1oznmde { left: 0; }
  .ev-handle-right.svelte-1oznmde { right: 0; }
  .ev-pill.svelte-1oznmde:hover .ev-handle:where(.svelte-1oznmde)::before {
    content: "";
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: 1px;
    right: 1px;
    border-radius: 2px;
    background: rgba(96, 165, 250, 0.6);
  }
  .ev-handle-v.svelte-1oznmde {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 2;
  }
  .ev-handle-top.svelte-1oznmde { top: 0; }
  .ev-handle-bottom.svelte-1oznmde { bottom: 0; }
  .ev-block.svelte-1oznmde { position: relative; cursor: grab; }
  .ev-block.dragging.svelte-1oznmde { opacity: 0.85; cursor: grabbing; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); z-index: 5; }
  .ev-block.svelte-1oznmde:hover .ev-handle-v:where(.svelte-1oznmde)::before {
    content: "";
    position: absolute;
    left: 30%;
    right: 30%;
    top: 1px;
    bottom: 1px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.7);
  }
  .ev-time.svelte-1oznmde {
    color: var(--text-faint);
    font-size: 0.66rem;
    flex-shrink: 0;
  }
  .ev-name.svelte-1oznmde {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
  }
  .more-pill.svelte-1oznmde {
    font-size: 0.7rem;
    color: var(--text-faint);
    padding-left: 4px;
  }

  /* ----- Week / Day ----- */
  .week-wrap.svelte-1oznmde, .day-wrap.svelte-1oznmde {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
  }
  .week-head.svelte-1oznmde {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    border-bottom: 1px solid var(--line);
    background: var(--surface-card);
  }
  .hour-col-head.svelte-1oznmde { border-right: 1px solid var(--line); }
  .day-head.svelte-1oznmde {
    text-align: center;
    padding: 0.4rem;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .day-head.svelte-1oznmde:last-child { border-right: 0; }
  .day-dow.svelte-1oznmde { font-size: 0.7rem; color: var(--text-soft); }
  .day-num.svelte-1oznmde { font-size: 0.95rem; font-weight: 700; color: var(--text); }
  .day-head.today.svelte-1oznmde .day-num:where(.svelte-1oznmde) {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--text);
    color: #fff;
    margin: 0 auto;
  }

  .week-body.svelte-1oznmde {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    height: 540px;
    overflow-y: auto;
  }
  .day-body.svelte-1oznmde {
    display: grid;
    grid-template-columns: 56px 1fr;
    height: 540px;
    overflow-y: auto;
  }

  .hour-col.svelte-1oznmde {
    border-right: 1px solid var(--line);
    background: var(--surface-card);
  }
  .hour-tick.svelte-1oznmde {
    height: 44px;
    padding: 2px 4px;
    font-size: 0.66rem;
    color: var(--text-faint);
    text-align: right;
    border-bottom: 1px dashed var(--line);
  }
  .day-col.svelte-1oznmde {
    position: relative;
    border-right: 1px solid var(--line);
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    padding: 0;
    cursor: pointer;
  }
  .day-col.svelte-1oznmde:last-child { border-right: 0; }
  .day-col.single.svelte-1oznmde { border-right: 0; }
  .day-col.svelte-1oznmde:hover { background: rgba(127,127,127,0.03); }
  .hour-row.svelte-1oznmde {
    height: 44px;
    border-bottom: 1px dashed var(--line);
  }
  .ev-block.svelte-1oznmde {
    position: absolute;
    left: 4px;
    right: 4px;
    border: 0;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(96, 165, 250, 0.85);
    color: #fff;
    text-align: left;
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1.2;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1;
  }
  .ev-block.svelte-1oznmde:hover { filter: brightness(1.05); }

  /* 드래그 중 프리뷰(시간 뷰) — 생성 전 일정 모양 */
  .ev-preview.svelte-1oznmde {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: 4px;
    background: rgba(37, 99, 235, 0.32);
    border: 1px dashed rgba(37, 99, 235, 0.75);
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    padding: 2px 6px;
  }
  .ev-preview-label.svelte-1oznmde {
    font-size: 0.68rem;
    font-weight: 600;
    color: #1d4ed8;
    background: rgba(255, 255, 255, 0.85);
    padding: 0 4px;
    border-radius: 3px;
  }
  html[data-theme="dark"] .ev-preview.svelte-1oznmde {
    background: rgba(96, 165, 250, 0.28);
    border-color: rgba(96, 165, 250, 0.85);
  }
  html[data-theme="dark"] .ev-preview-label.svelte-1oznmde {
    color: #dbeafe;
    background: rgba(15, 23, 42, 0.75);
  }

  /* 드래그 동안 텍스트 선택 / 이미지 드래그 방지 */
  .day-col.svelte-1oznmde, .cell.svelte-1oznmde { user-select: none; }
  .ev-block.svelte-1oznmde .ev-time:where(.svelte-1oznmde) { color: rgba(255,255,255,0.85); font-size: 0.65rem; }
  .ev-block.svelte-1oznmde .ev-name:where(.svelte-1oznmde) { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

  /* ----- Modal ----- */
  .modal-backdrop.svelte-1oznmde {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 60;
  }
  .modal.svelte-1oznmde {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 61;
    width: min(520px, 92vw);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md, 0 20px 50px rgba(0,0,0,0.25));
    display: flex;
    flex-direction: column;
    max-height: 92vh;
  }
  .modal-head.svelte-1oznmde {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .icon-btn.svelte-1oznmde {
    background: transparent;
    border: 0;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 1.2rem;
  }
  .modal-body.svelte-1oznmde {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    overflow-y: auto;
  }
  .field.svelte-1oznmde {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-soft);
  }
  .field.check.svelte-1oznmde {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
  }
  .field.svelte-1oznmde input[type="text"]:where(.svelte-1oznmde),
  .field.svelte-1oznmde input[type="date"]:where(.svelte-1oznmde),
  .field.svelte-1oznmde input[type="datetime-local"]:where(.svelte-1oznmde),
  .field.svelte-1oznmde textarea:where(.svelte-1oznmde) {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--input-bg, transparent);
    color: var(--text);
    font-size: 0.86rem;
    font-family: inherit;
  }
  .grid2.svelte-1oznmde { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .alert.inline.svelte-1oznmde { margin: 0; }
  .modal-foot.svelte-1oznmde {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--line);
  }
  .spacer.svelte-1oznmde { flex: 1; }

  /* ===== 라이트 모드 톤 보정 ===== */
  html[data-theme="light"] .ev-pill.svelte-1oznmde {
    background: rgba(37, 99, 235, 0.1);
    color: var(--text);
  }
  html[data-theme="light"] .ev-pill.svelte-1oznmde:hover {
    background: rgba(37, 99, 235, 0.18);
  }
  html[data-theme="light"] .ev-block.svelte-1oznmde {
    background: #2563eb;
  }
  html[data-theme="light"] .ev-block.svelte-1oznmde .ev-time:where(.svelte-1oznmde) {
    color: rgba(255,255,255,0.92);
  }

  /* 작은 화면: 컨트롤 줄바꿈, 셀 높이 축소 */
  @media (max-width: 720px) {
    .month-body.svelte-1oznmde { height: calc(72px * 6); }
    .month-cells.svelte-1oznmde { grid-template-rows: repeat(8, 72px); }
    .week-body.svelte-1oznmde, .day-body.svelte-1oznmde { height: 460px; }
  }

  .panel.svelte-16k8mkw {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0.5rem;
  }

  /* --- Status Bar --- */
  .status-bar.svelte-16k8mkw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-card);
    font-size: 0.78rem;
  }
  .status-left.svelte-16k8mkw,
  .status-right.svelte-16k8mkw {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
  }
  .ws-dot.svelte-16k8mkw {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
    flex-shrink: 0;
  }
  .ws-dot.live.svelte-16k8mkw {
    background: var(--success);
    box-shadow: 0 0 6px rgba(5, 150, 105, 0.5);
  }
  .ws-dot.reconnecting.svelte-16k8mkw {
    background: var(--warning);
    animation: svelte-16k8mkw-pulse 1s ease-in-out infinite;
  }
  .ws-label.svelte-16k8mkw {
    color: var(--text-soft);
    font-weight: 600;
  }
  .plan-badge.svelte-16k8mkw {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--primary-soft-bg);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .plan-badge[data-status="running"].svelte-16k8mkw {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    color: var(--warning);
  }
  .plan-badge[data-status="completed"].svelte-16k8mkw {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
  }
  .plan-badge[data-status="failed"].svelte-16k8mkw {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
  }
  .online-count.svelte-16k8mkw {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    color: var(--success);
    font-weight: 700;
    font-size: 0.72rem;
    cursor: default;
  }
  .typing-pill.svelte-16k8mkw {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--surface-assistant);
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.72rem;
    animation: svelte-16k8mkw-pulse 1.5s ease-in-out infinite;
  }
  .typing-pill.peer.svelte-16k8mkw {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-soft);
  }
  @keyframes svelte-16k8mkw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .err.svelte-16k8mkw {
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--danger-soft-border);
    border-radius: 12px;
    background: var(--danger-soft-bg);
    color: var(--danger);
    font-size: 0.85rem;
  }

  /* --- Message Log --- */
  .log-scroll.svelte-16k8mkw {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
      var(--surface-chat-log),
      var(--surface-strong);
  }
  .load-row.svelte-16k8mkw {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0.4rem;
    background: linear-gradient(to bottom, var(--surface-overlay-strong) 88%, transparent);
  }
  .load-more.svelte-16k8mkw {
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface-card-strong);
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 600;
  }
  .load-more.svelte-16k8mkw:hover:not(:disabled) {
    background: var(--surface-soft);
  }
  .load-more.svelte-16k8mkw:disabled {
    opacity: 0.6;
    cursor: default;
  }
  ul.svelte-16k8mkw {
    list-style: none;
    padding: 0.15rem;
    margin: 0;
    display: grid;
    gap: 0.4rem;
  }
  .msg.svelte-16k8mkw {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.05rem;
    align-items: flex-start;
  }
  .msg[data-role="user"].svelte-16k8mkw {
    align-items: flex-end;
  }

  /* --- System Messages --- */
  .system-line.svelte-16k8mkw {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
  }
  .system-text.svelte-16k8mkw {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-faint);
    font-size: 0.78rem;
    font-weight: 600;
  }

  /* --- Chat Bubbles --- */
  .bubble.svelte-16k8mkw {
    display: block;
    min-width: 0;
    width: fit-content;
    max-width: min(78%, 42rem);
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    background: var(--surface-card-strong);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  }
  .msg-meta.svelte-16k8mkw {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0 0.2rem;
  }
  .who.svelte-16k8mkw {
    font-size: 0.74rem;
    color: var(--text-faint);
    font-weight: 700;
  }
  .ts.svelte-16k8mkw {
    font-size: 0.68rem;
    color: var(--text-faint);
    opacity: 0.6;
  }
  .body.svelte-16k8mkw {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.58;
    font-size: 0.9rem;
  }
  .msg-actions.svelte-16k8mkw {
    display: flex;
    width: fit-content;
  }
  .to-doc.svelte-16k8mkw {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 600;
    transition: color 140ms, border-color 140ms;
  }
  .to-doc.svelte-16k8mkw:hover {
    border-color: var(--line-strong);
    color: var(--text);
  }

  /* Message type styles */
  .msg.optimistic.svelte-16k8mkw .bubble:where(.svelte-16k8mkw) {
    opacity: 0.6;
    border-style: dashed;
  }
  .msg[data-role="user"].svelte-16k8mkw .bubble:where(.svelte-16k8mkw) {
    border-color: var(--line);
    background: var(--primary-soft-bg);
  }
  .msg[data-role="user"].svelte-16k8mkw .msg-meta:where(.svelte-16k8mkw) {
    justify-content: flex-end;
  }
  .msg[data-role="user"].svelte-16k8mkw .who:where(.svelte-16k8mkw) {
    color: var(--primary);
  }
  .msg[data-role="jarvis"].svelte-16k8mkw .bubble:where(.svelte-16k8mkw) {
    background: var(--surface-assistant);
    border-color: var(--primary-soft-border);
  }
  .msg[data-role="jarvis"].svelte-16k8mkw .who:where(.svelte-16k8mkw) {
    color: var(--text-soft);
  }
  .msg[data-role="cobis"].svelte-16k8mkw .bubble:where(.svelte-16k8mkw) {
    background: color-mix(in srgb, var(--success) 12%, var(--surface-card-strong));
    border-color: color-mix(in srgb, var(--success) 26%, var(--line));
  }
  .msg[data-role="cobis"].svelte-16k8mkw .who:where(.svelte-16k8mkw) {
    color: var(--success);
  }

  /* --- Composer --- */
  .composer.svelte-16k8mkw {
    display: flex;
    gap: 0.28rem;
    align-items: center;
    padding: 0.22rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-card);
  }
  .jarvis-indicator.svelte-16k8mkw {
    flex-shrink: 0;
    width: 0.5rem;
    height: 2.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, #ffffff 12%, transparent);
    border: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
    transition: background 140ms, box-shadow 140ms, border-color 140ms;
  }
  .jarvis-indicator.active.svelte-16k8mkw {
    background: linear-gradient(180deg, #e5e7eb, #a3a8b2);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.3);
  }
  input.svelte-16k8mkw {
    flex: 1;
    min-height: 2.25rem;
    padding: 0 0.65rem;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-size: 0.88rem;
  }
  input.svelte-16k8mkw::placeholder {
    color: var(--text-faint);
    font-size: 0.8rem;
  }
  .mic.svelte-16k8mkw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 0.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    transition: background 140ms, border-color 140ms, color 140ms;
  }
  .mic.svelte-16k8mkw:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--line-strong);
  }
  .mic.recording.svelte-16k8mkw {
    color: var(--text);
    border-color: var(--text-soft);
    background: rgba(255, 255, 255, 0.04);
  }
  .mic-dot.svelte-16k8mkw {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-soft);
    animation: svelte-16k8mkw-pulse 1s ease-in-out infinite;
  }
  button[type="submit"].svelte-16k8mkw {
    min-width: 3.8rem;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #e5e7eb, #a3a8b2);
    color: #0a0d12;
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    transition: transform 140ms, box-shadow 140ms;
  }
  button[type="submit"].svelte-16k8mkw:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  }
  button[type="submit"].svelte-16k8mkw:disabled {
    opacity: 0.5;
    box-shadow: none;
    cursor: default;
  }

  @media (max-width: 640px) {
    .status-bar.svelte-16k8mkw {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  /* =====================================================================
   * 일반모드(light) — Dashboard 톤 통일
   *   - 메시지 버블: 모두 흰 배경 + 얇은 라인, 사용자만 살짝 회색 틴트
   *   - 누가 보냈는지(.who) 컬러 → 모두 모노크롬
   *   - composer / 전송 버튼 모노 솔리드
   * ===================================================================== */
  html[data-theme="light"] .bubble.svelte-16k8mkw {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    padding: 0.5rem 0.7rem;
  }
  html[data-theme="light"] .body.svelte-16k8mkw {
    font-size: 0.84rem;
    line-height: 1.55;
  }
  html[data-theme="light"] .who.svelte-16k8mkw {
    font-weight: 500 !important;
    color: var(--text-soft) !important;
    font-size: 0.7rem;
  }
  html[data-theme="light"] .ts.svelte-16k8mkw {
    font-size: 0.66rem;
  }
  html[data-theme="light"] .msg[data-role="user"].svelte-16k8mkw .bubble:where(.svelte-16k8mkw) {
    background: rgba(0, 0, 0, 0.035) !important;
    border-color: var(--line) !important;
  }
  html[data-theme="light"] .msg[data-role="user"].svelte-16k8mkw .who:where(.svelte-16k8mkw) {
    color: var(--text) !important;
  }
  html[data-theme="light"] .msg[data-role="jarvis"].svelte-16k8mkw .bubble:where(.svelte-16k8mkw) {
    background: #ffffff !important;
    border-color: var(--line-strong) !important;
  }
  html[data-theme="light"] .msg[data-role="jarvis"].svelte-16k8mkw .who:where(.svelte-16k8mkw) {
    color: var(--text) !important;
  }
  html[data-theme="light"] .msg[data-role="cobis"].svelte-16k8mkw .bubble:where(.svelte-16k8mkw) {
    background: #ffffff !important;
    border-color: var(--line-strong) !important;
  }
  html[data-theme="light"] .msg[data-role="cobis"].svelte-16k8mkw .who:where(.svelte-16k8mkw) {
    color: var(--text-soft) !important;
  }
  html[data-theme="light"] .to-doc.svelte-16k8mkw {
    border-radius: var(--radius-sm);
    color: var(--text-faint);
    font-weight: 400;
  }
  html[data-theme="light"] .to-doc.svelte-16k8mkw:hover {
    border-color: var(--line-strong);
    color: var(--text);
  }

  /* composer 영역 */
  html[data-theme="light"] .composer.svelte-16k8mkw {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  html[data-theme="light"] .jarvis-indicator.svelte-16k8mkw {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--line);
  }
  html[data-theme="light"] .jarvis-indicator.active.svelte-16k8mkw {
    background: var(--text);
    border-color: var(--text);
    box-shadow: none;
  }
  html[data-theme="light"] input.svelte-16k8mkw::placeholder {
    color: var(--text-faint);
  }
  html[data-theme="light"] button[type="submit"].svelte-16k8mkw {
    background: var(--text);
    color: #ffffff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--text);
    font-weight: 400;
    font-size: 0.78rem;
    box-shadow: none;
  }
  html[data-theme="light"] button[type="submit"].svelte-16k8mkw:hover:not(:disabled) {
    background: #000000;
    border-color: #000000;
    transform: none;
    box-shadow: none;
  }

  .sheet.svelte-e34652 { width: 100%; height: 100%; min-height: 400px; position: relative; display: flex; flex-direction: column; }
  .sheet-loading.svelte-e34652, .sheet-error.svelte-e34652 { padding: 12px; color: var(--text-faint); font-size: 0.85rem; }
  .sheet-error.svelte-e34652 { color: #f87171; }
  .table-wrap.svelte-e34652 { flex: 1 1 auto; overflow: auto; }
  table.svelte-e34652 { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  thead.svelte-e34652 { position: sticky; top: 0; background: var(--surface-card); z-index: 2; }
  th.svelte-e34652, td.svelte-e34652 {
    border: 1px solid var(--line);
    padding: 6px 10px;
    text-align: left;
    vertical-align: middle;
  }
  th.svelte-e34652 { font-weight: 600; color: var(--text-soft); user-select: none; }
  .col-name.svelte-e34652 { display: block; }
  .col-type.svelte-e34652 { display: block; font-size: 0.66rem; color: var(--text-faint); font-weight: 400; }
  .title-col.svelte-e34652 { min-width: 180px; }
  .meta-col.svelte-e34652 { width: 96px; color: var(--text-faint); }
  .user-col.svelte-e34652 { min-width: 120px; cursor: context-menu; }
  .add-col.svelte-e34652 { width: 32px; text-align: center; padding: 0; }
  .add-col-btn.svelte-e34652, .row-del.svelte-e34652 {
    background: transparent; border: 0; color: var(--text-faint);
    font-size: 1rem; line-height: 1; padding: 4px 8px; cursor: pointer; border-radius: 4px;
  }
  .add-col-btn.svelte-e34652:hover, .row-del.svelte-e34652:hover { background: rgba(255,255,255,0.06); color: var(--text); }
  td.svelte-e34652 { background: var(--surface); }
  .title-cell.svelte-e34652 { font-weight: 600; }
  .title-txt.svelte-e34652 { color: var(--text); }
  .cell-text.svelte-e34652 { color: var(--text-soft); }
  .cell-input.svelte-e34652 {
    width: 100%; box-sizing: border-box;
    background: var(--surface-card);
    color: var(--text);
    border: 1px solid #6366f1;
    border-radius: 4px;
    padding: 4px 6px; font-size: 0.85rem;
    font-family: inherit;
  }
  .add-row-row.svelte-e34652 td:where(.svelte-e34652) { background: transparent; border: 0; padding: 8px 0; }
  .add-row-btn.svelte-e34652 {
    background: transparent; border: 1px dashed var(--line); color: var(--text-faint);
    padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.82rem;
    width: 100%;
  }
  .add-row-btn.svelte-e34652:hover { color: var(--text); border-color: var(--text-faint); }

  .add-col-pop.svelte-e34652 {
    position: absolute; top: 8px; right: 8px;
    display: flex; gap: 6px; align-items: center;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    z-index: 5;
  }
  .add-col-pop.svelte-e34652 input:where(.svelte-e34652), .add-col-pop.svelte-e34652 select:where(.svelte-e34652) {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.82rem;
  }
  .add-col-pop.svelte-e34652 button:where(.svelte-e34652) {
    padding: 4px 10px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff; border: 0; border-radius: 4px; font-size: 0.8rem; cursor: pointer;
  }
  .add-col-pop.svelte-e34652 button.ghost:where(.svelte-e34652) { background: transparent; color: var(--text-soft); border: 1px solid var(--line); }

  .col-menu.svelte-e34652 {
    position: fixed; z-index: 200;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.4);
    padding: 4px;
  }
  .col-menu.svelte-e34652 button:where(.svelte-e34652) {
    display: block; width: 100%;
    background: transparent; border: 0; color: var(--text);
    padding: 6px 12px; font-size: 0.82rem; text-align: left; cursor: pointer; border-radius: 4px;
  }
  .col-menu.svelte-e34652 button:where(.svelte-e34652):hover { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }

  html[data-theme="light"] .sheet.svelte-e34652 td:where(.svelte-e34652) { background: #fff; }
  html[data-theme="light"] thead.svelte-e34652 { background: #f8fafc; }
  html[data-theme="light"] .cell-input.svelte-e34652 { background: #fff; }

  .gantt.svelte-1uz2pgj { display: flex; flex-direction: column; height: 100%; min-height: 400px; }
  .gantt-head.svelte-1uz2pgj {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-card);
  }
  .gantt-nav.svelte-1uz2pgj { display: flex; gap: 4px; }
  .gantt-nav.svelte-1uz2pgj button:where(.svelte-1uz2pgj) {
    background: transparent; border: 1px solid var(--line); color: var(--text-soft);
    padding: 4px 10px; border-radius: 4px; font-size: 0.78rem; cursor: pointer;
  }
  .gantt-nav.svelte-1uz2pgj button:where(.svelte-1uz2pgj):hover { background: rgba(255,255,255,0.06); color: var(--text); }
  .gantt-range.svelte-1uz2pgj { color: var(--text-faint); font-size: 0.82rem; }

  .gantt-body.svelte-1uz2pgj { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; }
  .row-labels.svelte-1uz2pgj {
    flex: 0 0 180px;
    border-right: 1px solid var(--line);
    overflow-y: auto;
    background: var(--surface);
  }
  .row-label.svelte-1uz2pgj {
    height: 36px; padding: 0 10px;
    display: flex; align-items: center;
    border-bottom: 1px solid var(--line);
    font-size: 0.82rem; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .row-label.header-cell.svelte-1uz2pgj { font-weight: 600; color: var(--text-soft); background: var(--surface-card); height: 32px; position: sticky; top: 0; z-index: 1; }
  .row-label.add-row.svelte-1uz2pgj { color: var(--text-faint); cursor: pointer; }
  .row-label.add-row.svelte-1uz2pgj:hover { background: rgba(255,255,255,0.04); color: var(--text); }

  .track-wrap.svelte-1uz2pgj {
    flex: 1 1 auto; overflow: auto;
    position: relative;
    background: var(--surface);
    user-select: none;
  }
  .day-header.svelte-1uz2pgj {
    display: flex; height: 32px;
    background: var(--surface-card);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 1;
  }
  .day-tick.svelte-1uz2pgj {
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 0.72rem; color: var(--text-faint);
    flex-shrink: 0;
  }
  .day-tick.weekend.svelte-1uz2pgj { background: rgba(96,165,250,0.04); }
  .day-tick.today.svelte-1uz2pgj { background: rgba(96,165,250,0.18); color: var(--text); font-weight: 600; }
  .day-num.svelte-1uz2pgj { font-size: 0.78rem; color: var(--text-soft); }
  .day-month.svelte-1uz2pgj { font-size: 0.62rem; color: var(--text-faint); }

  .track.svelte-1uz2pgj {
    height: 36px; display: flex; position: relative;
    border-bottom: 1px solid var(--line);
    cursor: crosshair;
  }
  .cell.svelte-1uz2pgj { height: 100%; border-right: 1px solid color-mix(in srgb, var(--line) 55%, transparent); flex-shrink: 0; }
  .cell.weekend.svelte-1uz2pgj { background: rgba(96,165,250,0.03); }
  .cell.today.svelte-1uz2pgj { background: rgba(96,165,250,0.10); }

  .bar.svelte-1uz2pgj {
    position: absolute; top: 6px; height: 24px;
    background: linear-gradient(135deg, #60a5fa, #6366f1);
    border: 0; border-radius: 4px;
    color: #fff; font-size: 0.78rem; font-weight: 600;
    padding: 0 28px;
    cursor: grab;
    display: flex; align-items: center; justify-content: flex-start;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  }
  .bar.dragging.svelte-1uz2pgj { opacity: 0.85; box-shadow: 0 4px 12px rgba(0,0,0,0.35); cursor: grabbing; }
  .bar.preview.svelte-1uz2pgj { background: rgba(96,165,250,0.4); border: 1px dashed rgba(255,255,255,0.6); }
  .bar.preview.floating.svelte-1uz2pgj { position: absolute; pointer-events: none; }
  .bar-text.svelte-1uz2pgj { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .bar-handle.svelte-1uz2pgj {
    position: absolute; top: 0; bottom: 0; width: 8px;
    cursor: ew-resize;
  }
  .bar-handle-l.svelte-1uz2pgj { left: 0; }
  .bar-handle-r.svelte-1uz2pgj { right: 0; }
  .bar.svelte-1uz2pgj:hover .bar-handle:where(.svelte-1uz2pgj)::before {
    content: ""; position: absolute; top: 30%; bottom: 30%; left: 2px; right: 2px;
    border-radius: 1px; background: rgba(255,255,255,0.7);
  }
  .add-track.svelte-1uz2pgj { background: rgba(255,255,255,0.02); }

  html[data-theme="light"] .gantt-head.svelte-1uz2pgj { background: #f8fafc; }
  html[data-theme="light"] .row-labels.svelte-1uz2pgj { background: #fff; }
  html[data-theme="light"] .day-header.svelte-1uz2pgj { background: #f8fafc; }
  html[data-theme="light"] .day-tick.today.svelte-1uz2pgj { background: rgba(99,102,241,0.18); }
  html[data-theme="light"] .cell.today.svelte-1uz2pgj { background: rgba(99,102,241,0.10); }

  .assistant-page.svelte-1gf4nk3 { width: 100%; }

  .grid.svelte-1gf4nk3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  @media (max-width: 640px) {
    .grid.svelte-1gf4nk3 { grid-template-columns: 1fr; }
  }

  .card.svelte-1gf4nk3 {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .card.svelte-1gf4nk3 h3:where(.svelte-1gf4nk3) { margin: 0; font-size: 1rem; font-weight: 700; }

  /* (unused) .input-area {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--input-bg);
    font-size: 0.88rem;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
  }*/
  /* (unused) .input-text {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--input-bg);
    font-size: 0.88rem;
  }*/
  /* (unused) .input-area:focus, .input-text:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  }*/

  /* (unused) .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0 1.1rem;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
    transition: opacity 140ms;
    text-decoration: none;
    width: fit-content;
  }*/
  /* (unused) .btn-primary:hover { opacity: 0.85; }*/
  /* (unused) .btn-primary:disabled { opacity: 0.5; cursor: default; }*/

  /* (unused) .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0 1rem;
    border-radius: 999px;
    background: var(--primary-soft-bg);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    border: 1px solid var(--primary-soft-border);
    flex-shrink: 0;
  }*/
  /* (unused) .btn-secondary:hover { background: var(--button-secondary-hover); }*/

  .muted.svelte-1gf4nk3 { font-size: 0.88rem; color: var(--text-faint); margin: 0; }

  .quick-menu.svelte-1gf4nk3 { grid-column: 1 / -1; }
  .calendar-card.svelte-1gf4nk3 {
    grid-column: 1 / -1;
    padding: 1rem 1.1rem;
  }
  .view-card.svelte-1gf4nk3 { min-height: 540px; padding: 0; overflow: hidden; }
  .view-card.svelte-1gf4nk3 .cal,
  .view-card.svelte-1gf4nk3 .sheet,
  .view-card.svelte-1gf4nk3 .gantt { padding: 1rem 1.1rem; height: 100%; }
  .view-card.svelte-1gf4nk3 .sheet,
  .view-card.svelte-1gf4nk3 .gantt { padding: 0; }

  /* 뷰 전환 탭 */
  .view-tabbar.svelte-1gf4nk3 {
    grid-column: 1 / -1;
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-card);
    width: fit-content;
    align-self: start;
  }
  .view-tabbar.svelte-1gf4nk3 button:where(.svelte-1gf4nk3) {
    background: transparent;
    border: 0;
    color: var(--text-soft);
    padding: 0.4rem 0.95rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .view-tabbar.svelte-1gf4nk3 button:where(.svelte-1gf4nk3):hover { background: rgba(255,255,255,0.06); color: var(--text); }
  .view-tabbar.svelte-1gf4nk3 button.active:where(.svelte-1gf4nk3) {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  }
  .vt-icon.svelte-1gf4nk3 { font-size: 1rem; line-height: 1; }
  html[data-theme="light"] .view-tabbar.svelte-1gf4nk3 button.active:where(.svelte-1gf4nk3) { background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,0.08); }
  /* 비서 채팅 카드: 고정 높이 + 내부 스크롤 (페이지 전체 스크롤 방지). */
  .chat-card.svelte-1gf4nk3 {
    height: 520px;
    padding: 0.85rem 0.95rem;
    overflow: hidden;
  }
  .chat-frame.svelte-1gf4nk3 {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .quick-grid.svelte-1gf4nk3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
  }
  .quick-btn.svelte-1gf4nk3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-card);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    transition: border-color 140ms, background 140ms;
  }
  .quick-btn.svelte-1gf4nk3:hover {
    border-color: var(--primary);
    background: var(--primary-soft-bg);
  }
  .quick-icon.svelte-1gf4nk3 {
    display: flex;
    width: 2.2rem;
    height: 2.2rem;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #c7cbd3, #8a8f99);
    color: #0a0d12;
    font-size: 0.9rem;
    font-weight: 700;
  }

  /* =====================================================================
   * 일반모드(light) — Dashboard 톤 통일
   * ===================================================================== */
  html[data-theme="light"] .card.svelte-1gf4nk3 {
    border-radius: var(--radius-md);
    padding: 1rem 1.05rem;
  }
  html[data-theme="light"] .card.svelte-1gf4nk3 h3:where(.svelte-1gf4nk3) {
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  /* (unused) :global(html[data-theme="light"]) .input-area,
  :global(html[data-theme="light"]) .input-text {
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    padding: 0.5rem 0.65rem;
  }*/
  /* (unused) :global(html[data-theme="light"]) .input-area:focus,
  :global(html[data-theme="light"]) .input-text:focus {
    border-color: var(--text);
    box-shadow: none;
  }*/
  /* primary 액션: 차콜 솔리드 + 사각 라운드 */
  /* (unused) :global(html[data-theme="light"]) .btn-primary {
    background: var(--text);
    color: #ffffff;
    border: 1px solid var(--text);
    border-radius: var(--radius-sm);
    font-weight: 400;
    font-size: 0.8rem;
    min-height: 2.1rem;
    padding: 0 0.85rem;
    box-shadow: none;
  }*/
  /* (unused) :global(html[data-theme="light"]) .btn-primary:hover:not(:disabled) {
    background: #000000;
    border-color: #000000;
    opacity: 1;
  }*/
  /* secondary: 라인만 */
  /* (unused) :global(html[data-theme="light"]) .btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-weight: 400;
    font-size: 0.8rem;
    min-height: 2.1rem;
    padding: 0 0.85rem;
  }*/
  /* (unused) :global(html[data-theme="light"]) .btn-secondary:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.035);
  }*/
  /* 빠른 기능: 모노크롬 카드 */
  html[data-theme="light"] .quick-btn.svelte-1gf4nk3 {
    border-radius: var(--radius-md);
    background: transparent;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-soft);
  }
  html[data-theme="light"] .quick-btn.svelte-1gf4nk3:hover {
    border-color: var(--line-strong);
    background: rgba(0, 0, 0, 0.025);
  }
  html[data-theme="light"] .quick-icon.svelte-1gf4nk3 {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.78rem;
    width: 1.9rem;
    height: 1.9rem;
  }

  .page.svelte-15n1w5a {
    display: grid;
    gap: 1rem;
  }
  .head.svelte-15n1w5a {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .eyebrow.svelte-15n1w5a {
    margin: 0;
    color: var(--text-faint);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  h2.svelte-15n1w5a {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 500;
  }
  .subtitle.svelte-15n1w5a {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.85rem;
  }
  .tabs.svelte-15n1w5a {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    width: fit-content;
  }
  .tabs.svelte-15n1w5a button:where(.svelte-15n1w5a) {
    min-height: 1.9rem;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    font-size: 0.78rem;
  }
  .tabs.svelte-15n1w5a button.active:where(.svelte-15n1w5a) {
    border-color: var(--line-strong);
    color: var(--text);
    background: rgba(0, 0, 0, 0.03);
  }
  .card.svelte-15n1w5a {
    display: grid;
    gap: 0.75rem;
    padding: 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  h3.svelte-15n1w5a {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
  }
  .hint.svelte-15n1w5a {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.8rem;
  }
  .grid.svelte-15n1w5a {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
  }
  .grid.svelte-15n1w5a label:where(.svelte-15n1w5a) {
    display: grid;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-soft);
  }
  .grid.svelte-15n1w5a label.full:where(.svelte-15n1w5a) {
    grid-column: 1 / -1;
  }
  .grid.svelte-15n1w5a input:where(.svelte-15n1w5a) {
    min-height: 2rem;
    padding: 0 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text);
    font-size: 0.85rem;
  }
  .grid.svelte-15n1w5a input:where(.svelte-15n1w5a):focus {
    outline: none;
    border-color: var(--line-strong);
  }
  .actions.svelte-15n1w5a {
    display: flex;
    justify-content: flex-end;
  }
  .primary.svelte-15n1w5a {
    min-height: 2rem;
    padding: 0 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
    color: var(--text);
    font-weight: 500;
    font-size: 0.82rem;
  }
  .primary.svelte-15n1w5a:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .alert.svelte-15n1w5a {
    margin: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--danger-soft-border);
    border-radius: var(--radius-sm);
    background: var(--danger-soft-bg);
    color: var(--danger);
    font-size: 0.8rem;
  }
  .success.svelte-15n1w5a {
    margin: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text);
    font-size: 0.8rem;
  }
  .empty.svelte-15n1w5a {
    margin: 0;
    padding: 0.6rem 0.7rem;
    color: var(--text-soft);
    font-size: 0.85rem;
  }
  .steps.svelte-15n1w5a {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.3rem;
  }
  .steps.svelte-15n1w5a li:where(.svelte-15n1w5a) {
    display: grid;
    grid-template-columns: 8rem 6rem 1fr;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
  }
  .steps.svelte-15n1w5a li.ok:where(.svelte-15n1w5a) {
    border-color: var(--line-strong);
  }
  .steps.svelte-15n1w5a li.failed:where(.svelte-15n1w5a) {
    border-color: var(--danger-soft-border);
  }
  .step-name.svelte-15n1w5a {
    font-weight: 500;
    color: var(--text);
  }
  .step-status.svelte-15n1w5a {
    color: var(--text-soft);
  }
  .step-detail.svelte-15n1w5a {
    color: var(--text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .discover-list.svelte-15n1w5a {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
  }
  .discover-list.svelte-15n1w5a li:where(.svelte-15n1w5a) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  .info.svelte-15n1w5a {
    display: grid;
    gap: 0.15rem;
  }
  .meta.svelte-15n1w5a {
    color: var(--text-faint);
    font-size: 0.75rem;
  }

  .page.svelte-usu26g { display: grid; gap: 1rem; }
  .head.svelte-usu26g {
    display: grid; gap: 0.3rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .eyebrow.svelte-usu26g { margin: 0; color: var(--text-faint); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
  h2.svelte-usu26g { margin: 0; font-size: 1.15rem; font-weight: 500; }
  .subtitle.svelte-usu26g { margin: 0; color: var(--text-soft); font-size: 0.85rem; display: inline-flex; gap: 0.5rem; align-items: center; }
  .status.svelte-usu26g { font-size: 0.7rem; padding: 0.1rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text-faint); }
  .status.on.svelte-usu26g { color: var(--text); border-color: var(--line-strong); }
  .head-actions.svelte-usu26g { display: flex; gap: 0.4rem; padding-top: 0.4rem; align-items: center; }
  .head-actions.svelte-usu26g button:where(.svelte-usu26g), .head-actions.svelte-usu26g .link:where(.svelte-usu26g) {
    min-height: 1.85rem; padding: 0 0.7rem; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
    font-size: 0.78rem; text-decoration: none; display: inline-flex; align-items: center;
  }
  .head-actions.svelte-usu26g button:where(.svelte-usu26g):disabled { opacity: 0.5; cursor: not-allowed; }
  .tabs.svelte-usu26g { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); width: fit-content; }
  .tabs.svelte-usu26g button:where(.svelte-usu26g) { min-height: 1.9rem; padding: 0 0.75rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); font-size: 0.78rem; }
  .tabs.svelte-usu26g button.active:where(.svelte-usu26g) { border-color: var(--line-strong); color: var(--text); background: rgba(0,0,0,0.03); }
  .card.svelte-usu26g { display: grid; gap: 0.7rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
  h3.svelte-usu26g { margin: 0; font-size: 0.9rem; font-weight: 500; }
  .alert.svelte-usu26g { margin: 0; padding: 0.55rem 0.7rem; border: 1px solid var(--danger-soft-border); background: var(--danger-soft-bg); color: var(--danger); border-radius: var(--radius-sm); font-size: 0.8rem; }
  .info.svelte-usu26g { margin: 0; padding: 0.55rem 0.7rem; border: 1px solid var(--line); background: var(--surface-card); color: var(--text); border-radius: var(--radius-sm); font-size: 0.8rem; }
  .empty.svelte-usu26g { margin: 0; color: var(--text-soft); font-size: 0.85rem; }

  .shutdown.svelte-usu26g { display: grid; gap: 0.6rem; padding: 0.85rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
  .shutdown.svelte-usu26g header:where(.svelte-usu26g) { display: flex; align-items: baseline; gap: 0.6rem; }
  .shutdown.svelte-usu26g header:where(.svelte-usu26g) h3:where(.svelte-usu26g) { font-size: 0.85rem; font-weight: 500; }
  .shutdown.svelte-usu26g .note:where(.svelte-usu26g) { color: var(--text-faint); font-size: 0.72rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .steps.svelte-usu26g { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
  .step.svelte-usu26g { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.75rem; color: var(--text-soft); }
  .step.svelte-usu26g .dot:where(.svelte-usu26g) { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
  .step.svelte-usu26g .label:where(.svelte-usu26g) { flex: 1; color: var(--text); }
  .step.svelte-usu26g .state:where(.svelte-usu26g) { color: var(--text-faint); font-size: 0.7rem; }
  .step[data-status="running"].svelte-usu26g .dot:where(.svelte-usu26g) { background: var(--info, #3b82f6); animation: svelte-usu26g-pulse 1.1s ease-in-out infinite; }
  .step[data-status="ok"].svelte-usu26g .dot:where(.svelte-usu26g) { background: var(--success, #22c55e); }
  .step[data-status="error"].svelte-usu26g .dot:where(.svelte-usu26g) { background: var(--danger, #ef4444); }
  .step[data-status="ok"].svelte-usu26g .state:where(.svelte-usu26g) { color: var(--success, #22c55e); }
  .step[data-status="error"].svelte-usu26g .state:where(.svelte-usu26g) { color: var(--danger, #ef4444); }
  @keyframes svelte-usu26g-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.25); }
  }

  .ws-list.svelte-usu26g { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
  .ws-list.svelte-usu26g li:where(.svelte-usu26g) { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .ws-info.svelte-usu26g { display: grid; gap: 0.1rem; }
  .ws-path.svelte-usu26g { color: var(--text-faint); font-size: 0.75rem; }
  .ws-actions.svelte-usu26g { display: flex; gap: 0.35rem; }
  .ws-actions.svelte-usu26g button:where(.svelte-usu26g) { min-height: 1.85rem; padding: 0 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 0.78rem; }

  .two-col.svelte-usu26g { grid-template-columns: 220px 1fr; }
  .two-col.svelte-usu26g .left:where(.svelte-usu26g), .two-col.svelte-usu26g .right:where(.svelte-usu26g) { display: grid; gap: 0.5rem; }
  .rule-list.svelte-usu26g { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
  .rule-list.svelte-usu26g li:where(.svelte-usu26g) { display: flex; gap: 0.25rem; align-items: stretch; }
  .rule-pick.svelte-usu26g { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 0.8rem; }
  .rule-list.svelte-usu26g li.selected:where(.svelte-usu26g) .rule-pick:where(.svelte-usu26g) { border-color: var(--line-strong); }
  .rule-del.svelte-usu26g { padding: 0 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); font-size: 0.7rem; }
  .new-rule.svelte-usu26g { display: flex; gap: 0.3rem; }
  .new-rule.svelte-usu26g input:where(.svelte-usu26g) { flex: 1; min-height: 2rem; padding: 0 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text); font-size: 0.8rem; }
  .new-rule.svelte-usu26g button:where(.svelte-usu26g) { padding: 0 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 0.8rem; }

  textarea.svelte-usu26g { width: 100%; box-sizing: border-box; padding: 0.6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8rem; resize: vertical; }
  textarea.svelte-usu26g:focus { outline: none; border-color: var(--line-strong); }
  .actions.svelte-usu26g { display: flex; justify-content: flex-end; gap: 0.4rem; }
  .actions.svelte-usu26g button:where(.svelte-usu26g) { min-height: 2rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 0.82rem; }
  .actions.svelte-usu26g .primary:where(.svelte-usu26g) { border-color: var(--line-strong); }

  @media (max-width: 760px) {
    .two-col.svelte-usu26g { grid-template-columns: 1fr; }
  }

  .card-wrap.svelte-128nrsu {
    position: relative;
  }
  .settings-link.svelte-128nrsu {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-faint);
    background: transparent;
    text-decoration: none;
    opacity: 0;
    transition: opacity 140ms ease, background 140ms, border-color 140ms, color 140ms;
    z-index: 2;
  }
  .card-wrap.svelte-128nrsu:hover .settings-link:where(.svelte-128nrsu),
  .settings-link.svelte-128nrsu:focus-visible {
    opacity: 1;
  }
  .settings-link.svelte-128nrsu:hover {
    color: var(--text);
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
  }
  html[data-theme="light"] .settings-link.svelte-128nrsu:hover {
    background: rgba(0, 0, 0, 0.04);
  }
  .card.svelte-128nrsu {
    position: relative;
    display: grid;
    gap: 0.75rem;
    width: 100%;
    min-height: 196px;
    padding: 1.1rem;
    border: 1px solid var(--line);
    /* 액센트 색을 알파만 줄여 사용 — --line 과 섞으면 배경에 묻혀 식별이 안 됨 */
    border-bottom: 3px solid color-mix(in srgb, var(--accent, var(--line)) 60%, transparent);
    border-radius: var(--radius-md);
    background:
      var(--surface-card-tint),
      var(--surface-strong);
    box-shadow: var(--shadow-sm);
    text-align: left;
    overflow: hidden;
    transition:
      transform 140ms ease,
      box-shadow 140ms ease;
  }
  .card.svelte-128nrsu > :where(.svelte-128nrsu) {
    position: relative;
    z-index: 1;
  }
  .card.svelte-128nrsu:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .card.active.svelte-128nrsu {
    border-bottom-color: var(--accent, var(--line));
  }
  .agent-card.svelte-128nrsu {
    background: var(--surface-strong);
    box-shadow: var(--shadow-sm);
  }
  .space-card.svelte-128nrsu {
    background:
      var(--surface-card-tint),
      var(--surface-strong);
  }

  .card-ring.svelte-128nrsu {
    display: none;
  }
  .status-glow.svelte-128nrsu {
    display: none;
  }
  header.svelte-128nrsu {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .label.svelte-128nrsu {
    margin: 0 0 0.3rem;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  strong.svelte-128nrsu {
    display: block;
    font-size: 1.12rem;
    line-height: 1.2;
  }

  .activity-badge.svelte-128nrsu {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.65rem;
    padding: 0;
    background: transparent;
    color: var(--text-soft);
    border: 0;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .agent-card.svelte-128nrsu .activity-badge:where(.svelte-128nrsu),
  .space-card.svelte-128nrsu .activity-badge:where(.svelte-128nrsu) {
    background: transparent;
    box-shadow: none;
  }

  .info-row.svelte-128nrsu {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-height: 1.5rem;
  }
  .info-chip.svelte-128nrsu {
    display: inline-flex;
    align-items: center;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-soft);
  }
  .info-chip.svelte-128nrsu + .info-chip:where(.svelte-128nrsu)::before {
    content: "·";
    margin: 0 0.45rem;
    color: var(--text-faint);
  }

  .offline-reason.svelte-128nrsu {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-faint);
    line-height: 1.5;
  }
  .uptime.svelte-128nrsu {
    margin: -0.15rem 0 0;
    font-size: 0.72rem;
    color: var(--text-faint);
    opacity: 0.88;
    line-height: 1.4;
  }

  footer.svelte-128nrsu {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .id.svelte-128nrsu {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    color: var(--text-faint);
    border: 0;
    font-size: 0.72rem;
    font-weight: 500;
  }
  .agent-card.svelte-128nrsu .id:where(.svelte-128nrsu) {
    background: transparent;
  }
  .cta.svelte-128nrsu {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.65rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    border: 1px solid var(--line);
    font-size: 0.76rem;
    font-weight: 500;
    transition: background 140ms, border-color 140ms, color 140ms;
  }
  .card.svelte-128nrsu:hover .cta:where(.svelte-128nrsu) {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--line-strong);
    color: var(--text);
  }
  @keyframes svelte-128nrsu-statusPulse {
    0%, 100% {
      opacity: 0.4;
      transform: scale(0.94);
      filter: blur(24px);
    }
    50% {
      opacity: 0.95;
      transform: scale(1.05);
      filter: blur(34px);
    }
  }

  /* =====================================================================
   * 일반모드(light): 카드 타이포를 얇고 아기자기하게
   *   - 보더 두께 축소, 섀도우/글로우 제거
   *   - 폰트 weight 낮추고 사이즈 살짝 축소
   * ===================================================================== */
  /* 일반모드: 상/좌/우는 얇은 중성 라인, 하단에만 상태 포인트 컬러 — 차분하지만 식별 가능하게
     (app.css 전역 .card 규칙이 !important로 border 를 덮어쓰므로 여기서도 !important 필요)
     주의: --line 은 라이트 모드에서 rgba(0,0,0,.05) 로 거의 투명이라 mix 하면 띠가 사라짐.
           → transparent 와 mix 해 액센트 본 색상의 알파만 조절한다. */
  html[data-theme="light"] .card.svelte-128nrsu {
    border: 1px solid var(--line) !important;
    border-bottom: 3px solid color-mix(in srgb, var(--accent) 70%, transparent) !important;
    box-shadow: none !important;
    padding: 0.95rem 1rem;
    min-height: 168px;
    border-radius: var(--radius-md) !important;
  }
  html[data-theme="light"] .card.active.svelte-128nrsu {
    border: 1px solid var(--line) !important;
    border-bottom: 3px solid var(--accent) !important;
  }
  html[data-theme="light"] .card.svelte-128nrsu:hover {
    border: 1px solid var(--line) !important;
    border-bottom: 3px solid var(--accent) !important;
  }
  html[data-theme="light"] .agent-card.svelte-128nrsu {
    background: #ffffff;
    box-shadow: none;
  }
  html[data-theme="light"] .space-card.svelte-128nrsu {
    background: #ffffff;
  }
  /* card-ring(상단 하이라이트)은 하단 라인과 중복되므로 비활성 유지 — 이미 display: none */
  html[data-theme="light"] .label.svelte-128nrsu {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  html[data-theme="light"] strong.svelte-128nrsu {
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
  }
  html[data-theme="light"] .activity-badge.svelte-128nrsu {
    font-weight: 400;
    font-size: 0.7rem;
    min-height: auto;
    padding: 0;
    background: transparent;
    color: var(--text-soft);
    border: 0;
    border-radius: 0;
    letter-spacing: 0;
    text-transform: none;
  }
  html[data-theme="light"] .agent-card.svelte-128nrsu .activity-badge:where(.svelte-128nrsu) {
    background: transparent;
    box-shadow: none;
    color: var(--text-soft);
  }
  html[data-theme="light"] .info-chip.svelte-128nrsu {
    font-weight: 400;
    font-size: 0.7rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-soft);
    border-radius: 0;
    text-transform: none;
    letter-spacing: 0;
  }
  html[data-theme="light"] .info-chip.svelte-128nrsu + .info-chip:where(.svelte-128nrsu)::before {
    color: var(--text-faint);
  }
  html[data-theme="light"] .uptime.svelte-128nrsu,
  html[data-theme="light"] .offline-reason.svelte-128nrsu {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-weight: 400;
  }
  html[data-theme="light"] .id.svelte-128nrsu {
    background: transparent;
    color: var(--text-faint);
    font-weight: 400;
    font-size: 0.7rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    letter-spacing: 0;
    text-transform: none;
  }
  html[data-theme="light"] .agent-card.svelte-128nrsu .id:where(.svelte-128nrsu) {
    background: transparent;
  }
  html[data-theme="light"] .cta.svelte-128nrsu {
    font-weight: 400;
    font-size: 0.72rem;
    min-height: 1.55rem;
    padding: 0 0.55rem;
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--line);
    border-radius: 3px;
    letter-spacing: 0;
    text-transform: none;
  }
  /* 라이트에서는 보조 링/글로우 전부 숨김 */
  html[data-theme="light"] .card-ring.svelte-128nrsu {
    display: none;
  }
  html[data-theme="light"] .status-glow.svelte-128nrsu {
    display: none;
  }

  .dashboard.svelte-118ro6e {
    display: grid;
    gap: 1.25rem;
  }

  /* Hero */
  .hero.svelte-118ro6e {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.6rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-accent), var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .eyebrow.svelte-118ro6e {
    margin: 0 0 0.35rem;
    color: var(--text-faint);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  h2.svelte-118ro6e {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.2;
  }
  .subtitle.svelte-118ro6e {
    margin: 0.5rem 0 0;
    color: var(--text-soft);
    font-size: 0.95rem;
  }
  .stats.svelte-118ro6e {
    display: flex;
    gap: 0.6rem;
  }
  .stat.svelte-118ro6e {
    display: grid;
    gap: 0.15rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    text-align: center;
    min-width: 72px;
  }
  .stat-value.svelte-118ro6e {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
  }
  .stat-label.svelte-118ro6e {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-faint);
  }

  .alert.svelte-118ro6e {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--danger-soft-border);
    border-radius: var(--radius-sm);
    background: var(--danger-soft-bg);
    color: var(--danger);
    font-size: 0.88rem;
  }

  /* Section Header */
  /* Grid */
  .grid.svelte-118ro6e {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
  }
  .card.placeholder.svelte-118ro6e {
    min-height: 196px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-soft);
  }
  .card.add.svelte-118ro6e {
    min-height: 196px;
    display: grid;
    place-items: center;
    gap: 0.35rem;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background:
      var(--surface-card-tint),
      var(--surface);
    color: var(--text-soft);
    text-align: center;
    cursor: pointer;
    transition: border-color 140ms;
    text-decoration: none;
  }
  .card.add.svelte-118ro6e:hover {
    border-color: var(--text-soft);
  }
  .plus.svelte-118ro6e {
    display: inline-flex;
    width: 2.8rem;
    height: 2.8rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-soft);
    border: 1px solid var(--line);
    font-size: 1.4rem;
    font-weight: 500;
  }
  .card.add.svelte-118ro6e p:where(.svelte-118ro6e) {
    margin: 0;
    font-weight: 700;
    font-size: 0.92rem;
  }
  .add-desc.svelte-118ro6e {
    font-size: 0.8rem;
    color: var(--text-faint);
  }

  @media (max-width: 860px) {
    .hero.svelte-118ro6e {
      grid-template-columns: 1fr;
    }
    .stats.svelte-118ro6e {
      flex-wrap: wrap;
    }
  }

  @media (max-width: 640px) {
    .hero.svelte-118ro6e {
      padding: 1rem;
      border-radius: var(--radius-lg);
    }
    h2.svelte-118ro6e {
      font-size: 1.3rem;
    }
  }

  /* =====================================================================
   * 일반모드(light): 대시보드 타이포 전반 톤다운 — 얇고 작게
   * ===================================================================== */
  html[data-theme="light"] .hero.svelte-118ro6e {
    background: transparent;
    border: 1px solid var(--line);
    box-shadow: none;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-md);
  }
  html[data-theme="light"] .hero.svelte-118ro6e h2:where(.svelte-118ro6e) {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  html[data-theme="light"] .eyebrow.svelte-118ro6e {
    color: var(--text-faint);
    font-weight: 400;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    text-transform: none;
  }
  html[data-theme="light"] .subtitle.svelte-118ro6e {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-soft);
  }
  html[data-theme="light"] .stat.svelte-118ro6e {
    background: transparent;
    border: 1px solid var(--line);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    box-shadow: none;
  }
  html[data-theme="light"] .stat-value.svelte-118ro6e {
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--text);
  }
  html[data-theme="light"] .stat-label.svelte-118ro6e {
    font-weight: 400;
    color: var(--text-faint);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  html[data-theme="light"] .card.add.svelte-118ro6e,
  html[data-theme="light"] .card.placeholder.svelte-118ro6e {
    border: 1px dashed var(--line-strong);
    background: transparent;
    border-radius: var(--radius-md);
    /* CobisCard 라이트 모드의 min-height(168px) 와 동일하게 맞춰
       그리드 안에서 세로 크기가 들쭉날쭉하지 않도록 통일 */
    min-height: 168px;
    padding: 0.95rem 1rem;
  }
  html[data-theme="light"] .card.add.svelte-118ro6e:hover {
    border-color: var(--text-soft);
    background: rgba(0, 0, 0, 0.025);
  }
  html[data-theme="light"] .plus.svelte-118ro6e {
    background: transparent;
    color: var(--text-soft);
    font-weight: 300;
    font-size: 1.4rem;
  }
  html[data-theme="light"] .card.add.svelte-118ro6e p:where(.svelte-118ro6e) {
    font-weight: 400;
    font-size: 0.82rem;
  }

  .avg-mark.svelte-xet0um {
    display: block;
    filter: drop-shadow(0 0 6px currentColor);
  }

  .login-page.svelte-1428x5h {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    overflow: hidden;
  }

  /* HUD 배경: 뒤에서 천천히 회전하는 시안 링들 */
  .hud-backdrop.svelte-1428x5h {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.18));
  }
  .hud-ring.svelte-1428x5h {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.25);
  }
  .ring-1.svelte-1428x5h {
    width: 720px;
    height: 720px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.12);
    animation: svelte-1428x5h-hud-ring-slow 32s linear infinite;
  }
  .ring-2.svelte-1428x5h {
    width: 520px;
    height: 520px;
    animation: svelte-1428x5h-hud-ring-slow 24s linear infinite reverse;
  }
  .ring-3.svelte-1428x5h {
    width: 360px;
    height: 360px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: var(--cyan);
    border-right-color: rgba(255, 255, 255, 0.05);
    animation: svelte-1428x5h-hud-ring-slow 14s linear infinite;
  }
  @keyframes svelte-1428x5h-hud-ring-slow {
    to { transform: rotate(360deg); }
  }

  .login-card.svelte-1428x5h {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    display: grid;
    gap: 1.4rem;
    padding: 2.4rem 2rem 2.1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0) 40%),
      var(--surface-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-md), var(--glow-md);
    overflow: hidden;
  }

  /* HUD 코너 브라켓 — App.svelte 와 동일 스타일 */
  .hud-frame.svelte-1428x5h::before,
  .hud-frame.svelte-1428x5h::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border: 1px solid var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
    pointer-events: none;
  }
  .hud-frame.svelte-1428x5h::before {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: var(--radius-lg);
  }
  .hud-frame.svelte-1428x5h::after {
    bottom: 0;
    right: 0;
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: var(--radius-lg);
  }

  .brand.svelte-1428x5h {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
  }
  .brand-mark.svelte-1428x5h {
    display: inline-flex;
    width: 3.1rem;
    height: 3.1rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06));
    color: var(--cyan);
    font-size: 1.25rem;
    font-weight: 800;
    box-shadow: 0 0 28px rgba(255, 255, 255, 0.4), inset 0 0 18px rgba(255, 255, 255, 0.18);
  }
  .hud-mark.svelte-1428x5h {
    position: relative;
    overflow: visible;
    border: 1px solid var(--primary);
  }
  /* (unused) .hud-mark .mark-glyph {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    text-shadow: 0 0 14px var(--cyan-glow);
  }*/
  .hud-mark.svelte-1428x5h .mark-ring:where(.svelte-1428x5h) {
    position: absolute;
    inset: -6px;
    border: 1px dashed rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    animation: svelte-1428x5h-hud-mark-spin 10s linear infinite;
    opacity: 0.7;
  }
  @keyframes svelte-1428x5h-hud-mark-spin {
    to { transform: rotate(360deg); }
  }
  .eyebrow.svelte-1428x5h {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.25rem;
    color: var(--cyan);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }
  .status-dot.svelte-1428x5h {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
    animation: svelte-1428x5h-hud-blink 1.6s ease-in-out infinite;
  }
  @keyframes svelte-1428x5h-hud-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }
  h1.svelte-1428x5h {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.1;
    letter-spacing: 0.18em;
    color: var(--text);
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
  }
  .tagline.svelte-1428x5h {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    color: var(--text-faint);
    letter-spacing: 0.16em;
  }
  .alert.svelte-1428x5h {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--danger-soft-border);
    border-radius: var(--radius-sm);
    background: var(--danger-soft-bg);
    color: var(--danger);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .methods.svelte-1428x5h {
    display: grid;
    gap: 1rem;
  }
  .method-section.svelte-1428x5h {
    display: grid;
    gap: 0.65rem;
  }
  .btn.svelte-1428x5h {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 2.9rem;
    padding: 0 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition:
      transform 160ms ease,
      box-shadow 160ms ease,
      background 160ms ease,
      border-color 160ms ease,
      opacity 160ms ease;
  }
  .btn.svelte-1428x5h:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .google.svelte-1428x5h {
    background: rgba(6, 16, 32, 0.7);
    border: 1px solid var(--line-strong);
    color: var(--text);
    box-shadow: var(--shadow-sm);
  }
  html[data-theme="light"] .google.svelte-1428x5h {
    background: rgba(255, 255, 255, 0.94);
  }
  .google.svelte-1428x5h:hover:not(:disabled) {
    border-color: var(--cyan);
    background: rgba(255, 255, 255, 0.1);
    color: var(--cyan);
    box-shadow: var(--shadow-md), var(--glow-sm);
    transform: translateY(-1px);
  }
  .google-disabled.svelte-1428x5h {
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    text-align: center;
  }
  .google-disabled.svelte-1428x5h p:where(.svelte-1428x5h) {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-soft);
    font-weight: 600;
  }
  .google-disabled.svelte-1428x5h span:where(.svelte-1428x5h) {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.76rem;
    color: var(--text-faint);
  }
  .divider.svelte-1428x5h {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-faint);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .divider.svelte-1428x5h::before,
  .divider.svelte-1428x5h::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3) 50%,
      transparent
    );
  }
  .dev.svelte-1428x5h {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(6, 16, 32, 0.55);
  }
  html[data-theme="light"] .dev.svelte-1428x5h {
    background: var(--surface-card);
  }
  .dev-label.svelte-1428x5h {
    margin: 0;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  label.svelte-1428x5h {
    display: grid;
    gap: 0.35rem;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  input.svelte-1428x5h {
    min-height: 2.7rem;
    padding: 0 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    font-size: 0.9rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  }
  input.svelte-1428x5h:hover {
    border-color: var(--line-strong);
  }
  input.svelte-1428x5h:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), var(--glow-sm);
  }
  .dev-btn.svelte-1428x5h {
    background: linear-gradient(135deg, #e5e7eb, #a3a8b2);
    color: #04121f;
    border: 1px solid var(--cyan);
    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.3), var(--glow-sm);
    text-shadow: none;
  }
  html[data-theme="light"] .dev-btn.svelte-1428x5h {
    color: #fff;
  }
  .dev-btn.svelte-1428x5h:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-strong), var(--cyan));
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.45), var(--glow-md);
  }

  @media (max-width: 640px) {
    .ring-1.svelte-1428x5h { width: 480px; height: 480px; }
    .ring-2.svelte-1428x5h { width: 360px; height: 360px; }
    .ring-3.svelte-1428x5h { width: 260px; height: 260px; }
    h1.svelte-1428x5h { font-size: 1.35rem; }
  }

  /* =====================================================================
   * 일반 모드(light) — 로그인 페이지 플랫 재설계
   * ===================================================================== */
  /* (unused) :global(html[data-theme="light"]) .login-wrap {
    background: var(--bg);
  }*/
  html[data-theme="light"] .hud-backdrop.svelte-1428x5h,
  html[data-theme="light"] .hud-ring.svelte-1428x5h {
    display: none;
  }
  html[data-theme="light"] .login-card.svelte-1428x5h {
    background: #ffffff;
    border: 1px solid var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 1.8rem 1.6rem 1.5rem;
    border-radius: var(--radius-lg);
  }
  html[data-theme="light"] .hud-frame.svelte-1428x5h::before,
  html[data-theme="light"] .hud-frame.svelte-1428x5h::after {
    display: none;
    content: none;
  }
  /* 로그인 페이지 브랜드 마크 — 배경/보더 없이 아이콘만, 톤은 텍스트와 동일 */
  html[data-theme="light"] .brand-mark.svelte-1428x5h {
    background: transparent;
    color: var(--text);
    border: none;
    box-shadow: none;
    width: 2rem;
    height: 2rem;
  }
  /* (unused) :global(html[data-theme="light"]) .hud-mark .mark-glyph {
    text-shadow: none;
  }*/
  html[data-theme="light"] .hud-mark.svelte-1428x5h .mark-ring:where(.svelte-1428x5h) {
    display: none;
    animation: none;
  }
  html[data-theme="light"] h1.svelte-1428x5h {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-shadow: none;
  }
  html[data-theme="light"] .eyebrow.svelte-1428x5h {
    display: none;
  }
  html[data-theme="light"] .tagline.svelte-1428x5h {
    color: var(--text-faint);
    letter-spacing: 0.02em;
    font-weight: 400;
    font-size: 0.78rem;
  }
  html[data-theme="light"] .status-dot.svelte-1428x5h {
    display: none;
  }
  /* 버튼 — 얇게, 작게, 대문자 해제 */
  html[data-theme="light"] .btn.svelte-1428x5h {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
    min-height: 2.4rem;
    border-radius: var(--radius-sm);
  }
  html[data-theme="light"] .google.svelte-1428x5h {
    background: #ffffff;
    border: 1px solid var(--line-strong);
    color: var(--text);
    box-shadow: none;
  }
  html[data-theme="light"] .google.svelte-1428x5h:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.035);
    border-color: var(--line-strong);
    color: var(--text);
    box-shadow: none;
    transform: none;
  }
  /* Dev 버튼 — 블루 → 중성 차콜 */
  html[data-theme="light"] .dev-btn.svelte-1428x5h {
    background: var(--text);
    color: #ffffff;
    border: 1px solid var(--text);
    box-shadow: none;
    text-shadow: none;
    font-weight: 400;
  }
  html[data-theme="light"] .dev-btn.svelte-1428x5h:hover:not(:disabled) {
    background: #000000;
    border-color: #000000;
    box-shadow: none;
    transform: none;
  }
  html[data-theme="light"] .divider.svelte-1428x5h {
    letter-spacing: 0.06em;
    font-family: var(--font-display);
    color: var(--text-faint);
    font-size: 0.7rem;
    text-transform: none;
    font-weight: 400;
  }
  html[data-theme="light"] .divider.svelte-1428x5h::before,
  html[data-theme="light"] .divider.svelte-1428x5h::after {
    background: var(--line);
  }
  html[data-theme="light"] .dev.svelte-1428x5h {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  html[data-theme="light"] .dev-label.svelte-1428x5h {
    color: var(--text-faint);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
  }
  html[data-theme="light"] label.svelte-1428x5h {
    color: var(--text-soft);
    font-weight: 400;
    font-size: 0.76rem;
    letter-spacing: 0;
  }
  html[data-theme="light"] input.svelte-1428x5h {
    border: 1px solid var(--line);
    background: #ffffff;
    border-radius: var(--radius-sm);
  }
  html[data-theme="light"] input.svelte-1428x5h:focus {
    border-color: var(--text);
    background: #ffffff;
    box-shadow: none;
  }
  html[data-theme="light"] .google-disabled.svelte-1428x5h {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  html[data-theme="light"] .google-disabled.svelte-1428x5h p:where(.svelte-1428x5h) {
    color: var(--text-soft);
    font-weight: 400;
  }

  .dv.svelte-gjbrv8 {
    --raw-line-height: 1.58rem;
    --raw-vpad: 0.9rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 0.65rem;
  }
  header.svelte-gjbrv8 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .header-left.svelte-gjbrv8 {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
  }
  .eyebrow.svelte-gjbrv8 {
    margin: 0;
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .title-row.svelte-gjbrv8 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
  }
  h4.svelte-gjbrv8 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
  }
  .meta.svelte-gjbrv8 {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-weight: 600;
  }
  .diff-pill.svelte-gjbrv8 {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .diff-pill.added.svelte-gjbrv8 {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
  }
  .diff-pill.removed.svelte-gjbrv8 {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
  }
  .tabs.svelte-gjbrv8 {
    display: inline-flex;
    gap: 0.1rem;
    padding: 0.12rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-overlay);
    flex-shrink: 0;
  }
  header.svelte-gjbrv8 button:where(.svelte-gjbrv8) {
    min-height: 1.6rem;
    padding: 0 0.45rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 600;
    transition: background 100ms, color 100ms;
  }
  header.svelte-gjbrv8 button.active:where(.svelte-gjbrv8) {
    background: var(--primary-soft-bg);
    border-color: var(--primary-soft-border);
    color: var(--primary);
  }
  .warn.svelte-gjbrv8 {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--warning) 24%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--warning) 12%, var(--surface-card));
    color: var(--warning);
    font-size: 0.85rem;
  }
  .doc-layout.svelte-gjbrv8 {
    --outline-handle: 0.5rem;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns:
      minmax(0, var(--outline-pct, 26%))
      var(--outline-handle)
      minmax(0, calc(100% - var(--outline-pct, 26%) - var(--outline-handle)));
    gap: 0;
  }
  .doc-layout.resizing-outline.svelte-gjbrv8 {
    cursor: col-resize;
  }
  .outline-resize-handle.svelte-gjbrv8 {
    position: relative;
    align-self: stretch;
    min-width: 0;
    width: 100%;
    height: auto;
    min-height: 2rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
  }
  .outline-resize-handle.svelte-gjbrv8::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: var(--line);
    transition: background 120ms ease;
    pointer-events: none;
  }
  .outline-resize-handle.svelte-gjbrv8:hover::before,
  .doc-layout.resizing-outline.svelte-gjbrv8 .outline-resize-handle:where(.svelte-gjbrv8)::before {
    background: var(--primary-soft-border);
  }
  .outline-panel.svelte-gjbrv8 {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-right: none;
    border-radius: 0;
    background: var(--surface-card);
  }
  .outline-head.svelte-gjbrv8 {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
  }
  .outline-head.svelte-gjbrv8 span:where(.svelte-gjbrv8) {
    color: var(--text-faint);
    font-size: 0.74rem;
    font-weight: 700;
  }
  .outline-list.svelte-gjbrv8 {
    display: grid;
    gap: 0.35rem;
    overflow: auto;
    min-height: 0;
  }
  .outline-item.svelte-gjbrv8 {
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0.65rem 0.55rem calc(0.65rem + (var(--outline-level, 1) - 1) * 0.65rem);
    border-radius: 10px;
    background: transparent;
    text-align: left;
  }
  .outline-item.svelte-gjbrv8:hover {
    background: var(--surface-muted);
  }
  .outline-line.svelte-gjbrv8 {
    color: var(--text-faint);
    font-size: 0.68rem;
    font-weight: 700;
  }
  .outline-item.svelte-gjbrv8 strong:where(.svelte-gjbrv8) {
    font-size: 0.8rem;
    line-height: 1.35;
  }
  .outline-empty.svelte-gjbrv8 {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.6;
  }
  .content.svelte-gjbrv8 {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .content.svelte-gjbrv8 > :where(.svelte-gjbrv8) {
    flex: 1;
    min-height: 0;
  }
  .editor-wrap.svelte-gjbrv8 {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .raw-editor.svelte-gjbrv8 {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    min-height: 0;
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--input-bg);
    overflow: hidden;
  }
  .gutter.svelte-gjbrv8 {
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-muted) 78%, transparent);
  }
  .gutter-content.svelte-gjbrv8,
  .diff-content.svelte-gjbrv8 {
    padding-top: var(--raw-vpad);
    padding-bottom: var(--raw-vpad);
    will-change: transform;
  }
  .gutter-row.svelte-gjbrv8,
  .diff-row.svelte-gjbrv8 {
    height: var(--raw-line-height);
  }
  .gutter-row.svelte-gjbrv8 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.7rem;
    color: var(--text-faint);
    font-size: 0.76rem;
    font-family: ui-monospace, monospace;
  }
  .gutter-row.added.svelte-gjbrv8 {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 10%, transparent);
  }
  .removed-marker.svelte-gjbrv8 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 0.7rem;
    padding: 0 0.7rem;
    color: var(--danger);
    font-size: 0.65rem;
    font-family: ui-monospace, monospace;
  }
  .editor-surface.svelte-gjbrv8 {
    position: relative;
    overflow: hidden;
    min-width: 0;
  }
  .diff-backdrop.svelte-gjbrv8 {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }
  .diff-row.added.svelte-gjbrv8 {
    background: linear-gradient(90deg, color-mix(in srgb, var(--success) 12%, transparent), transparent 72%);
    border-left: 2px solid color-mix(in srgb, var(--success) 45%, transparent);
  }
  .diff-gap.removed.svelte-gjbrv8 {
    height: 0.7rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 12%, transparent), transparent 72%);
    border-left: 2px solid color-mix(in srgb, var(--danger) 42%, transparent);
  }
  textarea.svelte-gjbrv8 {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: var(--raw-vpad) 1rem;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: ui-monospace, monospace;
    font-size: 0.88rem;
    line-height: var(--raw-line-height);
    resize: none;
    tab-size: 2;
    outline: none;
    white-space: pre;
  }
  textarea.svelte-gjbrv8::placeholder {
    color: var(--text-faint);
  }
  .preview.svelte-gjbrv8 {
    flex: 1;
    overflow: auto;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background:
      var(--surface-chat-log),
      var(--surface-strong);
    /* 본문·리스트 등 기본 글자 (제목은 아래 rem으로 별도 지정) */
    font-size: 0.9375rem;
  }
  .preview.loading.svelte-gjbrv8 {
    color: var(--text-faint);
    font-size: 0.85rem;
  }

  .markdown-body.svelte-gjbrv8 h1 { margin: 1.2rem 0 0.5rem; font-size: 1.4rem; line-height: 1.2; }
  .markdown-body.svelte-gjbrv8 h2 { margin: 1.1rem 0 0.45rem; font-size: 1.15rem; line-height: 1.2; }
  .markdown-body.svelte-gjbrv8 h3 { margin: 1rem 0 0.4rem; font-size: 1rem; line-height: 1.2; }
  .markdown-body.svelte-gjbrv8 h4 { margin: 0.9rem 0 0.35rem; font-size: 0.92rem; line-height: 1.3; }
  .markdown-body.svelte-gjbrv8 p {
    margin: 0.6rem 0;
    line-height: 1.75;
    color: var(--text-soft);
  }
  .markdown-body.svelte-gjbrv8 code {
    font-family: ui-monospace, monospace;
    font-size: 0.86em;
    background: var(--surface-muted);
    padding: 0.14em 0.38em;
    border-radius: 6px;
  }
  .markdown-body.svelte-gjbrv8 pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 0.85rem;
    border-radius: 14px;
    overflow: auto;
    font-size: 0.8rem;
    line-height: 1.6;
  }
  .markdown-body.svelte-gjbrv8 pre code {
    background: transparent;
    padding: 0;
    color: inherit;
  }
  .markdown-body.svelte-gjbrv8 ul,
  .markdown-body.svelte-gjbrv8 ol {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
  }
  .markdown-body.svelte-gjbrv8 li {
    line-height: 1.7;
    color: var(--text-soft);
  }
  .markdown-body.svelte-gjbrv8 blockquote {
    margin: 0.75rem 0;
    padding: 0.2rem 0 0.2rem 0.85rem;
    border-left: 3px solid rgba(255, 255, 255, 0.24);
    color: var(--text-soft);
    background: linear-gradient(90deg, rgba(219, 234, 254, 0.35), transparent);
  }
  .markdown-body.svelte-gjbrv8 table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 0.82rem;
  }
  .markdown-body.svelte-gjbrv8 th,
  .markdown-body.svelte-gjbrv8 td {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    text-align: left;
  }
  .markdown-body.svelte-gjbrv8 th {
    background: var(--surface-muted);
    font-weight: 700;
    font-size: 0.76rem;
    color: var(--text-soft);
  }
  .markdown-body.svelte-gjbrv8 hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 1.2rem 0;
  }
  .markdown-body.svelte-gjbrv8 a {
    color: var(--primary);
    text-decoration: none;
  }
  .markdown-body.svelte-gjbrv8 a:hover {
    text-decoration: underline;
  }
  .markdown-body.svelte-gjbrv8 img {
    max-width: 100%;
    border-radius: 12px;
    margin: 0.5rem 0;
  }
  .markdown-body.svelte-gjbrv8 strong {
    color: var(--text);
  }

  /* ===== Mermaid ===== */
  .markdown-body.svelte-gjbrv8 .embed-mermaid {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-card);
    overflow-x: auto;
  }
  .markdown-body.svelte-gjbrv8 .embed-mermaid svg {
    max-width: 100%;
    height: auto;
  }
  .markdown-body.svelte-gjbrv8 .embed-mermaid-error {
    margin: 0.6rem 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-radius: var(--radius-sm, 8px);
    color: var(--danger);
    font-size: 0.78rem;
    white-space: pre-wrap;
  }

  /* ===== KaTeX ===== */
  .markdown-body.svelte-gjbrv8 .embed-katex-block {
    margin: 0.85rem 0;
    overflow-x: auto;
    font-size: 1.05em;
    text-align: center;
  }
  .markdown-body.svelte-gjbrv8 .embed-katex {
    font-size: 1em;
  }
  .markdown-body.svelte-gjbrv8 .katex {
    color: var(--text);
  }

  /* ===== YouTube ===== */
  .markdown-body.svelte-gjbrv8 .embed-youtube {
    position: relative;
    margin: 1rem 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .markdown-body.svelte-gjbrv8 .embed-youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ===== OG Card ===== */
  .markdown-body.svelte-gjbrv8 .embed-og {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 0;
    margin: 0.75rem 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-card);
    text-decoration: none !important;
    color: inherit;
    overflow: hidden;
    transition: border-color 120ms ease, background 120ms ease;
  }
  .markdown-body.svelte-gjbrv8 .embed-og:hover {
    border-color: var(--line-strong);
    background: var(--surface-muted);
  }
  .markdown-body.svelte-gjbrv8 .embed-og-thumb {
    background: var(--surface-muted);
    overflow: hidden;
    aspect-ratio: 1.6 / 1;
    min-height: 96px;
  }
  .markdown-body.svelte-gjbrv8 .embed-og-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
  }
  .markdown-body.svelte-gjbrv8 .embed-og-body {
    display: grid;
    align-content: center;
    gap: 0.25rem;
    padding: 0.7rem 0.85rem;
    min-width: 0;
  }
  .markdown-body.svelte-gjbrv8 .embed-og-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-faint);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .markdown-body.svelte-gjbrv8 .embed-og-icon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    margin: 0;
  }
  .markdown-body.svelte-gjbrv8 .embed-og-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .markdown-body.svelte-gjbrv8 .embed-og-desc {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.78rem;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  @media (max-width: 540px) {
    .markdown-body.svelte-gjbrv8 .embed-og {
      grid-template-columns: 1fr;
    }
    .markdown-body.svelte-gjbrv8 .embed-og-thumb {
      aspect-ratio: 16 / 7;
    }
  }

  @media (max-width: 960px) {
    .doc-layout.svelte-gjbrv8 {
      grid-template-columns: 1fr;
    }
    .outline-resize-handle.svelte-gjbrv8 {
      display: none;
    }
    .outline-panel.svelte-gjbrv8 {
      max-height: 180px;
      border-right: 1px solid var(--line);
    }
  }

  @media (max-width: 640px) {
    header.svelte-gjbrv8 {
      flex-direction: column;
      align-items: stretch;
    }
    .tabs.svelte-gjbrv8 {
      width: fit-content;
    }
    .raw-editor.svelte-gjbrv8 {
      grid-template-columns: 52px minmax(0, 1fr);
    }
  }

  /* =====================================================================
   * 일반모드(light) — Dashboard 톤 통일
   * ===================================================================== */
  html[data-theme="light"] .diff-pill.svelte-gjbrv8 {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: transparent !important;
    font-weight: 400;
    color: var(--text-soft) !important;
    font-size: 0.7rem;
  }
  html[data-theme="light"] .diff-pill.added.svelte-gjbrv8 {
    color: var(--success) !important;
    border-color: color-mix(in srgb, var(--success) 22%, var(--line));
  }
  html[data-theme="light"] .diff-pill.removed.svelte-gjbrv8 {
    color: var(--danger) !important;
    border-color: color-mix(in srgb, var(--danger) 22%, var(--line));
  }
  html[data-theme="light"] .tabs.svelte-gjbrv8 {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  html[data-theme="light"] header.svelte-gjbrv8 button:where(.svelte-gjbrv8) {
    font-weight: 400;
    color: var(--text-soft);
  }
  html[data-theme="light"] .outline-panel.svelte-gjbrv8 {
    background: transparent;
  }
  html[data-theme="light"] h4.svelte-gjbrv8 {
    font-weight: 500;
    letter-spacing: -0.005em;
  }

  .room-shell.svelte-vrg389 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0.7rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .room-head.svelte-vrg389 {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .room-title.svelte-vrg389 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
  }
  .room-title-copy.svelte-vrg389 {
    min-width: 0;
  }
  .room-title-main.svelte-vrg389 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.65rem 1rem;
    min-width: 0;
  }
  .room-title-main.svelte-vrg389 h3:where(.svelte-vrg389) {
    flex: 1 1 auto;
    min-width: 0;
  }
  .room-cobis-ctx.svelte-vrg389 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    margin: 0;
    flex: 0 0 auto;
    max-width: 100%;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-soft);
    white-space: nowrap;
  }
  .room-ctx-k.svelte-vrg389 {
    margin-right: 0.2rem;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .room-ctx-dot.svelte-vrg389 {
    color: var(--text-faint);
    user-select: none;
  }
  .room-ctx-item.svelte-vrg389 {
    min-width: 0;
  }
  .eyebrow.svelte-vrg389 {
    margin: 0 0 0.45rem;
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  h3.svelte-vrg389 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.2;
  }
  .split.svelte-vrg389 {
    --split-handle-w: 0.45rem;
    display: grid;
    grid-template-columns:
      minmax(0, var(--doc-width, 71.225%))
      var(--split-handle-w)
      minmax(0, calc(100% - var(--doc-width, 71.225%) - var(--split-handle-w)));
    /* 채팅/문서 패널이 컨텐츠 길이에 따라 늘어나지 않도록 행 높이 고정.
       내부 스크롤 영역(.log-scroll 등)에서만 overflow 발생하도록 함. */
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1;
    min-height: 0;
    margin-bottom: 5px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .split.svelte-vrg389 > .panel:where(.svelte-vrg389) {
    min-width: 0;
    min-height: 0;
  }
  .split.resizing.svelte-vrg389 {
    cursor: col-resize;
  }
  /* (unused) .room-tabs-wrap {
    flex-shrink: 0;
    display: grid;
    gap: 0.45rem;
  }*/
  /* (unused) .room-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.5rem;
    padding: 0;
    overflow: hidden;
    transition: max-height 180ms ease;
  }*/
  /* (unused) .room-tabs.collapsed {
    max-height: calc(2 * 3.8rem + 0.5rem);
  }*/
  /* (unused) .room-tabs a.room-tab-card {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.65rem 0.8rem;
    border: 1.5px solid color-mix(in srgb, var(--room-accent, var(--line)) 48%, var(--line));
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    position: relative;
  }*/
  /* (unused) .room-tabs a.active {
    border-color: var(--room-accent, rgba(255, 255, 255, 0.26));
    background: color-mix(in srgb, var(--room-accent, #e5e7eb) 10%, white);
    box-shadow: 0 10px 18px color-mix(in srgb, var(--room-accent, #8a8f99) 16%, transparent);
  }*/
  /* (unused) .room-tab-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.55rem;
  }*/
  /* (unused) .room-tab-eyebrow {
    margin: 0 0 0.18rem;
    color: var(--room-accent, var(--primary));
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }*/
  /* (unused) .room-tab-state {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--room-accent, #8a8f99) 12%, transparent);
    color: var(--room-accent, var(--primary));
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
  }*/
  /* (unused) .room-tabs strong {
    font-size: 0.82rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }*/
  /* (unused) .room-tab-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 0;
    margin-top: 0.1rem;
  }*/
  /* (unused) .room-tab-meta {
    flex: 1;
    min-width: 0;
    color: var(--text-faint);
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }*/
  /* (unused) .room-tab-avatars {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }*/
  /* (unused) .room-tab-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 2px solid var(--surface-card);
    margin-left: -0.38rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--room-accent, #8a8f99) 14%, var(--surface-overlay));
    flex-shrink: 0;
    box-sizing: border-box;
  }*/
  /* (unused) .room-tab-avatar:first-child {
    margin-left: 0;
  }*/
  /* (unused) .room-tab-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }*/
  /* (unused) .room-tab-avatar-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--room-accent, var(--primary));
  }*/
  /* (unused) .room-tab-avatar-more {
    font-size: 0.58rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--line) 55%, var(--surface-card));
  }*/
  /* (unused) .room-expand-btn {
    justify-self: center;
    min-height: 2rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.78rem;
    box-shadow: var(--shadow-sm);
  }*/
  .view-tabs.svelte-vrg389 {
    display: inline-flex;
    gap: 0.1rem;
    width: fit-content;
    padding: 0.12rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
  }
  .view-tabs.svelte-vrg389 button:where(.svelte-vrg389) {
    min-height: 1.65rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    background: transparent;
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.8rem;
  }
  .view-tabs.svelte-vrg389 button.active:where(.svelte-vrg389) {
    background: var(--primary-soft-bg);
    color: var(--primary);
  }
  .room-alert.svelte-vrg389 {
    margin: 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--danger-soft-border);
    border-radius: var(--radius-md);
    background: var(--danger-soft-bg);
    color: var(--danger);
  }
  .panel.svelte-vrg389 {
    min-height: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .panel.chat.svelte-vrg389,
  .panel.doc.svelte-vrg389 {
    display: flex;
    flex-direction: column;
  }
  .split-handle.svelte-vrg389 {
    position: relative;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
  }
  .split-handle.svelte-vrg389::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 2px;
    transform: translateX(-50%);
    border-radius: 1px;
    background: color-mix(in srgb, var(--line-strong) 78%, transparent);
    transition: background 140ms ease, width 140ms ease;
  }
  .split-handle.svelte-vrg389:hover::before,
  .split.resizing.svelte-vrg389 .split-handle:where(.svelte-vrg389)::before {
    background: var(--primary-soft-border);
    width: 3px;
  }
  .split-handle.svelte-vrg389 span:where(.svelte-vrg389) {
    display: none;
  }
  .meta-grid.svelte-vrg389 {
    display: grid;
    grid-template-columns: minmax(280px, var(--meta-left-width, 42%)) 0.9rem minmax(0, calc(100% - var(--meta-left-width, 42%) - 0.9rem));
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    flex: 1;
    min-height: 0;
    margin-bottom: 5px;
    overflow: hidden;
  }
  .meta-grid.svelte-vrg389 > .panel:where(.svelte-vrg389) {
    min-height: 0;
    min-width: 0;
  }
  .meta-grid.resizing.svelte-vrg389 {
    cursor: col-resize;
  }
  .info-panel.svelte-vrg389 {
    display: grid;
    align-content: start;
    gap: 1rem;
    overflow: auto;
  }
  .meta-handle.svelte-vrg389 {
    position: relative;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
  }
  .meta-handle.svelte-vrg389::before {
    content: "";
    position: absolute;
    inset: 0.35rem 0.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line-strong) 72%, transparent);
    transition: background 140ms ease;
  }
  .meta-handle.svelte-vrg389:hover::before,
  .meta-grid.resizing.svelte-vrg389 .meta-handle:where(.svelte-vrg389)::before {
    background: var(--primary-soft-border);
  }
  .meta-handle.svelte-vrg389 span:where(.svelte-vrg389) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.2rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--text-faint);
    transform: translate(-50%, -50%);
  }
  .panel-eyebrow.svelte-vrg389 {
    margin: 0;
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  h4.svelte-vrg389 {
    margin: 0;
    font-size: 1.1rem;
  }
  .info-list.svelte-vrg389 {
    display: grid;
    gap: 0.85rem;
    margin: 0;
  }
  .info-list.svelte-vrg389 div:where(.svelte-vrg389) {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-card);
  }
  .info-list.svelte-vrg389 dt:where(.svelte-vrg389) {
    color: var(--text-faint);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .info-list.svelte-vrg389 dd:where(.svelte-vrg389) {
    margin: 0;
    color: var(--text);
    line-height: 1.6;
  }
  .member-list.svelte-vrg389 {
    list-style: none;
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
  }
  .member-list.svelte-vrg389 li:where(.svelte-vrg389) {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-card);
  }
  .member-main.svelte-vrg389 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
  }
  .member-avatar.svelte-vrg389 {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--primary-soft-border);
    background: var(--surface-strong);
  }
  .member-avatar.fallback.svelte-vrg389 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #c7cbd3, #8a8f99);
    color: #0a0d12;
    font-weight: 800;
    font-size: 0.9rem;
  }
  .member-copy.svelte-vrg389 {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
  }
  .member-copy.svelte-vrg389 strong:where(.svelte-vrg389) {
    font-size: 0.95rem;
    line-height: 1.2;
  }
  .member-copy.svelte-vrg389 small:where(.svelte-vrg389) {
    color: var(--text-faint);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .member-side.svelte-vrg389 {
    display: grid;
    justify-items: end;
    gap: 0.45rem;
    flex-shrink: 0;
  }
  .member-status.svelte-vrg389 {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 700;
  }
  .member-status.online.svelte-vrg389 {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
  }
  .member-status.in-room.svelte-vrg389 {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
  }
  .member-permission.svelte-vrg389 {
    color: var(--text-faint);
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
  }
  .settings-head.svelte-vrg389 {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
  }
  .settings-badge.svelte-vrg389 {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .settings-grid.svelte-vrg389 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
  }
  .setting-card.svelte-vrg389 {
    display: grid;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-card);
  }
  .setting-card.svelte-vrg389 strong:where(.svelte-vrg389) {
    font-size: 0.9rem;
  }
  .setting-card.svelte-vrg389 pre:where(.svelte-vrg389) {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-soft);
  }
  .empty-state.svelte-vrg389 {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
  }

  @media (max-width: 960px) {
    .room-head.svelte-vrg389,
    .split.svelte-vrg389,
    .meta-grid.svelte-vrg389 {
      grid-template-columns: 1fr;
    }
    .room-head.svelte-vrg389 {
      align-items: flex-start;
    }
    .room-title.svelte-vrg389 {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
    }
    /* 모바일: 두 패널이 위/아래로 쌓이므로 행 높이 1:1 비율로 두고
       각 패널이 자체 스크롤을 갖게 한다. */
    .split.svelte-vrg389 {
      min-height: 0;
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    }
    .meta-grid.svelte-vrg389 {
      min-height: 0;
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    }
    .split-handle.svelte-vrg389 {
      display: none;
    }
    .meta-handle.svelte-vrg389 {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .room-head.svelte-vrg389,
    .panel.svelte-vrg389 {
      padding: 1rem;
      border-radius: 20px;
    }
    .room-title-main.svelte-vrg389 {
      flex-wrap: wrap;
    }
    .room-cobis-ctx.svelte-vrg389 {
      white-space: normal;
    }
    .view-tabs.svelte-vrg389 {
      width: 100%;
      justify-content: stretch;
    }
    .view-tabs.svelte-vrg389 button:where(.svelte-vrg389) {
      flex: 1;
    }
  }

  /* =====================================================================
   * 일반모드(light) — Dashboard 톤 통일
   *   - 방 카드 색상 액센트(파랑/보라/시안) 모두 모노크롬 라인으로 정리
   *   - 알약/그라디언트 칩 → 라인 칩
   *   - 메시지 버블/문서 영역 흰 배경 + 얇은 라인
   * ===================================================================== */
  /* (unused) :global(html[data-theme="light"]) .room-tabs a.room-tab-card {
    border: 1px solid color-mix(in srgb, var(--room-accent, var(--line)) 24%, #ffffff) !important;
    border-radius: var(--radius-md) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    padding: 0.6rem 0.75rem;
  }*/
  /* (unused) :global(html[data-theme="light"]) .room-tabs a.active {
    border: 1px solid color-mix(in srgb, var(--room-accent, var(--line-strong)) 40%, #ffffff) !important;
    background: rgba(0, 0, 0, 0.025) !important;
    box-shadow: none !important;
  }*/
  /* (unused) :global(html[data-theme="light"]) .room-tabs a.room-tab-card:hover {
    border-color: color-mix(in srgb, var(--room-accent, var(--line-strong)) 44%, #ffffff) !important;
  }*/
  /* (unused) :global(html[data-theme="light"]) .room-tab-eyebrow {
    color: var(--text-faint) !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    font-size: 0.66rem !important;
  }*/
  /* (unused) :global(html[data-theme="light"]) .room-tab-state {
    background: transparent !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 400 !important;
    font-size: 0.68rem !important;
    min-height: 1.4rem;
    padding: 0 0.45rem;
  }*/
  /* (unused) :global(html[data-theme="light"]) .room-tabs strong {
    font-weight: 500;
    font-size: 0.82rem;
  }*/
  /* (unused) :global(html[data-theme="light"]) .room-tab-meta {
    color: var(--text-faint);
    font-weight: 400;
  }*/
  /* (unused) :global(html[data-theme="light"]) .room-tab-avatar {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: var(--surface) !important;
  }*/
  /* (unused) :global(html[data-theme="light"]) .room-tab-avatar-fallback {
    color: var(--text-soft) !important;
    font-weight: 500 !important;
  }*/

  /* 멤버 상태 칩 */
  html[data-theme="light"] .member-status.svelte-vrg389 {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-weight: 400;
    color: var(--text-soft);
  }

  /* view-tabs 토글 (markdown / Preview): 모노 세그먼트 */
  html[data-theme="light"] .view-tabs.svelte-vrg389 {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.15rem;
    box-shadow: none;
  }
  html[data-theme="light"] .view-tabs.svelte-vrg389 button:where(.svelte-vrg389) {
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-weight: 400;
    border-radius: var(--radius-sm);
    text-transform: none;
    letter-spacing: 0;
  }
  html[data-theme="light"] .view-tabs.svelte-vrg389 button.active:where(.svelte-vrg389) {
    background: rgba(0, 0, 0, 0.045);
    color: var(--text);
    font-weight: 500;
  }

  html[data-theme="light"] .room-title-main.svelte-vrg389 {
    font-weight: 500;
  }

  .settings-page.svelte-uox1oc {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 1rem;
  }
  .panel.svelte-uox1oc {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .panel-eyebrow.svelte-uox1oc {
    margin: 0 0 0.4rem;
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  h3.svelte-uox1oc {
    margin: 0;
  }
  .hint.svelte-uox1oc {
    margin: 0.75rem 0 0;
    color: var(--text-soft);
    line-height: 1.7;
  }
  .body-grid.svelte-uox1oc {
    display: grid;
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    flex: 1;
    min-height: 0;
  }
  /* 룰/스킬 빌더 모드에서는 빌더가 뷰포트 채우도록 유지 */
  .body-grid-fill.svelte-uox1oc {
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr);
  }
  .menu.svelte-uox1oc {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
    align-self: stretch;
    min-height: 0;
  }
  .menu.svelte-uox1oc .sync-card:where(.svelte-uox1oc) {
    margin-top: auto;
  }
  .builder-side-outline.svelte-uox1oc {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 1;
    min-height: 0;
    overflow: auto;
    align-content: flex-start;
  }
  .builder-side-section.svelte-uox1oc {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    flex: 0 0 auto;
    min-height: 0;
  }
  /* 문서/서버 아웃라이너 섹션: 남는 세로 공간을 전부 차지 */
  .builder-side-section-primary.svelte-uox1oc {
    flex: 1 1 auto;
  }
  .builder-side-items-fill.svelte-uox1oc {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
  }
  .builder-side-section-accordion.svelte-uox1oc {
    gap: 0.55rem;
  }
  /* 접힘 상태: 최소 높이로 하단에 밀착 */
  .builder-side-section-accordion.collapsed.svelte-uox1oc {
    flex: 0 0 auto;
    padding: 0.6rem 0.85rem;
    margin-top: auto;
  }
  .builder-side-accordion-trigger.svelte-uox1oc {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
  }
  .builder-side-accordion-trigger.svelte-uox1oc:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  .builder-side-accordion-trigger.svelte-uox1oc strong:where(.svelte-uox1oc) {
    font-size: 0.84rem;
  }
  .builder-accordion-chevron.svelte-uox1oc {
    flex-shrink: 0;
    font-size: 0.65rem;
    color: var(--text-soft);
    font-weight: 700;
    line-height: 1;
    user-select: none;
  }
  .builder-side-head.svelte-uox1oc {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: center;
  }
  .builder-side-head.svelte-uox1oc strong:where(.svelte-uox1oc),
  .builder-side-head.svelte-uox1oc span:where(.svelte-uox1oc) {
    font-size: 0.84rem;
  }
  .builder-side-head.svelte-uox1oc span:where(.svelte-uox1oc) {
    color: var(--text-soft);
    font-weight: 700;
  }
  .builder-side-items.svelte-uox1oc {
    display: grid;
    gap: 0.55rem;
    max-height: 320px;
    overflow: auto;
  }
  .builder-side-item.svelte-uox1oc {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    text-align: left;
  }
  .builder-side-item.active.svelte-uox1oc {
    border-color: var(--primary-soft-border);
    background: var(--primary-soft-bg);
  }
  .builder-side-item.svelte-uox1oc strong:where(.svelte-uox1oc),
  .builder-side-item.svelte-uox1oc small:where(.svelte-uox1oc) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .builder-side-item.svelte-uox1oc small:where(.svelte-uox1oc),
  .builder-side-kind.svelte-uox1oc,
  .builder-side-empty.svelte-uox1oc {
    color: var(--text-soft);
  }
  .builder-side-kind.svelte-uox1oc {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
  }
  .builder-side-empty.svelte-uox1oc {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.6;
  }
  .menu-tabs.svelte-uox1oc {
    display: grid;
    gap: 0.55rem;
  }
  .menu-tabs.svelte-uox1oc button:where(.svelte-uox1oc) {
    min-height: 2.8rem;
    padding: 0 0.8rem;
    border-radius: var(--radius-md);
    text-align: left;
    background: var(--surface-card);
    border: 1px solid var(--line);
    font-weight: 700;
    color: var(--text-soft);
  }
  .menu-tabs.svelte-uox1oc button.active:where(.svelte-uox1oc) {
    background: var(--primary-soft-bg);
    color: var(--primary);
    border-color: var(--primary-soft-border);
  }
  .sync-card.svelte-uox1oc {
    display: grid;
    gap: 0.45rem;
    padding: 0.95rem 1rem;
    border-radius: var(--radius-md);
    background: var(--surface-accent);
    border: 1px solid var(--primary-soft-border);
  }
  .sync-card.svelte-uox1oc span:where(.svelte-uox1oc) {
    color: var(--text-soft);
    line-height: 1.6;
    font-size: 0.9rem;
  }
  .content-stack.svelte-uox1oc {
    display: grid;
    gap: 1rem;
    align-content: start;
    grid-auto-rows: min-content;
  }
  /* 룰/스킬 빌더: 본문 열이 뷰포트까지 채워지고 builder-split이 남는 높이 사용 */
  .content-stack-fill.svelte-uox1oc {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    gap: 1rem;
  }
  .content-stack-fill.svelte-uox1oc > .builder-head-panel:where(.svelte-uox1oc) {
    flex-shrink: 0;
  }
  .content-stack-fill.svelte-uox1oc > .builder-split:where(.svelte-uox1oc) {
    flex: 1;
    min-height: 0;
  }
  /* MCP 탭: 단일 builder-shell 패널이 뷰포트 하단까지 차지 */
  .content-stack-fill.svelte-uox1oc > .builder-shell:where(.svelte-uox1oc) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .content-stack-fill.svelte-uox1oc > .builder-shell:where(.svelte-uox1oc) > .builder-workspace:where(.svelte-uox1oc) {
    flex: 1;
    min-height: 0;
  }
  .alert.svelte-uox1oc,
  .success.svelte-uox1oc {
    margin: 0;
    padding: 0.85rem 0.95rem;
    border-radius: var(--radius-md);
  }
  .alert.svelte-uox1oc {
    border: 1px solid var(--danger-soft-border);
    background: var(--danger-soft-bg);
    color: var(--danger);
  }
  .success.svelte-uox1oc {
    border: 1px solid var(--success-soft-border);
    background: var(--success-soft-bg);
    color: var(--success);
  }
  .section-block.svelte-uox1oc {
    display: grid;
    gap: 1rem;
  }
  .section-head.svelte-uox1oc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .dual-grid.svelte-uox1oc,
  .sync-grid.svelte-uox1oc {
    display: grid;
    gap: 1rem;
  }
  .dual-grid.svelte-uox1oc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-card.svelte-uox1oc,
  .account-card.svelte-uox1oc,
  .rule-card.svelte-uox1oc,
  .sync-item.svelte-uox1oc {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-card);
  }
  .profile-editor.svelte-uox1oc {
    display: grid;
    gap: 0.9rem;
  }
  .account-layout.svelte-uox1oc {
    display: grid;
    gap: 1rem;
  }
  .profile-summary.svelte-uox1oc {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  .profile-summary-copy.svelte-uox1oc {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
  }
  .profile-avatar.svelte-uox1oc {
    display: inline-flex;
    width: 4.75rem;
    height: 4.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--profile-color, var(--primary));
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .profile-avatar.svelte-uox1oc img:where(.svelte-uox1oc) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .subsection-head.svelte-uox1oc {
    display: grid;
    gap: 0.25rem;
  }
  .sub-hint.svelte-uox1oc {
    color: var(--text-soft);
    font-size: 0.84rem;
    line-height: 1.6;
  }
  .color-section.svelte-uox1oc {
    display: grid;
    gap: 0.65rem;
    align-content: start;
  }
  .profile-detail-grid.svelte-uox1oc {
    align-items: start;
  }
  .color-presets-wrap.svelte-uox1oc {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
  }
  .color-presets-wrap.svelte-uox1oc span:where(.svelte-uox1oc) {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-soft);
  }
  .color-presets.svelte-uox1oc {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
  }
  .color-swatch.svelte-uox1oc {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--swatch);
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm);
  }
  .color-swatch.active.svelte-uox1oc {
    border-color: var(--text);
  }
  .connection-row.svelte-uox1oc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .connection-pill.svelte-uox1oc {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 700;
  }
  .connection-pill.connected-pill.svelte-uox1oc {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
  }
  .password-form.svelte-uox1oc {
    display: grid;
    gap: 0.85rem;
  }
  .account-actions.svelte-uox1oc {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
  }
  .profile-card.worker.svelte-uox1oc {
    background: var(--surface-card-tint);
  }
  .profile-top.svelte-uox1oc,
  .rule-head.svelte-uox1oc {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
  }
  .profile-chip.svelte-uox1oc {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
  }
  .profile-chip.fast.svelte-uox1oc {
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary);
  }
  .profile-chip.smart.svelte-uox1oc {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
  }
  .profile-note.svelte-uox1oc {
    color: var(--text-soft);
  }
  .sync-inline-note.svelte-uox1oc {
    margin: 0.65rem 0 0;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.5;
  }
  .routing-selects.svelte-uox1oc {
    display: grid;
    gap: 0.65rem;
  }
  .field-grid.svelte-uox1oc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  label.svelte-uox1oc {
    display: grid;
    gap: 0.4rem;
  }
  label.svelte-uox1oc span:where(.svelte-uox1oc) {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-soft);
  }
  input.svelte-uox1oc,
  textarea.svelte-uox1oc,
  select.svelte-uox1oc {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    resize: vertical;
  }
  input.svelte-uox1oc:disabled,
  textarea.svelte-uox1oc:disabled,
  select.svelte-uox1oc:disabled {
    background: var(--input-disabled-bg);
    color: var(--text-faint);
  }
  .sync-grid.svelte-uox1oc {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .actions.svelte-uox1oc {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
  }
  .rule-list.svelte-uox1oc {
    display: grid;
    gap: 1rem;
  }
  .checkline.svelte-uox1oc {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .checkline.svelte-uox1oc input:where(.svelte-uox1oc) {
    width: auto;
  }
  .builder-head-panel.svelte-uox1oc {
    display: grid;
    gap: 1rem;
  }
  .builder-split.svelte-uox1oc {
    display: grid;
    grid-template-columns:
      minmax(0, var(--builder-doc-width, 71.225%))
      0.9rem
      minmax(0, calc(100% - var(--builder-doc-width, 71.225%) - 0.9rem));
    gap: 0;
    min-height: 0;
  }
  .builder-split.resizing.svelte-uox1oc {
    cursor: col-resize;
  }
  .builder-workspace.svelte-uox1oc {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    gap: 1rem;
    min-height: 0;
  }
  .builder-editor-panel.svelte-uox1oc,
  .builder-docs-panel.svelte-uox1oc,
  .builder-chat-panel.svelte-uox1oc {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.9rem;
    gap: 0.75rem;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 76%, transparent), transparent 16%),
      var(--surface);
    overflow: hidden;
  }
  .builder-split-handle.svelte-uox1oc {
    position: relative;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: col-resize;
  }
  .builder-split-handle.svelte-uox1oc::before {
    content: "";
    position: absolute;
    inset: 0.35rem 0.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line-strong) 72%, transparent);
    transition: background 140ms ease;
  }
  .builder-split-handle.svelte-uox1oc:hover::before,
  .builder-split.resizing.svelte-uox1oc .builder-split-handle:where(.svelte-uox1oc)::before {
    background: var(--primary-soft-border);
  }
  .builder-split-handle.svelte-uox1oc span:where(.svelte-uox1oc) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.2rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--text-faint);
    transform: translate(-50%, -50%);
  }
  .builder-docs-grid.svelte-uox1oc {
    --builder-outline-pct: 26%;
    display: grid;
    /* DocViewer `outlineRatio` 0.26과 동일: 아웃라인 / 문서 편집 */
    grid-template-columns: minmax(0, var(--builder-outline-pct)) minmax(0, 1fr);
    gap: 0.85rem;
    flex: 1;
    min-height: 0;
  }
  /* MCP 탭: 서버 목록이 사이드바로 옮겨져서 에디터 한 컬럼만 남는 경우 */
  .builder-docs-grid.builder-docs-grid-single.svelte-uox1oc {
    grid-template-columns: minmax(0, 1fr);
  }
  /* (unused) .builder-doc-list,*/
  .builder-editor.svelte-uox1oc,
  .builder-editor-panel.svelte-uox1oc {
    display: grid;
    gap: 0.65rem;
    min-height: 0;
  }
  /* (unused) .builder-doc-list-head,*/
  .builder-editor-head.svelte-uox1oc,
  .builder-chat-head.svelte-uox1oc {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: center;
  }
  /* (unused) .builder-doc-list-head h4,*/
  .builder-editor-head.svelte-uox1oc h4:where(.svelte-uox1oc),
  .builder-chat-head.svelte-uox1oc h4:where(.svelte-uox1oc) {
    margin: 0;
  }
  .builder-chat-head.svelte-uox1oc {
    align-items: flex-start;
    padding: 0 0.15rem;
  }
  /* (unused) .builder-doc-list-head span {
    color: var(--text-soft);
    font-size: 0.84rem;
    font-weight: 700;
  }*/
  /* (unused) .builder-doc-items {
    display: grid;
    gap: 0.65rem;
    overflow: auto;
    min-height: 0;
    max-height: 640px;
    padding-right: 0.15rem;
  }*/
  /* (unused) .builder-doc-item {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    width: 100%;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    text-align: left;
  }*/
  /* (unused) .builder-doc-item.active {
    border-color: var(--primary-soft-border);
    background: var(--primary-soft-bg);
  }*/
  /* (unused) .builder-doc-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
  }*/
  /* (unused) .builder-doc-copy strong,
  .builder-doc-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }*/
  /* (unused) .builder-doc-copy small,
  .builder-doc-kind {
    color: var(--text-soft);
  }*/
  /* (unused) .builder-doc-kind {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
  }*/
  /* (unused) .doc-state-pill {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    padding: 0 0.7rem;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
  }*/
  /* (unused) .doc-state-pill.enabled-pill {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
  }*/
  .builder-editor.svelte-uox1oc {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-card);
  }
  .builder-editor-panel.svelte-uox1oc {
    overflow: auto;
  }
  .builder-editor-body.svelte-uox1oc textarea:where(.svelte-uox1oc) {
    min-height: 420px;
    flex: 1;
  }
  .builder-empty.svelte-uox1oc /* (unused) .empty-state*/ {
    display: grid;
    place-items: center;
    min-height: 220px;
    color: var(--text-soft);
    text-align: center;
  }
  .builder-model-select.svelte-uox1oc {
    display: grid;
    gap: 0.35rem;
    min-width: min(320px, 100%);
  }
  .builder-model-select.svelte-uox1oc span:where(.svelte-uox1oc) {
    color: var(--text-faint);
    font-size: 0.76rem;
    font-weight: 700;
  }
  .builder-model-select-bottom.svelte-uox1oc {
    padding: 0 0.1rem;
    flex-shrink: 0;
  }
  .builder-chat-status.svelte-uox1oc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    flex-shrink: 0;
  }
  .builder-status-label.svelte-uox1oc {
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.82rem;
  }
  .builder-typing-pill.svelte-uox1oc {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--surface-assistant);
    color: var(--text-soft);
    font-weight: 600;
    font-size: 0.72rem;
    animation: svelte-uox1oc-builder-chat-pulse 1.5s ease-in-out infinite;
  }
  @keyframes svelte-uox1oc-builder-chat-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  .builder-chat-log.svelte-uox1oc {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
      var(--surface-chat-log),
      var(--surface-strong);
  }
  .builder-chat-log.svelte-uox1oc ul:where(.svelte-uox1oc) {
    list-style: none;
    padding: 0.15rem;
    margin: 0;
    display: grid;
    gap: 0.4rem;
  }
  .builder-chat-empty.svelte-uox1oc {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    padding: 0.75rem;
    text-align: center;
  }
  .builder-chat-empty.svelte-uox1oc .hint:where(.svelte-uox1oc) {
    margin: 0;
  }
  .builder-chat-panel.svelte-uox1oc .msg:where(.svelte-uox1oc) {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.05rem;
    align-items: flex-start;
  }
  .builder-chat-panel.svelte-uox1oc .msg[data-role="user"]:where(.svelte-uox1oc) {
    align-items: flex-end;
  }
  .builder-chat-panel.svelte-uox1oc .msg-meta:where(.svelte-uox1oc) {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0 0.2rem;
  }
  .builder-chat-panel.svelte-uox1oc .who:where(.svelte-uox1oc) {
    font-size: 0.74rem;
    color: var(--text-faint);
    font-weight: 700;
  }
  .builder-chat-panel.svelte-uox1oc .bubble:where(.svelte-uox1oc) {
    display: block;
    min-width: 0;
    width: fit-content;
    max-width: min(78%, 42rem);
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 16px;
    background: var(--surface-card-strong);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  }
  .builder-chat-panel.svelte-uox1oc .body:where(.svelte-uox1oc) {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.58;
    font-size: 0.9rem;
  }
  .builder-chat-panel.svelte-uox1oc .msg[data-role="user"]:where(.svelte-uox1oc) .msg-meta:where(.svelte-uox1oc) {
    justify-content: flex-end;
  }
  .builder-chat-panel.svelte-uox1oc .msg[data-role="user"]:where(.svelte-uox1oc) .who:where(.svelte-uox1oc) {
    color: var(--primary);
  }
  .builder-chat-panel.svelte-uox1oc .msg[data-role="user"]:where(.svelte-uox1oc) .bubble:where(.svelte-uox1oc) {
    border-color: var(--line);
    background: var(--primary-soft-bg);
  }
  .builder-chat-panel.svelte-uox1oc .msg[data-role="assistant"]:where(.svelte-uox1oc) .bubble:where(.svelte-uox1oc) {
    background: var(--surface-assistant);
    border-color: var(--primary-soft-border);
  }
  .builder-chat-form.svelte-uox1oc {
    flex-shrink: 0;
  }
  .builder-chat-panel.svelte-uox1oc .composer:where(.svelte-uox1oc) {
    display: flex;
    gap: 0.28rem;
    align-items: center;
    padding: 0.22rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-card);
  }
  .builder-chat-panel.svelte-uox1oc .jarvis-indicator:where(.svelte-uox1oc) {
    flex-shrink: 0;
    width: 0.5rem;
    height: 2.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, #ffffff 12%, transparent);
    border: 1px solid color-mix(in srgb, #ffffff 24%, transparent);
    transition:
      background 140ms,
      box-shadow 140ms,
      border-color 140ms;
  }
  .builder-chat-panel.svelte-uox1oc .jarvis-indicator.active:where(.svelte-uox1oc) {
    background: linear-gradient(180deg, #e5e7eb, #a3a8b2);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.3);
  }
  .builder-chat-panel.svelte-uox1oc .composer:where(.svelte-uox1oc) input:where(.svelte-uox1oc) {
    flex: 1;
    min-height: 2.25rem;
    padding: 0 0.65rem;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.88rem;
    box-shadow: none;
  }
  .builder-chat-panel.svelte-uox1oc .composer:where(.svelte-uox1oc) input:where(.svelte-uox1oc)::placeholder {
    color: var(--text-faint);
    font-size: 0.8rem;
  }
  .builder-chat-panel.svelte-uox1oc .composer:where(.svelte-uox1oc) input:where(.svelte-uox1oc):focus {
    outline: none;
  }
  .builder-chat-panel.svelte-uox1oc .composer:where(.svelte-uox1oc) button[type="submit"]:where(.svelte-uox1oc) {
    min-width: 3.8rem;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #e5e7eb, #a3a8b2);
    color: #0a0d12;
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    transition:
      transform 140ms,
      box-shadow 140ms;
  }
  .builder-chat-panel.svelte-uox1oc .composer:where(.svelte-uox1oc) button[type="submit"]:where(.svelte-uox1oc):hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  }
  .builder-chat-panel.svelte-uox1oc .composer:where(.svelte-uox1oc) button[type="submit"]:where(.svelte-uox1oc):disabled {
    opacity: 0.5;
    box-shadow: none;
    cursor: default;
  }
  .suggestion-card.svelte-uox1oc {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--primary-soft-border);
    border-radius: var(--radius-md);
    background: var(--primary-soft-bg);
  }
  .suggestion-card.svelte-uox1oc p:where(.svelte-uox1oc) {
    margin: 0;
    color: var(--text-soft);
  }
  .chip-wrap.svelte-uox1oc {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .chip.svelte-uox1oc {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    padding: 0 0.75rem;
    border-radius: 999px;
    background: var(--primary-soft-bg);
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .primary.svelte-uox1oc,
  .secondary.svelte-uox1oc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    text-decoration: none;
  }
  .primary.svelte-uox1oc {
    background: linear-gradient(135deg, #e5e7eb, #a3a8b2);
    color: #0a0d12;
  }
  .secondary.svelte-uox1oc {
    background: var(--button-secondary-bg);
    border: 1px solid var(--line);
    color: var(--text-soft);
  }
  .secondary.muted.svelte-uox1oc {
    background: var(--surface-muted);
  }
  .link-btn.svelte-uox1oc {
    color: var(--danger);
    font-weight: 700;
  }
  pre.svelte-uox1oc {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.78rem;
    color: var(--text-soft);
    line-height: 1.55;
  }

  @media (max-width: 1100px) {
    .body-grid.svelte-uox1oc,
    .dual-grid.svelte-uox1oc,
    .builder-workspace.svelte-uox1oc,
    .builder-docs-grid.svelte-uox1oc {
      grid-template-columns: 1fr;
    }
    .body-grid-fill.svelte-uox1oc {
      grid-template-rows: none;
    }
    .builder-split.svelte-uox1oc {
      grid-template-columns: 1fr;
      gap: 1rem;
      min-height: min(70vh, 720px);
    }
    .builder-split-handle.svelte-uox1oc {
      display: none;
    }
    .menu.svelte-uox1oc {
      position: static;
    }
    /* (unused) .builder-doc-items {
      max-height: 320px;
    }*/
  }

  @media (max-width: 820px) {
    .section-head.svelte-uox1oc,
    .field-grid.svelte-uox1oc {
      grid-template-columns: 1fr;
      flex-direction: column;
      align-items: stretch;
    }
    .profile-summary.svelte-uox1oc {
      grid-template-columns: 1fr;
      justify-items: start;
    }
  }

  /* =====================================================================
   * 일반모드(light) — Dashboard 톤 통일
   *   - 사이드 메뉴: 얇은 폰트, 작은 사이즈, active는 중성 회색 tint
   *   - 섹션 헤드: eyebrow/h3 축소, 여백 타이트
   *   - 패널/카드 전반: 얇은 라인, 그림자 제거, 작은 라운드
   *   - 라벨 알약/프로필칩: 얇은 라인 칩
   * ===================================================================== */

  /* 패널 공통 */
  html[data-theme="light"] .panel.svelte-uox1oc {
    padding: 0.95rem 1.05rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: none;
  }

  /* eyebrow: 모노, 얇게 */
  html[data-theme="light"] .panel-eyebrow.svelte-uox1oc {
    color: var(--text-faint) !important;
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.2rem;
    font-family: var(--font-display);
  }

  /* 섹션 헤드 */
  html[data-theme="light"] .section-head.svelte-uox1oc {
    align-items: center;
    gap: 0.75rem;
  }
  html[data-theme="light"] .section-head.svelte-uox1oc h3:where(.svelte-uox1oc) {
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0;
  }
  html[data-theme="light"] .section-block.svelte-uox1oc {
    gap: 0.7rem;
  }

  /* 서브섹션 헤드 */
  html[data-theme="light"] .subsection-head.svelte-uox1oc strong:where(.svelte-uox1oc) {
    font-size: 0.82rem;
    font-weight: 500;
  }
  html[data-theme="light"] .sub-hint.svelte-uox1oc {
    font-size: 0.74rem;
    color: var(--text-faint);
  }

  /* 사이드 메뉴 타이틀(MENU eyebrow) */
  html[data-theme="light"] .menu.svelte-uox1oc .panel-eyebrow:where(.svelte-uox1oc) {
    font-size: 0.64rem;
    margin-bottom: 0.35rem;
  }

  /* 사이드 메뉴 탭 버튼 */
  html[data-theme="light"] .menu-tabs.svelte-uox1oc {
    gap: 0.15rem;
  }
  html[data-theme="light"] .menu-tabs.svelte-uox1oc button:where(.svelte-uox1oc) {
    min-height: 2.1rem;
    padding: 0 0.7rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-soft);
    letter-spacing: 0;
  }
  html[data-theme="light"] .menu-tabs.svelte-uox1oc button:where(.svelte-uox1oc):hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text);
  }
  html[data-theme="light"] .menu-tabs.svelte-uox1oc button.active:where(.svelte-uox1oc) {
    background: rgba(0, 0, 0, 0.05);
    border-color: transparent;
    color: var(--text);
    font-weight: 500;
  }

  /* 동기화 상태 카드 — 블루 틴트 제거, 평범한 라인 박스 */
  html[data-theme="light"] .sync-card.svelte-uox1oc {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.8rem;
  }
  html[data-theme="light"] .sync-card.svelte-uox1oc strong:where(.svelte-uox1oc) {
    font-size: 0.78rem;
    font-weight: 500;
  }
  html[data-theme="light"] .sync-card.svelte-uox1oc span:where(.svelte-uox1oc) {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-weight: 400;
  }

  /* 카드들 (account-card / profile-card / rule-card / sync-item) */
  html[data-theme="light"] .account-card.svelte-uox1oc,
  html[data-theme="light"] .profile-card.svelte-uox1oc,
  html[data-theme="light"] .rule-card.svelte-uox1oc,
  html[data-theme="light"] .sync-item.svelte-uox1oc {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: none;
  }
  html[data-theme="light"] .profile-card.worker.svelte-uox1oc {
    background: var(--surface);
  }

  /* 프로필 요약 카드 */
  html[data-theme="light"] .profile-summary-copy.svelte-uox1oc strong:where(.svelte-uox1oc) {
    font-size: 0.92rem;
    font-weight: 500;
  }
  html[data-theme="light"] .profile-summary-copy.svelte-uox1oc span:where(.svelte-uox1oc) {
    font-size: 0.76rem;
    color: var(--text-faint);
  }
  html[data-theme="light"] .profile-avatar.svelte-uox1oc {
    width: 3.6rem;
    height: 3.6rem;
    font-size: 1.1rem;
    font-weight: 500;
    box-shadow: none;
  }

  /* 라벨 span (이름/역할 설명 등) */
  html[data-theme="light"] label.svelte-uox1oc span:where(.svelte-uox1oc) {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-faint);
    letter-spacing: 0;
  }

  /* 프로필 칩 (1번 자비스 / 2번 자비스) 알약 → 얇은 라인 칩 */
  html[data-theme="light"] .profile-chip.svelte-uox1oc {
    background: transparent !important;
    color: var(--text-soft) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-weight: 400;
    font-size: 0.72rem;
    min-height: 1.55rem;
    padding: 0 0.5rem;
  }

  /* 연결 칩 (연결됨) */
  html[data-theme="light"] .connection-pill.svelte-uox1oc {
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-weight: 400;
    font-size: 0.74rem;
    min-height: 1.7rem;
    padding: 0 0.55rem;
  }
  html[data-theme="light"] .connection-pill.connected-pill.svelte-uox1oc {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 24%, var(--line));
    background: transparent;
  }

  /* 색상 프리셋 래퍼 */
  html[data-theme="light"] .color-presets-wrap.svelte-uox1oc {
    background: transparent;
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.7rem;
  }
  html[data-theme="light"] .color-presets-wrap.svelte-uox1oc span:where(.svelte-uox1oc) {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-faint);
  }
  html[data-theme="light"] .color-swatch.svelte-uox1oc {
    width: 1.5rem;
    height: 1.5rem;
    box-shadow: none;
    border-width: 1px;
  }

  /* input/textarea/select — 글로벌 룰에 더해 폰트 크기 톤다운 */
  html[data-theme="light"] input.svelte-uox1oc,
  html[data-theme="light"] textarea.svelte-uox1oc,
  html[data-theme="light"] select.svelte-uox1oc {
    padding: 0.55rem 0.7rem;
    font-size: 0.84rem;
  }

  /* 빌더 사이드/메뉴 작은 텍스트 */
  html[data-theme="light"] .builder-side-kind.svelte-uox1oc {
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text-faint);
  }
  html[data-theme="light"] .builder-side-head.svelte-uox1oc strong:where(.svelte-uox1oc),
  html[data-theme="light"] .builder-side-accordion-trigger.svelte-uox1oc strong:where(.svelte-uox1oc) {
    font-size: 0.78rem;
    font-weight: 500;
  }
  html[data-theme="light"] .builder-side-head.svelte-uox1oc span:where(.svelte-uox1oc) {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 0.72rem;
  }
  html[data-theme="light"] .builder-side-item.svelte-uox1oc {
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 0.55rem 0.65rem;
  }
  html[data-theme="light"] .builder-side-item.active.svelte-uox1oc {
    border-color: var(--line-strong);
    background: rgba(0, 0, 0, 0.035);
  }

  /* h4 (카드 내부 타이틀) */
  html[data-theme="light"] .settings-page.svelte-uox1oc h4:where(.svelte-uox1oc) {
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0;
  }

  /* 중간 헤더(workspace / section-head)의 버튼 톤 다운 — 대쉬보드와 동일한 스케일 */
  html[data-theme="light"] .section-head.svelte-uox1oc .actions:where(.svelte-uox1oc),
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc .actions:where(.svelte-uox1oc) {
    gap: 0.4rem;
  }
  html[data-theme="light"] .section-head.svelte-uox1oc .primary:where(.svelte-uox1oc),
  html[data-theme="light"] .section-head.svelte-uox1oc .secondary:where(.svelte-uox1oc),
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc .primary:where(.svelte-uox1oc),
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc .secondary:where(.svelte-uox1oc) {
    min-height: 2rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0;
    box-shadow: none;
    background-image: none;
  }
  html[data-theme="light"] .section-head.svelte-uox1oc .primary:where(.svelte-uox1oc),
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc .primary:where(.svelte-uox1oc) {
    background: var(--text);
    color: #ffffff;
    border: 1px solid var(--text);
  }
  html[data-theme="light"] .section-head.svelte-uox1oc .primary:where(.svelte-uox1oc):hover:not(:disabled),
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc .primary:where(.svelte-uox1oc):hover:not(:disabled) {
    background: #000000;
    border-color: #000000;
    opacity: 1;
  }
  html[data-theme="light"] .section-head.svelte-uox1oc .secondary:where(.svelte-uox1oc),
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc .secondary:where(.svelte-uox1oc) {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-soft);
  }
  html[data-theme="light"] .section-head.svelte-uox1oc .secondary.muted:where(.svelte-uox1oc),
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc .secondary.muted:where(.svelte-uox1oc) {
    background: rgba(0, 0, 0, 0.025);
  }
  html[data-theme="light"] .section-head.svelte-uox1oc .secondary:where(.svelte-uox1oc):hover:not(:disabled),
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc .secondary:where(.svelte-uox1oc):hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text);
    border-color: var(--line-strong);
  }
  /* workspace 타이틀(워크스페이스 이름)도 일반모드 스케일로 */
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc h3:where(.svelte-uox1oc) {
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    margin: 0;
  }
  html[data-theme="light"] .builder-head-panel.svelte-uox1oc .panel-eyebrow:where(.svelte-uox1oc) {
    font-size: 0.62rem;
  }

  /* Alert/Success 블록도 얇은 라인으로 */
  html[data-theme="light"] .alert.svelte-uox1oc {
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
  }
  html[data-theme="light"] .success.svelte-uox1oc {
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    border-radius: var(--radius-sm);
  }

  .rail.svelte-195nb5v {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    padding: 0.7rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .rail-head.svelte-195nb5v {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.2rem;
  }
  .rail-home.svelte-195nb5v {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 0.84rem;
    min-width: 0;
  }
  .rail-home.active.svelte-195nb5v { background: rgba(0,0,0,0.04); }
  .rail-home-dot.svelte-195nb5v {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--text-soft);
    flex-shrink: 0;
  }
  .collapse-btn.svelte-195nb5v {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid var(--line);
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
  }
  .collapse-btn.svelte-195nb5v:hover {
    color: var(--text);
    border-color: var(--line-strong);
    background: rgba(0, 0, 0, 0.035);
  }

  /* === Collapsed 뷰 === */
  .rail.collapsed.svelte-195nb5v {
    padding: 0.7rem 0.35rem;
    align-items: stretch;
  }
  .rail.collapsed.svelte-195nb5v .rail-head:where(.svelte-195nb5v) {
    flex-direction: column;
    gap: 0.25rem;
  }
  .rail.collapsed.svelte-195nb5v .rail-home:where(.svelte-195nb5v) {
    justify-content: center;
    padding: 0.35rem;
    width: 100%;
  }
  .mini-list.svelte-195nb5v {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.2rem;
  }
  .mini-list.svelte-195nb5v a:where(.svelte-195nb5v) {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 2.1rem;
    padding: 0.3rem 0.2rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
  }
  .mini-list.svelte-195nb5v a:where(.svelte-195nb5v):hover { background: rgba(0, 0, 0, 0.035); }
  .mini-list.svelte-195nb5v a.active:where(.svelte-195nb5v) {
    background: rgba(0, 0, 0, 0.06);
    font-weight: 500;
  }
  .mini-list.svelte-195nb5v .dot.mini:where(.svelte-195nb5v) {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    width: 0.4rem;
    height: 0.4rem;
  }
  .mini-list.svelte-195nb5v .badge:where(.svelte-195nb5v),
  .mini-list.svelte-195nb5v .avatar:where(.svelte-195nb5v) {
    width: 1.45rem;
    height: 1.45rem;
    font-size: 0.68rem;
  }
  .mini-sep.svelte-195nb5v {
    height: 1px;
    background: var(--line);
    margin: 0.2rem 0.3rem;
    list-style: none;
  }
  .rail-alert.svelte-195nb5v {
    margin: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--danger-soft-border);
    border-radius: var(--radius-sm);
    background: var(--danger-soft-bg);
    color: var(--danger);
    font-size: 0.74rem;
  }
  .group.svelte-195nb5v { display: grid; gap: 0.2rem; }
  .group-head-row.svelte-195nb5v {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding-right: 0.35rem;
  }
  .group-head.svelte-195nb5v {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.4rem;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    cursor: pointer;
  }
  .group-head.svelte-195nb5v:hover { color: var(--text); }
  .caret.svelte-195nb5v { font-size: 0.6rem; color: var(--text-faint); width: 0.7rem; text-align: center; }
  .count.svelte-195nb5v {
    margin-left: auto;
    color: var(--text-faint);
    font-weight: 400;
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
  }
  /* (unused) .count.tiny { font-size: 0.66rem; }*/
  .head-action.svelte-195nb5v {
    margin-left: 0.25rem;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 1px solid var(--line);
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
  }
  .head-action.svelte-195nb5v:hover { color: var(--text); border-color: var(--line-strong); }
  .entries.svelte-195nb5v { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.05rem; }
  .entries.svelte-195nb5v a:where(.svelte-195nb5v) {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 0.8rem;
    line-height: 1.3;
    overflow: hidden;
  }
  .entries.svelte-195nb5v a:where(.svelte-195nb5v):hover { background: rgba(0,0,0,0.035); }
  .entries.svelte-195nb5v a.active:where(.svelte-195nb5v) {
    background: rgba(0,0,0,0.06);
    color: var(--text);
    font-weight: 500;
  }
  .entries.svelte-195nb5v a.add-link:where(.svelte-195nb5v) {
    color: var(--text-faint);
    font-size: 0.74rem;
  }
  .entry-name.svelte-195nb5v {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dot.svelte-195nb5v {
    width: 0.45rem; height: 0.45rem; border-radius: 50%;
    background: var(--line-strong); flex-shrink: 0;
  }
  /* (unused) .dot.on { background: var(--success, #22c55e); }*/
  /* (unused) .dot.off { background: var(--text-faint); }*/
  .badge.svelte-195nb5v {
    display: inline-grid;
    place-items: center;
    width: 1rem; height: 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text-faint);
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
  }
  .badge[data-type="jarvis_hq"].svelte-195nb5v::after { content: "J"; }
  .badge[data-type="team_lobby"].svelte-195nb5v::after { content: "T"; }
  .badge[data-type="assistant"].svelte-195nb5v::after { content: "A"; }
  .group-badge.svelte-195nb5v::after { content: ""; }
  .avatar.svelte-195nb5v {
    display: inline-grid;
    place-items: center;
    width: 1.3rem; height: 1.3rem;
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--text-soft);
    font-size: 0.65rem;
    overflow: hidden;
    flex-shrink: 0;
  }
  .avatar.svelte-195nb5v img:where(.svelte-195nb5v) { width: 100%; height: 100%; object-fit: cover; display: block; }
  .avatar.small.svelte-195nb5v { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }

  /* === Presence (접속 멤버 미리보기, 사이드바 우측) === */
  .presence.svelte-195nb5v {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding-left: 0.3rem;
    flex-shrink: 0;
  }
  .presence-avatar.svelte-195nb5v {
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: -0.3rem;
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--text-soft);
    border: 1.5px solid var(--surface);
    font-size: 0.55rem;
    overflow: hidden;
    line-height: 1;
  }
  .presence-avatar.svelte-195nb5v:first-child { margin-left: 0; }
  .presence-avatar.svelte-195nb5v img:where(.svelte-195nb5v) { width: 100%; height: 100%; object-fit: cover; display: block; }
  .presence-avatar-fallback.svelte-195nb5v { font-weight: 600; letter-spacing: 0; }
  .presence-more.svelte-195nb5v {
    background: var(--surface-muted);
    color: var(--text-faint);
    font-size: 0.56rem;
    font-weight: 600;
  }

  /* === Dialog (DM/group picker) === */
  .dialog.svelte-195nb5v {
    position: absolute;
    inset: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 0.4rem;
    padding: 0.55rem;
    z-index: 5;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.08));
  }
  .dialog.svelte-195nb5v header:where(.svelte-195nb5v) {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0.2rem;
  }
  .dialog.svelte-195nb5v .x:where(.svelte-195nb5v) {
    border: 0;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
  }
  .dialog-search.svelte-195nb5v {
    width: 100%; box-sizing: border-box;
    min-height: 1.85rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--input-bg, var(--surface));
    color: var(--text);
    font-size: 0.8rem;
  }
  .dialog-hint.svelte-195nb5v {
    margin: 0;
    color: var(--text-faint);
    font-size: 0.7rem;
    padding: 0 0.2rem;
  }
  .user-list.svelte-195nb5v {
    list-style: none; margin: 0; padding: 0;
    overflow: auto;
    display: grid; gap: 0.15rem;
    border-top: 1px solid var(--line);
    padding-top: 0.3rem;
  }
  .user-list.svelte-195nb5v li:where(.svelte-195nb5v) button:where(.svelte-195nb5v) {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    text-align: left;
    font-size: 0.78rem;
    cursor: pointer;
  }
  .user-list.svelte-195nb5v li:where(.svelte-195nb5v) button:where(.svelte-195nb5v):hover { background: rgba(0,0,0,0.035); }
  .user-list.svelte-195nb5v li:where(.svelte-195nb5v) button.selected:where(.svelte-195nb5v) { background: rgba(0,0,0,0.06); border-color: var(--line); }
  .user-list.svelte-195nb5v li:where(.svelte-195nb5v) button:where(.svelte-195nb5v):disabled { opacity: 0.5; cursor: not-allowed; }
  .user-list.svelte-195nb5v li.empty:where(.svelte-195nb5v) {
    padding: 0.6rem; color: var(--text-faint); font-size: 0.78rem; text-align: center;
  }
  .user-info.svelte-195nb5v { flex: 1; display: grid; gap: 0.05rem; min-width: 0; }
  .user-info.svelte-195nb5v strong:where(.svelte-195nb5v) { font-size: 0.78rem; font-weight: 500; }
  .user-info.svelte-195nb5v small:where(.svelte-195nb5v) {
    color: var(--text-faint);
    font-size: 0.66rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .check.svelte-195nb5v { color: var(--text); font-weight: 600; }
  .dialog.svelte-195nb5v footer:where(.svelte-195nb5v) { display: flex; justify-content: flex-end; }
  .dialog.svelte-195nb5v .primary:where(.svelte-195nb5v) {
    min-height: 1.85rem;
    padding: 0 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.78rem;
    cursor: pointer;
  }
  .dialog.svelte-195nb5v .primary:where(.svelte-195nb5v):disabled { opacity: 0.5; cursor: not-allowed; }

  .shell.svelte-1n46o8q {
    width: min(calc(100% - 2rem), var(--container));
    margin: 0 auto;
    padding: 1.5rem 0 2.5rem;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* 설정: 본문이 뷰포트 높이를 채우고, 하단 여백 5px만 두기 */
  .shell.shell-settings.svelte-1n46o8q {
    padding-bottom: 5px;
  }
  .shell.shell-settings.svelte-1n46o8q > .content:where(.svelte-1n46o8q) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .shell.room-wide.svelte-1n46o8q {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1.5rem 0 0;
  }
  .shell.room-wide.svelte-1n46o8q > .content:where(.svelte-1n46o8q) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* 룸·와이드 레이아웃: 일반 페이지 .shell 과 동일한 최대 너비(헤더·알림·본문 정렬) */
  .room-wide-content.svelte-1n46o8q,
  .shell.room-wide.svelte-1n46o8q .top:where(.svelte-1n46o8q) {
    width: min(calc(100% - 2rem), var(--container));
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .room-wide-content.svelte-1n46o8q {
    overflow-x: hidden;
  }
  .loading-screen.svelte-1n46o8q {
    display: grid;
    place-items: center;
    gap: 1rem;
    min-height: 60vh;
    color: var(--text-soft);
  }
  .loading-screen.svelte-1n46o8q p:where(.svelte-1n46o8q) {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-soft);
  }
  .spin.svelte-1n46o8q {
    animation: svelte-1n46o8q-spin 1.2s ease-in-out infinite;
  }
  @keyframes svelte-1n46o8q-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* ===== HUD 프레임: 헤더 ===== */
  .top.svelte-1n46o8q {
    position: relative;
    /* 드롭다운이 본문/카드 위로 확실히 올라오도록 z-index 를 충분히 높게 잡는다 */
    z-index: 1000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0) 35%),
      var(--surface-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* 드롭다운 메뉴가 헤더 밖으로 펼쳐지므로 overflow 를 visible 로 둔다 (기존 hidden 이면 drop 메뉴가 잘림) */
    overflow: visible;
  }
  /* HUD 코너 브라켓 */
  .hud-frame.svelte-1n46o8q::before,
  .hud-frame.svelte-1n46o8q::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid var(--cyan);
    box-shadow: 0 0 6px var(--cyan-glow);
    pointer-events: none;
    opacity: 0.85;
  }
  .hud-frame.svelte-1n46o8q::before {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: var(--radius-lg);
  }
  .hud-frame.svelte-1n46o8q::after {
    bottom: 0;
    right: 0;
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: var(--radius-lg);
  }
  /* 스캔 바 — 헤더 하단에 흐르는 얇은 시안 라인 */
  .top.svelte-1n46o8q > nav {
    position: relative;
  }
  .top.svelte-1n46o8q::before {
    /* 상단 그라디언트 글로우 */
    content: "";
    position: absolute;
    inset-inline: 10%;
    top: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--cyan) 50%,
      transparent
    );
    opacity: 0.6;
  }

  .user-menu.svelte-1n46o8q {
    position: relative;
    z-index: 110;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
  }
  .hud-clock.svelte-1n46o8q {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(6, 16, 32, 0.72);
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px var(--cyan-glow);
  }
  html[data-theme="light"] .hud-clock.svelte-1n46o8q {
    background: rgba(255, 255, 255, 0.8);
  }
  .user-badge.svelte-1n46o8q {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.2rem;
    padding: 0.2rem 0.6rem 0.2rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: rgba(6, 16, 32, 0.72);
    font-size: 0.78rem;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
  }
  html[data-theme="light"] .user-badge.svelte-1n46o8q {
    background: rgba(255, 255, 255, 0.92);
  }
  .user-badge.open.svelte-1n46o8q,
  .user-badge.svelte-1n46o8q:hover {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
  }
  .user-name.svelte-1n46o8q {
    color: var(--text);
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .user-caret.svelte-1n46o8q {
    display: inline-flex;
    align-items: center;
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 700;
  }
  .user-dropdown.svelte-1n46o8q {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 1200;
    display: grid;
    gap: 0.6rem;
    min-width: 220px;
    padding: 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-overlay-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-md), var(--glow-sm);
  }
  .menu-item.svelte-1n46o8q {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 2.4rem;
    padding: 0 0.85rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  }
  .menu-item.svelte-1n46o8q:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--line-strong);
    color: var(--text);
    box-shadow: none;
  }
  .menu-item.danger.svelte-1n46o8q {
    background: rgba(248, 113, 113, 0.08);
    color: var(--danger);
  }
  .menu-item.danger.svelte-1n46o8q:hover {
    background: rgba(248, 113, 113, 0.16);
    border-color: var(--danger-soft-border);
    box-shadow: 0 0 14px rgba(248, 113, 113, 0.3);
    color: var(--danger);
  }
  .menu-group.svelte-1n46o8q {
    display: grid;
    gap: 0.45rem;
  }
  .menu-label.svelte-1n46o8q {
    padding: 0 0.2rem;
    color: var(--text-faint);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--font-mono);
  }
  .theme-switch.svelte-1n46o8q {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .theme-switch.svelte-1n46o8q button:where(.svelte-1n46o8q) {
    min-height: 2.3rem;
    padding: 0 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-soft);
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: all 140ms ease;
  }
  html[data-theme="light"] .theme-switch.svelte-1n46o8q button:where(.svelte-1n46o8q) {
    background: var(--surface-muted);
  }
  .theme-switch.svelte-1n46o8q button.active:where(.svelte-1n46o8q) {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--line-strong);
    color: var(--text);
    box-shadow: none;
  }
  .brand.svelte-1n46o8q {
    display: grid;
    gap: 0.2rem;
    justify-self: start;
  }
  .brand-link.svelte-1n46o8q {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
  }
  .brand-text.svelte-1n46o8q {
    display: grid;
    gap: 0.1rem;
  }
  .brand-mark.svelte-1n46o8q {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.12), inset 0 0 10px rgba(255, 255, 255, 0.06);
  }
  .hud-mark.svelte-1n46o8q {
    position: relative;
    overflow: visible;
    border: 1px solid var(--primary);
  }
  /* (unused) .hud-mark .mark-glyph {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    text-shadow: 0 0 10px var(--cyan-glow);
  }*/
  .hud-mark.svelte-1n46o8q .mark-ring:where(.svelte-1n46o8q) {
    position: absolute;
    inset: -5px;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    animation: svelte-1n46o8q-hud-ring-spin 10s linear infinite;
    opacity: 0.6;
  }
  @keyframes svelte-1n46o8q-hud-ring-spin {
    to { transform: rotate(360deg); }
  }
  .eyebrow.svelte-1n46o8q {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.15rem;
    color: var(--cyan);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .status-dot.svelte-1n46o8q {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.85);
    animation: svelte-1n46o8q-hud-blink 1.6s ease-in-out infinite;
  }
  @keyframes svelte-1n46o8q-hud-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }
  h1.svelte-1n46o8q {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.16em;
    color: var(--text);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
  }
  .top-tabs.svelte-1n46o8q {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    padding: 0.3rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(6, 16, 32, 0.55);
    backdrop-filter: blur(6px);
  }
  html[data-theme="light"] .top-tabs.svelte-1n46o8q {
    background: rgba(255, 255, 255, 0.6);
  }
  .top-tabs.svelte-1n46o8q a:where(.svelte-1n46o8q) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0 1.05rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    transition:
      color 160ms ease,
      background 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }
  .top-tabs.svelte-1n46o8q a:where(.svelte-1n46o8q):hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
  }
  .top-tabs.svelte-1n46o8q a.active:where(.svelte-1n46o8q) {
    color: #0a0d12;
    background: linear-gradient(135deg, #e5e7eb, #a3a8b2);
    border-color: var(--line-strong);
    box-shadow: var(--glow-sm);
    text-shadow: none;
  }
  html[data-theme="light"] .top-tabs.svelte-1n46o8q a.active:where(.svelte-1n46o8q) {
    color: #fff;
  }
  .tab-label.svelte-1n46o8q {
    font-weight: 700;
  }
  .auth-alert.svelte-1n46o8q {
    margin: 0 0 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--danger-soft-border);
    border-radius: var(--radius-md);
    background: var(--danger-soft-bg);
    color: var(--danger);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .content.svelte-1n46o8q {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .room-with-sidebar.svelte-1n46o8q {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr);
    /* 행 높이를 1fr 로 묶어 패널들이 부모 높이를 절대 넘기지 않도록 한다.
       (이게 없으면 grid 행이 auto 라 컨텐츠가 길어질수록 페이지 전체가 늘어남) */
    grid-template-rows: minmax(0, 1fr);
    gap: 0.7rem;
    min-width: 0;
    overflow: hidden;
    transition: grid-template-columns 0.18s ease;
  }
  /* 사이드바 접힘: 좁은 고정 너비(아이콘 전용) */
  .content.sidebar-collapsed.svelte-1n46o8q .room-with-sidebar:where(.svelte-1n46o8q) {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .rail-col.svelte-1n46o8q {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }
  .main-col.svelte-1n46o8q {
    min-height: 0;
    min-width: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
  }
  /* 룸에서는 채팅/문서 패널이 자체 스크롤을 가지므로 main-col 스크롤을 끈다. */
  .content.room-wide-content.svelte-1n46o8q .main-col:where(.svelte-1n46o8q) {
    overflow: hidden;
  }
  .room-with-sidebar.svelte-1n46o8q > * {
    min-height: 0;
    min-width: 0;
  }
  @media (max-width: 960px) {
    .room-with-sidebar.svelte-1n46o8q {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, auto) minmax(0, 1fr);
    }
    .content.sidebar-collapsed.svelte-1n46o8q .room-with-sidebar:where(.svelte-1n46o8q) {
      grid-template-columns: 1fr;
    }
    .rail-col.svelte-1n46o8q {
      max-height: 200px;
    }
  }

  @media (max-width: 880px) {
    .top.svelte-1n46o8q {
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    .top-tabs.svelte-1n46o8q,
    .user-menu.svelte-1n46o8q,
    .brand.svelte-1n46o8q {
      justify-self: stretch;
    }
    .top-tabs.svelte-1n46o8q {
      justify-content: flex-start;
    }
    .user-menu.svelte-1n46o8q {
      justify-self: end;
    }
  }

  @media (max-width: 640px) {
    .shell.svelte-1n46o8q {
      width: min(calc(100% - 1rem), var(--container));
      padding-top: 0.75rem;
      padding-bottom: 1.5rem;
    }
    .shell.room-wide.svelte-1n46o8q {
      width: 100%;
      padding: 0.75rem 0 0;
    }
    .room-wide-content.svelte-1n46o8q,
    .shell.room-wide.svelte-1n46o8q .top:where(.svelte-1n46o8q) {
      width: min(calc(100% - 1rem), var(--container));
    }
    .top.svelte-1n46o8q {
      padding: 0.85rem;
      border-radius: var(--radius-lg);
    }
    .top-tabs.svelte-1n46o8q {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .user-menu.svelte-1n46o8q {
      align-self: flex-end;
    }
    .user-dropdown.svelte-1n46o8q {
      width: min(88vw, 260px);
    }
  }

  /* =====================================================================
   * 일반 모드(light) 전용 재설계 — 헤더/브랜드/네비/드롭다운
   *   - HUD 장식(코너 브라켓, 스캔 라인, 회전 링, 글로우) 전부 비활성
   *   - 플랫 · 얇은 폰트 · 미니멀 라인
   * ===================================================================== */
  html[data-theme="light"] .top.svelte-1n46o8q {
    border: 1px solid var(--line);
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-md);
  }
  html[data-theme="light"] .hud-frame.svelte-1n46o8q::before,
  html[data-theme="light"] .hud-frame.svelte-1n46o8q::after {
    display: none;
    content: none;
  }
  html[data-theme="light"] .top.svelte-1n46o8q::before {
    display: none;
    content: none;
  }

  /* 브랜드 워드마크 — 얇은 소문자 "jarvis", 단독. 장식/칩/링 없음 */
  html[data-theme="light"] .brand-link.svelte-1n46o8q {
    gap: 0;
  }
  html[data-theme="light"] .brand-wordmark.svelte-1n46o8q {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--text);
    margin: 0;
    line-height: 1;
    text-shadow: none;
  }

  /* 브랜드 타이틀(다크에서 쓰던 h1)은 라이트에선 brand-wordmark로 대체되어 노출 X */
  html[data-theme="light"] h1.svelte-1n46o8q {
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0;
    text-shadow: none;
  }

  /* HUD 시계 — 아주 담백하게 (라인만) */
  html[data-theme="light"] .hud-clock.svelte-1n46o8q {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-faint);
    font-weight: 400;
    text-shadow: none;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
  }

  /* 네비 탭 컨테이너 — 라인/배경 모두 제거, 탭끼리 간격만 */
  html[data-theme="light"] .top-tabs.svelte-1n46o8q {
    background: transparent;
    border: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    gap: 0.1rem;
  }
  html[data-theme="light"] .top-tabs.svelte-1n46o8q a:where(.svelte-1n46o8q) {
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0;
    color: var(--text-soft);
    min-height: 1.6rem;
    padding: 0 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    box-shadow: none;
  }
  html[data-theme="light"] .top-tabs.svelte-1n46o8q a:where(.svelte-1n46o8q)::before,
  html[data-theme="light"] .top-tabs.svelte-1n46o8q a:where(.svelte-1n46o8q)::after {
    display: none !important;
    content: none !important;
  }
  html[data-theme="light"] .top-tabs.svelte-1n46o8q a:where(.svelte-1n46o8q):hover {
    background: rgba(0, 0, 0, 0.035);
    color: var(--text);
    border-color: transparent;
  }
  html[data-theme="light"] .top-tabs.svelte-1n46o8q a.active:where(.svelte-1n46o8q) {
    background: rgba(0, 0, 0, 0.045);
    border-color: transparent;
    color: var(--text);
    box-shadow: none;
    text-shadow: none;
    font-weight: 500;
  }
  html[data-theme="light"] .tab-label.svelte-1n46o8q {
    font-weight: inherit;
  }

  /* 유저 배지 — 라인만, 완전 플랫 */
  html[data-theme="light"] .user-badge.svelte-1n46o8q {
    background: transparent;
    border: 1px solid var(--line);
    font-weight: 400;
    box-shadow: none;
    border-radius: var(--radius-sm);
  }
  html[data-theme="light"] .user-badge.open.svelte-1n46o8q,
  html[data-theme="light"] .user-badge.svelte-1n46o8q:hover {
    border-color: var(--line-strong);
    background: rgba(0, 0, 0, 0.025);
    box-shadow: none;
  }
  html[data-theme="light"] .user-name.svelte-1n46o8q {
    font-weight: 400;
  }
  html[data-theme="light"] .user-caret.svelte-1n46o8q {
    color: var(--text-faint);
    font-weight: 400;
  }
  html[data-theme="light"] .user-dropdown.svelte-1n46o8q {
    background: #ffffff;
    border: 1px solid var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: var(--radius-md);
    padding: 0.4rem;
    gap: 0.1rem;
    min-width: 180px;
  }
  html[data-theme="light"] .menu-item.svelte-1n46o8q {
    background: transparent;
    color: var(--text);
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0;
    border-color: transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
    min-height: 1.85rem;
    padding: 0 0.5rem;
  }
  html[data-theme="light"] .menu-item.svelte-1n46o8q:hover {
    background: rgba(0, 0, 0, 0.035);
    border-color: transparent;
    color: var(--text);
    box-shadow: none;
  }
  html[data-theme="light"] .menu-item.danger.svelte-1n46o8q {
    background: transparent;
    color: var(--danger);
  }
  html[data-theme="light"] .menu-item.danger.svelte-1n46o8q:hover {
    background: rgba(220, 38, 38, 0.05);
    border-color: transparent;
    box-shadow: none;
  }
  html[data-theme="light"] .menu-label.svelte-1n46o8q {
    color: var(--text-faint);
    font-weight: 400;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    font-size: 0.62rem;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem 0.1rem;
  }
  html[data-theme="light"] .menu-group.svelte-1n46o8q {
    gap: 0.2rem;
  }

  /* 모드 스위치 — 심플 세그먼트, 그림자 없음 */
  html[data-theme="light"] .theme-switch.svelte-1n46o8q {
    box-shadow: none;
    gap: 0.25rem;
    padding: 0 0.35rem;
  }
  html[data-theme="light"] .theme-switch.svelte-1n46o8q button:where(.svelte-1n46o8q) {
    background: transparent;
    border-color: var(--line);
    color: var(--text-soft);
    font-weight: 400;
    font-size: 0.74rem;
    letter-spacing: 0;
    box-shadow: none;
    min-height: 1.7rem;
    padding: 0 0.4rem;
  }
  html[data-theme="light"] .theme-switch.svelte-1n46o8q button.active:where(.svelte-1n46o8q) {
    background: rgba(0, 0, 0, 0.045);
    border-color: var(--line-strong);
    color: var(--text);
    box-shadow: none;
    font-weight: 500;
  }

  /* 로딩 화면 — 톤 다운 */
  html[data-theme="light"] .loading-screen.svelte-1n46o8q p:where(.svelte-1n46o8q) {
    color: var(--text-faint);
    letter-spacing: 0.04em;
    text-transform: none;
    font-weight: 400;
  }
/* =========================================================================
 * J.A.R.V.I.S. — 다크 HUD 디자인 시스템
 *   - 기본 다크, 시안 글로우, 홀로 그리드 배경
 *   - 라이트는 `data-theme="light"` 에서 부드러운 버전으로 폴백
 * ========================================================================= */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.5;
  font-weight: 400;

  /* --- 배경/표면 --- */
  --bg-deep: #030712;
  --bg: #06101f;
  --bg-soft: #0a1a31;
  --bg-accent:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 62%),
    radial-gradient(ellipse 80% 40% at 85% 10%, rgba(255, 255, 255, 0.03), transparent 70%),
    radial-gradient(ellipse 60% 50% at 15% 110%, rgba(255, 255, 255, 0.04), transparent 70%);

  /* 홀로 그리드 패턴 (body 에 오버레이) — 모노 */
  --hud-grid:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 48px 48px;
  --hud-grid-fine:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 12px 12px;

  --surface: rgba(8, 22, 42, 0.62);
  --surface-strong: rgba(10, 28, 54, 0.88);
  --surface-muted: rgba(11, 27, 48, 0.7);
  --surface-soft: rgba(7, 18, 36, 0.72);
  --surface-overlay: rgba(10, 26, 50, 0.9);
  --surface-overlay-strong: rgba(12, 32, 60, 0.96);
  --surface-card: rgba(10, 24, 46, 0.78);
  --surface-card-strong: rgba(12, 32, 60, 0.92);
  --surface-card-tint: linear-gradient(
    180deg,
    rgba(10, 28, 54, 0.92),
    rgba(7, 18, 36, 0.88)
  );
  --surface-chat-log: linear-gradient(
    180deg,
    rgba(6, 16, 32, 0.9),
    rgba(10, 24, 46, 0.82)
  );
  --surface-accent: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(10, 18, 32, 0.9));
  --surface-assistant: rgba(255, 255, 255, 0.04);

  /* --- 입력 --- */
  --input-bg: rgba(8, 14, 26, 0.9);
  --input-disabled-bg: rgba(14, 22, 38, 0.6);
  --input-border: rgba(255, 255, 255, 0.12);

  /* --- 소프트 톤 (모노톤) --- */
  --primary-soft-bg: rgba(255, 255, 255, 0.05);
  --primary-soft-border: rgba(255, 255, 255, 0.18);
  --success-soft-bg: rgba(16, 185, 129, 0.1);
  --success-soft-border: rgba(52, 211, 153, 0.28);
  --danger-soft-bg: rgba(248, 113, 113, 0.1);
  --danger-soft-border: rgba(248, 113, 113, 0.28);
  --warning-soft-bg: rgba(251, 191, 36, 0.1);
  --warning-soft-border: rgba(251, 191, 36, 0.28);

  /* --- 버튼 --- */
  --button-secondary-bg: rgba(16, 22, 34, 0.78);
  --button-secondary-hover: rgba(255, 255, 255, 0.06);

  /* --- 텍스트 (뉴트럴 톤) --- */
  --text: #eaeef5;
  --text-soft: #a8b0bd;
  --text-faint: #6f7784;

  /* --- 라인/보더 (모노) --- */
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --line-glow: rgba(255, 255, 255, 0.32);

  /* --- 액센트 컬러 (모노톤) --- */
  --primary: #d8dee8;
  --primary-strong: #ffffff;
  --primary-soft: rgba(255, 255, 255, 0.12);
  --cyan: #d8dee8;
  --cyan-strong: #ffffff;
  --cyan-glow: rgba(255, 255, 255, 0.28);
  --amber: #fbbf24;
  --amber-glow: rgba(251, 191, 36, 0.5);
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;

  /* --- 글로우 계열 섀도우 (모노톤) --- */
  --shadow-sm:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md:
    0 20px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  --glow-sm: 0 0 12px rgba(255, 255, 255, 0.14);
  --glow-md: 0 0 26px rgba(255, 255, 255, 0.18);
  --glow-lg: 0 0 48px rgba(255, 255, 255, 0.22);
  --glow-amber: 0 0 22px rgba(251, 191, 36, 0.45);

  /* --- 라운드 (HUD 감성을 위해 전반적으로 샤프하게) --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* --- 앱 전역 최대 콘텐츠 너비 --- */
  --container: 1348px;

  /* --- 타이포 --- */
  --font-display: "Orbitron", "Inter", system-ui, sans-serif;
  --font-mono:
    "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Code",
    "Source Code Pro", monospace;
}

/* =========================================================================
 * 일반 모드 (라이트) — 모노크롬 · 얇음 · 완전 플랫
 *   - 채도 낮춘 중성 오프화이트 배경에 크리스프 화이트 카드
 *   - HUD 장식(그리드/스캔라인/코너 브라켓/글로우) 전부 제거
 *   - 섀도우/글로우/컬러 포인트 없음 — 오직 미묘한 그레이 라인만으로 구획
 *   - 폰트 Inter 단일, 얇게 + 작은 base size
 * ========================================================================= */
:root[data-theme="light"] {
  color-scheme: light;

  /* --- 배경/표면: 중성 오프화이트 (크림기 살짝만) --- */
  --bg-deep: #fafaf9;
  --bg: #f7f7f5;      /* 종이톤 베이스 — 채도 매우 낮음 */
  --bg-soft: #efefec; /* 살짝 진한 회색 패널 */
  --bg-accent: none;
  --hud-grid: none;
  --hud-grid-fine: none;

  --surface: #ffffff;
  --surface-strong: #ffffff;
  --surface-muted: #f1f1ee;
  --surface-soft: #f7f7f5;
  --surface-overlay: #ffffff;
  --surface-overlay-strong: #ffffff;
  --surface-card: #ffffff;
  --surface-card-strong: #ffffff;
  --surface-card-tint: #ffffff;
  --surface-chat-log: #fbfbfa;
  --surface-accent: #ffffff;
  --surface-assistant: rgba(0, 0, 0, 0.03);

  /* --- 입력 --- */
  --input-bg: #ffffff;
  --input-disabled-bg: #f1f1ee;
  --input-border: rgba(0, 0, 0, 0.1);

  /* --- 소프트 톤: 전부 중성 그레이로 통일 (모노크롬) --- */
  --primary-soft-bg: rgba(0, 0, 0, 0.04);
  --primary-soft-border: rgba(0, 0, 0, 0.1);
  --success-soft-bg: rgba(5, 150, 105, 0.06);
  --success-soft-border: rgba(5, 150, 105, 0.14);
  --danger-soft-bg: rgba(220, 38, 38, 0.05);
  --danger-soft-border: rgba(220, 38, 38, 0.14);
  --warning-soft-bg: rgba(217, 119, 6, 0.06);
  --warning-soft-border: rgba(217, 119, 6, 0.16);

  /* --- 버튼 --- */
  --button-secondary-bg: #ffffff;
  --button-secondary-hover: rgba(0, 0, 0, 0.04);

  /* --- 텍스트: 완전 블랙 X, 아주 살짝 낮춘 차콜 --- */
  --text: #2a2a2a;       /* 주 텍스트 */
  --text-soft: #6b6b6b;  /* 보조 */
  --text-faint: #a3a3a3; /* 힌트 */

  /* --- 라인: 진짜 얇게, 거의 안보일 정도로 --- */
  --line: rgba(0, 0, 0, 0.05);
  --line-strong: rgba(0, 0, 0, 0.08);
  --line-glow: rgba(0, 0, 0, 0.12);

  /* --- 액센트: 블루 제거, 모노크롬 차콜 --- */
  --primary: #2a2a2a;
  --primary-strong: #000000;
  --primary-soft: rgba(0, 0, 0, 0.06);
  --cyan: #2a2a2a;
  --cyan-strong: #000000;
  --cyan-glow: rgba(0, 0, 0, 0);
  --amber: #2a2a2a;
  --amber-glow: rgba(0, 0, 0, 0);
  --success: #2a2a2a;
  --warning: #2a2a2a;
  --danger: #b91c1c; /* 경고만 살짝 붉게 남겨둠 (의미 유지) */

  /* --- 섀도우/글로우: 완전 0 — 플랫 --- */
  --shadow-sm: none;
  --shadow-md: none;
  --glow-sm: none;
  --glow-md: none;
  --glow-lg: none;
  --glow-amber: none;

  /* --- 라운드: 아주 살짝만 --- */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 6px;

  /* --- 타이포: 두꺼운 Orbitron 제거, Inter 단일 --- */
  --font-display:
    "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Pretendard",
    system-ui, sans-serif;
  --font-mono:
    "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Code",
    "Source Code Pro", monospace;
}

* {
  box-sizing: border-box;
}

html {
  background:
    var(--bg-accent),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 38%, var(--bg-deep) 100%);
}

/* 일반모드: 장식적인 배경 그라디언트 전부 제거 — 종이 한 장의 느낌 */
html[data-theme="light"] {
  background: var(--bg);
  /* 더 작고 얇은 느낌을 위해 base size 14px */
  font-size: 14px;
}

/* 일반모드에서는 HUD 그리드/스캔라인 오버레이를 완전히 숨김 */
html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* 일반모드 — 디스플레이/모노 폰트 전부 얇고 tracking 없이 */
html[data-theme="light"] .font-display {
  letter-spacing: 0;
  font-weight: 400;
}
html[data-theme="light"] .font-mono {
  letter-spacing: 0;
  font-weight: 400;
}

/* 헤딩/스트롱 — 얇고 살짝 작게 */
html[data-theme="light"] h1 { font-weight: 500; letter-spacing: -0.01em; }
html[data-theme="light"] h2 { font-weight: 500; letter-spacing: -0.005em; }
html[data-theme="light"] h3 { font-weight: 500; }
html[data-theme="light"] h4 { font-weight: 500; }
html[data-theme="light"] strong {
  font-weight: 500;
}

/* 일반모드 — 모든 곳의 box-shadow/filter 글로우 제거 (완전 플랫 보장) */
html[data-theme="light"] * {
  box-shadow: none !important;
}

/* 일반모드 스크롤바 — 중성 그레이 */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.14);
  border: 2px solid transparent;
  background-clip: padding-box;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.24);
  background-clip: padding-box;
}
html[data-theme="light"] * {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* 일반모드 선택영역 — 중성 회색 하이라이트 */
html[data-theme="light"] ::selection {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}

/* 일반모드 포커스링 — 얇은 다크 outline (글로우 없이) */
html[data-theme="light"] :focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* 일반모드 input 포커스 — 얇은 다크 라인만 */
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: var(--text) !important;
  box-shadow: none !important;
}

/* =========================================================================
 * 일반모드 — 모든 페이지 공통 정책 (Dashboard 톤을 글로벌로 통일)
 *   - 모든 .card/.panel/.surface 류 → 평면 흰 표면 + 얇은 라인 + 작은 라운드
 *   - 모든 button → 라인만 있는 모노크롬 (primary는 차콜 솔리드)
 *   - 모든 .badge / .chip / .tag → 투명 배경 + 얇은 라인
 *   - 모든 input/textarea/select → 얇은 라인, 흰 배경
 *   - 두꺼운 weight / 큰 size / uppercase / letter-spacing 전부 톤다운
 *   - 그라디언트 배경/장식 차단
 * ======================================================================= */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .surface,
html[data-theme="light"] .box,
html[data-theme="light"] aside.menu,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .section-card,
html[data-theme="light"] .empty,
html[data-theme="light"] .pane {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  background-image: none !important;
}

html[data-theme="light"] button,
html[data-theme="light"] .btn,
html[data-theme="light"] a.btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-weight: 400;
  font-family: var(--font-display);
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  background-image: none !important;
}
html[data-theme="light"] button:hover:not(:disabled),
html[data-theme="light"] .btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.035);
  color: var(--text);
  transform: none !important;
}

/* primary 액션 버튼: 차콜 솔리드 (블루/그라디언트 제거) */
html[data-theme="light"] button.primary,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] button[type="submit"]:not(.secondary):not(.ghost):not(.outline) {
  background: var(--text);
  color: #ffffff;
  border-color: var(--text);
}
html[data-theme="light"] button.primary:hover:not(:disabled),
html[data-theme="light"] .btn.primary:hover:not(:disabled),
html[data-theme="light"] button[type="submit"]:not(.secondary):not(.ghost):not(.outline):hover:not(:disabled) {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* 위험 동작 버튼만 의미 보존 (붉은 톤은 살짝 남김) */
html[data-theme="light"] button.danger,
html[data-theme="light"] .btn.danger {
  background: transparent;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line-strong));
}
html[data-theme="light"] button.danger:hover:not(:disabled) {
  background: rgba(185, 28, 28, 0.06);
}

/* 배지/칩/태그류: 라인 칩으로 통일 */
html[data-theme="light"] .badge,
html[data-theme="light"] .chip,
html[data-theme="light"] .tag,
html[data-theme="light"] .pill,
html[data-theme="light"] .label-chip {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--text-soft) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius-sm) !important;
  background-image: none !important;
  text-shadow: none !important;
}

/* 입력 요소 통일 */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
}
html[data-theme="light"] ::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

/* 링크 — 기본 밑줄 없음 (구체적 컴포넌트가 자체 스타일 처리) */
html[data-theme="light"] a {
  color: var(--text);
}

/* hr / divider 류 */
html[data-theme="light"] hr {
  border: none;
  border-top: 1px solid var(--line);
}

/* 코드 블럭 / pre 톤다운 */
html[data-theme="light"] code,
html[data-theme="light"] pre {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* 본문 .eyebrow / .label 같은 얇은 캡션 — uppercase/굵음 해제 */
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .label,
html[data-theme="light"] .caption,
html[data-theme="light"] .section-eyebrow {
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: var(--text-faint) !important;
  font-family: var(--font-display) !important;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background: transparent;
  position: relative;
  overflow-x: hidden;
}

/* HUD 레이어: body 위에 그리드 + 스캔라인 오버레이
   (pointer-events: none 으로 상호작용엔 영향 없음) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    var(--hud-grid),
    var(--hud-grid-fine);
  mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 40%, black 40%, transparent 100%);
  opacity: 0.9;
}

body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  );
  background-size: 100% 6px;
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: hud-scanline 9s linear infinite;
}

@keyframes hud-scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#app > main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* =========================================================================
 * 페이지 잠금(page-locked) — 룸 페이지처럼 내부 패널이 자체 스크롤을 가질 때
 *   - html/body 의 자연 확장을 차단해 "페이지 전체가 스크롤되는" 현상을 방지
 *   - #app 도 정확히 뷰포트 높이로 고정
 * ========================================================================= */
html.page-locked,
body.page-locked {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}
body.page-locked #app {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body,
button,
input,
textarea,
select {
  font: inherit;
}

button,
input,
textarea,
select {
  border: 0;
}

button {
  cursor: pointer;
}

input,
textarea,
select {
  color: var(--text);
  caret-color: var(--primary);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14), var(--glow-sm);
}

a {
  color: inherit;
}

code {
  font-family: var(--font-mono);
}

/* 디스플레이 폰트: 브랜드/HUD 타이틀용 utility */
.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}

.font-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* HUD 유틸리티 클래스 — 필요한 곳에 추가 */
.hud-glow {
  box-shadow: var(--glow-sm);
}

.hud-pulse {
  animation: hud-pulse 2.4s ease-in-out infinite;
}

@keyframes hud-pulse {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 6px var(--cyan-glow));
  }
  50% {
    opacity: 0.55;
    filter: drop-shadow(0 0 14px var(--cyan-glow));
  }
}

/* 선택 영역 — 시안 하이라이트 */
::selection {
  background: rgba(255, 255, 255, 0.22);
  color: var(--text);
}

/* 포커스 링 (모노톤 글로우) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

/* 스크롤바 (웹킷) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.18));
  background-clip: padding-box;
}

/* Firefox */
* {
  scrollbar-color: rgba(255, 255, 255, 0.26) transparent;
  scrollbar-width: thin;
}

/* 애니메이션 감소 선호 존중 */
@media (prefers-reduced-motion: reduce) {
  body::after,
  .hud-pulse {
    animation: none !important;
  }
}