@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
:root{--font-main:"Inter","Noto Sans JP",sans-serif;--accent:#df6900;--letter:#24353e;--letter-light:#24353e;--background:#fff6ef;--regular:#d9d9d9;--success:#84e99d;--done-all:#99d8ff;--sidebar-gray:var(--regular);--card-gray:var(--regular);--card-radius:20px;--button-radius:30px;--sidebar-width:16.6667%;--shadow:0 4px 10px #24353e33}@media (prefers-color-scheme:dark){:root{--accent:#df6900;--background:#24353e;--letter:#fff6ef;--regular:#424445;--success:#6cbd80;--done-all:#7fb2d1;--sidebar-gray:var(--regular);--card-gray:var(--regular);--shadow:0 6px 16px #00000059}}*{box-sizing:border-box}body{font-family:var(--font-main);background:var(--background);color:var(--letter);margin:0}.app{min-height:100vh;display:flex}.month-sidebar{width:var(--sidebar-width);background:var(--sidebar-gray);flex-direction:column;justify-content:center;align-items:center;gap:26px;min-width:220px;padding:20px;display:flex}.month-btn{border:1px solid color-mix(in srgb,var(--letter)40%,transparent);border-radius:var(--button-radius);width:min(100%,210px);box-shadow:var(--shadow);background:0 0;padding:12px;font-size:clamp(1.1rem,2vw,2.1rem);font-weight:700}.month-btn.active{border:4px solid var(--accent);padding:9px}.main{flex-direction:column;flex:1;padding:24px 36px 34px;display:flex}.step{background:var(--regular);border:1px solid color-mix(in srgb,var(--letter)15%,transparent);white-space:nowrap;border-radius:999px;place-items:center;width:92px;height:92px;font-size:clamp(1rem,1.8vw,1.8rem);font-weight:700;line-height:1;display:grid}.step.active{border:5px solid var(--accent)}.content{flex:1;gap:16px;margin-top:8px;display:grid}.task-card{border-radius:var(--card-radius);gap:12px;padding:20px 22px 16px;display:grid}.task-card.in-progress{background:var(--regular)}.task-card.done{background:var(--success)}.task-top{justify-content:space-between;align-items:center;gap:20px;display:flex}.task-left{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.task-title{margin:0;font-size:clamp(2rem,4vw,4.2rem);font-weight:700;line-height:1}.select-like{border:1px solid color-mix(in srgb,var(--letter)38%,transparent);min-width:180px;color:var(--letter);appearance:none;background:0 0;background-image:linear-gradient(45deg,transparent 50%,var(--letter)50%),linear-gradient(135deg,var(--letter)50%,transparent 50%);background-position:calc(100% - 28px) calc(50% - 5px),calc(100% - 18px) calc(50% - 5px);background-repeat:no-repeat;background-size:10px 10px,10px 10px;padding:8px 48px 8px 12px;font-size:2rem;font-weight:700}.url-row{grid-template-columns:1fr auto;align-items:center;gap:20px;display:grid}.url-field{border:1px solid color-mix(in srgb,var(--letter)22%,transparent);color:#4b24ff;background:#f4f4f4;border-radius:0;width:100%;height:56px;padding:10px 14px;font-family:inherit;font-size:1.6rem;font-weight:500}.url-field::placeholder{color:#4b24ff;opacity:.85}.url-jump{border-radius:var(--button-radius);border:1px solid color-mix(in srgb,var(--letter)22%,transparent);background:color-mix(in srgb,var(--done-all)75%,white);min-width:90px;height:56px;color:var(--letter);box-shadow:var(--shadow);justify-content:center;align-items:center;font-weight:600;text-decoration:none;display:inline-flex}.url-jump.disabled{opacity:.5;pointer-events:none}.action-btn{border-radius:var(--button-radius);border:1px solid color-mix(in srgb,var(--letter)35%,transparent);min-width:220px;box-shadow:var(--shadow);background:#ececec;padding:15px 26px;font-size:2.8rem;font-weight:700}.action-btn.approved{background:color-mix(in srgb,var(--success)70%,white);border-color:color-mix(in srgb,var(--letter)20%,transparent);color:color-mix(in srgb,var(--letter)85%,black);cursor:not-allowed;box-shadow:none}.approve-wrap{justify-items:end;gap:8px;display:grid}.approve-confirm{background:color-mix(in srgb,var(--background)80%,white);border:1px solid color-mix(in srgb,var(--letter)30%,transparent);border-radius:12px;align-items:center;gap:8px;padding:8px 10px;font-size:.95rem;font-weight:600;display:none}.approve-confirm.show{display:flex}.confirm-btn{border:1px solid color-mix(in srgb,var(--letter)35%,transparent);border-radius:var(--button-radius);box-shadow:var(--shadow);background:#f0f0f0;padding:4px 10px;font-size:.85rem;font-weight:600}.task-status{text-align:center;border-radius:var(--button-radius);border:1px solid color-mix(in srgb,var(--letter)25%,transparent);background:color-mix(in srgb,var(--regular)55%,transparent);min-width:220px;padding:12px 20px;font-size:1.5rem;font-weight:600}.creator-box{border:1px solid color-mix(in srgb,var(--letter)22%,transparent);background:color-mix(in srgb,var(--background)86%,white);border-radius:28px;padding:18px 20px 22px}.accordion-panel{opacity:0;max-height:0;transition:max-height .24s,opacity .2s;overflow:hidden}.accordion-panel.open{opacity:1;max-height:360px}.creator-toggle-row{justify-content:flex-end;display:flex}.plus-btn{border:3px solid var(--accent);background:color-mix(in srgb,var(--done-all)70%,white);width:68px;height:68px;box-shadow:var(--shadow);color:var(--letter);border-radius:999px;font-size:2.2rem;font-weight:700}.creator-head{background:var(--regular);border-radius:0 0 20px 20px;margin-top:-2px;padding:14px 30px;font-size:2.9rem;font-weight:700;display:inline-block}.creator-form{grid-template-columns:1.5fr .9fr auto;align-items:center;gap:20px;margin-top:18px;display:grid}.creator-input,.creator-select{border:1px solid color-mix(in srgb,var(--letter)22%,transparent);width:100%;color:var(--letter-light);background:#f4f4f4;border-radius:44px;padding:18px 26px;font-size:2.4rem;font-weight:700}.creator-input::placeholder{color:var(--letter-light);opacity:.8}.creator-select,.creator-select option{color:var(--letter-light)}.creator-select{border-radius:0}.create-btn{border:1px solid color-mix(in srgb,var(--letter)28%,transparent);border-radius:var(--button-radius);background:var(--done-all);box-shadow:var(--shadow);padding:16px 30px;font-size:2.9rem;font-weight:700}.status-note{text-align:right;margin:0;font-size:1.5rem;font-weight:600}.status-footer{margin-top:16px;padding-bottom:6px}.progress-header{margin-top:20px;margin-bottom:10px;overflow:visible}.footer-line{border-top:5px solid var(--accent)}.footer-steps{justify-content:space-around;align-items:center;margin-top:-34px;padding-top:10px;display:flex}.footer-status{text-align:right;margin:8px 0 0;font-size:1.25rem;font-weight:600}.mobile-top{display:none}@media (max-width:1160px){.task-title,.step,.select-like,.url-field,.action-btn,.creator-head,.creator-input,.creator-select,.create-btn{font-size:clamp(1.3rem,2.2vw,2.2rem)}.action-btn{min-width:180px}.approve-wrap{justify-items:start}.plus-btn{width:58px;height:58px;font-size:1.8rem}}@media (max-width:900px){.month-sidebar{display:none}.main{padding:16px}.mobile-top{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.menu-btn{border:1px solid color-mix(in srgb,var(--letter)40%,transparent);border-radius:var(--button-radius);box-shadow:var(--shadow);background:0 0;padding:8px 12px;font-weight:600}.step{width:60px;height:60px;font-size:1rem}.task-top,.task-left,.url-row,.creator-form{grid-template-columns:1fr;display:grid}.creator-box{padding-top:10px}.creator-head{border-radius:16px;margin-top:0}.status-note{text-align:left}.footer-steps{margin-top:-18px;padding-top:8px}.footer-status{text-align:left;font-size:1rem}}