/* =============================================================
   미션&할일 — 맥 고밀도형 (사용자 2026-10-30 "1+2+8 시작해")
   범위: #mission_todos-content 안쪽만(홈 할 일 칸은 ui-skin-dashboard.css 가 따로).
   규칙은 승인된 고밀도형: 머리 · 제목 19px, 탭은 세그먼트, 통계 5칸은 한 줄 띠(누르면 거르기 그대로),
   표 행 28px · 머리 31px · 머리카락 선, 우선순위 · 상태는 색 점 + 글자, 행 단추는 회색 아이콘.
   할일 목록은 홈과 같은 '미리 알림' 줄(32px · 동그라미 체크 · 아이콘은 마우스를 올리면).
   추가 · 편집 · 완료 · 연장 · 보관 · 태그 · 기한 동작과 순서는 그대로(모양만). 되돌리기: <link> 한 줄.
   ============================================================= */
@media screen{
html #mission_todos-content .mission-page{ font-family:var(--ui-font) !important; color:var(--ui-text-1); background:transparent !important; padding:0 !important; max-width:none !important; gap:10px !important }
/* 머리 */
html #mission_todos-content .mission-hero{ padding:4px 0 0 !important; margin:0 !important; min-height:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; align-items:center !important }
html #mission_todos-content .mission-kicker{ display:none !important }
html #mission_todos-content .mission-title{ margin:0 !important; font-size:19px !important; line-height:26px !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:var(--ui-tracking-tight) !important; color:var(--ui-text-1) !important }
html #mission_todos-content .mission-subtitle{ margin:2px 0 0 !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important }
html #mission_todos-content .mission-icon-btn{ width:28px !important; height:28px !important; min-width:28px; border:0 !important; border-radius:var(--ui-radius-control) !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-2) !important }
html #mission_todos-content .mission-icon-btn:hover{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important }
/* 미션 | 할일 → 세그먼트 */
html #mission_todos-content .mission-tabs{ display:inline-flex !important; width:auto !important; gap:2px !important; padding:2px !important; margin:0 !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill) !important; box-shadow:none !important; align-self:flex-start; margin-top:10px !important }
html #mission_todos-content .mission-tab{ height:24px !important; min-height:24px !important; padding:0 16px !important; border:0 !important; border-radius:5px !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; gap:0 !important }
html #mission_todos-content .mission-tab i{ display:none !important }
html #mission_todos-content .mission-tab.is-active{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
/* 통계 5칸 → 한 줄 띠(누르면 거르기) */
html #mission_todos-content #mission-stats{ display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:0 !important; margin:10px 0 !important; background:var(--ui-surface); border-radius:var(--ui-radius-group); box-shadow:var(--ui-elev-raised); overflow:hidden }
html #mission_todos-content .mission-stat-card{ min-height:44px !important; height:auto !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; transform:none !important; text-align:left }
html #mission_todos-content .mission-stat-card + .mission-stat-card{ box-shadow:inset .5px 0 0 var(--ui-line) !important }
html #mission_todos-content .mission-stat-card:hover{ background:var(--ui-fill-subtle) !important }
html #mission_todos-content .mission-stat-card.is-active{ background:var(--ui-accent-tint) !important }
html #mission_todos-content .mission-stat-icon{ display:none !important }
html #mission_todos-content .mission-stat-inner{ height:auto !important; min-height:44px; padding:6px 12px !important; display:flex; align-items:center }
html #mission_todos-content .mission-stat-label{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important; margin:0 !important }
html #mission_todos-content .mission-stat-value{ font-size:var(--ui-text-title3) !important; line-height:20px !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important; font-variant-numeric:tabular-nums }
html #mission_todos-content .mission-tone-danger .mission-stat-value{ color:var(--ui-danger) !important }
html #mission_todos-content .mission-tone-success .mission-stat-value{ color:var(--ui-success) !important }
/* 패널 · 도구 줄 */
html #mission_todos-content .mission-panel{ background:var(--ui-surface) !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:var(--ui-elev-raised) !important; padding:0 !important; overflow:hidden }
html #mission_todos-content .mission-toolbar{ padding:8px 10px !important; gap:8px !important; border:0 !important; background:transparent !important; box-shadow:inset 0 -.5px var(--ui-line) !important }
html #mission_todos-content .mission-search-wrap{ height:28px !important; min-height:28px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill-subtle) !important; box-shadow:none !important; max-width:360px }
html #mission_todos-content .mission-search-wrap i{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #mission_todos-content .mission-search-wrap input{ height:28px !important; font-size:var(--ui-text-body) !important; background:transparent !important; border:0 !important; box-shadow:none !important }
html #mission_todos-content .mission-search-wrap input::placeholder{ color:var(--ui-text-2) !important }
html #mission_todos-content .mission-toolbar select{ height:28px !important; min-height:28px !important; padding:0 26px 0 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background-color:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
/* 표: 기간 칸이 '2026-10-25 ~ 20…'로 잘리던 것 → 기간 칸을 넓히고 메모 · URL 칸을 조금 줄임(칸 순서 · 내용 그대로) */
html #mission_todos-content .mission-col-date{ width:17% !important }
html #mission_todos-content .mission-col-memo{ width:8% !important }
html #mission_todos-content .mission-col-url{ width:6% !important }
html #mission_todos-content .mission-col-title{ width:16% !important }
html #mission_todos-content .mission-data-row td:nth-child(6){ font-size:var(--ui-text-footnote) !important; font-variant-numeric:tabular-nums; letter-spacing:-.01em }
/* 표 */
html #mission_todos-content .mission-table-shell{ border:0 !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important }
html #mission_todos-content .mission-table{ font-family:var(--ui-font) !important; border-collapse:separate !important; border-spacing:0 !important; font-size:var(--ui-text-body) !important }
html #mission_todos-content .mission-table thead tr{ background:transparent !important; border:0 !important }
html #mission_todos-content .mission-table th{ height:31px !important; padding:0 8px !important; background:var(--ui-surface-alt) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; border:0 !important; box-shadow:inset 0 -.5px var(--ui-line) !important; text-align:left !important }
html #mission_todos-content .mission-table td{ height:28px !important; padding:0 8px !important; border:0 !important; box-shadow:inset 0 -.5px var(--ui-line) !important; font-size:var(--ui-text-body) !important; line-height:18px !important; color:var(--ui-text-1) !important; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; text-align:left !important }
html #mission_todos-content .mission-table td:first-child, html #mission_todos-content .mission-table th:first-child{ text-align:center !important; color:var(--ui-text-2) !important; font-variant-numeric:tabular-nums }
html #mission_todos-content .mission-table td.font-semibold{ font-weight:var(--ui-weight-semibold) !important }
html #mission_todos-content .mission-table .text-gray-400, html #mission_todos-content .mission-table .text-gray-300{ color:var(--ui-text-2) !important }
html #mission_todos-content .mission-data-row{ background:var(--ui-surface) !important }
html #mission_todos-content .mission-data-row:nth-child(odd){ background:var(--ui-surface-alt) !important }
html #mission_todos-content .mission-data-row:hover{ background:var(--ui-fill-subtle) !important }
html #mission_todos-content .mission-overdue-row, html #mission_todos-content .mission-overdue-row:nth-child(odd){ background:var(--ui-danger-tint) !important }
/* 우선순위 · 상태: 색 알약 → 색 점 + 글자 */
html #mission_todos-content .mission-data-row td span.rounded-full{ min-width:0 !important; padding:0 !important; border:0 !important; background:transparent !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; gap:5px }
html #mission_todos-content .mission-data-row td span.rounded-full::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ui-text-3); flex:none }
html #mission_todos-content .mission-data-row td span.rounded-full.text-red-700::before, html #mission_todos-content .mission-data-row td span.rounded-full.bg-red-600::before{ background:var(--ui-danger) }
html #mission_todos-content .mission-data-row td span.rounded-full.text-blue-700::before{ background:var(--ui-accent) }
html #mission_todos-content .mission-data-row td span.rounded-full.text-amber-700::before{ background:var(--ui-warning) }
html #mission_todos-content .mission-data-row td span.rounded-full.text-emerald-700::before{ background:var(--ui-success) }
html #mission_todos-content .mission-data-row td span.rounded-full.bg-red-600{ color:var(--ui-danger) !important; font-weight:var(--ui-weight-semibold) !important }
html #mission_todos-content .mission-data-row td .text-sky-600{ color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-regular) !important }
/* 진척도: 얇은 막대 */
html #mission_todos-content .mission-progress-cell > div:first-child{ height:4px !important; background:var(--ui-fill) !important }
html #mission_todos-content .mission-progress-cell > div:first-child > div{ background:var(--ui-accent) !important }
html #mission_todos-content .mission-progress-cell > span{ font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-variant-numeric:tabular-nums }
/* 링크: 밑줄 없이 파랑 글자 */
html #mission_todos-content .mission-table a{ color:var(--ui-accent-text) !important; text-decoration:none !important; font-weight:var(--ui-weight-regular) !important }
html #mission_todos-content .mission-table a:hover{ text-decoration:underline !important }
/* 행 단추: 색 상자 → 회색 아이콘 22px */
html #mission_todos-content .mission-row-action{ width:22px !important; height:22px !important; min-width:22px; border:0 !important; border-radius:var(--ui-radius-row) !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #mission_todos-content .mission-row-action:hover{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important }
html #mission_todos-content .mission-row-action.mission-danger-action:hover{ color:var(--ui-danger) !important }
html #mission_todos-content .mission-row-action.mission-success-action:hover{ color:var(--ui-success) !important }
/* 새 미션 줄 · 편집 줄 입력칸: 맥 입력란 24px */
html #mission_todos-content .mission-new-row, html #mission_todos-content .mission-edit-row{ background:var(--ui-surface) !important }
html #mission_todos-content .mission-new-row td, html #mission_todos-content .mission-edit-row td{ height:auto !important; padding:5px 4px !important; vertical-align:top; overflow:visible }
html #mission_todos-content .mission-table :is(input,select):not([type="checkbox"]){ height:24px !important; min-height:24px !important; padding:0 6px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #mission_todos-content .mission-table select[multiple]{ height:48px !important; padding:2px 4px !important }
html #mission_todos-content .mission-table :is(input,select):focus{ outline:none !important; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #mission_todos-content .mission-range-control{ height:24px !important; min-height:24px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; box-shadow:var(--ui-elev-field) !important; background:var(--ui-surface) !important }
html #mission_todos-content .mission-range-control button{ height:24px !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #mission_todos-content .mission-new-row td:first-child{ color:var(--ui-accent-text) !important; line-height:24px !important }
html #mission_todos-content .mission-primary-btn{ height:24px !important; min-height:24px !important; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
html #mission_todos-content .mission-primary-btn:hover{ background:var(--ui-accent-hover) !important }
html #mission_todos-content .mission-secondary-btn{ height:24px !important; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #mission_todos-content .mission-empty-row{ height:44px !important; color:var(--ui-text-2) !important; text-align:center !important }

/* ── 할일 탭: 홈 '미리 알림' 줄과 같은 모양 ── */
html #mission_todos-content .mission-todo-panel{ padding:0 !important }
html #mission_todos-content .ptodo-add{ padding:8px 10px !important; margin:0 !important; border:0 !important; background:transparent !important; box-shadow:inset 0 -.5px var(--ui-line) !important }
html #mission_todos-content .ptodo-add-row{ gap:6px !important; align-items:center }
html #mission_todos-content .ptodo-add-field{ height:28px !important; min-height:28px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill-subtle) !important; box-shadow:none !important; padding:0 10px !important }
html #mission_todos-content .ptodo-add-field i{ display:none !important }
html #mission_todos-content .ptodo-add-field input{ height:28px !important; font-size:var(--ui-text-body) !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important }
html #mission_todos-content .ptodo-add-field input::placeholder{ color:var(--ui-text-2) !important }
html #mission_todos-content .ptodo-add-field:focus-within{ box-shadow:var(--ui-focus-ring) !important }
html #mission_todos-content .ptodo-add .ptodo-tag-btn{ width:28px !important; height:28px !important; min-width:28px; border:0 !important; border-radius:var(--ui-radius-control) !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-2) !important }
html #mission_todos-content .ptodo-add .ptodo-tag-btn:hover{ background:var(--ui-fill) !important }
html #mission_todos-content .ptodo-add .mission-primary-btn{ height:28px !important; padding:0 14px !important; border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body) !important }
html #mission_todos-content .ptodo-add .mission-primary-btn i{ display:none !important }
html #mission_todos-content .ptodo-meta{ padding:6px 14px !important; margin:0 !important; border:0 !important; background:transparent !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }
html #mission_todos-content .ptodo-meta b{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #mission_todos-content .ptodo-meta button{ height:24px !important; border:0 !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #mission_todos-content .ptodo-meta button:hover{ background:var(--ui-fill) !important; color:var(--ui-danger) !important }
html #mission_todos-content .ptodo-list{ margin:0 !important; padding:0 !important; border:0 !important; gap:0 !important }
html #mission_todos-content .ptodo-item{ min-height:var(--ui-row) !important; padding:4px 14px !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; position:relative; gap:10px !important; align-items:center !important }
html #mission_todos-content .ptodo-item + .ptodo-item::before{ content:""; position:absolute; top:0; left:84px; right:0; border-top:var(--ui-hairline) solid var(--ui-line) }
html #mission_todos-content .ptodo-item:hover{ background:var(--ui-fill-subtle) !important }
html #mission_todos-content .ptodo-date{ width:38px; flex:none; font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important; font-variant-numeric:tabular-nums }
html #mission_todos-content .ptodo-check{ width:16px !important; height:16px !important; min-width:16px !important; border-radius:50% !important; border:1.5px solid var(--ui-text-3) !important; background:transparent !important; color:transparent !important; padding:0 !important; box-shadow:none !important }
html #mission_todos-content .ptodo-check i{ font-size:var(--ui-text-caption) !important }
html #mission_todos-content .ptodo-item.is-done .ptodo-check{ background:var(--ui-accent) !important; border-color:var(--ui-accent) !important; color:var(--ui-on-accent) !important }
html #mission_todos-content .ptodo-item.is-done .ptodo-check i{ color:var(--ui-on-accent) !important }
html #mission_todos-content .ptodo-main{ min-width:0; flex:1 1 auto; display:flex !important; flex-direction:row !important; align-items:center !important; gap:8px; flex-wrap:nowrap !important }
html #mission_todos-content .ptodo-text{ flex:0 1 auto; min-width:0; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
html #mission_todos-content .ptodo-item.is-done .ptodo-text{ color:var(--ui-text-3) !important }
html #mission_todos-content .ptodo-tags{ flex:none; display:inline-flex; gap:6px; margin:0 !important }
html #mission_todos-content .ptodo-tags > span{ padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html #mission_todos-content .ptodo-tags > span i{ display:none !important }
html #mission_todos-content .ptodo-tags > .ptodo-tag-chip::before{ content:"@" }
html #mission_todos-content .ptodo-item-right{ flex:none; gap:2px !important; align-items:center }
html #mission_todos-content .ptodo-due-chip{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 4px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; font-variant-numeric:tabular-nums }
html #mission_todos-content .ptodo-due-chip i{ display:none !important }
html #mission_todos-content .ptodo-due-chip.is-overdue{ background:var(--ui-danger-tint) !important; color:var(--ui-danger) !important; border-radius:var(--ui-radius-row) !important; font-weight:var(--ui-weight-semibold) !important }
html #mission_todos-content .ptodo-icon{ width:22px !important; height:22px !important; border:0 !important; background:transparent !important; color:var(--ui-text-2) !important; border-radius:var(--ui-radius-row) !important; box-shadow:none !important }
html #mission_todos-content .ptodo-icon:hover{ background:var(--ui-fill) !important }
html #mission_todos-content .ptodo-icon.is-private{ color:var(--ui-accent-text) !important }
html #mission_todos-content .ptodo-empty{ padding:16px 14px !important; color:var(--ui-text-2) !important; background:transparent !important; border:0 !important; font-size:var(--ui-text-footnote) !important }
html #mission_todos-content .ptodo-item.is-editing{ padding:4px 10px !important }
html #mission_todos-content .ptodo-edit-input{ height:28px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important; font-size:var(--ui-text-body) !important }
}
/* PC: 줄 단추는 마우스를 올리면(홈과 같음) — 기한 칩은 늘 보임 */
@media screen and (hover:hover) and (min-width:769px){
html #mission_todos-content .ptodo-icon:not(.is-private){ opacity:0 }
html #mission_todos-content .ptodo-item:hover .ptodo-icon, html #mission_todos-content .ptodo-icon:focus-visible{ opacity:1 }
}
/* 휴대폰: 통계 띠 옆으로 밀기, 표 행 44px · 첫 칸 고정 · 옆으로 밀기, 할일 줄 44px · 단추 늘 보임 */
@media screen and (max-width:768px){
html #mission_todos-content #mission-stats{ display:flex !important; overflow-x:auto }
html #mission_todos-content .mission-stat-card{ flex:0 0 auto; min-width:92px }
html #mission_todos-content .mission-toolbar{ flex-wrap:wrap !important }
html #mission_todos-content .mission-search-wrap{ flex:1 1 100% !important; max-width:none; height:36px !important }
html #mission_todos-content .mission-search-wrap input{ height:36px !important }
html #mission_todos-content .mission-toolbar select{ height:36px !important; flex:1 1 0 }
html #mission_todos-content .mission-table td{ height:44px !important }
html #mission_todos-content .mission-table{ min-width:1180px !important }
html #mission_todos-content .mission-table :is(th,td):nth-child(3){ position:sticky; left:0; z-index:1; background:inherit }
html #mission_todos-content .mission-data-row td:nth-child(3){ background:var(--ui-surface) !important }
html #mission_todos-content .mission-data-row:nth-child(odd) td:nth-child(3){ background:var(--ui-surface-alt) !important }
html #mission_todos-content .mission-overdue-row td:nth-child(3), html #mission_todos-content .mission-overdue-row:nth-child(odd) td:nth-child(3){ background:linear-gradient(var(--ui-danger-tint), var(--ui-danger-tint)), var(--ui-surface) !important }
html #mission_todos-content .ptodo-item{ min-height:var(--ui-row-mobile) !important; flex-wrap:nowrap !important; padding:0 10px !important; gap:8px !important }
/* 휴대폰 할일도 행당 한 줄(사용자 2026-10-30): 체크 · 글자(말줄임) · 기한 · 단추. 등록일은 PC 에서만(좁은 폭에서 글자 자리 확보) */
html #mission_todos-content .ptodo-date{ display:none !important }
html #mission_todos-content .ptodo-main{ flex:1 1 auto !important; min-width:0; flex-wrap:nowrap !important }
html #mission_todos-content .ptodo-text{ white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis; flex:1 1 auto }
html #mission_todos-content .ptodo-tags{ display:none !important }
html #mission_todos-content .ptodo-item-right{ flex:none !important; padding:0 !important; margin:0 !important; gap:0 !important }
html #mission_todos-content .ptodo-add-field, html #mission_todos-content .ptodo-add-field input, html #mission_todos-content .ptodo-add .mission-primary-btn, html #mission_todos-content .ptodo-add .ptodo-tag-btn{ height:36px !important; min-height:36px !important }
html #mission_todos-content .ptodo-icon{ width:30px !important; height:36px !important }
html #mission_todos-content .ptodo-item + .ptodo-item::before{ left:14px }
}

/* =============================================================
   미션&할일이 여는 창 (사용자 2026-10-30 "1")
   ① 마감 알림 창  ② 미션 기간 달력  ③ 할일 마감기한 달력  ④ 직원 태그 메뉴(③④ 는 홈 할 일 칸에서도 같은 창)
   맥 팝오버 · 시트 모양: 흰 바탕 · 머리카락 선 · 둥근 10px · 얇은 그림자, 색 머리 띠 · 분홍 카드 · 알약 → 흰 묶음 · 뜻 색 글자.
   날짜는 둥근 칸(오늘 · 고른 날만 파랑), 부서 탭은 세그먼트, 체크는 맥 체크칸. 누르면 하는 일 · 저장 · 연장 · 실패 처리 그대로.
   휴대폰: 미션 기간 달력이 화면 오른쪽으로 26px 삐져나가던 것 → 화면 가운데 고정
   ============================================================= */
@media screen{
/* ① 마감 알림 창 */
html #mission-due-alert-modal{ background:var(--ui-scrim) !important }
html #mission-due-alert-modal .mission-alert-dialog{ max-width:560px !important; border-radius:var(--ui-radius-sheet) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-sheet) !important; font-family:var(--ui-font) }
html #mission-due-alert-modal .mission-alert-head{ padding:14px 18px 6px !important; background:transparent !important; border-bottom:0 !important }
html #mission-due-alert-modal .mission-alert-head h3{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #mission-due-alert-modal .mission-alert-head h3 i{ color:var(--ui-accent) }
html #mission-due-alert-modal .mission-alert-head.is-overdue h3 i{ color:var(--ui-danger) }
html #mission-due-alert-modal .mission-alert-dialog > .p-5{ padding:8px 18px 4px !important }
html #mission-due-alert-modal .mission-alert-dialog > .p-5 > * + *{ margin-top:8px !important }
html #mission-due-alert-modal .mission-alert-item{ padding:10px 12px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface-alt) !important }
html #mission-due-alert-modal .mission-alert-item .text-sm{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #mission-due-alert-modal .mission-alert-item .text-xs.text-gray-500{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important; margin-top:2px !important }
html #mission-due-alert-modal .mission-alert-item span.rounded-full{ padding:0 !important; background:transparent !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; white-space:nowrap }
html #mission-due-alert-modal .mission-alert-item span.rounded-full.bg-red-600{ color:var(--ui-danger) !important }
html #mission-due-alert-modal .mission-alert-item span.rounded-full.bg-sky-100{ color:var(--ui-accent-text) !important }
html #mission-due-alert-modal .mission-alert-item textarea{ margin-top:8px !important; min-height:52px; padding:6px 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; font-size:var(--ui-text-body) !important; color:var(--ui-text-1) !important; resize:vertical }
html #mission-due-alert-modal .mission-alert-item textarea:focus{ box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #mission-due-alert-modal .mission-alert-item .mt-3{ margin-top:8px !important }
html #mission-due-alert-modal :is(.mission-secondary-btn,.mission-danger-btn,.mission-primary-btn){ height:24px !important; min-height:24px; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; display:inline-flex; align-items:center }
html #mission-due-alert-modal :is(.mission-secondary-btn,.mission-danger-btn){ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important }
html #mission-due-alert-modal .mission-danger-btn{ color:var(--ui-danger) !important }
html #mission-due-alert-modal .mission-secondary-btn.mission-warning-text{ color:var(--ui-warning) !important }
html #mission-due-alert-modal .mission-primary-btn{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; min-width:64px; justify-content:center }
html #mission-due-alert-modal :is(.mission-secondary-btn,.mission-danger-btn):hover{ background:var(--ui-fill-hover) !important }
html #mission-due-alert-modal .mission-icon-btn{ width:24px; height:24px; border:0 !important; border-radius:var(--ui-radius-control) !important; background:transparent !important; color:var(--ui-text-2) !important }
html #mission-due-alert-modal .mission-alert-foot{ padding:10px 18px 14px !important; border-top:0 !important; background:transparent !important }
html #mission-due-alert-modal .mission-alert-foot span{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }

/* ② 미션 기간 달력 */
html #mission_todos-content [id$="-range-popover"]{ width:252px !important; border:0 !important; border-radius:var(--ui-radius-panel) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-popover) !important; font-family:var(--ui-font) }
html #mission_todos-content [id$="-range-popover"] > .p-3{ padding:10px 12px 12px !important }
html #mission_todos-content [id$="-range-popover"] .font-bold{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #mission_todos-content [id$="-range-popover"] .w-8.h-8{ width:24px !important; height:24px !important; border-radius:var(--ui-radius-control) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) }
html #mission_todos-content [id$="-range-popover"] .text-\[10px\]{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important }
html #mission_todos-content [id$="-range-popover"] .bg-sky-600:not(button){ background:var(--ui-accent) !important }
html #mission_todos-content [id$="-range-popover"] .bg-sky-100:not(button){ background:var(--ui-accent-tint) !important }
html #mission_todos-content [id$="-range-popover"] .grid.grid-cols-7.gap-1:not(.text-center){ gap:2px 0 !important }
html #mission_todos-content [id$="-range-popover"] .grid.grid-cols-7 > button{ height:28px !important; border-radius:var(--ui-radius-pill) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; background:transparent !important }
html #mission_todos-content [id$="-range-popover"] .grid.grid-cols-7 > button:hover{ background:var(--ui-fill) !important }
html #mission_todos-content [id$="-range-popover"] .grid.grid-cols-7 > button.bg-sky-600{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #mission_todos-content [id$="-range-popover"] .grid.grid-cols-7 > button.bg-sky-100{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; border-radius:0 !important }
html #mission_todos-content [id$="-range-popover"] .mt-3.text-\[11px\]{ margin-top:8px !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }
}
@media screen and (max-width:768px){
html #mission_todos-content [id$="-range-popover"]:not(.hidden){ position:fixed !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%); margin:0 !important; z-index:12000 !important; width:min(300px, calc(100vw - 24px)) !important }
html #mission_todos-content [id$="-range-popover"] .grid.grid-cols-7 > button{ height:36px !important }
}
@media screen{
/* ③④ 할일 팝오버(기한 달력 · 직원 태그) — #ptodo-popover 는 body 에 붙는 공용 창 */
html #ptodo-popover{ width:284px !important; max-width:calc(100vw - 16px); border:0 !important; border-radius:var(--ui-radius-panel) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-popover) !important; font-family:var(--ui-font) }
html #ptodo-popover .ptodo-pop-head{ padding:10px 12px 4px !important; border-bottom:0 !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-2) !important }
html #ptodo-popover .ptodo-pop-head i{ display:none }
html #ptodo-popover .ptodo-pop-foot{ padding:8px 12px 10px !important; border-top:.5px solid var(--ui-line) !important; background:transparent !important }
html #ptodo-popover .ptodo-pop-hint{ color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important }
html #ptodo-popover .mission-secondary-btn{ height:24px !important; padding:0 12px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
/* 기한 달력 */
html #ptodo-popover .ptodo-cal{ padding:4px 12px 8px !important }
html #ptodo-popover .ptodo-cal-head span{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #ptodo-popover .ptodo-cal-head button{ width:24px !important; height:24px !important; border-radius:var(--ui-radius-control) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) }
html #ptodo-popover .ptodo-cal-head button:hover{ background:var(--ui-fill) !important }
html #ptodo-popover .ptodo-cal-dow span{ font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #ptodo-popover .ptodo-cal-grid{ gap:2px 0 !important }
html #ptodo-popover .ptodo-cal-day{ height:28px !important; border-radius:var(--ui-radius-pill) !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #ptodo-popover .ptodo-cal-day:hover{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important }
html #ptodo-popover .ptodo-cal-day.is-sel{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #ptodo-popover .ptodo-due-hour{ padding:8px 12px !important; border-top:.5px solid var(--ui-line) !important }
html #ptodo-popover .ptodo-due-hour span{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #ptodo-popover .ptodo-due-hour select{ height:24px !important; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background-color:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important }
html #ptodo-popover .ptodo-due-clear{ height:24px !important; padding:0 4px !important; border:0 !important; background:transparent !important; color:var(--ui-danger) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #ptodo-popover .ptodo-due-clear:hover{ text-decoration:underline }
html #ptodo-popover .ptodo-due-clear i{ display:none }
/* 직원 태그: 부서 탭 → 세그먼트, 체크칸 → 맥 체크칸 */
html #ptodo-popover .ptodo-dept-tabs{ margin:4px 12px 6px; padding:2px !important; gap:0 !important; flex-wrap:nowrap !important; overflow-x:auto; border:0 !important; border-radius:var(--ui-radius-control); background:var(--ui-fill) !important; scrollbar-width:none }
html #ptodo-popover .ptodo-dept-tab{ flex:1 0 auto; height:20px; padding:0 5px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:transparent !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html #ptodo-popover .ptodo-dept-tab.is-on{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }
html #ptodo-popover .ptodo-taglist{ padding:0 6px 6px !important }
html #ptodo-popover .ptodo-tagopt{ min-height:28px; padding:0 6px !important; gap:8px !important; border-radius:var(--ui-radius-row) !important; background:transparent !important }
html #ptodo-popover .ptodo-tagopt:hover{ background:var(--ui-fill) !important }
html #ptodo-popover .ptodo-tagopt-check{ width:14px !important; height:14px !important; border:0 !important; border-radius:4px !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; font-size:8px !important }
html #ptodo-popover .ptodo-tagopt.is-on .ptodo-tagopt-check{ background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important }
html #ptodo-popover .ptodo-tagopt-name{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #ptodo-popover .ptodo-tagopt-name em{ margin-left:4px; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #ptodo-popover .ptodo-pop-empty{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
}
/* 실제 데이터 확인(2026-10-30): 부서 5개면 세그먼트 끝 부서가 잘림 → 칸 여백 5px · 창 284px. 알림 창 단추 아이콘은 글자색 따라 */
@media screen{
html #mission-due-alert-modal :is(.mission-secondary-btn,.mission-danger-btn) i{ color:inherit !important; font-size:var(--ui-text-caption) }
}