.plan-toolbar { padding-bottom: 16px; }
/* Side panel on project pages: a fixed column along the whole right edge (top bar to bottom); the
   main column, top bar and page header shrink beside it (user: "위아래 페이지 전부 차지"). */
/* Half of the main area (user: "좌우로 페이지가 나눠지듯"), never narrower than 440px. */
:root { --plan-side-width: max(440px, calc((100vw - var(--rail)) / 2)); }
.main.is-plan-animating { transition: padding-right 260ms cubic-bezier(.2, .7, .2, 1); }
body.has-plan-side .main { padding-right: var(--plan-side-width); }
.plan-side { position: fixed; top: 0; right: 0; bottom: 0; width: var(--plan-side-width); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border-left: 1px solid var(--line); background: var(--surface); padding: var(--space-3) var(--space-4) var(--space-5); z-index: 5; transform: translateX(100%); }
.plan-side.is-animating { transition: transform 260ms cubic-bezier(.2, .7, .2, 1); }
.plan-side.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .main, .plan-side { transition: none; } }
.page.has-plan-side { max-width: calc(var(--page-width) + 2 * var(--page-inset)); }
.plan-side-loading { padding: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
/* Panel chrome: a slim header with the title, a link to the full page and a close button. */
.plan-side-head { position: sticky; top: calc(-1 * var(--space-3)); z-index: 4; display: flex; align-items: center; gap: var(--space-2); min-height: 32px; margin: calc(-1 * var(--space-3)) 0 var(--space-2); padding: var(--space-2) 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.plan-side-title { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
.plan-side-title .icon { width: 16px; height: 16px; color: var(--accent); }
/* 사이드뷰 content switch (주간 계획 / 오늘), styled like the window switch. */
.side-view-switch { display: inline-flex; flex: 1; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 280px; }
.side-view-option { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 var(--space-2); border-radius: calc(var(--radius) - 2px); font-size: var(--text-xs); line-height: 22px; color: var(--secondary); white-space: nowrap; }
.side-view-option .icon { width: 14px; height: 14px; }
.side-view-option:hover { color: var(--ink); background: var(--subtle); }
.side-view-option[aria-pressed="true"] { background: var(--selected); color: var(--accent); font-weight: 600; }
/* Width handle on the panel's left edge (user: "좌우로 크기 조절"): a thin strip that lights up. */
.plan-side-resizer { position: fixed; top: 0; bottom: 0; left: calc(100vw - var(--plan-side-width) - 3px); width: 7px; cursor: col-resize; z-index: 7; touch-action: none; }
.plan-side-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 3px; border-radius: 2px; background: transparent; transition: background var(--fast); }
.plan-side-resizer:hover::after, .plan-side-resizer:focus-visible::after, body.is-plan-resizing .plan-side-resizer::after { background: var(--accent); }
.plan-side-resizer:focus-visible { outline: none; }
body.is-plan-resizing { cursor: col-resize; user-select: none; }
body.is-plan-resizing .main, body.is-plan-resizing .plan-side { transition: none !important; }
body.is-plan-resizing iframe { pointer-events: none; }
/* 오늘 inside the panel: the usual rows, a little tighter; the edit pencil is dropped and ⋯ moves in. */
.side-today-toolbar { align-items: center; }
.side-today-toolbar .calendar-period { gap: var(--space-2); }
.side-today-count { font-size: var(--text-xs); color: var(--muted); }
.side-today-add { margin-left: auto; }
.side-today-add .icon { width: 16px; height: 16px; }
.side-today .section-heading { margin-right: calc(var(--task-control) + 4px); }
.side-today .task-row { margin-right: calc(var(--task-control) + 4px); }
.side-today .task-edit { display: none; }
.side-today .task-more-button { right: calc(-1 * var(--task-control) - 4px); }
.side-today .group-body { min-height: 40px; }
.side-today .group-heading { margin-top: var(--space-3); }
.side-today .calendar-arrows { margin-left: var(--space-1); }
.side-today .empty-notice { padding: var(--space-4) 0; }
/* A recurring task drawn on a day other than its own date (every occurrence in the window). */
.plan-task.is-projected { opacity: .78; }
.plan-task.is-bold .plan-task-title { font-weight: 700; }
.plan-side-open { font-size: var(--text-xs); color: var(--secondary); padding: 2px 6px; border-radius: var(--radius-sm); }
.plan-side-open:hover { color: var(--accent); background: var(--subtle); }
.plan-side-close .icon { width: 16px; height: 16px; }
/* Inside the panel: three equal day columns, quieter headers, a hover cue on empty cells. */
.plan-side .plan-grid { table-layout: fixed; }
.plan-side .plan-day-head { font-size: var(--text-xs); letter-spacing: .02em; }
.plan-side .plan-day-head .plan-day-date { min-width: 20px; height: 20px; }
.plan-side .plan-tasks-label, .plan-side .plan-time { font-size: 10px; }
.plan-side .plan-cell:not([class*="color-"]):hover { background: var(--subtle); }
.plan-side .plan-scroll { margin-top: var(--space-1); }
.plan-side .plan-status { margin-left: auto; }
/* 1일 / 3일 window switch in the panel, styled like the Gantt scale switch. */
.plan-window { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.plan-window-option { min-width: 36px; padding: 0 var(--space-2); border-radius: calc(var(--radius) - 2px); text-align: center; font-size: var(--text-xs); line-height: 22px; color: var(--secondary); }
.plan-window-option:hover { color: var(--ink); background: var(--subtle); }
.plan-window-option.is-active { background: var(--selected); color: var(--accent); font-weight: 600; }
/* A task dragged over a plan cell: the cell lights up; dropping sets the date (and the hour). */
.plan-cell.drop-into, .plan-tasks-cell.drop-into { box-shadow: inset 0 0 0 2px var(--accent); background: var(--selected); }
.plan-side .plan-toolbar { flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-3); }
.plan-side .calendar-period h2 { font-size: var(--text-base); }
/* Inside the panel the week fits without scrolling and today's column gets the most room. */
.plan-side .plan-grid { min-width: 0; width: 100%; font-size: var(--text-xs); } /* fits the panel: nothing shifts sideways */
.plan-side .plan-time-head, .plan-side .plan-time { width: 44px; }
.plan-side .plan-time { padding-right: 6px; }
.plan-side .plan-day-head { padding: 8px 4px; }
.plan-side .plan-input { font-size: 11px; }
/* Every hour row is the same height (user); longer notes scroll inside their cell. */
.plan-grid tbody tr:not(.plan-tasks-row) { height: var(--plan-row-height, 46px); }
.plan-grid tbody tr:not(.plan-tasks-row) .plan-cell { height: var(--plan-row-height, 46px); vertical-align: top; }
.plan-grid tbody tr:not(.plan-tasks-row) .plan-input { height: 100%; min-height: 0; max-height: var(--plan-row-height, 46px); overflow-y: auto; resize: none; }
/* The panel itself scrolls, so the day header can stay pinned while the hours scroll under it. */
.plan-side .plan-scroll { overflow: visible; border: 0; border-radius: 0; }
.plan-side .plan-grid thead th { position: sticky; top: 37px; z-index: 3; } /* below the 49px panel head (the panel pads 12px) */
.plan-side .plan-grid thead .plan-time-head { z-index: 4; }
.header-plan-side[aria-pressed="true"] { color: var(--accent); background: var(--selected); }
/* With the panel open the toast centres over the list column, not over the panel's first rows. */
body.has-plan-side .flash { left: calc(var(--rail) + (100vw - var(--rail) - var(--plan-side-width)) / 2); max-width: calc(100vw - var(--rail) - var(--plan-side-width) - 48px); }
@media (max-width: 1100px) { body.has-plan-side .main { padding-right: 0; } .plan-side { position: static; width: auto; border-left: 0; border-top: 1px solid var(--line); margin-top: var(--space-4); transform: none; transition: none; } .plan-side-resizer { display: none; } }
.plan-current-tag { font-size: var(--text-xs); color: var(--accent-hover); background: var(--selected); padding: 2px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.plan-palette { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.plan-swatch { width: var(--control); height: var(--control); border: 1px solid var(--border); border-radius: var(--radius); padding: 0; display: grid; place-items: center; background: var(--surface); color: var(--secondary); cursor: pointer; }
.plan-swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink); }
.plan-swatch .icon { width: var(--icon-sm); height: var(--icon-sm); }
.plan-hint { font-size: var(--text-xs); color: var(--secondary); }
.plan-palette-help { color: var(--muted); }
[data-paint-hint]:not([hidden]) ~ .plan-palette-help { display: none; }
.plan-status { font-size: var(--text-xs); color: var(--muted); min-height: var(--control); display: flex; align-items: center; white-space: nowrap; }
.plan-status[data-alert] { color: var(--danger); white-space: normal; text-align: right; }
.plan-copy { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--secondary); }
.plan-copy .button { font-size: var(--text-sm); }
.plan-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.plan-grid { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--text-sm); }
/* Grid lines a step darker than the page rules (user: 선들 조금 더 진하게); block starts stay stronger. */
.plan-grid { --plan-line: var(--border); --plan-line-strong: color-mix(in srgb, var(--border) 65%, var(--muted)); }
.plan-grid th, .plan-grid td { border-right: 1px solid var(--plan-line); border-bottom: 1px solid var(--plan-line); vertical-align: top; }
.plan-grid tr > :last-child { border-right: 0; }
.plan-grid tbody tr:last-child > * { border-bottom: 0; }
.plan-time-head, .plan-time { width: 64px; position: sticky; left: 0; z-index: 2; background: var(--sidebar); }
.plan-time-head { padding: 10px 0; text-align: center; color: var(--muted); }
.plan-time-head .icon { width: var(--icon-sm); height: var(--icon-sm); }
.plan-day-head { padding: 10px 8px; text-align: center; font-weight: 600; color: var(--secondary); background: var(--sidebar); }
.plan-day-head.weekday-5 .plan-day-name { color: var(--blue); }
.plan-day-head.weekday-6 .plan-day-name { color: var(--coral); }
.plan-day-date { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; border-radius: 50%; font-weight: 400; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-day-head.is-today .plan-day-date { background: var(--accent); color: var(--on-accent); }
.plan-time { padding: 9px 10px 0 0; text-align: right; font-weight: 400; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-block-start > th, .plan-block-start > td { border-top: 1px solid var(--plan-line-strong); }
.plan-cell { position: relative; padding: 0; background: var(--surface); }
/* 매주 반복: the ↻ in a cell's corner shows on hover and stays lit for routine blocks. */
.plan-routine-toggle { position: absolute; top: 1px; right: 1px; z-index: 1; width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); opacity: 0; cursor: pointer; transition: opacity var(--fast), color var(--fast); }
.plan-routine-toggle .icon { width: 12px; height: 12px; }
.plan-cell:hover .plan-routine-toggle, .plan-cell:focus-within .plan-routine-toggle, .plan-routine-toggle:focus-visible { opacity: 1; }
.plan-routine-toggle:hover { background: var(--line); color: var(--ink); }
/* Repeat marks stay out of sight (user: "주간 계획에 반복표시 안보이게"): a routine cell shows its lit ↻
   only while hovered or focused, like the toggle of any other cell. */
.plan-routine-toggle[aria-pressed="true"] { color: var(--accent); }
.plan-grid[data-painting] .plan-routine-toggle { pointer-events: none; }
.plan-cell.is-today { background: var(--surface); } /* today is marked by its date badge only (user) */
.plan-cell.is-selected { box-shadow: inset 0 0 0 2px var(--accent); }
/* Current time: a thin accent line with a dot on the left edge of today's cell. */
.plan-now { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--accent); z-index: 2; pointer-events: none; }
.plan-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.plan-cell.is-selected .plan-input { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.plan-input { display: block; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; margin: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--text-sm); line-height: 1.5; resize: none; overflow: hidden; overflow-wrap: anywhere; }
.plan-input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.plan-cell[data-state="saving"] .plan-input { color: var(--secondary); }
.plan-cell[data-state="error"] { box-shadow: inset 0 0 0 1px var(--danger); }
.plan-grid[data-painting] .plan-cell { cursor: cell; }
.plan-grid[data-painting] .plan-input { pointer-events: none; }
.plan-cell.color-blue, .plan-swatch.color-blue { background: var(--plan-blue); }
.plan-cell.color-coral, .plan-swatch.color-coral { background: var(--plan-coral); }
.plan-cell.color-green, .plan-swatch.color-green { background: var(--plan-green); }
.plan-cell.color-yellow, .plan-swatch.color-yellow { background: var(--plan-yellow); }
.plan-cell.color-purple, .plan-swatch.color-purple { background: var(--plan-purple); }
.plan-cell.color-gray, .plan-swatch.color-gray { background: var(--plan-gray); }
.plan-tasks-label { padding-top: 12px; }
.plan-tasks-row > th, .plan-tasks-row > td { border-bottom-color: var(--plan-line-strong); }
.plan-tasks-cell { padding: 6px 6px 2px; background: var(--surface); }
.plan-tasks-cell.is-today { background: var(--surface); }
/* Task blocks are one line each (user: 두꺼워져서 한 줄로); the click opens the editor with the rest. */
.plan-tasks-stack { display: flex; flex-direction: column; gap: 2px; max-height: 168px; overflow-y: auto; overscroll-behavior: contain; }
.plan-task { display: flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 6px; border-left: 2px solid var(--project-color, var(--gray)); border-radius: var(--radius-sm); background: var(--sidebar); color: var(--ink); font-size: var(--text-xs); line-height: 1.4; white-space: nowrap; overflow: hidden; }
.plan-task:hover { background: var(--line); }
.plan-task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plan-task-time { flex: none; color: var(--secondary); font-variant-numeric: tabular-nums; }
.plan-cell .plan-task { margin: 2px 4px 0; }
/* An hour cell shows one timed task and "+N" for the rest, so rows keep their height. */
.plan-cell-tasks { display: flex; align-items: center; gap: 4px; height: 22px; overflow: hidden; padding-right: 22px; } /* leaves the corner ↻ free */
.plan-grid:not(.is-tasks-hidden) tbody tr:not(.plan-tasks-row) .plan-cell:has(.plan-cell-tasks) .plan-input { height: calc(var(--plan-row-height, 46px) - 23px); max-height: calc(var(--plan-row-height, 46px) - 23px); }
/* 할 일 blocks switched off: the 할 일 row and the timed blocks disappear, notes take the whole cell. */
.plan-grid.is-tasks-hidden .plan-tasks-row, .plan-grid.is-tasks-hidden .plan-cell-tasks { display: none; }
.plan-tasks-toggle { gap: 4px; color: var(--secondary); }
.plan-tasks-toggle .icon { width: 16px; height: 16px; }
.plan-tasks-toggle > span { display: inline-flex; align-items: center; gap: 4px; }
.plan-tasks-toggle[aria-pressed="true"] .plan-tasks-toggle-off, .plan-tasks-toggle[aria-pressed="false"] .plan-tasks-toggle-on { display: none; }
.plan-tasks-toggle[aria-pressed="false"] { color: var(--accent); }
.plan-cell-tasks .plan-task { flex: 1; min-width: 0; }
.plan-more { flex: none; font-size: 10px; color: var(--secondary); padding: 0 5px; border: 0; border-radius: var(--radius-chip); background: var(--line); cursor: pointer; line-height: 16px; }
.plan-more:hover, .plan-more[aria-expanded="true"] { background: var(--border); color: var(--ink); }
.plan-cell-more { position: absolute; left: 4px; right: 4px; top: 24px; z-index: 6; display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.plan-routine-selection { gap: 4px; }
.plan-routine-selection[aria-pressed="true"] { color: var(--accent); }
.plan-grid[data-painting] .plan-task { pointer-events: none; }
.plan-task-project { display: none; }
.plan-task-add { width: var(--chip-height); height: var(--chip-height); opacity: 0; }
.plan-task-add .icon { width: 15px; height: 15px; }
.plan-tasks-cell:hover .plan-task-add, .plan-tasks-cell:focus-within .plan-task-add { opacity: 1; }