/* 사이트 글꼴: 볼트와 같은 나눔스퀘어라운드 (Obsidian 설정 > 모양의 본문·인터페이스 글꼴).
   글꼴이 설치되어 있지 않은 방문자는 네이버 글꼴 서버에서 받아 씁니다. 굵기: 300 / 400 / 700 / 800 */
@font-face {
  font-family: "NanumSquareRound";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: local("NanumSquareRoundL"), url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundL.woff2") format("woff2"), url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundL.woff") format("woff");
}
@font-face {
  font-family: "NanumSquareRound";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("NanumSquareRoundR"), url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff2") format("woff2"), url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundR.woff") format("woff");
}
@font-face {
  font-family: "NanumSquareRound";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("NanumSquareRoundB"), url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff2") format("woff2"), url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundB.woff") format("woff");
}
@font-face {
  font-family: "NanumSquareRound";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: local("NanumSquareRoundEB"), url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.woff2") format("woff2"), url("https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareRound/NanumSquareRoundEB.woff") format("woff");
}
body {
  --font-text-theme: "NanumSquareRound";
  --font-interface-theme: "NanumSquareRound";
}

/* >>> timeline-editor: generated by obsidian-timeline-editor (npm run deploy:publish); edits inside this block are overwritten */
/* Timeline Editor — styles. All classes are prefixed with te- */

/* ---------- layout ---------- */
.te-view {
  padding: 0 !important;
}
.te-root {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 64px;
  container-type: inline-size;
}
.te-spacer {
  flex: 1 1 auto;
}
.te-empty {
  color: var(--text-muted);
  padding: 14px 4px;
  font-size: var(--font-ui-small);
}
.te-hidden-file {
  display: none;
}
.te-panel[style*="display: none"] {
  display: none;
}
.te-readonly .te-composer-host {
  display: none;
}
/* the timeline-editor code block inside a note (the published site shows the timeline there) */
.te-embed-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--background-modifier-border);
  border-radius: var(--radius-m);
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}

/* ---------- icons ----------
   Themes such as Sanctum swap Lucide icons through mask-image on svg.lucide-* while the original
   strokes keep rendering, which shows two glyphs inside the plugin UI. Keep the originals here. */
.te-view svg.svg-icon,
.te-modal svg.svg-icon,
.te-lightbox svg.svg-icon {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: transparent !important;
}
.te-view svg.svg-icon > *,
.te-modal svg.svg-icon > *,
.te-lightbox svg.svg-icon > * {
  display: inline !important;
}

/* ---------- buttons ---------- */
.te-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: var(--radius-s);
  color: var(--text-muted);
  cursor: pointer;
}
.te-icon-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.te-icon-btn.is-active {
  color: var(--interactive-accent);
}
.te-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.te-icon-btn svg {
  width: 16px;
  height: 16px;
}
.te-btn {
  font-size: var(--font-ui-small);
}
.te-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.te-prompt-input,
.te-move-select {
  width: 100%;
}
.te-confirm-text {
  margin: 0;
  white-space: pre-wrap;
}

/* ---------- profile header ---------- */
.te-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 0 14px;
}
.te-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--background-secondary);
}
.te-bio {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-ui-medium);
  line-height: 1.5;
}
.te-bio > :first-child {
  margin-top: 0;
}
.te-bio > :last-child {
  margin-bottom: 0;
}
.te-bio p {
  margin: 0 0 0.2em;
}
.te-bio ul,
.te-bio ol {
  margin: 0.2em 0;
  padding-left: 1.2em;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}
.te-bio h1,
.te-bio h2,
.te-bio h3 {
  font-size: 1.05em;
  margin: 0 0 0.2em;
}
.te-bio img {
  max-height: 120px;
  border-radius: var(--radius-m);
}
.te-bio-empty {
  color: var(--text-faint);
  font-size: var(--font-ui-small);
}
.te-header-stats {
  flex: 0 0 auto;
  display: flex;
  gap: 14px;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  white-space: nowrap;
}
.te-header-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.te-header-stat-icon {
  font-size: 12px;
}
.te-header-menu {
  flex: 0 0 auto;
  opacity: 0.6;
}
.te-header:hover .te-header-menu {
  opacity: 1;
}

/* ---------- grass ---------- */
.te-view {
  --te-g0: var(--background-modifier-border);
  --te-g1: #9be9a8;
  --te-g2: #40c463;
  --te-g3: #30a14e;
  --te-g4: #216e39;
}
.theme-dark .te-view {
  --te-g1: #0e4429;
  --te-g2: #006d32;
  --te-g3: #26a641;
  --te-g4: #39d353;
}
.te-view.te-accent-grass {
  --te-g1: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.3);
  --te-g2: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.55);
  --te-g3: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.8);
  --te-g4: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
}
.te-grass-host {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.te-grass-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.te-grass-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}
.te-grass {
  --te-cell: 10px;
  --te-gap: 2px;
  display: inline-block;
  min-width: 100%;
}
.te-grass-months {
  display: grid;
  grid-template-columns: repeat(var(--te-grass-cols), var(--te-cell));
  gap: var(--te-gap);
  margin-left: calc(24px + var(--te-gap));
  height: 13px;
  font-size: 9.5px;
  color: var(--text-faint);
}
.te-grass-month {
  grid-row: 1;
  white-space: nowrap;
}
.te-grass-body {
  display: flex;
  gap: var(--te-gap);
}
.te-grass-days {
  display: grid;
  grid-template-rows: repeat(7, var(--te-cell));
  gap: var(--te-gap);
  width: 24px;
  font-size: 9px;
  color: var(--text-faint);
  line-height: var(--te-cell);
}
.te-grass-day {
  visibility: hidden;
  white-space: nowrap;
}
.te-grass-day.is-visible {
  visibility: visible;
}
.te-grass-cells {
  display: grid;
  grid-template-columns: repeat(var(--te-grass-cols), var(--te-cell));
  grid-template-rows: repeat(7, var(--te-cell));
  gap: var(--te-gap);
}
.te-grass-cell {
  width: var(--te-cell, 10px);
  height: var(--te-cell, 10px);
  border-radius: 2px;
  background: var(--te-g0);
  cursor: pointer;
  box-sizing: border-box;
}
.te-grass-cell.te-level-1 { background: var(--te-g1); }
.te-grass-cell.te-level-2 { background: var(--te-g2); }
.te-grass-cell.te-level-3 { background: var(--te-g3); }
.te-grass-cell.te-level-4 { background: var(--te-g4); }
.te-grass-cell.is-out {
  visibility: hidden;
}
.te-grass-cell.is-disabled {
  cursor: default;
  opacity: 0.45;
}
.te-grass-cell:not(.is-disabled):hover {
  outline: 1px solid var(--text-muted);
}
.te-grass-cell.is-today {
  outline: 1px solid var(--text-faint);
}
.te-grass-cell.is-selected {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 1px;
}
.te-grass-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  padding-top: 13px;
}
.te-grass-year {
  font-size: var(--font-ui-smaller);
  height: 24px;
  padding: 0 22px 0 8px;
}
.te-grass-legend {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}
.te-grass-legend .te-grass-cell {
  --te-cell: 9px;
  cursor: default;
}

/* ---------- tabs ---------- */
.te-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 12px 0 14px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.te-view button.te-tab {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 6px 2px 8px;
  height: auto;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.te-view button.te-tab:hover {
  background: transparent;
  color: var(--text-normal);
}
.te-view button.te-tab.is-active {
  color: var(--text-normal);
  font-weight: 600;
  border-bottom-color: var(--interactive-accent);
}
.te-tabs-summary {
  margin-left: auto;
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---------- composer ---------- */
.te-composer {
  background: var(--background-secondary);
  border-radius: 12px;
  padding: 12px 14px 10px;
  margin-bottom: 22px;
}
.te-composer:focus-within {
  box-shadow: 0 0 0 1px var(--background-modifier-border);
}
.te-composer input.te-composer-title {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--background-modifier-border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 4px 2px 8px;
  margin-bottom: 4px;
  font-family: var(--font-text);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--text-normal);
}
.te-composer input.te-composer-title:focus {
  box-shadow: none;
  border-bottom-color: var(--interactive-accent);
}
.te-composer-editor {
  position: relative;
}
.te-composer-editor.is-dragover {
  outline: 2px dashed var(--interactive-accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
.te-composer-textarea {
  width: 100%;
  min-height: 180px;
  max-height: 70vh;
  resize: none;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 6px 2px;
  font-family: var(--font-text);
  font-size: var(--font-text-size);
  line-height: 1.55;
  color: var(--text-normal);
}
.te-composer-textarea:focus {
  box-shadow: none;
  border: none;
}
.te-composer-preview {
  min-height: 180px;
  padding: 6px 2px;
}
.te-composer-tags {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--background-modifier-border);
  padding-top: 6px;
  margin-top: 4px;
}
.te-composer-tagicon {
  display: inline-flex;
  color: var(--text-muted);
}
.te-composer-tagicon svg { width: 14px; height: 14px; }
.te-composer input.te-composer-taginput {
  flex: 1;
  border: none;
  box-shadow: none;
  background: transparent;
  font-size: var(--font-ui-small);
  padding: 2px 0;
}
.te-composer input.te-composer-taginput:focus {
  box-shadow: none;
}
.te-composer-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.te-composer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.te-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--background-modifier-border);
  margin: 0 4px;
}
.te-catpicker {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.te-catpicker-select {
  max-width: 150px;
  height: 26px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--font-ui-smaller);
  border-radius: 999px;
}
.te-catpicker-add {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.te-catpicker-input {
  width: 140px;
}
.te-time {
  display: flex;
  align-items: center;
  gap: 6px;
}
.te-composer button.te-time-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 2px 6px;
  height: auto;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  cursor: pointer;
}
.te-composer button.te-time-btn:hover { color: var(--text-normal); background: transparent; }
.te-time-icon svg { width: 13px; height: 13px; }
.te-time-label.is-custom { color: var(--interactive-accent); }
.te-time-input {
  font-size: var(--font-ui-small);
}
.te-commit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
}
.te-commit-icon {
  display: inline-flex;
}
.te-commit-icon svg { width: 16px; height: 16px; }
.te-composer.is-edit {
  margin-bottom: 0;
  background: transparent;
  padding: 0;
}
.te-composer.is-edit:focus-within {
  box-shadow: none;
}
.te-composer-modal .modal-content {
  padding-top: 8px;
}
.te-composer-modal {
  width: min(720px, 92vw);
}
.te-composer-modal.is-phone .te-composer-textarea {
  min-height: 200px;
}

/* suggestions */
.te-suggest {
  position: absolute;
  z-index: var(--layer-popover, 30);
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.te-suggest-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: var(--font-ui-small);
}
.te-suggest-item.is-selected {
  background: var(--background-modifier-hover);
}
.te-suggest-detail {
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- day spine ---------- */
.te-spine {
  position: relative;
  padding-left: 28px;
}
.te-spine::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 28px;
  width: 2px;
  background: var(--background-modifier-border);
}
.te-spine-month {
  position: relative;
  font-size: var(--font-ui-smaller);
  font-weight: 700;
  color: var(--text-faint);
  padding: 14px 0 2px;
  letter-spacing: 0.04em;
}
.te-spine-day {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 6px 7px 0;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  cursor: pointer;
  border-radius: var(--radius-s);
}
.te-spine-day:hover:not(.is-open) {
  color: var(--text-normal);
}
.te-spine-dot {
  position: absolute;
  left: -24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--background-primary);
  border: 1.5px solid var(--text-faint);
  box-shadow: 0 0 0 3px var(--background-primary);
  box-sizing: border-box;
}
.te-dot-size-1 .te-spine-dot { border: none; background: var(--te-g2); }
.te-dot-size-2 .te-spine-dot { border: none; background: var(--te-g3); width: 10px; height: 10px; left: -25px; }
.te-dot-size-3 .te-spine-dot { border: none; background: var(--te-g4); width: 12px; height: 12px; left: -26px; }
.te-spine-date {
  font-weight: 600;
  color: var(--text-normal);
  font-variant-numeric: tabular-nums;
}
.te-spine-today {
  color: var(--interactive-accent);
  font-weight: 600;
  font-size: var(--font-ui-smaller);
}
.te-spine-count {
  font-size: var(--font-ui-smaller);
  line-height: 16px;
  background: var(--background-secondary);
  border-radius: 999px;
  padding: 0 7px;
  font-variant-numeric: tabular-nums;
}
.te-spine-day.is-open {
  cursor: default;
  padding-top: 10px;
}
.te-spine-day.is-open .te-spine-dot {
  width: 12px;
  height: 12px;
  left: -26px;
  border: none;
  background: var(--interactive-accent);
  box-shadow: 0 0 0 3px var(--background-primary), 0 0 0 5px var(--interactive-accent);
}
.te-spine-day.is-open .te-spine-date {
  font-size: var(--font-ui-medium);
}
.te-spine-cards {
  padding: 4px 0 18px;
}
.te-view button.te-spine-more {
  display: block;
  margin: 10px 0 0;
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 4px 0;
  height: auto;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  cursor: pointer;
}
.te-view button.te-spine-more:hover {
  background: transparent;
  color: var(--text-normal);
}

/* ---------- cards ---------- */
.te-cards,
.te-spine-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.te-card {
  position: relative;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 12px;
  padding: 11px 14px 12px;
}
.te-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.te-card-time {
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  font-variant-numeric: tabular-nums;
}
.te-card button.te-card-cat {
  margin-left: auto;
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  height: auto;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  cursor: pointer;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.te-card button.te-card-cat:hover {
  color: var(--text-accent);
  background: transparent;
  text-decoration: underline;
}
.te-card-edited {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
}
.te-card-head .te-spacer {
  display: none;
}
.te-card-menu {
  opacity: 0;
  margin-left: 2px;
  width: 24px;
  height: 24px;
}
.te-card:hover .te-card-menu,
.te-card-menu:focus-visible {
  opacity: 0.8;
}
.te-card-title {
  font-weight: 700;
  font-size: 1.05em;
  margin: 2px 0 4px;
  line-height: 1.4;
}
.te-card-body {
  position: relative;
  overflow: hidden;
  line-height: 1.6;
}
.te-card-body > :first-child { margin-top: 0; }
.te-card-body > :last-child { margin-bottom: 0; }
.te-card-body.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--background-secondary));
}
.te-card button.te-card-more,
.te-view button.te-card-more {
  margin-top: 4px;
  font-size: var(--font-ui-small);
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 2px 0;
  height: auto;
  color: var(--interactive-accent);
  cursor: pointer;
}
.te-view button.te-card-more:hover { text-decoration: underline; background: transparent; }
.te-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.te-view button.te-tag,
.te-modal button.te-tag {
  background: var(--tag-background, var(--background-primary));
  color: var(--tag-color, var(--text-accent));
  border: var(--tag-border-width, 0) solid var(--tag-border-color, transparent);
  box-shadow: none;
  border-radius: var(--tag-radius, 999px);
  padding: 1px 8px;
  height: auto;
  font-size: var(--tag-size, var(--font-ui-smaller));
  cursor: pointer;
}
.te-view button.te-tag:hover { background: var(--tag-background-hover, var(--background-modifier-hover)); }
.te-load-more {
  display: block;
  margin: 8px auto 0;
}

/* media */
.te-media-grid {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.te-media-grid.te-grid-cols-1 { grid-template-columns: minmax(0, 360px); }
.te-media-grid.te-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.te-media-grid.te-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.te-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--background-primary);
  cursor: zoom-in;
}
.te-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 150ms ease;
}
.te-tile:hover .te-tile-img { transform: scale(1.03); }
.te-tile-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.4em;
  font-weight: 700;
}
.te-media-videos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.te-video {
  width: 100%;
  max-height: 420px;
  border-radius: 10px;
  background: #000;
}
.te-media-audios {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.te-audio-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.te-audio-name {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.te-audio { width: 100%; }
.te-media-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.te-view button.te-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  box-shadow: none;
  border-radius: var(--radius-m);
  padding: 4px 10px;
  height: auto;
  font-size: var(--font-ui-small);
  cursor: pointer;
  max-width: 100%;
}
.te-view button.te-file-chip:hover { background: var(--background-modifier-hover); }
.te-file-icon { display: inline-flex; color: var(--text-muted); }
.te-file-icon svg { width: 14px; height: 14px; }
.te-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- filter banner ---------- */
.te-filter-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.te-filter-icon { display: inline-flex; color: var(--text-muted); }
.te-filter-icon svg { width: 14px; height: 14px; }
.te-filter-label { font-weight: 600; }
.te-filter-count {
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}

/* ---------- category panel ---------- */
.te-stats-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 10px;
}
.te-stats-periods {
  display: inline-flex;
  gap: 2px;
  background: var(--background-secondary);
  border-radius: 999px;
  padding: 2px;
}
.te-view button.te-period-btn {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 2px 10px;
  height: auto;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  border-radius: 999px;
}
.te-view button.te-period-btn.is-active {
  background: var(--background-primary);
  color: var(--text-normal);
  box-shadow: var(--shadow-s);
}
.te-stats-manage {
  font-size: var(--font-ui-small);
}
.te-stats-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
}
.te-stats-row {
  display: grid;
  grid-template-columns: 16px minmax(80px, auto) 1fr 64px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: var(--font-ui-small);
}
.te-stats-row.te-depth-2 { padding-left: 18px; }
.te-stats-row.te-depth-3 { padding-left: 36px; }
.te-stats-toggle {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  cursor: pointer;
}
.te-stats-toggle svg { width: 14px; height: 14px; }
.te-stats-toggle.is-leaf { cursor: default; }
.te-view button.te-stats-name {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  height: auto;
  text-align: left;
  color: var(--text-normal);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.te-view button.te-stats-name:hover {
  color: var(--interactive-accent);
  background: transparent;
  text-decoration: underline;
}
.te-stats-bar {
  height: 6px;
  background: var(--background-secondary);
  border-radius: 3px;
  overflow: hidden;
}
.te-stats-fill {
  height: 100%;
  background: var(--interactive-accent);
  border-radius: 3px;
  transition: width 200ms ease;
}
.te-stats-fill.is-muted {
  background: var(--text-faint);
}
.te-stats-count {
  text-align: right;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.te-stats-row.is-uncategorized .te-stats-name {
  color: var(--text-muted);
  font-style: italic;
}

/* ---------- lightbox ---------- */
.te-lightbox {
  width: min(96vw, 1400px);
  max-width: none;
  height: 92vh;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.te-lightbox .modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.te-lightbox .modal-close-button {
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
}
.te-lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
}
.te-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-m);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.te-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}
.te-lightbox-nav:hover { background: rgba(0, 0, 0, 0.7); color: #fff; }
.te-lightbox-nav svg { width: 22px; height: 22px; }
.te-lightbox-prev { left: 8px; }
.te-lightbox-next { right: 8px; }
.te-lightbox-caption {
  text-align: center;
  color: #ddd;
  font-size: var(--font-ui-small);
  padding: 8px;
}

/* ---------- category manager ---------- */
.te-catmanager {
  width: min(560px, 92vw);
}
.te-catmanager-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 50vh;
  overflow-y: auto;
}
.te-catmanager-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: var(--radius-s);
}
.te-catmanager-row:hover { background: var(--background-modifier-hover); }
.te-catmanager-row.te-depth-2 { padding-left: 24px; }
.te-catmanager-row.te-depth-3 { padding-left: 42px; }
.te-catmanager-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-catmanager-count { color: var(--text-muted); font-size: var(--font-ui-small); font-variant-numeric: tabular-nums; }
.te-catmanager-actions { display: inline-flex; gap: 2px; }

/* ---------- narrow panes (container query, so split panes on desktop count too) ---------- */
@container (max-width: 600px) {
  .te-root { padding: 12px 12px 48px; }
  .te-header { flex-wrap: wrap; gap: 10px 14px; }
  .te-avatar { width: 44px; height: 44px; border-radius: 12px; }
  .te-header-stats { width: 100%; gap: 10px; order: 3; }
  .te-grass-wrap { flex-direction: column; gap: 6px; }
  .te-grass-scroll { align-self: stretch; }
  .te-grass-side { flex-direction: row; align-items: center; justify-content: flex-end; width: 100%; padding-top: 0; gap: 10px; }
  .te-tabs-summary { display: none; }
  .te-spine { padding-left: 22px; }
  .te-spine::before { left: 5px; }
  .te-spine-dot { left: -20px; }
  .te-dot-size-2 .te-spine-dot { left: -21px; }
  .te-dot-size-3 .te-spine-dot,
  .te-spine-day.is-open .te-spine-dot { left: -22px; }
  .te-card { padding: 9px 11px 10px; }
  .te-media-grid.te-grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
  .te-catpicker-select { max-width: 120px; }
  .te-stats-row { grid-template-columns: 16px minmax(60px, auto) 1fr 48px; }
}
.is-mobile .te-composer-textarea { font-size: 16px; }

/* ---------- Obsidian Publish: the read-only timeline inside a note (appended to styles.css by the Publish build) ---------- */
.te-publish.te-view {
  margin: 0;
}
/* the note's own column already limits the width and has its padding */
.te-publish .te-root {
  max-width: none;
  padding: 0 0 32px;
}
/* Publish positions modals against the page, which scrolls; the lightbox must cover the window */
.modal-container.te-publish-modal {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal, 50);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-container.te-publish-modal .modal-bg {
  position: absolute;
  inset: 0;
}
.modal-container.te-publish-modal .modal-close-button {
  cursor: pointer;
}
/* Publish gives buttons and inputs the site font but leaves <select> on the browser default */
.te-publish select {
  font-family: inherit;
}
/* <<< timeline-editor */

/* >>> project-tracker: generated by obsidian-project-tracker (npm run deploy:publish); edits inside this block are overwritten */
/* Project Tracker — styles. All classes are prefixed with pt- */

/* ---------- layout ---------- */
.pt-view {
  padding: 0 !important;
}
.pt-root {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 20px 64px;
  container-type: inline-size;
}
.pt-spacer {
  flex: 1 1 auto;
}
.pt-empty {
  color: var(--text-muted);
  padding: 12px 4px;
  font-size: var(--font-ui-small);
}
.pt-empty-dash,
.pt-empty-gantt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 4px;
}
.pt-tab-panel[style*="display: none"] {
  display: none;
}

/* ---------- icons (Sanctum masks Lucide icons; keep the originals inside the plugin UI) ---------- */
.pt-view svg.svg-icon,
.pt-modal svg.svg-icon {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: transparent !important;
}
.pt-view svg.svg-icon > *,
.pt-modal svg.svg-icon > * {
  display: inline !important;
}

/* ---------- buttons & inputs ---------- */
.pt-view button.pt-icon-btn,
.pt-modal button.pt-icon-btn,
.pt-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: var(--radius-s);
  color: var(--text-muted);
  cursor: pointer;
}
.pt-icon-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.pt-icon-btn svg {
  width: 16px;
  height: 16px;
}
.pt-btn {
  font-size: var(--font-ui-small);
}
.pt-view button.pt-btn-small,
.pt-modal button.pt-btn-small {
  font-size: var(--font-ui-smaller);
  padding: 4px 10px;
  height: 26px;
  line-height: 1;
}
.pt-view button.pt-btn-small.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.pt-modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pt-prompt-input,
.pt-move-select {
  width: 100%;
}
.pt-confirm-text {
  margin: 0;
  white-space: pre-wrap;
}
.pt-input,
.pt-view input.pt-input,
.pt-modal input.pt-input {
  font-size: var(--font-ui-small);
  padding: 5px 8px;
  border-radius: var(--radius-s);
  border: 1px solid var(--background-modifier-border);
  background: var(--background-modifier-form-field);
  color: var(--text-normal);
  height: 30px;
  box-sizing: border-box;
}
.pt-textarea {
  width: 100%;
  min-height: 72px;
  font-size: var(--font-ui-small);
  resize: vertical;
}
.pt-select-small {
  font-size: var(--font-ui-smaller);
  height: 26px;
  padding: 2px 22px 2px 8px;
}
.pt-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.pt-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-ui-smaller);
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--background-modifier-hover);
  color: var(--text-muted);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-chip.is-clickable {
  cursor: pointer;
}
.pt-chip.is-clickable:hover {
  color: var(--text-normal);
}
.pt-chip-category,
.pt-chip-tag {
  background: transparent;
  padding: 0;
  color: var(--text-muted);
}
.pt-project-ref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  cursor: pointer;
  max-width: 100%;
  min-width: 0;
}
.pt-project-ref:hover .pt-project-ref-title {
  color: var(--text-normal);
  text-decoration: underline;
}
.pt-project-ref-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-progress {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--background-modifier-border);
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 40px;
}
.pt-progress-fill {
  height: 100%;
  border-radius: 3px;
}
.pt-dday {
  font-size: var(--font-ui-smaller);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-muted);
}
.pt-dday.is-soon {
  color: var(--color-orange, #ba7517);
}
.pt-dday.is-over {
  color: var(--text-error, #e24b4a);
}
.pt-health {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: nowrap;
}
.pt-health.is-ontrack,
.pt-health.is-ahead {
  color: var(--color-green, #1d9e75);
}
.pt-health.is-behind {
  color: var(--color-orange, #ba7517);
}
.pt-health.is-overdue {
  color: var(--text-error, #e24b4a);
}
.pt-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-s);
  white-space: nowrap;
}
.pt-status:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.pt-status .pt-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.pt-postponed {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
}
.pt-streak {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-list-category {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- tabs ---------- */
.pt-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 12px;
}
.pt-view button.pt-tab {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 8px 12px;
  height: auto;
  font-size: var(--font-ui-medium);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.pt-view button.pt-tab:hover {
  color: var(--text-normal);
}
.pt-view button.pt-tab.is-active {
  color: var(--text-normal);
  border-bottom-color: var(--interactive-accent);
}
.pt-link-status {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  padding: 2px 4px;
}
.pt-link-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  margin-right: 6px;
  vertical-align: 1px;
}
.pt-link-status.is-api::before {
  background: var(--color-green, #1d9e75);
}

/* ---------- tiles ---------- */
.pt-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 4px 0 14px;
}
.pt-tile {
  background: var(--background-secondary);
  border-radius: var(--radius-m);
  padding: 10px 12px;
}
.pt-tile-value {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pt-tile-label {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-top: 2px;
}
.pt-tile.is-warn .pt-tile-value {
  color: var(--color-orange, #ba7517);
}
.pt-tile.is-danger .pt-tile-value {
  color: var(--text-error, #e24b4a);
}
.pt-tile.is-good .pt-tile-value {
  color: var(--color-green, #1d9e75);
}

/* ---------- dashboard ---------- */
.pt-dash-section {
  margin-bottom: 18px;
}
.pt-dash-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 6px;
}
.pt-dash-title {
  font-weight: 600;
  font-size: var(--font-ui-medium);
}
.pt-dash-count {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-group-title {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin: 8px 0 2px;
}
.pt-group-title.is-overdue {
  color: var(--text-error, #e24b4a);
}
.pt-habit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: var(--radius-s);
  flex-wrap: wrap;
}
.pt-habit-row:hover {
  background: var(--background-modifier-hover);
}
.pt-habit-row.is-done .pt-habit-title {
  color: var(--text-muted);
}
.pt-habit-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
  cursor: pointer;
}
.pt-habit-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-habit-meta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: nowrap;
}
.pt-week-dots {
  display: inline-flex;
  gap: 3px;
}
.pt-week-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--background-modifier-border);
}
.pt-week-dot.is-on {
  background: var(--color-green, #1d9e75);
}
.pt-deadline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.pt-deadline:hover {
  background: var(--background-modifier-hover);
}
.pt-deadline-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-deadline-progress {
  max-width: 140px;
  margin-left: auto;
}
.pt-ms-icon {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--pt-bar, var(--interactive-accent));
  transform: rotate(45deg);
  border-radius: 2px;
  flex: 0 0 auto;
}

/* ---------- task rows ---------- */
.pt-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px 3px calc(4px + var(--pt-indent, 0) * 16px);
  border-radius: var(--radius-s);
  font-size: var(--font-ui-small);
  min-height: 28px;
}
.pt-task:hover {
  background: var(--background-modifier-hover);
}
.pt-task-check {
  margin: 0;
  flex: 0 0 auto;
}
.pt-task-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pt-task.is-done .pt-task-text,
.pt-task.is-cancelled .pt-task-text {
  color: var(--text-muted);
  text-decoration: line-through;
}
.pt-task-due,
.pt-task-est {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pt-task-due.is-overdue {
  color: var(--text-error, #e24b4a);
}
.pt-task-due.is-today {
  color: var(--color-orange, #ba7517);
}
.pt-task-delete {
  opacity: 0;
}
.pt-task:hover .pt-task-delete {
  opacity: 1;
}

/* ---------- check-in control ---------- */
.pt-checkin {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pt-checkin-value {
  width: 72px;
}
.pt-checkin-note {
  flex: 1 1 160px;
  min-width: 120px;
}
.pt-checkin-unit,
.pt-checkin-sofar {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-view button.pt-checkin-btn,
.pt-modal button.pt-checkin-btn {
  height: 28px;
  padding: 0 12px;
  font-size: var(--font-ui-small);
}
.pt-checkin-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-ui-small);
  color: var(--color-green, #1d9e75);
}
.pt-checkin-done svg {
  width: 16px;
  height: 16px;
}
.pt-checkin-skipped {
  color: var(--text-muted);
}

/* ---------- list ---------- */
.pt-list-toolbar,
.pt-gantt-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pt-seg {
  display: inline-flex;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.pt-view button.pt-seg-btn {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  height: 26px;
  padding: 0 10px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-view button.pt-seg-btn.is-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.pt-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--background-modifier-border);
  cursor: pointer;
}
.pt-list-row:hover {
  background: var(--background-modifier-hover);
}
.pt-list-row.is-selected {
  background: color-mix(in srgb, var(--interactive-accent) 10%, transparent);
}
.pt-list-row.is-done .pt-list-title,
.pt-list-row.is-archived .pt-list-title {
  color: var(--text-muted);
}
.pt-list-main {
  flex: 1 1 auto;
  min-width: 0;
}
.pt-list-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pt-list-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-list-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-top: 3px;
}
.pt-list-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.pt-list-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 150px;
}
.pt-list-rate {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  justify-content: flex-end;
}
.pt-list-percent {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- gantt ---------- */
.pt-gantt-host {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--background-primary);
}
.pt-gantt-scroll {
  overflow: auto;
  max-height: 70vh;
  position: relative;
}
.pt-gantt-inner {
  position: relative;
  min-width: 100%;
}
.pt-gantt-sticky {
  position: sticky;
  left: 0;
  z-index: 6;
  background: var(--background-primary);
}
.pt-gantt-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 7;
  background: var(--background-primary);
  border-bottom: 1px solid var(--background-modifier-border);
}
.pt-gantt-corner {
  flex: 0 0 var(--pt-label-w);
  width: var(--pt-label-w);
  border-right: 1px solid var(--background-modifier-border);
  z-index: 8;
}
.pt-gantt-hcells {
  position: relative;
  height: 40px;
  flex: 0 0 auto;
}
.pt-gantt-hcell {
  position: absolute;
  box-sizing: border-box;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding: 0 4px;
  line-height: 20px;
}
.pt-gantt-hcell.is-top {
  top: 0;
  height: 20px;
  border-left: 1px solid var(--background-modifier-border);
  font-weight: 500;
  color: var(--text-normal);
}
.pt-gantt-hcell.is-bottom {
  top: 20px;
  height: 20px;
  border-left: 1px solid var(--background-modifier-border-hover, var(--background-modifier-border));
  text-align: center;
  padding: 0;
}
.pt-gantt-hcell.is-bottom.is-weekend {
  color: var(--text-faint);
}
.pt-gantt-hcell.is-bottom.is-today {
  color: var(--interactive-accent);
  font-weight: 600;
}
.is-zoom-month .pt-gantt-hcell.is-bottom {
  text-align: left;
  padding: 0 4px;
}
.pt-gantt-body {
  position: relative;
}
.pt-gantt-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.pt-gantt-weekend {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--background-secondary);
  opacity: 0.6;
}
.pt-gantt-gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--background-modifier-border);
  opacity: 0.6;
}
.pt-gantt-gridline.is-strong {
  opacity: 1;
}
.pt-gantt-overload {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(226, 75, 74, 0.08);
  pointer-events: auto;
}
.pt-gantt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--interactive-accent);
  opacity: 0.85;
  z-index: 1;
}
.pt-gantt-today-label {
  position: sticky;
  top: 0;
  display: inline-block;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-on-accent);
  background: var(--interactive-accent);
  padding: 0 5px;
  border-radius: 0 0 4px 4px;
  line-height: 14px;
}
.pt-gantt-lane-row,
.pt-gantt-row {
  display: flex;
  position: relative;
  z-index: 1;
}
.pt-gantt-label {
  flex: 0 0 var(--pt-label-w);
  width: var(--pt-label-w);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-right: 1px solid var(--background-modifier-border);
  border-bottom: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-small);
  cursor: pointer;
  overflow: hidden;
}
.pt-gantt-label:hover {
  background: var(--background-modifier-hover);
}
.pt-gantt-label.is-lane {
  height: 28px;
  background: var(--background-secondary);
  font-weight: 600;
  font-size: var(--font-ui-smaller);
}
.pt-gantt-row .pt-gantt-label {
  height: 36px;
}
.pt-gantt-row.is-selected .pt-gantt-label {
  background: color-mix(in srgb, var(--interactive-accent) 12%, var(--background-primary));
}
.pt-gantt-row.is-done .pt-gantt-title,
.pt-gantt-row.is-archived .pt-gantt-title,
.pt-gantt-row.is-paused .pt-gantt-title {
  color: var(--text-muted);
}
.pt-gantt-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-gantt-meta {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pt-gantt-row:not(.is-sub) .pt-gantt-meta {
  display: none;
}
.pt-chevron {
  display: inline-flex;
  color: var(--text-muted);
  transition: transform 120ms ease;
}
.pt-chevron svg {
  width: 14px;
  height: 14px;
}
.is-collapsed .pt-chevron {
  transform: rotate(-90deg);
}
.pt-gantt-lane-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-gantt-lane-count {
  font-size: 10px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.pt-gantt-track {
  position: relative;
  flex: 0 0 auto;
  height: 36px;
  border-bottom: 1px solid var(--background-modifier-border);
  box-sizing: border-box;
}
.pt-gantt-track.is-lane {
  height: 28px;
  background: color-mix(in srgb, var(--background-secondary) 60%, transparent);
}
.pt-gantt-bar {
  position: absolute;
  top: 8px;
  height: 20px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--pt-bar) 28%, var(--background-primary));
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.pt-gantt-bar:hover {
  box-shadow: 0 0 0 1px var(--pt-bar);
}
.pt-gantt-bar.is-dragging {
  opacity: 0.85;
  box-shadow: 0 0 0 2px var(--pt-bar);
  z-index: 5;
}
.pt-gantt-row.is-selected .pt-gantt-bar {
  box-shadow: 0 0 0 2px var(--pt-bar);
}
.pt-gantt-bar.starts-before {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.pt-gantt-bar.ends-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.pt-gantt-row.is-planned .pt-gantt-bar {
  background: transparent;
  border: 1px dashed var(--pt-bar);
}
.pt-gantt-row.is-paused .pt-gantt-bar {
  opacity: 0.55;
}
.pt-gantt-row.is-done .pt-gantt-bar,
.pt-gantt-row.is-archived .pt-gantt-bar {
  opacity: 0.45;
}
.pt-gantt-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--pt-bar);
  border-radius: 5px 0 0 5px;
}
.pt-gantt-bar-text {
  display: none;
}
.pt-gantt-bar.is-open {
  background: color-mix(in srgb, var(--pt-bar) 10%, var(--background-primary));
  border-right: none;
  mask-image: linear-gradient(to right, #000 calc(100% - 60px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 60px), transparent);
}
.pt-habit-cell {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--pt-bar) 12%, transparent);
}
.pt-habit-cell.pt-level-1 { background: color-mix(in srgb, var(--pt-bar) 35%, transparent); }
.pt-habit-cell.pt-level-2 { background: color-mix(in srgb, var(--pt-bar) 55%, transparent); }
.pt-habit-cell.pt-level-3 { background: color-mix(in srgb, var(--pt-bar) 78%, transparent); }
.pt-habit-cell.pt-level-4 { background: var(--pt-bar); }
.pt-gantt-arrow {
  position: absolute;
  right: 4px;
  top: 2px;
  color: var(--pt-bar);
  opacity: 0.8;
}
.pt-gantt-arrow svg {
  width: 16px;
  height: 16px;
}
.pt-gantt-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 2;
}
.pt-gantt-handle.is-left {
  left: 0;
}
.pt-gantt-handle.is-right {
  right: 0;
}
.pt-gantt-bar.is-draggable {
  cursor: grab;
}
.pt-gantt-bar.is-dragging {
  cursor: grabbing;
}
.pt-gantt-tip {
  position: absolute;
  left: 6px;
  top: 0;
  line-height: 20px;
  font-size: 10px;
  color: var(--text-normal);
  background: var(--background-primary);
  padding: 0 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.pt-gantt-ms {
  position: absolute;
  top: 12px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--pt-bar);
  border: 2px solid var(--background-primary);
  border-radius: 2px;
  z-index: 2;
  cursor: default;
}
.pt-gantt-ms.is-done {
  background: var(--color-green, #1d9e75);
}
.pt-gantt-ms.is-past:not(.is-done) {
  background: var(--text-error, #e24b4a);
}
.pt-gantt-ms-label {
  position: absolute;
  left: 14px;
  top: -3px;
  transform: rotate(-45deg);
  transform-origin: left top;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
}

/* compact gantt (narrow) */
.pt-compact-lane-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-weight: 600;
  font-size: var(--font-ui-small);
  cursor: pointer;
  border-bottom: 1px solid var(--background-modifier-border);
}
.pt-compact-row {
  padding: 8px 4px;
  border-bottom: 1px solid var(--background-modifier-border);
  cursor: pointer;
}
.pt-compact-row.is-selected {
  background: color-mix(in srgb, var(--interactive-accent) 10%, transparent);
}
.pt-compact-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pt-compact-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.pt-compact-meta {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: nowrap;
}
.pt-compact-track {
  position: relative;
  height: 10px;
  margin-top: 6px;
  border-radius: 5px;
  background: var(--background-secondary);
  overflow: hidden;
}
.pt-compact-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--pt-bar) 30%, var(--background-primary));
  overflow: hidden;
}
.pt-compact-bar.is-open {
  mask-image: linear-gradient(to right, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 70%, transparent);
  background: color-mix(in srgb, var(--pt-bar) 60%, var(--background-primary));
}
.pt-compact-today {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--interactive-accent);
}

/* ---------- detail panel ---------- */
.pt-detail-host {
  margin-top: 18px;
}
.pt-panel {
  border: 1px solid var(--background-modifier-border);
  border-left: 4px solid var(--pt-bar);
  border-radius: var(--radius-m);
  padding: 14px 16px 18px;
  background: var(--background-primary);
}
.pt-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pt-panel-title {
  margin: 0;
  font-size: 1.25em;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-panel-actions {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}
.pt-panel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
}
.pt-panel-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pt-panel-bar {
  height: 8px;
  border-radius: 4px;
  flex: 1 1 200px;
}
.pt-panel-percent {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pt-panel-elapsed {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-progress-slider {
  width: 160px;
}
.pt-panel-desc {
  margin-top: 12px;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
}
.pt-panel-desc > :first-child {
  margin-top: 0;
}
.pt-panel-desc > :last-child {
  margin-bottom: 0;
}
.pt-panel-section {
  margin-top: 18px;
}
.pt-panel-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 6px;
}
.pt-panel-section-title {
  font-weight: 600;
}
.pt-panel-section-extra {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-milestone {
  margin-top: 10px;
  padding-left: 4px;
  border-left: 2px solid var(--background-modifier-border);
}
.pt-milestone.is-done {
  opacity: 0.75;
}
.pt-milestone-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  font-size: var(--font-ui-small);
}
.pt-milestone-name {
  font-weight: 600;
}
.pt-milestone-weight,
.pt-milestone-count {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-milestone-bar {
  max-width: 120px;
  height: 5px;
}
.pt-add-task,
.pt-add-milestone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  margin-top: 2px;
}
.pt-add-task-input {
  flex: 1 1 160px;
  min-width: 100px;
}
.pt-add-milestone input[type="text"] {
  flex: 1 1 160px;
  min-width: 100px;
}
.pt-add-task-date {
  width: 140px;
}
.pt-add-task-est {
  width: 72px;
}
.pt-add-task-btn {
  flex: 0 0 auto;
}
.pt-habit-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-habit-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.pt-mini-chart {
  font-size: var(--font-ui-smaller);
}
.pt-mini-title {
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pt-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 64px;
}
.pt-mini-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 3px;
}
.pt-mini-bar {
  width: 100%;
  max-width: 28px;
  background: var(--pt-bar, var(--interactive-accent));
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  opacity: 0.85;
}
.pt-mini-label {
  color: var(--text-faint);
  font-size: 10px;
  white-space: nowrap;
}
.pt-habit-recent {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-ui-smaller);
}
.pt-habit-log {
  display: flex;
  gap: 10px;
  color: var(--text-muted);
}
.pt-habit-log.is-skip {
  color: var(--text-faint);
}
.pt-habit-log-date {
  width: 44px;
  font-variant-numeric: tabular-nums;
}
.pt-habit-log-value {
  color: var(--text-normal);
  width: 48px;
}
.pt-activity-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 4px;
  border-radius: var(--radius-s);
  font-size: var(--font-ui-small);
  cursor: pointer;
}
.pt-activity-row:hover {
  background: var(--background-modifier-hover);
}
.pt-activity-date {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  width: 44px;
  flex: 0 0 auto;
}
.pt-activity-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-activity-cat {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
}
.pt-activity-foot {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.pt-history-row {
  display: flex;
  gap: 10px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  padding: 2px 4px;
}
.pt-history-date {
  flex: 0 0 auto;
}

/* ---------- grass ---------- */
.pt-grass-wrap {
  --pt-g0: var(--background-modifier-border);
  --pt-cell: 10px;
  --pt-gap: 2px;
  width: 100%;
  overflow: hidden;
}
.pt-grass {
  display: inline-block;
}
.pt-grass-months {
  display: grid;
  grid-template-columns: repeat(var(--pt-grass-cols), var(--pt-cell));
  gap: var(--pt-gap);
  margin-left: calc(24px + var(--pt-gap));
  height: 14px;
  font-size: 10px;
  color: var(--text-muted);
}
.pt-grass-month {
  white-space: nowrap;
}
.pt-grass-body {
  display: flex;
  gap: var(--pt-gap);
}
.pt-grass-days {
  display: grid;
  grid-template-rows: repeat(7, var(--pt-cell));
  gap: var(--pt-gap);
  width: 24px;
  font-size: 9px;
  color: var(--text-muted);
}
.pt-grass-day {
  line-height: var(--pt-cell);
  visibility: hidden;
}
.pt-grass-day.is-visible {
  visibility: visible;
}
.pt-grass-cells {
  display: grid;
  grid-template-columns: repeat(var(--pt-grass-cols), var(--pt-cell));
  grid-template-rows: repeat(7, var(--pt-cell));
  gap: var(--pt-gap);
}
.pt-grass-cell {
  width: var(--pt-cell);
  height: var(--pt-cell);
  border-radius: 2px;
  background: var(--pt-g0);
}
.pt-grass-cell.pt-level-1 { background: color-mix(in srgb, var(--pt-bar) 35%, var(--background-primary)); }
.pt-grass-cell.pt-level-2 { background: color-mix(in srgb, var(--pt-bar) 55%, var(--background-primary)); }
.pt-grass-cell.pt-level-3 { background: color-mix(in srgb, var(--pt-bar) 78%, var(--background-primary)); }
.pt-grass-cell.pt-level-4 { background: var(--pt-bar); }
.pt-grass-cell.is-out,
.pt-grass-cell.is-future {
  opacity: 0.3;
}
.pt-grass-cell.is-skip {
  background: repeating-linear-gradient(45deg, var(--pt-g0), var(--pt-g0) 2px, transparent 2px, transparent 4px);
}
.pt-grass-cell.is-today {
  box-shadow: inset 0 0 0 1px var(--text-muted);
}

/* ---------- modals ---------- */
.pt-project-modal .modal-content,
.pt-quick-modal .modal-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pt-field-dates {
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
}
.pt-field-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 140px;
  min-width: 120px;
}
.pt-field-col-small {
  flex: 0 1 120px;
}
.pt-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.pt-label {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-modal .pt-input,
.pt-modal .pt-select {
  width: 100%;
}
.pt-title-input {
  font-size: var(--font-ui-medium) !important;
  height: 36px !important;
}
.pt-color-line {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
}
.pt-color-input {
  width: 36px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
}
.pt-color-auto-label {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-habit-config {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: 4px 12px 8px;
}
.pt-habit-config .setting-item {
  padding: 8px 0;
  border: none;
}
.pt-habit-config-title {
  font-weight: 600;
  font-size: var(--font-ui-small);
  padding: 8px 0 2px;
}
.pt-weekday-picker {
  display: flex;
  gap: 4px;
}
.pt-modal button.pt-weekday {
  width: 30px;
  height: 28px;
  padding: 0;
  font-size: var(--font-ui-smaller);
}
.pt-modal button.pt-weekday.is-on {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}
.pt-catpicker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pt-catpicker-select {
  flex: 1 1 120px;
  min-width: 100px;
}
.pt-catpicker-add {
  display: flex;
  gap: 6px;
  flex: 1 1 100%;
}
.pt-catpicker-input {
  flex: 1 1 auto;
}
.pt-quick-help {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  line-height: 1.5;
}
.pt-quick-input {
  width: 100%;
  font-size: var(--font-ui-medium) !important;
  height: 38px !important;
}
.pt-quick-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: var(--font-ui-small);
  background: var(--background-secondary);
  border-radius: var(--radius-m);
  padding: 8px 12px;
}
.pt-quick-row {
  display: contents;
}
.pt-quick-key {
  color: var(--text-muted);
}
.pt-checkin-modal .pt-habit-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--background-modifier-border);
}

/* ---------- narrow layouts ---------- */
@container (max-width: 600px) {
  .pt-root {
    padding: 12px 12px 48px;
  }
  .pt-list-side {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .pt-list-progress {
    width: 110px;
  }
  .pt-panel-head {
    flex-wrap: wrap;
  }
  .pt-panel-title {
    white-space: normal;
  }
  .pt-add-task {
    flex-wrap: wrap;
  }
}

/* ---------- phases / sub-rows ---------- */
.pt-gantt-expand {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  border-radius: 3px;
  flex: 0 0 auto;
  transition: transform 120ms ease;
}
.pt-gantt-expand:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}
.pt-gantt-expand.is-open {
  transform: rotate(90deg);
}
.pt-gantt-expand.is-placeholder {
  visibility: hidden;
}
.pt-gantt-expand svg {
  width: 14px;
  height: 14px;
}
.pt-gantt-row.is-sub .pt-gantt-label {
  height: 26px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  padding-left: 30px;
  background: var(--background-primary);
}
.pt-gantt-sub-mark {
  color: var(--text-faint);
}
.pt-gantt-track.is-sub {
  height: 26px;
  background: color-mix(in srgb, var(--background-secondary) 35%, transparent);
}
.pt-gantt-row.is-sub.is-current .pt-gantt-label {
  color: var(--text-normal);
}
.pt-gantt-subbar {
  position: absolute;
  top: 7px;
  height: 12px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--pt-bar) 18%, var(--background-primary));
  overflow: hidden;
}
.pt-gantt-row.is-sub.is-current .pt-gantt-subbar {
  box-shadow: 0 0 0 1px var(--pt-bar);
}
.pt-gantt-row.is-sub.is-done .pt-gantt-subbar {
  opacity: 0.5;
}
.pt-gantt-subbar .pt-gantt-fill {
  border-radius: 4px 0 0 4px;
  opacity: 0.85;
}
.pt-gantt-subbar.starts-before {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.pt-gantt-subbar.ends-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.pt-gantt-dot {
  position: absolute;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--background-primary);
  border: 2px solid var(--pt-bar);
  z-index: 2;
  box-sizing: border-box;
}
.pt-gantt-dot.is-done {
  background: var(--pt-bar);
}
.pt-gantt-dot.is-overdue {
  border-color: var(--text-error, #e24b4a);
}
.pt-phase-icon {
  display: inline-block;
  width: 12px;
  height: 6px;
  border-radius: 3px;
  background: var(--pt-bar, var(--interactive-accent));
  flex: 0 0 auto;
}
.pt-milestone.is-current {
  border-left-color: var(--interactive-accent);
}
.pt-goal-text {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pt-goal-input {
  width: 72px;
}
.pt-goal-unit {
  width: 60px;
}
.pt-add-ms-name {
  flex: 1 1 140px;
  min-width: 100px;
}
.pt-add-ms-sep {
  color: var(--text-faint);
}
.pt-add-milestone {
  flex-wrap: wrap;
}
.pt-add-task-rec {
  width: 92px;
}
.pt-task-rec {
  font-size: 11px;
  opacity: 0.8;
}

/* ---------- week board ---------- */
.pt-week-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pt-week-title {
  font-weight: 600;
}
.pt-week-capacity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-week-capacity.is-over {
  color: var(--text-error, #e24b4a);
}
.pt-week-capacity-bar {
  width: 120px;
  flex: 0 0 auto;
}
.pt-week-warning {
  font-size: var(--font-ui-small);
  color: var(--text-error, #e24b4a);
  background: rgba(226, 75, 74, 0.1);
  border-radius: var(--radius-s);
  padding: 6px 10px;
  margin-bottom: 10px;
}
.pt-week-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(160px, 1.3fr);
  gap: 6px;
  align-items: stretch;
}
.pt-week-col {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  background: var(--background-secondary);
  border-radius: var(--radius-m);
  min-width: 0;
}
.pt-week-col.is-past {
  opacity: 0.75;
}
.pt-week-col.is-today {
  box-shadow: inset 0 0 0 1px var(--interactive-accent);
}
.pt-week-col.is-unscheduled {
  background: transparent;
  border: 1px dashed var(--background-modifier-border);
}
.pt-week-col-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 8px 4px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.pt-week-dow {
  font-weight: 600;
  color: var(--text-normal);
}
.pt-week-col.is-today .pt-week-dow {
  color: var(--interactive-accent);
}
.pt-week-est {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.pt-week-col-body {
  flex: 1 1 auto;
  padding: 4px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  transition: background 120ms ease;
}
.pt-week-col-body.is-over {
  background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
}
.pt-week-card {
  background: var(--background-primary);
  border-radius: var(--radius-s);
  border-left: 3px solid var(--pt-bar);
  padding: 5px 6px;
  font-size: var(--font-ui-smaller);
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.pt-week-card:hover {
  box-shadow: 0 0 0 1px var(--background-modifier-border-hover, var(--background-modifier-border));
}
.pt-week-card.is-dragging {
  opacity: 0.5;
}
.pt-week-card.is-done {
  opacity: 0.55;
}
.pt-week-card.is-done .pt-week-card-text {
  text-decoration: line-through;
}
.pt-week-card.is-overdue {
  border-left-color: var(--text-error, #e24b4a);
}
.pt-week-card-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.pt-week-card-top .pt-task-check {
  margin-top: 2px;
}
.pt-week-card-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.pt-week-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-left: 20px;
  color: var(--text-muted);
}
.pt-week-card-meta .pt-project-ref {
  font-size: 10px;
}
.pt-week-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px 2px;
  cursor: pointer;
  font-size: var(--font-ui-smaller);
}
.pt-week-group.is-collapsed .pt-chevron {
  transform: rotate(-90deg);
}
.pt-week-group-count {
  color: var(--text-faint);
}
@container (max-width: 720px) {
  .pt-week-board {
    grid-template-columns: 1fr;
  }
  .pt-week-col {
    min-height: 0;
  }
  .pt-week-col-body {
    min-height: 32px;
  }
}

/* ---------- plan groups & add forms (redesign) ---------- */
.pt-plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-plan-group {
  border-radius: var(--radius-m);
  padding: 4px 6px 6px;
}
.pt-plan-group.is-loose {
  padding-left: 0;
  padding-right: 0;
}
.pt-plan-group-head {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  padding: 2px 4px 4px;
}
.pt-plan-group.pt-milestone {
  margin-top: 0;
  border-left: 3px solid var(--pt-bar, var(--background-modifier-border));
  background: color-mix(in srgb, var(--pt-bar, var(--background-secondary)) 6%, var(--background-primary));
  padding-left: 8px;
}
.pt-plan-group.pt-milestone.is-current {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pt-bar) 45%, transparent);
}
.pt-milestone-head {
  flex-wrap: wrap;
  padding: 6px 4px 4px;
}
.pt-milestone-kind {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-goal-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 6px 24px;
  font-size: var(--font-ui-smaller);
}
.pt-goal-unit-text {
  color: var(--text-muted);
}
.pt-view button.pt-add-link,
.pt-modal button.pt-add-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  box-shadow: none;
  height: 26px;
  padding: 0 6px;
  margin: 2px 0 0 18px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-s);
}
.pt-view button.pt-add-link:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}
.pt-view button.pt-add-link.is-milestone {
  margin-left: 0;
  margin-top: 4px;
  border: 1px dashed var(--background-modifier-border);
  width: 100%;
  justify-content: center;
  height: 32px;
}
.pt-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 2px 18px;
  padding: 10px 12px 10px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-primary);
}
.pt-add-form.is-milestone {
  margin-left: 0;
}
.pt-add-form .pt-add-task-input,
.pt-add-form .pt-add-ms-name {
  width: 100%;
}
.pt-add-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pt-add-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pt-add-label {
  font-size: 10px;
  color: var(--text-muted);
}
.pt-add-hint {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
}
.pt-add-form-buttons {
  display: flex;
  gap: 6px;
}
.pt-add-task,
.pt-add-milestone {
  display: none;
}
.pt-color-mode {
  flex: 1 1 auto;
}
.pt-color-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--background-modifier-border);
  flex: 0 0 auto;
}
.pt-add-form .pt-add-task-input,
.pt-add-form .pt-add-ms-name {
  flex: 0 0 auto;
  height: 30px;
  min-width: 0;
}
.pt-ms-delete {
  opacity: 0;
}
.pt-milestone-head:hover .pt-ms-delete,
.pt-ms-delete:focus-visible {
  opacity: 1;
}

/* ---------- project page ---------- */
.pt-project-view .pt-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 24px 64px;
  container-type: inline-size;
}
.pt-page-empty {
  padding: 40px 24px;
}
.pt-page-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 2px 0 14px 14px;
  border-left: 4px solid var(--pt-bar);
}
.pt-page-head-main {
  flex: 1 1 auto;
  min-width: 0;
}
.pt-page-cat {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-bottom: 2px;
}
.pt-page-title {
  margin: 0;
  font-size: 1.6em;
  line-height: 1.25;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pt-page.is-done .pt-page-title,
.pt-page.is-archived .pt-page-title {
  color: var(--text-muted);
}
.pt-page-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
}
.pt-page-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pt-page-meta-icon {
  display: inline-flex;
  color: var(--text-faint);
}
.pt-page-meta-icon svg {
  width: 14px;
  height: 14px;
}
.pt-page-status {
  cursor: pointer;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: var(--radius-s);
}
.pt-page-status:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.pt-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.pt-page-actions {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}
.pt-view button.pt-page-action {
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
}
.pt-view button.pt-page-more {
  border-color: var(--background-modifier-border);
}
.pt-page-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}
.pt-page-tile {
  min-width: 0;
}
.pt-page-tile .pt-tile-value {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-tile-sub {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-tile-bar {
  height: 4px;
  margin-top: 6px;
}
.pt-page-tile.is-warn .pt-tile-sub {
  color: var(--color-orange, #ba7517);
}
.pt-page-tile.is-danger .pt-tile-sub {
  color: var(--text-error, #e24b4a);
}
.pt-page-tile.is-good .pt-tile-sub {
  color: var(--color-green, #1d9e75);
}
.pt-page-desc {
  margin-top: 14px;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  white-space: pre-wrap;
}
.pt-page-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 18px;
  border-bottom: 1px solid var(--background-modifier-border);
}
.pt-view button.pt-page-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 8px 10px;
  height: auto;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.pt-view button.pt-page-tab:hover {
  color: var(--text-normal);
}
.pt-view button.pt-page-tab.is-active {
  color: var(--text-normal);
  font-weight: 600;
  border-bottom-color: var(--interactive-accent);
}
.pt-page-tab-count {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 400;
}
.pt-page-tabs-extra {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  padding-right: 4px;
}
.pt-page-body {
  padding-top: 14px;
}
.pt-habit-config-text {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}
.pt-milestone-kind.is-overdue {
  color: var(--text-error, #e24b4a);
}
.pt-view button.pt-row-menu,
.pt-modal button.pt-row-menu {
  opacity: 0.55;
  width: 24px;
  height: 24px;
}
.pt-task:hover .pt-row-menu,
.pt-milestone-head:hover .pt-row-menu,
.pt-row-menu:focus-visible {
  opacity: 1;
}
.pt-detail-host {
  display: none;
}
@container (max-width: 520px) {
  .pt-page-head {
    flex-wrap: wrap;
  }
  .pt-page-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 프로젝트 tab toolbar ---------- */
.pt-projects-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ---------- week board: grid with spanning cards ---------- */
.pt-week-layout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pt-week-layout.is-narrow {
  flex-direction: column;
}
.pt-week-grid {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 6px;
  row-gap: 4px;
  align-content: start;
  min-height: 220px;
  position: relative;
}
.pt-week-colbg {
  background: var(--background-secondary);
  border-radius: var(--radius-m);
  z-index: 0;
  transition: background 120ms ease;
}
.pt-week-colbg.is-past {
  opacity: 0.7;
}
.pt-week-colbg.is-today {
  box-shadow: inset 0 0 0 1px var(--interactive-accent);
}
.pt-week-colbg.is-over {
  background: color-mix(in srgb, var(--interactive-accent) 14%, var(--background-secondary));
}
.pt-week-grid .pt-week-col-head {
  z-index: 1;
  padding: 8px 8px 4px;
}
.pt-week-grid .pt-week-card {
  z-index: 1;
  position: relative;
  margin: 0 6px;
  min-width: 0;
}
.pt-week-grid .pt-week-card.starts-before {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0;
}
.pt-week-grid .pt-week-card.ends-after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
}
.pt-week-card-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: ew-resize;
}
.pt-week-card-handle.is-right {
  right: -2px;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.pt-week-card-handle.is-left {
  left: -3px;
  border-radius: var(--radius-s) 0 0 var(--radius-s);
}
.pt-week-card-handle:hover,
.pt-week-card.is-resizing .pt-week-card-handle {
  background: color-mix(in srgb, var(--pt-bar) 25%, transparent);
}
.pt-week-card.is-resizing {
  box-shadow: 0 0 0 2px var(--pt-bar);
}
.pt-week-card.is-done {
  cursor: default;
}
.pt-week-layout .pt-week-col.is-unscheduled {
  flex: 0 0 210px;
  min-height: 220px;
  align-self: stretch;
}
.pt-week-layout.is-narrow .pt-week-col.is-unscheduled {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
}
.pt-week-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-week-help {
  display: inline-flex;
  color: var(--text-faint);
  cursor: help;
}
.pt-week-help svg {
  width: 15px;
  height: 15px;
}
.pt-task-planned {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: nowrap;
}
@container (max-width: 720px) {
  .pt-week-layout .pt-week-col.is-unscheduled {
    flex: 0 0 160px;
  }
}

/* ---------- plan: hidden done tasks, subtasks ---------- */
.pt-view button.pt-add-link.is-show-done {
  color: var(--text-faint);
}
.pt-task.is-sub .pt-task-text {
  font-size: var(--font-ui-smaller);
}
.pt-add-form.is-subtask {
  margin-left: 40px;
}
.pt-add-field-check {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  align-self: flex-end;
  padding-bottom: 6px;
}

/* ---------- habit: insights, badges, calendar, breaks ---------- */
.pt-habit-insights {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
}
.pt-habit-insight::before {
  content: "·";
  margin-right: 6px;
  color: var(--text-faint);
}
.pt-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  padding: 3px 8px;
  border: 1px dashed var(--background-modifier-border);
  border-radius: 999px;
}
.pt-badge.is-earned {
  color: var(--text-normal);
  border-style: solid;
  border-color: color-mix(in srgb, var(--pt-bar) 50%, transparent);
  background: color-mix(in srgb, var(--pt-bar) 10%, transparent);
}
.pt-habit-viewbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pt-grass-cell.is-clickable {
  cursor: pointer;
}
.pt-grass-cell.is-clickable:hover {
  box-shadow: inset 0 0 0 1px var(--text-muted);
}
.pt-grass-cell.is-break {
  background: repeating-linear-gradient(-45deg, var(--pt-g0), var(--pt-g0) 2px, transparent 2px, transparent 4px);
}
.pt-cal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-cal-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt-cal-title {
  font-weight: 600;
  font-size: var(--font-ui-small);
}
.pt-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.pt-cal-dow {
  font-size: 10px;
  color: var(--text-faint);
  text-align: center;
  padding-bottom: 2px;
}
.pt-cal-cell {
  min-height: 44px;
  border-radius: var(--radius-s);
  background: var(--background-secondary);
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-ui-smaller);
}
.pt-cal-cell.is-empty {
  background: transparent;
}
.pt-cal-cell.is-clickable {
  cursor: pointer;
}
.pt-cal-cell.is-clickable:hover {
  box-shadow: inset 0 0 0 1px var(--text-muted);
}
.pt-cal-cell.is-today {
  box-shadow: inset 0 0 0 1px var(--interactive-accent);
}
.pt-cal-cell.is-future,
.pt-cal-cell.is-out {
  opacity: 0.45;
}
.pt-cal-cell.pt-level-1 { background: color-mix(in srgb, var(--pt-bar) 20%, var(--background-secondary)); }
.pt-cal-cell.pt-level-2 { background: color-mix(in srgb, var(--pt-bar) 35%, var(--background-secondary)); }
.pt-cal-cell.pt-level-3 { background: color-mix(in srgb, var(--pt-bar) 55%, var(--background-secondary)); }
.pt-cal-cell.pt-level-4 { background: color-mix(in srgb, var(--pt-bar) 75%, var(--background-secondary)); }
.pt-cal-cell.pt-level-4 .pt-cal-day,
.pt-cal-cell.pt-level-4 .pt-cal-value,
.pt-cal-cell.pt-level-3 .pt-cal-day,
.pt-cal-cell.pt-level-3 .pt-cal-value {
  color: var(--text-on-accent, #fff);
}
.pt-cal-cell.is-break {
  background: repeating-linear-gradient(-45deg, var(--background-secondary), var(--background-secondary) 3px, var(--background-primary) 3px, var(--background-primary) 6px);
}
.pt-cal-day {
  color: var(--text-muted);
  font-size: 10px;
}
.pt-cal-value {
  font-weight: 600;
}
.pt-cal-value.is-muted {
  color: var(--text-faint);
  font-weight: 400;
}
.pt-breaks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pt-breaks-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pt-break-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-ui-small);
  padding: 2px 4px;
}
.pt-break-note {
  color: var(--text-muted);
}
.pt-ramp-row {
  display: flex;
  gap: 10px;
  padding: 4px 0 8px;
}
.pt-statusbar {
  cursor: pointer;
}
.pt-statusbar.is-done {
  color: var(--color-green, #1d9e75);
}


/* ---------- read-only (the Publish build) and the tracker's code block inside a note ---------- */
.pt-readonly .pt-status {
  cursor: default;
}
.pt-readonly .pt-task-check:disabled {
  opacity: 1;
  cursor: default;
}
.pt-readonly .pt-week-card {
  cursor: pointer;
}
.pt-embed-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--background-modifier-border);
  border-radius: var(--radius-m);
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}

/* ---------- Obsidian Publish: the read-only tracker inside a note (appended to styles.css by the Publish build) ---------- */
.pt-publish .pt-view {
  margin: 0;
  padding: 0;
}
/* the note's own column already limits the width and has its padding */
.pt-publish .pt-root,
.pt-publish .pt-page {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.pt-publish-back {
  margin-bottom: 8px;
}
/* Publish gives buttons and inputs the site font but leaves <select> on the browser default */
.pt-publish select {
  font-family: inherit;
}
/* <<< project-tracker */

/* >>> object-tracker: generated by obsidian-object-tracker (npm run deploy:publish); edits inside this block are overwritten */
/* Object Tracker — card-style UI. All classes are prefixed with ot- */

/* ---------- tokens ---------- */
.ot-view, .ot-modal {
  --ot-panel: var(--background-primary);
  --ot-panel-2: var(--background-secondary);
  --ot-line: var(--background-modifier-border);
  --ot-hover: var(--background-modifier-hover);
  --ot-accent: var(--interactive-accent);
  --ot-accent-soft: hsla(var(--accent-h, 254), var(--accent-s, 60%), var(--accent-l, 60%), 0.13);
  --ot-on-accent: var(--text-on-accent);
  --ot-durable: #3b82f6; --ot-durable-soft: rgba(59, 130, 246, 0.13);
  --ot-consumable: #e08a1e; --ot-consumable-soft: rgba(224, 138, 30, 0.15);
  --ot-ingredient: #65a30d; --ot-ingredient-soft: rgba(101, 163, 13, 0.14);
  --ot-clothing: #db2777; --ot-clothing-soft: rgba(219, 39, 119, 0.13);
  --ot-book: #7c3aed; --ot-book-soft: rgba(124, 58, 237, 0.13);
  --ot-cosmetic: #0d9488; --ot-cosmetic-soft: rgba(13, 148, 136, 0.13);
  /* 화장품 대분류 colors, by position in the settings list */
  --ot-cg-0: #0d9488; --ot-cg-1: #db2777; --ot-cg-2: #b45309; --ot-cg-3: #2563eb; --ot-cg-4: #7c3aed; --ot-cg-5: #e11d48; --ot-cg-6: #52525b; --ot-cg-7: #6b7280;
  --ot-meal: #f59e0b; --ot-meal-soft: rgba(245, 158, 11, 0.15);
  --ot-red: var(--color-red, #e5484d); --ot-red-soft: rgba(229, 72, 77, 0.13);
  --ot-green: var(--color-green, #1a9f5a); --ot-green-soft: rgba(26, 159, 90, 0.13);
  --ot-orange: var(--color-orange, #e08a1e); --ot-orange-soft: rgba(224, 138, 30, 0.15);
  --ot-shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 6px 20px rgba(20, 20, 30, 0.06);
  --ot-radius: 14px;
}
.theme-dark .ot-view, .theme-dark .ot-modal {
  --ot-durable: #60a5fa; --ot-consumable: #f5a53a; --ot-ingredient: #a3e635; --ot-clothing: #f472b6; --ot-book: #a78bfa; --ot-meal: #fbbf24; --ot-cosmetic: #2dd4bf;
  --ot-cg-0: #2dd4bf; --ot-cg-1: #f472b6; --ot-cg-2: #f59e0b; --ot-cg-3: #60a5fa; --ot-cg-4: #a78bfa; --ot-cg-5: #fb7185; --ot-cg-6: #a1a1aa; --ot-cg-7: #9ca3af;
  --ot-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ---------- layout ---------- */
.ot-view { padding: 0 !important; background: var(--background-secondary); position: relative; overflow: hidden !important; display: flex; flex-direction: column; container-type: inline-size; }
.ot-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ot-root { max-width: 1120px; margin: 0 auto; padding: 16px 20px 80px; container-type: inline-size; }
.ot-empty { color: var(--text-muted); padding: 12px 6px; font-size: var(--font-ui-small); }
.ot-help { color: var(--text-muted); font-size: var(--font-ui-smaller); margin-top: 6px; line-height: 1.45; }
.ot-muted { color: var(--text-muted); } .ot-faint { color: var(--text-faint); }
.ot-small { font-size: var(--font-ui-smaller); } .ot-tiny { font-size: 11px; }
.ot-grow { flex: 1 1 auto; min-width: 0; }
.is-clickable { cursor: pointer; }
.ot-view a { color: var(--text-muted); text-decoration: none; font-size: var(--font-ui-smaller); }
.ot-view a:hover { color: var(--text-normal); }

/* ---------- icons (Sanctum masks Lucide icons; keep the originals inside the plugin UI) ---------- */
.ot-view svg.svg-icon, .ot-modal svg.svg-icon { -webkit-mask-image: none !important; mask-image: none !important; background-color: transparent !important; }
.ot-view svg.svg-icon > *, .ot-modal svg.svg-icon > * { display: inline !important; }

/* ---------- buttons & inputs ---------- */
.ot-view button.ot-btn, .ot-modal button.ot-btn, .ot-settings button.ot-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ot-line); background: var(--ot-panel); color: var(--text-normal); font-size: var(--font-ui-small); box-shadow: none; cursor: pointer; white-space: nowrap; }
.ot-view button.ot-btn:hover, .ot-modal button.ot-btn:hover { background: var(--ot-hover); }
.ot-view button.ot-btn.is-primary, .ot-modal button.ot-btn.is-primary { background: var(--ot-accent); color: var(--ot-on-accent); border-color: transparent; font-weight: 600; }
.ot-view button.ot-btn.is-primary:hover, .ot-modal button.ot-btn.is-primary:hover { background: var(--interactive-accent-hover); }
.ot-view button.ot-btn.is-quiet, .ot-modal button.ot-btn.is-quiet { border-color: transparent; background: transparent; color: var(--text-muted); }
.ot-view button.ot-btn.is-quiet:hover, .ot-modal button.ot-btn.is-quiet:hover { background: var(--ot-hover); color: var(--text-normal); }
.ot-view button.ot-btn.is-ghost, .ot-modal button.ot-btn.is-ghost { background: transparent; border-style: dashed; color: var(--text-muted); }
.ot-view button.ot-btn.is-small, .ot-modal button.ot-btn.is-small { height: 26px; padding: 0 10px; font-size: var(--font-ui-smaller); border-radius: 8px; }
.ot-view button.ot-btn.mod-warning, .ot-modal button.ot-btn.mod-warning { background: var(--ot-red); color: #fff; border-color: transparent; }
.ot-btn-icon { display: inline-flex; } .ot-btn-icon svg { width: 15px; height: 15px; }
.ot-view button.ot-icon-btn, .ot-modal button.ot-icon-btn, .ot-icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 4px; width: 28px; height: 28px; background: transparent; border: none; box-shadow: none; border-radius: 8px; color: var(--text-muted); cursor: pointer; }
.ot-icon-btn:hover { background: var(--ot-hover); color: var(--text-normal); }
.ot-icon-btn svg { width: 16px; height: 16px; }
.ot-view input.ot-input, .ot-modal input.ot-input, .ot-view textarea.ot-textarea, .ot-modal textarea.ot-textarea { width: 100%; box-sizing: border-box; font-size: var(--font-ui-small); border-radius: 8px; }
.ot-modal input.ot-title-input { font-size: var(--font-ui-medium); font-weight: 600; }
.ot-textarea { min-height: 72px; resize: vertical; font-family: inherit; }
.ot-select { max-width: 100%; border-radius: 8px; }
.ot-select.is-small { height: 26px; font-size: var(--font-ui-smaller); padding: 2px 24px 2px 8px; }
.ot-view input.ot-search { max-width: 200px; height: 30px; }
.ot-money-input { text-align: right; font-variant-numeric: tabular-nums; }
.ot-act { opacity: 0; transition: opacity 0.12s; }
.ot-lrow:hover .ot-act, .is-narrow .ot-act, .ot-lrow:focus-within .ot-act { opacity: 1; }

.ot-segment { display: inline-flex; border: 1px solid var(--ot-line); border-radius: 10px; overflow: hidden; }
.ot-segment.is-wrap { flex-wrap: wrap; }
.ot-view button.ot-segment-btn, .ot-modal button.ot-segment-btn { border: none; border-radius: 0; box-shadow: none; background: transparent; color: var(--text-muted); height: 30px; padding: 0 12px; font-size: var(--font-ui-small); }
.ot-view button.ot-segment-btn.is-active, .ot-modal button.ot-segment-btn.is-active { background: var(--ot-accent); color: var(--ot-on-accent); }
.ot-view button.ot-segment-btn:hover:not(.is-active), .ot-modal button.ot-segment-btn:hover:not(.is-active) { background: var(--ot-hover); color: var(--text-normal); }

/* chips */
.ot-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ot-chips.is-tags { margin-top: 6px; }
.ot-view button.ot-chip, .ot-modal button.ot-chip, .ot-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; border: none; box-shadow: none; font-size: var(--font-ui-smaller); background: var(--ot-panel-2); color: var(--text-normal); cursor: pointer; }
.ot-view button.ot-chip:hover, .ot-modal button.ot-chip:hover { background: var(--ot-hover); }
.ot-view button.ot-chip.is-active, .ot-modal button.ot-chip.is-active, .ot-chip.is-active { background: var(--ot-accent); color: var(--ot-on-accent); }
.ot-seg { background: var(--ot-panel-2); padding: 3px; border-radius: 999px; gap: 2px; }
.ot-view .ot-seg button.ot-chip { background: transparent; color: var(--text-muted); height: 24px; }
.ot-view .ot-seg button.ot-chip.is-active { background: var(--ot-panel); color: var(--text-normal); box-shadow: var(--ot-shadow); font-weight: 600; }
.ot-tag { font-size: 11px; color: var(--text-muted); background: var(--ot-panel-2); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.ot-tag.is-missing { border: 1px dashed var(--ot-line); background: transparent; }
.ot-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ot-pill.is-ok { background: var(--ot-panel-2); color: var(--text-muted); }
.ot-pill.is-soon { background: var(--ot-orange-soft); color: var(--ot-orange); }
.ot-pill.is-over { background: var(--ot-red-soft); color: var(--ot-red); }
.ot-pill.is-acc { background: var(--ot-accent-soft); color: var(--text-accent); }
.ot-pill.is-green { background: var(--ot-green-soft); color: var(--ot-green); }
.ot-qty { color: var(--text-muted); font-size: var(--font-ui-smaller); font-weight: 400; }

/* kind icons */
.ot-kind-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; background: var(--ot-durable-soft); color: var(--ot-durable); }
.ot-kind-icon svg { width: 15px; height: 15px; }
.ot-kind-icon.is-consumable { background: var(--ot-consumable-soft); color: var(--ot-consumable); }
.ot-kind-icon.is-ingredient { background: var(--ot-ingredient-soft); color: var(--ot-ingredient); }
.ot-kind-icon.is-clothing { background: var(--ot-clothing-soft); color: var(--ot-clothing); }
.ot-kind-icon.is-book { background: var(--ot-book-soft); color: var(--ot-book); }
.ot-kind-icon.is-cosmetic { background: var(--ot-cosmetic-soft); color: var(--ot-cosmetic); }
.ot-kind-icon.is-meal { background: var(--ot-meal-soft); color: var(--ot-meal); }
.ot-kind-icon.is-place { background: var(--ot-accent-soft); color: var(--text-accent); width: 36px; height: 36px; border-radius: 10px; }
.ot-kind-icon.is-place svg { width: 18px; height: 18px; }
.ot-kind-icon.is-place.is-consumable { background: var(--ot-consumable-soft); color: var(--ot-consumable); }
.ot-kind-icon.is-muted { background: var(--ot-panel-2); color: var(--text-muted); }
.ot-kind-icon.is-big { width: 36px; height: 36px; border-radius: 10px; }
.ot-kind-icon.is-big svg { width: 18px; height: 18px; }

/* ---------- header ---------- */
.ot-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ot-title { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
.ot-tabs { display: inline-flex; background: var(--ot-panel-2); padding: 3px; border-radius: 999px; gap: 2px; border: 1px solid var(--ot-line); }
.ot-view button.ot-tab { border: 0; box-shadow: none; background: transparent; color: var(--text-muted); height: 30px; padding: 0 12px; border-radius: 999px; font-size: var(--font-ui-small); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.ot-view button.ot-tab:hover { color: var(--text-normal); }
.ot-view button.ot-tab.is-active { background: var(--ot-panel); color: var(--text-normal); box-shadow: var(--ot-shadow); font-weight: 600; }
.ot-tab-icon { display: inline-flex; } .ot-tab-icon svg { width: 15px; height: 15px; }
.ot-top-actions { margin-left: auto; display: flex; gap: 6px; }

/* collapsible secondary sections */
.ot-section { margin: 18px 0 0; }
.ot-section-header { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.ot-section-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.ot-chevron { display: inline-flex; transition: transform 0.15s; color: var(--text-muted); }
.ot-chevron svg { width: 14px; height: 14px; }
.ot-section.is-collapsed .ot-chevron { transform: rotate(-90deg); }
.ot-section.is-collapsed .ot-section-body { display: none; }
.ot-section-title { font-weight: 600; font-size: 15px; }
.ot-section-extras { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ot-recipe-grid { margin-top: 8px; }
.ot-plan-section .ot-week { margin-top: 6px; }

/* ---------- sections & cards ---------- */
.ot-sec { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 10px; }
.ot-sec h2 { font-size: 15px; margin: 0; }
.ot-sec-sub { font-size: var(--font-ui-smaller); color: var(--text-muted); }
.ot-sec-extras { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ot-sec-extras a + a { margin-left: 8px; }
.ot-sec.is-sheet { margin: 14px 0 6px; }
.ot-sec.is-sheet h2 { font-size: var(--font-ui-smaller); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ot-card { background: var(--ot-panel); border: 1px solid var(--ot-line); border-radius: var(--ot-radius); padding: 14px 16px; box-shadow: var(--ot-shadow); min-width: 0; }
.ot-card.is-click { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.ot-card.is-click:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20, 20, 30, 0.08), 0 10px 28px rgba(20, 20, 30, 0.08); }
.ot-card.is-dashed { border-style: dashed; box-shadow: none; cursor: pointer; }
.ot-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ot-card-head h3 { margin: 0; font-size: var(--font-ui-smaller); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; flex: 1; }
.ot-list-card { padding: 4px 12px; }
.ot-grid { display: grid; gap: 12px; }
.ot-g1 { grid-template-columns: 1fr; gap: 10px; }
.ot-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ot-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ot-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ot-auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ot-auto-sm { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ot-auto-xs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ot-two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ot-ledger-main { margin-top: 14px; }
.ot-ledger-main > .ot-card + .ot-card { margin-top: 12px; }
.ot-two-side.is-empty { display: none; }
.ot-two:has(.ot-two-side.is-empty) { grid-template-columns: minmax(0, 1fr); }
.ot-two-main > .ot-card + .ot-card { margin-top: 12px; }
.ot-two-side > .ot-card + .ot-card, .ot-two-side > .ot-grid + .ot-card { margin-top: 12px; }

/* stat tiles */
.ot-stat { padding: 14px 16px; }
.ot-stat-label { font-size: var(--font-ui-smaller); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.ot-stat-icon { display: inline-flex; } .ot-stat-icon svg { width: 14px; height: 14px; }
.ot-stat-body { display: flex; align-items: center; gap: 10px; }
.ot-stat-main { flex: 1; min-width: 0; }
.ot-stat-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-stat-sub { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-stat.is-warn .ot-stat-value { color: var(--ot-orange); }
.ot-stat.is-red .ot-stat-value { color: var(--ot-red); }
.ot-stat.is-green .ot-stat-value { color: var(--ot-green); }
.ot-stat.is-muted .ot-stat-value { color: var(--text-muted); }
.ot-stat.is-click { cursor: pointer; }
.ot-stat.is-click:hover { background: var(--ot-hover); }
.ot-ring { width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(var(--ot-accent) var(--p, 0%), var(--ot-panel-2) 0); display: grid; place-items: center; flex: none; }
.ot-ring.is-over { background: conic-gradient(var(--ot-red) 100%, var(--ot-panel-2) 0); }
.ot-ring b { width: 32px; height: 32px; border-radius: 50%; background: var(--ot-panel); display: grid; place-items: center; font-size: 10px; font-weight: 700; }

/* list rows */
.ot-lrow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--ot-line); }
.ot-list-card > .ot-lrow:first-child, .ot-card-head + .ot-lrow { border-top: 0; }
.ot-lrow-main { flex: 1; min-width: 0; }
.ot-lrow-title { font-size: var(--font-ui-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-lrow-sub { font-size: var(--font-ui-smaller); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-lrow-right { display: flex; align-items: center; gap: 8px; flex: none; }
.ot-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--font-ui-small); }
.ot-amt.is-expense { color: var(--ot-red); } .ot-amt.is-income { color: var(--ot-green); }
.ot-bar { height: 6px; border-radius: 3px; background: var(--ot-panel-2); overflow: hidden; margin-top: 8px; }
.ot-bar-fill { height: 100%; background: var(--ot-accent); border-radius: 3px; }
.ot-bar.is-over .ot-bar-fill { background: var(--ot-red); }
.ot-book-bar .ot-bar-fill { background: var(--ot-book); }
.ot-dom { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-top: 1px solid var(--ot-line); }
.ot-list-card > .ot-dom:first-child, .ot-card-head + .ot-dom { border-top: 0; }
.ot-dom-name { width: 64px; font-weight: 600; font-size: var(--font-ui-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-dom-bar { flex: 1; height: 10px; background: var(--ot-panel-2); border-radius: 5px; overflow: hidden; }
.ot-dom-fill { height: 100%; background: var(--ot-accent); }
.ot-dom.is-over .ot-dom-fill { background: var(--ot-red); }
.ot-dom-val { min-width: 120px; text-align: right; font-size: var(--font-ui-smaller); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* toolbar */
.ot-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.ot-toolbar-title { font-weight: 600; font-size: var(--font-ui-small); }
.ot-toolbar-tags { display: flex; gap: 4px; }
.ot-week-nav { display: flex; align-items: center; gap: 2px; }
.ot-week-nav b { padding: 0 6px; font-size: var(--font-ui-medium); }
.ot-month-label { font-size: 16px; }

/* ---------- 오늘 ---------- */
.ot-slots { display: grid; grid-template-columns: repeat(var(--ot-slots, 3), minmax(0, 1fr)); gap: 10px; }
.ot-slot { border-radius: 12px; background: var(--ot-panel); border: 1px solid var(--ot-line); padding: 10px 12px; min-height: 72px; box-shadow: var(--ot-shadow); }
.ot-slot.is-empty { border: 1.5px dashed var(--ot-line); background: transparent; color: var(--text-faint); display: grid; place-items: center; font-size: var(--font-ui-small); cursor: pointer; box-shadow: none; }
.ot-slot.is-empty:hover { color: var(--text-accent); border-color: var(--ot-accent); }
.ot-slot.is-clickable:hover { border-color: var(--ot-accent); }
.ot-slot-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.04em; }
.ot-slot-meal { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; font-size: var(--font-ui-small); flex-wrap: wrap; }

/* ---------- 물건 ---------- */
.ot-place-card { position: relative; }
.ot-place-head { display: flex; align-items: center; gap: 10px; }
.ot-place-head b { font-size: var(--font-ui-medium); }
.ot-card-menu { opacity: 0; }
.ot-place-card:hover .ot-card-menu, .ot-place-card:focus-within .ot-card-menu, .is-narrow .ot-card-menu { opacity: 1; }
.ot-chev { display: inline-flex; } .ot-chev svg { width: 16px; height: 16px; }
.ot-place-names { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-top: 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ot-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ot-crumb b { font-size: 16px; }
.ot-item-card { padding: 12px 14px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.ot-item-card:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20, 20, 30, 0.08), 0 10px 28px rgba(20, 20, 30, 0.08); }
.ot-item-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ot-durable); }
.ot-item-card.is-consumable::before { background: var(--ot-consumable); }
.ot-item-card.is-ingredient::before { background: var(--ot-ingredient); }
.ot-item-card.is-clothing::before { background: var(--ot-clothing); }
.ot-item-card.is-book::before { background: var(--ot-book); }
.ot-item-card.is-selected { outline: 2px solid var(--ot-accent); }
.ot-item-card.is-wanted { opacity: 0.78; }
.ot-item-card-head { display: flex; align-items: center; gap: 6px; }
.ot-item-card-pills { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ot-item-card-name { font-weight: 600; margin-top: 8px; font-size: var(--font-ui-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-item-card-meta { font-size: var(--font-ui-smaller); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.3em; }
.ot-item-card-metric { margin-top: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.ot-item-card-actions { margin-top: 8px; display: flex; gap: 6px; }
.ot-item-card-metric b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ot-item-card-metric span { font-size: 11px; color: var(--text-muted); text-align: right; }

.ot-item-card-photo { margin: -12px -14px 8px; aspect-ratio: 1; overflow: hidden; border-radius: var(--ot-radius) var(--ot-radius) 0 0; background: var(--ot-panel-2); }
.ot-item-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-item-card.has-photo::before { display: none; }
.ot-sheet-photo { aspect-ratio: 1; overflow: hidden; border-radius: 12px; margin-bottom: 12px; background: var(--ot-panel-2); }
.ot-sheet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-photo-wrap { display: flex; align-items: center; gap: 12px; }
.ot-photo-preview { width: 120px; height: 120px; border-radius: 12px; overflow: hidden; background: var(--ot-panel-2); cursor: pointer; flex: none; display: grid; place-items: center; }
.ot-photo-preview.is-empty { border: 1.5px dashed var(--ot-line); background: transparent; }
.ot-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-photo-input { display: none; }
.ot-item-card.is-book .ot-item-card-photo { aspect-ratio: 2 / 3; }
.ot-sheet-photo.is-book { aspect-ratio: 2 / 3; max-width: 240px; }
.ot-photo-preview.is-book { width: 100px; height: 150px; }

/* sheet */
.ot-sheet { position: sticky; top: 8px; }
.ot-sheet-head { display: flex; align-items: flex-start; gap: 10px; }
.ot-sheet-title-wrap { flex: 1; min-width: 0; }
.ot-sheet-title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.ot-sheet-sub { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-top: 2px; }
.ot-sheet-actions { display: flex; gap: 2px; flex: none; }
.ot-sheet-primary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.ot-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; }
.ot-kv-cell { background: var(--ot-panel-2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.ot-kv-k { font-size: 11px; color: var(--text-muted); }
.ot-kv-v { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--font-ui-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-kv-cell.is-warn .ot-kv-v { color: var(--ot-orange); } .ot-kv-cell.is-red .ot-kv-v { color: var(--ot-red); } .ot-kv-cell.is-green .ot-kv-v { color: var(--ot-green); } .ot-kv-cell.is-accent .ot-kv-v { color: var(--text-accent); } .ot-kv-cell.is-muted .ot-kv-v { color: var(--text-muted); }
.ot-log-add { display: flex; gap: 6px; margin-bottom: 6px; }
.ot-log-row.is-clickable { border-radius: 6px; }
.ot-log-row.is-clickable:hover { background: var(--ot-hover); }
.ot-log-list { display: flex; flex-direction: column; gap: 2px; }
.ot-log-row { display: flex; gap: 8px; align-items: baseline; font-size: var(--font-ui-smaller); padding: 3px 2px; }
.ot-log-date { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 36px; }
.ot-log-action { font-weight: 600; white-space: nowrap; }
.ot-log-action.is-read, .ot-log-action.is-finish { color: var(--ot-book); } .ot-log-action.is-purchase { color: var(--ot-ingredient); }
.ot-log-action.is-dispose { color: var(--ot-red); }
.ot-log-note { color: var(--text-normal); flex: 1; min-width: 0; }
.ot-ing-list { margin: 0; padding-left: 18px; font-size: var(--font-ui-small); }
.ot-ing-list li { margin: 2px 0; } .ot-ing-list li.is-optional { color: var(--text-muted); }
.ot-recipe-body { font-size: var(--font-ui-small); }

/* ---------- 식단 ---------- */
.ot-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ot-day { background: var(--ot-panel); border: 1px solid var(--ot-line); border-radius: var(--ot-radius); padding: 10px; min-height: 220px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--ot-shadow); }
.ot-day.is-today { border-color: var(--ot-accent); box-shadow: 0 0 0 3px var(--ot-accent-soft); }
.ot-day.is-past { opacity: 0.72; }
.ot-day-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.ot-day-head b { font-size: var(--font-ui-small); } .ot-day-head span { font-size: 11px; color: var(--text-muted); }
.ot-day.is-today .ot-day-head b { color: var(--text-accent); }
.ot-meal { border-radius: 10px; background: var(--ot-panel-2); padding: 7px 9px; font-size: var(--font-ui-smaller); line-height: 1.3; cursor: pointer; }
.ot-meal:hover { background: var(--ot-hover); }
.ot-meal-slot { font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; font-weight: 600; }
.ot-meal-name { font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.ot-meal-name.is-leftover { font-style: italic; opacity: 0.8; }
.ot-meal.is-out { background: transparent; border: 1px dashed var(--ot-line); color: var(--text-muted); }
.ot-meal.is-out .ot-meal-name { font-weight: 400; }
.ot-meal.is-add { background: transparent; border: 1px dashed var(--ot-line); color: var(--text-faint); text-align: center; }
.ot-meal.is-add:hover { color: var(--text-accent); border-color: var(--ot-accent); }
/* week board: entries are dragged onto another day or slot */
.ot-meal-name.is-draggable { cursor: grab; user-select: none; -webkit-user-select: none; }
.ot-meal-name.is-dragging { opacity: 0.4; }
.ot-week.is-dragging, .ot-week.is-dragging * { cursor: grabbing; }
.ot-meal.is-drop { outline: 2px solid var(--ot-accent); outline-offset: 1px; background: var(--ot-accent-soft); color: var(--text-normal); }
/* the ghost lives on <body>, outside the view's own tokens */
.ot-drag-ghost { position: fixed; z-index: var(--layer-popover, 30); pointer-events: none; padding: 5px 10px; border-radius: 10px; background: var(--background-primary); border: 1px solid var(--interactive-accent); box-shadow: var(--shadow-s); font-size: var(--font-ui-smaller); font-weight: 600; white-space: nowrap; }
.ot-corner { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; margin: 10px 0 2px; }
.ot-recipe { padding: 12px 14px; }
.ot-recipe.is-selected { outline: 2px solid var(--ot-accent); }
.ot-recipe-head { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ot-recipe-name { font-weight: 600; font-size: var(--font-ui-medium); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-recipe-head .ot-pill { flex: none; }
.ot-recipe-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--font-ui-smaller); color: var(--text-muted); gap: 8px; }

/* ---------- 장부 ---------- */
table.ot-tx { width: 100%; border-collapse: collapse; font-size: var(--font-ui-small); }
table.ot-tx th { text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 1px solid var(--ot-line); }
table.ot-tx td { padding: 8px 8px; border-bottom: 1px solid var(--ot-line); vertical-align: middle; }
table.ot-tx tbody tr { cursor: pointer; }
table.ot-tx tbody tr:hover td { background: var(--ot-hover); }
table.ot-tx tr:last-child td { border-bottom: 0; }
table.ot-tx .is-right { text-align: right; }
table.ot-tx .ot-tx-date { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ot-tx td .ot-pill { margin-left: 6px; }
.ot-tx-card { padding-bottom: 8px; }

/* ---------- modals ---------- */
.ot-modal { width: min(640px, 94vw); }
.ot-modal.is-phone { width: 100%; }
.ot-field { margin-bottom: 12px; }
.ot-field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ot-field-col { flex: 1 1 140px; min-width: 0; }
.ot-field-col-small { flex: 0 1 140px; }
.ot-label { display: block; font-size: var(--font-ui-smaller); color: var(--text-muted); margin-bottom: 4px; }
.ot-modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.ot-modal-buttons .ot-btn-left { margin-right: auto; }
.ot-details { margin: 4px 0 12px; }
.ot-details summary { cursor: pointer; font-size: var(--font-ui-smaller); color: var(--text-muted); margin-bottom: 8px; }
.ot-domain-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ot-domain-row { display: flex; gap: 6px; align-items: center; }
.ot-domain-row .ot-catpicker { flex: 1; }
.ot-modal button.ot-remove-btn { width: 26px; padding: 0; justify-content: center; }
.ot-catpicker { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ot-catpicker-select { max-width: 100%; }
.ot-catpicker-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ot-catpicker-input { width: 160px; }
.ot-confirm-text { margin: 4px 0 8px; }
.ot-prompt-input { width: 100%; }
.ot-picker-input { width: 100%; margin-bottom: 8px; }
.ot-picker-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.ot-picker-row { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.ot-picker-row:hover { background: var(--ot-hover); }
.ot-picker-name { font-size: var(--font-ui-small); flex: 1; }
.ot-picker-meta { font-size: var(--font-ui-smaller); color: var(--text-muted); white-space: nowrap; }
.ot-picker-new .ot-picker-name { color: var(--text-accent); }
.ot-picker-box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--ot-line); flex: none; }
.ot-picker-row.is-on .ot-picker-box { background: var(--ot-accent); border-color: var(--ot-accent); }
.ot-current-cell { min-height: 28px; margin-bottom: 8px; }
.ot-chip-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.ot-chip-x, .ot-chip-toggle { cursor: pointer; color: var(--text-muted); padding: 0 2px; }
.ot-chip.is-leftover { opacity: 0.75; font-style: italic; }
.ot-chip.is-text { background: transparent; border: 1px dashed var(--ot-line); color: var(--text-muted); }
.ot-chip.is-clickable:hover { background: var(--ot-hover); }
.ot-ing-chosen { min-height: 26px; margin: 0 0 6px; }
.ot-ing-pick { max-height: 200px; overflow-y: auto; margin-top: 6px; }
.ot-weekday-picker { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ot-modal button.ot-weekday, .ot-settings button.ot-weekday { width: 30px; height: 28px; padding: 0; font-size: var(--font-ui-smaller); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ot-line); background: transparent; color: var(--text-muted); }
.ot-modal button.ot-weekday.is-on, .ot-settings button.ot-weekday.is-on { background: var(--ot-accent); color: var(--ot-on-accent); box-shadow: none; }

/* ---------- settings ---------- */
.ot-place-depth-2 .setting-item-name { padding-left: 16px; }
.ot-place-depth-3 .setting-item-name { padding-left: 32px; }
.ot-places-settings .setting-item { padding: 6px 0; }

/* ---------- narrow layout (container query on the root, not the viewport) ---------- */
@container (max-width: 700px) {
  .ot-root { padding: 10px 12px 60px; }
  .ot-title { font-size: 18px; }
  .ot-view button.ot-tab { padding: 0 9px; }
  .ot-tab-label { display: none; }
  .ot-g3, .ot-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-g3 > .ot-stat:last-child:nth-child(odd) { grid-column: span 2; }
  /* four tiles in two columns leave no room for the budget ring next to the amount (the line below it says the same) */
  .ot-g4 .ot-ring { display: none; }
  .ot-two, .ot-two.is-ledger { grid-template-columns: minmax(0, 1fr); }
  .ot-sheet { position: static; }
  .ot-week { grid-template-columns: minmax(0, 1fr); }
  .ot-day { min-height: 0; }
  .ot-slots { grid-template-columns: minmax(0, 1fr); }
  .ot-view input.ot-search { max-width: 100%; flex: 1 1 100%; }
  .ot-hide-narrow { display: none; }
  .ot-dom-val { min-width: 0; }
  .ot-auto { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ot-auto-sm, .ot-auto-xs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ========== layout 2 (2026-10-06 mockup) ========== */

/* header search */
.ot-top-actions { align-items: center; }
.ot-search-box { display: flex; align-items: center; gap: 6px; background: var(--ot-panel); border: 1px solid var(--ot-line); border-radius: 10px; padding: 0 10px; height: 32px; width: 210px; }
.ot-search-icon { display: inline-flex; color: var(--text-muted); } .ot-search-icon svg { width: 14px; height: 14px; }
.ot-view input.ot-search-input { border: 0; background: transparent; box-shadow: none; padding: 0; height: 30px; font-size: var(--font-ui-small); width: 100%; }
.ot-view input.ot-search-input:focus { box-shadow: none; }

/* drawer */
.ot-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); display: none; z-index: 8; }
.ot-scrim.is-open { display: block; }
.ot-drawer { position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box; width: min(440px, 92%); background: var(--ot-panel); border-left: 1px solid var(--ot-line); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18); padding: 18px 20px 40px; transform: translateX(105%); transition: transform 0.18s ease; overflow-y: auto; z-index: 9; }
.ot-drawer.is-open { transform: none; }
.ot-drawer:focus { outline: none; }
.ot-view .ot-drawer button.ot-drawer-close { position: absolute; top: 10px; right: 10px; z-index: 1; }
.ot-drawer-body { padding-top: 4px; }
.ot-drawer .ot-sheet-head { padding-right: 36px; }
.ot-drawer .ot-sheet-photo { max-width: 100%; }

/* ---------- 물건: browser ---------- */
.ot-browser { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
.ot-tree { padding: 8px 6px; position: sticky; top: 8px; }
.ot-tree-node { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: var(--font-ui-small); cursor: pointer; user-select: none; }
.ot-tree-node:hover { background: var(--ot-hover); }
.ot-tree-node.is-on { background: var(--ot-accent-soft); color: var(--text-accent); font-weight: 600; }
.ot-tree-node.is-d1 { padding-left: 26px; } .ot-tree-node.is-d2 { padding-left: 44px; }
.ot-tree-node.is-add { color: var(--text-muted); font-size: var(--font-ui-smaller); }
.ot-tree-icon { display: inline-flex; color: var(--text-muted); } .ot-tree-icon svg { width: 15px; height: 15px; }
.ot-tree-node.is-on .ot-tree-icon { color: var(--text-accent); }
.ot-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-tree-count { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ot-view .ot-tree button.ot-tree-menu { width: 22px; height: 22px; opacity: 0; }
.ot-tree-node:hover button.ot-tree-menu, .ot-tree-node:focus-within button.ot-tree-menu { opacity: 1; }
.ot-tree-sep { height: 1px; background: var(--ot-line); margin: 6px 4px; }
.ot-tree-select { display: none; width: 100%; margin-bottom: 10px; }
.ot-sortbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ot-crumb { display: flex; align-items: baseline; gap: 8px; }
.ot-crumb b { font-size: 16px; }
.ot-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ot-item { padding: 12px 14px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.ot-item:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(20, 20, 30, 0.08), 0 10px 28px rgba(20, 20, 30, 0.08); }
.ot-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ot-durable); }
.ot-item.is-consumable::before { background: var(--ot-consumable); }
.ot-item.is-selected { outline: 2px solid var(--ot-accent); }
.ot-item.is-wanted { opacity: 0.78; border-style: dashed; }
.ot-item-head { display: flex; align-items: center; gap: 6px; }
.ot-item-name { font-weight: 600; margin-top: 8px; font-size: var(--font-ui-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-item-meta { font-size: var(--font-ui-smaller); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.3em; }
.ot-item-foot { margin-top: 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: var(--font-ui-smaller); color: var(--text-muted); }
.ot-item-foot b { color: var(--text-normal); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- 식재료: wall ---------- */
.ot-quickadd { display: flex; align-items: center; gap: 8px; background: var(--ot-panel); border: 1px dashed var(--ot-line); border-radius: 12px; padding: 6px 12px; margin: 14px 0 10px; }
.ot-quickadd:focus-within { border-style: solid; border-color: var(--ot-accent); }
.ot-quickadd-icon { display: inline-flex; color: var(--text-muted); } .ot-quickadd-icon svg { width: 15px; height: 15px; }
.ot-view input.ot-quickadd-input { flex: 1; border: 0; background: transparent; box-shadow: none; padding: 0; height: 28px; font-size: var(--font-ui-small); }
.ot-view input.ot-quickadd-input:focus { box-shadow: none; }
.ot-kbd { font-size: 11px; color: var(--text-muted); background: var(--ot-panel-2); padding: 2px 6px; border-radius: 5px; }
.ot-wall { display: flex; flex-wrap: wrap; gap: 6px; }
.ot-view button.ot-ing { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--ot-panel); border: 1px solid var(--ot-line); font-size: var(--font-ui-small); color: var(--text-normal); cursor: pointer; box-shadow: none; }
.ot-view button.ot-ing:hover { border-color: var(--ot-accent); }
.ot-view button.ot-ing.is-on { border-color: var(--ot-accent); box-shadow: 0 0 0 2px var(--ot-accent-soft); }
.ot-ing-n { background: var(--ot-ingredient-soft); color: var(--ot-ingredient); font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; padding: 0 6px; }
.ot-view button.ot-ing.is-alone { border-style: dashed; color: var(--text-muted); }
.ot-view button.ot-ing.is-alone .ot-ing-n { background: var(--ot-panel-2); color: var(--text-faint); }
.ot-recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ot-recipe { padding: 12px 14px; }
.ot-recipe.is-selected { outline: 2px solid var(--ot-accent); }
.ot-recipe-name { font-weight: 600; font-size: var(--font-ui-small); }
.ot-recipe-ings { font-size: var(--font-ui-smaller); color: var(--text-muted); margin-top: 6px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ot-recipe-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--text-muted); }

/* ---------- 의류: lookbook ---------- */
.ot-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 10px; }
.ot-filter-label { font-size: 11px; color: var(--text-muted); }
.ot-lookbook { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ot-look { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--ot-panel-2); cursor: pointer; }
.ot-look img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-look-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, 0.92); font-weight: 700; font-size: 14px; text-align: center; padding: 10px; }
.ot-look.is-wanted { outline: 2px dashed var(--ot-line); outline-offset: -2px; }
.ot-look.is-wanted .ot-look-ph { color: var(--text-muted); background: repeating-linear-gradient(45deg, var(--ot-panel-2) 0 10px, var(--ot-panel) 10px 20px); }
.ot-look.is-selected { outline: 3px solid var(--ot-accent); outline-offset: -3px; }
.ot-look-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: #fff; font-size: 11px; opacity: 0; transition: opacity 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ot-look:hover .ot-look-cap, .ot-look:focus .ot-look-cap { opacity: 1; }
.ot-look-badge { position: absolute; top: 8px; left: 8px; }

/* ---------- 책: reading strip + shelf ---------- */
.ot-sec.is-first { margin-top: 10px; }
.ot-reading { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ot-rd { display: flex; gap: 12px; align-items: stretch; padding: 12px; }
.ot-rd.is-selected { outline: 2px solid var(--ot-accent); }
.ot-rd-title { font-weight: 600; font-size: var(--font-ui-small); }
.ot-rd-sub { font-size: var(--font-ui-smaller); color: var(--text-muted); }
.ot-rd .ot-book-bar { height: 8px; margin: 8px 0 6px; }
.ot-rd-progress { display: flex; justify-content: space-between; font-size: var(--font-ui-smaller); color: var(--text-muted); }
.ot-rd-progress b { color: var(--text-normal); }
.ot-rd-actions { display: flex; gap: 6px; margin-top: 8px; }
.ot-cover { width: 56px; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; flex: none; display: grid; place-items: center; color: #fff; font-size: 10px; text-align: center; padding: 4px; box-shadow: var(--ot-shadow); }
.ot-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-cover-title { font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ot-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.ot-bk { cursor: pointer; }
.ot-bk .ot-cover { width: 100%; font-size: 12px; padding: 8px; }
.ot-bk-title { font-size: var(--font-ui-smaller); font-weight: 600; margin-top: 6px; line-height: 1.25; }
.ot-bk-sub { font-size: 11px; color: var(--text-muted); }
.ot-bk-stars { color: #e0a81e; font-size: 11px; letter-spacing: 1px; }
.ot-bk.is-unread .ot-cover { opacity: 0.85; }
.ot-bk.is-wishlist .ot-cover { outline: 2px dashed var(--ot-line); outline-offset: -2px; background: var(--ot-panel-2) !important; color: var(--text-muted); box-shadow: none; }
.ot-bk.is-selected .ot-cover { outline: 3px solid var(--ot-accent); outline-offset: -3px; }

/* ---------- 장부 ---------- */
.ot-qa { display: grid; grid-template-columns: auto 128px 130px 150px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 12px; }
.ot-qa-type { display: inline-flex; border: 1px solid var(--ot-line); border-radius: 8px; overflow: hidden; height: 32px; }
.ot-view button.ot-qa-type-btn { border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--text-muted); height: 30px; padding: 0 10px; font-size: var(--font-ui-smaller); cursor: pointer; }
.ot-view button.ot-qa-type-btn.is-active { background: var(--ot-accent); color: var(--ot-on-accent); }
.ot-view input.ot-qa-date, .ot-view input.ot-qa-amount, .ot-view input.ot-qa-memo { height: 32px; }
.ot-qa-cat { height: 32px; }
.ot-stat.is-expense .ot-stat-value { color: var(--ot-red); }
.ot-heat { display: grid; grid-template-columns: repeat(var(--ot-days, 31), 1fr); gap: 3px; margin-top: 10px; }
.ot-heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--ot-panel-2); display: block; }
.ot-heat-cell.is-l1 { background: hsla(var(--accent-h, 254), var(--accent-s, 60%), var(--accent-l, 60%), 0.28); }
.ot-heat-cell.is-l2 { background: hsla(var(--accent-h, 254), var(--accent-s, 60%), var(--accent-l, 60%), 0.55); }
.ot-heat-cell.is-l3 { background: var(--ot-accent); }
.ot-heat-cell.is-today { outline: 2px solid var(--ot-accent); outline-offset: -1px; }
.ot-heat-lbl { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-faint); margin-top: 3px; }
.ot-two.is-ledger { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); margin-top: 14px; }
.ot-txdays { padding: 6px 14px 10px; }
.ot-dayhead { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--font-ui-smaller); font-weight: 600; color: var(--text-muted); padding: 12px 2px 4px; position: sticky; top: 0; background: var(--ot-panel); z-index: 1; }
.ot-dayhead-sum { font-variant-numeric: tabular-nums; font-weight: 500; }
.ot-tx { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--ot-line); font-size: var(--font-ui-small); }
.ot-tx-main { flex: 1; min-width: 0; }
.ot-tx-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-tx-sub { font-size: 11px; color: var(--text-muted); }
.ot-tx-empty { font-size: var(--font-ui-smaller); color: var(--text-faint); padding: 6px 2px; }
.ot-kind-icon.is-expense { background: var(--ot-red-soft); color: var(--ot-red); }
.ot-kind-icon.is-income { background: var(--ot-green-soft); color: var(--ot-green); }

/* ---------- narrow ---------- */
@container (max-width: 700px) {
  .ot-top-actions { width: 100%; }
  .ot-search-box { flex: 1; width: auto; }
  .ot-browser { grid-template-columns: minmax(0, 1fr); }
  .ot-tree { display: none; }
  .ot-tree-select { display: block; }
  .ot-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-lookbook { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ot-reading { grid-template-columns: minmax(0, 1fr); }
  .ot-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ot-qa { grid-template-columns: 1fr 1fr; }
  .ot-qa-memo { grid-column: span 2; }
  .ot-heat { grid-template-columns: repeat(16, 1fr); }
  .ot-drawer { width: 100%; }
}
.ot-view.is-narrow .ot-drawer { width: 100%; }



/* ========== 코디 · 루틴 · 화장품 (2026-10-06) ========== */

/* lookbook badge: how many 코디 a garment is in */
.ot-look-n { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #1d1d20; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.ot-chips.is-dashed button.ot-chip { background: transparent; border: 1px dashed var(--ot-line); color: var(--text-muted); }
.ot-chips.is-dashed button.ot-chip.is-active { background: var(--ot-accent); border-color: transparent; color: var(--ot-on-accent); }

/* collage */
.ot-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--ot-panel-2); }
.ot-collage.is-three .ot-collage-cell:first-child { grid-row: span 2; }
.ot-collage-cell { display: grid; place-items: center; color: rgba(255, 255, 255, 0.92); font-size: 11px; font-weight: 600; text-align: center; padding: 4px; overflow: hidden; background: var(--ot-panel-2); }
.ot-collage-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-collage-cell.is-blank { color: var(--text-muted); background: repeating-linear-gradient(45deg, var(--ot-panel-2) 0 8px, var(--ot-panel) 8px 16px); }
.ot-collage.is-mini { width: 44px; gap: 2px; border-radius: 7px; flex: none; }
.ot-collage.is-mini .ot-collage-cell { font-size: 0; padding: 0; }
.ot-outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ot-outfit { padding: 10px; cursor: pointer; }
.ot-outfit.is-selected { outline: 2px solid var(--ot-accent); }
.ot-outfit-name { font-weight: 600; margin-top: 8px; font-size: var(--font-ui-small); }
.ot-outfit-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.ot-outfit.is-new { border-style: dashed; box-shadow: none; display: grid; place-items: center; color: var(--text-muted); font-size: var(--font-ui-small); min-height: 120px; }

/* photo tiles: strip thumbs and the picker */
.ot-pick-strip { display: flex; gap: 8px; flex-wrap: wrap; min-height: 26px; margin-bottom: 8px; }
.ot-ptile { position: relative; }
.ot-ptile-sq { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--ot-panel-2); color: #fff; font-size: 11px; font-weight: 600; text-align: center; padding: 4px; }
.ot-ptile-sq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ot-ptile-sq.is-blank { color: var(--text-muted); background: repeating-linear-gradient(45deg, var(--ot-panel-2) 0 8px, var(--ot-panel) 8px 16px); border: 1px dashed var(--ot-line); }
.ot-thumb { width: 72px; text-align: center; font-size: 11px; color: var(--text-muted); }
.ot-thumb.is-click { cursor: pointer; }
.ot-thumb-cap { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-thumb-x { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 999px; background: var(--ot-panel); color: var(--text-normal); border: 1px solid var(--ot-line); font-size: 11px; display: grid; place-items: center; cursor: pointer; }
.ot-picker { border: 1px solid var(--ot-line); border-radius: 12px; padding: 10px; background: var(--ot-panel-2); }
.ot-picker-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ot-picker-hint { margin: 0 0 0 auto; }
.ot-lookbook.ot-pick-look { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; }
.ot-look.is-pick { aspect-ratio: auto; }
.ot-look.is-pick .ot-ptile-sq { font-size: 11px; }
.ot-look.is-off { opacity: 0.55; }
.ot-look.is-on { opacity: 1; }
.ot-look-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 999px; background: var(--ot-accent); color: var(--ot-on-accent); display: grid; place-items: center; z-index: 1; }
.ot-look-check svg { width: 12px; height: 12px; stroke-width: 3; }

/* mini rows in the drawer (코디 of a garment, 루틴 of a product) */
.ot-mini { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: var(--font-ui-small); }
.ot-mini.is-clickable { cursor: pointer; } .ot-mini.is-clickable:hover { background: var(--ot-hover); border-radius: 8px; }
.ot-mini-main { flex: 1; min-width: 0; }
.ot-mini-title { font-weight: 600; }
.ot-mini-sub { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-mini-chev { display: inline-flex; color: var(--text-muted); } .ot-mini-chev svg { width: 14px; height: 14px; }
.ot-memo { font-size: var(--font-ui-small); white-space: pre-wrap; line-height: 1.5; }

/* 루틴 board */
.ot-routines { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ot-routine { padding: 12px 12px 10px; cursor: pointer; display: flex; flex-direction: column; }
.ot-routine.is-selected { outline: 2px solid var(--ot-accent); }
.ot-routine-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ot-routine-head b { font-size: 15px; }
.ot-routine-icon { margin-left: auto; display: inline-flex; color: var(--text-muted); } .ot-routine-icon svg { width: 16px; height: 16px; }
.ot-step { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: var(--font-ui-small); }
.ot-step:hover { background: var(--ot-hover); }
.ot-step-no { width: 18px; height: 18px; border-radius: 999px; background: var(--ot-cosmetic-soft); color: var(--ot-cosmetic); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.ot-step.is-makeup .ot-step-no { background: var(--ot-clothing-soft); color: var(--ot-clothing); }
.ot-step-label { font-size: 11px; color: var(--text-muted); width: 58px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-step-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-step-name.is-missing { color: var(--text-faint); text-decoration: line-through; }
.ot-step-brand { color: var(--text-muted); font-size: 11px; }
.ot-routine-foot { margin-top: auto; padding-top: 8px; font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 6px; }
.ot-routine.is-new { border-style: dashed; box-shadow: none; display: grid; place-items: center; color: var(--text-muted); font-size: var(--font-ui-small); min-height: 90px; }

/* products */
.ot-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ot-grp { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin-top: 8px; font-size: var(--font-ui-smaller); font-weight: 600; color: var(--text-muted); }
.ot-grp:first-child { margin-top: 0; }
.ot-grp-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c, var(--ot-cosmetic)); display: inline-block; }
.ot-prod { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; }
.ot-prod.is-selected { outline: 2px solid var(--ot-accent); }
.ot-prod.is-wanted { border-style: dashed; opacity: 0.85; }
.ot-prod-sq { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--c, var(--ot-cosmetic)); flex: none; overflow: hidden; }
.ot-prod-sq svg { width: 18px; height: 18px; }
.ot-prod-sq img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-prod-name { font-weight: 600; font-size: var(--font-ui-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-prod-sub { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-prod-n { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ot-cosmetic); background: var(--ot-cosmetic-soft); min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; padding: 0 7px; flex: none; }
.ot-prod.is-alone .ot-prod-n { background: transparent; border: 1px dashed var(--ot-line); color: var(--text-faint); }

/* step editor (dialog and drawer) */
.ot-dsteps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ot-dsteps.is-sorting, .ot-dsteps.is-sorting * { cursor: grabbing; user-select: none; }
.ot-dstep { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--ot-line); border-radius: 10px; background: var(--ot-panel); font-size: var(--font-ui-small); }
.ot-dstep.is-dragging { opacity: 0.5; outline: 2px dashed var(--ot-accent); }
.ot-dstep-handle { display: inline-flex; color: var(--text-faint); cursor: grab; touch-action: none; } .ot-dstep-handle svg { width: 14px; height: 14px; }
.ot-dstep-no { width: 20px; height: 20px; border-radius: 999px; background: var(--ot-cosmetic-soft); color: var(--ot-cosmetic); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.ot-dstep-label { font-size: 11px; color: var(--text-muted); width: 62px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-dstep-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-dstep.is-click .ot-dstep-name { cursor: pointer; }
.ot-dstep.is-click .ot-dstep-name:hover { color: var(--text-accent); }
.ot-dstep-x { color: var(--text-faint); cursor: pointer; padding: 0 2px; } .ot-dstep-x:hover { color: var(--text-normal); }
.ot-label-row { display: flex; align-items: baseline; gap: 8px; } .ot-label-row a { margin-left: auto; font-size: var(--font-ui-smaller); }
.ot-sugg { margin-top: 6px; }

/* product picker dropdown */
.ot-dd { position: relative; }
.ot-dd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; border: 1px solid var(--ot-line); border-radius: 10px; background: var(--ot-panel); box-shadow: var(--ot-shadow); padding: 6px; font-size: var(--font-ui-small); max-height: 260px; overflow-y: auto; }
.ot-dd-item { padding: 6px 8px; border-radius: 6px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ot-dd-item:hover { background: var(--ot-hover); }
.ot-dd-item.is-taken { opacity: 0.6; cursor: default; }
.ot-dd-item.is-new { color: var(--text-accent); border-top: 1px solid var(--ot-line); margin-top: 4px; padding-top: 8px; border-radius: 0 0 6px 6px; }
.ot-dd-item.is-empty { color: var(--text-muted); cursor: default; }
.ot-dd-icon { display: inline-flex; } .ot-dd-icon svg { width: 14px; height: 14px; }
.ot-dd-label { font-size: 11px; color: var(--text-muted); width: 62px; flex: none; }
.ot-dd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* two-level category picker in the item dialog */
.ot-cat2 { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
.ot-cat2-groups { display: flex; flex-direction: column; gap: 3px; }
.ot-modal button.ot-cat2-group { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: var(--font-ui-small); background: transparent; border: none; box-shadow: none; color: var(--text-normal); cursor: pointer; justify-content: flex-start; height: auto; }
.ot-modal button.ot-cat2-group:hover { background: var(--ot-hover); }
.ot-modal button.ot-cat2-group.is-on { background: var(--ot-accent-soft); color: var(--text-accent); font-weight: 600; }
.ot-cat2-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c, var(--ot-cosmetic)); display: inline-block; flex: none; }
.ot-cat2-subs { align-content: flex-start; }

@container (max-width: 700px) {
  .ot-outfits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ot-routines { grid-template-columns: minmax(0, 1fr); }
  .ot-products { grid-template-columns: minmax(0, 1fr); }
}
.ot-modal.is-phone .ot-cat2 { grid-template-columns: minmax(0, 1fr); }

/* ---------- 식재료 분류 (2026-10-07) ---------- */
.ot-wall.is-grouped { display: flex; flex-direction: column; gap: 10px; }
.ot-wall-grp-head { display: flex; align-items: baseline; gap: 6px; font-size: var(--font-ui-smaller); font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.ot-wall-grp-n { font-weight: 500; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ot-wall-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ot-view select.ot-quickadd-cat { height: 28px; font-size: var(--font-ui-smaller); max-width: 140px; }
.ot-pick-grp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; width: 100%; margin-top: 4px; }
.ot-pick-grp-label { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-right: 2px; width: 100%; }

/* ---------- the tracker's code block inside a note (the published site shows the tracker there) ---------- */
.ot-embed-note { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px dashed var(--background-modifier-border); border-radius: var(--radius-m); color: var(--text-muted); font-size: var(--font-ui-small); }
/* read-only (the Publish build): planned meals are not buttons */
.ot-readonly .ot-meal { cursor: default; }

/* ---------- Obsidian Publish: the read-only tracker inside a note (appended to styles.css by the Publish build) ---------- */
/* In the app the view fills a pane and scrolls inside it; on the site it is as tall as its content and the page scrolls.
   Without the pane there is nothing to clip the drawer against, so it is laid over the window instead. */
.ot-publish.ot-view {
  display: block;
  overflow: visible !important;
  container-type: normal;
  border-radius: var(--radius-l, 12px);
  margin: 0;
}
.ot-publish .ot-scroll {
  overflow: visible;
}
.ot-publish .ot-root {
  max-width: none;
  padding-bottom: 24px;
}
.ot-publish .ot-scrim,
.ot-publish .ot-drawer {
  position: fixed;
  z-index: var(--layer-modal, 50);
}
/* "narrow" means the note's column here, not the window: the drawer only fills a window that is itself that small */
.ot-publish.ot-view.is-narrow .ot-drawer {
  width: min(440px, 100%);
}
/* Publish gives buttons and inputs the site font but leaves <select> on the browser default */
.ot-publish select {
  font-family: inherit;
}
/* <<< object-tracker */