:root {
  --attendance-navy: #102c40;
  --attendance-green: #315d54;
  --attendance-gold: #b89a62;
  --attendance-paper: #f3f5f3;
  --attendance-line: #d8dedc;
  --attendance-muted: #66737a;
  --attendance-white: #fff;
  --attendance-danger: #a14646;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.attendance-body {
  min-height: 100vh;
  color: #17232b;
  background: var(--attendance-paper);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  line-height: 1.7;
}

.attendance-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px max(24px, calc((100vw - 1320px) / 2));
  color: var(--attendance-navy);
  border-bottom: 1px solid var(--attendance-line);
  background: rgba(255, 255, 255, 0.97);
}

.attendance-brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1.4; }
.attendance-brand small { color: var(--attendance-muted); font-size: .66rem; }
.attendance-brand strong { font-family: "Noto Serif JP", serif; font-size: 1.08rem; letter-spacing: .06em; }
.attendance-header nav { display: flex; align-items: center; gap: 18px; }
.attendance-header nav a, .attendance-header nav button { color: var(--attendance-navy); border: 0; background: transparent; font-size: .78rem; font-weight: 700; text-decoration: none; }

.attendance-kicker { margin: 0 0 8px; color: var(--attendance-green); font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.attendance-message { min-height: 1.7em; margin: 10px 0 0; color: var(--attendance-danger); font-size: .82rem; }
.attendance-primary { color: #fff !important; border-color: var(--attendance-green) !important; background: var(--attendance-green) !important; }

.attendance-login { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 44px 20px; }
.attendance-login-card { width: min(520px, 100%); padding: 44px; border: 1px solid var(--attendance-line); background: #fff; box-shadow: 0 30px 80px rgba(7, 27, 42, .12); }
.attendance-login-card h1 { margin: 0; color: var(--attendance-navy); font-family: "Noto Serif JP", serif; font-size: clamp(2.1rem, 7vw, 3.4rem); }
.attendance-login-card > p:not(.attendance-kicker) { color: var(--attendance-muted); }
.attendance-login-card form { display: grid; gap: 10px; margin-top: 28px; }
.attendance-login-card label { font-size: .82rem; font-weight: 700; }
.attendance-login-card input { min-height: 48px; padding: 10px 12px; border: 1px solid var(--attendance-line); }
.attendance-login-card button { min-height: 48px; color: #fff; border: 0; background: linear-gradient(135deg, var(--attendance-navy), var(--attendance-green)); font-weight: 700; }

.attendance-app { width: min(1440px, 100%); min-height: calc(100vh - 76px); margin: 0 auto; display: grid; grid-template-columns: 350px minmax(0, 1fr); }
.attendance-sidebar { padding: 30px 22px 60px; border-right: 1px solid var(--attendance-line); background: #eef1ef; }
.attendance-sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.attendance-sidebar h1 { margin: 0; color: var(--attendance-navy); font-family: "Noto Serif JP", serif; font-size: 1.7rem; }
.attendance-sidebar button, .attendance-editor button { min-height: 40px; padding: 8px 13px; border: 1px solid var(--attendance-line); background: #fff; font-weight: 700; }

.attendance-create { display: grid; gap: 12px; margin: 24px 0; padding: 20px; border: 1px solid var(--attendance-line); background: #fff; }
.attendance-create h2 { margin: 0; color: var(--attendance-navy); font-family: "Noto Serif JP", serif; font-size: 1.15rem; }
.attendance-create label, .attendance-project-form label { display: grid; gap: 5px; color: var(--attendance-muted); font-size: .76rem; font-weight: 700; }
.attendance-create input, .attendance-create select, .attendance-project-form input, .attendance-project-form select, .attendance-project-form textarea, .attendance-add-person input, .attendance-person-row input, .attendance-person-row textarea {
  width: 100%; min-height: 42px; padding: 9px 10px; color: #17232b; border: 1px solid var(--attendance-line); background: #fff;
}
.attendance-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.attendance-create-actions { display: flex; gap: 8px; }

.attendance-project-list { display: grid; gap: 10px; margin-top: 24px; }
.attendance-project-card { width: 100%; padding: 16px; text-align: left; border: 1px solid var(--attendance-line); background: rgba(255,255,255,.86); }
.attendance-project-card.is-active { border-color: var(--attendance-green); box-shadow: inset 4px 0 0 var(--attendance-green); background: #fff; }
.attendance-project-card small { display: block; color: var(--attendance-green); font-size: .68rem; font-weight: 700; }
.attendance-project-card strong { display: block; margin-top: 3px; color: var(--attendance-navy); }
.attendance-project-card span { display: block; margin-top: 5px; color: var(--attendance-muted); font-size: .72rem; }

.attendance-editor { min-width: 0; padding: 38px 42px 80px; background: #fff; }
.attendance-empty-state { min-height: 60vh; display: grid; place-content: center; text-align: center; color: var(--attendance-muted); }
.attendance-empty-state h2 { margin: 0; color: var(--attendance-navy); font-family: "Noto Serif JP", serif; }
.attendance-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--attendance-line); }
.attendance-editor-head h2 { margin: 0; color: var(--attendance-navy); font-family: "Noto Serif JP", serif; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.attendance-save-state { margin: 0 0 4px; color: var(--attendance-green); font-size: .72rem; font-weight: 700; }
.attendance-save-state.is-saving { color: var(--attendance-gold); }
.attendance-save-state.is-error { color: var(--attendance-danger); }
.attendance-editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.attendance-project-form { display: grid; gap: 14px; margin: 26px 0; padding: 22px; border: 1px solid var(--attendance-line); background: #f8faf9; }
.attendance-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.attendance-project-form textarea { resize: vertical; }

.attendance-public-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 24px; padding: 16px 18px; color: #fff; background: linear-gradient(135deg, var(--attendance-navy), var(--attendance-green)); }
.attendance-public-link small { display: block; color: rgba(255,255,255,.72); }
.attendance-public-link a { color: #fff; font-size: .82rem; word-break: break-all; }

.attendance-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.attendance-count { padding: 16px; border: 1px solid var(--attendance-line); background: #fff; }
.attendance-count small { display: block; color: var(--attendance-muted); font-size: .7rem; font-weight: 700; }
.attendance-count strong { display: block; margin-top: 3px; color: var(--attendance-navy); font-family: "Noto Serif JP", serif; font-size: 1.8rem; }

.attendance-people-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 34px; }
.attendance-people-head h3 { margin: 0; color: var(--attendance-navy); font-family: "Noto Serif JP", serif; font-size: 1.35rem; }
.attendance-people-head p { margin: 3px 0 0; color: var(--attendance-muted); font-size: .75rem; }
.attendance-add-person { display: grid; grid-template-columns: 150px 210px auto; gap: 8px; }

.attendance-person-table { display: grid; gap: 10px; margin-top: 18px; }
.attendance-person-row { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(180px, 1.1fr) 270px minmax(180px, 1.1fr) 42px; gap: 10px; align-items: start; padding: 14px; border: 1px solid var(--attendance-line); background: #fff; box-shadow: 0 8px 22px rgba(7,27,42,.035); }
.attendance-person-main { display: grid; gap: 6px; }
.attendance-person-main input:first-child { color: var(--attendance-navy); font-weight: 700; }
.attendance-person-main input:last-child { min-height: 34px; color: var(--attendance-muted); font-size: .75rem; }
.attendance-status-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.attendance-status-buttons button { min-height: 38px; padding: 6px 8px; font-size: .72rem; }
.attendance-status-buttons button[data-status="attending"].is-active { color: #fff; border-color: #2f6f54; background: #2f6f54; }
.attendance-status-buttons button[data-status="absent"].is-active { color: #fff; border-color: #8e4b4b; background: #8e4b4b; }
.attendance-status-buttons button[data-status="tentative"].is-active { color: #fff; border-color: #9b7438; background: #9b7438; }
.attendance-status-buttons button[data-status="unanswered"].is-active { color: #fff; border-color: #66737a; background: #66737a; }
.attendance-person-row textarea { min-height: 82px; resize: vertical; font-size: .78rem; line-height: 1.5; }
.attendance-note-wrap { display: grid; gap: 4px; }
.attendance-note-wrap small { color: var(--attendance-muted); font-size: .65rem; font-weight: 700; }
.attendance-delete-person { width: 42px; min-height: 42px !important; padding: 0 !important; color: var(--attendance-danger); }

.attendance-view-main { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 90px; }
.attendance-public { background: #fff; box-shadow: 0 28px 80px rgba(7,27,42,.1); }
.attendance-public-hero { padding: 42px; color: #fff; background: linear-gradient(135deg, #102c40, #315d54); }
.attendance-public-hero h1 { margin: 0; font-family: "Noto Serif JP", serif; font-size: clamp(2rem, 6vw, 4rem); }
.attendance-event-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 22px 0 0; }
.attendance-event-meta div { display: flex; gap: 7px; }
.attendance-event-meta dt { color: rgba(255,255,255,.62); font-size: .76rem; font-weight: 700; }
.attendance-event-meta dd { margin: 0; }
.attendance-public-note { margin: 20px 0 0; color: rgba(255,255,255,.8); }
.attendance-updated { margin: 18px 0 0; color: rgba(255,255,255,.58); font-size: .7rem; }
.attendance-public-counts { padding: 0 28px; }
.attendance-view-list { padding: 4px 28px 34px; }
.attendance-view-row { display: grid; grid-template-columns: minmax(150px, 1fr) 110px minmax(160px, 1.3fr); gap: 18px; align-items: center; padding: 17px 4px; border-bottom: 1px solid var(--attendance-line); }
.attendance-view-row strong { color: var(--attendance-navy); }
.attendance-view-row small { display: block; color: var(--attendance-muted); }
.attendance-view-status { display: inline-flex; justify-content: center; padding: 6px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.attendance-view-status.is-attending { color: #24543f; background: #e4f1e9; }
.attendance-view-status.is-absent { color: #7c3d3d; background: #f5e6e6; }
.attendance-view-status.is-tentative { color: #7a5926; background: #f5eddc; }
.attendance-view-status.is-unanswered { color: #5e6b71; background: #edf0f1; }
.attendance-view-comment { color: var(--attendance-muted); font-size: .82rem; }

@media (max-width: 1120px) {
  .attendance-app { grid-template-columns: 300px minmax(0,1fr); }
  .attendance-editor { padding-inline: 26px; }
  .attendance-form-grid { grid-template-columns: repeat(2, 1fr); }
  .attendance-person-row { grid-template-columns: minmax(160px,1fr) 230px minmax(180px,1fr) 42px; }
  .attendance-person-row .attendance-note-wrap:nth-of-type(2) { grid-column: 1 / -2; }
}

@media (max-width: 820px) {
  .attendance-header { padding-inline: 16px; }
  .attendance-header nav a { display: none; }
  .attendance-app { display: block; }
  .attendance-sidebar { border-right: 0; border-bottom: 1px solid var(--attendance-line); }
  .attendance-editor { padding: 28px 16px 70px; }
  .attendance-project-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .attendance-editor-head, .attendance-people-head { align-items: stretch; flex-direction: column; }
  .attendance-editor-actions { justify-content: flex-start; }
  .attendance-add-person { grid-template-columns: 1fr; }
  .attendance-person-row { grid-template-columns: 1fr; }
  .attendance-person-row .attendance-note-wrap:nth-of-type(2) { grid-column: auto; }
  .attendance-delete-person { width: auto; }
}

@media (max-width: 560px) {
  .attendance-brand strong { font-size: .9rem; }
  .attendance-brand small { font-size: .52rem; }
  .attendance-login-card { padding: 30px 22px; }
  .attendance-sidebar { padding: 24px 16px 34px; }
  .attendance-sidebar-head { align-items: stretch; flex-direction: column; }
  .attendance-project-list { grid-template-columns: 1fr; }
  .attendance-form-grid, .attendance-form-pair { grid-template-columns: 1fr; }
  .attendance-counts { grid-template-columns: repeat(2, 1fr); }
  .attendance-project-form { padding: 16px; }
  .attendance-public-link { align-items: stretch; flex-direction: column; }
  .attendance-status-buttons { grid-template-columns: repeat(2, 1fr); }
  .attendance-public-hero { padding: 30px 22px; }
  .attendance-public-counts { padding: 0 16px; }
  .attendance-view-list { padding: 0 16px 28px; }
  .attendance-view-row { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .attendance-view-comment { grid-column: 1 / -1; }
}

@media print {
  .attendance-header, .attendance-login, .attendance-editor-actions, .attendance-public-link, .attendance-add-person, .attendance-delete-person { display: none !important; }
  .attendance-body, .attendance-editor, .attendance-public { background: #fff; box-shadow: none; }
}