/* =========================================================
   FONTS — 영문 Neue Haas (Grotesk Text · Unica), 한글 Pretendard, 날짜 큰 숫자 Geist
   ========================================================= */






@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  src: url("../fonts/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  src: url("../fonts/Pretendard-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  src: url("../fonts/Pretendard-Medium.woff2") format("woff2");
}

/* =========================================================
   0. DESIGN TOKENS
   ---------------------------------------------------------
   Base viewport : 1920 × 1080 (CSS px)
   Target render : 3840 × 2160 (@2x, device-pixel-ratio 2)
   Spacing base  : 8px
   Grid          : 24 columns
   ========================================================= */
:root {
  /* --- surface: 색은 ../rams.css :root 가 단일 원본 (--c-* 별칭). 여기엔 MAIN 전용 값만 --- */
  --c-block: #d3cfc7; /* timeline event block */

  /* --- type --- */
  --f-display: "Neue Haas Text", "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-hero: "Neue Haas Unica", "Neue Haas Text", "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif; /* 큰 날짜 숫자 */
  --f-text: "Neue Haas Text", "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-mono: "Neue Haas Text", "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif; /* 라벨·시각: 모노 대신 Neue Haas 소형 */

  --fs-label: 11px; /* 글자 크기 5단계(11 · 13 · 16 · 24 · 표시용) — 라벨 */
  --fs-meta: 11px;
  --fs-body: 13px;
  --fs-lead: 16px;
  --fs-h1: 32px;

  /* --- spacing (8px base) --- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;

  /* --- geometry --- */
  --radius: 6px; /* minimal, product-like */
  --line: 1px;

  /* --- desktop safe zone (Windows, 200% scaling) --- */
  --safe-top: 32px;
  --safe-right: 40px;
  --safe-bottom: 32px; /* taskbar 48 + breathing */
  --safe-left: 40px; /* desktop icon column */

  /* --- grid --- */
  /* merged from later layers (v1.4–v5) — single source for MAIN layout tokens */
  --cols: minmax(340px, 6fr) minmax(0, 11fr) minmax(300px, 7fr);
  --gap: 16px;
  --r-tile: 16px;
  --pad: 20px;
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  overflow: hidden;
}
body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-feature-settings:
    "tnum" 1,
    "cv11" 1;
}
ul {
  list-style: none;
}

/* =========================================================
   2. SHELL — safe zone + 24-column grid
   ========================================================= */
.os {
  position: absolute;
  inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  display: grid;
}

/* column spans (asymmetric: 6 / 11 / 7) */

/* =========================================================
   3. PRIMITIVES
   ========================================================= */
.label {
  font-family: var(--f-mono);
  text-transform: uppercase;
}
.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-line);
  vertical-align: middle;
}
.dot--on {
  background: var(--c-accent);
}

/* Panel: vertical divider on the left of every column except the first */
.section {
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--line) solid var(--c-line-soft);
}
.section:last-child {
  border-bottom: 0;
}
.section__head {
  display: flex;
  justify-content: space-between;
}

/* =========================================================
   4. TOP BAR
   ========================================================= */
.topbar {
  display: grid;
  align-items: center;
  border-bottom: var(--line) solid var(--c-line);
}
.topbar__brand {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.topbar__brand strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.topbar__mid {
  display: flex;
}
.topbar__right {
  display: flex;
  justify-content: flex-end;
}

/* =========================================================
   5. DATE COLUMN
   ========================================================= */
.date__row {
  display: flex;
  justify-content: space-between;
}
.date__day {
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
}
.date__day em {
  font-style: normal;
  color: var(--c-accent);   /* 요일 옆 점 = 주황(원래 색). SUB 상태와 무관 */
}
.date__month {
  text-align: right;
  line-height: 1.25;
}
.date__month strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-lead);
}

/* mini calendar */
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-family: var(--f-mono);
  font-size: 13px;
}
.cal__grid .wd {
  color: var(--c-ink-3);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  padding-bottom: 6px;
}
.cal__grid span {
  display: block;
}
.cal__grid .out {
  color: var(--c-line);
}
.cal__grid .rest {
  background: var(--c-block);
}
.cal__grid .today {
  background: var(--c-accent);
  color: var(--c-panel);
  font-weight: 500;
}
.cal__grid .mark {
  position: relative;
}
.cal__grid .mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-ink-2);
  transform: translateX(-50%);
}
.cal__grid .mark--appt::after {
  background: var(--c-accent);
}

/* focus note (bottom of date column) */
.note {
  margin-top: auto;
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-top: var(--line) solid var(--c-line-soft);
}
.note p {
  margin-top: var(--s-1);
}

/* =========================================================
   6. WORK COLUMN — current project + today result + flow
   ========================================================= */
.project {
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-bottom: var(--line) solid var(--c-line);
}
.project__meta {
  display: grid;
}
.project__meta > div {
  padding-right: var(--s-2);
  min-width: 0;
}
.project__meta > div + div {
  border-left: var(--line) solid var(--c-line-soft);
  padding-left: var(--s-2);
}
.project__meta strong {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 4px;
  word-break: keep-all;
}
.project__meta small {
  display: block;
  color: var(--c-ink-2);
  font-size: var(--fs-meta);
  margin-top: 2px;
  word-break: keep-all;
}

/* layer / flow chips */
.layers {
  flex-wrap: wrap;
}
.layer {
  flex: 1 1 0;
  border: var(--line) solid var(--c-line);
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
  display: flex;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.layer--done {
  color: var(--c-ink-3);
}
.layer--on {
  background: var(--c-ink);
  color: var(--c-panel);
  border-color: var(--c-ink);
}

/* today */
.today {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--s-2) var(--s-3) var(--s-3);
}
.kv dt {
  font-family: var(--f-mono);
}
.subs {
  margin-top: var(--s-2);
  border-top: var(--line) solid var(--c-line-soft);
}
.sub {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: var(--s-1) var(--s-2);
  align-items: start;
  padding: 8px 0;
  border-bottom: var(--line) solid var(--c-line-soft);
}
.sub input {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  accent-color: var(--c-ink);
}
.sub strong {
  font-weight: 500;
  display: block;
}
.sub small {
  color: var(--c-ink-2);
  font-size: var(--fs-meta);
}
.sub .mono {
  color: var(--c-ink-3);
}

/* =========================================================
   7. CONTEXT COLUMN — next schedule + tools
   ========================================================= */

.tools li {
  display: grid;
  gap: var(--s-1);
  align-items: center;
  border-top: var(--line) solid var(--c-line-soft);
}
.tools li:first-child {
  border-top: 0;
}
.tools .tool__name {
  font-weight: 500;
}
.tools .tool__ver {
  color: var(--c-ink-3);
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
}

.meter {
  grid-template-columns: repeat(3, 1fr);
}
.meter > div + div {
  border-left: var(--line) solid var(--c-line-soft);
}
.meter strong {
  display: block;
  margin-top: 2px;
}

/* =========================================================
   9. HOST-ONLY STATES
   ========================================================= */
html {
  background: var(--c-bg);
} /* wall colour behind the zoomed page */
.date__day span {
  font-family: inherit;
}
.empty {
  font-family: var(--f-mono);
}

/* state tag */
.tag {
  font-family: var(--f-mono);
  text-transform: uppercase;
}

/* =========================================================
   10. EDITING (shared with Desk) — forms, modal, lists
   ========================================================= */
.date__day small {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 13px;
  color: var(--c-ink-2);
  margin-left: 8px;
  letter-spacing: 0;
}
.row {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  flex-wrap: wrap;
}
.small {
  font-size: var(--fs-meta);
}
.muted {
  color: var(--c-ink-2);
}
.faint {
  color: var(--c-ink-3);
}
.empty {
  color: var(--c-ink-3);
  font-size: var(--fs-meta);
  padding: 4px 0;
}
.btn-row {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-text);
  font-size: var(--fs-meta);
  padding: 5px 10px;
  min-height: 28px;
  border: var(--line) solid var(--c-line);
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--c-ink);
}
.btn--primary,
.btn--ink {
  background: var(--c-ink);
  color: var(--c-panel);
  border-color: var(--c-ink);
}
.btn--ghost {
  border-color: transparent;
  color: var(--c-ink-2);
}
.btn--ghost:hover {
  color: var(--c-ink);
  border-color: transparent;
  background: var(--c-panel-2);
}
.btn--sm {
  padding: 2px 8px;
  min-height: 24px;
  font-size: var(--fs-label);
}
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.status-sel {
  font-family: var(--f-text);
  font-size: var(--fs-meta);
  padding: 3px 6px;
  border: var(--line) solid var(--c-line);
  border-radius: var(--radius);
  background: #f2f0eb;
  color: var(--c-ink);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--s-2);
}
.field label {
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--c-ink-2);
}
.field input,
.field textarea,
.field select {
  font-family: var(--f-text);
  font-size: var(--fs-body);
  padding: 8px 10px;
  border: var(--line) solid var(--c-line);
  border-radius: var(--radius);
  background: #f2f0eb;
  color: var(--c-ink);
  min-height: 36px;
  width: 100%;
}
.field textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.45;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--c-ink);
  outline: none;
}
.field .hint {
  font-size: var(--fs-label);
  color: var(--c-ink-3);
}
.field--inline {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.field--inline input[type="checkbox"] {
  width: auto;
  min-height: 0;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s-2);
}
.tasklist .task {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: var(--s-1) var(--s-2);
  align-items: start;
  padding: 10px 0;
  border-top: var(--line) solid var(--c-line-soft);
}
.tasklist .task:first-child {
  border-top: 0;
}
.task__title {
  font-weight: 500;
}
.task__meta {
  font-size: var(--fs-meta);
  color: var(--c-ink-2);
  margin-top: 2px;
}
.task__actions {
  display: flex;
  gap: 4px;
}
.task__check {
  width: 16px;
  height: 16px;
  accent-color: var(--c-ink);
}
.tag {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border: var(--line) solid var(--c-line);
  color: var(--c-ink-2);
  white-space: nowrap;
}
.tag--rest {
  background: var(--c-block);
  border-color: var(--c-block);
  color: var(--c-ink);
}
.tag--goal {
  background: #d8d2c4;
  border-color: #d8d2c4;
  color: var(--c-ink);
}
.tag--accent {
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}
.list__row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 4px var(--s-2);
  padding: 6px 0;
  border-top: var(--line) solid var(--c-line-soft);
  font-size: var(--fs-meta);
}
.list__d {
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}
.kv {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 4px var(--s-2);
  font-size: var(--fs-body);
}
.kv dt {
  color: var(--c-ink-3);
  font-size: var(--fs-meta);
  padding-top: 2px;
}
.kv dd {
  word-break: keep-all;
}
.kv dd.faint {
  color: var(--c-ink-3);
}
/* modal (shared structure) */
.modal {
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal[hidden] {
  display: none;
}
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(31, 31, 30, 0.35);
}
.modal__box {
  position: relative;
  width: min(640px, 100%);
  background: var(--c-panel);
  border: var(--line) solid var(--c-line);
}
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--line) solid var(--c-line-soft);
}
.modal__title {
  font-family: var(--f-display);
  font-size: var(--fs-lead);
  font-weight: 500;
}
.modal__body {
  padding: var(--s-3);
}
.modal__body p {
  word-break: keep-all;
}
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border-top: var(--line) solid var(--c-line-soft);
}
.modal__body textarea.preview {
  width: 100%;
  min-height: 260px;
  font-family: var(--f-text);
  font-size: var(--fs-meta);
  line-height: 1.5;
  padding: 10px;
  border: var(--line) solid var(--c-line);
  border-radius: var(--radius);
  background: #f2f0eb;
  resize: vertical;
}
.toast {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.toast[hidden] {
  display: none;
}
.toast button {
  border-radius: 2px;
}
.cal__grid span {
  cursor: pointer;
}
.layer {
  cursor: pointer;
}
.meter > div {
  cursor: pointer;
}
/* compact context column so everything fits 1080 */
.tools {
  column-gap: var(--s-2);
}
.project__meta strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   11. v1.3 — SaaS-like center: hero · gantt timeline · layer cards · focus strip
   ========================================================= */


.hero__title {
  word-break: keep-all;
}
.hero__title small {
  display: block;
  color: var(--c-ink-2);
  text-transform: none;
}

/* gantt */
.tl__body {
  position: relative;
  margin-top: var(--s-1);
}
.tl__axis {
  border-bottom: var(--line) solid var(--c-line);
}
.tl__month {
  position: absolute;
  top: 0;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--c-ink);
}
.tl__week {
  position: absolute;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--c-ink-3);
  white-space: nowrap;
}
.tl__week b {
  color: var(--c-ink-2);
  margin-right: 6px;
}
.tl__rows {
  position: relative;
}
.tl__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tl__gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-line-soft);
}
.tl__row {
  position: relative;
}
.tl__today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-accent);
  z-index: 2;
}
.tl__today span {
  position: absolute;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--c-accent-ink);
}
.tl__empty {
  color: var(--c-ink-3);
  font-size: var(--fs-meta);
  padding: var(--s-2) 0;
}

/* layer cards */
.cards {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--line) solid var(--c-line);
}

/* focus strip */
.focus {
  padding: var(--s-2) var(--s-3);
  display: grid;
  gap: var(--s-3);
  align-items: start;
}
/* v1.3 tuning: roomier gantt */
.tl {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tl__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tl__today span {
  top: -22px;
}
.tl__week {
  top: 22px;
}
.tl__axis {
  height: 44px;
}

/* StandBy-like clock in the date column */
.cal {
  padding-top: var(--s-2);
}
/* v1.3b — 볼드는 오늘 날짜 숫자에만. 나머지는 이전 버전 무게로 복귀 */
.date__day {
  font-family: var(--f-display);
  font-weight: 500;
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: none;
  line-height: 1.05;
}
.hero__title small {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  margin-top: 4px;
}
.section__head .label--ink {
  font-weight: 500;
}
.tl__month {
  font-weight: 500;
}
.tl__week b {
  font-weight: 500;
}
.tl__today span {
  font-weight: 500;
}

/* =========================================================
   12. v1.4 — drawer
   ========================================================= */
.drawer {
  position: absolute;
  width: 760px;
  background: var(--c-panel);
  border-right: var(--line) solid var(--c-line);
  box-shadow: var(--rams-shadow-2);
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.drawer[hidden] {
  display: none;
}
.drawer__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px var(--s-3);
  border-bottom: var(--line) solid var(--c-line);
}
.drawer__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  flex: 1;
}
.drawer__body {
  flex: 1;
  overflow: auto;
  padding: var(--s-3);
  font-size: var(--fs-body);
}
.filters {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: var(--s-2);
}
.layers-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-2);
}
.layers-table th {
  text-align: left;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--c-ink-3);
  font-weight: 500;
  padding: 6px 8px;
  border-bottom: var(--line) solid var(--c-line);
}
.layers-table td {
  padding: 10px 8px;
  border-bottom: var(--line) solid var(--c-line-soft);
  vertical-align: top;
  font-size: var(--fs-meta);
  word-break: keep-all;
}
.layers-table tr.on td {
  background: #f2f0eb;
}
.layers-table td.code {
  font-weight: 700;
  white-space: nowrap;
}
.layers-table td.name {
  font-weight: 500;
}
.tools--wide {
  display: block;
}
.tools--wide li {
  grid-template-columns: 12px 120px 1fr auto;
}
.tools--wide .tool__ver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-ink-3);
}
/* hierarchy pass: labels quieter, primaries clearer */
.label {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--c-ink-3);
}
.label--ink {
  color: var(--c-ink);
}
.hero__title {
  font-size: 46px;
}

/* =========================================================
   13. v1.5 — Geist numeral · click-to-edit · fluid columns
   ========================================================= */
@font-face {
  font-family: "Geist";
  font-weight: 400;
  src: url("../fonts/Geist-Regular.ttf") format("truetype");
}
.date__num {
  font-family: "Geist", var(--f-hero);
  font-weight: 400;
  letter-spacing: -0.06em;
}

/* fluid 3-column grid (24-col 비율 6 / 11 / 7 유지, 최소폭 보장) */
.tools {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tools .tool__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cards {
  grid-auto-flow: row;
}
.tl__week {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.focus {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
}
.note p {
  word-break: keep-all;
}
.note .help b {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--c-ink);
}
.note .help div + div {
  margin-top: 3px;
}

/* click-to-edit affordance */
.ce {
  cursor: pointer;
}
.ce:hover {
  outline: 1px dashed var(--c-line);
  outline-offset: 3px;
  border-radius: 2px;
}
.cal__grid span.ce:hover {
  background: var(--c-panel-2);
  border-radius: var(--radius);
  outline: 0;
}
.cards {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.note {
  overflow: hidden;
}
.note .help {
  line-height: 1.5;
}

/* =========================================================
   14. v1.6 — v0.2 레이아웃 복귀 (기능은 v1.5 유지)
   레일 → 상단 메뉴 · 시계 → 상단 우측 · 중앙 = 프로젝트 메타 + 레이어 칩 + 타임라인
   ========================================================= */
/* :root merged into top block */
.os {
  padding-left: 0;
}

/* topbar = 본문과 같은 3열 */
.topbar {
  grid-template-columns: var(--cols);
  padding: 0;
}
.topbar__brand,
.topbar__mid,
.topbar__right {
  padding: 0 var(--s-3);
  min-width: 0;
}
.topbar__mid {
  align-items: center;
  gap: var(--s-4);
}
.topbar__right {
  align-items: center;
  gap: var(--s-3);
}
.drawer {
  left: 0;
  top: 48px;
  bottom: 32px;
  border-top: 0;
}

/* date column */
.date__num {
  margin-left: -0.05em;
  white-space: nowrap;
}
.note p {
  font-size: var(--fs-body);
  color: var(--c-ink);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.note .help {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-label);
  color: var(--c-ink-3);
  letter-spacing: 0.02em;
}

/* center */
.project__meta {
  grid-template-columns: 1.1fr 1.6fr 0.7fr;
}
.project__meta strong {
  font-size: 24px;
  line-height: 1.2;
}
.project__meta small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.layers {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
}
.layer {
  min-width: 0;
  font-family: var(--f-text);
  padding: 7px 10px;
  align-items: center;
}
.layer__n {
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer > span:last-child {
  color: var(--c-ink-3);
  flex: none;
}
.layer--on > span:last-child {
  color: rgba(232, 229, 223, 0.7);
}
.layer.ce:hover {
  border-color: var(--c-ink);
  outline: 0;
}
.focus {
  margin-top: 0;
}

/* context column: v0.2 단일 열 tools */
.tools {
  display: block;
}
.tools li {
  grid-template-columns: 14px minmax(0, 1fr) auto 44px;
  font-size: var(--fs-body);
}
.tools li:nth-child(2) {
  border-top: var(--line) solid var(--c-line-soft);
}
.tools .tool__ver {
  display: block;
  margin-right: var(--s-2);
}
.cal__grid .today {
  display: block;
  flex: none;
  padding: 0;
  min-height: 0;
}
.tl__today span {
  background: var(--c-panel);
  padding: 0 4px;
  left: -22px;
}

/* =========================================================
   15. v1.7 — 벤토 타일 · 공통 그리드 · 라운드 통일
   좌우 여백 동일 · 3열 × 3행(R1 328 / R2 flex / R3 196) 이 모든 열에서 같은 선에 맞음
   ========================================================= */
/* :root merged into top block */
.os {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  grid-template-rows: 48px minmax(0, 1fr);
}
.tile {
  background: var(--c-panel);
  border: var(--line) solid var(--c-line);
  border-radius: var(--r-tile);
  padding: var(--pad);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.grid {
  column-gap: var(--gap);
}
.col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
  min-height: 0;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.section__head {
  margin-bottom: 12px;
  align-items: center;
  min-height: 16px;
}

/* topbar = 하나의 타일, 본문과 같은 3열 */
.topbar.tile {
  padding: 0;
  border-bottom: var(--line) solid var(--c-line);
}
.topbar__brand,
.topbar__mid {
  padding: 0 var(--pad);
}

/* 1 · date */
.date {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
}
.date__num {
  line-height: 0.78;
}
.date__row {
  margin-top: auto;
  padding-bottom: 0;
  border-bottom: 0;
  align-items: flex-end;
}
.date__day {
  line-height: 1;
}

/* calendar + agenda */
.cal {
  padding: var(--pad);
  display: flex;
  flex-direction: column;
}
.cal__grid {
  row-gap: 4px;
}
.cal__grid span {
  height: 26px;
  line-height: 26px;
}
.agenda {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: var(--line) solid var(--c-line);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.agenda .section__head {
  margin-bottom: 4px;
}
.agenda__list li {
  display: grid;
  padding: 7px 0;
  border-top: var(--line) solid var(--c-line-soft);
  font-size: var(--fs-body);
}
.agenda__list li:first-child {
  border-top: 0;
}
.agenda__list .mono {
  color: var(--c-ink-2);
}
.agenda__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.agenda__t small {
  font-weight: 400;
  color: var(--c-ink-3);
}
.agenda__list .k-rest .agenda__t {
  font-weight: 400;
  color: var(--c-ink-2);
}
.agenda__list li.ce:hover {
  outline: 0;
  color: var(--c-accent-ink);
}

/* 3 · project */
.hero {
  padding: var(--pad);
  border-bottom: var(--line) solid var(--c-line);
  display: flex;
  flex-direction: column;
}
.hero__title {
  margin-top: 14px;
}
.project__meta {
  margin-top: 18px;
}
.layers {
  margin-top: auto;
  gap: 6px;
}
.layers:empty {
  display: none;
}

/* timeline */
.tl {
  padding: var(--pad);
  border-bottom: var(--line) solid var(--c-line);
}

/* 4 · today options / 5 · tomorrow */
.today-box,
.tomorrow {
  display: flex;
  flex-direction: column;
}
.opts {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.opts li {
  display: grid;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: var(--line) solid var(--c-line-soft);
}
.opts li:first-child {
  border-top: 0;
}
.opt__chk {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--c-ink-3);
  background: none;
  cursor: pointer;
  padding: 0;
}
/* hover 는 '채움'이 아니라 테두리만 진하게 — 채움은 완료 상태 전용 (체크 직후 다음 줄이 완료처럼 보이던 문제) */
.opt__chk:hover {
  border-color: var(--c-ink);
  background: none;
  box-shadow: inset 0 0 0 2px var(--c-panel), inset 0 0 0 7px color-mix(in srgb, var(--c-ink) 18%, transparent);
}
.opt__t {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Today 오른쪽 칸: 프로젝트 이름 또는 "일상"(흐리게) — 누르면 바뀐다 */
.opt__m.is-daily { color: var(--c-ink-3); }
.opt__m.ce:hover { color: var(--c-accent-ink); }
.opt__m {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--c-ink-3);
  white-space: nowrap;
}
.opt__prev {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 0 0 8px;
  margin-bottom: 2px;
  border-bottom: var(--line) solid var(--c-line);
  font-size: var(--fs-body);
}
.opt__prev span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opt__prev .label {
  flex: none;
  color: var(--c-ink-3);
}
.opt__prev.is-fresh .label { color: var(--c-accent-ink); }   /* 어제 적어둔 것 = 오늘의 시작점 */
.opts__foot {
  display: flex;
  justify-content: space-between;
  margin: 4px -8px -6px;
}
.tomorrow textarea {
  flex: 1;
  width: 100%;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--f-text);
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-ink);
  padding: 0;
}
.tomorrow textarea::placeholder {
  color: var(--c-ink-3);
}
.tomorrow:focus-within {
  border-color: var(--c-ink);
}

/* tools */
.tools li {
  padding: 0;
}

/* status + clock (우하단) */
.status {
  display: flex;
  flex-direction: column;
}
.meter {
  display: block;
  margin-top: auto;
}
.meter > div,
.meter > div + div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border: 0;
  border-top: var(--line) solid var(--c-line-soft);
}
.meter strong {
  font-family: var(--f-text);
  font-size: var(--fs-body);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0;
}

/* drawer = 타일 */
.drawer.tile {
  padding: 0;
  border: var(--line) solid var(--c-line);
  border-radius: var(--r-tile);
  overflow: hidden;
}
.modal__box,
.toast {
  border-radius: var(--r-tile);
}
.cal__grid .today,
.cal__grid .rest,
.layer,
.btn,
.tag {
  border-radius: var(--radius);
}
/* :root merged into top block */
.date__num {
  margin-top: -4px;
}
.tools li {
  height: 25px;
}
.section__head > * {
  white-space: nowrap;
}
.section__head > .label:last-child:not(:first-child) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: var(--s-2);
}
.tl__rows {
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
}
.tl__row {
  height: auto;
}

/* =========================================================
   16. v1.8 — 하나의 24-col CSS Grid (fr · minmax · line 배치 · gap)
   읽는 순서(F): A 날짜→프로젝트→오늘 / B 달력→타임라인→도구 / C 시작·복사→내일→약속→다음 목표→시계
   화면 비율이 달라도 열은 fr, 행은 minmax 로 늘고 줄어듦
   ========================================================= */
/* :root merged into top block */
html,
body {
  width: 100%;
  height: 100%;
}
.os {
  row-gap: var(--gap);
}
.topbar.tile {
  grid-template-columns: repeat(24, minmax(0, 1fr));
  column-gap: var(--gap);
}
.topbar__brand {
  grid-column: 1 / 7;
}
.topbar__mid {
  grid-column: 7 / 18;
  padding: 0 var(--pad);
}
.topbar__right {
  grid-column: 18 / 25;
}
.topbar .meter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: 0 var(--pad);
}
.topbar .meter > div,
.topbar .meter > div + div {
  border: 0;
  padding: 0;
  gap: 8px;
  align-items: baseline;
}
.topbar .meter strong {
  font-size: var(--fs-meta);
}

.grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: var(--gap);
  min-height: 0;
}
.a-date {
  grid-column: 1 / 7;
  grid-row: 1;
}
.a-proj {
  grid-row: 1;
}
.a-today {
  grid-row: 1;
}
.a-cal {
  grid-column: 1 / 7;
}
.a-tl {
  grid-column: 7 / 24;
  grid-row: 2;
}
.a-tools {
  grid-column: 24 / 25;
  grid-row: 2;
}
.a-tl {
  grid-column: 7 / 19;
}
.a-tools {
  grid-column: 19 / 25;
}

/* today (우상단) */
.a-today .opt__t {
  font-size: 16px;
}

/* timeline: tuner needle */

/* tools: 늘 펼친 목록(접힘 상태는 9/28 에 없앰) */

.a-tools {
  padding: var(--pad);
  display: block;
}
.a-tools .section__head {
  flex-direction: row;
  gap: 0;
  margin-bottom: 12px;
}
.a-tools .section__head .label {
  display: inline;
}
.a-tools .section__head .label--ink {
  margin-right: auto;
}

.a-tools .tools li {
  display: grid;
  height: 25px;
  border-top: var(--line) solid var(--c-line-soft) !important;
}
.a-tools .tools li:first-child {
  border-top: 0 !important;
}
.a-tools .tools li > span,
.a-tools .tools li > button {
  display: block;
}

/* bottom row */
.a-next {
  display: flex;
  flex-direction: column;
}
.goal {
  display: flex;
  flex-direction: column;
}
.goal__t {
  margin-top: auto;
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.goal__t.is-empty {
  color: var(--c-ink-3);
  font-weight: 400;
}

/* =========================================================
   17. v1.9 — 아티클 기반 점검
   · 타일 티어: Hero(날짜·프로젝트) > Feature(오늘·타임라인·달력) > Metric(내일·약속·목표·시계) > Accent(Copy·Tools 레일·Start)
   · 같은 크기 카드 나열 금지 → 하단 행 폭을 역할대로 차등 (2 / 5 / 4 / 3 / 4)
   · 타일 안 구조 통일: 라벨(좌상단) → 주 값 → 메타(같은 기준선)
   · 컨테이너 쿼리: 타일은 뷰포트가 아니라 자기 폭에 반응
   · 색만으로 상태 구분 금지: 연결=채움, 미연결=빈 링
   ========================================================= */
.tile {
  container-type: inline-size;
}
.topbar.tile,
.drawer.tile {
  container-type: normal;
}

/* 하단 행: 메타 줄 기준선 통일 */
.goal__d {
  font-size: var(--fs-meta);
  line-height: 16px;
  margin-top: 6px;
  color: var(--c-ink-2);
}
.goal__t {
  font-size: 16px;
  line-height: 1.25;
}

/* tools 레일: 이름 약자 + 채움/빈 링 */
.a-tools .tools {
  grid-template-columns: repeat(2, 24px);
  justify-content: center;
}
.a-tools .tools .dot {
  place-items: center;
  color: var(--c-ink-3);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

.a-tools .tools .dot {
  display: inline-block;
}
.a-tools .tools .dot::after {
  content: none;
}

/* 키보드 포커스 */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.tomorrow textarea:focus-visible {
  outline: 0;
}

/* 컨테이너 쿼리 — 타일이 좁아지면 스스로 줄임 */
@container (max-width: 540px) {
  .project__meta {
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
  }
  .project__meta > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    border-left: 0;
    padding-left: 0;
  }
  .layers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container (max-width: 420px) {
  .opt__m {
    display: none;
  }
}
@container (max-width: 760px) {
  .tl__week {
    font-size: 0;
  }
  .tl__week b {
    font-size: var(--fs-label);
  }
}

/* 세로·4:3 화면: 12-col 로 재배치 (읽는 순서 유지) */
/* =========================================================
   18. v2.0 — 타임라인: 알약 막대 + 글자는 막대 안에서 시작 · 확대/축소/이동 · tools 점
   글자가 막대보다 길면 막대 밖으로 이어지되, 막대 위는 밝은 글자 / 밖은 어두운 글자 (같은 위치에 두 겹)
   ========================================================= */
.a-tl .section__head > #tl-range {
  margin-left: auto;
  margin-right: 12px;
}
.tl__ctl {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.tl__ctl button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  font-family: var(--f-text);
  font-size: 13px;
  line-height: 1;
  color: var(--c-ink-2);
  display: grid;
  place-items: center;
  padding: 0;
}
.tl__ctl button:hover {
  background: var(--c-panel-2);
  color: var(--c-ink);
}
#tl-reset {
  color: var(--c-ink-2);
}
/* 툴바 아이콘: 같은 두께의 SVG (폰트 대체 글리프 대신) */
.tl__ctl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tl__ctl svg .fill { fill: currentColor; stroke: none; }
.tl__ctl-sep { width: 1px; height: 14px; margin: 0 3px; background: var(--c-line); }
.tl__row {
  overflow: hidden;
}
.tl__lab {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  white-space: nowrap;
  font-size: var(--fs-body);
  pointer-events: none;
}
.tl__lab-t {
  font-weight: 500;
}
.tl__lab-d {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  opacity: 0.6;
}
.tl__day {
  text-align: center;
  max-width: none;
  color: var(--c-ink-3);
}
.tl__day.is-we {
  color: var(--c-line);
}
.tl__today {
  pointer-events: none;
}

/* 알약: 바깥 = 글자를 다 담는 틀, 안쪽 채움 = 실제 기간. 글자는 항상 알약 안. */
.tl__body,
.tl__rows {
  min-height: 0;
}
.tl__pill {
  position: absolute;
  border-radius: 999px;
  overflow: hidden;
}
.tl__pill.ce:hover {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--c-ink);
}
/* next appointment: 큰 숫자의 글자 여백 보정 → 라벨·제목과 같은 왼쪽 선 */
.tl__todaylab {
  position: absolute;
  top: 0; /* 월 줄 — 주 라벨을 가리지 않는다 */
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--c-accent);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 500;
  z-index: 3;
}

/* =========================================================
   19. v2.1 — 방해 없는 화면: 제자리 수정 · 캡슐 고정/글자 가변 · 종료 노브
   ========================================================= */
/* :root merged into top block */
 /* 호스트가 작업표시줄 높이만큼 더해 준다 (자동 숨김이면 그대로 전체 화면) */

/* inline edit */
.ie {
  cursor: text;
  border-radius: 4px;
}
.ie:hover {
  outline: 1px dashed var(--c-line);
  outline-offset: 3px;
}
.ie.is-editing {
  outline: 1.5px solid var(--c-accent);
  outline-offset: 3px;
  background: #f2f0eb;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  display: block;
}
[data-pf]:empty::before {
  content: "—";
  color: var(--c-ink-3);
}

/* agenda rows: 날짜 · 제목 · 종류(클릭 순환) · × */
.agenda__x {
  background: none;
  border: 0;
  padding: 0;
  width: 14px;
  cursor: pointer;
  color: var(--c-ink-3);
  font-size: 13px;
  line-height: 1;
  opacity: 0;
}
li:hover > .agenda__x {
  opacity: 1;
}
.agenda__x:hover {
  color: var(--c-accent-ink);
}
.cal__grid span.sel {
  outline: 1.5px solid var(--c-ink);
  outline-offset: -1.5px;
  border-radius: var(--radius);
}
#ag-title:hover {
  color: var(--c-accent-ink);
  outline: 0;
}

/* today rows */
.opts li {
  grid-template-columns: 18px minmax(0, 1fr) auto 14px;
}
.opt__chk.on {
  background: var(--c-ink);
  border-color: var(--c-ink);
}
.opts li.is-done .opt__t {
  color: var(--c-ink-3);
  text-decoration: line-through;
  font-weight: 400;
}
.layer--done {
  border-style: solid;
  background: var(--c-panel-2);
}
.layer--done .layer__n {
  text-decoration: line-through;
}

/* timeline: 캡슐 = 실제 기간 그대로. 글자가 13 → 11 → 10px 두 줄 → 밖 순서로 물러난다 */
.tl__pill {
  width: auto;
  max-width: none;
  min-width: 10px;
  top: 3px;
  bottom: 3px;
  background: var(--c-ink);
  box-shadow: none;
  display: flex;
  align-items: center;
}
.tl__pill:hover {
  box-shadow:
    0 0 0 2px var(--c-panel),
    0 0 0 3px var(--c-ink);
}
.tl__pill { cursor: grab; user-select: none; }
.tl__pill.is-moving { opacity: .55; cursor: grabbing; }
.tl__ctl button:disabled { opacity: .35; cursor: default; }
.a-tl.is-expanded { position: fixed !important; inset: 5% 4% !important; width: 92% !important; height: 90% !important; z-index: 10000; background: var(--c-panel); box-shadow: var(--rams-shadow-2); }
.a-tl.is-expanded .tl__body { flex: 1; min-height: 0; overflow: auto; }
.tl__pill .tl__lab {
  position: static;
  padding: 0 12px;
  color: #fff;
  min-width: 0;
  width: 100%;
}
.tl__pill--goal.is-past {
  background: var(--c-ink-3);
}
.tl__pill--appt {
  /* 약속 = 놓치면 안 되는 시각(마감) → 주황 캡슐. 작업 = 검정, 휴식 = 점선 */
  background: var(--c-accent);
}
.tl__pill--rest .tl__lab {
  color: var(--c-ink-2);
}
.tl__pill--rest .tl__lab-t {
  font-weight: 400;
}
.m-t11 .tl__lab-t {
  font-size: 11px;
}
.tl__out {
  position: absolute;
  top: 3px;
  bottom: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: var(--fs-body);
  color: var(--c-ink);
  pointer-events: none;
}
.tl__out.is-left {
  flex-direction: row;
}
.tl__out .tl__lab-d {
  opacity: 0.6;
}

/* next appointment = next goal 과 같은 글자 구성, 날짜만 굵게 */
.goal__d {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: var(--fs-meta);
}
.goal__d b {
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--c-ink);
  letter-spacing: 0;
}

/* =========================================================
   20. v3.0 — 개인 OS: 시계·종료·시작은 Dock(별도 창)으로, Wall 은 바탕화면 역할
   A 날짜 · 프로젝트 · 오늘 / B 달력 · 타임라인 · 도구 / C (달력) · 내일 · 약속 · 목표 · Desktop
   ========================================================= */
.grid {
  grid-template-rows: minmax(320px, 352fr) minmax(300px, 360fr) minmax(
      150px,
      176fr
    );
}
.a-cal {
  grid-row: 2 / 4;
}
.a-tm {
  grid-row: 3;
}
.a-next {
  grid-row: 3;
}
.a-goal {
  grid-row: 3;
}
.a-desk {
  grid-row: 3;
}

/* 프로젝트 전환 점 (01–06) */
.hero .layers {
  margin-top: auto;
}
.projdots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: var(--line) solid var(--c-line-soft);
}
.layers:empty + .projdots {
  margin-top: auto;
}
.pd {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--f-text);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.pd i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--c-ink-3);
  transition: transform 0.12s;
}
.pd span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd.is-past i {
  background: var(--c-ink);
  box-shadow: none;
}
.pd.is-break i {
  box-shadow: none;
  border: 1.5px dashed var(--c-ink-3);
}
.pd.is-on {
  color: var(--c-ink);
  font-weight: 500;
}
.pd.is-on i {
  background: var(--c-accent);
  box-shadow:
    0 0 0 3px var(--c-panel),
    0 0 0 4px var(--c-accent);
  border: 0;
}
.pd:hover {
  color: var(--c-ink);
}
.pd:hover i {
  transform: scale(1.25);
}
/* 점 · 이름만 손가락(누르면 전환). 그 밖의 빈 곳은 새 파트 */
.pd { cursor: default; }
.pd i, .pd span { cursor: pointer; }
.pd span.is-ko { letter-spacing: 0; }

/* tools: 카테고리 (접힘 = 점 묶음, 펼침 = 2단 목록) */
.a-tools .tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.a-tools .tcat {
  display: block !important;
  height: auto !important;
  border: 0 !important;
  padding: 0 !important;
}

.a-tools .tcat > ul {
  display: grid;
  grid-template-columns: repeat(2, 14px);
  gap: 7px;
  justify-content: center;
}

.a-tools .tools {
  display: block;
  columns: auto 180px; /* 타일 폭에 맞춰 열 수가 바뀐다(좁으면 1열, 넓으면 3–5열) */
  column-gap: 24px;
}
.a-tools .tcat {
  break-inside: avoid;
  padding: 0 !important;
  border: 0 !important;
}
.a-tools .tcat + .tcat {
  padding-top: 0 !important;
  border-top: 0 !important;
}
.a-tools .tcat > .label {
  display: block;
  margin-bottom: 4px;
}
.a-tools .tcat > ul {
  display: block;
}
.a-tools .tools .tool {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-meta);
}
.a-tools .tools .tool > span {
  display: block;
}
.a-tools .tools .tool:hover {
  color: var(--c-accent-ink);
}

/* Desktop 타일 */
.desk {
  display: flex;
  flex-direction: column;
}
.desk .section__head > #desk-count {
  margin-left: 10px;
  margin-right: auto;
}
.desk__grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 2px 12px;
  align-content: start;
}
.di {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  height: 26px;
  cursor: pointer;
  font-size: var(--fs-meta);
  border-radius: 4px;
}
.di:hover {
  color: var(--c-ink);   /* 올리기는 시간 · 현재 · 주요 행동이 아니다 → 주황 대신 잉크 + 이름 밑줄(10/1) */
}
.di:hover .di__n { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-ink-3); }
.di__n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 줄 오른쪽 동작(이름 바꾸기 · 휴지통) — 올리거나 초점일 때만 */
.di:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--c-line); }
.di.is-drop-target { box-shadow: inset 0 0 0 2px var(--c-accent); }   /* 폴더 위에 놓으면 넣는다 */
.di.is-reordering, .di.is-settling { position: relative; z-index: 20; background: var(--c-panel); border-radius: 2px; outline: var(--line) solid var(--c-line); outline-offset: 6px; box-shadow: 0 0 0 6px var(--c-panel); }
.di.is-reordering { box-shadow: 0 0 0 6px var(--c-panel), var(--rams-shadow-2); cursor: grabbing; will-change: transform; }
.di .ie.is-editing,
.di__n.is-editing {
  display: block;
}

/* 서랍은 화면 중앙에 */
.drawer.tile {
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(880px, 92%);
  height: min(720px, 86%);
  box-shadow: var(--rams-shadow-2);
  z-index: 40;
}

/* v3.1 — tools 펼침: 24px 기준선 그리드 (라벨 = 한 줄, 묶음 사이 = 한 줄) · 끌어서 순서 바꾸기 */
.a-tools .tools {
  column-gap: var(--s-3);
}
.a-tools .tcat:last-child {
  margin-bottom: 0;
}
.a-tools .tcat > .label {
  margin: 0;
  border-bottom: var(--line) solid var(--c-line);
}
.a-tools .tools .tool {
  border-top: 0 !important;
  border-bottom: var(--line) solid var(--c-line-soft) !important;
  cursor: grab;
}
/* Tools 길게 눌러 옮기기 — 일정 목록과 같은 표시: 들린 줄 = 떠 있는 박스(맨 끝 .is-reordering), 놓을 자리는 주황 2px 삽입선 */
.tool.is-drop-target {
  box-shadow: inset 0 2px 0 var(--c-accent);
}
.tcat.is-drop-target > ul {
  box-shadow: inset 0 -2px 0 var(--c-accent);
}

.a-tools .tcat {
  margin-bottom: 22px;
}
.a-tools .tcat > .label {
  height: 22px;
  line-height: 22px;
}
.a-tools .tools .tool {
  height: 22px;
}
/* 모달: 화면(줌 적용) 안에 들어오게 — vh 는 줌을 모르므로 % 로 */
.modal {
  padding: 24px 24px 96px;
}
.modal__box {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__body {
  overflow: auto;
  min-height: 0;
}
.modal__head,
.modal__foot {
  flex: none;
}
/* 줌이 걸린 html 에서는 fixed/vh 가 화면보다 크게 잡힌다 → 크기가 명시된 body 기준 absolute 로 */
body {
  position: relative;
}
.modal,
.drawer.tile,
.toast {
  position: absolute;
}

/* =========================================================
   21. v3.2 — HANDOFF 02: DATE → CURRENT PROJECT → TODAY → TIMELINE/SCHEDULE → TOOLS
   ========================================================= */
/* P1 · Project(Context) │ Today(Action) = 50 / 50, 하나의 작업 영역 (타일 두 장을 맞붙임) */
.a-proj {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.a-today {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.a-tm {
  grid-column: 7 / 12;
}
.a-next {
  grid-column: 12 / 16;
}
.a-goal {
  grid-column: 16 / 19;
}
.a-desk {
  grid-column: 19 / 25;
}
.desk__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.a-proj .hero__title {
  font-size: 44px;
}
.a-proj .project__meta {
  grid-template-columns: 1fr 1.5fr 0.7fr;
}

/* 04 · 날짜 = ambient: 자리는 그대로, 세기만 한 단계 낮춤 */
.date__num {
  color: #2b2a28;
  font-size: min(304px, 72cqw);
}

/* P2 · TODAY 위계: 첫 미완료 = 가장 큼 → 나머지 미완료 → 완료(작고 흐리게, 아래) */
.a-today .opts {
  flex: 0 1 auto;
}
.a-today .opts li {
  padding: 8px 0;
}
.a-today .opts li.is-primary {
  padding: 6px 0 14px;
  border-top: 0;
}
.a-today .opts li.is-primary .opt__t {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.a-today .opts li.is-primary .opt__chk {
  width: 18px;
  height: 18px;
  border-color: var(--c-ink);
  align-self: start;
  margin-top: 5px;
}
.a-today .opts li.is-primary + li {
  border-top: var(--line) solid var(--c-line);
}
.opts--done {
  margin-top: auto;
  padding-top: 8px;
  border-top: var(--line) solid var(--c-line-soft);
  flex: none !important;
}
.a-today .opts--done li {
  padding: 3px 0;
  border-top: 0;
}
.a-today .opts--done .opt__t {
  font-size: 13px;
  font-weight: 400;
  color: var(--c-ink-3);
  text-decoration-color: var(--c-line);
}
.opts--done .opt__chk {
  width: 10px;
  height: 10px;
  border-width: 1px;
  justify-self: center;
}
.opts--done .opt__chk.on {
  background: var(--c-ink-3);
  border-color: var(--c-ink-3);
}
.opts--done .opt__m {
  opacity: 0.6;
}
.a-today .opts__foot {
  margin-top: 6px;
}
.a-today .opts--done + .opts__foot {
  margin-top: 2px;
}
.a-today:not(:has(.opts--done)) .opts__foot {
  margin-top: auto;
}

/* P3–5 · tools: ● 실행 중(키 컬러) / ○ 꺼짐(중립) — 색은 "살아 있는 것"에만 */
.a-tools .tools .dot,
.a-tools .tools .dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--c-ink-3);
}
.a-tools .tools .dot--on,
.a-tools .tools .dot--on {
  background: var(--tc, var(--c-ink));
  box-shadow: none;
}
.tool.is-unlinked .tool__name {
  color: var(--c-ink-3);
}
.tool.is-unlinked .dot {
  box-shadow: inset 0 0 0 1px var(--c-line) !important;
}
.tool.is-run .tool__name {
  font-weight: 500;
}

.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav button {
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink-2);
  font: 500 13px/1 var(--f-text);
  cursor: pointer;
}
.cal-nav #cal-title { width: auto; color: var(--c-ink); font-size: var(--fs-label); letter-spacing: .12em; }
.cal-nav button:hover,
.cal-nav button:focus-visible { color: var(--c-accent-ink); outline: 0; }
/* 오늘로 돌아가기 — 얇은 선 알약 + 주황 점(시간). 오늘이 보일 때는 숨김 */
.cal-nav .cal-today { display: inline-flex; align-items: center; gap: 5px; height: 20px; min-width: 0; margin-left: 4px; padding: 0 8px; border: var(--line) solid var(--c-line); border-radius: 999px; font: 500 11px/1 var(--f-mono); letter-spacing: .04em; color: var(--c-ink-2); }
.cal-nav .cal-today[hidden] { display: none; }
.cal-nav .cal-today i { width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
.cal-nav .cal-today:hover, .cal-nav .cal-today:focus-visible { color: var(--c-ink); border-color: var(--c-ink-3); }
.a-tools .tools .tool:active {
  transform: translateY(1px);
}

/* context menu */
.ctx {
  position: absolute;
  z-index: 80;
  min-width: 208px;
  padding: 4px;
  background: var(--c-panel);
  border: var(--line) solid var(--c-line);
  border-radius: 8px;
  box-shadow: var(--rams-shadow-1);
}
.ctx button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-family: var(--f-text);
  font-size: var(--fs-meta);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.ctx button small {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-ink-3);
}
.ctx button:hover,
.ctx button:focus-visible {
  background: var(--c-panel-2);
  outline: 0;
}
.ctx button:active {
  background: var(--c-block);
}
.ctx button[disabled] {
  color: var(--c-ink-3);
  cursor: default;
  background: none;
}
.ctx__sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--c-line-soft);
}

/* 14 · 사소한 알림은 팝업 대신 상단 상태줄 한 줄로 */
.toast {
  /* 아래 가운데(Dock 바로 위) · 본문 크기 — "배치를 되돌렸습니다" · "프리셋 저장" 같은 알림이 눈에 띄게(10/1) */
  top: auto;
  bottom: calc(var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%);
  height: 46px;
  padding: 0 24px;
  gap: 18px;
  background: var(--rams-ink);
  color: var(--rams-face);
  border: 0;
  border-radius: 999px;
  font-size: var(--fs-lead);
  box-shadow: var(--rams-shadow-2);
  z-index: 70;
  white-space: nowrap;
  animation: toast-in .36s cubic-bezier(.22, 1, .36, 1) both;
}
.toast.is-leaving { animation: toast-out .26s cubic-bezier(.22, 1, .36, 1) forwards; pointer-events: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 12px); } }
#toast button { color: var(--rams-orange); font-weight: 600; text-decoration: none; }
#toast button:hover { text-decoration: underline; }
.toast button {
  border: 0;
  padding: 0;
  color: var(--c-accent-ink);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  background: none;
}
.a-proj .project__meta strong {
  font-size: 16px;
}
.a-proj .project__meta {
  margin-top: 16px;
}
.a-proj .layer {
  padding: 6px 8px;
  font-size: 11px;
}

/* v4.6.2 — restore the Bento gap and the original Project / Today hierarchy. */
.a-proj {
  grid-column: 7 / 18;
  border-radius: var(--r-tile);
  border-right: var(--line) solid var(--c-line);
}
.a-today {
  grid-column: 18 / 25;
  margin-left: 0;
  border-radius: var(--r-tile);
  border-left: var(--line) solid var(--c-line);
  padding-left: var(--pad);
  overflow: hidden;
}

/* Keep the Today check rings fully inside their rows. */
.a-today .opts,
.a-today .opts li { min-width: 0; }
.a-today .opts li {
  margin-inline: 1px;
  padding-inline: 2px 4px;
}
.a-today .opt__chk {
  flex: 0 0 auto;
  margin-left: 1px;
  box-shadow: inset 0 0 0 1px transparent;
}

/* Rest periods remain a visible, quiet pill instead of disappearing. */
.tl__pill--rest {
  min-width: 18px;
  background: #dedad2;
  border: 1px solid #aaa59b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}

/* scrollbars: see ../rams.css (one rule for every scroll area) */

/* v5 final: stable semantic tokens and compact, explicit schedule controls. */
/* :root merged into top block */
.agenda__list {
  max-height: 164px;
  overflow: auto;
  overscroll-behavior: contain;
}
.agenda__list li {
  grid-template-columns: 18px 62px minmax(80px, 1fr) 54px 70px 16px;
  align-items: center;
  gap: 6px;
}
.agenda__drag {
  width: 18px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink-3);
  cursor: ns-resize;
  text-align: center;
  touch-action: pan-y;
}
.agenda__select {
  min-width: 0;
  width: 100%;
  height: 24px;
  padding: 0 12px 0 2px;
  border: 0;
  border-bottom: 1px solid var(--c-line-soft);
  border-radius: 0;
  background: transparent;
  color: var(--c-ink-2);
  font: inherit;
  font-size: 11px;
}
.agenda__select:disabled { opacity: .45; }
.agenda__list li.is-drop-target { box-shadow: inset 0 2px 0 var(--c-accent); }
.agenda__list li.faint { display: block; width: 100%; white-space: nowrap; writing-mode: horizontal-tb; }
.cal__grid .rest { margin-inline: -1px; border-radius: 0 !important; }
.cal__grid .rest--start { margin-left: 0; border-radius: 999px 0 0 999px !important; }
.cal__grid .rest--end { margin-right: 0; border-radius: 0 999px 999px 0 !important; }
.cal__grid .rest--start.rest--end { margin-inline: 0; border-radius: 999px !important; }
/* 휴일 = 굵은 잉크 (주황은 오늘만). 휴식 기간 알약이 기간을 보여준다 */
.cal__grid .holiday:not(.today) { color: var(--c-accent-ink); font-weight: 600; }   /* 공휴일 = 시간 규칙의 주황(글자용 AA) */
/* 선택된 타일 = Ctrl+Z 가 적용될 곳. 선 한 단계 진하게만 — 주황 2px 는 키보드 초점 전용 */
#grid > .tile.is-selected { outline: 1px solid var(--c-ink-3); outline-offset: -1px; }
.tl__rows { padding-top: 8px; }
.tl__today::before {
  content: "";
  position: absolute;
  top: 1px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-accent);
}
.tl__todaylab { max-width: calc(100% - 8px); }

/* Tool status grammar: active = filled circle. */

/* 목록은 스크롤 상자라 첫 열의 원이 상자 왼쪽 끝에 붙으면 주황 테두리(맨 앞 앱)가 잘린다 → 안쪽 여백 4px 을 주고 같은 만큼 바깥으로 당겨 줄 맞춤은 그대로 */
.a-tools .tools { margin-block: 0; padding-inline: 4px; margin-inline: -4px; }
.a-tools .tools .dot { width: 10px; height: 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--c-ink-3); }
/* 실행 중 = 도구 색으로 채움 · 맨 앞 앱 = 그 위에 얇은 주황 테두리(현재 위치) · 꺼짐 = 빈 동그라미 */
.a-tools .tools .dot--on { background: var(--tc, var(--c-ink)); box-shadow: none; }
.a-tools .tools .tool.is-active .dot--on { box-shadow: 0 0 0 1.5px var(--c-panel), 0 0 0 3px var(--c-accent); }
/* 오른쪽 칸 = Dock 고정 표시(핀 아이콘) 하나로 통일 — running · minimized 같은 글자는 쓰지 않는다 */
.a-tools .tools .tool__state { display: grid; place-items: center end; min-width: 14px; }
.tool__pin { display: inline-grid; width: 12px; height: 12px; color: var(--c-ink-3); }
.tool__pin svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Keep normal-size timelines readable instead of compressing every row. */
.tl__body { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.tl__axis { position: sticky; top: 0; flex-shrink: 0; z-index: 5; background: var(--c-panel); }
.tl__rows { flex: 0 0 auto; overflow: visible; }
.tl__row { flex: 0 0 46px; min-height: 46px; }
.tl__pill { touch-action: none; }
.tl__handle { position: absolute; top: 0; bottom: 0; width: min(10px, 35%); z-index: 2; cursor: ew-resize; }
.tl__handle[data-tl-edge="start"] { left: 0; }
.tl__handle[data-tl-edge="end"] { right: 0; }
/* 좌우 손잡이: 평소엔 숨김 → 알약에 마우스를 올리면 나타나고, 손잡이 위에서 주황 */
.tl__handle::after { content: ""; position: absolute; left: calc(50% - 1px); top: 26%; height: 48%; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .9); opacity: 0; transition: opacity .12s, background .12s; }
.tl__pill:hover .tl__handle::after, .tl__pill.is-moving .tl__handle::after { opacity: 1; }
/* 손잡이: 평소엔 은은하게, 알약 위에서 또렷하게, 손잡이 위에서 주황(조작 가능 지점) */
.tl__pill--rest .tl__handle::after { background: var(--c-ink-2); }
.tl__handle:hover::after,
.tl__pill .tl__handle:hover::after { background: var(--c-accent); }

/* 타임라인 드래그 미리보기 꼬리표 — 놓으면 바뀔 날짜 (표시만, 저장은 놓을 때) */
.tl__drag-tip {
  position: absolute;
  z-index: 6;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-panel);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  white-space: pre;
  pointer-events: none;
}

/* ---- Today: 대제목(작업명) 아래 서브 항목 — └ 가지선으로 어느 작업에 속하는지 보여 준다 ---- */
.a-today .opts li.opt--sub { position: relative; padding-left: 24px; }
.a-today .opts li.opt--sub::before { content: ""; position: absolute; left: 10px; top: 0; width: 8px; height: 50%; border-left: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); pointer-events: none; }
.a-today .opts--done li.opt--sub { padding-left: 2px; }
.a-today .opts--done li.opt--sub::before { content: none; }
.opts li.is-completing .opt__chk { background: var(--c-ink); border-color: var(--c-ink); }
.opts li.is-completing .opt__t { color: var(--c-ink-3); text-decoration: line-through; transition: color .2s; }
#focus.is-settling { pointer-events: none; }

/* NEXT 타일 오른쪽 위 메타(D-day) — 작은 회색 숫자, 오늘인 약속만 주황 글자 */
.section__head .next__dday { font-variant-numeric: tabular-nums; color: var(--c-ink-3); text-transform: none; letter-spacing: .02em; }
.section__head .next__dday.is-today { color: var(--c-accent-ink); }

/* U7 · U8 — 일정 손잡이 = 점 여섯 개 한 덩어리 · × 는 행에 마우스를 올리거나 초점이 있을 때만 */
.agenda__drag { display: grid; place-items: center; }
.agenda__drag svg { width: 8px; height: 14px; fill: currentColor; }
.agenda__drag:hover, .agenda__drag:focus-visible { color: var(--c-ink); }
li:focus-within > .agenda__x { opacity: 1; }

/* 배치 편집 — 24칸 × 20줄 모듈. 타일 가장자리 손잡이를 끌면 그 타일 크기가 바뀌고(넓히면 옆 타일을 밀어 줄인다),
   타일을 다른 타일에 놓으면 자리를 맞바꾸고, 빈 곳에 놓으면 옮긴다. 빈 곳을 길게 누르면 그 빈 곳을 채우는 박스.
   실제 배치는 wall.js 가 #layout-style 에 적는다(#grid.is-custom). 세로로 좁은 화면(4:3 이하)은 원래 배치. */
.topbar__mid.is-arranging > :not(.arrange-bar) { display: none; }
.arrange-bar { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.arrange-bar[hidden] { display: none; }
.arrange-bar__hint { text-transform: none; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#grid.is-arranging > .tile { cursor: grab; outline: 1px solid rgba(32, 32, 30, .22); outline-offset: -1px; }
/* 편집 중에는 내용이 한 단계 물러나고 구조(칸 · 줄 · 모듈)가 앞에 선다 */
#grid.is-arranging > .tile > * { pointer-events: none; opacity: .5; transition: opacity .32s cubic-bezier(.22, 1, .36, 1); }
#grid > .tile > * { transition: opacity .32s cubic-bezier(.22, 1, .36, 1); }
/* 끄는 타일은 크기 그대로 얇은 그림자와 함께 손을 따라온다(배치 편집 중에만 쓰는 예외 — 사용자 요청). 놓을 자리는 주황 테두리. */
#grid.is-arranging > .tile.is-lifted { z-index: 30; pointer-events: none; outline-color: rgba(32, 32, 30, .35); box-shadow: var(--rams-shadow-2); }
#grid.is-arranging > .tile.is-lifted > * { opacity: 1; }
#grid.is-arranging > .tile.is-arr-drop { outline: 1.5px solid var(--c-accent); outline-offset: -1.5px; }
/* 모듈 레일(wall.js showGuides): 타일 뒤, 칸 경계마다 핀 구멍 난 세로 레일 · 줄 경계 가로 레일 · 열 번호.
   편집 중에는 칸 사이가 16 → 28px 로 벌어져 레일이 드러난다(--gap 을 등록해 부드럽게 옮긴다). */
@property --gap { syntax: "<length>"; inherits: true; initial-value: 16px; }
#grid { transition: --gap .52s cubic-bezier(.22, 1, .36, 1); }
#grid.is-arranging { --gap: 28px; }
#grid.is-arranging > .tile { z-index: 1; }
.arr-guide { pointer-events: none; z-index: 0; }
.arr-rail { position: relative; grid-row: 1 / -1; justify-self: start; width: 5px; margin: -2px 0 -10px calc(var(--gap) / -2 - 2.5px); transform-origin: top;
  background: linear-gradient(rgba(32, 32, 30, .26), rgba(32, 32, 30, .26)) center / 1px 100% no-repeat; }
/* 핀 구멍 = 20줄 경계 중 홀수 경계(두 줄마다 하나)의 틈 한가운데. ::after 는 격자 높이와 같다(레일의 위 2 · 아래 10px 여유를 뺌).
   한 줄 간격 p = (격자 높이 + 틈) / 20 → 무늬 한 장 = 2p = 10% + 틈/10, 첫 점 = p − 틈/2 */
.arr-rail::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; bottom: 10px;
  background: radial-gradient(circle, rgba(32, 32, 30, .34) 1.1px, transparent 1.7px) center calc(var(--gap) / -2) / 5px calc(10% + var(--gap) / 10) repeat-y; }
.arr-rail.is-end { justify-self: end; margin-left: 0; margin-right: calc(var(--gap) / -2 - 2.5px); }
.arr-rail::before { content: attr(data-n); position: absolute; left: calc(50% + 4px); top: -12px; transform: translateX(-50%); font: 500 11px/1 var(--f-mono); letter-spacing: .04em; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
/* 줄 선 = 짝수 경계(두 줄마다)의 틈 한가운데, 1px · 아주 연하게. 타일 뒤라 틈에서만 보인다 */
.arr-lines { grid-column: 1 / -1; grid-row: 1 / -1; margin: 0 -10px;
  background: linear-gradient(rgba(32, 32, 30, .11) 1px, transparent 1px) 0 calc(var(--gap) / -2 - .5px) / 100% calc(10% + var(--gap) / 10) repeat-y; }
/* 날짜 굴림(wall.js rollText): 글자마다 제 칸 안에서 올라온다.
   가림(clip-path)은 글자 상자 기준이라, 큰 숫자는 좁은 자간(-0.06em) · 낮은 줄 높이(.78) 때문에 획이 상자 밖으로 나가 잘린다
   → 상자를 사방으로 넓히고(padding) 같은 만큼 되돌려(margin) 자리는 그대로 둔다 */
.roll { position: relative; display: inline-block; }
.roll > span { display: inline-block; padding: .14em .14em .1em; margin: -.14em -.14em -.1em; }
.roll__old { position: absolute; left: 0; top: 0; }
#grid.is-flipping > .arr-frame { opacity: 0; }
.arr-frame { transition: opacity .2s; }
#grid.is-arr-busy, #grid.is-arr-busy > .tile { cursor: grabbing; }
#grid.is-arr-resize, #grid.is-arr-resize > .tile { cursor: ew-resize; }
#grid.is-arr-rresize, #grid.is-arr-rresize > .tile { cursor: ns-resize; }
/* 타일 틀: 이름 · 크기(열 × 줄)는 가운데, 네 변 가운데에 손잡이(올린 타일에만). 틀은 포인터를 받지 않고 손잡이만 받는다 */
.arr-frame { position: relative; z-index: 5; pointer-events: none; }
.arr-cap { position: absolute; left: 16px; bottom: -11px; padding: 2px 8px; border-radius: 999px; background: var(--c-ink); color: var(--c-panel); font-size: var(--fs-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arr-grip { position: absolute; pointer-events: auto; touch-action: none; border-radius: 3px; background: var(--c-ink-3); opacity: 0; transition: opacity .2s cubic-bezier(.22, 1, .36, 1), background-color .2s; }
.arr-grip::before { content: ""; position: absolute; inset: -8px; } /* 잡는 곳은 넉넉하게 */
.arr-grip--l, .arr-grip--r { top: 50%; width: 6px; height: 32px; margin-top: -16px; cursor: ew-resize; }
.arr-grip--l { left: -3px; }
.arr-grip--r { right: -3px; }
.arr-grip--t, .arr-grip--b { left: 50%; width: 32px; height: 6px; margin-left: -16px; cursor: ns-resize; }
.arr-grip--t { top: -3px; }
.arr-grip--b { bottom: -3px; }
.arr-frame.is-hot .arr-grip, .arr-grip.is-active { opacity: 1; }
.arr-grip:hover, .arr-grip.is-active { background: var(--c-accent); }
/* 놓을 자리(빈 곳으로 옮기기) · 길게 눌러 박스가 놓일 자리 — 주황 선 틀. 누르는 동안 0.45초에 걸쳐 차오른다 */
#grid { position: relative; }
.arr-ghost { position: absolute; z-index: 2; pointer-events: none; border-radius: var(--r-tile); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.arr-ghost.is-pressing { animation: arr-press .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes arr-press { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .arr-ghost.is-pressing { animation: none; } }
/* 줄 단위 목록(wall.js fitRows): 스크롤이 줄 중간에서 멈추지 않게 */
#desk, #agenda { scroll-snap-type: y mandatory; }
#desk > li, #agenda > li { scroll-snap-align: start; }
/* 타임라인 겹침: 오늘 선은 일정 막대 뒤로 지나가고, 막대 밖 글자 앞에서는 끊긴다(글자 둘레를 바탕색으로 비움) */
.tl__rows > .tl__row { position: relative; z-index: 3; }
.tl__rows > .tl__today { z-index: 2; }
.tl__out .tl__lab-t, .tl__out .tl__lab-d { background: var(--c-panel); box-shadow: 0 0 0 3px var(--c-panel); border-radius: 2px; }
/* Desktop 머리글: "+ 새 폴더" 버튼이 머리글을 키우지 않게(옆 타일 라벨과 같은 높이) */
.a-desk .section__head #desk-new { margin-block: -4px; }
#tools-paths { margin-block: -4px; margin-left: 8px; }
.a-desk #desk { margin-bottom: -6px; } /* 줄 칸 아래 여백만큼 내려 마지막 글줄을 옆 타일과 맞춘다 */
.di__e { margin-left: 6px; font-size: 11px; color: var(--c-ink-3); letter-spacing: .02em; }
@container (max-width: 300px) { .next__dday .dd-pre { display: none; } }
/* B · 타일 안 세로 정렬: 목록형은 위에서부터, 요약형은 아래 선에 맞춘다 */
/* Project: 제목은 위, PHASE · GOAL · TARGET 과 단계 · 프로젝트 점은 아래 묶음(빈 곳은 제목 아래 여백으로) */
.a-proj .project__meta { margin-top: auto; }
.hero .layers { margin-top: 16px; }
.hero .layers:empty { display: none; }
/* Tomorrow: 메모는 위, 내일 일정은 아래 선에(최대 3개) */
.tm__sch { margin: 12px 0 0; padding: 8px 0 0; list-style: none; border-top: var(--line) solid var(--c-line-soft); }
.tm__sch li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 24px; font-size: 13px; color: var(--c-ink); }
.tm__sch li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm__sch li > i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ink-3); }
.tm__sch li.k-appointment > i { background: var(--c-accent); }
.tm__sch li.is-from > i { background: var(--c-accent); }
.tm__sch li.k-rest > i { background: transparent; box-shadow: inset 0 0 0 1px var(--c-ink-3); }
.tm__sch small { font-size: 11px; color: var(--c-ink-3); }
.tm__sch li.is-empty, .tm__sch li.is-more { display: block; }

/* 9/28 F — 일정 줄의 종류 · 상태 상자는 평소엔 글자만, 줄에 올리거나 초점이 가면 상자(밑줄 · 화살표)로 */
.agenda__select {
  appearance: none;
  border-bottom-color: transparent;
  cursor: pointer;
  transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.agenda__list li:hover .agenda__select,
.agenda__select:focus-visible {
  appearance: auto;
  border-bottom-color: var(--c-line-soft);
}
.agenda__select:disabled { visibility: hidden; } /* 약속 · 휴식에는 상태가 없다 */

/* 9/28 G — 헤더 "배치 편집": 선 버튼 + 배치 아이콘(회색 글자만이면 잘 안 보였다) */

/* =========================================================
   박스 — 사용자가 MAIN 에 더한 메모 · 체크리스트 · 바로가기 · 이미지 (9/28)
   타일과 같은 판 · 머리글 · 줄. 세로로 좁은 화면(원래 배치)에서는 숨긴다.
   ========================================================= */
.box {
  display: flex;
  flex-direction: column;
}
.box > .section__head {
  flex: none;
}
.box > .section__head > .label {
  flex: none;
}
.box > .section__head > .box__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box__memo {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-family: var(--f-text);
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-ink);
}
.box__memo::placeholder {
  color: var(--c-ink-3);
}
.box:focus-within {
  border-color: var(--c-ink);
}
.box__list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: none;
}
.box__list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto 14px;
  align-items: center;
  column-gap: 10px;
  height: 32px;
  border-top: var(--line) solid var(--c-line-soft);
}
.box__list li:first-child {
  border-top: 0;
}
.box__list li > small {
  font-size: 11px;
  color: var(--c-ink-3);
  letter-spacing: 0.04em;
}
.box__t,
.box__ln {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--c-ink);
}
.box__list li.is-done .box__t {
  color: var(--c-ink-3);
  text-decoration: line-through;
}
.box__t--path:empty::before {
  content: "https:// 주소 또는 C:\\ 경로";
  color: var(--c-ink-3);
}
.box__ln {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.box__ln:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 바로가기 표시: 파일 · 폴더 = 네모 윤곽, 웹 = 원 윤곽 */
.box__g {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--c-ink-3);
}
.box__g.is-web {
  border-radius: 50%;
}
.box__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  margin-left: -8px;
}
.box__hint {
  font-size: 11px;
  color: var(--c-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@container (max-width: 260px) {
  .box__hint { display: none; }
}
/* 이미지: 타일 안쪽을 꽉 채운다(머리글 아래). 우클릭으로 전체 보기 */
.box[data-kind="image"] {
  padding-bottom: 0;
}
.box__img {
  flex: 1;
  min-height: 0;
  width: calc(100% + var(--pad) * 2);
  margin: 0 calc(var(--pad) * -1);
  object-fit: cover;
  border-top: var(--line) solid var(--c-line-soft);
  user-select: none;
}
.box__img.is-contain {
  object-fit: contain;
}
.box__drop {
  flex: 1;
  min-height: 0;
  margin-bottom: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: var(--line) dashed var(--c-line);
  border-radius: var(--radius);
  background: none;
  color: var(--c-ink-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.box__drop small {
  font-size: 11px;
  color: var(--c-ink-3);
}
.box__drop:hover {
  border-color: var(--c-ink-3);
  color: var(--c-ink);
}
/* 새 박스: 종류 고르기(그 자리에서 — 팝업 없음). 배치 편집 중에도 누를 수 있다 */
.box__pick { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: center; }
.box__pick .btn { justify-content: center; border: var(--line) solid var(--c-line); border-radius: 999px; }
.box__pick .btn:hover { border-color: var(--c-ink-3); }
#grid.is-arranging > .box > .box__pick { pointer-events: auto; opacity: 1; }
@container (max-width: 220px) {
  .box > .section__head > .label:not(.box__name) { display: none; }
  .box__pick { gap: 4px; }
  .box__pick .btn { min-height: 24px; padding: 0 4px; font-size: 11px; }
}

/* =========================================================
   가변 타일 내용(9/28) — 타일마다 가로 · 세로 크기(container size)를 보고 글자 · 배치를 맞춘다.
   기본 배치 크기에서는 예전과 같은 값이 나오게 계수를 잡았다(cqw · cqh = 타일 안쪽 폭 · 높이의 1%).
   높이 기준(max-height)은 CSS px 이다 — 화면은 zoom 으로 키워 그리므로 실제 화면 px 보다 작다.
   ========================================================= */
@media not all and (max-aspect-ratio: 1/2) {
  #grid > .tile { container-type: size; }
}
/* 날짜: 큰 숫자는 폭과 높이 중 좁은 쪽에 맞춰 줄고, 넓어지면 커진다 */
.date__num { font-size: clamp(56px, min(72cqw, 128cqh - 58px), 560px); }
@container (max-height: 150px) { .date__row small, .date__month .mono { display: none; } }
/* 프로젝트: 제목 · 메타 · 단계 점 */
.a-proj .hero__title { font-size: clamp(22px, min(5.3cqw, 20cqh), 64px); }
@container (max-height: 210px) {
  .a-proj .project__meta small { display: none; }
}
@container (max-height: 160px) { .a-proj .project__meta { display: none; } }
@container (max-height: 120px) { .a-proj .projdots { display: none; } }
/* Today: 대제목 크기 */
.a-today .opts li.is-primary .opt__t { font-size: clamp(16px, min(4.75cqw, 10cqh), 34px); }
/* 달력: 높이가 모자라면 아래 일정 목록부터 접고, 남으면 칸이 커진다 */
.a-cal .cal__grid span { height: clamp(20px, 4.9cqh, 44px); line-height: clamp(20px, 4.9cqh, 44px); }
@container (max-height: 340px) { .a-cal .agenda { display: none; } }
/* 타임라인: 낮으면 줄 간격을 줄인다 */
@container (max-height: 290px) {
  .a-tl .tl__row { flex-basis: 34px; min-height: 34px; }
}
/* Tools: 목록이 넘치면 타일 안에서 스크롤 */
.a-tools { display: flex; flex-direction: column; align-items: stretch; }
.a-tools .tools { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
/* 약속 · 목표: 제목 크기 */
.goal .goal__t { font-size: clamp(13px, min(8.7cqw, 11.3cqh), 30px); }
/* 내일: 낮으면 내일 일정 줄을 접는다 */
@container (max-height: 118px) { .a-tm .tm__sch { display: none; } }
/* 좁은 달력: 일정 줄은 상태 칸을 빼고 제목에 폭을 준다 */
@container (max-width: 360px) {
  .a-cal .agenda__list li { grid-template-columns: 18px 58px minmax(0, 1fr) 44px 14px; }
  .a-cal .agenda__select[data-f="status"] { display: none; }
}
/* 좁은 Desktop: 확장자 글자를 뺀다(아이콘으로 구분) */
@container (max-width: 320px) { .a-desk .di__e { display: none; } }
/* "+ 박스" 놓기 중 */
#grid.is-placing, #grid.is-placing > .tile { cursor: copy; }
#arr-box.is-on { background: var(--c-ink); color: var(--c-panel); border-color: var(--c-ink); }
/* 박스 우상단 × = 박스 지우기(올렸을 때 · 배치 편집 중에는 늘 보인다) */
.box__del { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; padding: 0; opacity: 0; transition: opacity .2s cubic-bezier(.22, 1, .36, 1); }
.box__del svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.box:hover .box__del, .box__del:focus-visible, #grid.is-arranging > .box > .box__del { opacity: 1; }

#grid.is-arranging > .box > .box__del { pointer-events: auto; z-index: 6; }
.box > .section__head { padding-right: 24px; }
/* 배치 프리셋 알약(편집 막대) — 지금 배치 = 잉크 테두리, 기본으로 정한 배치 = 앞에 주황 점 */
.arr-presets { display: inline-flex; gap: 4px; align-items: center; min-width: 0; overflow: hidden; }
.arr-pre { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: var(--line) solid var(--c-line); border-radius: 999px; background: transparent; color: var(--c-ink-2); font: 500 var(--fs-label)/1 var(--f-text); white-space: nowrap; }
.arr-pre:hover { color: var(--c-ink); background: var(--c-panel-2); }
.arr-pre.is-on { border-color: var(--c-ink); color: var(--c-ink); }
.arr-pre.is-base::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent); }
.arr-pre span[contenteditable="plaintext-only"] { outline: 0; min-width: 2em; }
.arr-pre--add { border-style: dashed; color: var(--c-ink-3); }
/* 막대가 좁으면 설명 한 줄을 뺀다(같은 말이 버튼 title 에 있다) — 저장한 프리셋이 생기면 그 자리를 알약이 쓴다 */
.arrange-bar > .label--ink { white-space: nowrap; flex: none; }
.arrange-bar:has(.arr-presets > :nth-child(3)) .arrange-bar__hint { display: none; }
@media (max-width: 1500px) { .arrange-bar__hint { display: none; } }
/* Tools 펼침 = 2 × 2 격자: 왼쪽 Reference · Tools, 오른쪽 AI · App · Web. 줄마다 높이를 같이 써서 두 열의 머리글(Tools · App · Web)이 한 줄에 선다.
   분류가 비면 그 칸만 빈다. 좁은 타일은 한 열(원래 순서). */
.a-tools .tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-3); row-gap: 22px; align-content: start; align-items: start; columns: auto; }
.a-tools .tcat { margin-bottom: 0; }
.a-tools .tcat[data-cat="ref"] { grid-area: 1 / 1; }
.a-tools .tcat[data-cat="ai"] { grid-area: 1 / 2; }
.a-tools .tcat[data-cat="design"] { grid-area: 2 / 1; }
.a-tools .tcat[data-cat="app"] { grid-area: 2 / 2; }
@container (max-width: 330px) {
  .a-tools .tools { grid-template-columns: minmax(0, 1fr); }
  .a-tools .tcat[data-cat] { grid-area: auto; }
}
/* 목록 줄 들어 올리기(wall.js liftRow) — 일정 · Tools 공통. 길게 누르면 줄이 면 색 박스로 떠올라(얇은 그림자 = 끄는 타일과 같은 단계) 손을 따라온다 */
/* 면 색 6px 테두리(spread)로 글자 둘레에 여백을 주고, 그 바깥에 선 1px — 자리 · 크기는 그대로 */
.agenda__list li.is-reordering, .tool.is-reordering, .agenda__list li.is-settling, .tool.is-settling {
  position: relative; z-index: 20; background: var(--c-panel); border-radius: 2px;
  outline: var(--line) solid var(--c-line); outline-offset: 6px; box-shadow: 0 0 0 6px var(--c-panel);
}
.agenda__list li.is-reordering, .tool.is-reordering { box-shadow: 0 0 0 6px var(--c-panel), var(--rams-shadow-2); cursor: grabbing; }
/* 들린 줄은 따로 합성(will-change) — 손을 따라 움직일 때마다 배경화면 전체를 다시 칠하지 않게 */
.agenda__list li.is-reordering, .tool.is-reordering { will-change: transform; }
.is-lift-open { overflow: visible !important; }
.is-lift-host { overflow: visible !important; z-index: 30; }   /* 들린 줄이 타일 밖(Dock 쪽)으로 나갔을 때만 */

/* 켜짐(부팅) — 모션 킷 1–3 장면과 같은 말: 레일이 서고, 글자가 제 칸 안에서 올라오고, 모듈이 놓인다. 곡선 하나 · 넘침 없음 */
#boot { position: fixed; inset: 0; z-index: 9999; background: var(--rams-field); cursor: default; overflow: hidden; }
#boot[hidden] { display: none; }
.boot__stage { position: absolute; inset: 0 5%; }
.boot__rails i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(32, 32, 30, .22); transform-origin: 50% 0; }
.boot__word { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: auto; overflow: visible; fill: var(--rams-ink); }
.boot__word .boot__px { fill: var(--rams-orange); }
.boot__grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(32, 32, 30, .12); transform-origin: 50% 0; }
.boot__grid i:nth-child(6n + 1) { background: rgba(32, 32, 30, .22); }
.boot__dot { position: absolute; background: var(--rams-orange); transform-origin: 0 0; }


/* Tools → Dock 던지기: 들린 줄에 주황 테두리 + 손 옆 안내 */
.tool.is-to-dock { outline-color: var(--c-accent) !important; }
.dock-hint { position: fixed; z-index: 9500; height: 24px; padding: 0 10px; display: flex; align-items: center; border-radius: 999px; background: var(--c-ink); color: var(--c-panel); font: 500 11px/1 var(--f-mono); letter-spacing: .04em; pointer-events: none; box-shadow: var(--rams-shadow-1); }
.dock-hint[hidden] { display: none; }
.dock-hint i { width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.dock-hint b { font-weight: 600; margin-right: 6px; }

/* 키보드 초점(10/1): 글 칸은 아래 선 하나, 달력 화살표 · Tools 줄 · 머리 막대 항목은 얇은 잉크 테두리 */
.tomorrow textarea:focus-visible { box-shadow: 0 1px 0 var(--c-ink); }
.cal-nav button:focus-visible { box-shadow: 0 0 0 1.5px var(--c-ink); border-radius: 999px; }
.tools li.tool:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--c-ink); border-radius: 6px; }
.meter .ce:focus-visible { outline: 0; box-shadow: 0 1px 0 var(--c-ink); }

.opt--more { list-style: none; }
.opt__more { border: 0; background: none; padding: 2px 0; color: var(--c-ink-3); font: inherit; font-size: var(--fs-meta); cursor: pointer; }
.opt__more:hover { color: var(--c-ink); text-decoration: underline; }

/* 플랜(프로젝트 묶음) 알약 — 배치 프리셋(.arr-pre)과 같은 모양(10/2). 프로젝트 타일 머리글에 선다 */
.plans { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; margin: 0 10px; overflow: hidden; }
.plan-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border: var(--line) solid var(--c-line); border-radius: 999px; background: transparent; color: var(--c-ink-3); font: 500 var(--fs-label)/1 var(--f-text); letter-spacing: .04em; white-space: nowrap; max-width: 140px; cursor: pointer; }
.plan-pill span { overflow: hidden; text-overflow: ellipsis; }
.plan-pill span[contenteditable="plaintext-only"] { outline: 0; min-width: 2em; overflow: visible; }
.plan-pill:hover { color: var(--c-ink); background: var(--c-panel-2); }
.plan-pill.is-on { border-color: var(--c-ink); color: var(--c-ink); }
.plan-pill--add { border-style: dashed; padding: 0 7px; }
/* Dock 을 껐을 때만 보이는 "DOCK 켜기" — SUB 의 단추와 같은 뜻, 위 막대 오른쪽 */
/* DOCK · SUB 전환 스위치 = SUB 위 막대의 DOCK 노브와 같은 모양(10/2): 글자 + 둥근 노브 + 선 하나 */
.sw { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; padding: 0; border: 0; background: none; color: var(--c-ink-3); font: 500 var(--fs-label)/1 var(--f-text); letter-spacing: .04em; white-space: nowrap; cursor: pointer; }
.sw:hover { color: var(--c-ink); }
.sw[hidden] { display: none; }
.sw__knob { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c-panel-2); box-shadow: var(--rams-shadow-knob); }
.sw__knob i { position: absolute; left: 50%; top: 5px; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: var(--c-ink-3); }
.sw__knob.is-off i { transform: rotate(-45deg); transform-origin: 50% 8px; }


/* 알약 · 단계 점을 들어 옮길 때 놓을 자리: 앞 · 뒤 주황 선 */
.plan-pill.is-drop-target.is-before, .pd.is-drop-target.is-before { box-shadow: -3px 0 0 -1px var(--c-accent); }
.plan-pill.is-drop-target.is-after, .pd.is-drop-target.is-after { box-shadow: 3px 0 0 -1px var(--c-accent); }
.plan-pill.is-reordering { position: relative; z-index: 5; background: var(--c-panel); box-shadow: var(--rams-shadow-1); }
.pd.is-reordering { position: relative; z-index: 5; }   /* 점 · 이름만 움직인다(상자 없음) */
/* 점 오른쪽 위 × — 올리거나 들었을 때만(누르면 지우기) */
.pd i { position: relative; }
.pd__x { position: absolute; top: -10px; right: -13px; width: 15px; height: 15px; display: grid; place-items: center; opacity: 0; transition: opacity .12s; }
.pd:hover .pd__x, .pd.is-reordering .pd__x, .plan-pill:hover .pd__x, .plan-pill.is-reordering .pd__x { opacity: 1; }
.plan-pill { position: relative; }
.plan-pill .pd__x { top: -8px; right: -7px; }
.plans { overflow: clip; overflow-clip-margin: 10px; }   /* × 가 알약 밖으로 나와도 잘리지 않게 */
/* 묻는 창: 작게, 예/아니오 를 색으로 가른다(예 = 지우는 일이면 빨강) */
#modal.modal--confirm .modal__box { width: min(400px, 100%); }
#modal.modal--confirm .modal__foot .btn { flex: 1; justify-content: center; text-align: center; font-size: 13px; }
.modal__foot .btn.btn--primary.btn--danger, .modal__foot .btn.btn--primary.btn--danger:hover { background: var(--rams-red) !important; border-color: var(--rams-red) !important; color: #fff !important; }
/* 오른쪽 위 닫기 · 지우기 단추는 한 모양: 플랫(선 + 면, 베벨 없음) · × 는 정가운데 · 크기만 다르다(대화상자 40 · 박스 22 · 점/알약 15) */
.box__del, .pd__x { display: grid; place-items: center; padding: 0; line-height: 0; border: 1px solid var(--rams-line); border-radius: 50%; background: var(--c-panel); color: var(--rams-ink); }
.box__del:hover, .pd__x:hover { border-color: var(--rams-ink); }
.pd__x svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* 위 막대 오른쪽에 스위치가 늘어도 SAVED · BACKUP · AI LIMIT 값은 한 줄(10/2) */
#meter { white-space: nowrap; }
/* 토글 자리를 SUB 와 맞춘다(이름과의 간격 12px — SUB 위 막대와 같게) */
.topbar__brand .mode-sw { margin-left: calc(12px - var(--s-2)); }

/* ---------- 첫 실행 튜토리얼(tutorial.js) — 딤 네 장이 지금 만질 곳만 비워 둔다. 메뉴(80) · 알림(70) · 대화상자(50)는 딤 위 ---------- */
#tut { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
#tut[hidden] { display: none; }
.tut__dim { position: fixed; pointer-events: auto;   /* 누름만 막는다 — 어두운 면은 .tut__ring 의 큰 그림자 */ transition: left .3s cubic-bezier(.22, 1, .36, 1), top .3s cubic-bezier(.22, 1, .36, 1), width .3s cubic-bezier(.22, 1, .36, 1), height .3s cubic-bezier(.22, 1, .36, 1); }
.tut__ring { position: fixed; pointer-events: none; box-shadow: 0 0 0 3px var(--rams-orange), 0 0 0 7px rgba(223, 79, 36, .25), 0 0 0 200vmax rgba(10, 10, 10, .55); transition: left .3s cubic-bezier(.22, 1, .36, 1), top .3s cubic-bezier(.22, 1, .36, 1), width .3s cubic-bezier(.22, 1, .36, 1), height .3s cubic-bezier(.22, 1, .36, 1); }
.tut__mark { position: fixed; pointer-events: none; border: 1.5px dashed var(--rams-orange); border-radius: 10px; }
.tut__pulse { position: fixed; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--rams-orange); pointer-events: none; animation: tut-pulse 1.2s ease-in-out infinite; }
@keyframes tut-pulse { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1.2); opacity: 1; } }
.tut__bubble { position: fixed; z-index: 46; width: 300px; padding: 16px 18px; border-radius: var(--rams-popup-radius); background: var(--rams-ink); color: #f1efe9; font: 500 15px/1.5 var(--f-text); box-shadow: var(--rams-shadow-2); pointer-events: auto; transition: left .3s cubic-bezier(.22, 1, .36, 1), top .3s cubic-bezier(.22, 1, .36, 1); }
.tut__bubble p { margin: 0; }
.tut__bubble b { font-weight: 600; color: #ff8a5c; }
.tut__pre, .tut__note { font-size: 12px; font-weight: 400; color: rgba(241, 239, 233, .62); }
.tut__pre { margin-bottom: 6px !important; }
.tut__note { margin-top: 8px !important; }
.tut__note b { font-weight: 500; }
.tut__body { margin-top: 4px !important; font-size: 13px; font-weight: 400; color: rgba(241, 239, 233, .8); }
.tut__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tut__chips button { height: 28px; padding: 0 12px; border: 1px solid rgba(241, 239, 233, .38); border-radius: 999px; background: transparent; color: inherit; font: 500 13px/1 var(--f-text); cursor: pointer; }
.tut__chips button:hover { border-color: #f1efe9; background: rgba(241, 239, 233, .1); }
.tut__bubble.is-shake { animation: tut-shake .3s linear; }
@keyframes tut-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.tut__top { position: fixed; top: 6px; right: 40px; height: 22px; display: flex; align-items: center; gap: 14px; pointer-events: auto; color: #f1efe9; }
.tut__dots { display: flex; gap: 6px; }
.tut__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(241, 239, 233, .3); }
.tut__dots i.is-done { background: #f1efe9; }
.tut__dots i.is-on { background: var(--rams-orange); }
.tut__skip { padding: 0; border: 0; background: none; color: inherit; font: 500 12px/1 var(--f-text); letter-spacing: .02em; cursor: pointer; opacity: .8; }
.tut__skip:hover { opacity: 1; text-decoration: underline; }
.tut__tip { z-index: 75; }
.tut-suggest { box-shadow: 0 0 0 2px var(--rams-orange) !important; }
html.tut-grips #grid > .arr-frame.is-tut .arr-grip { opacity: 1; background: var(--rams-orange); }
@media (prefers-reduced-motion: reduce) { .tut__dim, .tut__ring, .tut__bubble { transition: none; } .tut__pulse { animation: none; } }
/* Tools 등록: 끌어다 놓는 동안 타일 선 · 빈 타일 안내 · 이미 있는 도구 깜빡임 · 연결 안 된 도구가 있을 때의 "경로 편집" */
#toolsbox.is-drop { outline: 2px solid var(--rams-orange); outline-offset: -2px; }
#tools .tools__empty { display: block; grid-column: 1 / -1; padding: 10px 0; font-size: var(--fs-meta); color: var(--c-ink-3); list-style: none; }
.tools__empty button { padding: 0; border: 0; background: none; color: var(--c-ink); font: inherit; text-decoration: underline; cursor: pointer; }
#tools .tool.is-blink { animation: tool-blink .3s steps(1, end) 2; }
@keyframes tool-blink { 50% { background: color-mix(in srgb, var(--rams-orange) 22%, transparent); } }
#tools-paths.is-need { box-shadow: inset 0 0 0 1px var(--rams-orange); }

/* Tools 분류 이름 고치기 */
.a-tools .tcat > .label[data-catname] { cursor: text; }
.a-tools .tcat > .label[contenteditable="plaintext-only"] { outline: 0; box-shadow: 0 1px 0 var(--c-ink); text-transform: none; }
/* 좁은 타일(영문 글꼴이 넓어진 배포판): 머리줄 제목이 타일 밖으로 잘리지 않게 — 줄임표 · 자간 줄이기, Tools 머리줄은 개수를 접는다 */
.section__head > .label:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.section__head { gap: 8px; }
@container (max-width: 250px) { .section__head .label { letter-spacing: .04em; } }
@container (max-width: 380px) { .a-tools #t-count { display: none; } }

/* 둥글기 규칙(10/2 최종 점검) — MAIN 의 단추는 모두 알약(대화상자 단추 · 프리셋 · 배치 편집과 같게). 타일 16 · 떠 있는 카드 18 · 둥근 노브 · × 는 원 */
.btn, .btn--sm { border-radius: 999px; }
/* 위 막대 오른쪽 ⋮ — 배치 편집 · 사용법 메뉴(둥근 선 테두리, × 단추와 같은 모양) */
#top-more { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin-left: -14px; padding: 0; border: var(--line) solid var(--c-line); border-radius: 50%; background: transparent; color: var(--c-ink); cursor: pointer; }
#top-more:hover { background: var(--c-panel-2); }
#top-more svg { width: 14px; height: 14px; fill: currentColor; }
#top-more[hidden] { display: none; }

/* 길게 누르기(10/4) — 누르고 있는 동안 0.45초에 걸쳐 주황 테가 차오른다(곧 들린다는 표시) · 들리면 커서 = 쥔 손 */
#tools [data-tool]:active, #desk .di:active, .agenda__list li:active, .plan-pill:active, .pd[data-proj]:active { box-shadow: 0 0 0 2px rgba(223, 79, 36, .5); transition: box-shadow .45s cubic-bezier(.7, 0, 1, 1); }
html.is-lifting, html.is-lifting * { cursor: grabbing !important; }
.pd.is-reordering i { transform: scale(1.35); box-shadow: var(--rams-shadow-1); }

/* 다크(10/4) — 밝은 값이 글자로 박혀 있던 곳만 다크에서 바꾼다(라이트는 그대로) */
html[data-theme="dark"] { --c-block: #3b3a36; }
html[data-theme="dark"] :is(.status-sel, .field input, .field textarea, .field select, .modal__body textarea.preview, .layers-table tr.on td, .ie.is-editing) { background: var(--c-panel-2); }
html[data-theme="dark"] .tag--goal { background: var(--c-block); border-color: var(--c-block); }
html[data-theme="dark"] .date__num { color: var(--c-ink); }
html[data-theme="dark"] .tl__pill .tl__lab { color: var(--c-panel); }   /* 잉크 알약 위 글자 = 바탕색(다크에서 잉크가 밝아진다) */
html[data-theme="dark"] .tl__pill--rest { background: var(--c-panel-2); border-color: var(--c-line); box-shadow: none; }
html[data-theme="dark"] .tl__pill--rest .tl__lab { color: var(--c-ink-2); }
html[data-theme="dark"] .layer--on > span:last-child { color: rgba(32, 32, 30, .7); }

/* ===== Desktop 크게 보기(10/4) — 타일이 화면 가운데 큰 판으로. Dock 위까지만 · 떠 있는 판 그림자 · 약한 떠오름 ===== */
/* 크게 보기 단추 = 위 막대 ⋯ 와 같은 원(24) 안의 펼침 · 접기 화살표 */
.a-desk .desk-max { width: 24px; height: 24px; padding: 0 !important; display: inline-grid; place-items: center; border: var(--line) solid var(--c-line) !important; border-radius: 50% !important; background: transparent; color: var(--c-ink); }
.a-desk .desk-max:hover { background: var(--c-panel-2); border-color: var(--c-ink) !important; }
.desk-max svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.a-desk.is-max { position: fixed; z-index: 60; inset: calc(var(--safe-top) + 56px) 14vw calc(var(--safe-bottom) + 24px); box-shadow: var(--rams-shadow-2); padding: 28px 32px; animation: desk-rise .42s cubic-bezier(.22, 1, .36, 1); }
.a-desk.is-max .desk__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 16px; }
.a-desk.is-max .di { grid-template-columns: 1fr; grid-template-rows: 64px auto; justify-items: center; height: auto; padding: 10px 6px; text-align: center; position: relative; }
.a-desk.is-max .di__n { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
html.desk-maxed #grid > .tile:not(.a-desk) { opacity: .35; transition: opacity .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes desk-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .a-desk.is-max { animation: none; } }

/* ===== Desktop 아이콘(10/4) — Rams 선 아이콘(폴더 · 문서 · 이미지 · 영상 · 소리 · 압축 · 코드), 그 밖은 원래 아이콘 ===== */
.di__g { width: 18px; height: 18px; display: grid; place-items: center; font-style: normal; color: var(--c-ink-2); }
.di__g svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.di__g svg .f { fill: currentColor; stroke: none; }
.di.is-dir .di__g { color: var(--c-ink-3); }
.di__g img { width: 16px; height: 16px; object-fit: contain; }
/* 크게 보기: 아이콘 44 · 이름은 두 줄까지(넘치면 … · 옆 칸으로 넘지 않는다) · 확장자는 이름 아래 한 줄 */
.a-desk.is-max .di__g { width: 48px; height: 48px; }
.a-desk.is-max .di__g svg { width: 44px; height: 44px; stroke-width: 1.1; }
.a-desk.is-max .di__g img { width: 40px; height: 40px; }
.a-desk.is-max .di { grid-template-rows: 52px auto; min-width: 0; }
.a-desk.is-max .di__n { max-width: 100%; white-space: normal; text-overflow: clip; }
.a-desk.is-max .di__e { display: block; margin: 2px 0 0; }

/* Desktop 나누는 선(10/4) — 시스템 | 폴더 | 파일. 한 줄 전체를 가로지른다 */
.di-sep { grid-column: 1 / -1; height: 0; margin: 5px 0; border-top: var(--line) solid var(--c-line); list-style: none; }
.a-desk.is-max .di-sep { margin: 4px 0; }
/* 크게 보기: 타일 크기에 맞춰 둔 줄 높이 · 간격(fitRows)을 풀고 판 전체를 쓴다 */
.a-desk.is-max .desk__grid { height: auto !important; flex: 1 1 auto !important; row-gap: 18px !important; }
/* 시스템 다섯: 작은 타일 = 아이콘만 한 줄(이름은 풍선말) · 크게 보기 = 다른 항목과 같은 칸 */
.di-sys { grid-column: 1 / -1; display: flex; gap: 6px; list-style: none; }
.di-sys .di { grid-template-columns: 18px; width: 30px; justify-content: center; }
.a-desk:not(.is-max) .di-sys .di__n { display: none; }
.a-desk.is-max .di-sys { display: contents; }
.a-desk.is-max .di-sys .di { width: auto; grid-template-columns: 1fr; }

/* Desktop 고른 항목(10/4 · Windows 처럼 누르기 = 고르기) — 옅은 면 */
.di.is-selected { background: var(--c-panel-2); border-radius: 4px; }
.a-desk.is-max .di.is-selected { background: var(--c-panel-2); border-radius: 8px; }

/* Desktop 항목 지우기 ×(10/4) — 파트 점 · 박스와 같은 둥근 선 ×(15), 아이콘 오른쪽 위. 올리거나 고르면 보인다 */
.di { position: relative; }
.a-desk.is-max .di__g { position: relative; }   /* 크게 보기 = 아이콘 오른쪽 위 */
.di__x { top: 50%; right: 2px; margin-top: -8px; z-index: 2; }   /* 작은 타일 = 줄 오른쪽 끝 */
.a-desk.is-max .di__x { margin-top: 0; }
.di:hover .di__x, .di.is-selected .di__x, .di:focus-visible .di__x { opacity: 1; }
.di.is-reordering .di__x, .di__n.is-editing ~ * .di__x { opacity: 0; }
.a-desk.is-max .di__x { top: -4px; right: -6px; width: 18px; height: 18px; }
.di__g .di__x svg { width: 9px; height: 9px; stroke-width: 1.5; }   /* .di__g svg(아이콘 18 · 44)가 × 까지 키우지 않게 */
.a-desk.is-max .di__g .di__x svg { width: 10px; height: 10px; stroke-width: 1.5; }