:root {
  --blue: #316ee8;
  --blue-dark: #2458c5;
  --blue-soft: #edf3ff;
  --ink: #182033;
  --muted: #687386;
  --line: #e3e8f0;
  --surface: #ffffff;
  --page: #f5f7fa;
  --slot-height: 18px;
  --label-width: 58px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: var(--page);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: linear-gradient(180deg, #f7f9fc 0, var(--page) 180px); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-header {
  height: 72px; padding: 0 clamp(18px, 4vw, 52px); display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.96); border-bottom: 1px solid #e7ebf1; box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
.app-header h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.035em; font-weight: 750; }
.header-actions { margin-left: auto; display: flex; gap: 8px; }
.header-button { min-height: 38px; padding: 0 14px; border: 1px solid #d9e0ea; border-radius: 10px; background: #fff; color: #344054; font-size: .86rem; font-weight: 700; box-shadow: 0 1px 2px rgba(16,24,40,.025); transition: .16s ease; }
.header-button:hover { border-color: #a9bce2; background: #f8faff; color: #244e9d; transform: translateY(-1px); }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #3d7bf2, #2864dc); box-shadow: 0 5px 12px rgba(47,111,237,.18); }
.brand-mark svg { width: 21px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }

.app-layout {
  width: min(1480px, 100%); min-height: calc(100vh - 72px); margin: 0 auto; padding: 24px clamp(14px, 3vw, 36px);
  display: grid; grid-template-columns: minmax(520px, 1.75fr) minmax(300px, .8fr); gap: 20px; align-items: start;
}
.panel { background: var(--surface); border: 1px solid #e1e6ee; border-radius: 18px; box-shadow: 0 10px 30px rgba(24, 39, 75, .055), 0 1px 2px rgba(24,39,75,.03); overflow: hidden; }
.panel-header { min-height: 92px; padding: 20px 22px; display: flex; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 6px; color: #778196; font-weight: 700; font-size: .76rem; letter-spacing: .055em; }
.panel h2, .modal h2 { margin: 0; font-size: 1.2rem; line-height: 1.35; letter-spacing: -.03em; font-weight: 750; }
.category-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 13px; color: var(--muted); font-size: .72rem; }
.schedule-header-side { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.category-legend span, .category-badge { display: inline-flex; align-items: center; gap: 5px; }
.category-legend i, .category-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.private { background: #3f7ae0; } .seitai { background: #18a36f; } .slab { background: #8b5bd6; } .family { background: #e8892f; }

.timeline-scroll { height: calc(100vh - 212px); min-height: 540px; overflow: auto; overscroll-behavior: contain; }
.timeline-column-headings { min-height: 34px; display: grid; grid-template-columns: var(--label-width) 1fr 1fr; align-items: center; border-bottom: 1px solid var(--line); background: #f9fafc; color: #43506a; font-size: .72rem; text-align: center; }
.timeline-column-headings strong { padding: 7px 4px; font-weight: 700; }
.timeline-column-headings strong + strong { border-left: 1px solid #d7dce4; }
.timeline { position: relative; height: calc(76 * var(--slot-height)); min-width: 440px; }
.time-labels { position: absolute; left: 0; top: 0; width: var(--label-width); height: 100%; background: #fff; z-index: 3; }
.time-label { position: absolute; right: 12px; transform: translateY(-8px); font-size: .75rem; color: #7b8494; font-variant-numeric: tabular-nums; }
.time-grid { position: absolute; left: var(--label-width); right: 0; top: 0; height: 100%; border-left: 1px solid var(--line); }
.time-grid::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid #d7dce4; }
.grid-line { position: absolute; left: 0; right: 0; border-top: 1px solid #eef1f5; }
.grid-line.hour { border-top-color: #d8dee8; }
.events-layer { position: absolute; inset: 0 0 0 var(--label-width); z-index: 4; pointer-events: none; }
.drop-indicator { position: absolute; left: var(--label-width); right: 0; z-index: 8; height: 2px; background: var(--blue); pointer-events: none; }
.drop-indicator.task-lane { left: calc(50% + var(--label-width) / 2); }
.drop-indicator::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); left: -4px; top: -3px; }

.event-card {
  position: absolute; min-height: 18px; padding: 4px 9px 4px 32px; border: 1px solid #a9c3fa; border-left: 4px solid var(--blue);
  border-radius: 8px; background: #edf3ff; color: #17386f; overflow: hidden; pointer-events: auto; user-select: none; touch-action: none;
  box-shadow: 0 2px 6px rgba(47, 111, 237, .07); transition: opacity .15s, box-shadow .15s, filter .15s;
}
.event-card:hover { box-shadow: 0 7px 18px rgba(47, 111, 237, .15); filter: saturate(1.03); }
.event-card.dragging { opacity: .8; box-shadow: 0 9px 22px rgba(47, 111, 237, .24); z-index: 10; }
.event-card.completed { opacity: .52; filter: saturate(.6); }
.event-card.completed .event-name { text-decoration: line-through; }
.event-card[data-category="private"] { --cat: #3f7ae0; --cat-bg: #edf3ff; --cat-border: #abc5f5; --cat-text: #17386f; }
.event-card[data-category="seitai"] { --cat: #18a36f; --cat-bg: #eaf8f2; --cat-border: #9bd8c2; --cat-text: #14563e; }
.event-card[data-category="slab"] { --cat: #8b5bd6; --cat-bg: #f3edfc; --cat-border: #cbb4ed; --cat-text: #55318a; }
.event-card[data-category="family"] { --cat: #e8892f; --cat-bg: #fff3e8; --cat-border: #f2c497; --cat-text: #7a4213; }
.event-card[data-category] { border-color: var(--cat-border); border-left-color: var(--cat); background: var(--cat-bg); color: var(--cat-text); }
.event-check-hit { position: absolute; left: 2px; top: 0; z-index: 4; width: 29px; height: 100%; min-height: 18px; display: grid; place-items: center; cursor: pointer; }
.event-check-hit:hover { background: rgba(255,255,255,.3); }
.event-check { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.event-content { min-width: 0; }
.event-name { font-size: .82rem; line-height: 1.15; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-note { margin-top: 3px; font-size: .7rem; line-height: 1.2; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-card.compact { padding-top: 1px; padding-bottom: 1px; }
.event-card.compact { padding-left: 30px; }
.event-card.compact .event-check { width: 15px; height: 15px; }
.event-card.compact .event-content { display: flex; align-items: center; gap: 7px; }
.event-card.compact .event-name { flex: 0 1 auto; font-size: .76rem; }
.event-card.compact .card-note { min-width: 0; margin: 0; font-size: .66rem; }
.resize-handle { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize; z-index: 2; }
.resize-handle.top { top: 0; }
.resize-handle.bottom { bottom: 0; }
.resize-handle::after { content: ""; position: absolute; left: 50%; width: 22px; height: 2px; border-radius: 2px; background: rgba(47,111,237,.35); transform: translateX(-50%); }
.resize-handle.top::after { top: 2px; }
.resize-handle.bottom::after { bottom: 2px; }

.tasks-panel { position: sticky; top: 20px; }
.tasks-panel.drop-target { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,111,237,.13); }
.tasks-header { align-items: center; }
.create-button { min-height: 40px; padding: 0 15px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #3978ee, var(--blue)); color: #fff; font-weight: 700; white-space: nowrap; box-shadow: 0 5px 12px rgba(47,111,237,.18); transition: .16s ease; }
.create-button:hover { background: linear-gradient(180deg, #326fdf, var(--blue-dark)); transform: translateY(-1px); box-shadow: 0 7px 16px rgba(47,111,237,.22); }
.drag-hint { margin: 0; padding: 12px 22px; color: #707b8f; background: #fafbfc; border-bottom: 1px solid var(--line); font-size: .8rem; }
.task-list { padding: 7px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-height: 220px; overflow: auto; overscroll-behavior: contain; }
.unscheduled-card { --task-color: #3f7ae0; --task-bg: #f4f7ff; --task-border: #cbd9f5; min-width: 0; padding: 5px 7px; display: flex; gap: 7px; align-items: center; border: 1px solid var(--task-border); border-left: 3px solid var(--task-color); border-radius: 8px; background: var(--task-bg); cursor: grab; touch-action: none; user-select: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.unscheduled-card[data-category="private"] { --task-color: #3f7ae0; --task-bg: #f3f7ff; --task-border: #bcd0f5; }
.unscheduled-card[data-category="seitai"] { --task-color: #18a36f; --task-bg: #effaf5; --task-border: #b3dfcf; }
.unscheduled-card[data-category="slab"] { --task-color: #8b5bd6; --task-bg: #f7f2fc; --task-border: #d5c2ef; }
.unscheduled-card[data-category="family"] { --task-color: #e8892f; --task-bg: #fff7ef; --task-border: #f2d0aa; }
.unscheduled-card:hover { transform: translateY(-1px); border-color: #aebfe1; box-shadow: 0 6px 15px rgba(24,39,75,.08); }
.unscheduled-card.dragging { opacity: .5; cursor: grabbing; }
.unscheduled-card.reorder-target { border-color: var(--blue); box-shadow: 0 -2px 0 var(--blue); }
.unscheduled-card.completed { opacity: .55; }
.unscheduled-card.completed .unscheduled-name { text-decoration: line-through; }
.task-check-wrap { min-width: 22px; min-height: 26px; display: grid; place-items: center; }
.task-check { width: 17px; height: 17px; margin: 0; accent-color: var(--task-color); cursor: pointer; }
.unscheduled-main { min-width: 0; flex: 1; display: grid; gap: 1px; }
.task-top { min-width: 0; display: flex; align-items: center; gap: 5px; }
.unscheduled-name { min-width: 0; flex: 1; font-size: .76rem; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-note, .manager-note { color: var(--muted); font-size: .62rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-badge { min-width: 0; width: fit-content; max-width: 45%; color: var(--muted); font-size: .61rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duration { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.empty-tasks { align-self: start; padding: 32px 16px; text-align: center; color: var(--muted); border: 1px dashed #cbd2dc; border-radius: 11px; font-size: .9rem; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; padding: 22px; display: grid; place-items: center; background: rgba(18, 26, 41, .46); backdrop-filter: blur(4px); }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(620px, 100%); max-height: calc(100vh - 44px); overflow: auto; padding: 24px; background: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; box-shadow: 0 26px 80px rgba(15,23,42,.24); }
.modal-heading { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-start; }
.close-button { width: 36px; height: 36px; border: 0; border-radius: 9px; background: #f2f4f7; color: #475467; font-size: 1.4rem; }
.field { display: grid; gap: 7px; color: #475467; font-size: .82rem; font-weight: 700; }
.full-field { margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.field input, .field textarea, .field select, .add-check-row input { width: 100%; border: 1px solid #d7dce5; border-radius: 9px; background: #fff; color: var(--ink); padding: 10px 11px; outline: none; }
.field input:focus, .field textarea:focus, .field select:focus, .add-check-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,111,237,.1); }
.field textarea { resize: vertical; min-height: 78px; }
.checklist-field { margin: 0 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; }
.checklist-field legend { padding: 0 5px; font-size: .82rem; font-weight: 700; color: #475467; }
.check-row { display: flex; align-items: center; gap: 9px; min-height: 32px; font-size: .9rem; }
.check-row input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
.check-row label.checked { color: #98a2b3; text-decoration: line-through; }
.check-remove { margin-left: auto; border: 0; background: transparent; color: #98a2b3; }
.add-check-row { display: flex; gap: 8px; margin-top: 9px; }
.add-check-row button { border: 1px solid #c8d6f2; border-radius: 8px; padding: 0 14px; background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; }
.template-check { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.template-check input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
.modal-actions { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.modal-actions > div { display: flex; gap: 8px; }
.delete-button, .cancel-button, .save-button { min-height: 40px; padding: 0 16px; border-radius: 9px; font-weight: 700; }
.delete-button { border: 0; background: #fff1f0; color: #c7372f; }
.cancel-button { border: 1px solid #d7dce5; background: #fff; color: #475467; }
.save-button { border: 0; background: var(--blue); color: #fff; }
.manager-modal { width: min(680px, 100%); }
.manager-help { margin: -8px 0 16px; color: var(--muted); font-size: .86rem; }
.template-toolbar { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.template-tabs { flex: 1; }
.two-columns { grid-template-columns: 1fr 1fr; }
.repeat-badge { padding: 2px 7px; border-radius: 12px; background: #f0f3f8; color: #475467; font-weight: 700; }
.daily-check { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: .88rem; }
.weekday-checks, .weekday-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.weekday-checks label { display: grid; place-items: center; gap: 5px; padding: 8px 2px; border: 1px solid var(--line); border-radius: 8px; font-size: .78rem; }
.weekday-picker { margin: 18px 0; }
.weekday-picker button { aspect-ratio: 1; border: 1px solid #d7dce5; border-radius: 50%; background: #fff; color: #475467; font-weight: 700; }
.weekday-picker button.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.weekday-preview { min-height: 100px; margin-bottom: 18px; display: grid; gap: 8px; }
.preview-row { padding: 11px 12px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 9px; font-size: .84rem; }
.preview-row > span { display: flex; align-items: center; gap: 8px; }
.preview-actions { justify-content: flex-end; }
.edit-day-template { min-height: 30px; padding: 0 9px; border: 1px solid #c8d6f2; border-radius: 7px; background: var(--blue-soft); color: var(--blue-dark); font-size: .75rem; font-weight: 700; }
.wide-button { width: 100%; min-height: 44px; }
.field-help { margin: 10px 0 0; color: var(--muted); font-size: .76rem; }
.manager-list { display: grid; gap: 9px; }
.manager-item { min-height: 68px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 11px; }
.manager-item-info { min-width: 0; flex: 1; display: grid; gap: 4px; }
.manager-item-title { font-weight: 700; font-size: .94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manager-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: .78rem; }
.manager-item-actions { display: flex; gap: 7px; }
.use-template, .item-delete { min-height: 34px; padding: 0 11px; border-radius: 8px; font-size: .8rem; font-weight: 700; }
.use-template { border: 0; background: var(--blue); color: #fff; }
.item-delete { border: 0; background: #fff1f0; color: #c7372f; }
.status-tabs { display: flex; border-bottom: 1px solid var(--line); }
.status-tab { flex: 1; padding: 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 700; }
.status-tab.active { border-bottom-color: var(--blue); color: var(--blue); }
.status-tab span { display: inline-grid; place-items: center; min-width: 23px; height: 23px; margin-left: 5px; border-radius: 12px; background: #eef1f5; color: #475467; font-size: .72rem; }
.status-toolbar { min-height: 52px; display: flex; justify-content: flex-end; align-items: center; }
.bulk-delete { border: 0; background: transparent; color: #c7372f; font-size: .82rem; font-weight: 700; }
.empty-manager { padding: 38px 18px; text-align: center; border: 1px dashed #ccd3de; border-radius: 11px; color: var(--muted); font-size: .9rem; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; padding: 11px 16px; border-radius: 9px; background: #172033; color: #fff; font-size: .86rem; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 800px) {
  body { height: 100dvh; overflow: hidden; }
  .app-header { height: 62px; padding: 0 16px; }
  .app-header h1 { font-size: 1.1rem; }
  .header-button { padding: 0 10px; font-size: .78rem; }
  .brand-mark { width: 32px; height: 32px; }
  .app-layout { height: calc(100dvh - 62px); min-height: 0; padding: 10px 12px; grid-template-columns: 1fr; grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); gap: 10px; align-items: stretch; overflow: hidden; }
  .schedule-panel, .tasks-panel { min-height: 0; height: 100%; display: flex; flex-direction: column; }
  .tasks-panel { position: static; }
  .timeline-scroll { height: auto; min-height: 0; flex: 1; }
  .panel-header { padding: 16px; min-height: 84px; }
  .schedule-header { align-items: flex-start; }
  .schedule-header-side { align-items: flex-end; flex-direction: column; gap: 10px; }
  .category-legend { max-width: 230px; }
  .panel h2 { font-size: 1.05rem; }
  .task-list { min-height: 0; flex: 1; }
}

@media (max-width: 480px) {
  .panel { border-radius: 12px; }
  .app-header { flex-wrap: wrap; height: auto; min-height: 62px; padding-top: 10px; padding-bottom: 10px; }
  .app-layout { height: calc(100dvh - 104px); padding: 7px; gap: 7px; }
  .header-actions { width: 100%; }
  .header-button { flex: 1; }
  .schedule-header { display: grid; }
  .schedule-header-side { align-items: stretch; }
  .schedule-header-side .create-button { width: 100%; }
  .category-legend { max-width: none; justify-content: flex-start; }
  .tasks-header { align-items: flex-start; }
  .tasks-header h2 { font-size: .98rem; }
  .create-button { padding: 0 11px; font-size: .82rem; }
  .panel-header { min-height: 62px; padding: 9px 11px; gap: 8px; }
  .eyebrow { margin-bottom: 2px; font-size: .68rem; }
  .schedule-header-side { gap: 5px; }
  .category-legend { gap: 4px 8px; font-size: .62rem; }
  .schedule-header-side .create-button { min-height: 32px; }
  .drag-hint { padding: 6px 9px; font-size: .66rem; }
  .task-list { padding: 4px; gap: 3px; }
  .unscheduled-card { padding: 3px 4px; gap: 4px; }
  .unscheduled-name { font-size: .71rem; }
  .task-note { font-size: .58rem; }
  .category-badge { font-size: .56rem; }
  .timeline { min-width: 390px; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100vh - 20px); padding: 18px; border-radius: 13px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field:first-child, .form-grid .field:nth-child(2) { grid-column: auto; }
  .manager-item { align-items: flex-start; }
  .manager-item-actions { flex-direction: column; }
  .template-toolbar { align-items: stretch; flex-direction: column; }
  .weekday-picker { gap: 4px; }
  .modal-actions { align-items: stretch; }
  .modal-actions > div { flex: 1; }
  .cancel-button, .save-button { flex: 1; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}