/* 팀원 프로젝트 스타일 — doa-worklog-v1 styles-project-v16.css 에서 프로젝트 전용
   셀렉터만 추출(2026-08-11).
 *
 * ⚠️ **@media 블록을 통째로 유지한다.** 처음엔 정규식으로 규칙만 뽑아 미디어쿼리
 *    래퍼를 잃었고, 그 탓에 모바일용 `flex-direction:column` 이 데스크톱에도
 *    적용돼 히어로의 '+ 새 프로젝트' 버튼이 우측이 아니라 아래로 떨어졌다.
 *
 * ⚠️ 범용 클래스(btn·card·active…)는 v2 것을 그대로 쓴다 — 덮으면 기존 화면이 깨진다. */
@media(max-width:720px){
.header-actions .member-select{display:none}
}


/* v2.2 today/tomorrow, editable routines, reports */
.inline-member{max-width:125px;padding:7px 8px;font-size:11px}
@media(max-width:1100px){
.inline-member{grid-column:2}
.routine-line .inline-member{grid-column:1}
}
@media(max-width:720px){
.inline-member{max-width:150px}
}


/* v2.2 today/tomorrow, editable routines, reports */
.inline-member{max-width:125px;padding:7px 8px;font-size:11px}
@media(max-width:1100px){
.inline-member{grid-column:2}
.routine-line .inline-member{grid-column:1}
}
@media(max-width:720px){
.inline-member{max-width:150px}
}
@media(max-width:900px){
.task-row.admin-row .inline-member,.task-row.admin-row .task-tags,.task-row.admin-row .slack-send-btn{grid-column:2;justify-self:start}
}
.member-select select:disabled{opacity:1;cursor:default}
.member-select select:not(:disabled){border-color:#9aabef;background:#f7f8ff;color:#35489c;font-weight:700}
body.dark .member-select select:not(:disabled){background:#182442;color:#c3ceff;border-color:#45598d}
@media(max-width:720px){
.header-actions .member-select{display:block}
.header-actions .member-select span{font-size:9px}
.header-actions .member-select select{max-width:130px;padding:8px}
}

.project-hero,.team-board-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px;border-radius:28px;background:linear-gradient(135deg,#4938a8,#6d5ee8);color:#fff;margin-bottom:18px}
.project-hero span,.team-board-hero span{font-size:11px;font-weight:900;letter-spacing:.16em;opacity:.72}
.project-hero h2,.team-board-hero h2{margin:8px 0;font-size:28px}
.project-hero p,.team-board-hero p{margin:0;opacity:.85}
.team-board-hero>strong{font-size:42px;text-align:center}
.team-board-hero>strong small{display:block;font-size:12px}
.project-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.project-summary article{padding:18px 20px;border-radius:18px;background:var(--card,#fff);box-shadow:0 10px 30px rgba(39,51,89,.08)}
.project-summary span{display:block;color:#75809a;font-size:12px}
.project-summary strong{font-size:28px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
.project-card{background:var(--card,#fff);border:1px solid rgba(109,94,232,.14);border-radius:22px;padding:22px;box-shadow:0 12px 36px rgba(39,51,89,.08)}
.project-card-top,.project-dates,.project-progress>div,.project-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.project-card h3{font-size:21px;margin:15px 0 8px}
.project-card>p{min-height:42px;color:#68718a}
.project-state{padding:6px 10px;border-radius:999px;background:#eeeafc;color:#5b49c8;font-size:12px;font-weight:900}
.project-state.완료{background:#e8f7ee;color:#25804a}
.project-dates{font-size:12px;color:#6f7890;margin:15px 0}
.project-progress i{display:block;height:8px;border-radius:99px;background:#eceef5;overflow:hidden;margin-top:8px}
.project-progress em{display:block;height:100%;background:linear-gradient(90deg,#6d5ee8,#9b8cff)}
.project-assignees{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.project-assignee{border:0;border-radius:12px;padding:8px 11px;background:#f3f1ff;color:#40378f;font-weight:800;text-align:left}
.project-assignee small{display:block;font-size:10px;opacity:.65}
.project-assignee.done{background:#e8f7ee;color:#267b49}
.project-modal-card{max-width:760px}
.project-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.project-form .wide,.project-form fieldset{grid-column:1/-1}
.project-form fieldset{border:1px solid #dfe3ee;border-radius:16px;padding:14px}
.project-member-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.project-member-check input{display:none}
.project-member-check span{display:block;padding:11px;border:1px solid #dfe3ee;border-radius:12px;cursor:pointer}
.project-member-check input:checked+span{border-color:#6d5ee8;background:#f0edff;color:#4938a8}
.project-member-check small{display:block;font-size:10px;opacity:.65}
.project-calendar-card{overflow:hidden}
.project-calendar-week,.project-calendar{display:grid;grid-template-columns:repeat(7,1fr)}
.project-calendar-week b{padding:10px;text-align:center;color:#7a8399}
.project-calendar-day,.empty-day{min-height:118px;border-top:1px solid #e8eaf1;border-right:1px solid #e8eaf1;padding:8px}
.project-calendar-day.today{background:#f3f1ff}
.calendar-project{display:block;width:100%;border:0;border-radius:7px;padding:5px 6px;margin-top:5px;background:#eeeafd;color:#4f40aa;font-size:10px;text-align:left}
.calendar-project.deadline{background:#fff0ef;color:#b8493f}
.calendar-project span{font-weight:900;margin-right:4px}
.team-board{display:grid;grid-template-columns:repeat(3,minmax(250px,1fr));gap:14px;align-items:start;overflow-x:auto}
.team-column{background:#f3f5f9;border-radius:20px;padding:12px;min-height:260px}
.team-column-head{display:flex;align-items:center;justify-content:space-between;padding:8px}
.team-column-head>div{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}
.team-column-head .portrait{grid-row:1/3}
.team-column-head small{font-size:10px;color:#7b849a}
.team-column-head>strong{font-size:22px}
.team-column-tasks{display:grid;gap:9px}
.team-task{background:#fff;border-radius:14px;padding:14px;box-shadow:0 4px 12px rgba(48,58,90,.06);cursor:pointer}
.team-task.project-task{border-left:4px solid #755fe8}
.team-task h3{font-size:14px;margin:6px 0}
.team-task p{font-size:11px;color:#737d93;margin:0 0 10px}
.project-label,.project-inline-badge{display:inline-flex;padding:3px 6px;border-radius:6px;background:#eeeafd;color:#5946c6;font-size:9px;font-weight:900;margin-right:5px}
@media(max-width:900px){
.project-grid{grid-template-columns:1fr}
.project-summary{grid-template-columns:repeat(2,1fr)}
.team-board{grid-template-columns:repeat(2,minmax(250px,1fr))}
.project-member-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.project-hero,.team-board-hero{align-items:flex-start;flex-direction:column;padding:22px}
.project-hero h2,.team-board-hero h2{font-size:22px}
.project-summary{grid-template-columns:repeat(2,1fr)}
.project-form{grid-template-columns:1fr}
.project-form .wide,.project-form fieldset{grid-column:auto}
.project-member-grid{grid-template-columns:1fr}
.project-calendar-day,.empty-day{min-height:86px;padding:4px}
.calendar-project{font-size:8px}
.team-board{grid-template-columns:1fr}
}

.project-ops-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:32px;border-radius:30px;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.22),transparent 28%),linear-gradient(135deg,#172554,#4238a8 58%,#7665ee);color:#fff;margin-bottom:16px;box-shadow:0 22px 55px rgba(51,46,134,.25)}
.project-ops-hero span{font-size:11px;font-weight:900;letter-spacing:.18em;color:#c8c2ff}
.project-ops-hero h2{font-size:30px;margin:8px 0}
.project-ops-hero p{margin:0;color:#e0defe}
.project-switcher-card{background:#fff;border-radius:22px;padding:14px;margin-bottom:16px;box-shadow:0 12px 36px rgba(40,50,85,.08)}
.project-switcher{display:flex;gap:9px;overflow-x:auto;padding-bottom:3px}
.project-switcher>button{min-width:205px;text-align:left;border:1px solid #e1e4ee;background:#f8f9fc;border-radius:15px;padding:12px 14px;color:#4f5870}
.project-switcher>button.active{border-color:#6e5ce4;background:#efecff;color:#413695;box-shadow:inset 0 0 0 1px #6e5ce4}
.project-switcher button span,.project-switcher button small{display:block;font-size:10px}
.project-switcher button b{display:block;margin:4px 0;font-size:14px}
.project-current-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.project-command-card{background:#fff;border-radius:28px;padding:24px;margin-bottom:18px;box-shadow:0 16px 44px rgba(33,42,78,.1)}
.project-command-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:6px 4px 22px}
.project-command-head>div>span{font-size:10px;font-weight:900;letter-spacing:.17em;color:#6d5ee8}
.project-command-head h2{font-size:26px;margin:7px 0}
.project-command-head p{margin:0;color:#70798f}
.project-score{width:120px;height:120px;border-radius:50%;background:conic-gradient(#7060e7 var(--score,75%),#edeafa 0);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 12px #f5f3ff;color:#403694}
.project-score strong{font-size:31px}
.project-score small{font-size:10px}
.project-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.flow-stage{position:relative;display:grid;grid-template-columns:auto 1fr;gap:10px;min-height:174px;padding:15px;border:1px solid #e5e6ef;border-radius:18px;background:#fafbfe;cursor:pointer;transition:.2s}
.flow-stage:hover{transform:translateY(-3px);border-color:#7464e8;box-shadow:0 12px 28px rgba(74,60,166,.12)}
.flow-stage.complete{background:#effaf3;border-color:#bfe6cd}
.flow-stage.late{background:#fff4f3;border-color:#f2c6c2}
.flow-stage-day{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#ebe8ff;color:#5746c3;font-size:11px;font-weight:900}
.flow-stage-copy span{font-size:10px;color:#7665e6;font-weight:900}
.flow-stage-copy h3{font-size:14px;margin:5px 0}
.flow-stage-copy p{font-size:10px;line-height:1.45;color:#747d92;margin:0}
.flow-stage-owner{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px dashed #dfe2eb}
.flow-stage-owner b{font-size:12px}
.flow-stage-owner small{font-size:10px;color:#7b8499;margin-left:auto}
.flow-stage-owner em{font-style:normal;font-size:9px;padding:4px 6px;border-radius:999px;background:#ece9ff;color:#5948c6}
.flow-project-modal{max-width:1050px}
.project-name-field input{font-size:18px;font-weight:800}
.flow-assignment-section{border:1px solid #e1e3ec;border-radius:18px;padding:16px;background:#fafbfe}
.flow-assignment-section>div:first-child{display:flex;justify-content:space-between;margin-bottom:12px}
.flow-assignment-section span{font-size:11px;color:#747e94}
.flow-edit-row{display:grid;grid-template-columns:50px 1fr 1.8fr 1fr 1.7fr;gap:8px;align-items:end;padding:9px;border-radius:13px;background:#fff;margin-top:7px;border:1px solid #e8e9f0}
.flow-edit-row label{font-size:10px}
.flow-edit-row input,.flow-edit-row select{padding:9px;font-size:11px}
.flow-day{align-self:center;border-radius:10px;padding:10px 4px;text-align:center;background:#eeeafd;color:#5947c6;font-size:11px;font-weight:900}
.calendar-project.complete{background:#e7f6ed;color:#277a49}
.project-calendar-day>small{font-size:9px;color:#777}
@media(max-width:1180px){
.project-timeline{grid-template-columns:repeat(2,1fr)}
.flow-edit-row{grid-template-columns:45px 1fr 1fr}
.flow-task-name,.flow-criteria{grid-column:span 1}
}
@media(max-width:700px){
.project-ops-hero,.project-command-head{align-items:flex-start;flex-direction:column}
.project-ops-hero h2{font-size:23px}
.project-score{width:92px;height:92px}
.project-timeline{grid-template-columns:1fr}
.flow-edit-row{grid-template-columns:42px 1fr}
.flow-task-name,.flow-criteria{grid-column:1/-1}
.flow-assignment-section>div:first-child{flex-direction:column;gap:4px}
}
.workload-tasks button.project{border-left:3px solid #6e5ce5}

.step-board-hero{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:32px 36px;border-radius:28px;background:linear-gradient(135deg,#18244b,#4c3fb6 62%,#7666eb);color:#fff;margin-bottom:18px;box-shadow:0 22px 52px rgba(46,39,137,.24)}
.step-board-hero>div>span{font-size:10px;font-weight:900;letter-spacing:.18em;color:#c7c0ff}
.step-board-hero h2{font-size:29px;margin:8px 0}
.step-board-hero p{margin:0;color:#dedbff}
.step-board-summary{display:grid;grid-template-columns:repeat(4,82px);gap:8px}
.step-board-summary article{padding:12px 8px;border-radius:14px;background:rgba(255,255,255,.12);text-align:center}
.step-board-summary span,.step-board-summary strong{display:block}
.step-board-summary span{font-size:9px;color:#d9d5ff}
.step-board-summary strong{font-size:24px;margin-top:4px}
.project-step-stack{display:grid;gap:18px}
.project-step-card{background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 15px 42px rgba(35,45,81,.1)}
.project-step-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 27px;background:linear-gradient(90deg,#f5f3ff,#fff)}
.project-step-header>div>span{font-size:9px;font-weight:900;letter-spacing:.17em;color:#6956da}
.project-step-header h2{font-size:23px;margin:5px 0}
.project-step-header p{margin:0;color:#747d91}
.project-step-meta{text-align:right}
.project-step-meta>strong{display:block;font-size:27px;color:#5443c2}
.project-step-meta>span,.project-step-meta>small{display:block;font-size:10px;color:#7b8498}
.project-step-meta button{margin-top:7px}
.project-step-list{padding:7px 16px 18px}
.project-step-row{display:grid;grid-template-columns:65px minmax(300px,1.7fr) 125px 170px 155px;align-items:center;gap:14px;padding:13px 10px;border-bottom:1px solid #eceef3;transition:.15s}
.project-step-row:last-child{border-bottom:0}
.project-step-row:hover{background:#faf9ff}
.project-step-row.complete{background:#f1faf4}
.project-step-row.late{background:#fff5f4}
.step-index{text-align:center}
.step-index span,.step-index b,.step-index small{display:block}
.step-index span{font-size:8px;letter-spacing:.14em;color:#887ae8}
.step-index b{font-size:20px;color:#433790}
.step-index small{font-size:9px;color:#939bad}
.step-work>span{font-size:9px;color:#6955da;font-weight:900}
.step-work h3{font-size:14px;margin:3px 0}
.step-work p{font-size:10px;color:#737d91;margin:0}
.step-deadline span,.step-deadline b,.step-deadline small,.step-owner>span{display:block}
.step-deadline span,.step-owner>span{font-size:8px;color:#949bad}
.step-deadline b{font-size:11px;margin:3px 0}
.step-deadline small{font-size:9px;color:#6c5bd8}
.step-owner>div{display:grid;grid-template-columns:30px 1fr;align-items:center;column-gap:7px;margin-top:4px}
.step-owner i{grid-row:1/3;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#eae7ff;color:#5140ba;font-style:normal;font-weight:900}
.step-owner b,.step-owner small{display:block}
.step-owner b{font-size:11px}
.step-owner small{font-size:8px;color:#8790a2}
.step-owner.open>b{display:inline-flex;margin-top:5px;padding:5px 8px;border-radius:7px;background:#fff2d8;color:#9b6b17;font-size:10px}
.step-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.step-actions>em{width:100%;text-align:right;font-size:8px;font-style:normal;color:#7d8598}
.claim-task-btn{border:0;border-radius:9px;padding:9px 13px;background:#5f4bd2;color:#fff;font-weight:900;font-size:11px;box-shadow:0 5px 14px rgba(83,66,191,.25)}
.step-empty,.empty-project-board{text-align:center;padding:44px;background:#fff;border-radius:22px}
.step-empty span,.empty-project-board span{display:block;margin:6px 0 14px;color:#7a8397}
@media(max-width:1100px){
.project-step-row{grid-template-columns:55px 1fr 110px 150px}
.step-actions{grid-column:2/-1}
.step-board-hero{align-items:flex-start;flex-direction:column}
}
@media(max-width:700px){
.step-board-hero{padding:23px}
.step-board-hero h2{font-size:22px}
.step-board-summary{grid-template-columns:repeat(4,1fr);width:100%}
.project-step-header{align-items:flex-start;flex-direction:column}
.project-step-meta{text-align:left}
.project-step-row{grid-template-columns:45px 1fr}
.step-deadline,.step-owner,.step-actions{grid-column:2}
.step-actions{justify-content:flex-start}
.step-actions>em{text-align:left}
}
.member-symbol{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#e6efe9;color:#297253;font-weight:900}
.claim-pool{background:#fffaf0;margin:12px -12px 0;padding:15px 12px;border-radius:12px}
.claim-pool .member-symbol{background:#fff0c7;color:#a56a11}

.project-card-page{color:#30343e}
.project-card-page-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:17px}
.project-card-page-head span{font-size:10px;letter-spacing:.16em;font-weight:900;color:#6a58d2}
.project-card-page-head h2{font-size:28px;margin:5px 0}
.project-card-page-head p{margin:0;color:#747d91}
.project-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.project-card-empty{grid-column:1/-1;text-align:center;padding:50px;background:#fff;border-radius:22px}
.project-card-empty span{display:block;margin:7px 0 15px;color:#7c8498}
@media(max-width:1100px){
.project-card-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
.project-card-page-head{align-items:flex-start;flex-direction:column}
}

.project-directory-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}
.project-directory-head span{font-size:10px;letter-spacing:.17em;font-weight:900;color:#6250c7}
.project-directory-head h2{font-size:28px;margin:5px 0}
.project-directory-head p{margin:0;color:#747d91}
.project-directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.project-directory-card{position:relative;background:#fff;border:1px solid #e4e6ee;border-radius:20px;overflow:hidden;box-shadow:0 11px 30px rgba(38,46,78,.085);transition:.18s}
.project-directory-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(43,40,111,.15);border-color:#a59ae7}
.project-directory-open{display:block;width:100%;border:0;background:linear-gradient(145deg,#faf9ff,#fff);padding:21px 20px 15px;text-align:left;color:#303541}
.project-directory-open>span{font-size:8px;letter-spacing:.17em;font-weight:900;color:#6654cd}
.project-directory-open h2{font-size:18px;margin:6px 0}
.project-directory-open>p{height:30px;margin:0;color:#7e8698;font-size:9px;overflow:hidden}
.project-directory-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:17px 0}
.project-directory-stats div{padding:9px 5px;border-radius:9px;background:#f3f2f8;text-align:center}
.project-directory-stats strong,.project-directory-stats small{display:block}
.project-directory-stats strong{font-size:17px}
.project-directory-stats small{font-size:7px;color:#858c9c}
.project-directory-progress{display:flex;align-items:center;gap:8px}
.project-directory-progress>i{height:6px;flex:1;background:#e7e7ee;border-radius:99px;overflow:hidden}
.project-directory-progress>i>em{display:block;height:100%;background:linear-gradient(90deg,#6250ce,#9588ee)}
.project-directory-progress>b{font-size:9px;color:#5c4bc1}
.project-directory-open footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:11px;border-top:1px solid #ececf1;color:#8990a1;font-size:8px}
.project-directory-edit{width:100%;border:0;border-top:1px solid #ececf1;padding:9px;background:#fff;color:#6959be;font-size:8px}
.project-directory-empty{grid-column:1/-1;text-align:center;padding:50px;background:#fff;border-radius:20px}
.project-directory-empty span{display:block;margin:7px 0 15px;color:#7d8597}
.project-detail-nav{display:flex;justify-content:space-between;margin-bottom:10px}
.project-detail-nav button{border:1px solid #dfe1e8;border-radius:9px;padding:8px 11px;background:#fff;color:#6656ba;font-size:9px}
.project-detail-title{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 27px;border-radius:22px;background:linear-gradient(135deg,#202c58,#493ba3 65%,#725fe0);color:#fff;margin-bottom:15px}
.project-detail-title span{font-size:8px;letter-spacing:.18em;color:#c8c1ff;font-weight:900}
.project-detail-title h1{font-size:25px;margin:6px 0}
.project-detail-title p{margin:0;color:#dedaff}
.project-detail-title>div:last-child{text-align:right}
.project-detail-title strong,.project-detail-title small,.project-detail-title em{display:block}
.project-detail-title strong{font-size:27px}
.project-detail-title small,.project-detail-title em{font-size:8px;font-style:normal;color:#dedaff}
.project-step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:start}
.compact-no-task,.project-detail-empty{padding:19px;text-align:center;color:#949aa8;font-size:8px}
.project-detail-empty{grid-column:1/-1;background:#fff;border-radius:16px}
@media(max-width:1100px){
.project-directory-grid,.project-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
.project-directory-head,.project-detail-title{align-items:flex-start;flex-direction:column}
.project-directory-grid,.project-step-grid{grid-template-columns:1fr}
.project-detail-title>div:last-child{text-align:left}
}

/* v9 — readable project board typography */
.project-directory-head span{font-size:12px}
.project-directory-head h2{font-size:31px}
.project-directory-head p{font-size:14px}
.project-directory-open{padding:25px 23px 19px}
.project-directory-open>span{font-size:11px}
.project-directory-open h2{font-size:23px;line-height:1.35;margin:8px 0}
.project-directory-open>p{height:42px;font-size:13px;line-height:1.6}
.project-directory-stats{margin:20px 0;gap:8px}
.project-directory-stats div{padding:11px 6px}
.project-directory-stats strong{font-size:21px}
.project-directory-stats small{font-size:10px;margin-top:2px}
.project-directory-progress>b{font-size:12px}
.project-directory-open footer{font-size:11px}
.project-directory-edit{padding:12px;font-size:11px;font-weight:800}
.project-directory-empty{font-size:14px}
.project-detail-nav button{font-size:12px;padding:10px 14px}
.project-detail-title{padding:28px 31px}
.project-detail-title span{font-size:11px}
.project-detail-title h1{font-size:31px;line-height:1.35}
.project-detail-title p{font-size:14px}
.project-detail-title strong{font-size:32px}
.project-detail-title small,.project-detail-title em{font-size:11px;margin-top:3px}
.compact-no-task,.project-detail-empty{font-size:11px;padding:23px}
@media(max-width:680px){
.project-directory-head h2{font-size:26px}
.project-detail-title h1{font-size:26px}
}

/* v10 — readable project detail and explicit assignee selection */
.project-detail-page{max-width:1240px;margin:0 auto}
.project-step-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.project-detail-title p{max-width:760px;line-height:1.65}
@media(max-width:950px){
.project-step-grid{grid-template-columns:1fr}
.project-detail-page{max-width:760px}
}

/* v11 — keep 3 columns and prevent excessively tall step cards */
.project-detail-page{max-width:none;margin:0}
.project-step-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.project-detail-title{padding:24px 27px}
.project-detail-title h1{font-size:29px}
@media(max-width:1180px){
.project-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.project-step-grid{grid-template-columns:1fr}
.project-detail-page{max-width:760px}
}

/* v13 — member colors, linked calendar, modal containment, project copy */
.flow-project-modal{width:min(1120px,calc(100vw - 32px));max-width:1120px;overflow:hidden}
.project-form,.flow-assignment-section,.flow-edit-row,.flow-edit-row label{min-width:0}
.flow-assignment-section{overflow:hidden}
.flow-edit-row input,.flow-edit-row select{display:block;width:100%;min-width:0;box-sizing:border-box}
.flow-edit-row{grid-template-columns:50px minmax(110px,1fr) minmax(170px,1.45fr) minmax(180px,1.25fr) minmax(170px,1.3fr)}
.project-directory-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ececf1}
.project-directory-actions button{border:0;background:#fff;padding:12px 8px;color:#6959be;font-size:11px;font-weight:800}
.project-directory-actions button+button{border-left:1px solid #ececf1}
.project-directory-actions button:hover{background:#f6f4ff}
.project-detail-nav>div{display:flex;gap:7px}
.calendar-project{border-left:4px solid var(--member-color);background:var(--member-soft);color:var(--member-color);cursor:pointer;transition:.15s}
.calendar-project:hover{transform:translateY(-1px);box-shadow:0 4px 10px #00000012}
.calendar-project.complete{border-left-color:var(--member-color);background:var(--member-soft);color:var(--member-color);opacity:.65}
.step-status-summary{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.step-status-summary b,.step-status-summary i,.step-status-summary em{font-style:normal;font-size:8px;padding:4px 6px;border-radius:6px}
.step-status-summary b{background:#e8f7ee;color:#26784a}
.step-status-summary i{background:#eaf1ff;color:#3769aa}
.step-status-summary em{background:#fff2d9;color:#956717}
@media(max-width:900px){
.flow-edit-row{grid-template-columns:50px minmax(0,1fr) minmax(0,1fr);grid-template-areas:'day stage task' 'day owner criteria';align-items:end}
.flow-day{grid-area:day}
.flow-stage-name{grid-area:stage}
.flow-task-name{grid-area:task}
.flow-assignee{grid-area:owner}
.flow-criteria{grid-area:criteria}
}
@media(max-width:620px){
.flow-project-modal{width:100%;max-width:none}
.flow-edit-row{grid-template-columns:42px minmax(0,1fr);grid-template-areas:'day stage' 'day task' 'day owner' 'day criteria'}
.project-directory-actions{grid-template-columns:1fr}
.project-directory-actions button+button{border-left:0;border-top:1px solid #ececf1}
.project-detail-nav>div{flex-wrap:wrap;justify-content:flex-end}
}


/* v14 — STEP numbering and editable STEP deletion */
.flow-assignment-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.flow-assignment-head>div{display:flex;flex-direction:column;gap:3px}
.flow-assignment-head .btn{flex:0 0 auto;padding:8px 11px}
.flow-edit-row{grid-template-columns:64px minmax(110px,1fr) minmax(170px,1.45fr) minmax(180px,1.25fr) minmax(170px,1.3fr) 42px}
.flow-day{white-space:nowrap}
.flow-step-delete{align-self:center;width:38px;height:38px;border:1px solid #f0cccc;border-radius:10px;background:#fff4f4;color:#c64f4f;font-size:19px;font-weight:800;cursor:pointer}
.flow-step-delete span{display:none}
.flow-step-delete:hover{background:#c64f4f;color:#fff}
.flow-stage-day{width:auto;min-width:58px;padding:0 8px;white-space:nowrap}
@media(max-width:900px){
.flow-edit-row{grid-template-columns:64px minmax(0,1fr) minmax(0,1fr) 42px;grid-template-areas:'day stage task delete' 'day owner criteria delete'}
.flow-step-delete{grid-area:delete}
}
@media(max-width:620px){
.flow-assignment-head{align-items:flex-start}
.flow-edit-row{grid-template-columns:58px minmax(0,1fr) 38px;grid-template-areas:'day stage delete' 'day task delete' 'day owner delete' 'day criteria delete'}
.flow-step-delete{width:34px;height:100%;min-height:40px}
.flow-step-delete span{display:block;font-size:8px}
.flow-stage-day{min-width:54px}
}


/* v15 — inline project editing inside the dashboard */
.inline-project-editor{max-width:1480px;margin:0 auto;padding-bottom:92px}
.inline-editor-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg,#211b60,#6758dc);color:#fff;box-shadow:0 18px 44px #463a9d2b}
.inline-editor-heading span,.inline-step-head span{font-size:10px;font-weight:900;letter-spacing:.16em}
.inline-editor-heading span{color:#d8d2ff}
.inline-editor-heading h1{margin:5px 0 4px;font-size:27px}
.inline-editor-heading p{margin:0;color:#e2deff}
.inline-project-main{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:12px;padding:20px;border-radius:22px;background:#fff;box-shadow:0 12px 36px #27315b14}
.inline-project-main label,.inline-step-editor label{font-size:10px;font-weight:800;color:#626b80}
.inline-project-main input,.inline-project-main select,.inline-project-main textarea{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:12px;border:1px solid #dfe2eb;border-radius:11px;background:#fff;font:inherit;color:#20263a}
.inline-project-name{grid-column:span 2}
.inline-project-name input{font-size:17px;font-weight:800}
.inline-project-description{grid-column:1/-1}
.inline-step-editor{margin-top:15px;padding:20px;border-radius:22px;background:#fff;box-shadow:0 12px 36px #27315b14}
.inline-step-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:12px}
.inline-step-head h2{font-size:21px;margin:4px 0}
.inline-step-head p{margin:0;color:#7a8294;font-size:11px}
.inline-project-editor .flow-edit-row{box-shadow:0 4px 14px #242c5210}
.inline-editor-savebar{position:sticky;z-index:12;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:14px 16px;border:1px solid #ddd9f7;border-radius:17px;background:#fffffff2;backdrop-filter:blur(14px);box-shadow:0 14px 36px #25205c30}
.inline-editor-savebar span{font-size:11px;color:#6f778b}
.inline-editor-savebar .btn{padding:12px 22px;font-size:13px}
@media(max-width:1180px){
.inline-project-main{grid-template-columns:repeat(2,minmax(0,1fr))}
.inline-project-name,.inline-project-description{grid-column:1/-1}
}
@media(max-width:700px){
.inline-editor-heading,.inline-step-head,.inline-editor-savebar{align-items:flex-start;flex-direction:column}
.inline-project-main{grid-template-columns:1fr}
.inline-project-name,.inline-project-description{grid-column:auto}
.inline-editor-savebar .btn{width:100%}
}


/* v16 — compact calendar project selector with circular progress */
.project-switcher>button{display:grid;grid-template-columns:minmax(0,1fr) 54px;align-items:center;gap:12px;min-width:240px}
.project-switcher-copy{min-width:0}
.project-switcher-copy b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-project-progress{--calendar-rate:0%;position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#7060e7 var(--calendar-rate),#ece9fb 0);font-style:normal;box-shadow:inset 0 0 0 1px #dcd7f8}
.calendar-project-progress::before{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.project-switcher>button.active .calendar-project-progress::before{background:#f8f7ff}
.calendar-project-progress strong{position:relative;z-index:1;font-size:14px;color:#493aab;letter-spacing:-.04em}
.project-switcher>button.active .calendar-project-progress strong{color:#3f3199}
@media(max-width:600px){
.project-switcher>button{min-width:220px;grid-template-columns:minmax(0,1fr) 48px}
.calendar-project-progress{width:46px;height:46px}
.calendar-project-progress strong{font-size:12px}
}
/* ── 팀원 업무보드 compact 카드 계열 (v16 원본 이식 누락분) ─────────
   추출 필터 접두어에 compact 가 없어 STEP 카드의 배경·테두리·헤더 정렬,
   업무 추가 폼 3열 그리드가 전부 빠져 있었다 */
.compact-step-card{background:#fff;border:1px solid #e3e5ec;border-radius:17px;overflow:hidden;box-shadow:0 8px 24px rgba(37,44,75,.07)}
.compact-step-card>header{display:flex;justify-content:space-between;gap:10px;padding:15px 16px;background:#f6f5fb;border-bottom:1px solid #e5e5ec}
.compact-step-card>header span{font-size:8px;color:#6653c8;font-weight:900}
.compact-step-card>header h2{font-size:15px;margin:3px 0}
.compact-step-card>header p{font-size:8px;color:#82899a;margin:0}
.compact-step-card>header>strong{font-size:9px;color:#7666ca}
.compact-step-task{padding:10px 12px;border-bottom:1px solid #eeeff2}
.compact-step-task.complete{background:#f1faf4;opacity:.7}
.compact-step-task>button{display:flex;width:100%;gap:7px;border:0;background:transparent;text-align:left}
.compact-step-task>button i{font-style:normal;color:#6654c9}
.compact-step-task>button b{font-size:10px}
.compact-step-task>div:nth-child(2){display:flex;justify-content:space-between;align-items:center;margin:7px 0}
.compact-owner{display:inline-flex;align-items:center;gap:4px;font-size:8px}
.compact-owner>i{width:20px;height:20px;border-radius:6px;background:#e9e5ff;display:grid;place-items:center;font-style:normal;color:#5543b5}
.compact-owner.empty{color:#a57620}
.compact-step-task small{font-size:7px;color:#9299a8}
.compact-task-actions{display:flex;gap:4px}
.compact-task-actions button,.compact-task-actions select{border-radius:6px;padding:5px 7px;font-size:7px}
.compact-task-actions select{border:1px solid #dfe1e8;background:#fff}
.compact-add-task{padding:10px 12px;background:#fcfcfd}
.compact-add-task>input{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid #dedfe5;padding:7px 3px;font-size:9px}
.compact-add-task>div{display:grid;grid-template-columns:1fr 62px 53px;gap:4px;margin-top:6px}
.compact-add-task>div input,.compact-add-task>div select{min-width:0;border:1px solid #e0e2e8;border-radius:6px;padding:5px 3px;background:#fff;font-size:7px}
.compact-add-task button{border:0;border-radius:6px;background:#6250ca;color:#fff;font-size:7px;font-weight:900}
.compact-step-card>header{padding:18px}
.compact-step-card>header span{font-size:11px}
.compact-step-card>header h2{font-size:20px;line-height:1.35;margin:5px 0}
.compact-step-card>header p{font-size:11px;line-height:1.5}
.compact-step-card>header>strong{font-size:12px}
.compact-step-task{padding:13px 14px}
.compact-step-task>button{gap:9px}
.compact-step-task>button i{font-size:14px}
.compact-step-task>button b{font-size:14px;line-height:1.45}
.compact-owner{font-size:11px}
.compact-owner>i{width:25px;height:25px}
.compact-step-task small{font-size:10px}
.compact-task-actions{gap:6px}
.compact-task-actions button,.compact-task-actions select{font-size:10px;padding:7px 9px}
.compact-add-task{padding:13px 14px}
.compact-add-task>input{font-size:13px;padding:10px 4px}
.compact-add-task>div{grid-template-columns:1fr 76px 64px;gap:6px;margin-top:8px}
.compact-add-task>div input,.compact-add-task>div select{font-size:10px;padding:7px 5px}
.compact-add-task button{font-size:10px}
@media(max-width:680px){
.compact-step-card>header h2{font-size:19px}
.compact-step-task>button b{font-size:13px}
}
.compact-step-card{min-width:0}
.compact-step-card>header{min-height:112px}
.compact-step-task{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start;padding:15px 16px}
.compact-step-task>button{grid-column:1/-1;margin-bottom:5px}
.compact-step-task>button b{font-size:15px;white-space:normal;word-break:keep-all}
.compact-step-task>div:nth-child(2){grid-column:1/-1;margin:7px 0 10px}
.compact-task-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(180px,1fr) 105px;align-items:end;gap:8px}
.task-assignee-control{display:grid;gap:4px}
.task-assignee-control>span{font-size:10px;color:#747d91;font-weight:800}
.task-assignee-control select,.compact-task-actions>select{width:100%;min-height:38px;border:1px solid #daddE7;border-radius:8px;background:#fff;padding:8px 9px;font-size:12px;color:#3c4353}
.task-assignee-control select{border-color:#8d7ee3;background:#f7f5ff;color:#493aa7;font-weight:800}
.compact-add-task>div{grid-template-columns:minmax(135px,1fr) 85px 72px}
.compact-add-task>div input,.compact-add-task>div select,.compact-add-task button{min-height:36px;font-size:11px}
.compact-owner{font-size:12px}
.compact-step-task small{font-size:11px}
@media(max-width:950px){
.compact-step-card>header{min-height:auto}
}
@media(max-width:560px){
.compact-step-task{padding:14px 12px}
.compact-task-actions{grid-template-columns:1fr}
.compact-add-task>div{grid-template-columns:1fr 78px}
.compact-add-task button{grid-column:1/-1}
.task-assignee-control select,.compact-task-actions>select{font-size:13px}
}
.compact-step-card{display:flex;flex-direction:column;min-width:0;max-height:620px}
.compact-step-card>header{min-height:105px;flex:0 0 auto;padding:16px}
.compact-step-tasks{max-height:365px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#bcb4eb #f2f1f8}
.compact-step-tasks::-webkit-scrollbar{width:6px}
.compact-step-tasks::-webkit-scrollbar-track{background:#f2f1f8}
.compact-step-tasks::-webkit-scrollbar-thumb{background:#bcb4eb;border-radius:99px}
.compact-step-task{display:block;padding:11px 12px}
.compact-step-task>button{margin-bottom:4px}
.compact-step-task>button b{font-size:13px;line-height:1.4}
.compact-step-task>div:nth-child(2){margin:6px 0 8px}
.compact-owner{font-size:10px}
.compact-owner>i{width:22px;height:22px}
.compact-step-task small{font-size:9px}
.compact-task-actions{display:grid;grid-template-columns:minmax(125px,1fr) 82px;gap:5px}
.task-assignee-control{gap:2px}
.task-assignee-control>span{font-size:8px}
.task-assignee-control select,.compact-task-actions>select{min-height:32px;padding:6px;font-size:10px}
.compact-add-task{flex:0 0 auto;padding:10px 12px}
.compact-add-task>input{font-size:11px;padding:8px 3px}
.compact-add-task>div{grid-template-columns:minmax(105px,1fr) 68px 58px;gap:4px;margin-top:6px}
.compact-add-task>div input,.compact-add-task>div select,.compact-add-task button{min-height:31px;padding:5px 3px;font-size:9px}
@media(max-width:760px){
.compact-step-card{max-height:650px}
.compact-step-card>header{min-height:auto}
.compact-step-tasks{max-height:390px}
}
/* v12 — compact each individual task section */ .compact-step-task{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(130px,1fr) 80px!important;gap:7px 8px!important;align-items:center!important;min-height:0!important;height:auto!important;padding:10px 12px!important}
.compact-step-task>button{grid-column:1/-1!important;margin:0!important;min-height:0!important;padding:0!important;align-items:center}
.compact-step-task>button b{font-size:13px;line-height:1.35}
.compact-step-task>div:nth-child(2){grid-column:1!important;margin:0!important;min-height:32px;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px}
.compact-task-actions{grid-column:2/-1!important;display:grid!important;grid-template-columns:minmax(0,1fr) 80px!important;gap:5px!important;align-items:center!important;margin:0!important}
.task-assignee-control{display:block!important}
.task-assignee-control>span{display:none!important}
.task-assignee-control select,.compact-task-actions>select{height:32px!important;min-height:32px!important;padding:5px 7px!important;font-size:10px!important}
.compact-owner{white-space:nowrap}
.compact-step-tasks{max-height:330px}
.compact-add-task{padding:9px 12px}
@media(max-width:1180px){
.compact-step-task{grid-template-columns:minmax(0,1fr) minmax(150px,1fr) 85px!important}
}
@media(max-width:760px){
.compact-step-task{grid-template-columns:1fr 85px!important}
.compact-step-task>div:nth-child(2){grid-column:1/-1!important}
.compact-task-actions{grid-column:1/-1!important;grid-template-columns:1fr 85px!important}
}
.compact-step-task[style]{border-left:4px solid var(--member-color)}
.compact-owner:not(.empty){padding:4px 7px 4px 4px;border-radius:8px;background:var(--member-soft);color:var(--member-color);font-weight:800}
.compact-owner:not(.empty)>i{background:var(--member-color);color:#fff}
.task-assignee-control select{border-color:var(--member-color,#8d7ee3);background:var(--member-soft,#f7f5ff);color:var(--member-color,#493aa7)}
.compact-step-card.calendar-focus{border:2px solid #705de2;box-shadow:0 0 0 5px #705de21a,0 16px 38px #4e3dbd2b;animation:stepFocusPulse 1.4s ease-out 2}
.compact-step-card>header>strong{white-space:nowrap;min-width:55px;text-align:center}

/* ── 프로젝트 등록 모달 레이아웃 정리 ─────────────────────────
   STEP 8개면 카드가 1300px 가 되어 화면 위·아래로 잘리고
   overflow:hidden 때문에 저장 버튼에 도달조차 못 하던 문제 수정.
   카드=세로 flex / 제목·액션=고정 / 폼=유일한 스크롤 영역           */
.modal-card.flow-project-modal{
display:flex;flex-direction:column;padding:0;
max-height:calc(100vh - 40px);overflow:hidden}
.flow-project-modal .modal-title{
flex:0 0 auto;margin:0;padding:22px 25px 16px;border-bottom:1px solid #eceef6}
.flow-project-modal .project-form{
flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
align-content:start;padding:20px 25px 0;
grid-template-columns:repeat(4,minmax(0,1fr));
/* auto 행은 폼 높이에 맞춰 압축된다 — 내용 높이를 지켜 폼이 스크롤되게 */
grid-auto-rows:min-content}
/* overflow:hidden 이면 섹션이 클리핑 컨테이너가 되어 STEP 행이 422px 로 눌린 채
   잘리고 스크롤에도 기여하지 못한다. 가로는 flow-edit-row 의 minmax 가 막아준다 */
.flow-project-modal .flow-assignment-section{overflow:visible}
.flow-project-modal .project-form>label{grid-column:auto}
.flow-project-modal .project-form .wide,
.flow-project-modal .project-form fieldset{grid-column:1/-1}
.flow-project-modal .form-actions{
position:sticky;bottom:0;z-index:2;margin:4px -25px 0;
padding:14px 25px;background:#fff;border-top:1px solid #eceef6}
body.dark .flow-project-modal .modal-title,
body.dark .flow-project-modal .form-actions{border-color:#263149}
body.dark .flow-project-modal .form-actions{background:#121b2e}
@media(max-width:1080px){
.flow-project-modal .project-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
.flow-project-modal .project-form{
grid-template-columns:minmax(0,1fr);padding:16px 18px 0}
.flow-project-modal .modal-title{padding:18px 18px 14px}
.flow-project-modal .form-actions{margin:4px -18px 0;padding:12px 18px}
}

/* ── 인라인 프로젝트 편집기 세로 1단 복원 ──────────────────────
   설계 의도는 정보카드 → STEP카드 → 저장바 세로 흐름이다
   (.inline-step-editor 의 margin-top, .inline-editor-savebar 의 sticky bottom).
   그런데 전역 form{grid-template-columns:1fr 1fr} 이 폼을 2열로 만들어
   정보카드가 STEP 카드 높이(8단계면 900px+)만큼 stretch 되고,
   그 안의 label(=grid)까지 늘어나 라벨과 입력이 수백 px 벌어졌다.      */
#inlineProjectForm{display:block}
/* 남는 높이가 생겨도 행·라벨이 늘어나지 않도록 */
.inline-project-main{align-content:start}
.inline-project-main>label,.inline-step-editor label{align-content:start}
/* 원본 5열에서는 상태 select 가 혼자 둘째 줄로 밀리고 오른쪽 4칸이 비었다.
   6열로 넓혀 프로젝트명(span 2)+시작일+목표달성일+긴급도+상태를 한 줄에.
   1180px 이하 접힘 규칙을 덮지 않도록 min-width 로 데스크톱에만 적용 */
@media(min-width:1181px){
.inline-project-main{grid-template-columns:1.7fr repeat(5,minmax(0,1fr))}
}

/* ── 팀원 업무보드 카드 레이아웃 다듬기 ─────────────────────────
   ① 전역 .empty{text-align:center;padding:44px}(빈 상태 안내박스용)가
      class="compact-owner empty" 에 누출돼 미배정 배지가 102px 로 부풀고
      카드 안에 거대한 빈 공간이 생겼다. :not(.empty) 와 같은 여백으로 복원 */
.compact-owner.empty{padding:4px 7px 4px 4px;text-align:left}
/* ② 날짜가 "2026-08-" / "11" 로 끊기던 문제 */
.compact-step-task small{white-space:nowrap}
/* ③ 메타행은 양끝 벌리기보다 왼쪽에 모아 읽기 좋게 */
.compact-step-task>div:nth-child(2){justify-content:flex-start!important;gap:9px}
/* ④ 헤더 오른쪽 STEP 배지는 왼쪽 라벨과 같은 텍스트라 중복 — 숨김 */
.compact-step-card>header>strong{display:none}
/* ⑤ 배지 줄과 제목 사이 간격 정리 */
.compact-step-card>header .step-status-summary{margin-top:8px}
/* ⑥ 전역 header{margin-bottom:28px}(페이지 상단 헤더용)가 카드 안 <header> 에도
   걸려 회색 헤더와 첫 업무 사이가 28px 벌어졌다. 헤더에 border-bottom 이 있고
   업무 항목이 padding 10px 을 가지므로 0 으로 충분 */
.compact-step-card>header{margin-bottom:0}
/* ⑦ 담당자 색 세로 바 제거 — 미배정이면 회색 막대로만 보인다.
   담당자 색 구분은 담당자 배지(--member-soft/--member-color)에 그대로 남는다 */
.compact-step-task[style]{border-left:0}

/* ── 프로젝트 삭제 버튼 ────────────────────────────────────────
   디렉터리 카드의 액션이 2개(복사·수정) 고정 2열이었는데 삭제가 붙어 3개가 된다.
   개수에 맞춰 균등 분할하도록 flex 로 바꾼다(권한에 따라 2개일 때도 정상) */
.project-directory-actions{display:flex}
.project-directory-actions>button{flex:1 1 0;min-width:0}
.project-directory-actions>button.danger{color:#c9453d}
.project-directory-actions>button.danger:hover{background:#fdf3f2}
.project-detail-nav button.danger{color:#c9453d;border-color:#f1d6d3}
.project-detail-nav button.danger:hover{background:#fdf3f2}
@media(max-width:620px){
/* 기존 grid-template-columns:1fr(세로 쌓기)는 flex 에서 무효 — 방향으로 대체 */
.project-directory-actions{flex-direction:column}
}

/* ── 복수 담당자 칩 ────────────────────────────────────────────
   담당자가 여러 명이면 칩이 여러 개 → 줄바꿈 허용하고 각 칩에 해제(×) 버튼 */
.compact-step-task>div:nth-child(2){flex-wrap:wrap;row-gap:5px}
.compact-owner{align-items:center}
.compact-owner .owner-remove{
border:0;background:transparent;padding:0 0 0 3px;margin-left:1px;line-height:1;
color:inherit;opacity:.5;font-size:12px;cursor:pointer}
.compact-owner .owner-remove:hover{opacity:1}
.compact-owner.empty .owner-remove{display:none}
.compact-task-actions select[disabled]{opacity:.5;cursor:not-allowed}

/* ── 업무 수정(✎) 버튼 ─────────────────────────────────────────
   담당자 / 상태 / 수정 3열. 원본이 !important 로 2열을 고정해 두었으므로
   같은 강도로 덮고, 좁은 화면 단계도 함께 재정의한다(안 하면 3열이 뭉개진다) */
.compact-task-actions{grid-template-columns:minmax(0,1fr) 80px 34px!important}
.compact-task-edit{
height:32px;padding:0;border:1px solid #daddE7;border-radius:8px;
background:#fff;color:#6959be;font-size:13px;line-height:1;cursor:pointer}
.compact-task-edit:hover{background:#f6f4ff;border-color:#8d7ee3}
@media(max-width:760px){
.compact-task-actions{grid-template-columns:1fr 85px 34px!important}
}
@media(max-width:560px){
.compact-task-actions{grid-template-columns:1fr!important}
}

/* ── 더블클릭 인라인 편집 ──────────────────────────────────────
   수정 가능한 텍스트임을 hover 로 알리고, 편집 중에는 흰 입력칸으로 바꾼다.
   글꼴은 inherit — 편집 전후 글자 크기가 같아 레이아웃이 튀지 않는다 */
[data-inline-edit]{cursor:text;border-radius:7px;transition:background .12s}
[data-inline-edit]:hover{background:#6657d914;outline:1px dashed #b3aae6;outline-offset:3px}
/* 히어로(어두운 보라 배경)에서는 밝게 */
.project-detail-title [data-inline-edit]:hover{background:#ffffff1f;outline-color:#ffffff70}
.inline-field-input{
display:block;width:100%;box-sizing:border-box;font:inherit;letter-spacing:inherit;
padding:3px 8px;border:1px solid #8d7ee3;border-radius:8px;
background:#fff;color:#20263a;resize:vertical}
.inline-field-input:focus{outline:2px solid #c7bffa;outline-offset:1px}

/* ── STEP 삭제 버튼 ──────────────────────────────────────────── */
.step-delete-btn{
flex:none;align-self:flex-start;width:26px;height:26px;padding:0;
border:1px solid transparent;border-radius:8px;background:transparent;
color:#9aa1af;font-size:16px;line-height:1;cursor:pointer;transition:.12s}
.step-delete-btn:hover{background:#fdf1f0;border-color:#f0d5d2;color:#c9453d}

/* ── 업무 도구 묶음(수정 ✎ / 삭제 ×) ────────────────────────────
   4열로 나누면 담당자 select 가 60px 대로 눌린다 → 두 버튼을 한 열에 묶는다 */

.compact-task-tools{display:flex;gap:4px;min-width:0}
.compact-task-tools>button{
flex:1 1 0;min-width:0;height:32px;padding:0;
border:1px solid #daddE7;border-radius:8px;background:#fff;
font-size:13px;line-height:1;cursor:pointer;transition:.12s}
.compact-task-tools>.compact-task-edit{color:#6959be}
.compact-task-tools>.compact-task-edit:hover{background:#f6f4ff;border-color:#8d7ee3}
.compact-task-tools>.compact-task-del{color:#9aa1af}
.compact-task-tools>.compact-task-del:hover{background:#fdf1f0;border-color:#f0d5d2;color:#c9453d}
/* 업무 제목은 더블클릭으로 고칠 수 있다 — hover 로 알린다 */
.compact-step-task [data-inline-edit]{cursor:text}
@media(max-width:760px){

}
@media(max-width:560px){
.compact-task-actions{grid-template-columns:1fr!important}
}

/* ── "＋ 내가 담당" 버튼 ────────────────────────────────────────
   미배정 업무를 팀원이 스스로 가져가는 경로. 담당자 칩과 같은 줄에 둔다 */
.claim-me-btn{
flex:none;padding:4px 9px;border:1px dashed #b3aae6;border-radius:8px;
background:#faf9ff;color:#5946c6;font-size:10px;font-weight:800;
white-space:nowrap;cursor:pointer;transition:.12s}
.claim-me-btn:hover{background:#efecff;border-style:solid;border-color:#8d7ee3}

/* 제목 더블클릭 시 텍스트가 선택돼 지저분해지는 것 방지 (편집칸은 선택 가능하게) */
.compact-step-task [data-open-task] b{user-select:none}
.inline-field-input{user-select:text}

/* ── 업무보드 모바일 반응형 (≤560px) ──────────────────────────────────
   좁은 화면에서는 장식보다 밀도. 넓은 화면용으로 둔 큰 히어로·라벨·여백을 줄여
   한 화면에 STEP 과 업무가 더 들어오게 한다. 실측(410px)에서
   히어로 246px · 업무카드 193px · 상단 버튼 2줄 · 하단 네비에 본문 가림. */
@media(max-width:560px){
/* 하단 고정 네비가 66px 인데 main 아래 여백이 40px 이라 마지막 카드가 가렸다 */
.project-detail-page,.project-directory{padding-bottom:46px}

/* 상단 액션 — 버튼 4개를 2×2 로. 예전엔 4개가 2줄로 깨졌고(86px),
   "목록만 전체 폭 + 나머지 2열"로 두니 3줄(119px)이 돼 더 나빠졌다.
   >div 를 display:contents 로 투명하게 만들어 4개 모두 같은 그리드에 태운다. */
.project-detail-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch}
.project-detail-nav>div{display:contents}
.project-detail-nav button{width:auto;padding:9px 6px;font-size:11px;white-space:nowrap}

/* 히어로 — "PROJECT" 라벨과 거대한 진행률은 좁은 화면에서 자리만 차지한다 */
.project-detail-title{padding:15px 16px;border-radius:16px;gap:8px}
.project-detail-title>div:first-child>span{display:none}
.project-detail-title h1{font-size:19px;margin:0 0 3px}
.project-detail-title p{font-size:11px;line-height:1.45}
.project-detail-title>div:last-child{
display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px;text-align:left}
.project-detail-title>div:last-child strong{font-size:20px}
.project-detail-title>div:last-child small,
.project-detail-title>div:last-child em{font-size:10px;margin:0}

/* STEP 카드 헤더 여백 축소 */
.compact-step-card>header{padding:13px 14px}
.compact-step-card>header h2{font-size:16px}
.compact-step-card>header p{font-size:10px}

/* 업무 카드 — 액션이 세로로 쌓여 카드가 193px 였다. 한 줄 3열로 되돌린다
   (담당자 select 는 남는 폭을 모두 가져가므로 글자가 잘리지 않는다) */
.compact-task-actions{grid-template-columns:minmax(0,1fr) 74px 56px!important}
.compact-step-task{padding:10px 11px!important}
.compact-task-tools>button{height:30px}

/* 업무 추가 폼 압축 */
.compact-add-task{padding:9px 11px}
.compact-add-task>div{grid-template-columns:minmax(0,1fr) 58px 52px}

/* 프로젝트 목록 화면 — 제목과 만들기 버튼이 한 줄에 안 들어간다 */
.project-directory-head{flex-direction:column;align-items:stretch;gap:10px}
.project-directory-head button{width:100%}
}

/* ── 실행 캘린더: 모바일 전용 표시 (캘린더 앱 방식) ────────────────────
   넓은 화면은 지금처럼 셀 안에 업무 카드를 그대로 보여준다.
   좁은 화면은 셀 폭이 410/7≈52px 라 제목이 뭉개지므로 **셀에는 점만**,
   고른 날짜의 일정은 캘린더 **아래 리스트**로 편다. */
.cal-dots,.cal-daylist{display:none}

@media(max-width:640px){
.project-calendar-day,.empty-day{min-height:54px;padding:5px 2px}
.project-calendar-day{cursor:pointer;text-align:center;position:relative}
.project-calendar-week b{padding:7px 0;font-size:10px}
/* 날짜 숫자에 원형 강조 — 오늘/선택 구분 */
.project-calendar-day>strong{
display:inline-grid;place-items:center;width:26px;height:26px;
border-radius:50%;font-size:12px;line-height:1}
.project-calendar-day.today{background:transparent}
.project-calendar-day.today>strong{background:#efecff;color:#5946c6}
.project-calendar-day.picked>strong{background:#6657d9;color:#fff}
/* 일정 유무는 점으로 */
.cal-events{display:none}
.cal-dots{display:flex;gap:2px;align-items:center;justify-content:center;margin-top:3px;min-height:7px}
.cal-dots i{width:5px;height:5px;border-radius:50%;background:var(--member-color,#8d7ee3);flex:none}
.cal-dots em{font-style:normal;font-size:8px;color:#8b93a5;line-height:1}

/* 고른 날짜의 일정 리스트 */
.cal-daylist{display:block;border-top:1px solid #e8eaf1;padding:12px 13px 4px}
.cal-daylist-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.cal-daylist-head b{font-size:13px;color:#2b3245}
.cal-daylist-head span{font-size:11px;color:#8b93a5}
.cal-daylist-item{
display:flex;align-items:center;gap:9px;width:100%;margin-bottom:7px;padding:9px 10px;
border:1px solid #e7e8ef;border-left:4px solid var(--member-color,#8d7ee3);
border-radius:11px;background:#fff;text-align:left;cursor:pointer}
.cal-daylist-item>i{
flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
background:var(--member-soft,#eeeafd);color:var(--member-color,#5946c6);
font-style:normal;font-size:11px;font-weight:900}
.cal-daylist-item>span{display:grid;gap:2px;min-width:0;flex:1}
.cal-daylist-item>span b{font-size:12px;color:#242a3a;line-height:1.35}
.cal-daylist-item>span small{font-size:10px;color:#8b93a5}
.cal-daylist-item>em{
flex:none;font-style:normal;font-size:9px;font-weight:800;padding:3px 7px;
border-radius:99px;background:#f1f2f6;color:#727a8c}
.cal-daylist-item.complete{opacity:.62}
.cal-daylist-item.complete>em{background:#e7f6ed;color:#277a49}
.cal-daylist-empty{padding:18px 4px 22px;text-align:center;color:#9aa1af;font-size:11px}
}


/* ── 프로젝트 휴지통 (2026-09-17) ─────────────────────────────── */
.project-trash{margin-top:18px;border:1px dashed #d6d9e4;border-radius:14px;background:#fbfbfd}
.project-trash summary{padding:12px 16px;font-size:12.5px;font-weight:800;color:#727a8c;cursor:pointer;user-select:none}
.project-trash[open] summary{border-bottom:1px solid #ececf2}
.project-trash-list{padding:6px 12px 10px}
.project-trash-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 6px;border-bottom:1px solid #f0f1f5}
.project-trash-row:last-child{border-bottom:0}
.project-trash-row>span:first-child{display:grid;gap:2px;min-width:0}
.project-trash-row b{font-size:13px;color:#2b3245}
.project-trash-row small{font-size:10.5px;color:#8b93a5}
.project-trash-actions{display:flex;gap:6px;flex:none}


/* ── 2026-09-17 요청 묶음: 일괄 선택 · 담당자 검색 · 날짜 프리셋 · 드래그 ── */
/* 일괄 선택 체크박스 — 카드 그리드를 흩트리지 않게 절대배치 */


.compact-step-task.bulk-on{outline:2px solid #b3aae6;outline-offset:-2px;background:#faf9ff}

/* 일괄 액션바 — 하단 고정 */
.bulk-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:40;
display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:14px;
background:#20263a;color:#fff;box-shadow:0 12px 34px #0007}
.bulk-bar b{font-size:13px;white-space:nowrap}
.bulk-bar input[type=date]{border:0;border-radius:8px;padding:6px 8px;font:inherit;font-size:12px}
.bulk-bar .btn{border-color:#ffffff44;color:#fff;background:transparent}
.bulk-bar .btn.primary{background:#6657d9;border-color:#6657d9}

/* 날짜 프리셋 칩 */
.date-presets{display:flex;gap:4px;flex-wrap:wrap}
.date-presets button{border:1px solid #ddd9f2;background:#f7f5ff;color:#5946c6;
border-radius:99px;padding:3px 9px;font-size:10px;font-weight:800;cursor:pointer}
.date-presets button:hover{background:#efecff}
.compact-add-task .date-presets{margin:6px 0 2px}
.bulk-presets button{border-color:#ffffff33;background:#ffffff14;color:#e8e6ff}

/* 카드 날짜 표기 — "9/17(수)" + D-day 배지 */
.task-day{display:inline-flex;gap:5px;align-items:center;white-space:nowrap}
.task-day em{font-style:normal;font-weight:800;font-size:9px;padding:1px 6px;border-radius:99px}
.dd-late{background:#fdeceb;color:#c9453d}
.dd-today{background:#fff4df;color:#a36b0e}
.dd-left{background:#eef1f6;color:#5a6376}

/* 담당자 검색 입력 */
.assignee-search{width:100%;min-height:32px;box-sizing:border-box;border:1px solid #8d7ee3;
border-radius:8px;padding:5px 8px;background:#f7f5ff;color:#493aa7;font:inherit;font-size:11px;font-weight:700}
.assignee-search::placeholder{color:#9d92dd;font-weight:700}

/* 드래그 */
.drag-handle{display:inline-grid;place-items:center;width:24px;height:32px;flex:none;
color:#b6bcc9;font-size:13px;cursor:grab;user-select:none;border-radius:8px}
.drag-handle:hover{background:#f1f0fa;color:#6657d9}
.compact-step-card>header[draggable=true]{cursor:grab}
.compact-step-card.drag-ghost,.compact-step-task.drag-ghost{opacity:.45}
.compact-step-card.drop-hint{outline:2px dashed #6657d9;outline-offset:2px}

@media(max-width:560px){
.bulk-bar{left:8px;right:8px;transform:none;flex-wrap:wrap}
}


/* ── 업무 카드 v2 (2026-09-18 재설계) ──────────────────────────────────
   ⚠️ v16 원본은 카드를 3열 grid 로 두고 `>button`·`>div:nth-child(2)` 로 배치했다.
      자식을 하나라도 끼우면 순서 규칙이 깨진다(체크박스 추가로 실제로 깨졌다).
      v2 는 **세로 flex + 클래스 지정**이라 자식이 늘어도 무너지지 않는다.
   여백: 행 간격 7px, 카드 안쪽 12px — 요청대로 숨 쉴 틈을 준다. */
.compact-step-task.v2{
display:flex!important;flex-direction:column;gap:7px;
/* ⚠️ v16 원본의 `align-items:center!important` 는 grid 전제였다. 세로 flex 에서는
   그게 **가로 중앙정렬**이 되어 각 행이 내용 폭으로 줄고 왼쪽에 빈 띠가 생긴다
   (2026-09-18 1차 배포에서 제목이 가운데로 밀려 보인 원인). 늘리기로 되돌린다. */
align-items:stretch!important;
padding:12px 13px!important;position:static}
.compact-step-task.v2>*{grid-column:auto!important}

/* 1행 — 선택 체크박스 · 제목 · 드래그 핸들 */
.compact-step-task.v2 .task-head{display:flex;align-items:flex-start;gap:9px;min-width:0}
.compact-step-task.v2 .task-head>button{
flex:1;min-width:0;display:block;margin:0!important;padding:0!important;
border:0;background:transparent;text-align:left;cursor:pointer}
.compact-step-task.v2 .task-head>button>b{
font-size:13px;line-height:1.4;white-space:normal;word-break:keep-all;color:#242a3a}
.compact-step-task.v2.complete .task-head>button>b{text-decoration:line-through;color:#6c7488}
.bulk-pick{
flex:none;width:16px;height:16px;margin-top:1px;
accent-color:#6657d9;cursor:pointer}
.compact-step-task.v2.bulk-on{outline:2px solid #8d7ee3;outline-offset:-2px;background:#faf9ff}
.compact-step-task.v2 .drag-handle{flex:none;width:20px;height:20px;font-size:12px}

/* 2행 — 담당자 · 내가 담당 · 일자 칩 */
.compact-step-task.v2 .task-meta{
display:flex!important;align-items:center;flex-wrap:wrap;gap:5px 7px;
min-height:0!important;margin:0!important}
.compact-step-task.v2 .task-meta .date-chip{margin-left:auto}

/* 3행 — 담당자 검색 · 상태 · 도구 */
.compact-step-task.v2 .compact-task-actions{
display:grid!important;grid-column:auto!important;
grid-template-columns:minmax(0,1fr) 76px 62px!important;gap:6px!important;align-items:center}
.compact-step-task.v2 .compact-task-tools{display:flex;gap:4px}

/* 일자 칩 — 카드·등록 폼·일괄 바 공용 */
.date-chip{
display:inline-flex;align-items:center;gap:5px;flex:none;
border:1px solid #e1e3ec;border-radius:99px;background:#fff;
padding:3px 10px;font:inherit;font-size:10.5px;font-weight:800;color:#5a6376;
white-space:nowrap;cursor:pointer;transition:.12s}
.date-chip:hover{border-color:#8d7ee3;background:#f7f5ff;color:#493aa7}
.date-chip em{font-style:normal;font-weight:800;font-size:9px;padding:1px 6px;border-radius:99px}
.compact-add-task .form-date{font-size:11px;padding:6px 11px;width:100%;justify-content:center}
.bulk-date-chip{background:#ffffff1f;border-color:#ffffff33;color:#fff;font-size:12px;padding:6px 12px}
.bulk-date-chip:hover{background:#ffffff33;border-color:#fff;color:#fff}

/* 등록 폼 — 일자 칩 · 긴급도 · 등록 3열 */
.compact-add-task>div{grid-template-columns:minmax(0,1.1fr) 62px 56px!important}

/* 날짜 팝오버 */
.date-pop{
position:fixed;z-index:60;width:216px;padding:10px;
border:1px solid #e1e3ec;border-radius:14px;background:#fff;
box-shadow:0 16px 40px #20263a29}
.date-pop-quick{display:grid;gap:4px}
.date-pop-quick button{
display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
border:1px solid transparent;border-radius:9px;background:#f8f8fc;
padding:7px 10px;font:inherit;cursor:pointer;text-align:left}
.date-pop-quick button:hover{background:#efecff;border-color:#c7bffa}
.date-pop-quick button.on{background:#6657d9;border-color:#6657d9}
.date-pop-quick b{font-size:11.5px;font-weight:800;color:#2b3245}
.date-pop-quick small{font-size:10px;color:#8b93a5}
.date-pop-quick button.on b,.date-pop-quick button.on small{color:#fff}
.date-pop-cal{display:grid;gap:4px;margin-top:9px;padding-top:9px;
border-top:1px solid #eceef4;font-size:10px;font-weight:800;color:#8b93a5}
.date-pop-cal input{
border:1px solid #daddE7;border-radius:9px;padding:7px 8px;font:inherit;font-size:11.5px}

body.dark .date-pop{background:#121b2e;border-color:#263149}
body.dark .date-pop-quick button{background:#1b2540}
body.dark .date-pop-quick b{color:#e7ecf7}

@media(max-width:560px){
.compact-step-task.v2 .compact-task-actions{grid-template-columns:minmax(0,1fr) 74px 58px!important}
.date-pop{width:calc(100vw - 24px);max-width:260px}
}