:root{--ink:#263238;--muted:#6e7776;--line:#dfe5e2;--paper:#fff;--canvas:#f3f5f2;--sage:#2f7466;--sage-dark:#22594f;--sage-soft:#e4f0eb;--red:#a94c4c;--shadow:0 12px 36px rgba(38,50,56,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.muted{color:var(--muted)}.eyebrow{margin:0 0 8px;color:var(--sage);font-size:11px;font-weight:800;letter-spacing:.12em}.brand-mark{width:40px;height:40px;border-radius:13px;background:var(--sage);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 5px 14px rgba(47,116,102,.25)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);padding:34px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}.login-card .brand-mark{margin-bottom:24px}.login-card h1{margin:0;font-size:30px}.login-card form{display:grid;gap:16px;margin-top:26px}.login-card label{font-size:12px;font-weight:700}.login-card input{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:16px}
.topbar{height:72px;padding:0 max(24px,calc((100vw - 1400px)/2));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(255,255,255,.95);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand strong,.brand span{display:block}.brand strong{font-size:15px}.brand span{margin-top:2px;color:var(--muted);font-size:11px}.topbar form{margin:0}.page-wrap{width:min(1400px,calc(100% - 48px));margin:0 auto;padding:38px 0 64px}.hero-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}.hero-row h1{margin:0;font-size:clamp(26px,3vw,38px);letter-spacing:-.04em}.hero-row p:last-child{margin:9px 0 0;font-size:14px}
.ghost-button,.primary-button{border:0;border-radius:10px;font-weight:800}.ghost-button{padding:10px 14px;border:1px solid var(--line);background:#fff}.primary-button{width:100%;padding:13px;color:#fff;background:var(--sage);box-shadow:0 6px 14px rgba(47,116,102,.2)}.primary-button:hover{background:var(--sage-dark)}.primary-button:disabled{background:#b8c1bd;cursor:not-allowed;box-shadow:none}.notice{padding:13px 16px;border-radius:12px;margin-bottom:18px;font-size:13px;font-weight:700}.notice.ok{color:var(--sage-dark);background:var(--sage-soft);border:1px solid #c8dfd6}.notice.error{color:#803d3d;background:#f9eaea;border:1px solid #ebcaca}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}.stat-card{padding:17px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.8)}.stat-card span{display:block;color:var(--muted);font-size:12px;font-weight:700}.stat-card strong{display:inline-block;margin:9px 7px 0 0;font-size:25px}.stat-card small{color:#8a9391;font-size:11px}.workspace-grid{display:grid;grid-template-columns:.92fr 1.15fr .86fr;gap:16px;align-items:start}.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;min-width:0}.workspace-grid>.panel{min-height:575px}.panel-heading{min-height:63px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0ee}.panel-heading>div{display:flex;align-items:center;gap:10px}.panel-heading h2{margin:0;font-size:15px}.panel-heading small{color:var(--muted);font-size:11px}.step{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--sage);font-size:12px;font-weight:900}
.phase-banner{margin-bottom:18px;padding:14px 18px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:16px;border:1px solid #d7e3de;border-radius:16px;background:#fff}.phase-item{min-width:0;padding:10px 12px;border-radius:11px;background:#f7f9f8}.phase-item.active{background:var(--sage-soft);box-shadow:inset 4px 0 0 var(--sage)}.phase-item.future{opacity:.65}.phase-item span,.phase-item strong,.phase-item small{display:block}.phase-item span{margin-bottom:5px;color:var(--sage);font-size:9px;font-weight:900;letter-spacing:.08em}.phase-item strong{font-size:13px}.phase-item small{margin-top:5px;color:var(--muted);font-size:10px}.phase-arrow{color:#91aaa2;font-weight:900}
.link-panel{margin-bottom:18px;padding:24px;overflow:visible}.link-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}.link-panel-heading h2{margin:0;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.03em}.link-panel-heading p:last-child{margin:8px 0 0;color:var(--muted);font-size:12px}.safe-label{min-width:170px;padding:10px 12px;display:grid;grid-template-columns:30px 1fr;column-gap:9px;align-items:center;border:1px solid #cce0d7;border-radius:12px;background:#f2f8f5}.safe-label>span{width:30px;height:30px;grid-row:1/3;border-radius:50%;display:grid;place-items:center;background:var(--sage);color:#fff;font-weight:900}.safe-label strong{font-size:12px}.safe-label small{color:var(--muted);font-size:9px}.link-builder{display:grid;grid-template-columns:1fr 150px 1fr;align-items:stretch;gap:16px}.person-picker{min-width:0;padding:18px;border:2px solid #dbe8e2;border-radius:15px;background:linear-gradient(180deg,#fff,#f7fbf9)}.person-picker>span,.person-picker>strong,.person-picker>small{display:block}.store-badge{width:max-content;margin-bottom:12px;padding:5px 8px;border-radius:6px;background:var(--sage);color:#fff;font-size:9px;font-weight:900;letter-spacing:.04em}.umeda-picker .store-badge{background:#9d6a7c}.person-picker>strong{margin-bottom:9px;font-size:14px}.person-picker select{width:100%;padding:13px 38px 13px 12px;border:1px solid #cbd8d2;border-radius:10px;background:#fff;font-size:14px;font-weight:700}.person-picker>small{margin-top:8px;color:var(--muted);font-size:10px}.link-connector{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--sage)}.link-connector>span{padding:5px 9px;border-radius:999px;background:var(--sage-soft);font-size:10px;font-weight:900}.link-connector>div{margin:7px 0 4px;font-size:32px;line-height:1}.link-connector>small{color:var(--muted);font-size:9px}.link-action-row{margin:16px 0 20px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:12px;background:#f5f7f6}.link-action-row p{margin:0;color:var(--muted);font-size:11px}.link-action-row .link-save-button{width:auto;min-width:210px;padding-inline:22px}.saved-links-wrap{border-top:1px solid #e8eeeb;padding-top:18px}.saved-links-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.saved-links-heading h3{margin:0;font-size:14px}.saved-links-heading p{margin:4px 0 0;color:var(--muted);font-size:10px}.saved-links-heading>strong{padding:6px 9px;border-radius:8px;background:var(--sage-soft);color:var(--sage-dark);font-size:11px}.saved-links{display:grid;gap:8px}.saved-link-row{display:grid;grid-template-columns:1fr 100px 1fr auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#fff}.linked-person{display:flex;align-items:center;gap:9px;min-width:0}.linked-person>span{flex:0 0 auto;padding:4px 6px;border-radius:5px;background:var(--sage);color:#fff;font-size:8px;font-weight:900}.linked-person.umeda>span{background:#9d6a7c}.linked-person>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.linked-connector{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--sage)}.linked-connector b{font-size:9px}.linked-connector span{font-size:17px}.unlink-button{padding:6px 9px;border:1px solid #e2caca;border-radius:7px;background:#fff;color:#955050;font-size:9px;font-weight:800}
.howto-panel{margin-bottom:18px;padding:24px;border:1px solid #cfe0d9;border-radius:18px;background:linear-gradient(135deg,#fff 0%,#f4faf7 100%);box-shadow:var(--shadow)}.howto-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}.howto-heading h2{margin:0;font-size:clamp(20px,2.2vw,27px);letter-spacing:-.03em}.howto-heading>p{max-width:410px;margin:0;padding:10px 12px;border-radius:10px;background:#fff7da;color:#6e5c1f;font-size:12px;line-height:1.6}.howto-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:10px}.howto-card{min-width:0;padding:15px;border:1px solid #dce9e4;border-radius:14px;background:#fff}.howto-illustration{height:82px;margin-bottom:13px;border-radius:11px;background:var(--sage-soft);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.howto-copy>span{width:23px;height:23px;border-radius:7px;background:var(--sage);color:#fff;display:grid;place-items:center;float:left;margin-right:8px;font-size:11px;font-weight:900}.howto-copy h3{margin:2px 0 9px;font-size:14px}.howto-copy p{clear:both;margin:0;color:var(--muted);font-size:11px;line-height:1.7}.flow-arrow{align-self:center;color:#7eaaa0;font-size:23px;font-weight:900}.mini-person{width:38px;height:38px;margin:0 -3px;border:3px solid #fff;border-radius:50%;background:#fff;color:var(--sage-dark);display:grid;place-items:center;font-weight:900}.people-illustration b{width:25px;height:25px;position:absolute;right:14px;bottom:12px;border:3px solid #fff;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-size:12px}.calendar-illustration{padding:29px 12px 11px;gap:5px}.calendar-illustration i{position:absolute;inset:0 0 auto;height:21px;background:var(--sage)}.calendar-illustration span{width:30px;height:30px;border-radius:7px;background:#fff;display:grid;place-items:center;color:var(--muted);font-size:10px;font-style:normal}.calendar-illustration .picked{background:var(--sage);color:#fff;font-weight:900}.time-illustration{gap:6px}.time-illustration span{padding:9px 7px;border-radius:7px;background:#fff;color:var(--sage-dark);font-size:10px;font-weight:900}.time-illustration b{color:var(--sage);font-size:16px}.register-illustration{flex-direction:column;gap:5px;background:var(--sage)}.register-illustration b{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--sage);display:grid;place-items:center}.register-illustration span{color:#fff;font-size:10px;font-weight:900}.howto-note{margin-top:15px;padding:10px 13px;border-left:4px solid var(--sage);border-radius:7px;background:#edf5f1;color:var(--sage-dark);font-size:12px}.howto-note strong{font-weight:900}
.roster-list{padding:10px}.store-group{border:1px solid var(--line);border-left:4px solid var(--sage);border-radius:11px;overflow:hidden}.store-title,.person-row{width:100%;border:0;background:transparent;display:flex;align-items:center;text-align:left}.store-title{padding:11px 12px;justify-content:space-between;background:#f8faf8;font-weight:800;font-size:12px}.store-title small{color:var(--muted)}.person-row{gap:9px;padding:8px 12px;font-size:12px}.person-row:hover,.person-row.selected{background:#f1f6f3}.check-box{width:18px;height:18px;flex:0 0 18px;border-radius:5px;border:1.5px solid #b8c1bd;display:grid;place-items:center;color:#fff}.person-row.selected .check-box{border-color:var(--sage);background:var(--sage)}.avatar{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:50%;background:#edf0ee;color:var(--sage-dark);font-weight:900}.person-row>span:last-child{font-weight:700}.person-row small{display:block;color:#929a97;font-size:9px;margin-top:2px;font-weight:500}
.calendar-toolbar{padding:20px 18px 14px;display:flex;align-items:center;justify-content:space-between}.calendar-toolbar button{border:1px solid var(--line);background:#fff;border-radius:8px;min-width:32px;height:32px;padding:0 9px}.calendar-toolbar>div{display:flex;gap:5px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:0 14px;gap:5px}.weekdays{margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:700;text-align:center}.day-cell{aspect-ratio:1;min-width:0;border:1px solid transparent;border-radius:9px;background:transparent;font-size:12px}.day-cell:hover{background:#f1f5f2}.day-cell.outside{color:#c4cac7}.day-cell.today{border-color:#a8c6ba;font-weight:900}.day-cell.selected{background:var(--sage);color:#fff;box-shadow:0 4px 10px rgba(47,116,102,.2)}.selected-dates{min-height:74px;margin:17px 18px 0;padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;align-content:start;gap:6px}.selected-dates button{padding:6px 8px;border:0;border-radius:7px;background:var(--sage-soft);color:var(--sage-dark);font-size:10px}
.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:18px 16px 0}.mode-tabs button{padding:9px 4px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);font-size:11px;font-weight:700}.mode-tabs button.active{color:#fff;background:var(--sage);border-color:var(--sage)}.mode-tabs button[data-mode="off"].active{background:var(--red);border-color:var(--red)}.time-fields{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;padding:30px 18px 24px}.time-fields label{color:var(--muted);font-size:11px;font-weight:700}.time-fields select{width:100%;display:block;margin-top:7px;padding:11px 8px;border:1px solid var(--line);border-radius:8px;background:#fff}.time-fields>span{padding-bottom:11px;color:var(--muted)}.mode-explainer{margin:24px 18px;min-height:88px;padding:18px;display:flex;align-items:center;border-radius:10px;background:var(--sage-soft);color:var(--sage-dark);font-size:12px;line-height:1.7}.summary-box{margin:8px 18px 14px;padding:16px;border-radius:11px;background:#f5f7f5}.summary-box span,.summary-box strong,.summary-box small{display:block}.summary-box span{color:var(--muted);font-size:10px}.summary-box strong{margin:6px 0;font-size:15px}.summary-box small{color:#909895;font-size:10px}.settings-panel>.primary-button{width:calc(100% - 36px);margin:0 18px}.history-panel{margin-top:16px;min-height:0}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:11px}th{padding:10px 14px;background:#f7f9f7;color:var(--muted);text-align:left;white-space:nowrap}td{padding:10px 14px;border-top:1px solid #edf0ee;white-space:nowrap}.empty{text-align:center;color:var(--muted);padding:28px!important;font-size:11px}
@media(max-width:1150px){.stats-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:1050px){.workspace-grid{grid-template-columns:1fr 1fr}.settings-panel{grid-column:1/-1;min-height:390px!important}.howto-flow{grid-template-columns:1fr auto 1fr}.howto-flow .flow-arrow:nth-of-type(2){display:none}.howto-card:nth-of-type(3){grid-column:1}.howto-card:nth-of-type(4){grid-column:3}}@media(max-width:820px){.phase-banner{grid-template-columns:1fr}.phase-arrow{display:none}.link-panel-heading{align-items:flex-start}.link-builder{grid-template-columns:1fr}.link-connector{min-height:64px}.link-connector>div{transform:rotate(90deg)}.saved-link-row{grid-template-columns:1fr auto}.linked-connector{grid-column:1/-1;grid-row:2}.linked-person.umeda{grid-row:3}.unlink-button{grid-column:2;grid-row:1/4}}@media(max-width:720px){.topbar{padding:0 14px}.page-wrap{width:calc(100% - 24px);padding-top:24px}.hero-row{display:block}.hero-row .ghost-button{margin-top:14px}.link-panel{padding:18px}.link-panel-heading{display:block}.safe-label{margin-top:14px}.link-action-row{display:block}.link-action-row .link-save-button{width:100%;margin-top:12px}.howto-panel{padding:18px}.howto-heading{display:block}.howto-heading>p{max-width:none;margin-top:14px}.howto-flow{display:grid;grid-template-columns:1fr}.howto-flow .flow-arrow{display:none}.howto-card:nth-of-type(3),.howto-card:nth-of-type(4){grid-column:auto}.howto-card{display:grid;grid-template-columns:105px 1fr;gap:13px;align-items:center}.howto-illustration{height:78px;margin:0}.stats-grid{grid-template-columns:1fr 1fr}.workspace-grid{grid-template-columns:1fr}.settings-panel{grid-column:auto}.workspace-grid>.panel{min-height:0}}@media(max-width:420px){.brand span{display:none}.login-card{padding:26px 20px}.howto-card{grid-template-columns:86px 1fr;padding:11px}.stats-grid{grid-template-columns:1fr}.time-illustration span{padding:7px 4px;font-size:8px}.mode-tabs{grid-template-columns:1fr}.time-fields{padding-inline:14px}}

