:root{font-family:system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;color:#243d39;background:#f4f7f3;font-synthesis:none;--green:#147c6c;--line:#dce5df}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;min-height:48px;border:1px solid var(--line);border-radius:12px;background:white;color:inherit;font-weight:700;padding:12px 16px;touch-action:manipulation}button:hover{filter:brightness(.97)}button:disabled{cursor:default;opacity:.48}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #db9d26;outline-offset:3px}[hidden]{display:none!important}.header{max-width:1120px;margin:0 auto;padding:32px 24px;display:flex;align-items:center;gap:14px}.brand-mark{background:var(--green);color:white;border-radius:16px;font-size:36px;width:58px;height:58px;text-align:center;line-height:58px}h1{font-size:26px;letter-spacing:.04em;margin:0}header p{font-size:14px;color:#637c72;margin:5px 0 0}main{max-width:1120px;margin:auto;padding:0 24px;display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 6px 24px #183e2805}h2{font-size:20px;margin:0 0 22px;display:flex;align-items:center;gap:8px}.step{display:inline-grid;place-items:center;border-radius:50%;background:#e9f4ed;color:var(--green);font-size:14px;width:28px;height:28px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.badge{background:#f2f5f0;border-radius:20px;padding:6px 12px;font-size:14px;white-space:nowrap;margin-bottom:22px}summary{cursor:pointer;padding:14px 0;font-weight:600;min-height:48px;font-size:15px}details{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.field{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;font-size:16px}input{width:80px;min-height:48px;border:1px solid #bccfc3;border-radius:10px;padding:8px;background:#fff;color:inherit}.column-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.hint{font-size:13px;line-height:1.7;color:#62766e}.primary{background:var(--green);color:white;border-color:var(--green);width:100%;font-size:17px;min-height:54px}.board-toolbar,.board-footer{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:16px 0}.small{font-size:13px;padding:8px 12px}.small[aria-pressed=true]{background:#e1f3e9;border-color:var(--green);color:var(--green)}.seat-board{position:relative;display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:10px;padding:16px 10px 24px;background:#f4f7f3;border:1px solid #e4ebe3;border-radius:16px;min-height:130px}.seat-column{display:flex;flex-direction:column;gap:12px;min-width:0}.column-label{font-size:11px;text-align:center;color:#76897d;margin-bottom:1px}.seat{position:relative;min-width:0;min-height:58px;width:100%;padding:6px 2px;border:1px solid #d0ded2;border-bottom:4px solid #c8d8ce;border-radius:10px;background:white;font-size:21px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;overflow-wrap:anywhere;user-select:none}.seat .seat-name{font-size:13px;line-height:1.3;max-width:100%}.seat.has-name .seat-number{font-size:11px;color:#5d756a}.seat.assigned{background:#e7eee8}.seat.highlight{background:#fff0c8;border-color:#d6a543;box-shadow:0 0 0 2px #e6b958}.seat-board.editing .seat{touch-action:none;cursor:grab;border-style:dashed;z-index:1}.seat.dragging{z-index:3!important;cursor:grabbing;box-shadow:0 4px 12px #0002}.legend{font-size:11px;color:#667b70;display:flex;align-items:center;gap:5px}.legend i{width:10px;height:10px;border-radius:50%;background:#e6b958;flex-shrink:0}.text-button{border:0;background:transparent;font-size:13px;color:#526d60;padding:10px 6px;text-decoration:underline;text-underline-offset:4px}.mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#eff3ee;border-radius:14px;padding:5px}.mode-tabs button{border:0;background:transparent;font-size:16px}.mode-tabs button[aria-pressed=true]{background:white;color:var(--green);box-shadow:0 2px 6px #183e2812}.intro{font-size:15px;line-height:1.9;text-align:center;margin:26px 0;color:#62766e}.counter{text-align:center;margin:28px 0;color:#62766e;font-size:15px}.counter strong{font-size:34px;color:#243d39;margin:0 5px}.hero-button{font-size:23px;min-height:72px}.hero-button span{float:right}.reset-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:0 10px;border-top:1px solid var(--line);padding-top:14px;margin-top:24px}.notice{font-size:14px;line-height:1.7;color:var(--green);margin-bottom:0}.notice:empty,.error:empty{display:none}.error{font-size:14px;line-height:1.6;color:#a6372b}.input-label{display:flex;justify-content:space-between;font-weight:700;margin:24px 0 10px}.input-label span{font-size:13px;font-weight:400;color:#62766e}textarea{width:100%;border:1px solid #bccfc3;border-radius:12px;padding:14px;line-height:1.7;font-size:18px;resize:vertical;color:inherit}.name-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.name-buttons button{overflow-wrap:anywhere;font-size:18px}.name-buttons small{display:block;font-size:12px;margin-top:4px}.divider{display:flex;align-items:center;gap:12px;font-size:12px;color:#76897d;margin:24px 0 16px}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}footer{text-align:center;font-size:12px;color:#7e8f85;padding:32px 16px}dialog{border:0;border-radius:24px;width:calc(100% - 32px);max-width:420px;max-height:90dvh;padding:0;color:#243d39;box-shadow:0 24px 80px #0003}dialog::backdrop{background:#173a32b3;backdrop-filter:blur(3px)}.dialog-inner{padding:32px 24px;text-align:center;overflow-wrap:anywhere}.dialog-inner h2{display:block;font-size:25px;margin:12px 0}.dialog-inner p{line-height:1.6}.dialog-inner #result-number{font-size:clamp(64px,22vw,100px);font-weight:800;color:var(--green);line-height:1.3;letter-spacing:-.05em}.dialog-inner #result-note{font-size:14px;color:#62766e;margin-bottom:24px}@media(max-width:760px){.header{padding:24px 16px}h1{font-size:23px}main{display:flex;flex-direction:column;padding:0 12px;gap:16px}.card{width:100%;padding:20px 16px;border-radius:18px}.seat-board{gap:8px;padding:14px 8px 22px}.draw-section{margin-bottom:8px}.board-footer{margin-bottom:0}.column-fields{gap:0 12px}}@media(prefers-reduced-motion:no-preference){dialog[open]{animation:appear .18s ease-out}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Keep all seat columns on one row; only the board scrolls below 44px per seat. */
.layout-section{min-width:0}
.board-scroll{max-width:100%;overflow-x:auto;border-radius:16px}
.seat-board{--column-gap:10px;--board-padding:10px;grid-template-columns:repeat(var(--columns),minmax(44px,1fr));gap:var(--column-gap);min-width:calc(var(--columns) * 44px + (var(--columns) - 1) * var(--column-gap) + 2 * var(--board-padding) + 2px)}
.seat{font-size:var(--seat-font,21px)}
.seat .seat-name{font-size:var(--name-font,13px)}
.number-stepper{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.number-stepper button{width:48px;height:48px;padding:0;font-size:22px}
.number-stepper input{appearance:textfield;-moz-appearance:textfield;width:48px;padding:8px 2px;text-align:center;font-size:18px}
.number-stepper input::-webkit-inner-spin-button,.number-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.column-fields{grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.column-fields .field{flex-direction:column;align-items:flex-start;gap:8px}
@media(max-width:760px){.seat-board{--column-gap:8px;--board-padding:8px}}

/* File controls and optional attendance editor reuse the existing card styles. */
.roster-settings{margin-top:18px}.roster-settings input[type=text]{width:100%;min-width:0;max-width:100%;margin-bottom:10px}.roster-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.roster-actions button{flex:1 1 130px}.roster-settings .input-label{display:block}#roster-status,#roster-import-info{overflow-wrap:anywhere}#save-arrangement{margin-top:10px}
.attendance-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0}.person-item{min-width:0}.person-item .person-draw{width:100%;height:100%}.person-item.absent .person-draw{background:#f2f3f2}.person-item .absence-badge{font-size:11px;margin-left:6px;white-space:nowrap}.person-item.attendance-editing{border:1px solid var(--line);border-radius:12px;overflow:hidden}.person-item.attendance-editing .person-draw{border:0;border-radius:0;height:auto;min-height:48px}.person-item label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:6px;font-size:12px;cursor:pointer;border-top:1px solid var(--line)}.person-item input{width:20px;height:20px;min-height:20px;accent-color:var(--green);margin:0;flex-shrink:0}