/* ============================================================
   PM CHECK LIST
   ============================================================ */
:root{
  --bg:#f5f6f8;
  --white:#ffffff;
  --field:#f0f1f3;
  --ink:#1a1a1a;
  --ink-2:#4b5563;
  --muted:#9ca3af;
  --line:#e8eaed;
  --line-2:#f0f1f3;
  --blue:#3d7eff;
  --blue-soft:#e6f0fd;
  --blue-line:#b9d2ff;
  --red:#f4433c;
  --red-soft:#feecec;
  --amber:#f5a623;
  --star:#f7c948;
  --scroll:#dcdfe4;
  --teal:#17a398;
  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 4px 14px rgba(16,24,40,.10);
  --radius:10px;
}

/* ============================================================
   다크 테마
   ============================================================ */
html.dark{
  --bg:#232527;
  --white:#2c2e30;
  --field:#37393b;
  --ink:#e6e8ea;
  --ink-2:#b6babd;
  --muted:#8b9095;
  --line:#3a3d40;
  --line-2:#323537;
  --blue:#5b93ff;
  --blue-soft:#2c3a55;
  --blue-line:#415c94;
  --red:#ff6259;
  --red-soft:#3d2724;
  --amber:#f5a623;
  --star:#f7c948;
  --scroll:#494c4f;
  --shadow-1:0 1px 2px rgba(0,0,0,.30);
  --shadow-2:0 6px 18px rgba(0,0,0,.42);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Noto Sans KR','Inter',-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink);
  overflow:hidden; font-size:14px; -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:12px}
button{font-family:inherit;cursor:pointer;border:none;color:inherit;background:none}
input,textarea,select{font-family:inherit;font-size:14px;color:var(--ink)}
h1,h2,h3{font-weight:700}

/* ---------- 공용 버튼 ---------- */
.btn{padding:9px 18px;border-radius:20px;background:var(--white);border:1px solid var(--line);
  font-size:13px;font-weight:500;transition:.15s}
.btn:hover{border-color:var(--blue-line)}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.primary:hover{background:#3570e6}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);border-color:var(--blue-line)}
.btn.danger{color:var(--red);border-color:var(--line)}
.btn.danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn.danger[disabled]{opacity:.35;cursor:not-allowed}
.btn.sm{padding:6px 14px;font-size:12px}
.btn.full{width:100%;margin-top:6px}
.pill{padding:8px 17px;border-radius:20px;background:var(--white);border:1.5px solid var(--blue-line);
  font-size:13px;font-weight:500;color:var(--ink);transition:.15s;white-space:nowrap}
.pill:hover{background:var(--blue-soft);border-color:var(--blue)}
.pill.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- 로고 ---------- */
.brand{display:flex;align-items:center;gap:9px}
.brand-mark{width:34px;height:34px;flex:0 0 auto}
.brand-mark.sm{width:24px;height:24px;margin-right:2px}

/* ---------- 로그인 ---------- */
.overlay{position:fixed;inset:0;background:rgba(20,24,32,.35);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.login-box{background:var(--white);border-radius:16px;padding:40px;width:min(420px,100%);
  box-shadow:0 18px 50px rgba(0,0,0,.16)}
.login-box h1{font-size:22px;margin-bottom:4px}
.user-pick{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.user-pick .u{display:flex;align-items:center;gap:8px;padding:8px 15px;border-radius:20px;
  background:var(--white);border:1px solid var(--line);font-size:13px;transition:.15s}
.user-pick .u:hover{border-color:var(--blue);background:var(--blue-soft)}
.login-new{display:flex;gap:8px}
.login-new input{flex:1;padding:10px 14px;border-radius:20px;background:var(--field);border:1px solid transparent}
.login-new input:focus{outline:none;border-color:var(--blue);background:var(--white)}

.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:500;color:#fff;flex:0 0 auto}
.avatar.xs{width:22px;height:22px;font-size:10px}
.avatar.lt{border:1px solid var(--line)}

/* ---------- 상단바 ---------- */
#topbar{height:92px;display:flex;align-items:center;gap:20px;padding:0 28px;background:var(--white)}
.tb-title h1{font-size:21px;letter-spacing:-.01em;display:flex;align-items:center;gap:4px}
.caret{font-size:15px;color:var(--ink);padding:0 2px}
.tb-sub{font-size:12px;color:var(--muted);margin-top:3px}
.board-select-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

.tb-search{flex:1;display:flex;align-items:center;justify-content:center;gap:12px}
.search{width:min(340px,36vw);padding:11px 18px;border-radius:22px;background:var(--white);
  border:1px solid var(--line);text-align:center;font-size:13px}
.search:focus{outline:none;border-color:var(--blue);text-align:left}
.search::placeholder{color:var(--muted)}
.filter-wrap{position:relative}
.filter-link{font-size:13px;color:var(--blue);font-weight:500;white-space:nowrap}
.fcount{background:var(--red);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px;margin-left:4px}

.tb-actions{display:flex;align-items:center;gap:8px}
.avatar-stack{display:flex;margin-left:6px;cursor:pointer}
.avatar-stack .avatar{margin-left:-7px;box-shadow:0 0 0 2px var(--white)}
.avatar-stack .avatar:first-child{margin-left:0}

.popover{position:absolute;top:32px;right:0;width:270px;background:var(--white);border-radius:14px;
  border:1px solid var(--line);padding:16px;z-index:80;box-shadow:0 12px 34px rgba(0,0,0,.13)}
.pop-sec{margin-bottom:14px}
.pop-title{font-size:11px;font-weight:500;color:var(--muted);margin-bottom:8px}
.pop-list{display:flex;flex-wrap:wrap;gap:6px}
.pop-list .opt{padding:5px 11px;border-radius:16px;border:1px solid var(--line);font-size:12px;
  display:flex;align-items:center;gap:6px;background:var(--white)}
.pop-list .opt.on{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.lb-dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.pop-check{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px;cursor:pointer;color:var(--ink-2)}
.pop-check input{accent-color:var(--blue)}

/* ---------- 보기 탭 ---------- */
/* 리스트·담당자는 한 캡슐 안에서 파란 알약이 옮겨 다니고, 체크사항은 별도 */
#viewbar{display:flex;align-items:center;gap:11px;padding:14px 28px 11px;background:var(--bg)}
.seg-group{display:flex;background:var(--white);border-radius:21px;padding:4px;
  box-shadow:var(--shadow-1)}
.tab{border:none;background:transparent;border-radius:18px;padding:8px 21px;
  font-size:12px;font-weight:700;color:var(--ink);transition:background .2s,color .2s}
.tab:hover{color:var(--blue)}
.tab.on{background:var(--blue);color:#fff}
.tab.on:hover{color:#fff}
.tab.solo{background:var(--white);border-radius:21px;padding:12px 24px;box-shadow:var(--shadow-1)}
.tab.solo.on{background:var(--blue);color:#fff}

/* ---------- 보드 ---------- */
#board{height:calc(100vh - 92px - 47px - 196px);display:flex;gap:24px;padding:4px 28px 16px;
  overflow-x:auto;align-items:flex-start}
#board::-webkit-scrollbar{height:8px}
#board::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px}
body.due-collapsed #board{height:calc(100vh - 92px - 47px - 56px)}

.list{width:346px;flex:0 0 346px;display:flex;flex-direction:column;max-height:100%}
.list-head{display:flex;align-items:center;gap:8px;padding:2px 4px 6px}
.list-title{font-weight:700;font-size:15px;background:transparent;border:none;padding:0;width:auto;
  min-width:40px;max-width:230px}
.list-title:focus{outline:none;border-bottom:1px solid var(--blue)}
.add-in-list{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--blue-line);color:var(--blue);
  font-size:13px;line-height:1;display:grid;place-items:center}
.add-in-list:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.list-count{font-size:12px;color:var(--muted);margin-left:auto}
.list-menu{color:var(--muted);font-size:15px;padding:0 2px;letter-spacing:.08em}
.cards{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:9px 4px 6px 0}
.list.drop-target .cards{outline:2px dashed var(--blue-line);outline-offset:6px;border-radius:12px}
.add-list{width:220px;flex:0 0 220px;padding:14px;border-radius:12px;border:1px dashed var(--line);
  color:var(--muted);font-size:13px;text-align:left;background:rgba(255,255,255,.5)}
.add-list:hover{border-color:var(--blue);color:var(--blue)}

/* 담당자 그룹 */
.grp-head{display:flex;align-items:center;gap:7px;padding:8px 4px 2px}
.grp-name{font-size:12px;font-weight:500;color:var(--ink-2)}
.grp-me{font-size:10px;font-weight:500;background:var(--blue);color:#fff;border-radius:10px;padding:1px 7px}
.grp-count{margin-left:auto;font-size:11px;color:var(--muted)}

/* ---------- 카드 ---------- */
.card{background:var(--white);border-radius:var(--radius);padding:14px 16px;cursor:pointer;
  position:relative;transition:.14s;box-shadow:var(--shadow-1);border:1px solid transparent}
.card:hover{box-shadow:var(--shadow-2)}
.card.dragging{opacity:.4}
.card.is-turn{border-color:var(--red)}
/* 신규·변동은 배경색으로 알립니다 */
.card.is-new,.card.is-updated{background:var(--blue-soft);border-color:var(--blue-line)}
.card.is-new .card-title,.card.is-updated .card-title{color:var(--ink)}
.card.is-turn.is-new,.card.is-turn.is-updated{border-color:var(--red)}
/* 내가 맡았지만 아직 차례는 아닌 업무 */
.card.is-mine{border-color:var(--blue-line)}
.new-tag.mine{background:var(--white);color:var(--muted);border:1px solid var(--line);
  letter-spacing:.1em;text-transform:lowercase;padding:1px 8px}
.card-cover{display:block;width:calc(100% + 32px);margin:-14px -16px 12px;height:120px;object-fit:cover;
  border-radius:var(--radius) var(--radius) 0 0}
.card-top{display:flex;align-items:flex-start;gap:8px;min-height:16px}
.dday{font-size:11px;font-weight:700;letter-spacing:.04em;background:none;padding:0;
  border-radius:4px;transition:.12s}
.dday:hover{background:var(--field)}
.dday.left{color:var(--blue)}
.dday.now{color:var(--red)}
.dday.none{color:var(--muted);font-weight:500}
.card-star{line-height:0;display:inline-flex}
.ico-star{width:13px;height:13px;fill:#FFD400;flex:0 0 auto}
.card-top .spacer{flex:1}
.owner-btn{border-radius:50%;padding:0;line-height:0}
.owner-btn:hover{filter:brightness(1.08)}
.owner-none{width:26px;height:26px;border-radius:50%;border:1px dashed var(--line);color:var(--muted);
  font-size:12px;display:grid;place-items:center}
.card-title{font-size:14px;line-height:1.5;margin-top:7px;word-break:break-word}
.card-labels{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.lb{font-size:10px;font-weight:500;padding:2px 8px;border-radius:10px;color:#fff}
/* 카드 앞면은 제목 위주로 — 단계 내용은 카드를 열어서 봅니다 */
.card-meta .step-frac{font-size:11px;color:var(--muted)}
.card-meta{display:flex;align-items:center;gap:9px;margin-top:8px}
.badge{font-size:11px;color:var(--muted)}
.new-tag{position:absolute;top:-5px;left:12px;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  padding:2px 8px;border-radius:9px;color:#fff;background:var(--red);z-index:2;
  box-shadow:0 0 0 2px var(--bg)}
.new-tag.upd{background:var(--blue)}
.new-tag.turn{background:var(--red);letter-spacing:.1em;text-transform:lowercase;padding:2px 9px}
.card-where{font-size:11px;color:var(--muted);margin-top:6px}

/* 담당자 보기 */
.mem-col .list-head{gap:9px}
.mem-name{font-size:15px;font-weight:700}
.mem-turn{margin-bottom:10px;padding:6px 12px;border-radius:10px;background:var(--red-soft);
  color:var(--red);font-size:12px;font-weight:500}
.mem-empty{padding:18px 4px;color:var(--muted);font-size:12.5px}

/* 체크사항 보기 — 참고 문서처럼 정리 */
.check-view{width:100%;display:flex;flex-direction:column;gap:28px;padding-bottom:12px}
.chk-sec-head{display:flex;align-items:center;gap:8px;padding:0 2px 12px}
.chk-sec-title{font-size:13px;font-weight:700;background:transparent;border:none;padding:0;
  min-width:40px;max-width:260px}
.chk-sec-title:focus{outline:none;border-bottom:1px solid var(--blue)}
.chk-rows{display:flex;flex-direction:column;gap:9px;padding-top:6px}
.chk-row{background:var(--white);border-radius:10px;padding:15px 20px 15px 12px;display:flex;
  align-items:flex-start;gap:14px;border:1px solid var(--line);border-left:4px solid transparent;
  cursor:pointer;transition:.15s}
.chk-grip{flex:0 0 auto;color:var(--line);font-size:13px;line-height:1.9;cursor:grab;
  user-select:none;transition:.12s}
.chk-row:hover .chk-grip{color:var(--muted)}
.chk-grip:active{cursor:grabbing}
.chk-row.dragging{opacity:.4}
.chk-rows.drop-here{outline:2px dashed var(--blue-line);outline-offset:6px;border-radius:12px}
.chk-row:hover{box-shadow:var(--shadow-2)}
.chk-row.unseen{border-color:var(--blue-line)}
.chk-row.compact{width:352px}

/* 중요도 3단계 */
.chk-row.must{background:#fffbeb;border-left-color:var(--star)}
.chk-row.warn{background:#fff4f2;border-left-color:var(--red)}
html.dark .chk-row.must{background:#3a3524}
html.dark .chk-row.warn{background:#3d2724}
.ck-mark{font-style:normal;margin-right:5px}
.ck-mark.must{color:var(--star);line-height:0;display:inline-flex;vertical-align:-2px}
.ck-mark.must .ico-star{width:14px;height:14px}
.ck-mark.warn{color:var(--red)}

.chk-title{font-size:13.5px;font-weight:700;flex:0 0 186px;line-height:1.55;
  word-break:keep-all;padding-top:2px}
.chk-row.compact .chk-title{flex:1}

/* 내용 — 구분칸 + 태그 */
.chk-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.ck-row{display:flex;align-items:flex-start;gap:10px}
.ck-label{flex:0 0 92px;font-size:11.5px;font-weight:700;line-height:1.5;padding:3px 8px;
  border-radius:6px;text-align:center;word-break:keep-all}
.ck-label.none{background:none;flex:0 0 0;padding:0}
.ck-vals{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px 6px;align-items:center}
.ck-chip{font-size:12px;line-height:1.5;padding:3px 9px;border-radius:6px;
  background:var(--field);color:var(--ink-2);white-space:nowrap}
.ck-chip.note{background:var(--red-soft);color:var(--red);white-space:normal;font-weight:500}
.ck-more{font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-soft);
  border:1px solid var(--blue-line);border-radius:6px;padding:3px 9px;white-space:nowrap}
.ck-more:hover{background:var(--blue);color:#fff}
.chk-body mark{background:var(--star);color:var(--ink);border-radius:3px;padding:0 2px}

/* 구분칸 색 — 같은 이름은 늘 같은 색 */
.ck-label.t-a{background:#e6f1fb;color:#0c447c}
.ck-label.t-b{background:#e1f5ee;color:#0f6e56}
.ck-label.t-c{background:#fbeaf0;color:#993556}
.ck-label.t-d{background:#faeeda;color:#854f0b}
.ck-label.t-e{background:#eeedfe;color:#3c3489}
.ck-label.t-f{background:#eaf3de;color:#3b6d11}
html.dark .ck-label.t-a{background:#2c3a55;color:#b5d4f4}
html.dark .ck-label.t-b{background:#12362c;color:#9fe1cb}
html.dark .ck-label.t-c{background:#3a2130;color:#f4c0d1}
html.dark .ck-label.t-d{background:#3a2c14;color:#fac775}
html.dark .ck-label.t-e{background:#2a2748;color:#cecbf6}
html.dark .ck-label.t-f{background:#26331a;color:#c0dd97}

.chk-owner{flex:0 0 auto;margin-left:auto}
@media(max-width:900px){
  .chk-row{flex-direction:column;gap:10px}
  .chk-title{flex:none}
  .chk-row.compact{width:100%}
}

/* ---------- 마감 임박 ---------- */
#dueBar{height:196px;background:var(--white);border-top:1px solid var(--line);padding:16px 28px 0;
  transition:height .2s;display:flex;flex-direction:column}
body.due-collapsed #dueBar{height:56px}
body.due-collapsed .due-scroller{display:none}
body.due-collapsed .due-nav{display:none}
.due-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.due-title{font-size:15px;font-weight:700}
.due-days,.due-mine{font-size:12px;color:var(--muted)}
.due-days{border:1px solid var(--line);border-radius:14px;padding:4px 10px;background:var(--white)}
.due-mine{display:flex;align-items:center;gap:6px;cursor:pointer}
.due-mine input{accent-color:var(--blue)}
.due-toggle{color:var(--muted);font-size:14px}
body.due-collapsed .due-toggle{transform:rotate(180deg)}
/* 가로 스크롤이 눈에 보이도록 트랙까지 그립니다 */
.due-scroller{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.due-row-cards{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:14px;
  scrollbar-color:var(--scroll) var(--line-2);scrollbar-width:thin;scroll-behavior:smooth}
.due-row-cards::-webkit-scrollbar{height:11px}
.due-row-cards::-webkit-scrollbar-track{background:var(--line-2);border-radius:8px}
.due-row-cards::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;
  border:2px solid var(--white)}
.due-row-cards::-webkit-scrollbar-thumb:hover{background:var(--blue-line)}
.due-count{font-size:12px;color:var(--muted)}
.due-nav{display:flex;gap:5px;margin-left:auto}
.due-arrow{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);color:var(--ink-2);font-size:15px;line-height:1}
.due-arrow:hover{border-color:var(--blue);color:var(--blue)}
.due-arrow[disabled]{opacity:.3;cursor:default}
.due-toggle{margin-left:10px}
.due-card{flex:0 0 344px;height:88px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 16px;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:3px;overflow:hidden}
.due-card .card-top{margin:0}
.due-card .card-title{font-size:13.5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.due-card:hover{box-shadow:var(--shadow-2)}
.due-empty{color:var(--muted);font-size:13px;padding:14px 2px}

/* ---------- 모달 ---------- */
.modal{background:var(--white);border-radius:16px;width:min(1120px,100%);max-height:90vh;
  overflow:auto;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.2)}
.sm-modal{width:min(560px,100%);padding:32px}
.wide-modal{width:min(780px,100%)}
.sm-modal h2{font-size:18px;margin-bottom:6px}
.modal-close{position:absolute;top:16px;right:18px;width:28px;height:28px;border-radius:50%;
  background:var(--field);font-size:13px;color:var(--ink-2);z-index:5}
.modal-close:hover{background:#e2e4e8}
.modal-body{display:grid;grid-template-columns:70fr 30fr}
.m-main{padding:30px 34px 36px;min-width:0;overflow-x:hidden}
.m-side{padding:24px;background:var(--bg);display:flex;flex-direction:column;gap:14px;min-width:0}
.m-topline{display:flex;align-items:center;gap:10px}
.m-topline .spacer{flex:1}
.dday-chip{font-size:12px;font-weight:700;color:var(--blue);padding:3px 8px;border-radius:6px}
.dday-chip:hover{background:var(--field)}
.dday-chip.now{color:var(--red)}
.dday-chip.none{color:var(--muted);font-weight:500}
.owner-chip{display:inline-flex;align-items:center;gap:6px;border-radius:20px;line-height:0;padding:0;
  transition:.15s}
.owner-chip.multi{padding:3px 12px 3px 3px;background:var(--field)}
.owner-chip.multi:hover{background:var(--blue-soft)}
.owner-chip .avatar{box-shadow:0 0 0 2px var(--white)}
.owner-chip.multi .avatar + .avatar{margin-left:-9px}
.owner-names{display:none;font-size:11.5px;line-height:1.4;color:var(--ink-2);white-space:nowrap}
.owner-chip.multi .owner-names{display:inline}
.m-titlerow{display:flex;align-items:center;gap:8px;margin:6px 0 18px}
.m-title{flex:1;font-size:20px;font-weight:700;background:transparent;border:none;padding:2px 0}
.m-title:focus{outline:none;border-bottom:1px solid var(--blue)}
.star{line-height:0;padding:2px;display:inline-flex}
.star svg{width:19px;height:19px;fill:var(--line);transition:.15s}
.star:hover svg{fill:#ffe98a}
.star.on svg{fill:#FFD400}
.m-cover{margin-bottom:16px;border-radius:12px;overflow:hidden}
.m-cover img{width:100%;max-height:230px;object-fit:cover;display:block}
.m-desc{width:100%;min-height:155px;background:var(--field);border:1px solid transparent;
  border-radius:12px;padding:16px;resize:vertical;line-height:1.7;font-size:13.5px}
.m-desc:focus{outline:none;border-color:var(--blue);background:var(--white)}
.m-row{display:flex;align-items:center;gap:10px;margin-top:16px}
.m-cap{font-size:12.5px;color:var(--ink-2)}
.m-row .chips{flex:1}
.tpl-row select{border:1px solid var(--line);border-radius:16px;padding:7px 12px;font-size:12.5px;
  background:var(--white);margin-left:auto}
.m-h3{font-size:15px;margin:26px 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .opt{padding:6px 13px;border-radius:16px;border:1px solid var(--line);font-size:12px;
  display:flex;align-items:center;gap:6px;background:var(--white)}
.chips .opt:hover{border-color:var(--blue-line)}

.attach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:7px;margin-top:10px}
.att{border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--field)}
.att img{width:100%;height:40px;object-fit:cover;display:block;cursor:zoom-in}
.att .att-file{height:40px;display:grid;place-items:center;gap:1px;font-size:8.5px;color:var(--ink-2);
  padding:4px 3px;text-align:center;cursor:pointer;line-height:1.25}
.att .att-file b{font-size:9px;font-weight:700;color:var(--blue)}
.att .att-file span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att .att-file:hover{background:var(--blue-soft)}
.att-bar{display:flex;gap:1px}
.att-bar button{flex:1;font-size:9px;padding:3px 2px;color:var(--muted);background:var(--white)}
.att-bar button:hover{background:var(--blue);color:#fff}

/* 업무 단계 */
/* 박스 없이 글자 색으로만 알립니다 */
.turn-banner{padding:2px 2px 10px;margin-bottom:6px;font-size:12.5px;line-height:1.5;background:none}
.turn-banner b{font-weight:700}
.turn-banner.mine{color:var(--red)}
.turn-banner.waiting{color:var(--ink-2)}
.turn-banner.waiting b{color:var(--blue)}
.turn-banner.done{color:var(--muted)}
.bar{height:4px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:12px}
.bar i{display:block;height:100%;background:var(--blue);width:0;transition:width .3s}
.step-list{display:flex;flex-direction:column;gap:2px}
.step-flow{position:relative}
/* 번호를 잇는 세로 진행선 */
.step-flow::before{content:'';position:absolute;left:19px;top:14px;bottom:14px;width:1.5px;
  background:var(--line);border-radius:2px}
.step{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  background:transparent;border:1px solid transparent;border-bottom:1px solid var(--line-2)}
.step:last-of-type{border-bottom-color:transparent}
.step:hover{background:var(--field);border-bottom-color:transparent}
/* 번호 자체가 완료 버튼입니다. 비어 있으면 미완료, 채워지면 완료. */
.step-num{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;flex:0 0 auto;cursor:pointer;transition:.15s;
  background:var(--white);color:var(--muted);border:1.5px solid var(--line)}
.step-num:hover:not(:disabled){border-color:var(--blue);color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-soft)}
.step-num:disabled{cursor:not-allowed;opacity:.45}
.step-title{flex:1;font-size:13px}
.step-owner{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink-2);
  border:1px solid transparent;border-radius:14px;padding:2px;cursor:pointer;flex:0 0 auto}
.step-owner:hover{border-color:var(--blue-line);background:var(--white)}
.step-owner.none{border-style:dashed;border-color:var(--line);width:24px;height:24px;
  justify-content:center;opacity:0;transition:.12s}
.step:hover .step-owner.none{opacity:1}
.step-when{font-size:10.5px;color:var(--muted);white-space:nowrap;opacity:0;transition:.12s}
.step:hover .step-when{opacity:1}
.step .ord,.step .chk-toggle,.step .step-due.none{opacity:0;transition:.12s}
.step:hover .ord,.step:hover .chk-toggle,.step:hover .step-due.none{opacity:1}
.step.current .chk-toggle,.step .chk-toggle.part,.step .chk-toggle.full{opacity:1}
.step-owner .who-n{font-size:10px;color:var(--muted);font-weight:700}
.step-owner .who-add{font-style:normal;color:var(--muted);font-size:13px;line-height:1}
.step.done{background:transparent}
.step.done:hover{background:var(--field)}
.step.done .step-title{color:var(--muted);text-decoration:line-through}
.step.done .step-num{background:var(--blue);border-color:var(--blue);color:#fff}
.step.done .step-num:hover{background:var(--white);color:var(--blue);box-shadow:none}
/* 지금 할 단계 — 흰 배경에 파란 테두리와 옅은 그림자만 */
.step.current{border:1.5px solid var(--blue);background:var(--white);border-radius:10px;
  box-shadow:0 2px 12px rgba(61,126,255,.18);margin:6px 0;padding:12px 10px}
html.dark .step.current{box-shadow:0 2px 14px rgba(91,147,255,.24)}
.step.current .step-title{font-weight:700;color:var(--ink);font-size:14px}
.step.current .step-num{background:transparent;border-color:var(--red);color:var(--red)}
.step.current .step-num:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 0 0 3px var(--red-soft)}
.step.current .step-title{font-weight:500}
.step.later{opacity:.55}
.step.later:hover{opacity:.85}
.cl-del{opacity:0;color:var(--red);font-size:12px}
.step:hover .cl-del,.tpl-item:hover .cl-del{opacity:.8}
.step-add{display:flex;align-items:center;gap:8px;margin-top:10px}
.step-add #mStepAdd{flex:0 0 auto;white-space:nowrap}
.who-btn{padding:8px 15px;border-radius:10px;border:1px solid var(--line);font-size:12.5px;
  background:var(--white);white-space:nowrap}
.who-btn:hover{border-color:var(--blue)}
.step-add input{flex:1;padding:10px 14px;border-radius:10px;background:var(--field);border:1px solid transparent}
.step-add input:focus{outline:none;border-color:var(--blue);background:var(--white)}

/* 우측 패널 */
.cmt-write{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.cmt-write textarea{width:100%;min-height:44px;background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;resize:vertical;font-size:13px}
.cmt-write textarea:focus{outline:none;border-color:var(--blue)}
.comments{display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:38vh}
.cmt{display:flex;gap:9px}
.cmt-body{flex:1;min-width:0}
.cmt-top{display:flex;align-items:baseline;gap:7px}
.cmt-name{font-size:12px;font-weight:500}
.cmt-time{font-size:10.5px;color:var(--muted)}
.cmt-text{font-size:13px;line-height:1.6;margin-top:4px;white-space:pre-wrap;word-break:break-word}
.activity{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:5px;
  max-height:26vh;overflow-y:auto}
.act{font-size:11px;color:var(--muted);line-height:1.55}
.act b{font-weight:500;color:var(--ink-2)}
.m-danger{display:flex;gap:7px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)}

/* ---------- 그 자리에서 고르는 팝오버 ---------- */
.picker{position:fixed;z-index:300;background:var(--white);border-radius:14px;border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.18);padding:12px;min-width:212px}
.picker .pk-title{font-size:11px;color:var(--muted);margin-bottom:9px}
.picker .pk-list{display:flex;flex-direction:column;gap:3px}
.pk-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13px;
  width:100%;text-align:left}
.pk-item:hover{background:var(--blue-soft)}
.pk-item.on{background:var(--blue-soft);color:var(--blue);font-weight:500}
.picker input[type=date]{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--line);margin-bottom:8px}
.picker select{width:100%;padding:9px 12px;border-radius:9px;border:1px solid var(--line);margin-bottom:8px}
.pk-foot{display:flex;gap:6px;margin-top:8px}

/* ---------- 관리 화면 ---------- */
.fld{display:block;font-size:12.5px;color:var(--ink-2);margin-top:16px}
.fld-row{display:flex;gap:14px}
.fld-row .fld{flex:1}
.nc-input{width:100%;margin-top:7px;padding:11px 14px;border-radius:10px;background:var(--field);
  border:1px solid transparent;font-size:13.5px}
.nc-input:focus{outline:none;border-color:var(--blue);background:var(--white)}
.nc-preview{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.nc-step{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;background:var(--field);font-size:12.5px}
.nc-num{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;
  background:var(--blue);color:#fff;flex:0 0 auto}
.nc-t{flex:1}
.modal-foot{display:flex;gap:8px;margin-top:26px}

.label-mgr{display:flex;flex-direction:column;margin:18px 0}
.label-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.label-row .sw{width:32px;height:28px;border-radius:8px;border:1px solid var(--line);padding:0;cursor:pointer;background:none}
.label-row input[type=text]{flex:1;padding:8px 12px;border-radius:9px;background:transparent;border:1px solid transparent}
.label-row input[type=text]:focus{outline:none;background:var(--field);border-color:var(--blue)}
.label-new{display:flex;gap:8px;align-items:center;margin-top:12px}
.label-new input[type=text]{flex:1;padding:10px 14px;border-radius:20px;background:var(--field);border:1px solid transparent}
.label-new input[type=text]:focus{outline:none;border-color:var(--blue);background:var(--white)}
.label-new input[type=color]{width:42px;height:38px;border-radius:8px;border:1px solid var(--line);background:none;cursor:pointer;padding:0}

.archive-list,.done-list,.tpl-list{display:flex;flex-direction:column;margin-top:16px;max-height:58vh;overflow:auto}
.arch-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line-2)}
.arch-row .t{flex:1;font-size:13px}
.done-row{padding:13px 8px;border-bottom:1px solid var(--line-2);border-radius:8px;cursor:pointer}
.done-row:hover{background:var(--field)}
.done-top{display:flex;align-items:center;gap:10px}
.done-title{flex:1;font-size:13.5px;font-weight:500}
.done-steps{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.done-step{font-size:10.5px;background:var(--field);padding:4px 10px;border-radius:10px;color:var(--muted)}
.done-step b{color:var(--ink-2);font-weight:500;margin-left:5px}

.tpl{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:10px}
.tpl-head{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.tpl-name{flex:1;font-size:13.5px;font-weight:500;padding:8px 12px;border-radius:9px;
  background:var(--field);border:1px solid transparent}
.tpl-items{display:flex;flex-direction:column;gap:6px}
.tpl-item{display:flex;align-items:center;gap:8px}
.ti-title{flex:1;padding:8px 12px;border-radius:9px;background:var(--white);border:1px solid var(--line)}
.ti-who{border:1px solid var(--line);border-radius:9px;padding:8px;font-size:12px;max-width:110px;background:var(--white)}
.tpl-foot{display:flex;gap:7px;margin-top:12px}

.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:var(--ink);
  color:#fff;padding:12px 24px;border-radius:22px;z-index:400;font-size:13px}

@media(max-width:1100px){
  .modal-body{grid-template-columns:1fr}
  .m-side{border-top:1px solid var(--line)}
  .tb-search{display:none}
}


/* ---------- 테마 토글 버튼 ---------- */
.theme-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--blue-line);
  background:var(--white);font-size:14px;color:var(--ink);line-height:1;flex:0 0 auto}
.theme-btn:hover{background:var(--blue-soft);border-color:var(--blue)}

/* ---------- 다크 보정 ---------- */
html.dark body{background:var(--bg)}
html.dark #topbar{border-bottom:1px solid var(--teal)}
html.dark .card{border:1px solid var(--line)}
html.dark .card:hover{border-color:var(--blue-line)}
html.dark .card.is-turn{border-color:var(--red)}
html.dark .new-tag.mine{background:var(--white);color:var(--muted);border-color:var(--line)}
html.dark .card.is-new,html.dark .card.is-updated{background:var(--blue-soft);border-color:var(--blue-line)}
html.dark .avatar.lt{border-color:var(--line)}
html.dark .modal-close{background:var(--field)}
html.dark .modal-close:hover{background:#45484b}
html.dark .overlay{background:rgba(0,0,0,.55)}
html.dark .login-box,html.dark .modal,html.dark .popover,html.dark .picker{border:1px solid var(--line)}
html.dark .search,html.dark .pill,html.dark .tab,html.dark .btn,html.dark .due-days,
html.dark .step,html.dark .who-btn,html.dark .ti-title,html.dark .ti-who,
html.dark .tpl-apply select,html.dark .tpl-row select{background:var(--white)}
html.dark .step.done{background:var(--bg)}
html.dark .step.current{background:var(--blue-soft)}
html.dark .m-side{background:var(--bg)}
html.dark .turn-banner.waiting{color:var(--ink-2)}
html.dark .turn-banner.done{color:var(--muted)}
html.dark .new-tag,html.dark .new-tag.turn{color:#fff}
html.dark .new-tag.upd{color:#101418}
html.dark .add-list{background:rgba(255,255,255,.03)}
html.dark input[type=date],html.dark select{color-scheme:dark}
html.dark .toast{background:var(--field);color:var(--ink);border:1px solid var(--line)}
html.dark .att-bar button{background:var(--field)}
html.dark .card-star,html.dark .star.on{color:var(--star)}

html.dark .seg-group,html.dark .tab.solo{background:var(--white)}
html.dark .tab{color:var(--ink)}
html.dark .tab.on{background:var(--blue);color:#fff}

/* ---------- 로그인 ---------- */
.login-who{display:flex;align-items:center;gap:10px;margin:18px 0 6px;font-size:15px}
.login-err{color:var(--red);font-size:12.5px;margin-top:10px}
#loginStep2 .nc-input{margin-top:10px}
#loginStep2 .modal-foot{margin-top:18px}

/* ---------- 접속 표시 ---------- */
.avatar.off{background:#c9ccd1 !important;color:#fff !important}
html.dark .avatar.off{background:#4a4d50 !important;color:#8b9095 !important}
.avatar-stack .avatar{transition:filter .2s}
.me-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);
  position:absolute;right:-1px;bottom:-1px;box-shadow:0 0 0 2px var(--white)}
.av-wrap{position:relative;display:inline-flex;margin-left:-7px}
.av-wrap:first-child{margin-left:0}
.tag-admin{font-size:10px;font-weight:500;background:var(--blue);color:#fff;border-radius:10px;padding:2px 8px}
.nc-input.pin{letter-spacing:.6em;text-align:center;font-size:22px;font-weight:700;padding:14px}
.nc-input.pin::placeholder{letter-spacing:.6em;font-weight:400;color:var(--muted)}
.login-err{white-space:pre-line}

#board:has(.check-view){display:block;overflow-y:auto;overflow-x:hidden}

/* 보드 가로 스크롤도 또렷하게 */
#board::-webkit-scrollbar{height:11px}
#board::-webkit-scrollbar-track{background:var(--line-2);border-radius:8px}
#board::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;border:2px solid var(--bg)}
#board::-webkit-scrollbar-thumb:hover{background:var(--blue-line)}
#board{scrollbar-color:var(--scroll) var(--line-2);scrollbar-width:thin}
.desc-hint{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.6}
textarea.nc-input{resize:vertical;line-height:1.7;min-height:110px}

/* 순서 바꾸기 버튼 */
.ord{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.ord-btn{width:18px;height:13px;font-size:7px;line-height:1;color:var(--muted);
  border:1px solid var(--line);border-radius:4px;background:var(--white)}
.ord-btn:hover:not([disabled]){border-color:var(--blue);color:var(--blue)}
.ord-btn[disabled]{opacity:.25;cursor:default}
.step .ord,.tpl-item .ord{opacity:.45;transition:.15s}
.step:hover .ord,.tpl-item:hover .ord{opacity:1}

/* ---------- 이미지 크게 보기 ---------- */
#imgModal{background:rgba(10,12,16,.82);z-index:220}
.lightbox{position:relative;display:flex;flex-direction:column;align-items:center;
  max-width:min(1200px,94vw);max-height:92vh}
#lbImg{max-width:100%;max-height:78vh;object-fit:contain;border-radius:10px;background:var(--white)}
.lb-bar{display:flex;align-items:center;gap:10px;margin-top:14px;background:var(--white);
  border-radius:22px;padding:8px 10px 8px 18px;max-width:100%}
.lb-name{font-size:12.5px;max-width:min(420px,50vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-count{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:24px;line-height:1;z-index:2}
.lb-nav:hover{background:#fff}
.lb-nav.prev{left:-58px}
.lb-nav.next{right:-58px}
@media(max-width:900px){.lb-nav.prev{left:6px}.lb-nav.next{right:6px}}

/* 담당자 여러 명 */
.pk-check{margin-left:auto;color:var(--blue);font-weight:700}
.pk-hint{font-size:11px;color:var(--muted);margin-bottom:8px}
.owner-btn.multi{display:flex}
.owner-btn.multi .avatar{margin-left:-9px;box-shadow:0 0 0 2px var(--white)}
.owner-btn.multi .avatar:first-child{margin-left:0}
.step-owner .avatar{margin-left:-6px}
.step-owner .avatar:first-child{margin-left:0}
.who-btn{display:flex;align-items:center;gap:5px}
.who-btn .avatar{margin-left:-6px}
.who-btn .avatar:first-child{margin-left:0}
.ti-who{max-width:130px;overflow:hidden;white-space:nowrap;padding:7px 10px;font-size:12px}
.due-owners{display:flex}
.due-owners .avatar{margin-left:-9px;box-shadow:0 0 0 2px var(--white)}
.due-owners .avatar:first-child{margin-left:0}

/* ---------- 완료 업무 보기 전용 ---------- */
.done-bar{display:flex;align-items:center;gap:12px;background:var(--field);border-radius:10px;
  padding:11px 14px;margin-bottom:18px;font-size:12.5px;color:var(--ink-2)}
.done-bar button{margin-left:auto;white-space:nowrap}
#cardModal.readonly #mSteps,
#cardModal.readonly #mLabels,
#cardModal.readonly .step-add,
#cardModal.readonly .tpl-row,
#cardModal.readonly .att-bar,
#cardModal.readonly .upload-btn,
#cardModal.readonly .cmt-write{pointer-events:none;opacity:.55}
#cardModal.readonly .cmt-del,
#cardModal.readonly .m-danger{display:none}
#cardModal.readonly .m-title,
#cardModal.readonly .m-desc{cursor:default}
#cardModal.readonly .dday-chip,
#cardModal.readonly .owner-chip,
#cardModal.readonly .star{pointer-events:none}


/* ---------- 단계별 마감일 ---------- */
.step-due{border:1px solid var(--line);background:var(--white);color:var(--ink-2);
  border-radius:12px;padding:2px 9px;font-size:11px;font-weight:600;white-space:nowrap;
  line-height:1.5;transition:.15s;flex:0 0 auto}
.step-due:hover{border-color:var(--blue);color:var(--blue)}
.step-due.none{color:var(--muted);border-style:dashed;padding:2px 8px}
.step-due.left{border-color:var(--blue-line);color:var(--blue);background:var(--blue-soft)}
.step-due.now{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.step-due.off{color:var(--muted);border-color:var(--line-2);text-decoration:line-through}
.step:not(:hover) .step-due.none{opacity:.35}

.badge.step-due-badge{border-color:var(--blue-line);color:var(--blue)}
.badge.step-due-badge.now{border-color:var(--red);color:var(--red)}
.due-step{font-size:11px;color:var(--muted);margin-top:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

.ti-off{display:flex;align-items:center;gap:2px;font-size:11px;color:var(--muted);flex:0 0 auto}
.ti-off input{width:46px;padding:5px 6px;border-radius:8px;border:1px solid var(--line);
  background:var(--field);text-align:center;font-size:12px}
.ti-off input:focus{outline:none;border-color:var(--blue);background:var(--white)}


/* ---------- 템플릿 여러 개 적용 ---------- */
.tpl-pick{min-width:120px;justify-content:flex-start}
.tpl-pick.full-w{width:100%;margin-bottom:8px}

.tpl-applied{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 12px}
.tpl-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 4px;border-radius:14px;
  background:var(--blue-soft);border:1px solid var(--blue-line);color:var(--blue);font-size:12px}
.tpl-tag b{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:10px;font-weight:700}
.tpl-tag button{color:var(--blue);font-size:11px;opacity:.6;padding:0 2px}
.tpl-tag button:hover{opacity:1}

.step-src{font-size:10px;color:var(--muted);background:var(--field);border-radius:8px;
  padding:1px 7px;white-space:nowrap;flex:0 0 auto}

.pk-order{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  font-size:10px;font-weight:700;flex:0 0 auto;
  background:var(--field);color:var(--muted)}
.pk-item.on .pk-order{background:var(--blue);color:#fff}

.nc-group{font-size:11px;font-weight:700;color:var(--blue);margin:8px 0 2px;padding-left:2px}
.nc-group:first-child{margin-top:0}
.nc-off{font-size:10px;font-weight:600;color:var(--blue);border:1px solid var(--blue-line);
  border-radius:9px;padding:1px 6px;white-space:nowrap}


/* ---------- 단계 안 세부 체크리스트 ---------- */
.chk-toggle{border:1px solid var(--line);background:var(--white);color:var(--muted);
  border-radius:12px;padding:2px 9px;font-size:11px;font-weight:600;white-space:nowrap;
  line-height:1.5;flex:0 0 auto;transition:.15s}
.chk-toggle:hover{border-color:var(--blue);color:var(--blue)}
.chk-toggle.part{border-color:var(--blue-line);color:var(--blue);background:var(--blue-soft)}
.chk-toggle.full{border-color:var(--teal);color:var(--teal);background:transparent}
.step:not(:hover) .chk-toggle.empty{opacity:.35}

.chk-box{margin:-2px 0 10px 34px;padding:11px 13px;border-radius:10px;
  background:var(--field);border:1px solid var(--line-2)}
.chk-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:9px}
.chk-bar i{display:block;height:100%;background:var(--blue);transition:width .25s}
.chk-items{display:flex;flex-direction:column;gap:1px}
.chk-item{border-radius:7px;font-size:13px;transition:.12s}
.chk-item:hover{background:var(--white)}
/* 단계 안 체크리스트 한 줄 (체크사항 화면의 .chk-row 와 다른 것입니다) */
.ck-line{display:flex;align-items:center;gap:9px;padding:5px 4px;cursor:pointer}
.chk-item input[type=checkbox]{accent-color:var(--blue);width:15px;height:15px;flex:0 0 auto;cursor:pointer}
.chk-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chk-item.done .chk-t{color:var(--muted);text-decoration:line-through}
.chk-item.diff .chk-t{color:var(--red);text-decoration:none}
.chk-item .ord,.chk-item .cl-del{opacity:0;transition:.12s}
.chk-item:hover .ord,.chk-item:hover .cl-del{opacity:1}

/* 검수 항목 — 미리 적어둔 상품 정보 */
.chk-mark{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);background:var(--white);
  color:var(--muted);font-size:10px;font-weight:700;display:grid;place-items:center;flex:0 0 auto;transition:.15s}
.chk-mark:hover{border-color:var(--blue);color:var(--blue)}
.chk-mark.ok{background:var(--teal);border-color:var(--teal);color:#fff}
.chk-mark.diff{background:var(--red);border-color:var(--red);color:#fff}
.chk-judge{display:flex;gap:4px;flex:0 0 auto}
.jg{font-size:10.5px;font-weight:600;border:1px solid var(--line);border-radius:11px;padding:2px 9px;
  color:var(--muted);background:var(--white);transition:.15s;white-space:nowrap}
.jg:hover{border-color:var(--blue);color:var(--blue)}
.jg.ok.on{background:var(--teal);border-color:var(--teal);color:#fff}
.jg.no.on{background:var(--red);border-color:var(--red);color:#fff}

.chk-detail{display:none;gap:12px;padding:2px 4px 9px 30px}
.chk-item.insp.open .chk-detail,.chk-item.insp.diff .chk-detail{display:flex}
.chk-img{width:64px;height:64px;object-fit:cover;border-radius:7px;border:1px solid var(--line);
  cursor:zoom-in;flex:0 0 auto;background:var(--white)}
.chk-spec{font-size:11.5px;line-height:1.65;color:var(--ink-2);min-width:0}
.chk-note-row{display:flex;align-items:center;gap:8px;padding:0 4px 9px 30px}
.chk-note-cap{font-size:10.5px;color:var(--red);white-space:nowrap;flex:0 0 auto}
.chk-note{flex:1;min-width:0;padding:6px 10px;border-radius:7px;border:1px solid var(--line);
  background:var(--white);font-size:12px}
.chk-note:focus{outline:none;border-color:var(--red)}
.chk-none{padding:4px 2px}
.chk-add{width:100%;margin-top:8px;padding:8px 11px;border-radius:8px;border:1px solid var(--line);
  background:var(--white);font-size:13px;resize:vertical;min-height:36px;line-height:1.45}
.chk-add:focus{outline:none;border-color:var(--blue)}
.chk-hint{margin-top:7px;line-height:1.5}
.step.has-checks input[type=checkbox][data-step]{cursor:help}

.ti-chk{border:1px solid var(--line);background:var(--white);color:var(--muted);border-radius:12px;
  padding:5px 11px;font-size:11px;font-weight:600;white-space:nowrap;flex:0 0 auto;transition:.15s}
.ti-chk:hover{border-color:var(--blue);color:var(--blue)}
.ti-chk.on{border-color:var(--blue-line);color:var(--blue);background:var(--blue-soft)}
.ti-checks{flex:1 0 100%;margin-top:7px;padding:8px 11px;border-radius:8px;border:1px solid var(--line);
  background:var(--white);font-size:13px;resize:vertical;line-height:1.5}
.ti-checks:focus{outline:none;border-color:var(--blue)}
.tpl-item{flex-wrap:wrap}


/* ---------- 템플릿 묶음별 단계 ---------- */
.step-group{border:1px solid var(--line);border-radius:12px;padding:10px 12px 6px;margin-bottom:12px;
  background:var(--white)}
.step-group.done{opacity:.72}
.grp-title{display:flex;align-items:center;gap:8px;padding:0 2px 8px;
  border-bottom:1px solid var(--line-2);margin-bottom:7px}
.grp-name{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.02em}
.step-group.done .grp-name{color:var(--muted)}
.grp-frac{font-size:10px;color:var(--muted);background:var(--field);border-radius:9px;padding:1px 7px}
.grp-now{font-size:10px;color:var(--red);margin-left:auto;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:52%}
.grp-done-tag{font-size:10px;color:var(--teal);margin-left:auto}
.step-group .step:last-of-type{margin-bottom:2px}


/* ---------- 접기 ---------- */
.done-fold{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:9px;
  border:1px dashed var(--line);background:transparent;transition:.15s;margin-bottom:2px}
.done-fold:hover{border-style:solid;border-color:var(--blue-line);background:var(--field)}
.fold-caret{font-size:9px;color:var(--muted);width:12px;flex:0 0 auto}
.fold-text{font-size:11.5px;color:var(--muted)}
.fold-who{display:flex;margin-left:auto}
.fold-who .avatar{margin-left:-5px;box-shadow:0 0 0 1.5px var(--bg)}
.fold-who .avatar:first-child{margin-left:0}

.step-group.collapsed{padding:0;border-style:dashed}
.grp-title.as-btn{width:100%;border:none;background:transparent;padding:11px 12px;margin:0;
  border-bottom:none;cursor:pointer}
.grp-title.as-btn:hover .grp-name{color:var(--blue)}
.as-caret{font-size:9px;color:var(--muted);padding:0;width:10px;flex:0 0 auto}


/* 단계에서 온 마감일도 테두리 없이 글자만 (툴팁으로 어느 단계인지 알려줍니다) */
.dday.from-step,.dday-chip.from-step{border:none}


/* 반복 업무 표시 — 그날이 되면 다른 마감처럼 빨갛게 */
.rep-mark{font-size:11px;color:var(--blue);line-height:1;margin-left:-3px;cursor:default}
.rep-mark.now{color:var(--red)}
.dday.rep.left{color:var(--blue)}
.dday.rep.now{color:var(--red)}


/* 완료 버튼 */
.btn.ok{color:var(--teal);border-color:var(--line)}
.btn.ok:hover:not([disabled]){background:var(--white);border-color:var(--teal)}
.btn.ok[disabled]{opacity:.35;cursor:not-allowed}


/* 직접 추가한 단계 묶음 */
.grp-note{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap;
  border:1px dashed var(--line);border-radius:9px;padding:1px 7px}
.step-group.own{border-style:dashed}


/* 직접 추가한 단계 — 번호 없이 체크박스 */
.step-box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);background:var(--white);
  color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:0 0 auto;
  cursor:pointer;transition:.15s;position:relative;z-index:1}
.step-box:hover{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.step-box.on{background:var(--blue);border-color:var(--blue)}
.step-box.on:hover{background:var(--white);color:var(--blue);box-shadow:none}
/* 순서가 없으니 세로 진행선도 그리지 않습니다 */
.step-group.own .step-flow::before{display:none}
.step-group.own .step.done .step-title{color:var(--muted);text-decoration:line-through}


/* ---------- 카드 상태 색 ---------- */
/* 중요(★) 표시한 업무 — 연노랑 */
.card.is-star{background:#fffbeb;border-color:#f0dda6}
html.dark .card.is-star{background:#3a3524;border-color:#5c5334}
/* 마감이 지난 업무 — 왼쪽 빨간 선 */
.card.is-late{border-left:4px solid var(--red)}
/* 신규·변동(파란 배경)이 겹쳐도 중요 표시가 보이도록 */
.card.is-star.is-new,.card.is-star.is-updated{background:#fdf6e3}
html.dark .card.is-star.is-new,html.dark .card.is-star.is-updated{background:#37342a}

/* 구분자가 없는 긴 목록은 줄바꿈해서 문단처럼 */
.ck-chip.long{white-space:normal;line-height:1.7;word-break:keep-all}


/* ---------- 리스트 접기 ---------- */
.fold-col{width:18px;height:18px;border-radius:5px;color:var(--muted);font-size:12px;line-height:1;
  flex:0 0 auto;transition:.12s}
.fold-col:hover{background:var(--field);color:var(--blue)}
.list-head .fold-col{opacity:0}
.list:hover .list-head .fold-col{opacity:1}

.list.folded{width:46px;flex:0 0 46px;background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:10px 0;align-items:center;gap:10px;max-height:100%;
  box-shadow:var(--shadow-1);transition:.15s}
.list.folded:hover{border-color:var(--blue-line)}
.list.folded .fold-col{opacity:1;width:24px;height:24px}
.fold-body{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0}
.fold-name{writing-mode:vertical-rl;font-size:13px;font-weight:700;letter-spacing:.02em;
  max-height:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list.folded .list-count{margin:0;font-size:11px}

.late-badge{background:var(--red);color:#fff;border-radius:9px;padding:1px 7px;
  font-size:10px;font-weight:700;flex:0 0 auto}

/* 체크사항 섹션 접기 */
.fold-sec{color:var(--muted);font-size:11px;width:16px;flex:0 0 auto}
.fold-sec:hover{color:var(--blue)}
.chk-sec.folded .chk-sec-head{padding-bottom:0}
.chk-sec-head .list-count{margin-left:0}


/* ---------- 카드 안 진행률 요약 ---------- */
.prog-box{display:flex;flex-direction:column;gap:7px;margin:2px 0 12px;padding:11px 13px;
  background:var(--field);border-radius:10px}
.prog-line{display:flex;align-items:center;gap:9px;font-size:11.5px}
.prog-name{flex:0 0 96px;font-weight:700;color:var(--blue);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.prog-line.done .prog-name{color:var(--muted)}
.prog-frac{flex:0 0 34px;color:var(--ink-2);font-weight:600;text-align:right}
.prog-bar{flex:1;min-width:60px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.prog-bar i{display:block;height:100%;background:var(--blue);border-radius:3px;transition:width .3s}
.prog-line.done .prog-bar i{background:var(--teal)}
.prog-now{flex:0 0 auto;max-width:38%;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* 남은 단계 접기 */
.tail-fold{display:block;width:100%;margin-top:4px;padding:7px;border-radius:8px;
  border:1px dashed var(--line);background:transparent;color:var(--muted);font-size:11.5px;
  transition:.15s}
.tail-fold:hover{border-style:solid;border-color:var(--blue-line);color:var(--blue);background:var(--field)}

/* ---------- 코멘트 / 활동 기록 탭 ---------- */
.side-tabs{display:flex;gap:5px;background:var(--white);border-radius:20px;padding:4px;
  box-shadow:var(--shadow-1)}
.side-tab{flex:1;padding:7px 10px;border-radius:16px;font-size:12.5px;font-weight:500;
  color:var(--ink-2);transition:.15s;white-space:nowrap}
.side-tab:hover{color:var(--blue)}
.side-tab.on{background:var(--blue);color:#fff}
.side-tab span{font-size:10.5px;opacity:.8}
.side-pane{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto}


/* 체크사항 항목 접기 */
.ck-fold{flex:0 0 14px;color:var(--muted);font-size:10px;line-height:1.9;transition:.12s}
.ck-fold:hover{color:var(--blue)}
.ck-fold.none{visibility:hidden}
.chk-row.shut{padding-top:11px;padding-bottom:11px;align-items:center}
.ck-shut-hint{font-size:11px;color:var(--muted);white-space:nowrap}
.sec-foldall{color:var(--muted);font-size:12px;width:20px;height:20px;border-radius:5px;flex:0 0 auto}
.sec-foldall:hover{background:var(--field);color:var(--blue)}


/* ---------- 작은 ＋ 버튼 (라벨·첨부 공통) ---------- */
.add-mini{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--blue-line);
  color:var(--blue);font-size:13px;line-height:1;display:inline-grid;place-items:center;
  flex:0 0 auto;background:var(--white);transition:.15s;cursor:pointer;padding:0}
.add-mini:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.add-mini[disabled]{opacity:.35;cursor:not-allowed}

/* 상단 줄에 고른 라벨만 */
.lb-picked{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;max-width:52%}
.lb-picked:empty{display:none}

/* 완료 옆 더보기 */
.more-btn{padding:6px 12px;letter-spacing:.08em}
.more-btn.on{border-color:var(--blue);color:var(--blue)}
.more-wrap{display:flex;gap:7px;flex-wrap:wrap}


/* ---------- 아침 브리핑 ---------- */
.modal.brief{text-align:center}
.modal.brief h2{font-size:19px;margin-bottom:2px}
.brief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 10px}
.brief-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;
  border-radius:12px;border:1px solid var(--line);background:var(--white);transition:.15s}
.brief-card:hover{border-color:var(--blue);box-shadow:var(--shadow-2)}
.bf-n{font-size:26px;font-weight:700;line-height:1}
.bf-t{font-size:11.5px;color:var(--muted)}
.brief-card.late .bf-n{color:var(--red)}
.brief-card.today .bf-n{color:var(--amber)}
.brief-card.turn .bf-n{color:var(--blue)}
.brief-card.zero .bf-n{color:var(--line)}
.brief-card.zero{opacity:.6}
.brief-hint{margin-bottom:4px}
.modal.brief .modal-foot{justify-content:center;align-items:center;gap:14px}

/* ---------- 일괄 수정 ---------- */
.bulk-bar{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;z-index:70;
  display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:26px;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.bulk-bar span{font-size:12.5px;font-weight:700;margin-right:4px;white-space:nowrap}
.pick-box{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:6px;
  border:1.5px solid var(--line);background:var(--white);color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;z-index:2;transition:.12s}
.pick-box:hover{border-color:var(--blue)}
.pick-box.on{background:var(--blue);border-color:var(--blue)}
.card.picked{box-shadow:0 0 0 2px var(--blue)}
body.pick-mode .card{cursor:pointer}
#pickModeBtn.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* 굵게 표시 */
.cmt-text b,.ck-chip b,.chk-title b{font-weight:700}


/* ---------- 걸린 필터 안내 ---------- */
.filter-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 28px 8px;
  padding:9px 14px;border-radius:12px;background:var(--blue-soft);border:1px solid var(--blue-line)}
.fb-cap{font-size:11.5px;font-weight:700;color:var(--blue)}
.fb-chip{font-size:11.5px;color:var(--blue);background:var(--white);border:1px solid var(--blue-line);
  border-radius:12px;padding:2px 10px}
.fb-n{font-size:11.5px;color:var(--ink-2);margin-left:auto}
.filter-bar .btn{padding:5px 12px}
.cards-empty{font-size:12px;color:var(--muted);padding:14px 4px;text-align:center}
body:not(.due-collapsed) #filterBar:not(.hidden) ~ #board{height:calc(100vh - 92px - 47px - 196px - 46px)}


/* ---------- 앱 안 알림 카드 ---------- */
.note-stack{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;
  gap:10px;align-items:flex-end;pointer-events:none}
.note-card{pointer-events:auto;width:360px;background:var(--white);border-radius:16px;
  border:1px solid var(--line);box-shadow:0 12px 34px rgba(16,24,40,.18);padding:18px 19px 16px;
  position:relative;cursor:pointer;opacity:0;transform:translateY(10px);transition:.22s}
.note-card.in{opacity:1;transform:none}
.note-card{cursor:default}
.note-card.clickable{cursor:pointer}
.note-card.clickable:hover{border-color:var(--blue);box-shadow:0 12px 34px rgba(61,126,255,.22)}
.nt-go{margin-top:11px;font-size:12px;font-weight:600;color:var(--blue);text-align:right}
.nt-x{position:absolute;top:11px;right:12px;color:var(--muted);font-size:12px;line-height:1;
  width:22px;height:22px;border-radius:6px}
.nt-x:hover{background:var(--field);color:var(--ink)}
.nt-msg{font-size:14px;font-weight:700;line-height:1.5;padding-right:22px}
.nt-sub{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}
.nt-body{margin-top:13px;padding:12px 14px;border-radius:12px;background:var(--field)}
.nt-top{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.nt-dday{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--blue)}
.nt-top .ico-star{width:15px;height:15px}
.nt-dday.now{color:var(--red)}
.nt-title{font-size:14px;font-weight:500;line-height:1.5;word-break:keep-all}
html.dark .note-card{box-shadow:0 10px 30px rgba(0,0,0,.5)}
@media(max-width:640px){.note-stack{left:16px;right:16px}.note-card{width:auto}}
/* 주간보고 창 안 미리보기 */
.nt-preview .note-card{width:100%;padding:15px 16px 14px;border-radius:14px}
.nt-preview .nt-msg{padding-right:0}


/* 주간보고 알림 창 */
.nt-preview{margin:12px 0 2px}
.nt-preview .note-card{position:static;cursor:default;box-shadow:var(--shadow-1)}
.nt-who{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.nt-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
  background:var(--field);font-size:12.5px}
.nt-row.off{opacity:.6}
.nt-name{font-weight:500}
.nt-how{margin-left:auto;font-size:11px;color:var(--muted)}
.nt-dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex:0 0 auto}
.nt-dot.on{background:var(--teal)}
#ntResult{line-height:1.6;margin-top:10px}


/* 고르기 전 등록 버튼 */
.btn.primary.dim{background:var(--field);border-color:var(--line);color:var(--muted)}
.btn.primary.dim:hover{background:var(--field);border-color:var(--blue-line);color:var(--blue)}
/* 템플릿 줄 — 적용된 템플릿은 위, 버튼은 아래 오른쪽 */
.tpl-row{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.tpl-applied{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.tpl-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.tpl-actions .btn{white-space:nowrap;flex:0 0 auto}
.tpl-pick{max-width:60%;overflow:hidden;text-overflow:ellipsis}


/* 담당자가 없을 때의 ＋ — 라벨 ＋ 와 같은 모양 */
.owner-none.add-mini{border:1.5px solid var(--blue-line);border-style:solid;color:var(--blue);
  background:var(--white);font-size:13px}
.owner-chip:hover .owner-none.add-mini{background:var(--blue);border-color:var(--blue);color:#fff}


/* 알림에서 내가 맡은 단계 이름만 파랗게 */
.nt-step{color:var(--blue);font-weight:700}


/* ---------- 완료함 ---------- */
.done-bar2{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 10px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.done-who{display:flex;flex-wrap:wrap;gap:6px}
.who-pill{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:16px;
  border:1px solid var(--line);background:var(--white);font-size:12px;color:var(--ink-2);transition:.15s}
.who-pill:not(:has(.avatar)){padding:5px 14px}
.who-pill:hover{border-color:var(--blue-line);color:var(--blue)}
.who-pill.on{background:var(--blue);border-color:var(--blue);color:#fff}
.done-week{display:flex;align-items:center;gap:6px;margin-left:auto}
.done-week #dnRange{font-size:12.5px;font-weight:700;min-width:132px;text-align:center;white-space:nowrap}
.done-week .btn{padding:5px 11px}
.done-week .btn[disabled]{opacity:.3;cursor:default}
.done-week .btn.on{background:var(--blue);border-color:var(--blue);color:#fff}
.done-sum{font-size:12.5px;color:var(--ink-2);margin-bottom:10px}
.done-day{margin-bottom:16px}
.dn-head{display:flex;align-items:center;gap:8px;padding:0 2px 7px;
  font-size:12px;font-weight:700;color:var(--blue)}
.dn-n{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--field);
  border-radius:9px;padding:1px 8px}


/* 보관함 완료/보관 탭 */
.box-tabs{display:flex;gap:5px;background:var(--field);border-radius:20px;padding:4px;
  margin:14px 0 6px;width:fit-content}
.box-tabs .side-tab{padding:7px 22px;flex:0 0 auto}
.pop-check .ico-star{width:14px;height:14px;margin-right:-2px}


/* 완료함에서 고른 담당자의 단계만 하늘색으로 */
.done-step.mine{background:var(--blue-soft);color:var(--blue);border-color:var(--blue-line)}
.done-step.mine b{color:var(--blue)}


/* ---------- 스크롤 막대 ---------- */
/* 평소에는 안 보이고, 마우스를 올리면 얇게 나타납니다 */
.cards, .done-list, .side-pane, .chk-rows, .check-view, .modal-body,
#tplList, #labelMgrList, #archiveList, #archiveList2, #memberList,
.activity, .comments, .attach-grid, .m-desc, .chk-add, .ti-checks {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s;
}
.cards:hover, .done-list:hover, .side-pane:hover, .chk-rows:hover, .check-view:hover,
.modal-body:hover, #tplList:hover, #labelMgrList:hover, #archiveList:hover,
#archiveList2:hover, #memberList:hover, .activity:hover, .comments:hover {
  scrollbar-color: var(--scroll) transparent;
}

.cards::-webkit-scrollbar,
.done-list::-webkit-scrollbar,
.side-pane::-webkit-scrollbar,
.chk-rows::-webkit-scrollbar,
.check-view::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
#tplList::-webkit-scrollbar,
#labelMgrList::-webkit-scrollbar,
#archiveList::-webkit-scrollbar,
#archiveList2::-webkit-scrollbar,
#memberList::-webkit-scrollbar,
.activity::-webkit-scrollbar,
.comments::-webkit-scrollbar { width: 10px; height: 10px; }

.cards::-webkit-scrollbar-track,
.done-list::-webkit-scrollbar-track,
.side-pane::-webkit-scrollbar-track,
.chk-rows::-webkit-scrollbar-track,
.check-view::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
#tplList::-webkit-scrollbar-track,
#labelMgrList::-webkit-scrollbar-track,
#archiveList::-webkit-scrollbar-track,
#archiveList2::-webkit-scrollbar-track,
#memberList::-webkit-scrollbar-track,
.activity::-webkit-scrollbar-track,
.comments::-webkit-scrollbar-track { background: transparent; }

.cards::-webkit-scrollbar-thumb,
.done-list::-webkit-scrollbar-thumb,
.side-pane::-webkit-scrollbar-thumb,
.chk-rows::-webkit-scrollbar-thumb,
.check-view::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
#tplList::-webkit-scrollbar-thumb,
#labelMgrList::-webkit-scrollbar-thumb,
#archiveList::-webkit-scrollbar-thumb,
#archiveList2::-webkit-scrollbar-thumb,
#memberList::-webkit-scrollbar-thumb,
.activity::-webkit-scrollbar-thumb,
.comments::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
  transition: background .2s;
}
.cards:hover::-webkit-scrollbar-thumb,
.done-list:hover::-webkit-scrollbar-thumb,
.side-pane:hover::-webkit-scrollbar-thumb,
.chk-rows:hover::-webkit-scrollbar-thumb,
.check-view:hover::-webkit-scrollbar-thumb,
.modal-body:hover::-webkit-scrollbar-thumb,
#tplList:hover::-webkit-scrollbar-thumb,
#labelMgrList:hover::-webkit-scrollbar-thumb,
#archiveList:hover::-webkit-scrollbar-thumb,
#archiveList2:hover::-webkit-scrollbar-thumb,
#memberList:hover::-webkit-scrollbar-thumb,
.activity:hover::-webkit-scrollbar-thumb,
.comments:hover::-webkit-scrollbar-thumb { background: var(--scroll); background-clip: content-box; }

.cards::-webkit-scrollbar-thumb:hover,
.done-list::-webkit-scrollbar-thumb:hover,
.side-pane::-webkit-scrollbar-thumb:hover,
.check-view::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--blue-line); background-clip: content-box; }

/* 보드 가로 막대도 같은 결로 */
#board::-webkit-scrollbar{height:10px}
#board::-webkit-scrollbar-track{background:transparent}
#board::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
#board::-webkit-scrollbar-thumb:hover{background:var(--blue-line);background-clip:content-box}

/* 마감 임박 가로 막대 */
.due-row-cards::-webkit-scrollbar{height:10px}
.due-row-cards::-webkit-scrollbar-track{background:transparent}
.due-row-cards::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
.due-row-cards::-webkit-scrollbar-thumb:hover{background:var(--blue-line);background-clip:content-box}


/* ============================================================
   글래스 테마 — 반투명 유리 느낌
   ============================================================ */
html.glass{
  --bg:#e6e7ea;
  --white:rgba(255,255,255,.62);
  --field:rgba(255,255,255,.42);
  --ink:#1b1c20;
  --ink-2:#54565d;
  --muted:#8c8e96;
  --line:rgba(255,255,255,.85);
  --line-2:rgba(255,255,255,.55);
  --blue:#7d9ed6;
  --blue-soft:rgba(125,158,214,.20);
  --blue-line:rgba(125,158,214,.55);
  --red:#d97b74;
  --red-soft:rgba(217,123,116,.16);
  --amber:#d9a05b;
  --star:#e8c65a;
  --teal:#6fae9f;
  --scroll:rgba(120,124,134,.42);
  --shadow-1:0 1px 2px rgba(30,34,45,.06), inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-2:0 10px 28px rgba(30,34,45,.13), inset 0 1px 0 rgba(255,255,255,.9);
  --radius:14px;
}
html.glass body{
  background:
    radial-gradient(120% 90% at 15% 0%, #f2f3f5 0%, transparent 60%),
    radial-gradient(120% 90% at 85% 100%, #dfe1e6 0%, transparent 60%),
    var(--bg);
}

/* 유리판처럼 — 반투명 + 흐림 + 위쪽 하이라이트 */
html.glass #topbar,
html.glass .card,
html.glass .modal,
html.glass .login-box,
html.glass .popover,
html.glass .picker,
html.glass .note-card,
html.glass .seg-group,
html.glass .pill,
html.glass .btn,
html.glass .search,
html.glass #dueBar,
html.glass .due-card,
html.glass .chk-row,
html.glass .step-group,
html.glass .step.current,
html.glass .bulk-bar,
html.glass .list.folded,
html.glass .tab.solo{
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-color:var(--line);
}
html.glass .card,
html.glass .due-card,
html.glass .chk-row,
html.glass .note-card,
html.glass .modal,
html.glass .login-box{
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-2);
}
html.glass .btn,
html.glass .pill,
html.glass .search,
html.glass .tab.solo,
html.glass .seg-group{
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-1);
}
html.glass .btn.primary,
html.glass .pill.on,
html.glass .tab.on,
html.glass .side-tab.on,
html.glass .who-pill.on{
  background:linear-gradient(180deg, rgba(141,171,222,.95), rgba(112,148,206,.95));
  border-color:rgba(255,255,255,.7);
  color:#fff;
  box-shadow:0 4px 12px rgba(112,148,206,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
html.glass .btn:hover,html.glass .pill:hover{border-color:rgba(255,255,255,1)}
html.glass #topbar{background:rgba(255,255,255,.5);border-bottom:1px solid rgba(255,255,255,.8)}
html.glass #viewbar,html.glass #board,html.glass .check-view{background:transparent}
html.glass .m-side{background:rgba(255,255,255,.34)}
html.glass .m-desc,html.glass .nc-input,html.glass .chk-add,html.glass .ti-checks{
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.85)}
html.glass .card.is-star{background:rgba(255,246,214,.62)}
html.glass .card.is-new,html.glass .card.is-updated{background:rgba(215,229,250,.6)}
html.glass .chk-row.must{background:rgba(255,246,214,.55)}
html.glass .chk-row.warn{background:rgba(250,225,222,.55)}
html.glass .overlay{background:rgba(210,213,219,.45)}
html.glass .step-num{background:rgba(255,255,255,.85)}
html.glass .avatar{box-shadow:0 2px 6px rgba(30,34,45,.18)}

/* 테마 고르는 창의 색 점 */
.th-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;border:1px solid var(--line)}
.th-dot.light{background:#f5f6f8}
.th-dot.dark{background:#232527}
.th-dot.glass{background:linear-gradient(135deg,#e9eaee 40%,#8ea9d8)}


/* ------------------------------------------------------------
   글래스 테마 — 유리알처럼 톡 튀는 포인트 (빨강·노랑)
   ------------------------------------------------------------ */
html.glass{
  --red:#e4574c;
  --red-soft:rgba(228,87,76,.16);
  --amber:#f0a13a;
  --star:#f5c518;
}

/* me 태그 — 유리알 빨강 */
html.glass .new-tag.turn{
  background:linear-gradient(180deg,#ff7a63 0%,#e0453c 60%,#c9332c 100%);
  color:#fff;border:1px solid rgba(255,255,255,.55);
  box-shadow:0 3px 10px rgba(224,69,60,.45), inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}
html.glass .new-tag.mine{
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-1)}

/* 지난 마감 숫자 배지 */
html.glass .late-badge{
  background:linear-gradient(180deg,#ff7a63,#d63f36);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 3px 10px rgba(214,63,54,.42), inset 0 1px 0 rgba(255,255,255,.55);
}

/* D-DAY / 지난 마감 글씨 */
html.glass .dday.now,html.glass .dday-chip.now,html.glass .nt-dday.now,
html.glass .step-due.now{
  color:#d8443a;text-shadow:0 1px 0 rgba(255,255,255,.85)}
html.glass .card.is-late{
  border-left:4px solid #e4574c;
  box-shadow:-4px 0 12px -4px rgba(228,87,76,.5), var(--shadow-2)}

/* 중요 별 — 반짝이는 노랑 */
html.glass .ico-star{
  fill:#f7c531;
  filter:drop-shadow(0 1px 2px rgba(215,160,20,.55)) drop-shadow(0 0 4px rgba(247,197,49,.5))}
html.glass .star.on svg{fill:#f7c531}
html.glass .card.is-star{
  background:linear-gradient(180deg, rgba(255,250,229,.82), rgba(255,243,205,.62));
  border-color:rgba(245,205,90,.75);
  box-shadow:0 8px 22px rgba(212,166,40,.22), inset 0 1px 0 rgba(255,255,255,.9)}

/* 체크사항 필수·주의 */
html.glass .chk-row.must{
  background:linear-gradient(180deg, rgba(255,250,229,.8), rgba(255,244,209,.6));
  border-left-color:#f2c53d;
  box-shadow:-4px 0 12px -4px rgba(242,197,61,.55), var(--shadow-1)}
html.glass .chk-row.warn{
  background:linear-gradient(180deg, rgba(255,240,238,.82), rgba(255,228,224,.62));
  border-left-color:#e4574c;
  box-shadow:-4px 0 12px -4px rgba(228,87,76,.5), var(--shadow-1)}
html.glass .ck-mark.warn{color:#d8443a}
html.glass .ck-chip.note{
  background:linear-gradient(180deg, rgba(255,236,233,.9), rgba(255,222,217,.8));
  color:#c33a31;border:1px solid rgba(228,87,76,.35)}

/* 삭제 · 위험 버튼 */
html.glass .btn.danger{
  color:#c9332c;border-color:rgba(228,87,76,.5);
  background:linear-gradient(180deg, rgba(255,240,238,.85), rgba(255,226,222,.7))}
html.glass .btn.danger:hover{
  background:linear-gradient(180deg,#ff7a63,#d63f36);color:#fff;
  border-color:rgba(255,255,255,.6);
  box-shadow:0 4px 12px rgba(214,63,54,.4), inset 0 1px 0 rgba(255,255,255,.5)}

/* 지금 할 단계 · 진행 중 번호 */
html.glass .step.current{
  border-color:rgba(125,158,214,.85);
  box-shadow:0 6px 18px rgba(112,148,206,.28), inset 0 1px 0 rgba(255,255,255,.9)}
html.glass .step.current .step-num{
  border-color:#e4574c;color:#d8443a;
  box-shadow:0 0 0 3px rgba(228,87,76,.14), inset 0 1px 0 rgba(255,255,255,.9)}
html.glass .step.current .step-num:hover:not(:disabled){
  background:linear-gradient(180deg,#ff7a63,#d63f36);color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(214,63,54,.45)}
html.glass .step.done .step-num{
  background:linear-gradient(180deg, rgba(141,171,222,.95), rgba(112,148,206,.95));
  border-color:rgba(255,255,255,.6);
  box-shadow:0 3px 9px rgba(112,148,206,.4), inset 0 1px 0 rgba(255,255,255,.55)}

/* 브리핑 숫자 */
html.glass .brief-card.late .bf-n{color:#d8443a;text-shadow:0 1px 0 rgba(255,255,255,.9)}
html.glass .brief-card.today .bf-n{color:#e08b20;text-shadow:0 1px 0 rgba(255,255,255,.9)}
html.glass .brief-card{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.9);
  box-shadow:var(--shadow-1)}
html.glass .brief-card:hover{box-shadow:var(--shadow-2)}

/* 차례 안내 · 알림 */
html.glass .turn-banner.mine{color:#d8443a;font-weight:700}
html.glass .toast{background:linear-gradient(180deg, rgba(45,48,56,.92), rgba(28,30,36,.92));
  backdrop-filter:blur(10px)}


/* ------------------------------------------------------------
   글래스 — 카드 창은 또렷하게, 뒷배경은 확실히 흐리게
   ------------------------------------------------------------ */
html.glass .overlay{
  background:rgba(226,229,234,.55);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
html.glass .modal,
html.glass .login-box{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,1);
  box-shadow:0 24px 60px rgba(30,34,45,.22), inset 0 1px 0 rgba(255,255,255,1);
}
html.glass .m-side{background:rgba(244,246,249,.92)}
html.glass .picker,
html.glass .popover{
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 40px rgba(30,34,45,.20), inset 0 1px 0 rgba(255,255,255,1);
}
html.glass .note-card{
  background:rgba(255,255,255,.95);
  box-shadow:0 16px 40px rgba(30,34,45,.22), inset 0 1px 0 rgba(255,255,255,1);
}

/* 글씨는 또렷하게 */
html.glass{
  --ink:#15161a;
  --ink-2:#4a4c54;
  --muted:#7c7f88;
}
html.glass body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.glass .m-title,html.glass .card-title,html.glass .chk-title,
html.glass .step-title,html.glass h1,html.glass h2,html.glass h3{color:var(--ink)}
html.glass .m-desc,html.glass .nc-input,html.glass .search,
html.glass input,html.glass textarea,html.glass select{color:var(--ink)}
html.glass .m-desc,html.glass .chk-add,html.glass .ti-checks,html.glass .nc-input{
  background:rgba(255,255,255,.78)}

/* 더 입체적으로 — 남은 조각들도 유리로 */
html.glass .list-head,
html.glass .avatar,
html.glass .lb,
html.glass .badge,
html.glass .chip,
html.glass .done-row,
html.glass .arch-row,
html.glass .brief-card,
html.glass .ck-label,
html.glass .ck-chip,
html.glass .who-pill,
html.glass .side-tab,
html.glass .box-tabs,
html.glass .prog-box,
html.glass .chk-box,
html.glass .filter-bar,
html.glass .dday-chip,
html.glass .owner-chip,
html.glass .add-mini,
html.glass .step-box,
html.glass .step-num,
html.glass .chk-toggle,
html.glass .step-due,
html.glass .tpl-tag,
html.glass .done-step{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(30,34,45,.07);
}
html.glass .done-row,html.glass .arch-row{
  background:rgba(255,255,255,.6);border-radius:12px;padding:12px 14px;
  border:1px solid rgba(255,255,255,.9);margin-bottom:8px}
html.glass .prog-box,html.glass .chk-box{
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9)}
html.glass .avatar{border:1px solid rgba(255,255,255,.7)}
html.glass .side-tab.on,html.glass .who-pill.on{
  text-shadow:0 1px 1px rgba(0,0,0,.15)}
html.glass .bar,html.glass .prog-bar,html.glass .chk-bar{
  background:rgba(120,124,134,.22);box-shadow:inset 0 1px 2px rgba(30,34,45,.12)}
html.glass .bar i,html.glass .prog-bar i,html.glass .chk-bar i{
  background:linear-gradient(90deg,#8dabde,#6f93cf);
  box-shadow:0 0 8px rgba(112,148,206,.5)}
html.glass .list.folded{background:rgba(255,255,255,.7)}
html.glass .step{border-bottom-color:rgba(120,124,134,.14)}
html.glass .due-card{background:rgba(255,255,255,.7)}
html.glass .card{background:rgba(255,255,255,.72)}
html.glass .card:hover{background:rgba(255,255,255,.86)}


/* ------------------------------------------------------------
   글래스 — 따뜻한 오렌지 유리 + 유리 가장자리 무지개
   ------------------------------------------------------------ */
html.glass{
  --red:#ef6a3d;
  --red-soft:rgba(239,106,61,.16);
  --amber:#f5a623;
  --star:#ffc738;
}

/* me · 지연 — 오렌지에서 빨강으로 넘어가는 유리알 */
html.glass .new-tag.turn,
html.glass .late-badge{
  background:linear-gradient(160deg,#ffc46b 0%,#ff8f43 45%,#ef5b35 100%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 12px rgba(239,91,53,.45),
             inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 -2px 6px rgba(180,60,20,.25);
  text-shadow:0 1px 1px rgba(140,50,15,.35);
}
html.glass .dday.now,html.glass .dday-chip.now,html.glass .nt-dday.now,
html.glass .step-due.now,html.glass .ck-mark.warn,
html.glass .turn-banner.mine{color:#e2551f}
html.glass .card.is-late{
  border-left:4px solid #f57a3c;
  box-shadow:-5px 0 14px -4px rgba(245,122,60,.55), var(--shadow-2)}

/* 중요 · 필수 — 호박색 유리 */
html.glass .ico-star{
  fill:#ffc738;
  filter:drop-shadow(0 1px 2px rgba(200,140,10,.55)) drop-shadow(0 0 5px rgba(255,199,56,.6))}
html.glass .star.on svg{fill:#ffc738}
html.glass .card.is-star{
  background:linear-gradient(160deg, rgba(255,247,222,.88), rgba(255,235,190,.66));
  border-color:rgba(245,180,60,.7);
  box-shadow:0 10px 26px rgba(214,150,30,.24), inset 0 1px 0 rgba(255,255,255,.95)}
html.glass .chk-row.must{
  background:linear-gradient(160deg, rgba(255,247,222,.86), rgba(255,236,194,.64));
  border-left-color:#f5b942;
  box-shadow:-5px 0 14px -4px rgba(245,185,66,.6), var(--shadow-1)}
html.glass .chk-row.warn{
  background:linear-gradient(160deg, rgba(255,240,232,.86), rgba(255,224,210,.64));
  border-left-color:#f57a3c;
  box-shadow:-5px 0 14px -4px rgba(245,122,60,.55), var(--shadow-1)}
html.glass .ck-chip.note{
  background:linear-gradient(160deg, rgba(255,238,228,.92), rgba(255,222,206,.82));
  color:#d1521f;border:1px solid rgba(239,106,61,.35)}
html.glass .btn.danger{
  color:#d1521f;border-color:rgba(239,106,61,.5);
  background:linear-gradient(160deg, rgba(255,240,232,.88), rgba(255,226,212,.72))}
html.glass .btn.danger:hover{
  background:linear-gradient(160deg,#ffb05e,#ef5b35);color:#fff;border-color:rgba(255,255,255,.6);
  box-shadow:0 5px 14px rgba(239,91,53,.45), inset 0 1px 0 rgba(255,255,255,.6)}

/* 지금 단계 — 오렌지 링 */
html.glass .step.current .step-num{
  border-color:#f57a3c;color:#e2551f;
  box-shadow:0 0 0 3px rgba(245,122,60,.16), inset 0 1px 0 rgba(255,255,255,.95)}
html.glass .step.current .step-num:hover:not(:disabled){
  background:linear-gradient(160deg,#ffb05e,#ef5b35);color:#fff;border-color:transparent;
  box-shadow:0 5px 14px rgba(239,91,53,.5)}
html.glass .brief-card.late .bf-n{color:#e2551f}
html.glass .brief-card.today .bf-n{color:#e39312}

/* 유리 가장자리 무지개 — 아주 옅게 */
html.glass .modal,
html.glass .card.is-turn,
html.glass .note-card,
html.glass .step.current,
html.glass .login-box{
  position:relative;
}
html.glass .modal::after,
html.glass .note-card::after,
html.glass .login-box::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(135deg,
    rgba(255,160,90,.55) 0%, rgba(255,255,255,0) 28%,
    rgba(255,255,255,0) 68%, rgba(130,170,235,.5) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
html.glass .card.is-turn{
  border-color:rgba(245,122,60,.85);
  box-shadow:0 8px 22px rgba(245,122,60,.22), inset 0 1px 0 rgba(255,255,255,.95)}


/* ============================================================
   글래스 — 두꺼운 유리 마감 (투명도 대신 빛으로 유리 느낌)
   빨강은 빨강, 노랑은 노랑 그대로
   ============================================================ */
html.glass{
  --red:#f4433c;
  --red-soft:rgba(244,67,60,.15);
  --amber:#f5a623;
  --star:#ffdd00;
}

/* me · 지연 — 선명한 빨강 유리알 */
html.glass .new-tag.turn,
html.glass .late-badge{
  background:linear-gradient(180deg,#ff6b63 0%,#f4433c 55%,#d92b24 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 12px rgba(217,43,36,.42),
             inset 0 1.5px 0 rgba(255,255,255,.85),
             inset 0 -3px 7px rgba(150,25,20,.3);
  text-shadow:0 1px 1px rgba(130,20,15,.4);
}
html.glass .dday.now,html.glass .dday-chip.now,html.glass .nt-dday.now,
html.glass .step-due.now,html.glass .ck-mark.warn,
html.glass .turn-banner.mine,html.glass .brief-card.late .bf-n{color:#e0322b}
html.glass .card.is-late{
  border-left:4px solid #f4433c;
  box-shadow:-5px 0 14px -4px rgba(244,67,60,.5), var(--shadow-2)}
html.glass .card.is-turn{
  border-color:rgba(244,67,60,.9);
  box-shadow:0 8px 22px rgba(244,67,60,.2), inset 0 1.5px 0 rgba(255,255,255,1)}
html.glass .chk-row.warn{
  background:linear-gradient(180deg, rgba(255,240,239,.92), rgba(255,226,224,.8));
  border-left-color:#f4433c;
  box-shadow:-5px 0 14px -4px rgba(244,67,60,.5), var(--shadow-1)}
html.glass .ck-chip.note{
  background:linear-gradient(180deg, rgba(255,238,237,.95), rgba(255,222,220,.88));
  color:#cf2f28;border:1px solid rgba(244,67,60,.35)}
html.glass .btn.danger{color:#cf2f28;border-color:rgba(244,67,60,.5);
  background:linear-gradient(180deg, rgba(255,240,239,.92), rgba(255,226,224,.8))}
html.glass .btn.danger:hover{
  background:linear-gradient(180deg,#ff6b63,#d92b24);color:#fff;border-color:rgba(255,255,255,.7);
  box-shadow:0 5px 14px rgba(217,43,36,.45), inset 0 1.5px 0 rgba(255,255,255,.7)}
html.glass .step.current .step-num{
  border-color:#f4433c;color:#e0322b;
  box-shadow:0 0 0 3px rgba(244,67,60,.14), inset 0 1.5px 0 rgba(255,255,255,1)}
html.glass .step.current .step-num:hover:not(:disabled){
  background:linear-gradient(180deg,#ff6b63,#d92b24);color:#fff;border-color:transparent;
  box-shadow:0 5px 14px rgba(217,43,36,.5)}

/* 중요 — 완전한 노랑 */
html.glass .ico-star{
  fill:#ffdd00;
  filter:drop-shadow(0 1px 2px rgba(190,155,0,.5)) drop-shadow(0 0 6px rgba(255,221,0,.7))}
html.glass .star.on svg{fill:#ffdd00}
html.glass .card.is-star{
  background:linear-gradient(180deg, rgba(255,252,222,.94), rgba(255,246,186,.82));
  border-color:rgba(240,205,40,.8);
  box-shadow:0 10px 26px rgba(215,180,20,.22), inset 0 1.5px 0 rgba(255,255,255,1)}
html.glass .chk-row.must{
  background:linear-gradient(180deg, rgba(255,252,222,.92), rgba(255,247,196,.8));
  border-left-color:#ffdd00;
  box-shadow:-5px 0 14px -4px rgba(240,210,40,.6), var(--shadow-1)}
html.glass .brief-card.today .bf-n{color:#d9a300}

/* ------------------------------------------------------------
   유리 두께감 — 위 하이라이트 + 아래 안쪽 그림자 + 빛 번짐
   투명도는 낮춰서(=더 불투명) 글씨가 또렷합니다
   ------------------------------------------------------------ */
html.glass .card,
html.glass .due-card,
html.glass .chk-row,
html.glass .list.folded,
html.glass .note-card,
html.glass .modal,
html.glass .login-box,
html.glass .picker,
html.glass .popover,
html.glass .btn,
html.glass .pill,
html.glass .search,
html.glass .seg-group,
html.glass .tab.solo,
html.glass .brief-card,
html.glass .done-row,
html.glass .step.current,
html.glass .step-group,
html.glass .prog-box,
html.glass .chk-box,
html.glass .bulk-bar,
html.glass .filter-bar{
  position:relative;
  border:1px solid rgba(255,255,255,.98);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -3px 9px rgba(150,158,175,.16),
    inset 2px 0 6px rgba(255,255,255,.55),
    0 8px 22px rgba(30,34,45,.13);
}
/* 위쪽에서 비스듬히 떨어지는 빛 */
html.glass .card::before,
html.glass .due-card::before,
html.glass .chk-row::before,
html.glass .note-card::before,
html.glass .brief-card::before,
html.glass .step.current::before,
html.glass .list.folded::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(150deg,
    rgba(255,255,255,.75) 0%, rgba(255,255,255,.28) 22%,
    rgba(255,255,255,0) 46%, rgba(255,255,255,0) 100%);
}
html.glass .card > *,
html.glass .due-card > *,
html.glass .chk-row > *,
html.glass .note-card > *,
html.glass .brief-card > *,
html.glass .step.current > *{position:relative;z-index:1}

/* 배경은 더 불투명하게 — 글씨가 흐려지지 않습니다 */
html.glass .card{background:rgba(255,255,255,.88)}
html.glass .card:hover{background:rgba(255,255,255,.96)}
html.glass .due-card,html.glass .chk-row,html.glass .done-row,
html.glass .list.folded,html.glass .brief-card{background:rgba(255,255,255,.9)}
html.glass .step.current{background:rgba(255,255,255,.96)}
html.glass .modal,html.glass .login-box{background:rgba(255,255,255,.97)}
html.glass .picker,html.glass .popover,html.glass .note-card{background:rgba(255,255,255,.98)}
html.glass .m-side{background:rgba(243,245,249,.96)}
html.glass .prog-box,html.glass .chk-box{background:rgba(255,255,255,.72)}
html.glass #topbar{background:rgba(255,255,255,.72)}
html.glass .m-desc,html.glass .nc-input,html.glass .chk-add,
html.glass .ti-checks,html.glass .search{background:rgba(255,255,255,.9)}

/* 바깥 빛 번짐 — 유리판이 떠 있는 느낌 */
html.glass #topbar,
html.glass .modal,
html.glass .note-card{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -3px 10px rgba(150,158,175,.14),
    0 18px 50px rgba(30,34,45,.2),
    0 0 0 1px rgba(255,255,255,.6);
}
html.glass .overlay{
  background:rgba(224,228,235,.5);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
}


/* ------------------------------------------------------------
   글래스 — 유리 스크롤 막대와 자잘한 마감
   ------------------------------------------------------------ */
html.glass .cards, html.glass .done-list, html.glass .side-pane, html.glass .chk-rows,
html.glass .check-view, html.glass .modal-body, html.glass #tplList, html.glass #labelMgrList,
html.glass #archiveList, html.glass #archiveList2, html.glass #memberList,
html.glass .activity, html.glass .comments, html.glass #board, html.glass .due-row-cards{
  scrollbar-color: rgba(150,158,175,.45) transparent;
}

html.glass .cards::-webkit-scrollbar-track,
html.glass .done-list::-webkit-scrollbar-track,
html.glass .side-pane::-webkit-scrollbar-track,
html.glass .chk-rows::-webkit-scrollbar-track,
html.glass .check-view::-webkit-scrollbar-track,
html.glass .modal-body::-webkit-scrollbar-track,
html.glass #board::-webkit-scrollbar-track,
html.glass .due-row-cards::-webkit-scrollbar-track{
  background:rgba(255,255,255,.35);
  border-radius:99px;
  box-shadow:inset 0 1px 2px rgba(150,158,175,.18), inset 0 -1px 0 rgba(255,255,255,.8);
}
html.glass .cards::-webkit-scrollbar-thumb,
html.glass .done-list::-webkit-scrollbar-thumb,
html.glass .side-pane::-webkit-scrollbar-thumb,
html.glass .chk-rows::-webkit-scrollbar-thumb,
html.glass .check-view::-webkit-scrollbar-thumb,
html.glass .modal-body::-webkit-scrollbar-thumb,
html.glass #board::-webkit-scrollbar-thumb,
html.glass .due-row-cards::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(178,188,205,.85));
  background-clip:content-box;
  border:3px solid transparent;
  border-radius:99px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 1px 3px rgba(30,34,45,.18);
}
html.glass .cards:hover::-webkit-scrollbar-thumb,
html.glass .done-list:hover::-webkit-scrollbar-thumb,
html.glass .side-pane:hover::-webkit-scrollbar-thumb,
html.glass .check-view:hover::-webkit-scrollbar-thumb,
html.glass .modal-body:hover::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(160,175,200,.9));
  background-clip:content-box;
}
html.glass .cards::-webkit-scrollbar-thumb:hover,
html.glass #board::-webkit-scrollbar-thumb:hover,
html.glass .modal-body::-webkit-scrollbar-thumb:hover,
html.glass .due-row-cards::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, rgba(200,220,255,1), rgba(125,158,214,.95));
  background-clip:content-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 2px 6px rgba(112,148,206,.45);
}

/* 자잘한 마감 */
html.glass input[type=checkbox]{accent-color:#7d9ed6}
html.glass select,html.glass .due-days{
  background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.98);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,1), 0 1px 2px rgba(30,34,45,.08)}
html.glass .search:focus,html.glass .m-desc:focus,html.glass .nc-input:focus{
  border-color:rgba(125,158,214,.85);
  box-shadow:0 0 0 3px rgba(125,158,214,.18), inset 0 1.5px 0 rgba(255,255,255,1)}
html.glass .avatar{
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55), 0 2px 6px rgba(30,34,45,.22)}
html.glass .toast{
  background:linear-gradient(180deg, rgba(52,56,66,.92), rgba(30,33,40,.94));
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(20,24,32,.35), inset 0 1px 0 rgba(255,255,255,.2)}
html.glass .lb,html.glass .badge,html.glass .done-step,html.glass .ck-chip{
  border:1px solid rgba(255,255,255,.85)}
html.glass .modal-close{
  background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.98);border-radius:50%;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,1), 0 2px 6px rgba(30,34,45,.12)}
html.glass .modal-close:hover{background:rgba(255,255,255,1)}
html.glass .due-arrow,html.glass .ord-btn,html.glass .fold-col,html.glass .add-in-list{
  background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(30,34,45,.08)}
html.glass .step-box.on{
  background:linear-gradient(180deg, rgba(141,171,222,.98), rgba(112,148,206,.98));
  border-color:rgba(255,255,255,.7);
  box-shadow:0 3px 9px rgba(112,148,206,.4), inset 0 1px 0 rgba(255,255,255,.6)}


/* ------------------------------------------------------------
   글래스 — 파랑도 선명하게 (유리 느낌은 그대로)
   ------------------------------------------------------------ */
html.glass{
  --blue:#3d7eff;
  --blue-soft:rgba(61,126,255,.14);
  --blue-line:rgba(61,126,255,.45);
}
html.glass .dday.left,html.glass .dday-chip,html.glass .nt-dday,
html.glass .step-due.left,html.glass .grp-name,html.glass .prog-name,
html.glass .fb-cap,html.glass .fb-chip,html.glass .dn-head,
html.glass .filter-link,html.glass .ck-label.t-a,
html.glass .nt-step,html.glass .nt-go,html.glass .ck-more,
html.glass .turn-banner.waiting b{color:#2a6bf0}
html.glass .chk-title{color:var(--ink)}

/* 파란 버튼·탭은 진한 유리 파랑 */
html.glass .btn.primary,
html.glass .pill.on,
html.glass .tab.on,
html.glass .side-tab.on,
html.glass .who-pill.on,
html.glass #pickModeBtn.on{
  background:linear-gradient(180deg,#5b93ff 0%,#3d7eff 55%,#2a67e0 100%);
  border-color:rgba(255,255,255,.7);
  color:#fff;
  box-shadow:0 4px 12px rgba(61,126,255,.4),
             inset 0 1.5px 0 rgba(255,255,255,.75),
             inset 0 -3px 7px rgba(20,60,160,.28);
  text-shadow:0 1px 1px rgba(20,50,130,.3);
}
html.glass .step.done .step-num,
html.glass .step-box.on{
  background:linear-gradient(180deg,#5b93ff,#3d7eff);
  border-color:rgba(255,255,255,.7);
  box-shadow:0 3px 9px rgba(61,126,255,.42), inset 0 1.5px 0 rgba(255,255,255,.7)}
html.glass .step.current{
  border-color:rgba(61,126,255,.9);
  box-shadow:0 6px 18px rgba(61,126,255,.24), inset 0 1.5px 0 rgba(255,255,255,1)}
html.glass .bar i,html.glass .prog-bar i,html.glass .chk-bar i{
  background:linear-gradient(90deg,#5b93ff,#2a67e0);
  box-shadow:0 0 8px rgba(61,126,255,.55)}
html.glass .add-mini,html.glass .owner-none.add-mini{
  border-color:rgba(61,126,255,.55);color:#2a6bf0}
html.glass .add-mini:hover{background:linear-gradient(180deg,#5b93ff,#3d7eff);color:#fff;
  border-color:transparent;box-shadow:0 3px 9px rgba(61,126,255,.4)}
html.glass .brief-card.turn .bf-n{color:#2a6bf0}
html.glass .card.is-new,html.glass .card.is-updated{
  background:linear-gradient(180deg, rgba(232,240,255,.94), rgba(216,230,253,.86));
  border-color:rgba(61,126,255,.35)}
html.glass .done-step.mine{
  background:linear-gradient(180deg, rgba(232,240,255,.95), rgba(214,229,254,.9));
  color:#2a6bf0;border-color:rgba(61,126,255,.35)}
html.glass .done-step.mine b{color:#2a6bf0}
html.glass .th-dot.glass{background:linear-gradient(135deg,#e9eaee 40%,#3d7eff)}


/* ============================================================
   THICK 테마 — 도톰하게 눌러 만든 느낌 (뉴모피즘)
   바탕과 같은 색 위에 빛과 그늘로 형태를 만듭니다
   ============================================================ */
html.thick{
  --bg:#e9ebf0;
  --white:#e9ebf0;
  --field:#e4e7ec;
  --ink:#2a2c33;
  --ink-2:#5b5e67;
  --muted:#9498a2;
  --line:transparent;
  --line-2:rgba(160,166,178,.18);
  --blue:#3d7eff;
  --blue-soft:#dee6fa;
  --blue-line:rgba(61,126,255,.5);
  --red:#f4433c;
  --red-soft:#fbe0de;
  --amber:#ffb020;
  --star:#ffcc00;
  --teal:#12b886;
  --scroll:#c9ccd4;
  --shadow-1:6px 6px 12px #c9ccd4, -6px -6px 12px #ffffff;
  --shadow-2:10px 10px 22px #c5c8d1, -10px -10px 22px #ffffff;
  --radius:16px;
}
html.thick body{background:var(--bg)}

/* 볼록하게 튀어나온 판 */
html.thick #topbar,
html.thick .card,
html.thick .modal,
html.thick .login-box,
html.thick .picker,
html.thick .popover,
html.thick .note-card,
html.thick .seg-group,
html.thick .tab.solo,
html.thick .pill,
html.thick .btn,
html.thick .due-card,
html.thick .chk-row,
html.thick .step-group,
html.thick .brief-card,
html.thick .done-row,
html.thick .arch-row,
html.thick .list.folded,
html.thick .bulk-bar,
html.thick .box-tabs,
html.thick .side-tabs,
html.thick .who-pill,
html.thick .add-mini,
html.thick .modal-close,
html.thick .due-arrow,
html.thick .ord-btn,
html.thick .fold-col,
html.thick .add-in-list,
html.thick .step-num,
html.thick .step-box,
html.thick .chk-toggle,
html.thick .step-due,
html.thick .dday-chip,
html.thick .owner-chip.multi,
html.thick .step-owner,
html.thick .tpl-tag,
html.thick .badge,
html.thick .done-step,
html.thick .ck-chip,
html.thick .ck-label,
html.thick .lb{
  border:none;
  background:var(--bg);
  box-shadow:var(--shadow-1);
}
html.thick .card,html.thick .modal,html.thick .login-box,
html.thick .note-card,html.thick .picker,html.thick .popover{box-shadow:var(--shadow-2)}
html.thick .card:hover,html.thick .due-card:hover,html.thick .chk-row:hover,
html.thick .btn:hover,html.thick .pill:hover{box-shadow:var(--shadow-2)}

/* 눌러 넣은 자리 — 입력칸·진행 막대·스크롤 홈 */
html.thick .search,
html.thick .m-desc,
html.thick .nc-input,
html.thick .chk-add,
html.thick .ti-checks,
html.thick .chk-box,
html.thick .prog-box,
html.thick .bar,
html.thick .prog-bar,
html.thick .chk-bar,
html.thick select,
html.thick .due-days,
html.thick .m-side{
  border:none;
  background:var(--field);
  box-shadow:inset 5px 5px 10px #cdd0d8, inset -5px -5px 10px #ffffff;
}
html.thick .search:focus,html.thick .m-desc:focus,html.thick .nc-input:focus{
  box-shadow:inset 5px 5px 10px #cdd0d8, inset -5px -5px 10px #ffffff,
             0 0 0 2px rgba(61,126,255,.35)}

/* 선명한 포인트 — 눌린 버튼은 색이 꽉 찹니다 */
html.thick .btn.primary,
html.thick .pill.on,
html.thick .tab.on,
html.thick .side-tab.on,
html.thick .who-pill.on,
html.thick #pickModeBtn.on{
  background:#3d7eff;color:#fff;
  box-shadow:4px 4px 10px rgba(38,80,170,.35), -4px -4px 10px #ffffff,
             inset 0 1px 0 rgba(255,255,255,.35)}
html.thick .step.done .step-num,html.thick .step-box.on{
  background:#3d7eff;color:#fff;
  box-shadow:3px 3px 8px rgba(38,80,170,.35), -3px -3px 8px #ffffff}
html.thick .bar i,html.thick .prog-bar i,html.thick .chk-bar i{
  background:#ffcc00;box-shadow:0 0 6px rgba(255,204,0,.55)}
html.thick .new-tag.turn,html.thick .late-badge{
  background:#f4433c;color:#fff;border:none;
  box-shadow:3px 3px 8px rgba(190,40,34,.35), -2px -2px 6px #ffffff}
html.thick .new-tag.mine{background:var(--bg);color:var(--muted);box-shadow:var(--shadow-1)}
html.thick .ico-star{fill:#ffcc00;filter:drop-shadow(1px 1px 2px rgba(190,150,0,.4))}
html.thick .star.on svg{fill:#ffcc00}
html.thick .dday.now,html.thick .dday-chip.now,html.thick .nt-dday.now,
html.thick .step-due.now,html.thick .ck-mark.warn,
html.thick .turn-banner.mine,html.thick .brief-card.late .bf-n{color:#f4433c}
html.thick .dday.left,html.thick .nt-dday,html.thick .grp-name,
html.thick .prog-name,html.thick .dn-head,html.thick .filter-link,
html.thick .nt-step,html.thick .nt-go,html.thick .ck-more,
html.thick .brief-card.turn .bf-n{color:#3d7eff}
html.thick .brief-card.today .bf-n{color:#f5a623}
html.thick .card.is-star{background:#fdf6d8;box-shadow:var(--shadow-1)}
html.thick .card.is-new,html.thick .card.is-updated{background:#e2eaFB;box-shadow:var(--shadow-1)}
html.thick .card.is-turn{box-shadow:var(--shadow-1), 0 0 0 2px #f4433c}
html.thick .card.is-late{box-shadow:var(--shadow-1), -4px 0 0 0 #f4433c}
html.thick .chk-row.must{background:#fdf6d8;box-shadow:var(--shadow-1), -4px 0 0 0 #ffcc00}
html.thick .chk-row.warn{background:#fbe6e4;box-shadow:var(--shadow-1), -4px 0 0 0 #f4433c}
html.thick .step.current{
  background:var(--bg);border:none;border-radius:14px;
  box-shadow:var(--shadow-1), 0 0 0 2px rgba(61,126,255,.55)}
html.thick .step.current .step-num{color:#f4433c;box-shadow:var(--shadow-1), 0 0 0 2px #f4433c}
html.thick .btn.danger{color:#f4433c}
html.thick .btn.danger:hover{background:#f4433c;color:#fff;
  box-shadow:4px 4px 10px rgba(190,40,34,.35), -4px -4px 10px #ffffff}
html.thick .avatar{box-shadow:3px 3px 7px #c9ccd4, -3px -3px 7px #ffffff}
html.thick .overlay{background:rgba(233,235,240,.72);backdrop-filter:blur(6px)}
html.thick #viewbar,html.thick #board,html.thick .check-view{background:transparent}
html.thick #dueBar{background:var(--bg);border-top:none;box-shadow:0 -8px 18px rgba(180,185,196,.35)}
html.thick .toast{background:#2a2c33;box-shadow:6px 6px 16px rgba(120,125,138,.5)}
html.thick .th-dot.thick{background:#e9ebf0;box-shadow:2px 2px 4px #c9ccd4, -2px -2px 4px #fff}

/* 스크롤도 눌러 넣은 홈 + 볼록한 막대 */
html.thick .cards::-webkit-scrollbar-track,
html.thick .done-list::-webkit-scrollbar-track,
html.thick .side-pane::-webkit-scrollbar-track,
html.thick .modal-body::-webkit-scrollbar-track,
html.thick #board::-webkit-scrollbar-track,
html.thick .due-row-cards::-webkit-scrollbar-track{
  background:var(--field);border-radius:99px;
  box-shadow:inset 2px 2px 5px #cdd0d8, inset -2px -2px 5px #ffffff}
html.thick .cards::-webkit-scrollbar-thumb,
html.thick .done-list::-webkit-scrollbar-thumb,
html.thick .side-pane::-webkit-scrollbar-thumb,
html.thick .modal-body::-webkit-scrollbar-thumb,
html.thick #board::-webkit-scrollbar-thumb,
html.thick .due-row-cards::-webkit-scrollbar-thumb{
  background:#dfe2e9;background-clip:content-box;border:3px solid transparent;border-radius:99px;
  box-shadow:2px 2px 5px #c9ccd4, -2px -2px 5px #ffffff}
html.thick .cards::-webkit-scrollbar-thumb:hover,
html.thick #board::-webkit-scrollbar-thumb:hover,
html.thick .modal-body::-webkit-scrollbar-thumb:hover{
  background:#3d7eff;background-clip:content-box}


/* ============================================================
   글래스 · THICK 마무리 손질
   ============================================================ */

/* 1) 떠 있어야 할 창은 계속 떠 있게 — 글래스 효과가 자리를 흔들지 않도록 */
html.glass .picker{position:fixed}
html.glass .popover{position:absolute}
html.glass .bulk-bar{position:absolute}
html.glass .note-stack{position:fixed}
html.thick .picker{position:fixed}
html.thick .popover{position:absolute}
html.thick .bulk-bar{position:absolute}
.picker{min-width:190px;max-width:320px}

/* 2) 카드 창은 빛 번짐 없이 또렷하게 */
html.glass .modal{
  background:rgba(255,255,255,.99);
  backdrop-filter:blur(30px) saturate(115%);
  -webkit-backdrop-filter:blur(30px) saturate(115%);
}
html.glass .modal::before{content:none}
html.glass .modal::after{
  background:linear-gradient(135deg,
    rgba(255,160,90,.3) 0%, rgba(255,255,255,0) 18%,
    rgba(255,255,255,0) 82%, rgba(130,170,235,.28) 100%);
}
html.glass .m-side{background:rgba(246,248,251,.99)}
html.glass .m-desc,html.glass .nc-input,html.glass .chk-add,
html.glass .ti-checks{background:rgba(255,255,255,.99)}
html.glass .modal .step-group,html.glass .modal .step.current,
html.glass .modal .prog-box,html.glass .modal .chk-box{backdrop-filter:none}
html.glass .overlay{
  background:rgba(222,226,234,.62);
  backdrop-filter:blur(26px) saturate(120%);
  -webkit-backdrop-filter:blur(26px) saturate(120%);
}

/* 3) 내 차례는 얼굴 동그라미 테두리로 */
.card.is-turn .owner-btn .avatar,
.card.is-turn .owner-none{box-shadow:0 0 0 2.5px var(--red);border-color:var(--red)}
.card.is-mine .owner-btn .avatar,
.card.is-mine .owner-none{box-shadow:0 0 0 2px var(--blue);border-color:var(--blue)}
.card.is-turn .owner-btn,.card.is-mine .owner-btn{position:relative;margin-bottom:5px}
html.glass .card.is-turn .owner-btn .avatar{box-shadow:0 0 0 2.5px var(--red),0 2px 6px rgba(244,67,60,.4)}
html.thick .card.is-turn .owner-btn .avatar{box-shadow:0 0 0 2.5px var(--red),3px 3px 7px #c9ccd4}

/* 4) 테마 점 — 네 가지 */
.th-dot.thick{background:linear-gradient(135deg,#f3f4f7 45%,#cfd3db)}


/* ============================================================
   그림자는 좁게, 유리는 더 투명하게
   ============================================================ */

/* --- 글래스: 그림자 번짐 줄이기 --- */
html.glass .card,
html.glass .due-card,
html.glass .chk-row,
html.glass .list.folded,
html.glass .brief-card,
html.glass .done-row,
html.glass .step-group,
html.glass .prog-box,
html.glass .chk-box,
html.glass .btn,
html.glass .pill,
html.glass .search,
html.glass .seg-group,
html.glass .tab.solo,
html.glass .bulk-bar,
html.glass .filter-bar{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 5px rgba(150,158,175,.13),
    0 3px 8px rgba(30,34,45,.10);
}
html.glass .card:hover,html.glass .due-card:hover,html.glass .chk-row:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 5px rgba(150,158,175,.13),
    0 5px 12px rgba(30,34,45,.14);
}
html.glass #topbar,
html.glass .modal,
html.glass .note-card,
html.glass .login-box{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 6px rgba(150,158,175,.12),
    0 8px 22px rgba(30,34,45,.16),
    0 0 0 1px rgba(255,255,255,.55);
}
html.glass .picker,
html.glass .popover{
  box-shadow:0 6px 16px rgba(30,34,45,.16), inset 0 1px 0 rgba(255,255,255,.95);
}
html.glass .card.is-turn{box-shadow:0 3px 9px rgba(244,67,60,.18), inset 0 1px 0 rgba(255,255,255,.9)}
html.glass .step.current{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 3px 8px rgba(30,34,45,.10),
             0 0 0 1.5px rgba(61,126,255,.5)}

/* --- 글래스: 유리답게 더 비치게 --- */
html.glass{ --white:rgba(255,255,255,.5) }
html.glass .card{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}
html.glass .card:hover{background:rgba(255,255,255,.68)}
html.glass .due-card,html.glass .chk-row,html.glass .done-row,
html.glass .list.folded,html.glass .brief-card{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}
html.glass .card.is-star{background:rgba(255,247,205,.6)}
html.glass .card.is-new,html.glass .card.is-updated{background:rgba(228,238,255,.62)}

/* 열린 카드 창도 유리로 — 뒤가 은은히 비칩니다 */
html.glass .modal{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
}
html.glass .m-side{background:rgba(246,248,251,.5)}
html.glass .m-desc,html.glass .nc-input,html.glass .chk-add,
html.glass .ti-checks,html.glass .search{background:rgba(255,255,255,.55)}
html.glass .step-group{background:rgba(255,255,255,.42)}
html.glass .step.current{background:rgba(255,255,255,.66)}
html.glass .prog-box,html.glass .chk-box{background:rgba(255,255,255,.4)}
html.glass #topbar{background:rgba(255,255,255,.5)}
html.glass .picker,html.glass .popover,html.glass .note-card{
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}

/* 비쳐도 글씨는 진하게 — 투명해진 만큼 글자 대비를 올립니다 */
html.glass{ --ink:#0e1015; --ink-2:#3d4149; --muted:#71767f }
html.glass .card-title,html.glass .modal h2,html.glass .chk-title,
html.glass .m-title,html.glass .list-title{color:#0e1015;font-weight:700}

/* 뒷배경 흐림은 살짝만 */
html.glass .overlay{
  background:rgba(226,230,238,.34);
  backdrop-filter:blur(7px) saturate(115%);
  -webkit-backdrop-filter:blur(7px) saturate(115%);
}

/* --- THICK: 그림자 번짐 줄이기 --- */
html.thick{
  --shadow-1:4px 4px 8px #ccced6, -4px -4px 8px #ffffff;
  --shadow-2:6px 6px 13px #c9ccd4, -5px -5px 11px #ffffff;
}
html.thick .search,
html.thick .m-desc,
html.thick .nc-input,
html.thick .chk-add,
html.thick .ti-checks,
html.thick .chk-box,
html.thick .prog-box,
html.thick .bar,
html.thick .prog-bar,
html.thick .chk-bar,
html.thick select,
html.thick .due-days,
html.thick .m-side{
  box-shadow:inset 3px 3px 6px #cfd2da, inset -3px -3px 6px #ffffff;
}
html.thick .search:focus,html.thick .m-desc:focus,html.thick .nc-input:focus{
  box-shadow:inset 3px 3px 6px #cfd2da, inset -3px -3px 6px #ffffff,
             0 0 0 2px rgba(61,126,255,.35)}
html.thick .btn.primary,
html.thick .pill.on,
html.thick .tab.on,
html.thick .side-tab.on,
html.thick .who-pill.on,
html.thick #pickModeBtn.on{
  box-shadow:3px 3px 7px rgba(38,80,170,.3), -3px -3px 7px #ffffff,
             inset 0 1px 0 rgba(255,255,255,.35)}
html.thick .toast{box-shadow:4px 4px 10px rgba(120,125,138,.45)}
html.thick #dueBar{box-shadow:0 -5px 11px rgba(180,185,196,.3)}


/* ============================================================
   내 차례 — 얼굴 동그라미에 빨간 테두리 + ME 배지
   ============================================================ */
.card.is-turn .owner-btn,
.card.is-mine .owner-btn{position:relative;margin-bottom:6px;overflow:visible}
.card.is-turn .owner-btn::after,
.card.is-mine .owner-btn::after{
  content:'ME';
  position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  font-size:8px;font-weight:700;letter-spacing:.08em;line-height:1;
  padding:3px 6px;border-radius:8px;color:#fff;background:var(--red);
  box-shadow:0 0 0 2px var(--white);
  pointer-events:none;
}
.card.is-mine .owner-btn::after{background:var(--blue)}

/* 동그라미 테두리 — 얼굴색과 겹치지 않게 흰 틈을 한 겹 둡니다 */
.card.is-turn .owner-btn .avatar,
.card.is-turn .owner-none{
  box-shadow:0 0 0 2px var(--white),0 0 0 3.5px var(--red);border-color:var(--red)}
.card.is-mine .owner-btn .avatar,
.card.is-mine .owner-none{
  box-shadow:0 0 0 2px var(--white),0 0 0 3px var(--blue);border-color:var(--blue)}
html.glass .card.is-turn .owner-btn .avatar{
  box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 3.5px var(--red)}
html.thick .card.is-turn .owner-btn .avatar{
  box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--red)}
html.glass .card.is-turn .owner-btn::after,
html.thick .card.is-turn .owner-btn::after{box-shadow:0 0 0 2px var(--bg)}

/* 카드 테두리도 같은 빨강으로 또렷하게 */
.card.is-turn{border-color:var(--red);border-width:1.5px}
html.glass .card.is-turn{border:1.5px solid var(--red)}
html.thick .card.is-turn{box-shadow:var(--shadow-1),0 0 0 1.5px var(--red)}


/* ============================================================
   THICK — 더 밝은 화이트톤 + 그림자가 잘리지 않게
   ============================================================ */
html.thick{
  --bg:#f1f2f6;
  --white:#f1f2f6;
  --field:#eceef3;
  --scroll:#d6d9e1;
  --shadow-1:4px 4px 8px #d5d8e1, -4px -4px 8px #ffffff;
  --shadow-2:6px 6px 13px #d1d4de, -5px -5px 11px #ffffff;
}
html.thick .card,html.thick .modal,html.thick .login-box,
html.thick .note-card,html.thick .picker,html.thick .popover{box-shadow:var(--shadow-2)}
html.thick .search,
html.thick .m-desc,
html.thick .nc-input,
html.thick .chk-add,
html.thick .ti-checks,
html.thick .chk-box,
html.thick .prog-box,
html.thick .bar,
html.thick .prog-bar,
html.thick .chk-bar,
html.thick select,
html.thick .due-days,
html.thick .m-side{
  background:var(--field);
  box-shadow:inset 3px 3px 6px #d8dbe3, inset -3px -3px 6px #ffffff;
}
html.thick .search:focus,html.thick .m-desc:focus,html.thick .nc-input:focus{
  box-shadow:inset 3px 3px 6px #d8dbe3, inset -3px -3px 6px #ffffff,
             0 0 0 2px rgba(61,126,255,.35)}
html.thick .avatar{box-shadow:3px 3px 7px #d5d8e1, -3px -3px 7px #ffffff}
html.thick #dueBar{box-shadow:0 -5px 11px rgba(196,200,212,.35)}
html.thick .card.is-star{background:#fdf7dc}
html.thick .card.is-new,html.thick .card.is-updated{background:#e7eefc}
html.thick .chk-row.must{background:#fdf7dc}
html.thick .chk-row.warn{background:#fbe8e6}
html.thick .th-dot.thick{background:#f1f2f6;box-shadow:2px 2px 4px #d5d8e1, -2px -2px 4px #fff}

/* 그림자가 스크롤 영역에 잘리지 않도록 사방에 여백을 둡니다 */
html.thick .cards,html.glass .cards{padding:12px 13px 18px 13px}
html.thick .list-head,html.glass .list-head{padding:2px 13px 4px}
html.thick #board,html.glass #board{padding:6px 28px 22px}
html.thick .due-row-cards,html.glass .due-row-cards{padding:12px 12px 16px 4px}
html.thick .check-view,html.glass .check-view{padding:6px 14px 18px 4px}
html.thick .chk-rows,html.glass .chk-rows{padding:8px 12px 16px 4px}
html.thick .modal-body,html.glass .modal-body{padding-bottom:18px}
html.thick .side-pane,html.glass .side-pane{padding:8px 12px 16px 4px}
html.thick .done-list,html.glass .done-list{padding:8px 12px 16px 4px}


/* ============================================================
   내 차례 — 테두리 없이 연한 분홍 배경으로
   ============================================================ */
.card.is-turn,
.card.is-turn.is-new,
.card.is-turn.is-updated,
.card.is-turn.is-star{
  border-color:transparent;border-width:1px;
  background:#fdecec;
}
.card.is-turn:hover{background:#fce2e1}
.card.is-turn.is-late{box-shadow:var(--shadow-1)}

html.dark .card.is-turn,
html.dark .card.is-turn.is-new,
html.dark .card.is-turn.is-updated{background:#3b2422;border-color:transparent}
html.dark .card.is-turn:hover{background:#452a27}

html.glass .card.is-turn,
html.glass .card.is-turn.is-new,
html.glass .card.is-turn.is-updated{
  border:1px solid transparent;
  background:rgba(253,224,222,.66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 3px 8px rgba(30,34,45,.10);
}
html.glass .card.is-turn:hover{background:rgba(252,214,211,.76)}

html.thick .card.is-turn,
html.thick .card.is-turn.is-new,
html.thick .card.is-turn.is-updated{
  background:#fbe8e7;box-shadow:var(--shadow-1);border:none;
}
html.thick .card.is-turn:hover{box-shadow:var(--shadow-2)}


/* 내 차례 카드도 중요(★) 카드처럼 은은한 테두리를 둡니다 */
.card.is-turn,
.card.is-turn.is-new,
.card.is-turn.is-updated,
.card.is-turn.is-star{border-color:#f2b6b2}
html.dark .card.is-turn,
html.dark .card.is-turn.is-new,
html.dark .card.is-turn.is-updated{border-color:#6b3a35}
html.glass .card.is-turn,
html.glass .card.is-turn.is-new,
html.glass .card.is-turn.is-updated{border:1px solid rgba(240,150,144,.6)}


/* ============================================================
   평평하게 — 리스트 제목줄과 단계 수 표시
   ============================================================ */

/* 리스트 제목줄은 바탕 위에 그냥 얹힌 글씨로 */
html.glass .list-head,
html.thick .list-head{
  background:transparent;border:none;box-shadow:none;backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html.glass .list-head::before,
html.thick .list-head::before{content:none}

/* 단계 수는 입체감 없이 또렷한 한 덩어리로 */
.card-meta .step-frac{
  font-size:11px;font-weight:600;color:var(--ink-2);
  background:var(--field);border:none;border-radius:6px;padding:2.5px 8px;
  line-height:1.3;letter-spacing:0;
}
html.dark .card-meta .step-frac{background:#33363b;color:#c4c8cf}
html.glass .card-meta .step-frac{
  background:rgba(235,239,246,.9);color:#3d4149;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;
}
html.thick .card-meta .step-frac{
  background:#e4e7ee;color:#4a4d55;box-shadow:none;border:none;
}
/* 카드가 색으로 강조될 때도 덩어리가 묻히지 않게 */
.card.is-turn .step-frac{background:rgba(244,67,60,.1);color:#a8352f}
.card.is-star .step-frac{background:rgba(214,170,20,.16);color:#7a5c05}
.card.is-new .step-frac,.card.is-updated .step-frac{background:rgba(61,126,255,.12);color:#2a56b5}
html.dark .card.is-turn .step-frac{background:#4d302d;color:#f5b1ac}
html.dark .card.is-star .step-frac{background:#4a4229;color:#f0d99a}
html.dark .card.is-new .step-frac,html.dark .card.is-updated .step-frac{background:#2b3550;color:#a9c4f5}


/* ============================================================
   카드 앞면 정리 — 제목은 기본 굵기, 요약은 박스 없이
   ============================================================ */
html.glass .card-title{font-weight:400;color:var(--ink)}
html.glass .list-title{font-weight:700}

/* 단계 수·전체 마감·코멘트·첨부는 바탕 위 글씨로만 */
.card-meta .badge,
.card-meta .step-frac{
  background:none !important;border:none !important;box-shadow:none !important;
  padding:0 !important;border-radius:0 !important;backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-size:11px;font-weight:500;color:var(--muted);line-height:1.4;
}
.card-meta .step-frac{color:var(--ink-2);font-weight:600}
html.dark .card-meta .step-frac{color:#c4c8cf}
html.glass .card-meta .step-frac{color:#3d4149}
html.thick .card-meta .step-frac{color:#4a4d55}
.card.is-turn .card-meta .step-frac{color:#a8352f}
.card.is-star .card-meta .step-frac{color:#7a5c05}
html.dark .card.is-turn .card-meta .step-frac{color:#f5b1ac}
html.dark .card.is-star .card-meta .step-frac{color:#f0d99a}
/* 항목 사이는 간격으로 구분합니다 */
.card-meta{gap:11px}