.task-preview{position:relative;overflow:hidden;background:linear-gradient(135deg,#2d5947 0%,#3c6d52 100%);color:#f4f8ee;border:0;border-radius:24px;padding:22px 24px 24px;margin:0 0 32px;max-width:760px;box-shadow:0 18px 36px -22px #1c3a2acc}
.task-preview:after{content:'';position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:#e5f0d91a;pointer-events:none}
.task-preview h2{position:relative;color:#fff;font-size:clamp(22px,4.8vw,28px);font-weight:800;line-height:1.3;margin:14px 0 10px}
.task-preview p{position:relative;line-height:1.6;color:#d9e7d0;margin:10px 0 18px}
.task-preview-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;background:#e5f0d9;color:#1f3b2b;font-size:13px;font-weight:800;letter-spacing:.02em}
.task-preview-kicker i{width:8px;height:8px;border-radius:50%;background:#5f9a53;box-shadow:0 0 0 0 #5f9a5399;animation:task-pulse 2s ease-out infinite}
@keyframes task-pulse{0%{box-shadow:0 0 0 0 #5f9a5399}70%{box-shadow:0 0 0 8px #5f9a5300}100%{box-shadow:0 0 0 0 #5f9a5300}}
.task-preview-meta{position:relative;display:flex;flex-wrap:wrap;gap:6px}.task-preview-meta span{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:#ffffff1f;color:#f4f8ee}
.task-preview .btn.link{position:relative;color:#e5f0d9;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.task-preview .btn.primary{position:relative;background:#e5f0d9;border-color:#e5f0d9;color:#1f3b2b;font-weight:800}.task-preview .btn.primary:hover{background:#fff}
.task-preview :focus-visible{outline:3px solid #f0c75e;outline-offset:3px}.task-preview-head,.task-card-top,.task-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.task-fab{position:fixed;right:24px;bottom:max(20px,env(safe-area-inset-bottom));z-index:25;display:flex;align-items:center;gap:10px;min-height:56px;padding:12px 20px;border:1px solid #4c705a;border-radius:28px;background:#2d5947;color:white;font-family:inherit;font-size:15px;font-weight:700;box-shadow:0 6px 20px #25432c33;cursor:pointer}
.task-fab strong{background:#e5f0d9;color:#264632;border-radius:20px;padding:3px 8px}.task-fab:active{transform:translateY(2px);scale:.98}
body.has-task-fab .main{padding-bottom:120px}.task-sheet{width:min(640px,calc(100% - 32px))}.task-sheet .focus-dialog-head{position:sticky;top:0;z-index:1;background:#fafbf6;border-bottom:1px solid #e6eadf;margin-bottom:12px}.task-project{margin:0 0 16px}
.task-sort{display:flex;align-items:center;gap:12px;font-size:14px}.task-sort select{flex:1;min-width:0;min-height:48px;padding:8px;border:1px solid #c9d5bd;border-radius:12px;background:white;font-size:16px}
.task-list{display:grid;gap:14px}.task-group-title{font-size:15px;font-weight:800;margin:20px 0 0;color:#264632}.task-card{padding:18px;border:1px solid #dce4d2;border-radius:20px;background:white;overflow-wrap:anywhere}.task-card h3{font-size:19px;margin:14px 0 8px}.task-card p{margin:8px 0;font-size:14px}.task-card-top{font-size:12px;flex-wrap:wrap}.task-state{display:inline-flex;font-size:12px;font-weight:700;padding:5px 10px;border-radius:12px;background:#eaf1de;color:#37573f}.task-stage{font-weight:700}.task-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:#52604d;margin:12px 0}
.task-detail{overflow-wrap:anywhere}.task-detail h1{font-size:clamp(26px,5vw,36px);line-height:1.35}.task-detail-head{font-size:13px;margin-bottom:20px}.task-detail-project{margin:0 0 8px;font-size:13px;color:#607058}.task-timeline{list-style:none;padding:0;margin:26px 0;display:grid;gap:0}.task-timeline li{display:flex;gap:14px;align-items:flex-start;position:relative;padding:0 0 22px}.task-timeline li:not(:last-child):before{content:'';position:absolute;left:18px;top:36px;bottom:0;border-left:2px solid #dde6d3}.task-step-dot{width:38px;height:38px;flex:none;border:1px solid #d2ddc7;border-radius:50%;display:grid;place-items:center;background:#f0f3e9}.task-timeline .done .task-step-dot{background:#476d51;color:white}.task-timeline .current .task-step-dot{border:2px solid #476d51;background:#e0eccc}.task-timeline small{display:block;margin-top:5px;color:#607058}.task-next-box{padding:22px;background:#f0f4e8;border-radius:20px;line-height:1.7}.task-settings{margin:20px 0;border:1px solid #d6decd;border-radius:16px;padding:16px}.task-settings summary{min-height:44px;cursor:pointer;font-weight:700}.task-settings form{display:grid;gap:10px;padding-top:10px}.task-settings input,.task-settings select{box-sizing:border-box;width:100%;min-width:0;min-height:48px;font-size:16px;background:white;border:1px solid #cad5bd;border-radius:12px;padding:10px}.task-detail .btn,.task-preview .btn,.task-card .btn{min-height:48px;white-space:normal}.task-card .btn{width:100%}.task-card .btn.soft{background:#fff;border:1.5px solid #2d5947;color:#1f3b2b;font-weight:700}.task-card .btn.soft:hover{background:#eef4e6}
@media(max-width:600px){.task-preview{padding:18px;border-radius:20px}.task-fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100% - 32px)}.task-sheet{width:100%}.task-card{padding:16px}.task-next-box{padding:18px}.task-detail-head{gap:6px}.task-detail-head .btn{padding-left:0}.task-preview-head .btn{padding-right:0}}
@media(prefers-reduced-motion:reduce){.task-fab:active{transform:none;scale:none}.task-preview-kicker i{animation:none}}
@media(max-width:600px){.task-detail{padding-bottom:92px}.task-detail .task-next-box>.btn{position:fixed;left:16px;bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100% - 32px);z-index:20;box-shadow:0 0 0 8px #fafbf6,0 4px 20px #263c2333}.task-detail:has(.task-settings[open]) .task-next-box>.btn{position:static;width:100%;box-shadow:none}}

/* SPEC-013 r0.3: one scrolling body inside the rounded task sheet. */
.task-sheet{overflow:hidden}
.task-sheet[open]{display:flex;flex-direction:column}
.task-sheet .focus-dialog-head,.task-sheet .focus-dialog-actions{position:static;flex:none}
.task-sheet .focus-dialog-head{margin-bottom:0;padding-bottom:16px}
.task-sheet .focus-dialog-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#789367 #edf1e6;scrollbar-gutter:stable;padding-top:16px;scroll-padding-block:16px;margin:6px 8px 6px 0}
.task-sheet .focus-dialog-body::-webkit-scrollbar{width:6px}
.task-sheet .focus-dialog-body::-webkit-scrollbar-track{background:#edf1e6;border-radius:999px}
.task-sheet .focus-dialog-body::-webkit-scrollbar-thumb{background:#789367;border-radius:999px}
.task-sheet .focus-dialog-body::-webkit-scrollbar-thumb:hover{background:#476d51}
@supports selector(::-webkit-scrollbar){.task-sheet .focus-dialog-body{scrollbar-width:auto;scrollbar-color:auto}.task-sheet .focus-dialog-body::-webkit-scrollbar-button{display:none;width:0;height:0}}
/* SPEC-013 r0.4: 카드 상단 한 행 [상태 뱃지] [컴팩트 5단계] [관련 분야]. r0.3의 박스형 그래프를 대체한다. */
.task-card{container:task-card/inline-size}
.task-card-top.has-progress{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:8px}
.task-card-top .task-state{white-space:nowrap}
.task-card-top.has-progress .task-state{justify-self:start}
.task-area{min-width:0;font-size:12px;line-height:1.45;color:#52604d;text-align:right;word-break:keep-all;overflow-wrap:anywhere}
.task-card-top.has-progress .task-area{justify-self:end}
.task-progress-track{display:flex;align-items:center;list-style:none;padding:0;margin:0;height:20px}
.task-progress-track li{position:relative;display:flex;align-items:center}
.task-progress-track li:not(:last-child)::after{content:'';width:6px;height:2px;border-radius:1px;background:#d9e2ce}
.task-progress-track li.done::after{background:#789367}
.task-progress-node{box-sizing:border-box;display:grid;place-items:center;width:14px;height:14px;border:1.5px solid #c3cfb7;border-radius:50%;background:#fff;color:#fff}
.task-progress-track .done .task-progress-node{background:#476d51;border-color:#476d51}
.task-progress-node svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.task-progress-track .current .task-progress-node{width:16px;height:16px;border:2px solid #476d51;background:#fff;box-shadow:0 0 0 2px #dfead0}
.task-progress-track .current .task-progress-node::after{content:'';width:6px;height:6px;border-radius:50%;background:#476d51}
.task-progress-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.task-card .task-progress-note{font-size:12px;color:#52604d;margin:4px 0 8px}
@container task-card (max-width:219px){.task-card-top.has-progress{grid-template-columns:auto 1fr;row-gap:6px}.task-card-top.has-progress .task-progress{justify-self:end}.task-card-top.has-progress .task-area{grid-column:1/-1}}
@media(forced-colors:active){.task-progress-node{forced-color-adjust:none;background:Canvas;border-color:CanvasText;color:Canvas}.task-progress-track .done .task-progress-node{background:CanvasText;border-color:CanvasText}.task-progress-track .current .task-progress-node{border-color:Highlight;box-shadow:none}.task-progress-track .current .task-progress-node::after{background:Highlight}.task-progress-track li::after{forced-color-adjust:none;background:CanvasText}}