@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap");

:root {
  --bg: #050505;
  --surface: #f7f7f2;
  --surface-soft: #ecece4;
  --ink: #080808;
  --text: #f7f7f2;
  --muted: rgba(247, 247, 242, 0.54);
  --muted-strong: rgba(247, 247, 242, 0.72);
  --border: rgba(247, 247, 242, 0.34);
  --border-soft: rgba(247, 247, 242, 0.18);
  --border-strong: rgba(247, 247, 242, 0.76);
  --accent: #b57fb8;
  --danger: #c95b4e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* v28 custom scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(247, 247, 242, 0.26) rgba(247, 247, 242, 0.045);
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: rgba(247, 247, 242, 0.035);
}

*::-webkit-scrollbar-thumb {
  background: rgba(247, 247, 242, 0.24);
  border: 2px solid var(--bg);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(247, 247, 242, 0.42);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

.supertag-table-wrap::-webkit-scrollbar { height: 8px; }
.modal::-webkit-scrollbar { width: 8px; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans KR", sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; font-family: "Noto Sans KR", sans-serif; }
button { border-radius: 0; }

.app { width: min(100%, 940px); margin: 0 auto; padding: 54px 28px 110px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 14px; margin-bottom: 28px; border-bottom: 1px solid var(--border-soft); }
.brand-lockup { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kicker { font-size: 9.9px; letter-spacing: 0.08em; color: var(--muted-strong); text-transform: none; font-weight: 700; }
.brand-tagline { align-self: flex-start; border: 0; background: transparent; color: var(--muted); padding: 0; font-size: 9.5px; line-height: 1.35; font-style: italic; cursor: pointer; letter-spacing: 0.02em; }
.brand-tagline:hover { color: var(--surface); text-decoration: underline; text-underline-offset: 3px; }
.topbar-right { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.auth-user { color: var(--muted); font-size: 9.9px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiny-btn { border: 1px solid var(--border-soft); color: var(--muted); background: transparent; padding: 2px 6px; font-size: 9px; cursor: pointer; }
.tiny-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 10.8px; color: var(--muted); white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--surface); }
.status.saving::before { background: #d6ba5f; }
.status.error::before { background: var(--danger); }

.mode-toggle { display: inline-flex; border: 1px solid var(--border); margin-bottom: 26px; }
.mode-toggle button { min-width: 96px; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--muted-strong); padding: 8px 13px; cursor: pointer; font-size: 10.8px; }
.mode-toggle button:last-child { border-right: 0; }
.mode-toggle button.active { background: var(--surface); color: var(--ink); }
.mode-toggle button:not(.active):hover { background: rgba(247, 247, 242, 0.08); color: var(--surface); }

.header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.date-title { font-size: 16.2px; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; }
.date-sub { margin-top: 4px; font-size: 10.8px; color: var(--muted); letter-spacing: 0.02em; }
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.nav button, .nav input { min-height: 28px; border: 1px solid var(--border); background: transparent; color: var(--text); padding: 6px 10px; cursor: pointer; font-size: 10.8px; line-height: 1; border-radius: 0; }
.nav input[type="date"] { width: 124px; max-width: 124px; padding: 5px 7px; font-size: 9.9px; color-scheme: dark; }
.nav button:hover, .nav input:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.nav .primary { background: var(--surface); color: var(--ink); border-color: var(--surface); }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.outliner { border: 1px solid var(--border-soft); min-height: 420px; padding: 22px 20px; }
.view-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.view-title h2 { font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; }
.view-title span { font-size: 9.9px; color: var(--muted); }


.onboarding-panel {
  border: 1px solid var(--border);
  background: rgba(247, 247, 242, 0.035);
  padding: 18px 18px 16px;
  margin-bottom: 18px;
}
.onboarding-kicker {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.14em;
  margin-bottom: 7px;
}
.onboarding-panel h2 {
  font-size: 15.3px;
  line-height: 1.35;
  margin-bottom: 7px;
  font-weight: 700;
}
.onboarding-panel p {
  color: var(--muted-strong);
  font-size: 11.7px;
  line-height: 1.7;
  margin-bottom: 14px;
}
.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.onboarding-grid div {
  border: 1px solid var(--border-soft);
  padding: 9px 10px;
  min-height: 72px;
}
.onboarding-grid strong {
  display: block;
  font-size: 10.8px;
  margin-bottom: 4px;
}
.onboarding-grid span {
  display: block;
  color: var(--muted);
  font-size: 9.9px;
  line-height: 1.55;
}
.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.onboarding-actions button {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--muted-strong);
  padding: 5px 9px;
  font-size: 9.9px;
  cursor: pointer;
}
.onboarding-actions button:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--surface);
}

.list-card { border: 1px solid var(--border-soft); padding: 10px 11px; margin-bottom: 8px; cursor: pointer; }
.list-card:hover, .list-card.active { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.list-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11.7px; }
.list-card-meta { margin-top: 4px; color: var(--muted); font-size: 9.9px; }
.list-card:hover .list-card-meta, .list-card.active .list-card-meta { color: rgba(8, 8, 8, 0.55); }
.tag-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.tag-list-grid .list-card { margin-bottom: 0; padding: 8px 9px; min-height: 86px; }
.tag-list-grid .list-card-top { align-items: flex-start; gap: 8px; font-size: 10.8px; }
.tag-list-grid .list-card-top > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-list-grid .list-card-meta { margin-top: 3px; font-size: 9px; line-height: 1.45; }

.node { position: relative; }
.node.collapsed > .children { display: none; }
.node-row { display: flex; align-items: flex-start; gap: 10px; min-height: 31px; padding: 5px 0; }
.time-stamp { width: 72px; flex: 0 0 72px; padding-top: 3px; font-size: 9px; line-height: 18px; color: var(--muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; user-select: none; white-space: nowrap; }
.node:hover > .node-row > .time-stamp { color: var(--muted-strong); }
.handle { width: 30px; flex: 0 0 30px; color: var(--muted); display: inline-flex; align-items: center; justify-content: flex-start; gap: 2px; line-height: 22px; margin-top: 2px; user-select: none; }
.node-toggle, .node-bullet { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 20px; }
.node-toggle { font-size: 12.6px; cursor: pointer; }
.node-bullet { font-size: 13.5px; cursor: pointer; }
.node-toggle:hover, .node-bullet:hover { color: var(--surface); }
.favorite-node-btn {
  flex: 0 0 18px;
  width: 18px;
  height: 20px;
  margin-top: 1px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
  opacity: 0.42;
}
.favorite-node-btn:hover,
.favorite-node-btn.active {
  color: #e3c769;
  opacity: 1;
}
.favorite-row-action {
  color: #e3c769 !important;
  font-size: 11px;
}
.content { flex: 0 1 auto; width: fit-content; min-width: 42px; max-width: calc(100% - 150px); min-height: 22px; font-size: 12.6px; line-height: 22px; padding: 0; outline: 0; word-break: keep-all; white-space: pre-wrap; caret-color: var(--accent); }
.content.schedule-title, .readonly-content.schedule-title, .table-content-edit.schedule-title, .trace-content-edit.schedule-title { color: var(--supertag-font-color, #86a873); font-weight: 650; }
.content:focus { background: rgba(247,247,242,0.045); box-shadow: 0 0 0 4px rgba(247,247,242,0.045); }
.content:empty::before { content: attr(data-placeholder); color: var(--muted); opacity: 0.6; pointer-events: none; }
.children { margin-left: 104px; padding-left: 10px; border-left: 1px solid var(--border-soft); }
.node:hover > .children { border-left-color: var(--border); }

.add-tag, .hide-log, .delete-node { display: inline-flex; align-items: center; justify-content: center; width: 22px; min-width: 22px; height: 18px; margin-top: 2px; padding: 0; border: 1px solid var(--border-soft); color: var(--muted); background: rgba(247,247,242,0.02); text-align: center; line-height: 16px; font-size: 9px; opacity: 0; cursor: pointer; flex: 0 0 22px; }
.delete-node { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.node-row:hover .add-child-node, .node-row:hover .add-tag, .node-row:hover .hide-log, .node-row:hover .delete-node { opacity: 1; }
.add-child-node:hover, .add-tag:hover, .hide-log:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.delete-node:hover { background: var(--danger); color: var(--surface); border-color: var(--danger); }

.project-link { color: var(--project-color, var(--accent)); font-size: 0.86em; font-weight: 400; text-decoration: none; }
.supertype-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 18px; min-height: 18px; margin-top: 2px; padding: 0 5px; border: 1px solid var(--border); color: var(--supertag-font-color, var(--surface)); background: rgba(247,247,242,0.035); font-size: 9px; line-height: 16px; white-space: nowrap; }
.supertype-badge button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 8.1px; line-height: 1; opacity: 0.55; padding: 0; }
.source-chip { display: inline-flex; align-items: center; border: 1px solid var(--border-soft); color: var(--muted); padding: 0 5px; margin-left: 6px; font-size: 9px; line-height: 15px; }

.field-block { position: relative; margin: 0 0 7px 122px; padding: 1px 0 2px; max-width: 560px; border: 0; background: transparent; }
.field-block.collapsed { margin: 0 0 4px 122px; padding: 0; border: 0; background: transparent; }
.field-summary { display: none; color: var(--muted); font-size: 9px; line-height: 16px; cursor: pointer; width: fit-content; }
.field-block.collapsed .field-summary { display: block; }
.field-block.collapsed .field-grid, .field-block.collapsed .field-inline-summary { display: none; }
.field-inline-summary { color: var(--muted-strong); font-size: 9.9px; line-height: 1.6; white-space: normal; max-width: 100%; }
.field-inline-summary .field-summary-label { color: var(--muted); }
.field-actions { display: flex; justify-content: flex-start; gap: 8px; height: 13px; margin-top: 2px; opacity: 0; }
.field-block:hover .field-actions, .field-block:focus-within .field-actions { opacity: 0.72; }
.field-block.collapsed .field-actions { display: none; }
.field-collapse-small { border: 0; background: transparent; color: var(--muted); padding: 0; font-size: 9px; line-height: 1.3; cursor: pointer; }
.field-grid { display: grid; grid-template-columns: 64px minmax(190px, 1fr); gap: 2px 12px; font-size: 9.9px; align-items: center; }
.field-label { color: var(--muted); font-size: 9px; line-height: 1.25; white-space: nowrap; }
.field-input { width: 100%; min-width: 160px; min-height: 18px; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--muted-strong); padding: 0 2px 1px; font-size: 9.9px; outline: 0; border-radius: 0; }
.field-input:focus { color: var(--surface); border-bottom-color: var(--border-strong); background: rgba(247,247,242,0.025); }
.field-input[type="checkbox"] { width: auto; min-height: auto; justify-self: start; border: 0; accent-color: var(--surface); }
.field-input option, .modal-select option { background: var(--surface); color: var(--ink); }

.tag-edit-small, .tag-delete-small, .add-node-small { border: 1px solid var(--border-soft); background: transparent; color: var(--muted); padding: 1px 5px; font-size: 9px; line-height: 1.25; cursor: pointer; }
.tag-delete-small { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); margin-left: 7px; }
.add-node-small { color: var(--muted-strong); margin-left: 7px; padding: 1px 6px; }
.tag-edit-small:hover, .add-node-small:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.tag-delete-small:hover { background: var(--danger); color: var(--surface); border-color: var(--danger); }

.inline-tag-menu { position: fixed; width: min(320px, calc(100vw - 24px)); max-height: min(320px, calc(100vh - 24px)); overflow-y: auto; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); padding: 6px; z-index: 80; display: none; }
.inline-tag-menu.show { display: block; }
.inline-tag-query { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-soft); padding: 4px 5px 8px; margin-bottom: 4px; font-size: 10.8px; color: var(--muted-strong); }
.inline-tag-query strong { color: var(--surface); font-weight: 650; }
.tag-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 7px; font-size: 10.8px; cursor: pointer; }
.tag-suggestion:hover, .tag-suggestion.active { background: var(--surface); color: var(--ink); }
.tag-suggestion-left { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
.suggestion-main-label { min-width: 0; overflow: hidden; white-space: nowrap; }
.tag-suggestion .hint { font-size: 9px; color: var(--muted); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--accent); display: inline-block; }

.modal-backdrop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(5, 5, 5, 0.72); z-index: 120; }
.modal-backdrop.show { display: flex; }
.modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 56px); overflow: auto; border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); padding: 18px; }
.modal h3 { font-size: 13.5px; margin-bottom: 14px; }
.auth-modal, .confirm-modal, .name-modal { max-width: 420px; }
.confirm-message { color: var(--muted-strong); font-size: 11.7px; line-height: 1.7; white-space: pre-line; }
.modal-label { display: block; color: var(--muted); font-size: 9.9px; margin: 12px 0 5px; }
.modal-input, .modal-select { width: 100%; border: 1px solid var(--border-soft); background: transparent; color: var(--text); padding: 7px 8px; font-size: 11.7px; outline: 0; border-radius: 0; }
.modal-input:focus, .modal-select:focus { border-color: var(--border-strong); }
.modal-color-picker { width: 16px; height: 16px; padding: 0; border: 1px solid var(--border-soft); background: transparent; cursor: pointer; margin-right: 6px; }
.field-editor-row { display: grid; grid-template-columns: 1fr 112px 142px 28px; gap: 7px; margin-bottom: 7px; align-items: center; }
.modal-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 16px; }
.modal-btn { border: 1px solid var(--border); background: transparent; color: var(--text); padding: 7px 11px; font-size: 10.8px; cursor: pointer; }
.modal-btn:hover, .modal-btn.primary { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.modal-btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); margin-right: auto; }
.modal-note { color: var(--muted); font-size: 9.9px; line-height: 1.65; margin-top: 9px; }

.supertag-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); margin-top: 12px; }
.supertag-table { width: 100%; border-collapse: collapse; font-size: 10.8px; }
.supertag-table th, .supertag-table td { border-bottom: 1px solid var(--border-soft); padding: 7px 8px; text-align: left; vertical-align: top; }
.supertag-table th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.supertag-table .table-time-cell, .supertag-table .table-created-cell { width: 104px; min-width: 104px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.supertag-table tr:hover td { background: rgba(247,247,242,0.055); }
.table-content-edit, .trace-content-edit { min-height: 20px; outline: 0; white-space: pre-wrap; word-break: keep-all; }
.table-content-edit:focus, .trace-content-edit:focus { background: rgba(247,247,242,0.055); box-shadow: 0 0 0 3px rgba(247,247,242,0.045); }
.table-field-input { min-width: 90px; max-width: 180px; }
.quick-todo-input { min-width: 74px; max-width: 118px; height: 22px; font-size: 9.9px; color: var(--muted-strong); cursor: pointer; }
.quick-todo-input[type="checkbox"] { min-width: auto; width: 14px; height: 14px; accent-color: var(--surface); }
.readonly-content { min-height: 20px; white-space: pre-wrap; word-break: keep-all; }
.table-field-read { min-height: 20px; color: var(--muted-strong); font-size: 10.8px; }
.reference-chip { display: inline-flex; align-items: center; border: 1px solid var(--border-soft); padding: 1px 6px; font-size: 9.9px; color: var(--muted-strong); }
.inline-table-actions { white-space: nowrap; font-size: 9.9px; }
.inline-edit-hint { margin-top: 8px; color: var(--muted); font-size: 9.9px; }
.row-action-link { color: var(--muted-strong); cursor: pointer; margin-right: 8px; white-space: nowrap; }
.row-action-link:hover, .row-action-link.primary-edit { color: var(--surface); }
tr.is-editing td, .trace-item.is-editing { background: rgba(247,247,242,0.035); }
.todo-done { opacity: 0.48; }
.todo-done .todo-content { text-decoration: line-through; }
.quick-view-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 10px 0 14px; }
.quick-chip { border: 1px solid var(--border-soft); background: transparent; color: var(--muted-strong); padding: 4px 8px; font-size: 9.9px; }
.filter-group { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 2px; border: 1px solid var(--border-soft); }
.filter-group-label { color: var(--muted); font-size: 9px; line-height: 1; padding: 0 4px; white-space: nowrap; }
.filter-chip { cursor: pointer; font: inherit; font-size: 9.9px; line-height: 1.25; border-radius: 0; }
.filter-chip.active { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.filter-chip:hover { background: rgba(247,247,242,0.08); color: var(--surface); }
.filter-chip.active:hover { background: var(--surface); color: var(--ink); }
.schedule-filter-toolbar { align-items: center; margin-bottom: 5px; }
.filter-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
  margin: -2px 0 14px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
}
.filter-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.filter-meta-item::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border-strong);
  opacity: 0.55;
}
.filter-meta-item:first-child::before { display: none; }

.trace-list { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.trace-item { display: grid; grid-template-columns: 76px 1fr; gap: 12px; border-bottom: 1px solid var(--border-soft); padding: 8px 0; font-size: 11.7px; }
.trace-date { color: var(--muted); font-size: 9.9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-view { color: var(--muted); font-size: 11.7px; padding: 24px 0; }
.project-tree { margin-top: 4px; }
.project-tree-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; min-height: 30px; border-bottom: 1px solid var(--border-soft); cursor: pointer; font-size: 11.7px; }
.project-tree-row:hover, .project-tree-row.active { background: var(--surface); color: var(--ink); }
.project-tree-toggle { color: var(--muted); font-size: 9px; text-align: center; user-select: none; }
.project-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-tree-meta { color: var(--muted); font-size: 9.9px; padding-right: 8px; white-space: nowrap; }
.project-color-chip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: 0; box-shadow: 0 0 0 1px rgba(247,247,242,0.18); }
.project-color-picker, .tag-color-picker { width: 16px; height: 16px; padding: 0; border: 1px solid var(--border-soft); background: transparent; cursor: pointer; margin-right: 6px; }
.project-tree-hint { margin-top: 14px; color: var(--muted); font-size: 9.9px; line-height: 1.7; }
.node-page-actions { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 16px; }
.node-page-actions button { min-height: 27px; border: 1px solid var(--border-soft); background: transparent; color: var(--muted-strong); padding: 5px 9px; font-size: 9.9px; cursor: pointer; }
.node-page-actions button:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.node-backlinks-section { margin-top: 28px; }
.node-backlinks-section .backlink-title { margin-bottom: 0; }
.node-backlinks-section .backlink-list { margin-top: 0; }
.footer-hint { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: 9.9px; color: var(--muted); line-height: 2; }
kbd { border: 1px solid var(--border-soft); padding: 1px 6px; font-size: 9px; color: var(--muted-strong); }
.brand { position: fixed; bottom: 20px; left: 24px; max-width: calc(100vw - 48px); font-size: 9px; color: var(--muted); letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-modal { max-width: 560px; }
.brand-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.brand-page-kicker { color: var(--muted); font-size: 10px; letter-spacing: 0.12em; font-weight: 700; }
.brand-modal h3 { margin-bottom: 14px; font-size: 17px; letter-spacing: -0.02em; }
.brand-modal p { color: var(--muted-strong); font-size: 12px; line-height: 1.85; margin-top: 10px; word-break: keep-all; }
.brand-modal strong { color: var(--text); font-weight: 700; }
.brand-modal em { color: var(--surface); font-style: italic; }
.brand-page-line { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-soft); color: var(--surface); font-size: 11px; font-style: italic; letter-spacing: 0.03em; }
.toast { position: fixed; bottom: 20px; right: 24px; background: var(--surface); color: var(--ink); border: 1px solid var(--surface); padding: 5px 10px; font-size: 9.9px; opacity: 0; transform: translateY(4px); transition: opacity 0.18s, transform 0.18s; }
.toast.show { opacity: 1; transform: translateY(0); }




/* Detailed first-run guide */
.onboarding-panel-detailed {
  padding: 20px 20px 16px;
}
.onboarding-lead {
  max-width: 760px;
  margin-bottom: 18px !important;
}
.onboarding-section {
  border-top: 1px solid var(--border-soft);
  padding: 14px 0 13px;
}
.onboarding-section h3 {
  font-size: 11.7px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.onboarding-section p {
  margin-bottom: 8px;
}
.onboarding-section ul {
  margin: 8px 0 0 17px;
  color: var(--muted-strong);
  font-size: 10.8px;
  line-height: 1.8;
}
.onboarding-section li + li {
  margin-top: 2px;
}
.onboarding-example {
  border: 1px solid var(--border-soft);
  background: rgba(247, 247, 242, 0.03);
  color: var(--text);
  font-size: 10.8px;
  line-height: 1.55;
  padding: 7px 9px;
  margin: 6px 0;
}
.onboarding-small {
  color: var(--muted) !important;
  font-size: 10.8px !important;
  margin-top: 6px;
}
.onboarding-last {
  border-bottom: 1px solid var(--border-soft);
}









/* v6 onboarding tutorial patch */
.onboarding-panel-tutorial {
  padding: 20px 20px 16px;
}
.onboarding-steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border-soft);
  margin-top: 16px;
}
.onboarding-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.onboarding-step-num {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  color: var(--muted-strong);
  font-size: 9.9px;
  line-height: 1;
}
.onboarding-step-body h3 {
  font-size: 11.7px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.onboarding-step-body p {
  margin-bottom: 8px;
}
.onboarding-try {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.onboarding-try button {
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--muted-strong);
  padding: 5px 9px;
  font-size: 9.9px;
  cursor: pointer;
}
.onboarding-try button:first-child {
  border-color: var(--border-strong);
  color: var(--surface);
}
.onboarding-try button:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--surface);
}
.onboarding-cheatsheet {
  border: 1px solid var(--border-soft);
  background: rgba(247,247,242,0.025);
  padding: 12px 13px;
  margin-top: 16px;
}
.onboarding-cheatsheet h3 {
  font-size: 11.7px;
  font-weight: 700;
  margin-bottom: 6px;
}
.onboarding-cheatsheet p:last-child {
  margin-bottom: 0;
}


/* v7 tutorial-as-log and bracket action buttons */
.hide-log,
.delete-node {
  width: 34px;
  min-width: 34px;
  flex: 0 0 34px;
}



.calendar-select-modal {
  max-width: 540px;
}

.calendar-select-list {
  margin-top: 12px;
  border: 1px solid var(--border-soft);
  max-height: 280px;
  overflow-y: auto;
}

.calendar-select-row {
  display: grid;
  grid-template-columns: 18px 12px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  font-size: 12px;
}

.calendar-select-row:last-child {
  border-bottom: 0;
}

.calendar-select-row:hover {
  background: rgba(247,247,242,0.055);
}

.calendar-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(247,247,242,0.25);
}

.calendar-select-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}





















.add-child-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 18px;
  margin-top: 2px;
  padding: 0;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  background: rgba(247,247,242,0.02);
  text-align: center;
  line-height: 16px;
  font-size: 9px;
  opacity: 0;
  cursor: pointer;
  flex: 0 0 30px;
}
















.inline-menu-close {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
  line-height: 18px;
  font-size: 13px;
  flex: 0 0 22px;
}
.inline-menu-close:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }





/* v44: node references and global search */
.node-ref-link {
  color: #fff2a6;
  background: rgba(255, 242, 166, 0.12);
  border-bottom: 1px solid rgba(255, 242, 166, 0.72);
  padding: 0 2px;
  font-size: 0.92em;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.node-ref-link:hover {
  color: var(--ink);
  background: #fff2a6;
  border-bottom-color: #fff2a6;
}
.search-modal {
  width: min(640px, calc(100vw - 32px));
  padding: 16px;
}
.search-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.search-modal-head h3 {
  margin: 0;
}
.search-input {
  font-size: 15px;
  min-height: 38px;
}
.search-results {
  margin-top: 12px;
  max-height: min(55vh, 420px);
  overflow-y: auto;
  border-top: 1px solid var(--border-soft);
}
.search-result {
  padding: 9px 2px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.search-result:hover,
.search-result.active {
  background: var(--surface);
  color: var(--ink);
  padding-left: 8px;
  padding-right: 8px;
}
.search-result-title {
  font-size: 13px;
  line-height: 1.45;
  word-break: keep-all;
}
.search-result-meta {
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.search-result:hover .search-result-meta,
.search-result.active .search-result-meta {
  color: rgba(8, 8, 8, 0.58);
}





/* ---------- Routine todo ---------- */
.node.routine-instance > .node-row .time-stamp {
  color: #e3c769;
}
.node.routine-instance > .node-row .content,
.node.routine-instance > .node-row .readonly-content {
  color: var(--text);
}
.routine-cell-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(227, 199, 105, 0.35);
  background: rgba(227, 199, 105, 0.08);
  color: #e3c769;
  font-size: 9.4px;
  line-height: 18px;
  white-space: nowrap;
}
.supertag-table .quick-todo-input[type="number"] {
  width: 58px;
  min-width: 58px;
}
.supertag-table .quick-todo-input[type="time"] {
  width: 82px;
  min-width: 82px;
}

/* v48: force @ node reference color consistently inside table views */
.supertag-table .node-ref-link,
.readonly-content .node-ref-link,
.table-content-edit .node-ref-link,
.trace-content-edit .node-ref-link,
.todo-content .node-ref-link {
  color: #fff2a6 !important;
  background: rgba(255, 242, 166, 0.12) !important;
  border-bottom: 1px solid rgba(255, 242, 166, 0.72) !important;
}
.supertag-table .node-ref-link:hover,
.readonly-content .node-ref-link:hover,
.table-content-edit .node-ref-link:hover,
.trace-content-edit .node-ref-link:hover,
.todo-content .node-ref-link:hover {
  color: var(--ink) !important;
  background: #fff2a6 !important;
  border-bottom-color: #fff2a6 !important;
}
.view-add-node {
  margin: 0 0 10px 0;
  display: inline-flex;
}
.routine-weekday-picker {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 156px;
}
.routine-weekday {
  width: 19px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--muted-strong);
  font: inherit;
  font-size: 9px;
  line-height: 18px;
  cursor: pointer;
}
.routine-weekday.active {
  background: #fff2a6;
  border-color: #fff2a6;
  color: var(--ink);
}
.routine-weekday:hover {
  border-color: #fff2a6;
  color: #fff2a6;
}
.routine-weekday.active:hover {
  color: var(--ink);
}
.supertag-table .quick-todo-input[type="date"] {
  width: 120px;
  min-width: 120px;
}

/* v50: todo checkbox in daily log, optional fields, routine-until controls */
.log-todo-checkbox {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 4px;
  accent-color: var(--surface);
  cursor: pointer;
}
.node:has(.log-todo-checkbox:checked) > .node-row > .content {
  opacity: 0.56;
  text-decoration: line-through;
}
.field-editor-row {
  grid-template-columns: 1fr 112px 150px 142px 28px;
}
.field-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-table {
  table-layout: auto;
  min-width: 1320px;
}
.todo-table .todo-content-col,
.todo-table .todo-content-cell {
  width: 310px;
  min-width: 280px;
  max-width: 380px;
}
.todo-table .todo-content-cell,
.todo-table .todo-content-cell .readonly-content,
.todo-table .todo-content-cell .todo-content {
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-table .todo-due-col,
.todo-table .todo-due-cell {
  width: 122px;
  min-width: 122px;
  white-space: nowrap;
}
.todo-table .todo-due-cell .table-field-read,
.todo-table .todo-due-cell .table-field-input,
.todo-table .todo-due-cell .quick-todo-input {
  white-space: nowrap;
  width: 116px;
  min-width: 116px;
}
.table-delete-btn {
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  background: transparent;
  color: var(--danger);
  padding: 1px 6px;
  font-size: 9.5px;
  line-height: 1.35;
  cursor: pointer;
  white-space: nowrap;
}
.table-delete-btn:hover {
  background: var(--danger);
  color: var(--surface);
  border-color: var(--danger);
}
.todo-table .quick-todo-input[type="date"] {
  width: 116px;
  min-width: 116px;
}
.todo-table .quick-todo-input[type="time"] {
  width: 78px;
  min-width: 78px;
}
.todo-table .quick-todo-input[type="number"] {
  width: 54px;
  min-width: 54px;
}

/* v57: stable horizontal scrolling for wide table tabs */
.supertag-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: scroll !important;
  overflow-y: visible;
  padding-bottom: 10px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

.supertag-table-wrap::-webkit-scrollbar {
  height: 12px;
}

.supertag-table-wrap::-webkit-scrollbar-track {
  background: rgba(247, 247, 242, 0.075);
}

.supertag-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(247, 247, 242, 0.38);
  border: 3px solid var(--bg);
  border-radius: 999px;
}

.supertag-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(247, 247, 242, 0.56);
}

.supertag-table-wrap .supertag-table {
  width: max-content;
  min-width: max(100%, 980px);
}

.supertag-table-wrap .supertag-table th,
.supertag-table-wrap .supertag-table td {
  min-width: 96px;
}

.supertag-table-wrap .supertag-table th:last-child,
.supertag-table-wrap .supertag-table td:last-child {
  min-width: 132px;
}

.supertag-table-wrap .todo-table {
  min-width: 1320px;
}

.supertag-table-wrap .todo-table .todo-content-col,
.supertag-table-wrap .todo-table .todo-content-cell {
  min-width: 340px;
}

/* ---------- Child node drag & drop ---------- */
.node-bullet.node-drag-handle {
  cursor: grab;
}
.node-bullet.node-drag-handle:active {
  cursor: grabbing;
}
body.dragging-node .content {
  user-select: none;
}
.node.dragging-source {
  opacity: 0.42;
}
.node.drop-before > .node-row,
.node.drop-after > .node-row,
.node.drop-child-first > .node-row,
.node.drop-child-last > .node-row {
  position: relative;
}
.node.drop-before > .node-row::before,
.node.drop-after > .node-row::after {
  content: '';
  position: absolute;
  left: 102px;
  right: 18px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(227, 199, 105, 0.25);
  pointer-events: none;
}
.node.drop-before > .node-row::before {
  top: -2px;
}
.node.drop-after > .node-row::after {
  bottom: -2px;
}
.node.drop-child-first > .node-row::after,
.node.drop-child-last > .node-row::after {
  content: '하위로 이동';
  position: absolute;
  left: 122px;
  right: auto;
  bottom: -13px;
  min-width: 68px;
  height: 15px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  background: var(--bg);
  color: var(--accent);
  font-size: 9px;
  line-height: 13px;
  pointer-events: none;
}
.node.drop-child-first > .children,
.node.drop-child-last > .children {
  border-left-color: var(--accent);
}

/* v68 project-level daily visibility */
.project-detail-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.project-create-toolbar {
  margin-bottom: 12px;
}
.project-create-input {
  width: min(320px, 100%);
  min-height: 21px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--surface);
  padding: 2px 7px;
  font-size: 10.8px;
  line-height: 1.4;
  outline: 0;
}
.project-create-input::placeholder { color: var(--muted); }
.project-create-input:focus {
  border-color: var(--surface);
  background: rgba(247,247,242,0.025);
}
.project-create-toolbar .add-node-small {
  margin-left: 0;
  min-height: 21px;
}
.project-daily-status,
.project-hidden-badge,
.hidden-reason-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  color: var(--muted);
  background: transparent;
  font-size: 9px;
  line-height: 1.25;
  padding: 1px 6px;
  white-space: nowrap;
}
.project-daily-status.is-hidden,
.project-hidden-badge,
.hidden-reason-chip {
  color: var(--surface);
  border-color: var(--surface);
}
.project-tree-meta .project-hidden-badge {
  margin-right: 6px;
}

/* Phone layout — v86 mobile browser-tab navigation */
@media (max-width: 760px) {
  :root {
    --m-page-x: 14px;
    --m-bar-h: 58px;
    --m-gap-1: 4px;
    --m-gap-2: 8px;
    --m-gap-3: 12px;
    --m-caption: 9.5px;
    --m-label: 10.5px;
    --m-body: 12px;
    --m-log: 14.4px;
    --m-title: 15px;
    --m-control-h: 30px;
    --m-hairline: rgba(247, 247, 242, 0.16);
  }

  html,
  body {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  body {
    background: var(--bg);
    font-size: var(--m-body);
    line-height: 1.52;
  }

  button,
  input,
  select,
  textarea,
  [contenteditable="true"] {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  input,
  select,
  textarea,
  [contenteditable="true"],
  .modal-input,
  .modal-select,
  .field-input,
  .content,
  .readonly-content,
  .table-content-edit,
  .trace-content-edit,
  .search-input {
    font-size: 16px;
  }

  .app {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top)) var(--m-page-x) calc(76px + env(safe-area-inset-bottom));
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    margin: calc(-1 * max(12px, env(safe-area-inset-top))) calc(-1 * var(--m-page-x)) 0;
    padding: max(10px, env(safe-area-inset-top)) var(--m-page-x) 9px;
    background: rgba(5, 5, 5, 0.985);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--m-hairline);
  }

  .brand-lockup {
    min-width: 0;
    gap: 1px;
    overflow: hidden;
  }

  .kicker {
    min-width: 0;
    font-size: 9.5px;
    line-height: 1.25;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-tagline {
    max-width: 100%;
    font-size: 8.8px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-right {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: end;
    gap: 0 7px;
  }

  .auth-user {
    display: none;
  }

  .status {
    order: 1;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    font-size: 9.5px;
    line-height: 1;
    color: var(--muted-strong);
  }

  .status::before {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
  }

  .tiny-btn {
    order: 2;
    height: 22px;
    min-height: 22px;
    padding: 0 7px;
    border: 1px solid var(--border-soft);
    border-radius: 0;
    background: transparent;
    color: var(--muted-strong);
    font-size: 9.5px;
    line-height: 20px;
  }

  .header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin: 0 calc(-1 * var(--m-page-x)) 13px;
    padding: 11px var(--m-page-x) 12px;
    border-bottom: 1px solid var(--m-hairline);
  }

  .date-title {
    font-size: var(--m-title);
    line-height: 1.28;
    font-weight: 650;
    letter-spacing: -0.02em;
  }

  .date-sub {
    margin-top: 2px;
    font-size: 9.5px;
    line-height: 1.35;
    color: var(--muted);
  }

  .nav {
    display: grid;
    grid-template-columns: 28px 58px 28px repeat(4, minmax(0, 1fr));
    grid-auto-rows: var(--m-control-h);
    gap: 6px;
    width: 100%;
    margin: 0;
    align-items: stretch;
  }

  .nav button,
  .nav input {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: var(--m-control-h);
    min-height: var(--m-control-h);
    padding: 0 5px;
    border: 1px solid var(--border-soft);
    border-radius: 0;
    background: rgba(247, 247, 242, 0.018);
    color: var(--muted-strong);
    font-size: var(--m-label);
    font-weight: 500;
    line-height: calc(var(--m-control-h) - 2px);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
  }

  .nav button#prevBtn { grid-column: 1; grid-row: 1; padding: 0; }
  .nav button#todayBtn { grid-column: 2; grid-row: 1; padding: 0; }
  .nav button#nextBtn { grid-column: 3; grid-row: 1; padding: 0; }
  .nav input#datePicker { grid-column: 4 / 8; grid-row: 1; }
  .nav button#searchBtn { grid-column: 1 / 4; grid-row: 2; }
  .nav button#googleImportBtn { grid-column: 4; grid-row: 2; }
  .nav button#aiCopyBtn { grid-column: 5; grid-row: 2; }
  .nav button#markdownCopyBtn { grid-column: 6; grid-row: 2; }
  .nav button#exportBtn { grid-column: 7; grid-row: 2; }

  .nav button#searchBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 600;
  }

  .nav button#searchBtn span[aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    transform: translateY(-0.5px);
  }

  .nav input[type="date"] {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0 6px;
    font-size: var(--m-label);
    font-weight: 500;
    line-height: normal;
    color: var(--muted-strong);
    color-scheme: dark;
    appearance: auto;
    -webkit-appearance: none;
  }

  .nav .primary,
  .nav button:active,
  .nav input:active,
  .nav button:hover,
  .nav input:hover {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--surface);
  }

  .mode-toggle {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    height: calc(49px + env(safe-area-inset-bottom));
    margin: 0;
    padding: 7px max(10px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(10px, env(safe-area-inset-right));
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-top: 1px solid var(--border);
    background: rgba(5, 5, 5, 0.995);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mode-toggle::-webkit-scrollbar {
    display: none;
  }

  .mode-toggle::before,
  .mode-toggle::after {
    content: none !important;
    display: none !important;
  }

  .mode-toggle button {
    position: relative;
    flex: 0 0 82px;
    min-width: 82px;
    height: 36px;
    min-height: 36px;
    margin: 0 0 0 -1px;
    padding: 0 9px;
    border: 1px solid var(--border-soft);
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted-strong);
    font-size: 10.6px;
    font-weight: 550;
    line-height: 35px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -0.02em;
  }

  .mode-toggle button:first-child {
    margin-left: 0;
  }

  .mode-toggle button.active {
    z-index: 2;
    height: 40px;
    min-height: 40px;
    background: var(--surface);
    color: var(--ink);
    border-color: var(--surface);
    line-height: 39px;
    font-weight: 650;
  }

  .mode-toggle button:not(.active):hover,
  .mode-toggle button:not(.active):active {
    background: rgba(247, 247, 242, 0.055);
    color: var(--surface);
  }

  .workspace {
    display: block;
  }

  .outliner {
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .view-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--border-soft);
  }

  .view-title h2 {
    font-size: 14px;
    line-height: 1.35;
  }

  .view-title span {
    display: block;
    font-size: var(--m-caption);
    line-height: 1.4;
  }

  .onboarding-grid,
  .tag-list-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-panel,
  .onboarding-panel-detailed,
  .onboarding-panel-tutorial,
  .list-card,
  .tag-list-grid .list-card {
    border-radius: 0;
    background: rgba(247, 247, 242, 0.032);
  }

  .list-card {
    padding: 10px;
    margin-bottom: 8px;
  }

  .list-card-top {
    font-size: 12px;
    line-height: 1.4;
  }

  .list-card-meta {
    font-size: var(--m-caption);
    line-height: 1.45;
  }

  .node {
    margin: 0 0 8px;
  }

  .node-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-height: 0;
    padding: 7px 8px 6px;
    border: 1px solid var(--border-soft);
    border-radius: 0;
    background: rgba(247, 247, 242, 0.03);
  }

  .node.routine-instance > .node-row {
    border-color: rgba(227, 199, 105, 0.34);
    background: rgba(227, 199, 105, 0.045);
  }

  .time-stamp {
    order: 0;
    width: auto;
    flex: 0 0 auto;
    padding: 0;
    font-size: 9.5px;
    line-height: 20px;
    color: var(--muted-strong);
  }

  .handle {
    order: 1;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 0;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
  }

  .node-toggle,
  .node-bullet {
    width: 14px;
    height: 20px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .favorite-node-btn {
    order: 2;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
    opacity: 0.88;
    font-size: 13px;
    line-height: 22px;
  }

  .log-todo-checkbox {
    order: 10;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 8px 3px 0 0;
    align-self: flex-start;
  }

  .add-child-node,
  .add-tag,
  .hide-log,
  .delete-node {
    order: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 22px;
    height: 20px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 5px;
    border: 1px solid var(--border-soft);
    border-radius: 0;
    background: rgba(247,247,242,0.02);
    color: var(--muted-strong);
    font-size: 9px;
    line-height: 18px;
    opacity: 0.74;
  }

  .add-child-node {
    margin-left: auto;
    min-width: 30px;
  }

  .node-row > .time-stamp,
  .node-row > .handle,
  .node-row > .favorite-node-btn,
  .node-row > .add-child-node,
  .node-row > .hide-log,
  .node-row > .delete-node,
  .node-row > .add-tag {
    align-self: flex-start;
  }

  .delete-node {
    color: var(--danger);
  }

  .content {
    order: 10;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 26px;
    padding: 3px 0 1px;
    font-size: var(--m-log);
    line-height: 1.46;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .node-row.has-log-todo-checkbox .content,
  .node-row:has(.log-todo-checkbox) .content {
    flex: 1 1 calc(100% - 23px);
    width: auto;
  }

  .content:focus {
    background: rgba(247,247,242,0.045);
    box-shadow: none;
  }

  .supertype-badge,
  .source-chip {
    order: 20;
    max-width: 100%;
    height: auto;
    min-height: 16px;
    margin: 1px 0 0;
    padding: 0 4px;
    border-radius: 0;
    font-size: 8.4px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0.01em;
    white-space: normal;
  }

  .children {
    margin: 6px 0 2px 12px;
    padding-left: 9px;
    border-left: 1px solid var(--border-soft);
  }

  .field-block,
  .field-block.collapsed {
    margin: 6px 0 9px 12px;
    max-width: none;
    padding: 6px 0 6px 9px;
    border-left: 1px solid var(--border-soft);
  }

  .field-grid {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 5px 8px;
    font-size: 10.5px;
  }

  .field-label {
    font-size: 9px;
    line-height: 30px;
  }

  .field-input {
    min-width: 0;
    width: 100%;
    min-height: 34px;
    font-size: 16px;
  }

  .field-inline-summary,
  .field-summary {
    font-size: var(--m-caption);
    line-height: 1.45;
  }

  .field-actions {
    opacity: 0.72;
    height: auto;
    margin-top: 6px;
  }

  .inline-tag-menu {
    position: fixed !important;
    left: var(--m-page-x) !important;
    right: var(--m-page-x) !important;
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    max-width: calc(100vw - (var(--m-page-x) * 2));
    max-height: min(58dvh, 420px);
    border-radius: 0;
    padding: 10px;
    z-index: 100;
    box-shadow: 0 -12px 34px rgba(0,0,0,0.34);
  }

  .inline-menu-close {
    width: 30px;
    height: 30px;
    border-radius: 0;
    line-height: 26px;
  }

  .modal-backdrop {
    align-items: flex-end;
    justify-content: center;
  }

  .modal {
    width: 100%;
    max-width: 100vw;
    max-height: min(86dvh, 720px);
    margin: 0;
    padding: 14px var(--m-page-x) calc(16px + env(safe-area-inset-bottom));
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
  }

  .modal h3 {
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 11px;
  }

  .modal-label {
    font-size: var(--m-caption);
    line-height: 1.4;
  }

  .modal-input,
  .modal-select {
    min-height: 40px;
    border-radius: 0;
    font-size: 16px;
  }

  .modal-note {
    font-size: 11px;
    line-height: 1.55;
  }

  .modal-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 7px;
  }

  .modal-btn {
    min-height: 34px;
    border-radius: 0;
    padding: 7px 10px;
    font-size: 12px;
  }

  .search-modal {
    width: 100%;
    max-width: 100vw;
    padding: 16px var(--m-page-x) calc(16px + env(safe-area-inset-bottom));
  }

  .search-input {
    min-height: 42px;
  }

  .search-results {
    max-height: 58dvh;
  }

  .supertag-table-wrap {
    margin: 0 calc(-1 * var(--m-page-x));
    width: calc(100% + (var(--m-page-x) * 2));
    max-width: none;
    padding: 0 var(--m-page-x) 12px;
  }

  .supertag-table-wrap .supertag-table,
  .supertag-table-wrap .todo-table {
    min-width: 980px;
  }

  .project-tree-row {
    min-height: 40px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    border-radius: 0;
    padding: 0 6px;
  }

  .node-page-actions button,
  .view-add-node,
  .filter-chip {
    min-height: 32px;
    border-radius: 0;
    font-size: var(--m-label);
  }

  .footer-hint,
  .brand {
    display: none;
  }

  .toast {
    left: var(--m-page-x);
    right: var(--m-page-x);
    bottom: calc(66px + env(safe-area-inset-bottom));
    width: auto;
    text-align: center;
    border-radius: 0;
    font-size: 11px;
  }

  .node.drop-before > .node-row::before,
  .node.drop-after > .node-row::after {
    left: 12px;
    right: 12px;
  }

  .node.drop-child-first > .node-row::after,
  .node.drop-child-last > .node-row::after {
    left: 14px;
  }

  /* v84: final mobile rhythm corrections */
  .outliner { background: transparent; }
  .node + .node { margin-top: 7px; }
  .time-stamp { font-size: 9px; opacity: 0.92; }
  .handle, .favorite-node-btn { opacity: 0.82; }
  .log-todo-checkbox { transform: scale(0.92); transform-origin: center; }
  .view-title, .inline-tag-query { border-bottom-color: var(--m-hairline); }
  .list-card, .tag-list-grid .list-card { border-color: var(--m-hairline); }
  .project-tree-row { font-size: 11px; }
  .schedule-filter-toolbar, .quick-view-toolbar { gap: 5px; }
  .filter-chip { padding-left: 8px; padding-right: 8px; }
  .modal-btn, .view-add-node, .node-page-actions button, .filter-chip { font-weight: 500; }

}

/* v87: mobile table screens become cards, not horizontal mini-tables */
.mobile-filter-panel { display: none; }

@media (max-width: 760px) {
  .mobile-filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
    margin: 7px 0 10px;
    padding: 7px;
    border: 1px solid var(--m-hairline);
    background: rgba(247, 247, 242, 0.025);
  }

  .mobile-filter-field {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .mobile-filter-field span {
    color: var(--muted);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.02em;
  }

  .mobile-filter-field select {
    width: 100%;
    min-width: 0;
    height: 30px;
    border: 1px solid var(--border-soft);
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
    padding: 0 22px 0 7px;
    font-size: 16px;
    line-height: 28px;
  }

  .todo-filter-toolbar,
  .schedule-filter-toolbar,
  .filter-meta-line {
    display: none !important;
  }

  .supertag-table-wrap {
    margin: 8px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }

  .supertag-table-wrap .supertag-table,
  .supertag-table-wrap .todo-table,
  .supertag-table,
  .todo-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 11.5px;
  }

  .supertag-table thead,
  .todo-table thead {
    display: none !important;
  }

  .supertag-table tbody,
  .todo-table tbody {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
  }

  .supertag-table tr,
  .todo-table tr {
    display: block;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--m-hairline);
    background: rgba(247, 247, 242, 0.028);
    padding: 9px 10px;
  }

  .supertag-table tr:hover td,
  .todo-table tr:hover td,
  .supertag-table tr.is-editing td,
  .trace-item.is-editing {
    background: transparent;
  }

  .supertag-table td,
  .todo-table td {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(247, 247, 242, 0.07) !important;
    padding: 5px 0 !important;
    text-align: left;
    vertical-align: top;
  }

  .supertag-table td:last-child,
  .todo-table td:last-child {
    border-bottom: 0 !important;
    padding-top: 7px !important;
  }

  .supertag-table td::before,
  .todo-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .supertag-table td[data-label=""]::before,
  .todo-table td[data-label=""]::before,
  .supertag-table td:last-child::before,
  .todo-table td:last-child::before {
    display: none;
  }

  .supertag-table td[data-label="내용"],
  .todo-table .todo-content-cell {
    display: block;
    padding: 0 0 8px !important;
    margin: 0 0 3px;
    border-bottom: 1px solid rgba(247, 247, 242, 0.14) !important;
  }

  .supertag-table td[data-label="내용"]::before,
  .todo-table .todo-content-cell::before {
    display: none;
  }

  .todo-table tr {
    position: relative;
    padding-left: 38px;
  }

  .todo-table td:first-child {
    position: absolute;
    left: 10px;
    top: 11px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 22px;
    padding: 0 !important;
    border: 0 !important;
  }

  .todo-table td:first-child::before {
    display: none;
  }

  .todo-table .todo-content-cell,
  .todo-table .todo-content-cell .readonly-content,
  .todo-table .todo-content-cell .todo-content,
  .readonly-content,
  .table-content-edit {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: pre-wrap !important;
    word-break: keep-all;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13.2px;
    line-height: 1.48;
  }

  .supertag-table .table-created-cell,
  .supertag-table .table-time-cell,
  .todo-table .todo-due-cell,
  .todo-table .todo-due-col {
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  .supertag-table .table-field-read,
  .supertag-table .table-field-input,
  .supertag-table .quick-todo-input,
  .todo-table .todo-due-cell .table-field-read,
  .todo-table .todo-due-cell .table-field-input,
  .todo-table .todo-due-cell .quick-todo-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
  }

  .supertag-table input:not([type="checkbox"]),
  .supertag-table select,
  .todo-table input:not([type="checkbox"]),
  .todo-table select {
    min-height: 32px;
    font-size: 16px;
  }

  .supertag-table .quick-todo-input[type="checkbox"],
  .todo-table .quick-todo-input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
  }

  .routine-cell-chip {
    max-width: 100%;
    height: auto;
    min-height: 20px;
    white-space: normal;
    line-height: 1.35;
    padding: 2px 6px;
  }

  .routine-weekday-picker {
    min-width: 0;
    flex-wrap: wrap;
  }

  .inline-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    white-space: normal;
    font-size: 10px;
  }

  .row-action-link {
    margin: 0;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
  }

  .project-tree {
    border: 1px solid var(--m-hairline);
    background: rgba(247, 247, 242, 0.024);
  }

  .project-tree-row {
    min-height: 38px;
    padding: 0 8px !important;
    border-bottom: 1px solid rgba(247, 247, 242, 0.075);
  }

  .project-tree-row:last-child {
    border-bottom: 0;
  }

  .project-tree-meta {
    font-size: 9px;
    color: var(--muted);
  }

  .project-tree-hint {
    margin-top: 8px;
    font-size: 9.5px;
    line-height: 1.55;
    color: var(--muted);
  }
}

/* v88: mobile collapsed cards + tab strip cleanup */
@media (max-width: 760px) {
  /* Bottom main tabs: flush charcoal browser-tab strip */
  .mode-toggle {
    height: calc(48px + env(safe-area-inset-bottom)) !important;
    padding: 0 0 env(safe-area-inset-bottom) 0 !important;
    align-items: stretch !important;
    background: #141414 !important;
    border-top: 1px solid rgba(247, 247, 242, 0.22) !important;
  }
  .mode-toggle button {
    flex: 0 0 86px !important;
    min-width: 86px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 0 0 -1px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(247, 247, 242, 0.22) !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    background: #141414 !important;
    color: rgba(247, 247, 242, 0.76) !important;
    font-size: 11px !important;
    line-height: 48px !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mode-toggle button:first-child { margin-left: 0 !important; }
  .mode-toggle button.active {
    height: 48px !important;
    min-height: 48px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--surface) !important;
    line-height: 48px !important;
    font-weight: 700 !important;
  }

  /* All mobile buttons: optical centering */
  .nav button,
  .nav input,
  .view-add-node,
  .add-node-small,
  .filter-chip,
  .mobile-row-toggle,
  .row-action-link,
  .modal-btn,
  .node-page-actions button,
  .inline-table-actions .row-action-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Remove duplicated section title under global header for todo/schedule */
  .view-add-node {
    margin: 0 0 10px 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    line-height: 30px !important;
    font-size: 11px !important;
  }

  /* Compact filter panel */
  .mobile-filter-panel {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
    gap: 6px !important;
    margin: 5px 0 10px !important;
    padding: 6px !important;
    border-color: rgba(247, 247, 242, 0.18) !important;
    background: rgba(247, 247, 242, 0.018) !important;
  }
  .mobile-filter-field {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 5px !important;
  }
  .mobile-filter-field span {
    font-size: 8.8px !important;
    line-height: 1 !important;
    color: rgba(247, 247, 242, 0.48) !important;
  }
  .mobile-filter-field select {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 20px 0 7px !important;
    font-size: 12.5px !important;
    line-height: 26px !important;
    font-weight: 600 !important;
    color: rgba(247, 247, 242, 0.88) !important;
    background: #090909 !important;
    border-color: rgba(247, 247, 242, 0.18) !important;
  }

  /* Mobile cards: default is content-only, fields stay folded */
  .todo-table tr,
  .schedule-table tr {
    padding: 9px 10px !important;
  }
  .todo-table tr:not(.mobile-expanded) td:not(:first-child):not(.todo-content-cell):not(:last-child),
  .schedule-table tr:not(.mobile-expanded) td:not(.schedule-content-cell):not(:last-child) {
    display: none !important;
  }
  .todo-table tr:not(.mobile-expanded) td:first-child {
    display: flex !important;
  }
  .todo-table tr:not(.mobile-expanded),
  .schedule-table tr:not(.mobile-expanded) {
    padding-bottom: 7px !important;
  }
  .todo-table tr.mobile-expanded,
  .schedule-table tr.mobile-expanded {
    padding-bottom: 10px !important;
  }
  .todo-table .todo-content-cell,
  .schedule-table .schedule-content-cell {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
  }
  .todo-table tr.mobile-expanded .todo-content-cell,
  .schedule-table tr.mobile-expanded .schedule-content-cell {
    border-bottom: 1px solid rgba(247, 247, 242, 0.12) !important;
    margin-bottom: 3px !important;
    padding-bottom: 8px !important;
  }

  .todo-table td:last-child,
  .schedule-table td:last-child {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    border-bottom: 0 !important;
    padding: 5px 0 0 !important;
  }
  .todo-table tr:not(.mobile-expanded) td:last-child,
  .schedule-table tr:not(.mobile-expanded) td:last-child {
    padding-top: 0 !important;
  }
  .mobile-row-toggle {
    flex: 0 0 auto !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(247, 247, 242, 0.20) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(247, 247, 242, 0.62) !important;
    font-size: 9.5px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
  }
  .mobile-expanded .mobile-row-toggle {
    color: var(--surface) !important;
    border-color: rgba(247, 247, 242, 0.34) !important;
  }
  .todo-table tr:not(.mobile-expanded) .inline-table-actions,
  .schedule-table tr:not(.mobile-expanded) .inline-table-actions {
    display: none !important;
  }
  .todo-table tr.mobile-expanded .inline-table-actions,
  .schedule-table tr.mobile-expanded .inline-table-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
  }

  .todo-table td::before,
  .schedule-table td::before {
    font-size: 8.8px !important;
    color: rgba(247, 247, 242, 0.46) !important;
  }
  .todo-table .table-field-read,
  .schedule-table .table-field-read {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .todo-table .quick-todo-input,
  .schedule-table .quick-todo-input,
  .todo-table .table-field-input,
  .schedule-table .table-field-input {
    font-size: 13px !important;
  }
}

/* v89: mobile daily log outline treatment
   Root logs stay as blocks; child nodes return to a compact PC-like outline. */
@media (max-width: 760px) {
  body[data-mode="log"] .outliner {
    overflow: visible;
  }

  /* Root daily-log entries keep a light block boundary. */
  body[data-mode="log"] .outliner > .node {
    margin: 0 0 10px !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row {
    padding: 7px 8px 6px !important;
    border: 1px solid rgba(247, 247, 242, 0.18) !important;
    background: rgba(247, 247, 242, 0.026) !important;
  }

  /* Children should read like an outline / markdown list, not nested cards. */
  body[data-mode="log"] .outliner > .node > .children,
  body[data-mode="log"] .children {
    margin: 2px 0 4px 18px !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }

  body[data-mode="log"] .children .node {
    margin: 0 !important;
  }

  body[data-mode="log"] .children .node + .node {
    margin-top: 2px !important;
  }

  body[data-mode="log"] .children .node-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 3px 5px !important;
    min-height: 24px !important;
    padding: 1px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-mode="log"] .children .node.routine-instance > .node-row {
    border: 0 !important;
    background: transparent !important;
  }

  body[data-mode="log"] .children .time-stamp {
    display: none !important;
  }

  body[data-mode="log"] .children .handle {
    order: 0 !important;
    width: 14px !important;
    height: 22px !important;
    flex: 0 0 14px !important;
    align-self: flex-start !important;
    margin: 0 !important;
    opacity: 0.68 !important;
  }

  body[data-mode="log"] .children .node-toggle,
  body[data-mode="log"] .children .node-bullet {
    width: 14px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-size: 10px !important;
  }

  body[data-mode="log"] .children .favorite-node-btn {
    order: 1 !important;
    width: 16px !important;
    height: 22px !important;
    flex: 0 0 16px !important;
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 22px !important;
    opacity: 0.56 !important;
  }

  body[data-mode="log"] .children .log-todo-checkbox {
    order: 2 !important;
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    margin: 4px 2px 0 0 !important;
    align-self: flex-start !important;
    transform: scale(0.84) !important;
  }

  body[data-mode="log"] .children .content {
    order: 3 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 22px !important;
    padding: 0 !important;
    font-size: 13.3px !important;
    line-height: 1.48 !important;
  }

  body[data-mode="log"] .children .node-row.has-log-todo-checkbox .content,
  body[data-mode="log"] .children .node-row:has(.log-todo-checkbox) .content {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  /* Supertags should sit inline with the sentence whenever possible. */
  body[data-mode="log"] .node-row .supertype-badge,
  body[data-mode="log"] .node-row .source-chip {
    order: 4 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-self: baseline !important;
    max-width: 44vw !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 2px 0 0 2px !important;
    padding: 0 4px !important;
    font-size: 8px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-mode="log"] .children .supertype-badge,
  body[data-mode="log"] .children .source-chip {
    max-width: 32vw !important;
    opacity: 0.78 !important;
  }

  body[data-mode="log"] .supertype-badge > span:first-child {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-mode="log"] .supertype-badge button {
    flex: 0 0 auto !important;
    font-size: 7px !important;
  }

  /* Root content no longer forces every badge to the next line. */
  body[data-mode="log"] .outliner > .node > .node-row > .content {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 0 !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row.has-log-todo-checkbox > .content,
  body[data-mode="log"] .outliner > .node > .node-row:has(.log-todo-checkbox) > .content {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  /* Child action buttons become small outline controls, not a second toolbar. */
  body[data-mode="log"] .children .add-child-node,
  body[data-mode="log"] .children .add-tag,
  body[data-mode="log"] .children .hide-log,
  body[data-mode="log"] .children .delete-node {
    order: 5 !important;
    width: auto !important;
    min-width: 16px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
    margin: 2px 0 0 0 !important;
    padding: 0 3px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(247, 247, 242, 0.42) !important;
    font-size: 8px !important;
    line-height: 18px !important;
    opacity: 0.62 !important;
  }

  body[data-mode="log"] .children .add-child-node {
    margin-left: 0 !important;
  }

  body[data-mode="log"] .children .delete-node {
    color: rgba(201, 91, 78, 0.64) !important;
  }

  /* Field blocks under child nodes should not reintroduce the lost indentation line. */
  body[data-mode="log"] .children .field-block,
  body[data-mode="log"] .children .field-block.collapsed {
    margin: 2px 0 5px 19px !important;
    padding: 3px 0 3px 0 !important;
    border-left: 0 !important;
    background: transparent !important;
  }

  body[data-mode="log"] .children .field-summary,
  body[data-mode="log"] .children .field-inline-summary {
    font-size: 8.8px !important;
    line-height: 1.45 !important;
    color: rgba(247, 247, 242, 0.45) !important;
  }

  body[data-mode="log"] .children .field-actions {
    margin-top: 2px !important;
  }

  body[data-mode="log"] .children .field-collapse-small {
    font-size: 8px !important;
    padding: 0 4px !important;
    min-height: 18px !important;
  }
}


/* v90: mobile parent-block outline correction */
@media (max-width: 760px) {
  /* More air after the top identity divider before the page title. */
  .header {
    margin-top: 16px !important;
    padding-top: 13px !important;
  }

  .date-title {
    font-size: 16px !important;
    line-height: 1.24 !important;
  }

  .date-sub {
    margin-top: 4px !important;
    font-size: 10px !important;
  }

  /* Bottom tabs: slightly lighter charcoal, no odd safe-area vertical fragments. */
  .app {
    padding-bottom: calc(54px + env(safe-area-inset-bottom)) !important;
  }
  .mode-toggle {
    height: calc(50px + env(safe-area-inset-bottom)) !important;
    min-height: calc(50px + env(safe-area-inset-bottom)) !important;
    padding: 0 0 env(safe-area-inset-bottom) 0 !important;
    align-items: stretch !important;
    background: #202020 !important;
    border-top: 1px solid rgba(247, 247, 242, 0.20) !important;
    overflow-y: hidden !important;
  }
  .mode-toggle button {
    flex: 0 0 86px !important;
    min-width: 86px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-right: 1px solid rgba(247, 247, 242, 0.18) !important;
    background: #202020 !important;
    color: rgba(247, 247, 242, 0.76) !important;
    line-height: 50px !important;
    box-shadow: inset 0 1px 0 rgba(247, 247, 242, 0.08) !important;
  }
  .mode-toggle button.active {
    height: 50px !important;
    min-height: 50px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-right-color: var(--surface) !important;
    line-height: 50px !important;
    box-shadow: none !important;
  }

  /* Filter controls: no outer box, much smaller visual type. */
  .mobile-filter-panel {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    margin: 4px 0 11px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .mobile-filter-field {
    display: inline-grid !important;
    grid-template-columns: auto minmax(78px, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    max-width: 46% !important;
  }
  .mobile-filter-field span {
    font-size: 7.8px !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    color: rgba(247, 247, 242, 0.42) !important;
  }
  .mobile-filter-field select {
    height: 23px !important;
    min-height: 23px !important;
    padding: 0 17px 0 5px !important;
    border: 1px solid rgba(247, 247, 242, 0.15) !important;
    background: #080808 !important;
    color: rgba(247, 247, 242, 0.82) !important;
    font-size: 10.4px !important;
    line-height: 21px !important;
    font-weight: 500 !important;
  }

  /* Schedule table: '필드 보기' should read as a small text link, not a button. */
  .schedule-table .mobile-row-toggle {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(247, 247, 242, 0.50) !important;
    font-size: 9.2px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
  }
  .schedule-table .mobile-expanded .mobile-row-toggle {
    color: rgba(247, 247, 242, 0.66) !important;
  }

  /* Todo mobile card: explicit grid prevents checkbox from overlapping the title. */
  .todo-table tr {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: start !important;
    padding: 9px 10px !important;
    padding-left: 10px !important;
  }
  .todo-table td:first-child {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 22px !important;
    height: 24px !important;
    min-width: 22px !important;
    padding: 1px 0 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    border: 0 !important;
  }
  .todo-table .todo-content-cell {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 0 0 5px !important;
    margin: 0 !important;
  }
  .todo-table td:not(:first-child):not(.todo-content-cell) {
    grid-column: 1 / -1 !important;
  }
  .todo-table td:last-child {
    grid-column: 1 / -1 !important;
  }
  .todo-table .quick-todo-input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    margin: 0 !important;
  }

  /* Daily log: one parent block contains its children. */
  body[data-mode="log"] .outliner > .node {
    margin: 0 0 10px !important;
    padding: 8px 8px 7px !important;
    border: 1px solid rgba(247, 247, 242, 0.18) !important;
    background: rgba(247, 247, 242, 0.026) !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body[data-mode="log"] .outliner > .node > .children {
    margin: 5px 0 0 0 !important;
    padding: 4px 0 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(247, 247, 242, 0.075) !important;
  }
  body[data-mode="log"] .children .children {
    margin: 1px 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body[data-mode="log"] .children .node-row {
    padding: 1px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Put bullets/toggles on the text line, not beside the timestamp. */
  body[data-mode="log"] .node-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 2px 5px !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row > .time-stamp {
    order: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 0 1px !important;
    height: 14px !important;
    line-height: 14px !important;
  }
  body[data-mode="log"] .handle {
    order: 1 !important;
    width: 13px !important;
    flex: 0 0 13px !important;
    height: 21px !important;
    margin: 0 !important;
    align-self: flex-start !important;
  }
  body[data-mode="log"] .node-toggle,
  body[data-mode="log"] .node-bullet {
    width: 13px !important;
    height: 21px !important;
    line-height: 21px !important;
    font-size: 10px !important;
  }
  body[data-mode="log"] .favorite-node-btn {
    order: 2 !important;
    width: 15px !important;
    flex: 0 0 15px !important;
    height: 21px !important;
    margin: 0 !important;
    line-height: 21px !important;
  }
  body[data-mode="log"] .log-todo-checkbox {
    order: 3 !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 2px 1px 0 0 !important;
    align-self: flex-start !important;
    transform: none !important;
  }
  body[data-mode="log"] .content {
    order: 4 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    min-height: 21px !important;
    line-height: 1.45 !important;
    font-size: 13.2px !important;
  }
  body[data-mode="log"] .node-row .supertype-badge,
  body[data-mode="log"] .node-row .source-chip {
    order: 5 !important;
    align-self: flex-start !important;
    margin-top: 2px !important;
  }
  body[data-mode="log"] .add-child-node,
  body[data-mode="log"] .hide-log,
  body[data-mode="log"] .delete-node,
  body[data-mode="log"] .add-tag {
    order: 6 !important;
    align-self: flex-start !important;
  }
  body[data-mode="log"] .outliner > .node > .field-block,
  body[data-mode="log"] .outliner > .node > .field-block.collapsed {
    margin: 3px 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
}

/* v91: mobile tab views use parent-block outlines instead of repeating child cards. */
.mobile-node-children-outline { display: none; }

@media (max-width: 760px) {
  .mobile-node-children-outline {
    display: block;
    margin: 7px 0 1px;
    padding: 6px 0 0;
    border-top: 1px solid rgba(247, 247, 242, 0.075);
  }

  .mobile-node-child-line {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr) auto;
    gap: 5px;
    align-items: start;
    min-width: 0;
    margin: 0;
    padding: 1px 0 1px calc(var(--depth, 0) * 13px);
    border: 0 !important;
    background: transparent !important;
    color: rgba(247, 247, 242, 0.78);
  }

  .mobile-node-child-line + .mobile-node-child-line {
    margin-top: 1px;
  }

  .mobile-node-child-marker {
    width: 13px;
    height: 20px;
    min-width: 13px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(247, 247, 242, 0.42);
    font-size: 9.8px;
    line-height: 20px;
    text-align: center;
    box-shadow: none;
  }

  .mobile-node-child-content {
    min-width: 0;
    padding: 0;
    font-size: 12.7px;
    line-height: 1.46;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: rgba(247, 247, 242, 0.82);
  }

  .mobile-node-child-tag {
    align-self: start;
    margin: 2px 0 0 4px;
    padding: 0 3px;
    border: 1px solid rgba(247, 247, 242, 0.12);
    color: rgba(247, 247, 242, 0.43);
    font-size: 7.5px;
    line-height: 1.45;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .mobile-node-child-nested {
    grid-column: 1 / -1;
    margin: 1px 0 0 13px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
  }

  .supertag-table .todo-content-cell .mobile-node-children-outline,
  .supertag-table .schedule-content-cell .mobile-node-children-outline,
  .supertag-table td .mobile-node-children-outline,
  .trace-item .mobile-node-children-outline {
    width: 100%;
  }

  .supertag-table tr:has(.mobile-node-children-outline),
  .trace-item:has(.mobile-node-children-outline) {
    padding-bottom: 8px !important;
  }

  .supertag-table td .mobile-node-children-outline .project-link,
  .trace-item .mobile-node-children-outline .project-link {
    font-size: inherit;
  }

  /* The single-node page should follow the same parent-block rhythm as daily log. */
  body[data-mode="node"] .outliner > .node {
    margin: 0 0 10px !important;
    padding: 8px 8px 7px !important;
    border: 1px solid rgba(247, 247, 242, 0.18) !important;
    background: rgba(247, 247, 242, 0.026) !important;
  }
  body[data-mode="node"] .outliner > .node > .node-row {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body[data-mode="node"] .outliner > .node > .children {
    margin: 5px 0 0 0 !important;
    padding: 4px 0 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(247, 247, 242, 0.075) !important;
  }
  body[data-mode="node"] .children .children {
    margin: 1px 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body[data-mode="node"] .children .node-row {
    padding: 1px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body[data-mode="node"] .node-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 2px 5px !important;
  }
  body[data-mode="node"] .outliner > .node > .node-row > .time-stamp {
    order: 0 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 0 1px !important;
    height: 14px !important;
    line-height: 14px !important;
  }
  body[data-mode="node"] .handle {
    order: 1 !important;
    width: 13px !important;
    flex: 0 0 13px !important;
    height: 21px !important;
    margin: 0 !important;
    align-self: flex-start !important;
  }
  body[data-mode="node"] .node-toggle,
  body[data-mode="node"] .node-bullet {
    width: 13px !important;
    height: 21px !important;
    line-height: 21px !important;
    font-size: 10px !important;
  }
  body[data-mode="node"] .favorite-node-btn {
    order: 2 !important;
    width: 15px !important;
    flex: 0 0 15px !important;
    height: 21px !important;
    margin: 0 !important;
    line-height: 21px !important;
  }
  body[data-mode="node"] .log-todo-checkbox {
    order: 3 !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 2px 1px 0 0 !important;
    align-self: flex-start !important;
    transform: none !important;
  }
  body[data-mode="node"] .content {
    order: 4 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    min-height: 21px !important;
    line-height: 1.45 !important;
    font-size: 13.2px !important;
  }
  body[data-mode="node"] .node-row .supertype-badge,
  body[data-mode="node"] .node-row .source-chip {
    order: 5 !important;
    align-self: flex-start !important;
    margin-top: 2px !important;
  }
  body[data-mode="node"] .add-child-node,
  body[data-mode="node"] .hide-log,
  body[data-mode="node"] .delete-node,
  body[data-mode="node"] .add-tag {
    order: 6 !important;
    align-self: flex-start !important;
  }
}

/* v92: child outline baseline fix
   Child rows now use a fixed inline grid so the bullet/toggle belongs to the
   text line, not an upper utility row. */
@media (max-width: 760px) {
  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    display: grid !important;
    grid-template-columns: 13px minmax(0, 1fr) auto auto auto auto auto !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
    flex-wrap: nowrap !important;
    min-height: 20px !important;
    padding: 1px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-mode="log"] .children .node-row.has-log-todo-checkbox,
  body[data-mode="log"] .children .node-row:has(.log-todo-checkbox),
  body[data-mode="node"] .children .node-row.has-log-todo-checkbox,
  body[data-mode="node"] .children .node-row:has(.log-todo-checkbox) {
    grid-template-columns: 13px 15px minmax(0, 1fr) auto auto auto auto auto !important;
  }

  body[data-mode="log"] .children .node-row > *,
  body[data-mode="node"] .children .node-row > * {
    order: 0 !important;
  }

  body[data-mode="log"] .children .time-stamp,
  body[data-mode="node"] .children .time-stamp {
    display: none !important;
  }

  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 13px !important;
    min-width: 13px !important;
    height: 19px !important;
    min-height: 19px !important;
    line-height: 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: start !important;
    transform: translateY(1px) !important;
  }

  body[data-mode="log"] .children .node-toggle,
  body[data-mode="log"] .children .node-bullet,
  body[data-mode="node"] .children .node-toggle,
  body[data-mode="node"] .children .node-bullet {
    width: 13px !important;
    height: 19px !important;
    line-height: 19px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
  }

  body[data-mode="log"] .children .node-toggle:empty,
  body[data-mode="node"] .children .node-toggle:empty {
    display: none !important;
  }

  body[data-mode="log"] .children .log-todo-checkbox,
  body[data-mode="node"] .children .log-todo-checkbox {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    margin: 3px 0 0 !important;
    align-self: start !important;
    transform: scale(0.84) !important;
  }

  body[data-mode="log"] .children .content,
  body[data-mode="node"] .children .content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13.1px !important;
    line-height: 1.48 !important;
    align-self: start !important;
  }

  body[data-mode="log"] .children .node-row.has-log-todo-checkbox .content,
  body[data-mode="log"] .children .node-row:has(.log-todo-checkbox) .content,
  body[data-mode="node"] .children .node-row.has-log-todo-checkbox .content,
  body[data-mode="node"] .children .node-row:has(.log-todo-checkbox) .content {
    grid-column: 3 !important;
  }

  body[data-mode="log"] .children .favorite-node-btn,
  body[data-mode="node"] .children .favorite-node-btn {
    grid-row: 1 !important;
    width: 14px !important;
    height: 19px !important;
    min-width: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 19px !important;
    align-self: start !important;
    transform: translateY(1px) !important;
  }

  body[data-mode="log"] .children .supertype-badge,
  body[data-mode="log"] .children .source-chip,
  body[data-mode="node"] .children .supertype-badge,
  body[data-mode="node"] .children .source-chip {
    grid-row: 1 !important;
    align-self: start !important;
    margin: 3px 0 0 2px !important;
    max-width: 28vw !important;
  }

  body[data-mode="log"] .children .add-child-node,
  body[data-mode="log"] .children .add-tag,
  body[data-mode="log"] .children .hide-log,
  body[data-mode="log"] .children .delete-node,
  body[data-mode="node"] .children .add-child-node,
  body[data-mode="node"] .children .add-tag,
  body[data-mode="node"] .children .hide-log,
  body[data-mode="node"] .children .delete-node {
    grid-row: 1 !important;
    align-self: start !important;
    height: 18px !important;
    min-height: 18px !important;
    line-height: 18px !important;
    margin: 1px 0 0 !important;
    padding: 0 2px !important;
  }

  /* Card/table outline children use the same optical baseline. */
  .mobile-node-child-line {
    grid-template-columns: 13px minmax(0, 1fr) auto !important;
    align-items: start !important;
    column-gap: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mobile-node-child-marker {
    height: 18px !important;
    min-height: 18px !important;
    line-height: 18px !important;
    font-size: 9.8px !important;
    transform: translateY(2px) !important;
  }

  .mobile-node-child-content {
    font-size: 12.7px !important;
    line-height: 1.46 !important;
    padding: 0 !important;
  }

  .mobile-node-child-tag {
    margin-top: 3px !important;
  }
}

/* v95: final mobile node-row system reset
   Keeps child nodes inside the parent block, with inline bullet / checkbox / tag rhythm. */
@media (max-width: 760px) {
  /* Header rhythm: title no longer sticks to the divider. */
  .topbar {
    padding-bottom: 10px !important;
  }
  .header {
    margin-top: 18px !important;
    padding-top: 16px !important;
    padding-bottom: 12px !important;
  }

  /* Mobile bottom tabs: stable charcoal strip without broken vertical fragments. */
  .app {
    padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }
  .mode-toggle {
    height: calc(50px + env(safe-area-inset-bottom)) !important;
    min-height: calc(50px + env(safe-area-inset-bottom)) !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    background: #242424 !important;
    border-top: 1px solid rgba(247,247,242,.18) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .mode-toggle button {
    height: 50px !important;
    min-height: 50px !important;
    line-height: 50px !important;
    background: #242424 !important;
    border: 0 !important;
    border-right: 1px solid rgba(247,247,242,.16) !important;
    box-shadow: inset 0 1px 0 rgba(247,247,242,.055) !important;
  }
  .mode-toggle button.active {
    height: 50px !important;
    min-height: 50px !important;
    line-height: 50px !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
  }

  /* Compact filter select controls: remove box-in-box feeling. */
  .mobile-filter-panel {
    gap: 5px 9px !important;
    margin: 2px 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .mobile-filter-field {
    gap: 4px !important;
    max-width: 48% !important;
  }
  .mobile-filter-field span {
    font-size: 7.2px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: rgba(247,247,242,.40) !important;
  }
  .mobile-filter-field select {
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 16px 0 4px !important;
    font-size: 8.8px !important;
    line-height: 18px !important;
    border-color: rgba(247,247,242,.12) !important;
  }

  /* '필드 보기' is a tiny text affordance, not a boxed button. */
  .mobile-row-toggle,
  .todo-table .mobile-row-toggle,
  .schedule-table .mobile-row-toggle {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(247,247,242,.46) !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    text-align: left !important;
  }
  .mobile-expanded .mobile-row-toggle,
  .todo-table .mobile-expanded .mobile-row-toggle,
  .schedule-table .mobile-expanded .mobile-row-toggle {
    color: rgba(247,247,242,.64) !important;
  }

  /* Project tree: restore visible hierarchy. Earlier mobile padding rules overrode inline depth. */
  .project-tree-row {
    padding-left: calc(8px + (var(--project-depth, 0) * 18px)) !important;
    padding-right: 8px !important;
  }
  .project-tree-row[style] {
    padding-left: calc(8px + (var(--project-depth, 0) * 18px)) !important;
  }
  .project-tree-toggle {
    opacity: .8 !important;
  }

  /* Parent block shell for daily log and single-node page. */
  body[data-mode="log"] .outliner > .node,
  body[data-mode="node"] .outliner > .node {
    margin: 0 0 10px !important;
    padding: 8px 8px 7px !important;
    border: 1px solid rgba(247,247,242,.18) !important;
    background: rgba(247,247,242,.026) !important;
  }

  /* Root node row: timestamp row + compact action controls on the right, content row below. */
  body[data-mode="log"] .outliner > .node > .node-row,
  body[data-mode="node"] .outliner > .node > .node-row {
    display: grid !important;
    grid-template-columns: 13px 16px minmax(0, 1fr) min-content min-content min-content min-content !important;
    grid-template-rows: 15px auto !important;
    column-gap: 4px !important;
    row-gap: 2px !important;
    align-items: start !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 13px minmax(0, 1fr) min-content min-content min-content min-content !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row > .time-stamp,
  body[data-mode="node"] .outliner > .node > .node-row > .time-stamp {
    grid-column: 1 / 4 !important;
    grid-row: 1 !important;
    width: auto !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 8.9px !important;
    line-height: 15px !important;
    color: rgba(247,247,242,.43) !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .time-stamp,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .time-stamp {
    grid-column: 1 / 3 !important;
  }

  /* Root action buttons: stay on timestamp line, visually quiet. */
  body[data-mode="log"] .outliner > .node > .node-row > .add-child-node,
  body[data-mode="node"] .outliner > .node > .node-row > .add-child-node { grid-column: 4 !important; }
  body[data-mode="log"] .outliner > .node > .node-row > .hide-log,
  body[data-mode="node"] .outliner > .node > .node-row > .hide-log { grid-column: 5 !important; }
  body[data-mode="log"] .outliner > .node > .node-row > .delete-node,
  body[data-mode="node"] .outliner > .node > .node-row > .delete-node { grid-column: 6 !important; }
  body[data-mode="log"] .outliner > .node > .node-row > .add-tag,
  body[data-mode="node"] .outliner > .node > .node-row > .add-tag { grid-column: 7 !important; }
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .add-child-node,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .add-child-node { grid-column: 3 !important; }
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .hide-log,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .hide-log { grid-column: 4 !important; }
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .delete-node,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .delete-node { grid-column: 5 !important; }
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .add-tag,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .add-tag { grid-column: 6 !important; }
  body[data-mode="log"] .outliner > .node > .node-row > .add-child-node,
  body[data-mode="log"] .outliner > .node > .node-row > .hide-log,
  body[data-mode="log"] .outliner > .node > .node-row > .delete-node,
  body[data-mode="log"] .outliner > .node > .node-row > .add-tag,
  body[data-mode="node"] .outliner > .node > .node-row > .add-child-node,
  body[data-mode="node"] .outliner > .node > .node-row > .hide-log,
  body[data-mode="node"] .outliner > .node > .node-row > .delete-node,
  body[data-mode="node"] .outliner > .node > .node-row > .add-tag {
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    min-width: 0 !important;
    height: 14px !important;
    min-height: 14px !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(247,247,242,.42) !important;
    font-size: 8px !important;
    line-height: 14px !important;
    opacity: 1 !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row > .delete-node,
  body[data-mode="node"] .outliner > .node > .node-row > .delete-node {
    color: rgba(255,114,103,.58) !important;
  }

  /* Root content line: bullet / checkbox / text / tag all share one baseline. */
  body[data-mode="log"] .outliner > .node > .node-row > .handle,
  body[data-mode="node"] .outliner > .node > .node-row > .handle {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 13px !important;
    min-width: 13px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
    transform: translateY(1px) !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row > .log-todo-checkbox,
  body[data-mode="node"] .outliner > .node > .node-row > .log-todo-checkbox {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    margin: 3px 0 0 !important;
    align-self: start !important;
    transform: scale(.88) !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row > .content,
  body[data-mode="node"] .outliner > .node > .node-row > .content {
    grid-column: 3 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.1px !important;
    line-height: 1.48 !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .content,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .content {
    grid-column: 2 !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row > .supertype-badge,
  body[data-mode="log"] .outliner > .node > .node-row > .source-chip,
  body[data-mode="node"] .outliner > .node > .node-row > .supertype-badge,
  body[data-mode="node"] .outliner > .node > .node-row > .source-chip {
    grid-column: 4 / -1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: start !important;
    max-width: 64px !important;
    height: 14px !important;
    min-height: 14px !important;
    margin: 3px 0 0 4px !important;
    padding: 0 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 7.2px !important;
    line-height: 12px !important;
  }
  body[data-mode="log"] .supertype-badge > span:first-child,
  body[data-mode="node"] .supertype-badge > span:first-child {
    max-width: 52px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Children stay inside parent block, but visibly read as a subordinate outline panel. */
  body[data-mode="log"] .outliner > .node > .children,
  body[data-mode="node"] .outliner > .node > .children {
    margin: 6px -1px 0 !important;
    padding: 6px 0 2px !important;
    border-top: 1px solid rgba(247,247,242,.09) !important;
    border-left: 0 !important;
    background: rgba(247,247,242,.014) !important;
  }
  body[data-mode="log"] .children .children,
  body[data-mode="node"] .children .children {
    margin: 3px 0 0 15px !important;
    padding: 2px 0 0 !important;
    border-top: 1px solid rgba(247,247,242,.045) !important;
    border-left: 0 !important;
    background: transparent !important;
  }
  body[data-mode="log"] .children .node,
  body[data-mode="node"] .children .node {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body[data-mode="log"] .children .node + .node,
  body[data-mode="node"] .children .node + .node {
    margin-top: 4px !important;
  }

  /* Child rows: bullet/checkbox/text baseline is fixed; no timestamp line. */
  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    display: grid !important;
    grid-template-columns: 13px 15px minmax(0,1fr) min-content min-content min-content min-content min-content !important;
    grid-template-rows: auto !important;
    column-gap: 4px !important;
    row-gap: 0 !important;
    align-items: start !important;
    min-height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 13px minmax(0,1fr) min-content min-content min-content min-content min-content !important;
  }
  body[data-mode="log"] .children .time-stamp,
  body[data-mode="node"] .children .time-stamp {
    display: none !important;
  }
  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 13px !important;
    min-width: 13px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(1px) !important;
  }
  body[data-mode="log"] .node-toggle,
  body[data-mode="log"] .node-bullet,
  body[data-mode="node"] .node-toggle,
  body[data-mode="node"] .node-bullet {
    width: 13px !important;
    height: 20px !important;
    line-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
  }
  body[data-mode="log"] .children .log-todo-checkbox,
  body[data-mode="node"] .children .log-todo-checkbox {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    margin: 3px 0 0 !important;
    transform: scale(.84) !important;
  }
  body[data-mode="log"] .children .content,
  body[data-mode="node"] .children .content {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12.8px !important;
    line-height: 1.55 !important;
  }
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox) .content,
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) .content {
    grid-column: 2 !important;
  }
  body[data-mode="log"] .children .supertype-badge,
  body[data-mode="log"] .children .source-chip,
  body[data-mode="node"] .children .supertype-badge,
  body[data-mode="node"] .children .source-chip {
    grid-column: 4 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    max-width: 50px !important;
    height: 13px !important;
    min-height: 13px !important;
    margin: 4px 0 0 2px !important;
    padding: 0 2px !important;
    font-size: 6.8px !important;
    line-height: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body[data-mode="log"] .children .add-child-node,
  body[data-mode="node"] .children .add-child-node { grid-column: 5 !important; }
  body[data-mode="log"] .children .hide-log,
  body[data-mode="node"] .children .hide-log { grid-column: 6 !important; }
  body[data-mode="log"] .children .delete-node,
  body[data-mode="node"] .children .delete-node { grid-column: 7 !important; }
  body[data-mode="log"] .children .add-tag,
  body[data-mode="node"] .children .add-tag { grid-column: 8 !important; }
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox) .add-child-node,
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) .add-child-node { grid-column: 4 !important; }
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox) .hide-log,
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) .hide-log { grid-column: 5 !important; }
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox) .delete-node,
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) .delete-node { grid-column: 6 !important; }
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox) .add-tag,
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) .add-tag { grid-column: 7 !important; }
  body[data-mode="log"] .children .add-child-node,
  body[data-mode="log"] .children .hide-log,
  body[data-mode="log"] .children .delete-node,
  body[data-mode="log"] .children .add-tag,
  body[data-mode="node"] .children .add-child-node,
  body[data-mode="node"] .children .hide-log,
  body[data-mode="node"] .children .delete-node,
  body[data-mode="node"] .children .add-tag {
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: end !important;
    height: 14px !important;
    min-height: 14px !important;
    min-width: 0 !important;
    margin: 3px 0 0 !important;
    padding: 0 1px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(247,247,242,.34) !important;
    font-size: 7.2px !important;
    line-height: 14px !important;
    opacity: 1 !important;
  }
  body[data-mode="log"] .children .delete-node,
  body[data-mode="node"] .children .delete-node {
    color: rgba(255,114,103,.48) !important;
  }

  /* Field blocks under nodes must not create another heavy card. */
  body[data-mode="log"] .field-block,
  body[data-mode="node"] .field-block,
  body[data-mode="log"] .field-block.collapsed,
  body[data-mode="node"] .field-block.collapsed {
    margin: 4px 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Child outlines embedded inside todo/schedule/tag/project cards. */
  .mobile-node-children-outline {
    display: block !important;
    margin: 7px 0 0 !important;
    padding: 6px 0 1px !important;
    border-top: 1px solid rgba(247,247,242,.08) !important;
    background: rgba(247,247,242,.012) !important;
  }
  .mobile-node-child-line {
    display: grid !important;
    grid-template-columns: 13px minmax(0,1fr) auto !important;
    column-gap: 5px !important;
    align-items: start !important;
    padding: 1px 0 1px calc(var(--depth, 0) * 14px) !important;
  }
  .mobile-node-child-line + .mobile-node-child-line {
    margin-top: 4px !important;
  }
  .mobile-node-child-marker {
    height: 18px !important;
    line-height: 18px !important;
    transform: translateY(1px) !important;
  }
  .mobile-node-child-content {
    font-size: 12.4px !important;
    line-height: 1.55 !important;
  }
  .mobile-node-child-tag {
    height: 12px !important;
    margin-top: 4px !important;
    padding: 0 2px !important;
    max-width: 46px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 6.8px !important;
    line-height: 10px !important;
  }
  .mobile-node-child-nested {
    margin-top: 4px !important;
  }
}

@media (max-width: 760px) {
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .supertype-badge,
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .source-chip,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .supertype-badge,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .source-chip {
    grid-column: 3 / -1 !important;
  }
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox) .supertype-badge,
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox) .source-chip,
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) .supertype-badge,
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) .source-chip {
    grid-column: 3 !important;
  }
}

/* v96: mobile swipe actions + tap-through todo/schedule cards
   Node action controls no longer reserve layout width. Swipe a node row left to reveal them. */
@media (max-width: 760px) {
  body[data-mode="log"] .node-row,
  body[data-mode="node"] .node-row,
  body[data-mode="tutorial"] .node-row {
    position: relative !important;
    overflow: visible !important;
  }

  /* Remove action columns from the visible row. */
  body[data-mode="log"] .outliner > .node > .node-row,
  body[data-mode="node"] .outliner > .node > .node-row {
    grid-template-columns: 13px 16px minmax(0, 1fr) auto !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 13px minmax(0, 1fr) auto !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row > .time-stamp,
  body[data-mode="node"] .outliner > .node > .node-row > .time-stamp {
    grid-column: 1 / -1 !important;
    padding-right: 74px !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row > .supertype-badge,
  body[data-mode="log"] .outliner > .node > .node-row > .source-chip,
  body[data-mode="node"] .outliner > .node > .node-row > .supertype-badge,
  body[data-mode="node"] .outliner > .node > .node-row > .source-chip {
    grid-column: 4 !important;
  }
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .supertype-badge,
  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .source-chip,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .supertype-badge,
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .source-chip {
    grid-column: 3 !important;
  }

  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    grid-template-columns: 13px 15px minmax(0, 1fr) auto !important;
  }
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 13px minmax(0, 1fr) auto !important;
  }
  body[data-mode="log"] .children .supertype-badge,
  body[data-mode="log"] .children .source-chip,
  body[data-mode="node"] .children .supertype-badge,
  body[data-mode="node"] .children .source-chip {
    grid-column: 4 !important;
  }
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox) .supertype-badge,
  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox) .source-chip,
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) .supertype-badge,
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) .source-chip {
    grid-column: 3 !important;
  }

  /* Action tray: hidden until swipe-left opens the row. */
  body[data-mode="log"] .node-row > .add-child-node,
  body[data-mode="log"] .node-row > .hide-log,
  body[data-mode="log"] .node-row > .delete-node,
  body[data-mode="log"] .node-row > .add-tag,
  body[data-mode="node"] .node-row > .add-child-node,
  body[data-mode="node"] .node-row > .hide-log,
  body[data-mode="node"] .node-row > .delete-node,
  body[data-mode="node"] .node-row > .add-tag,
  body[data-mode="tutorial"] .node-row > .add-child-node,
  body[data-mode="tutorial"] .node-row > .hide-log,
  body[data-mode="tutorial"] .node-row > .delete-node,
  body[data-mode="tutorial"] .node-row > .add-tag {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 12 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(247,247,242,.18) !important;
    border-right: 0 !important;
    background: #171717 !important;
    color: rgba(247,247,242,.70) !important;
    font-size: 8.5px !important;
    line-height: 16px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(6px) !important;
    transition: opacity .12s ease, transform .12s ease !important;
  }
  body[data-mode="log"] .node-row > .add-child-node,
  body[data-mode="node"] .node-row > .add-child-node,
  body[data-mode="tutorial"] .node-row > .add-child-node { right: 66px !important; }
  body[data-mode="log"] .node-row > .hide-log,
  body[data-mode="node"] .node-row > .hide-log,
  body[data-mode="tutorial"] .node-row > .hide-log { right: 44px !important; }
  body[data-mode="log"] .node-row > .delete-node,
  body[data-mode="node"] .node-row > .delete-node,
  body[data-mode="tutorial"] .node-row > .delete-node { right: 22px !important; color: rgba(255,114,103,.76) !important; }
  body[data-mode="log"] .node-row > .add-tag,
  body[data-mode="node"] .node-row > .add-tag,
  body[data-mode="tutorial"] .node-row > .add-tag { right: 0 !important; border-right: 1px solid rgba(247,247,242,.18) !important; }

  body[data-mode="log"] .node-row.mobile-actions-open > .add-child-node,
  body[data-mode="log"] .node-row.mobile-actions-open > .hide-log,
  body[data-mode="log"] .node-row.mobile-actions-open > .delete-node,
  body[data-mode="log"] .node-row.mobile-actions-open > .add-tag,
  body[data-mode="node"] .node-row.mobile-actions-open > .add-child-node,
  body[data-mode="node"] .node-row.mobile-actions-open > .hide-log,
  body[data-mode="node"] .node-row.mobile-actions-open > .delete-node,
  body[data-mode="node"] .node-row.mobile-actions-open > .add-tag,
  body[data-mode="tutorial"] .node-row.mobile-actions-open > .add-child-node,
  body[data-mode="tutorial"] .node-row.mobile-actions-open > .hide-log,
  body[data-mode="tutorial"] .node-row.mobile-actions-open > .delete-node,
  body[data-mode="tutorial"] .node-row.mobile-actions-open > .add-tag {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  /* The child outline can breathe now that utility controls are hidden. */
  body[data-mode="log"] .children .node + .node,
  body[data-mode="node"] .children .node + .node {
    margin-top: 5px !important;
  }

  /* Todo / schedule: mobile cards are entry points, not mini tables. */
  .todo-table tr.mobile-open-node-card,
  .schedule-table tr.mobile-open-node-card {
    cursor: pointer !important;
  }
  .todo-table tr.mobile-open-node-card td:not(:first-child):not(.todo-content-cell),
  .schedule-table tr.mobile-open-node-card td:not(.schedule-content-cell) {
    display: none !important;
  }
  .todo-table tr.mobile-open-node-card td:first-child {
    display: flex !important;
  }
  .todo-table tr.mobile-open-node-card td:last-child,
  .schedule-table tr.mobile-open-node-card td:last-child,
  .todo-table tr.mobile-open-node-card .mobile-row-toggle,
  .schedule-table tr.mobile-open-node-card .mobile-row-toggle,
  .todo-table tr.mobile-open-node-card .inline-table-actions,
  .schedule-table tr.mobile-open-node-card .inline-table-actions {
    display: none !important;
  }
  .todo-table tr.mobile-open-node-card,
  .schedule-table tr.mobile-open-node-card {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
  .todo-table tr.mobile-open-node-card .todo-content-cell,
  .schedule-table tr.mobile-open-node-card .schedule-content-cell {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .todo-table tr.mobile-open-node-card .readonly-content,
  .schedule-table tr.mobile-open-node-card .readonly-content {
    font-size: 13px !important;
    line-height: 1.48 !important;
  }
}

/* v97: mobile child rhythm and always-on sibling dividers
   Keep the v96 swipe tray exactly where it is, but make every child node easier
   to tap and visibly separated inside its parent block. */
@media (max-width: 760px) {
  /* The child area remains a single subordinate panel under the parent. */
  body[data-mode="log"] .outliner > .node > .children,
  body[data-mode="node"] .outliner > .node > .children {
    margin-top: 8px !important;
    padding: 0 !important;
    border-top: 1px solid rgba(247,247,242,.105) !important;
    background: rgba(247,247,242,.012) !important;
  }

  /* Expanding a child should not create a special extra divider. Dividers belong
     between sibling nodes, not only below opened nodes. */
  body[data-mode="log"] .children .children,
  body[data-mode="node"] .children .children {
    margin: 7px 0 0 15px !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
  }

  body[data-mode="log"] .children .node,
  body[data-mode="node"] .children .node {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Same divider between every child node at the same level. */
  body[data-mode="log"] .children > .node,
  body[data-mode="node"] .children > .node {
    padding: 7px 0 !important;
    border-top: 1px solid rgba(247,247,242,.075) !important;
  }

  body[data-mode="log"] .children > .node:first-child,
  body[data-mode="node"] .children > .node:first-child {
    border-top: 0 !important;
  }

  body[data-mode="log"] .children .node + .node,
  body[data-mode="node"] .children .node + .node {
    margin-top: 0 !important;
  }

  /* Larger hit area without disturbing the v96 swipe action tray. */
  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    min-height: 28px !important;
    padding: 0 !important;
    align-items: start !important;
    column-gap: 5px !important;
  }

  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle,
  body[data-mode="log"] .children .node-toggle,
  body[data-mode="log"] .children .node-bullet,
  body[data-mode="node"] .children .node-toggle,
  body[data-mode="node"] .children .node-bullet {
    height: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;
  }

  body[data-mode="log"] .children .log-todo-checkbox,
  body[data-mode="node"] .children .log-todo-checkbox {
    margin-top: 5px !important;
  }

  body[data-mode="log"] .children .content,
  body[data-mode="node"] .children .content {
    min-height: 26px !important;
    line-height: 1.62 !important;
    padding: 1px 0 !important;
  }

  body[data-mode="log"] .children .supertype-badge,
  body[data-mode="log"] .children .source-chip,
  body[data-mode="node"] .children .supertype-badge,
  body[data-mode="node"] .children .source-chip {
    margin-top: 6px !important;
  }

  /* Child outlines embedded in todo/schedule/tag/project/favorite cards follow
     the same rhythm: no mini-cards, just evenly separated outline rows. */
  .mobile-node-children-outline {
    margin-top: 8px !important;
    padding: 0 !important;
    border-top: 1px solid rgba(247,247,242,.105) !important;
    background: rgba(247,247,242,.012) !important;
  }

  .mobile-node-child-line {
    min-height: 28px !important;
    padding: 7px 0 7px calc(var(--depth, 0) * 14px) !important;
    border-top: 1px solid rgba(247,247,242,.075) !important;
  }

  .mobile-node-child-line:first-child {
    border-top: 0 !important;
  }

  .mobile-node-child-line + .mobile-node-child-line {
    margin-top: 0 !important;
  }

  .mobile-node-child-marker {
    height: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;
    transform: none !important;
  }

  .mobile-node-child-content {
    min-height: 26px !important;
    line-height: 1.62 !important;
    padding: 1px 0 !important;
  }

  .mobile-node-child-tag {
    margin-top: 6px !important;
  }

  .mobile-node-child-nested {
    margin-top: 0 !important;
  }
}

/* v1.8 — safe retry after rollback: mobile favorites/title/tab cleanup only.
   No data, date, sync, or filtering logic is changed here. */
.mobile-outline-root-toggle { display: none; }

@media (max-width: 760px) {
  /* Favorites: child outlines start folded and reveal only after this tiny text toggle. */
  .favorites-list .mobile-outline-root-toggle {
    display: inline-block !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(247,247,242,.48) !important;
    font-size: 8.8px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    text-align: left !important;
    box-shadow: none !important;
  }

  .favorites-list .mobile-outline-root-toggle + .mobile-node-children-outline {
    margin-top: 7px !important;
  }

  /* Bottom tabs: keep the browser-tab strip, but shorten divider lines so they
     do not touch the strip edges. */
  .mode-toggle button {
    position: relative !important;
    border-right: 0 !important;
  }

  .mode-toggle button::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 11px !important;
    bottom: 11px !important;
    width: 1px !important;
    background: rgba(247,247,242,.18) !important;
    pointer-events: none !important;
  }

  .mode-toggle button:last-child::after,
  .mode-toggle button.active::after {
    display: none !important;
  }

  .mode-toggle button.active + button::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 11px !important;
    bottom: 11px !important;
    width: 1px !important;
    background: rgba(247,247,242,.18) !important;
    pointer-events: none !important;
  }

  /* The bottom tab already names the current section on mobile. Avoid repeating
     the same heading immediately below it. */
  body[data-mode="tags"] .outliner > .view-title:first-child,
  body[data-mode="projects"] .outliner > .view-title:first-child,
  body[data-mode="favorites"] .outliner > .view-title:first-child {
    display: none !important;
  }
}

/* v1.8.2 — mobile pinned identity/status bar.
   The WORK LOG / save status / logout strip stays fixed at the top on phones. */
@media (max-width: 760px) {
  .app {
    padding-top: calc(62px + env(safe-area-inset-top)) !important;
  }

  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 115 !important;
    margin: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) var(--m-page-x) 9px !important;
    background: rgba(5, 5, 5, 0.992) !important;
    border-bottom: 1px solid rgba(247,247,242,.16) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.65) !important;
    transform: translateZ(0);
  }

  .header {
    margin-top: 10px !important;
  }

  .inline-tag-menu {
    z-index: 130 !important;
  }

  .modal-backdrop {
    z-index: 140 !important;
  }
}


/* v1.8.3 — equal confirm modal buttons.
   Keep destructive confirmation actions visually balanced on desktop and mobile. */
.confirm-modal .modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  justify-content: stretch;
}
.confirm-modal .modal-btn {
  width: 100%;
  min-width: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 !important;
  padding: 0 12px;
  line-height: 1;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  .confirm-modal .modal-actions {
    gap: 7px;
  }
  .confirm-modal .modal-btn {
    height: 38px;
    font-size: 11px;
  }
}

/* v1.8.4 — compact source supertag labels.
   Routine/GCal source labels use the main supertag outline itself instead of a nested chip. */
.source-chip {
  display: none !important;
}
.supertype-badge[data-source-compact],
.supertype-badge {
  gap: 3px;
}
@media (max-width: 760px) {
  .supertype-badge {
    max-width: 30vw !important;
  }
  body[data-mode="log"] .node-row .supertype-badge {
    max-width: 34vw !important;
  }
  body[data-mode="log"] .children .supertype-badge {
    max-width: 28vw !important;
  }
}

/* v1.8.5 — restore bottom tab strip geometry.
   v1.8.4 accidentally added a top padding band that looked like an extra divider.
   Keep the compact labels, but return the tabbar to a flush charcoal strip. */
@media (max-width: 760px) {
  .app {
    padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }
  .mode-toggle {
    height: calc(50px + env(safe-area-inset-bottom)) !important;
    min-height: calc(50px + env(safe-area-inset-bottom)) !important;
    padding: 0 0 env(safe-area-inset-bottom) 0 !important;
    align-items: stretch !important;
    background: #242424 !important;
    border-top: 1px solid rgba(247,247,242,.18) !important;
    box-sizing: border-box !important;
  }
  .mode-toggle button,
  .mode-toggle button.active {
    height: 50px !important;
    min-height: 50px !important;
    line-height: 50px !important;
  }
  .mode-toggle button::after,
  .mode-toggle button.active + button::before {
    top: 12px !important;
    bottom: 12px !important;
  }
}

/* v1.8.7 — PC punctuation copy toolbox */
.punctuation-box {
  position: fixed;
  right: 24px;
  bottom: 18px;
  z-index: 180;
  font-family: "Noto Sans KR", sans-serif;
}
.punctuation-toggle {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid rgba(213, 132, 74, 0.82);
  background: rgba(213, 132, 74, 0.18);
  color: #f0b176;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(213, 132, 74, 0.08);
}
.punctuation-toggle:hover,
.punctuation-box.open .punctuation-toggle {
  background: #d5844a;
  color: #080808;
  border-color: #d5844a;
}
.punctuation-panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: 46px;
  width: 292px;
  max-width: calc(100vw - 48px);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 12px 38px rgba(0,0,0,0.48);
  overflow: hidden;
}
.punctuation-box.open .punctuation-panel { display: block; }
.punctuation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 25px;
  padding: 0 6px 0 8px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted-strong);
  font-size: 10.4px;
  line-height: 25px;
  letter-spacing: 0.035em;
}
.punctuation-close {
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.punctuation-close:hover {
  border-color: var(--border-soft);
  background: rgba(247,247,242,0.08);
  color: var(--surface);
}
.punctuation-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 0;
}
.punctuation-item {
  height: 35px;
  border: 0;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  color: var(--muted-strong);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 0;
}
.punctuation-item:nth-child(6n) { border-right: 0; }
.punctuation-item:hover,
.punctuation-item.copied {
  background: var(--surface);
  color: var(--ink);
}
.punctuation-item[data-pair="true"] {
  font-size: 13px;
  letter-spacing: 0.04em;
}
.punctuation-feedback {
  min-height: 21px;
  padding: 3px 8px 4px;
  color: var(--muted);
  font-size: 9.6px;
  line-height: 14px;
}

@media (max-width: 760px) {
  .punctuation-box { display: none; }
}


/* v1.8.7a — mobile touch targets without larger typography.
   Keep the bigger tap area from the mobile touch fix, but restore the compact
   visual font sizes so mobile text does not suddenly look zoomed-in. */
@media (max-width: 760px) {
  body[data-mode="log"] .outliner > .node > .node-row,
  body[data-mode="node"] .outliner > .node > .node-row {
    grid-template-columns: 52px 22px minmax(0, 1fr) auto !important;
    grid-template-rows: 17px auto !important;
    column-gap: 5px !important;
    row-gap: 3px !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
  }

  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    grid-template-columns: 52px 22px minmax(0, 1fr) auto !important;
    min-height: 34px !important;
    column-gap: 5px !important;
  }

  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
  }

  body[data-mode="log"] .children .node + .node,
  body[data-mode="node"] .children .node + .node {
    margin-top: 7px !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row > .handle,
  body[data-mode="node"] .outliner > .node > .node-row > .handle,
  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle {
    width: 52px !important;
    min-width: 52px !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    transform: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body[data-mode="log"] .node-toggle,
  body[data-mode="log"] .node-bullet,
  body[data-mode="node"] .node-toggle,
  body[data-mode="node"] .node-bullet {
    width: 25px !important;
    min-width: 25px !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  body[data-mode="log"] .node-toggle:empty,
  body[data-mode="node"] .node-toggle:empty {
    display: none !important;
  }

  body[data-mode="log"] .handle:has(.node-toggle:empty),
  body[data-mode="node"] .handle:has(.node-toggle:empty) {
    width: 34px !important;
    min-width: 34px !important;
  }

  body[data-mode="log"] .handle:has(.node-toggle:empty) .node-bullet,
  body[data-mode="node"] .handle:has(.node-toggle:empty) .node-bullet {
    width: 34px !important;
    min-width: 34px !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row > .log-todo-checkbox,
  body[data-mode="node"] .outliner > .node > .node-row > .log-todo-checkbox,
  body[data-mode="log"] .children .log-todo-checkbox,
  body[data-mode="node"] .children .log-todo-checkbox {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin-top: 7px !important;
    transform: none !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row > .content,
  body[data-mode="node"] .outliner > .node > .node-row > .content,
  body[data-mode="log"] .children .content,
  body[data-mode="node"] .children .content {
    min-height: 34px !important;
    padding: 5px 0 3px !important;
    font-size: 12.8px !important;
    line-height: 1.55 !important;
    touch-action: manipulation !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row > .content,
  body[data-mode="node"] .outliner > .node > .node-row > .content {
    font-size: 13.1px !important;
    line-height: 1.48 !important;
  }

  .mobile-node-child-line {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    column-gap: 7px !important;
    min-height: 34px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .mobile-node-child-marker {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 34px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transform: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-node-child-content {
    min-height: 34px !important;
    padding: 5px 0 3px !important;
    font-size: 12.4px !important;
    line-height: 1.55 !important;
  }
}


/* v1.8.7b — keep mobile body text compact, but make outline controls visibly tappable. */
@media (max-width: 760px) {
  body[data-mode="log"] .node-toggle,
  body[data-mode="log"] .node-bullet,
  body[data-mode="node"] .node-toggle,
  body[data-mode="node"] .node-bullet {
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  .mobile-node-child-marker {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

/* v1.8.7c — keep mobile bullet hit-area large, but pull text back toward bullet when there is no toggle. */
@media (max-width: 760px) {
  body[data-mode="log"] .handle:has(.node-toggle:empty),
  body[data-mode="node"] .handle:has(.node-toggle:empty) {
    width: 16px !important;
    min-width: 16px !important;
    flex: 0 0 16px !important;
    overflow: visible !important;
    position: relative !important;
  }

  body[data-mode="log"] .handle:has(.node-toggle:empty) .node-bullet,
  body[data-mode="node"] .handle:has(.node-toggle:empty) .node-bullet {
    width: 16px !important;
    min-width: 16px !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 34px !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
  }

  body[data-mode="log"] .handle:has(.node-toggle:empty) .node-bullet::before,
  body[data-mode="node"] .handle:has(.node-toggle:empty) .node-bullet::before {
    content: "";
    position: absolute;
    left: -9px;
    right: -9px;
    top: 0;
    bottom: 0;
  }

  body[data-mode="log"] .node-row:has(.node-toggle:empty),
  body[data-mode="node"] .node-row:has(.node-toggle:empty) {
    column-gap: 3px !important;
  }

  .mobile-node-child-line {
    grid-template-columns: 17px minmax(0, 1fr) auto !important;
    column-gap: 4px !important;
  }

  .mobile-node-child-marker {
    width: 17px !important;
    min-width: 17px !important;
    height: 34px !important;
    min-height: 34px !important;
    line-height: 34px !important;
    position: relative !important;
    overflow: visible !important;
  }

  .mobile-node-child-marker::before {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 0;
    bottom: 0;
  }
}

/* v1.8.7d — mobile child-node rhythm fix.
   Keep bullets/toggles tappable without letting their hit area create extra bottom whitespace. */
@media (max-width: 760px) {
  body[data-mode="log"] .children {
    margin-top: 1px !important;
    margin-bottom: 2px !important;
  }

  body[data-mode="log"] .children .node,
  body[data-mode="node"] .children .node {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body[data-mode="log"] .children .node + .node,
  body[data-mode="node"] .children .node + .node {
    margin-top: 0 !important;
  }

  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    align-items: center !important;
    min-height: 25px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    row-gap: 0 !important;
  }

  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle,
  body[data-mode="log"] .children .handle:has(.node-toggle:empty),
  body[data-mode="node"] .children .handle:has(.node-toggle:empty) {
    height: 25px !important;
    min-height: 25px !important;
    align-self: center !important;
  }

  body[data-mode="log"] .children .node-toggle,
  body[data-mode="log"] .children .node-bullet,
  body[data-mode="node"] .children .node-toggle,
  body[data-mode="node"] .children .node-bullet,
  body[data-mode="log"] .children .handle:has(.node-toggle:empty) .node-bullet,
  body[data-mode="node"] .children .handle:has(.node-toggle:empty) .node-bullet {
    height: 25px !important;
    min-height: 25px !important;
    line-height: 25px !important;
    align-items: center !important;
  }

  body[data-mode="log"] .children .handle:has(.node-toggle:empty) .node-bullet::before,
  body[data-mode="node"] .children .handle:has(.node-toggle:empty) .node-bullet::before {
    left: -9px !important;
    right: -9px !important;
    top: -5px !important;
    bottom: -5px !important;
  }

  body[data-mode="log"] .children .content,
  body[data-mode="node"] .children .content {
    min-height: 25px !important;
    padding-top: 1px !important;
    padding-bottom: 0 !important;
    line-height: 1.42 !important;
    align-self: center !important;
  }

  body[data-mode="log"] .children .favorite-node-btn,
  body[data-mode="node"] .children .favorite-node-btn,
  body[data-mode="log"] .children .log-todo-checkbox,
  body[data-mode="node"] .children .log-todo-checkbox {
    align-self: center !important;
  }

  body[data-mode="log"] .children .add-child-node,
  body[data-mode="log"] .children .add-tag,
  body[data-mode="log"] .children .hide-log,
  body[data-mode="log"] .children .delete-node,
  body[data-mode="node"] .children .add-child-node,
  body[data-mode="node"] .children .add-tag,
  body[data-mode="node"] .children .hide-log,
  body[data-mode="node"] .children .delete-node {
    margin-top: 0 !important;
    align-self: center !important;
  }

  .mobile-node-child-line {
    min-height: 25px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }

  .mobile-node-child-marker {
    height: 25px !important;
    min-height: 25px !important;
    line-height: 25px !important;
  }

  .mobile-node-child-marker::before {
    left: -8px !important;
    right: -8px !important;
    top: -5px !important;
    bottom: -5px !important;
  }

  .mobile-node-child-content {
    min-height: 25px !important;
    padding-top: 1px !important;
    padding-bottom: 0 !important;
    line-height: 1.42 !important;
  }
}

/* v1.8.7e — mobile child bullet size parity.
   Child-node bullets/toggles should visually match parent-node bullets/toggles;
   keep compact row rhythm and enlarged invisible tap areas. */
@media (max-width: 760px) {
  body[data-mode="log"] .children .node-toggle,
  body[data-mode="log"] .children .node-bullet,
  body[data-mode="node"] .children .node-toggle,
  body[data-mode="node"] .children .node-bullet,
  body[data-mode="log"] .children .handle:has(.node-toggle:empty) .node-bullet,
  body[data-mode="node"] .children .handle:has(.node-toggle:empty) .node-bullet {
    font-size: 16px !important;
    font-weight: 700 !important;
  }

  .mobile-node-child-marker {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
}

/* v1.8.7f — mobile outline alignment cleanup.
   1) Child bullets should not start further left than parent bullets.
   2) Rows with and without a toggle should reserve the same bullet slot.
   3) Bullet/toggle ↔ text spacing should stay consistent across hierarchy levels. */
@media (max-width: 760px) {
  /* Keep first-level child blocks optically aligned with the parent row shell. */
  body[data-mode="log"] .outliner > .node > .children,
  body[data-mode="node"] .outliner > .node > .children {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Nested children indent as a group, but keep the same local bullet/text rhythm. */
  body[data-mode="log"] .children .children,
  body[data-mode="node"] .children .children {
    margin-left: 18px !important;
  }

  /* Same spacing rhythm for parent rows and child rows. */
  body[data-mode="log"] .outliner > .node > .node-row,
  body[data-mode="node"] .outliner > .node > .node-row,
  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    column-gap: 4px !important;
  }

  /* Reserve two fixed icon slots inside the handle: [toggle][bullet].
     Even when there is no toggle, the empty slot stays reserved so the bullet
     sits in exactly the same x-position as rows that do have a toggle. */
  body[data-mode="log"] .outliner > .node > .node-row > .handle,
  body[data-mode="node"] .outliner > .node > .node-row > .handle,
  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle,
  body[data-mode="log"] .handle:has(.node-toggle:empty),
  body[data-mode="node"] .handle:has(.node-toggle:empty) {
    width: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    display: grid !important;
    grid-template-columns: 14px 14px !important;
    column-gap: 2px !important;
    align-items: center !important;
    justify-content: start !important;
    overflow: visible !important;
    transform: none !important;
  }

  body[data-mode="log"] .node-toggle,
  body[data-mode="log"] .node-bullet,
  body[data-mode="node"] .node-toggle,
  body[data-mode="node"] .node-bullet,
  body[data-mode="log"] .children .handle:has(.node-toggle:empty) .node-bullet,
  body[data-mode="node"] .children .handle:has(.node-toggle:empty) .node-bullet {
    width: 14px !important;
    min-width: 14px !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Keep the empty toggle slot, just hide the glyph. */
  body[data-mode="log"] .node-toggle:empty,
  body[data-mode="node"] .node-toggle:empty {
    display: inline-flex !important;
    visibility: hidden !important;
  }

  /* Large invisible touch area without shifting visual alignment. */
  body[data-mode="log"] .node-toggle::before,
  body[data-mode="log"] .node-bullet::before,
  body[data-mode="node"] .node-toggle::before,
  body[data-mode="node"] .node-bullet::before {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: -5px;
    bottom: -5px;
  }

  /* Table/card child markers follow the same optical width as outline handles. */
  .mobile-node-child-line {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    column-gap: 4px !important;
  }
  .mobile-node-child-marker {
    width: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  .mobile-node-child-marker::before {
    content: "";
    position: absolute;
    left: -6px !important;
    right: -6px !important;
    top: -5px !important;
    bottom: -5px !important;
  }
}

/* v1.8.7g — shrink the reserved handle column to the actual visual handle width.
   This removes the leftover blank gutter created by the earlier 52px touch-target patch. */
@media (max-width: 760px) {
  body[data-mode="log"] .outliner > .node > .node-row,
  body[data-mode="node"] .outliner > .node > .node-row {
    grid-template-columns: 32px 18px minmax(0, 1fr) auto !important;
    column-gap: 4px !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
  }

  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    grid-template-columns: 32px 18px minmax(0, 1fr) auto !important;
    column-gap: 4px !important;
  }

  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
  }
}


/* v1.8.7h — PC brand title size tweak.
   Slightly enlarge the Woylie title and tagline on desktop only. */
@media (min-width: 761px) {
  .app-brand-title,
  .brand-title,
  .workspace-title,
  #workspaceTitle,
  #appTitle {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .app-brand-subtitle,
  .brand-subtitle,
  .workspace-subtitle,
  .brand-tagline,
  #brandTagline,
  #appTagline {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }
}

/* v1.8.7i — actual punctuation toolbox padding + real PC brand selectors.
   Previous patch touched the wrong brand selectors and was too weak for the toolbox. */
@media (min-width: 761px) {
  /* Real Woylie header selectors. */
  .kicker,
  #appTitle {
    font-size: 14.8px !important;
    line-height: 1.22 !important;
    letter-spacing: 0.105em !important;
  }

  .brand-tagline,
  #brandTaglineBtn {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* Compact the punctuation panel evenly. */
  .punctuation-panel {
    width: 276px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .punctuation-head {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 6px 0 7px !important;
    line-height: 22px !important;
    box-sizing: border-box !important;
  }

  .punctuation-close {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    line-height: 16px !important;
    font-size: 12px !important;
  }

  .punctuation-grid {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    gap: 0 !important;
  }

  .punctuation-item {
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
  }

  .punctuation-item[data-pair="true"] {
    font-size: 12.5px !important;
    padding-bottom: 1px !important;
  }

  .punctuation-feedback {
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    box-sizing: border-box !important;
    line-height: 18px !important;
    font-size: 9px !important;
  }
}


/* v1.8.7j — FINAL forward fix after live deploy.
   Keep current fixes, but repair three regressions:
   - PC Woylie branding was over-enlarged.
   - Mobile outline hierarchy looked flat / child bullets could sit too far left.
   - Rows with and without toggles used different bullet positions.
*/

/* 1) PC brand: modest, not poster-sized. */
@media (min-width: 761px) {
  .brand-lockup {
    gap: 3px !important;
  }

  .kicker#appTitle,
  #appTitle {
    font-size: 11.2px !important;
    line-height: 1.22 !important;
    letter-spacing: 0.085em !important;
    font-weight: 700 !important;
  }

  .brand-tagline#brandTaglineBtn,
  #brandTaglineBtn {
    font-size: 10.2px !important;
    line-height: 1.35 !important;
    letter-spacing: 0.02em !important;
  }
}

/* 2) Punctuation box: even vertical rhythm with the real selectors. */
.punctuation-panel {
  padding: 0 !important;
  overflow: hidden !important;
}

.punctuation-head {
  height: 23px !important;
  min-height: 23px !important;
  padding: 0 7px !important;
  line-height: 23px !important;
  box-sizing: border-box !important;
}

.punctuation-close {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  line-height: 16px !important;
}

.punctuation-grid {
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.punctuation-item {
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.punctuation-feedback {
  min-height: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  line-height: 18px !important;
  box-sizing: border-box !important;
}

/* 3) Mobile outline hierarchy and bullet alignment. */
@media (max-width: 760px) {
  /* Parent rows: fixed local rhythm.
     Handle column is exactly two icon slots: [toggle][bullet]. */
  body[data-mode="log"] .outliner > .node > .node-row,
  body[data-mode="node"] .outliner > .node > .node-row {
    grid-template-columns: 32px 18px minmax(0, 1fr) min-content min-content min-content min-content !important;
    grid-template-rows: 15px auto !important;
    column-gap: 4px !important;
    row-gap: 2px !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 32px minmax(0, 1fr) min-content min-content min-content min-content !important;
  }

  /* Children are indented as a group. This restores visible hierarchy:
     child bullet/text both move right together, while bullet→text gap stays the same. */
  body[data-mode="log"] .outliner > .node > .children,
  body[data-mode="node"] .outliner > .node > .children {
    margin: 6px 0 0 !important;
    padding: 6px 0 2px 18px !important;
    border-top: 1px solid rgba(247,247,242,.09) !important;
    border-left: 0 !important;
    background: rgba(247,247,242,.014) !important;
  }

  body[data-mode="log"] .children .children,
  body[data-mode="node"] .children .children {
    margin: 3px 0 0 18px !important;
    padding: 2px 0 0 !important;
    border-top: 1px solid rgba(247,247,242,.045) !important;
    border-left: 0 !important;
  }

  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    grid-template-columns: 32px 18px minmax(0, 1fr) min-content min-content min-content min-content min-content !important;
    column-gap: 4px !important;
    min-height: 25px !important;
    padding: 0 !important;
    align-items: center !important;
  }

  body[data-mode="log"] .children .node-row:not(.has-log-todo-checkbox),
  body[data-mode="node"] .children .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 32px minmax(0, 1fr) min-content min-content min-content min-content min-content !important;
  }

  /* Same handle geometry everywhere: parent, child, toggle row, non-toggle row. */
  body[data-mode="log"] .outliner > .node > .node-row > .handle,
  body[data-mode="node"] .outliner > .node > .node-row > .handle,
  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle,
  body[data-mode="log"] .handle:has(.node-toggle:empty),
  body[data-mode="node"] .handle:has(.node-toggle:empty) {
    width: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;
    display: grid !important;
    grid-template-columns: 14px 14px !important;
    column-gap: 2px !important;
    align-items: center !important;
    justify-content: start !important;
    height: 25px !important;
    min-height: 25px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Empty toggle still reserves its slot. This is the key alignment rule:
     a normal bullet and a bullet after a toggle now sit at the same x-position. */
  body[data-mode="log"] .node-toggle:empty,
  body[data-mode="node"] .node-toggle:empty {
    display: inline-flex !important;
    visibility: hidden !important;
  }

  body[data-mode="log"] .node-toggle,
  body[data-mode="log"] .node-bullet,
  body[data-mode="node"] .node-toggle,
  body[data-mode="node"] .node-bullet,
  body[data-mode="log"] .children .handle:has(.node-toggle:empty) .node-bullet,
  body[data-mode="node"] .children .handle:has(.node-toggle:empty) .node-bullet {
    width: 14px !important;
    min-width: 14px !important;
    height: 25px !important;
    min-height: 25px !important;
    line-height: 25px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Invisible tap area. Bigger target, no visual drift. */
  body[data-mode="log"] .node-toggle::before,
  body[data-mode="log"] .node-bullet::before,
  body[data-mode="node"] .node-toggle::before,
  body[data-mode="node"] .node-bullet::before {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: -5px;
    bottom: -5px;
  }

  body[data-mode="log"] .children .content,
  body[data-mode="node"] .children .content {
    min-height: 25px !important;
    padding-top: 1px !important;
    padding-bottom: 0 !important;
    line-height: 1.42 !important;
    align-self: center !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row > .content,
  body[data-mode="node"] .outliner > .node > .node-row > .content {
    min-height: 25px !important;
  }

  .mobile-node-child-line {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    column-gap: 4px !important;
  }

  .mobile-node-child-marker {
    width: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    position: relative !important;
  }

  .mobile-node-child-marker::before {
    content: "";
    position: absolute;
    left: -6px !important;
    right: -6px !important;
    top: -5px !important;
    bottom: -5px !important;
  }
}


/* v1.8.7k — punctuation button TRUE center fix.
   The emoji glyph has its own baseline box, so it looked bottom-heavy even when the button padding was zero.
   Hide the text glyph and draw a tiny brick icon with CSS instead. */
.punctuation-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Draw the brick block exactly in the visual center. */
.punctuation-toggle::before {
  content: "" !important;
  width: 18px !important;
  height: 14px !important;
  display: block !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(to right, rgba(255,255,255,.38) 1px, transparent 1px) 0 0 / 6px 7px,
    linear-gradient(to bottom, rgba(255,255,255,.38) 1px, transparent 1px) 0 0 / 100% 7px,
    #d95f3f !important;
  border: 1px solid rgba(255,210,170,.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(80,20,10,.18),
    0 0 0 1px rgba(0,0,0,.10) !important;
  transform: translateY(0) !important;
}

.punctuation-toggle:hover::before,
.punctuation-box.open .punctuation-toggle::before {
  background:
    linear-gradient(to right, rgba(20,8,2,.36) 1px, transparent 1px) 0 0 / 6px 7px,
    linear-gradient(to bottom, rgba(20,8,2,.36) 1px, transparent 1px) 0 0 / 100% 7px,
    #5f2418 !important;
  border-color: rgba(20,8,2,.50) !important;
}

/* Keep the opened panel close to the now precisely centered square button. */
.punctuation-panel {
  bottom: 46px !important;
}


/* v1.8.7l — punctuation panel square-grid fix.
   Make every grid cell square, keep the title row separate,
   and remove the empty bottom band by collapsing the feedback row when unused. */
.punctuation-panel {
  width: fit-content !important;
  max-width: calc(100vw - 48px) !important;
}

.punctuation-grid {
  grid-template-columns: repeat(6, 48px) !important;
  width: fit-content !important;
}

.punctuation-item {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.punctuation-item[data-pair="true"] {
  font-size: 14px !important;
}

.punctuation-feedback {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 8px !important;
  line-height: 16px !important;
  font-size: 9px !important;
}

.punctuation-feedback:empty {
  display: none !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}


/* v1.8.7n — mobile node marker alignment, node-page action cleanup, full-screen brand page. */

/* Hide duplicate inline root-row controls inside node page; the top action strip replaces them. */
.node-page-root > .node-row > .add-child-node,
.node-page-root > .node-row > .hide-log,
.node-page-root > .node-row > .delete-node,
.node-page-root > .node-row > .add-tag {
  display: none !important;
}

.node-page-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  margin: 10px 0 16px !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.node-page-actions::-webkit-scrollbar { display: none; }
.node-page-actions button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}
.node-page-actions .node-page-favorite-btn {
  min-width: 30px;
  width: 30px;
  padding: 0 !important;
  font-size: 15px;
  line-height: 1;
  color: var(--muted-strong);
}
.node-page-actions .node-page-favorite-btn.active {
  color: #f6cf4d !important;
}
.node-page-actions .danger-action {
  color: var(--danger) !important;
}

/* Make brand story modal a clear full-screen mobile sheet. */
@media (max-width: 760px) {
  #brandModalBackdrop {
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  #brandModalBackdrop .brand-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: max(14px, env(safe-area-inset-top)) var(--m-page-x) calc(18px + env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    overflow-y: auto !important;
  }
  #brandModalBackdrop .brand-page-head {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: calc(-1 * max(14px, env(safe-area-inset-top))) calc(-1 * var(--m-page-x)) 12px;
    padding: max(14px, env(safe-area-inset-top)) var(--m-page-x) 10px;
    background: rgba(5,5,5,.98);
    border-bottom: 1px solid var(--border-soft);
  }

  /* One-line node-page actions on mobile. */
  .node-page-actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .node-page-actions button {
    min-height: 28px !important;
    font-size: 10.3px !important;
    padding: 0 8px !important;
  }
  .node-page-actions .node-page-favorite-btn {
    width: 28px !important;
    min-width: 28px !important;
    font-size: 14px !important;
  }

  /* Unify marker alignment across daily log, node page, and child outlines:
     markers align to the FIRST line, not the middle of a tall multiline block. */
  body[data-mode="log"] .outliner > .node > .node-row,
  body[data-mode="node"] .outliner > .node > .node-row,
  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row {
    align-items: start !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row > .handle,
  body[data-mode="node"] .outliner > .node > .node-row > .handle,
  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle {
    align-self: start !important;
    margin-top: 1px !important;
  }

  body[data-mode="log"] .node-toggle,
  body[data-mode="log"] .node-bullet,
  body[data-mode="node"] .node-toggle,
  body[data-mode="node"] .node-bullet {
    align-self: start !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row > .content,
  body[data-mode="node"] .outliner > .node > .node-row > .content,
  body[data-mode="log"] .children .content,
  body[data-mode="node"] .children .content {
    align-self: start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row > .log-todo-checkbox,
  body[data-mode="node"] .outliner > .node > .node-row > .log-todo-checkbox,
  body[data-mode="log"] .children .log-todo-checkbox,
  body[data-mode="node"] .children .log-todo-checkbox {
    align-self: start !important;
    margin-top: 3px !important;
  }

  .mobile-node-child-line {
    align-items: start !important;
  }
  .mobile-node-child-marker {
    align-self: start !important;
    padding-top: 4px !important;
  }
  .mobile-node-child-content {
    align-self: start !important;
  }
}


/* v1.8.7o — tutorial brand link. */
.onboarding-brand-note {
  margin: 8px 0 12px;
  color: var(--muted-strong);
  font-size: 11.2px;
  line-height: 1.55;
}
.tutorial-brand-link {
  display: inline;
  border: 0;
  background: transparent;
  color: var(--surface);
  padding: 0;
  margin: 0;
  font: inherit;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tutorial-brand-link:hover {
  color: var(--text);
}

@media (max-width: 760px) {
  .onboarding-brand-note {
    margin: 7px 0 10px;
    font-size: 10.6px;
    line-height: 1.5;
  }
  .tutorial-brand-link {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
}


/* v1.8.7p — project delete button in Projects tab. */
.project-detail-toolbar .project-delete-button {
  color: var(--danger) !important;
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border-soft)) !important;
}
.project-detail-toolbar .project-delete-button:hover {
  background: color-mix(in srgb, var(--danger) 16%, transparent) !important;
  color: var(--danger) !important;
}
@media (max-width: 760px) {
  .project-detail-toolbar .project-delete-button {
    min-height: var(--m-control-h) !important;
  }
}


/* v1.8.7q — node-page action button sizing.
   Desktop gets full labels and equal widths; mobile gets compact labels.
   Favorite star is a plain icon with no box border. */
.node-page-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 16px !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.node-page-actions::-webkit-scrollbar { display: none; }

.node-page-actions .node-page-favorite-btn {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted-strong) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.node-page-actions .node-page-favorite-btn:hover {
  background: transparent !important;
  color: var(--surface) !important;
}
.node-page-actions .node-page-favorite-btn.active {
  color: #f6cf4d !important;
}

.node-page-actions .node-page-action-btn {
  flex: 0 0 132px !important;
  width: 132px !important;
  min-width: 132px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.node-page-actions .node-page-action-btn.danger-action {
  color: var(--danger) !important;
}
.node-page-actions .label-mobile {
  display: none;
}
.node-page-actions .label-desktop {
  display: inline;
}

@media (max-width: 760px) {
  .node-page-actions {
    gap: 6px !important;
    margin: 10px 0 12px !important;
  }
  .node-page-actions .node-page-favorite-btn {
    flex-basis: 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 14px !important;
  }
  .node-page-actions .node-page-action-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 72px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 10.3px !important;
  }
  .node-page-actions .label-desktop {
    display: none;
  }
  .node-page-actions .label-mobile {
    display: inline;
  }
}


/* v1.8.7r — restore Korean Woylie about tagline. */
.brand-tagline {
  word-break: keep-all;
}
@media (max-width: 760px) {
  .brand-tagline {
    max-width: 100%;
    letter-spacing: -0.01em;
  }
}


/* v1.8.7r — mobile popup spacing, child rhythm restore, favorites collapse, star alignment, tagline restore. */

/* PC + mobile: star icon height alignment without restoring the boxed look. */
.node-page-actions .node-page-favorite-btn,
.favorite-node-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.node-page-actions .node-page-favorite-btn {
  height: 30px !important;
  min-height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.inline-table-actions .favorite-row-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 18px !important;
  line-height: 18px !important;
}

@media (max-width: 760px) {
  /* About Woylie: not full-bleed; leave a visible edge around the modal. */
  #brandModalBackdrop {
    align-items: center !important;
    justify-content: center !important;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  #brandModalBackdrop .brand-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100dvh - max(36px, env(safe-area-inset-top)) - max(36px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - max(36px, env(safe-area-inset-top)) - max(36px, env(safe-area-inset-bottom))) !important;
    margin: 0 !important;
    padding: 0 15px calc(18px + env(safe-area-inset-bottom)) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #brandModalBackdrop .brand-page-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    margin: 0 -15px 0 !important;
    padding: 14px 15px 13px !important;
    background: rgba(5,5,5,.985) !important;
    border-bottom: 1px solid var(--border-soft) !important;
  }

  #brandModalBackdrop .brand-modal h3 {
    margin-top: 24px !important;
    margin-bottom: 18px !important;
  }

  /* Restore readable vertical rhythm between child nodes. */
  body[data-mode="log"] .children .node + .node,
  body[data-mode="node"] .children .node + .node,
  body[data-mode="todo"] .children .node + .node,
  body[data-mode="favorites"] .children .node + .node {
    margin-top: 8px !important;
  }

  body[data-mode="log"] .children .node-row,
  body[data-mode="node"] .children .node-row,
  body[data-mode="todo"] .children .node-row,
  body[data-mode="favorites"] .children .node-row {
    min-height: 34px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    align-items: start !important;
  }

  body[data-mode="log"] .children .content,
  body[data-mode="node"] .children .content,
  body[data-mode="todo"] .children .content,
  body[data-mode="favorites"] .children .content {
    line-height: 1.52 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mobile-node-child-line + .mobile-node-child-line {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  .mobile-node-child-nested {
    margin-top: 8px !important;
    padding-left: 18px !important;
  }

  .mobile-node-child-content {
    line-height: 1.52 !important;
  }

  /* Bullets/toggles sit at the middle of the first text line, not the whole block. */
  body[data-mode="log"] .outliner > .node > .node-row > .handle,
  body[data-mode="node"] .outliner > .node > .node-row > .handle,
  body[data-mode="todo"] .outliner > .node > .node-row > .handle,
  body[data-mode="favorites"] .outliner > .node > .node-row > .handle,
  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle,
  body[data-mode="todo"] .children .handle,
  body[data-mode="favorites"] .children .handle {
    align-self: start !important;
    margin-top: 3px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  body[data-mode="log"] .node-toggle,
  body[data-mode="log"] .node-bullet,
  body[data-mode="node"] .node-toggle,
  body[data-mode="node"] .node-bullet,
  body[data-mode="todo"] .node-toggle,
  body[data-mode="todo"] .node-bullet,
  body[data-mode="favorites"] .node-toggle,
  body[data-mode="favorites"] .node-bullet {
    height: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-node-child-line {
    align-items: start !important;
  }

  .mobile-node-child-marker {
    align-self: start !important;
    height: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;
    padding-top: 0 !important;
    margin-top: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Favorites tab: collapsed by default, and actually hidden despite earlier display: block !important rules. */
  body[data-mode="favorites"] .mobile-node-children-outline.is-favorite-collapsed {
    display: none !important;
  }

  body[data-mode="favorites"] .mobile-outline-root-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    margin: 8px 0 4px !important;
    padding: 0 9px !important;
    border: 1px solid var(--border-soft) !important;
    background: transparent !important;
    color: var(--muted-strong) !important;
    font-size: 10.2px !important;
  }

  .node-page-actions .node-page-favorite-btn {
    height: 28px !important;
    min-height: 28px !important;
  }
}


/* v1.8.7s — tutorial board refresh + mobile brand gap + first-line marker alignment. */
@media (max-width: 760px) {
  .brand-lockup {
    gap: 4px !important;
  }

  .brand-tagline {
    margin-top: 2px !important;
    line-height: 1.28 !important;
  }

  body[data-mode="log"] .outliner > .node > .node-row > .handle,
  body[data-mode="node"] .outliner > .node > .node-row > .handle,
  body[data-mode="todo"] .outliner > .node > .node-row > .handle,
  body[data-mode="favorites"] .outliner > .node > .node-row > .handle,
  body[data-mode="tutorial"] .outliner > .node > .node-row > .handle,
  body[data-mode="log"] .children .handle,
  body[data-mode="node"] .children .handle,
  body[data-mode="todo"] .children .handle,
  body[data-mode="favorites"] .children .handle,
  body[data-mode="tutorial"] .children .handle {
    align-self: start !important;
    margin-top: 0 !important;
    transform: translateY(-2px) !important;
    height: 22px !important;
    min-height: 22px !important;
  }

  body[data-mode="log"] .node-toggle,
  body[data-mode="log"] .node-bullet,
  body[data-mode="node"] .node-toggle,
  body[data-mode="node"] .node-bullet,
  body[data-mode="todo"] .node-toggle,
  body[data-mode="todo"] .node-bullet,
  body[data-mode="favorites"] .node-toggle,
  body[data-mode="favorites"] .node-bullet,
  body[data-mode="tutorial"] .node-toggle,
  body[data-mode="tutorial"] .node-bullet {
    height: 22px !important;
    min-height: 22px !important;
    line-height: 22px !important;
  }

  .mobile-node-child-marker {
    margin-top: 0 !important;
    transform: translateY(-2px) !important;
    height: 22px !important;
    min-height: 22px !important;
    line-height: 22px !important;
  }

  body[data-mode="tutorial"] .children .node + .node {
    margin-top: 8px !important;
  }

  body[data-mode="tutorial"] .children .node-row {
    min-height: 34px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    align-items: start !important;
  }

  body[data-mode="tutorial"] .children .content {
    line-height: 1.52 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* v1.8.7u — tutorial board UI unification.
   The tutorial board runs under body[data-mode="tutorial"], so it needs the same
   mobile node/card/thread rhythm as the current log/todo/node/favorites screens. */

@media (max-width: 760px) {
  body[data-mode="tutorial"] .view-title {
    margin: 0 calc(-1 * var(--m-page-x)) 13px !important;
    padding: 14px var(--m-page-x) 13px !important;
    border-bottom: 1px solid var(--m-hairline) !important;
  }

  body[data-mode="tutorial"] .view-title h2 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;
  }

  body[data-mode="tutorial"] .view-title span {
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: var(--muted) !important;
  }

  body[data-mode="tutorial"] .quick-view-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body[data-mode="tutorial"] .quick-view-toolbar::-webkit-scrollbar {
    display: none !important;
  }

  body[data-mode="tutorial"] .quick-view-toolbar .quick-chip,
  body[data-mode="tutorial"] .quick-view-toolbar .add-node-small {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 0 !important;
    background: rgba(247,247,242,.018) !important;
    color: var(--muted-strong) !important;
    font-size: 10.2px !important;
    line-height: 28px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  body[data-mode="tutorial"] .quick-view-toolbar .quick-chip {
    color: var(--muted) !important;
  }

  body[data-mode="tutorial"] .inline-edit-hint {
    margin: 0 0 12px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(247,247,242,.12) !important;
    background: rgba(247,247,242,.018) !important;
    color: var(--muted) !important;
    font-size: 10.2px !important;
    line-height: 1.55 !important;
  }

  /* Tutorial top-level nodes should use the same card shell as the daily log. */
  body[data-mode="tutorial"] .outliner > .node {
    margin: 0 0 10px !important;
    padding: 10px 10px 9px !important;
    border: 1px solid var(--border-soft) !important;
    background: rgba(247,247,242,.018) !important;
    box-sizing: border-box !important;
  }

  body[data-mode="tutorial"] .outliner > .node > .node-row {
    display: grid !important;
    grid-template-columns: 32px 18px minmax(0, 1fr) min-content min-content min-content min-content !important;
    grid-template-rows: 15px auto !important;
    column-gap: 4px !important;
    row-gap: 2px !important;
    align-items: start !important;
    min-height: 34px !important;
    padding: 0 !important;
  }

  body[data-mode="tutorial"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 32px minmax(0, 1fr) min-content min-content min-content min-content !important;
  }

  body[data-mode="tutorial"] .outliner > .node > .node-row > .time-stamp {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 15px !important;
    color: var(--muted) !important;
  }

  body[data-mode="tutorial"] .outliner > .node > .node-row > .handle {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body[data-mode="tutorial"] .outliner > .node > .node-row > .log-todo-checkbox {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }

  body[data-mode="tutorial"] .outliner > .node > .node-row > .content {
    grid-row: 2 !important;
    align-self: start !important;
    min-height: 25px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.52 !important;
    font-size: 16px !important;
  }

  body[data-mode="tutorial"] .outliner > .node > .node-row.has-log-todo-checkbox > .content {
    grid-column: 3 !important;
  }

  body[data-mode="tutorial"] .outliner > .node > .node-row:not(.has-log-todo-checkbox) > .content {
    grid-column: 2 !important;
  }

  body[data-mode="tutorial"] .node-row > .supertype-badge,
  body[data-mode="tutorial"] .node-row > .add-child-node,
  body[data-mode="tutorial"] .node-row > .hide-log,
  body[data-mode="tutorial"] .node-row > .delete-node,
  body[data-mode="tutorial"] .node-row > .add-tag {
    grid-row: 1 !important;
    align-self: start !important;
    min-height: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 8.8px !important;
    line-height: 16px !important;
  }

  body[data-mode="tutorial"] .node-row > .supertype-badge {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  body[data-mode="tutorial"] .node-row > .add-child-node {
    grid-column: 4 !important;
  }

  body[data-mode="tutorial"] .node-row > .hide-log {
    grid-column: 5 !important;
  }

  body[data-mode="tutorial"] .node-row > .delete-node {
    grid-column: 6 !important;
  }

  body[data-mode="tutorial"] .node-row > .add-tag {
    grid-column: 7 !important;
  }

  /* Same thread/child rhythm as current daily log: visible hierarchy, not the old cramped outline. */
  body[data-mode="tutorial"] .outliner > .node > .children {
    margin: 9px 0 0 !important;
    padding: 7px 0 0 18px !important;
    border-top: 1px solid rgba(247,247,242,.09) !important;
    border-left: 0 !important;
    background: rgba(247,247,242,.014) !important;
  }

  body[data-mode="tutorial"] .children .children {
    margin: 8px 0 0 18px !important;
    padding: 6px 0 0 !important;
    border-top: 1px solid rgba(247,247,242,.045) !important;
    border-left: 0 !important;
  }

  body[data-mode="tutorial"] .children .node {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-mode="tutorial"] .children .node + .node {
    margin-top: 8px !important;
  }

  body[data-mode="tutorial"] .children .node-row {
    display: grid !important;
    grid-template-columns: 32px 18px minmax(0, 1fr) min-content min-content min-content min-content min-content !important;
    column-gap: 4px !important;
    min-height: 34px !important;
    padding: 5px 0 !important;
    align-items: start !important;
    border-bottom: 1px solid rgba(247,247,242,.06) !important;
  }

  body[data-mode="tutorial"] .children .node-row:not(.has-log-todo-checkbox) {
    grid-template-columns: 32px minmax(0, 1fr) min-content min-content min-content min-content min-content !important;
  }

  body[data-mode="tutorial"] .children .time-stamp {
    grid-column: 1 !important;
    align-self: start !important;
    padding-top: 0 !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 22px !important;
    color: var(--muted) !important;
  }

  body[data-mode="tutorial"] .children .handle {
    grid-column: 1 !important;
    align-self: start !important;
    margin-top: 0 !important;
    transform: translateY(-2px) !important;
    height: 22px !important;
    min-height: 22px !important;
  }

  body[data-mode="tutorial"] .children .log-todo-checkbox {
    grid-column: 2 !important;
    align-self: start !important;
    margin-top: 0 !important;
  }

  body[data-mode="tutorial"] .children .content {
    align-self: start !important;
    min-height: 25px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.52 !important;
    font-size: 16px !important;
  }

  body[data-mode="tutorial"] .children .node-row.has-log-todo-checkbox > .content {
    grid-column: 3 !important;
  }

  body[data-mode="tutorial"] .children .node-row:not(.has-log-todo-checkbox) > .content {
    grid-column: 2 !important;
  }

  body[data-mode="tutorial"] .node-toggle,
  body[data-mode="tutorial"] .node-bullet {
    height: 22px !important;
    min-height: 22px !important;
    line-height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body[data-mode="tutorial"] .handle {
    width: 32px !important;
    min-width: 32px !important;
    display: grid !important;
    grid-template-columns: 14px 14px !important;
    column-gap: 2px !important;
    justify-content: start !important;
    align-items: center !important;
  }

  body[data-mode="tutorial"] .node-toggle:empty {
    display: inline-flex !important;
    visibility: hidden !important;
  }

  body[data-mode="tutorial"] .attached-fields,
  body[data-mode="tutorial"] .node-fields,
  body[data-mode="tutorial"] .field-list {
    margin-left: 36px !important;
    font-size: 10.2px !important;
    line-height: 1.45 !important;
  }

  body[data-mode="tutorial"] .mobile-node-child-line {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    column-gap: 4px !important;
    align-items: start !important;
  }

  body[data-mode="tutorial"] .mobile-node-child-marker {
    align-self: start !important;
    height: 22px !important;
    min-height: 22px !important;
    line-height: 22px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    transform: translateY(-2px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body[data-mode="tutorial"] .mobile-node-child-line + .mobile-node-child-line {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  body[data-mode="tutorial"] .mobile-node-child-nested {
    margin-top: 8px !important;
    padding-left: 18px !important;
  }

  body[data-mode="tutorial"] .mobile-node-child-content {
    line-height: 1.52 !important;
    font-size: 16px !important;
  }
}