/* EchoPlanner 웹 디자인 시스템 — 따뜻한 페이퍼 + 모던 미니멀 (라이트/다크) */
/* ── 테마 토큰 ── 기본 = Paper(라이트). data-theme 로 전환 */
:root{
  --bg:#f4f0e9; --surface:#ffffff; --surface-2:#ece5d7;
  --ink:#25211c; --muted:#847a6c; --faint:#a59b8c;
  --line:#e2dbcd; --line-strong:#cfc5b3;
  --accent:#bd5f43; --accent-soft:#f3e2da; --on-accent:#fff;
  --A:#d84b36; --B:#c5841a; --C:#5f8459; --fab-bg:var(--accent);
  --sat:#2f6fe0; --hol:#e23b3b;   /* 날짜색: 토요일 파랑 / 일요일·공휴일 빨강 */
  --shadow:0 1px 2px rgba(43,39,34,.05), 0 4px 16px rgba(43,39,34,.08);
  --shadow-lg:0 -2px 8px rgba(43,39,34,.06), 0 -16px 48px rgba(43,39,34,.14);
  --radius:16px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme]){
  --bg:#141210; --surface:#2a2521; --surface-2:#352f29; --ink:#f4f0ea; --muted:#b7ac9c; --faint:#877e70;
  --line:#3a342e; --line-strong:#4c453c; --accent:#ee9778; --accent-soft:#3c2d24; --on-accent:#2a1f17;
  --A:#f37862; --B:#eeb74f; --C:#97b98c; --sat:#6fa8ff; --hol:#ff6b6b;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 26px rgba(0,0,0,.4); --shadow-lg:0 -2px 8px rgba(0,0,0,.4),0 -16px 48px rgba(0,0,0,.55);
}}
[data-theme="mint"]{
  --bg:#f0fbfa; --surface:#ffffff; --surface-2:#dcf3f0; --ink:#0d2b29; --muted:#4d7e79; --faint:#83bab4;
  --line:#cbe8e4; --line-strong:#a8dbd5; --accent:#0b8278; --accent-soft:#cdeeea;
  --A:#e23c39; --B:#d98a14; --C:#1f9389; --fab-bg:linear-gradient(135deg,#0fb3a3,#0891b2);
}
[data-theme="penguin"]{
  --bg:#f5f9fb; --surface:#ffffff; --surface-2:#e8f1f0; --ink:#283747; --muted:#71819a; --faint:#9fb0c2;
  --line:#e1eaf0; --line-strong:#ccd8e2; --accent:#0ea672; --accent-soft:#d6f7e8;
  --A:#ef4368; --B:#e89313; --C:#13a368; --fab-bg:var(--accent);
}
[data-theme="seriph"]{
  --bg:#fbf8f3; --surface:#ffffff; --surface-2:#f1ece1; --ink:#272320; --muted:#877d6c; --faint:#b0a591;
  --line:#e2d9c8; --line-strong:#d1c6b1; --accent:#356b57; --accent-soft:#dceae3;
  --A:#b3362a; --B:#9c7209; --C:#356b57; --fab-bg:var(--accent);
}
[data-theme="dark"]{
  --bg:#141210; --surface:#2a2521; --surface-2:#352f29; --ink:#f4f0ea; --muted:#b7ac9c; --faint:#877e70;
  --line:#3a342e; --line-strong:#4c453c; --accent:#ee9778; --accent-soft:#3c2d24; --on-accent:#2a1f17;
  --A:#f37862; --B:#eeb74f; --C:#97b98c; --sat:#6fa8ff; --hol:#ff6b6b;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 26px rgba(0,0,0,.4); --shadow-lg:0 -2px 8px rgba(0,0,0,.4),0 -16px 48px rgba(0,0,0,.55);
}
/* 테마별 스타일 차이 */
[data-theme="seriph"] .date{font-family:'Playfair Display',serif}
[data-theme="seriph"] .text{font-family:'Lora',serif}
[data-theme="seriph"] .item{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:14px 4px}
[data-theme="seriph"] .item.done{background:transparent}
[data-theme="seriph"] .pbadge{background:transparent;border-radius:0;width:auto;font-family:'Playfair Display',serif;font-weight:700}
[data-theme="seriph"] .pbadge.A{color:var(--A)} [data-theme="seriph"] .pbadge.B{color:var(--B)} [data-theme="seriph"] .pbadge.C{color:var(--C)}
[data-theme="penguin"] .pbadge{border-radius:999px;width:auto;min-width:21px;padding:0 8px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow-x:hidden}
html{scrollbar-width:none}   /* 전역 스크롤바 숨김 — 폰(오버레이)과 데스크톱 여백을 동일하게(모바일 우선 PWA) */
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{
  background:var(--bg); color:var(--ink);
  transition:background-color .3s ease, color .3s ease;
  font-family:'Inter',-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;   /* 라벨·버튼 길게 눌러 선택·복사 금지 — 전 화면 공통 */
}
input,textarea{user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}   /* 선택·복사는 사용자 입력창에서만 */
#edCrepe .ProseMirror,#edCrepe .ProseMirror *{user-select:text;-webkit-user-select:text}   /* 메모 편집기는 본문 선택 필수(플로팅 서식 툴바·복사) — 전역 선택 금지의 예외 */
.app{max-width:600px;margin:0 auto;min-height:100%;padding:0 18px calc(110px + env(safe-area-inset-bottom,0px));touch-action:pan-y}

/* Header */
.head{padding:26px 2px 14px}   /* 탭 3종 헤더 공통 규격 — .mhead·.vhead와 동일(제각각이던 34/26/22 통일) */
.head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.eyebrow{font-size:12.5px;font-weight:800;color:var(--accent);letter-spacing:.3px;text-transform:uppercase}   /* 윗줄 규격 = .brand와 동일 */
.date{margin:6px 0 0;font-size:40px;line-height:1;font-weight:700;letter-spacing:-.02em}
.date .dsuffix{font-size:17px;font-weight:600;color:var(--muted);margin-left:8px}
.date.dk-sat,.date.dk-sat .dsuffix{color:var(--sat)}   /* 토요일 헤더 날짜 */
.date.dk-hol,.date.dk-hol .dsuffix{color:var(--hol)}   /* 일요일·공휴일 헤더 날짜 */
.subdate{margin-top:6px;font-size:14px;color:var(--muted)}
.subrow{display:flex;align-items:center;gap:8px;margin-top:6px;white-space:nowrap}   /* 달력 칩을 연월 옆에 — 전용 줄 제거(v176) */
.subrow .subdate{margin-top:0}
.subrow .datebar{margin-top:0}
.ring{position:relative;width:52px;height:52px;flex:0 0 auto}
.ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring-bg{stroke:var(--line-strong)}
.ring-fg{stroke:var(--accent);stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}
.ring-num{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted)}   /* inset: 금지 — 구형 WebView(Chrome<87)에서 무시돼 %가 링 밖으로 떨어짐 */
.head-right{display:flex;align-items:center;gap:6px}   /* ⏱ 추가로 5개 — 간격만 줄여 수용(v176) */
.theme-btn,.home-btn{width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:11px;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:transform .15s}
.theme-btn:active,.home-btn:active{transform:scale(.92)}
.theme-btn svg{width:19px;height:19px}
.theme-wrap{position:relative}
.theme-menu{position:absolute;top:46px;right:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:6px;z-index:25;min-width:150px;display:flex;flex-direction:column;gap:2px}
.theme-menu[hidden]{display:none}
.theme-menu button{display:flex;align-items:center;gap:11px;background:transparent;border:0;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;font-family:inherit;text-align:left}
.theme-menu button:hover,.theme-menu button.on{background:var(--surface-2)}
.theme-menu button.on::after{content:'✓';margin-left:auto;color:var(--accent);font-weight:700}
.theme-menu i{width:17px;height:17px;border-radius:5px;flex:0 0 auto;border:1px solid rgba(0,0,0,.1)}

/* Google Drive 동기화 버튼·메뉴 */
.sync-wrap{position:relative}
.sync-btn{position:relative;width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:11px;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:transform .15s}
.sync-btn:active{transform:scale(.92)}
.sync-btn svg{width:19px;height:19px}
.sync-dot{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:#b8b0a4;border:2px solid var(--surface)}
.sync-dot.connecting,.sync-dot.syncing{background:#f0a020;animation:syncPulse 1s infinite}
.sync-dot.synced,.sync-dot.connected{background:#22b07a}
.sync-dot.offline{background:#8a8a93}
.sync-dot.error{background:#e0533f}
@keyframes syncPulse{0%,100%{opacity:1}50%{opacity:.3}}
.sync-menu{position:absolute;top:46px;right:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:8px;z-index:25;min-width:200px;display:flex;flex-direction:column;gap:6px}
.sync-menu[hidden]{display:none}
.sync-status{font-size:12.5px;color:var(--muted);padding:4px 6px 2px;font-weight:600}
.sync-act{background:var(--surface-2);border:0;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;text-align:left;transition:transform .1s}
.sync-act:active{transform:scale(.97)}
.sync-act.primary{background:var(--accent);color:#fff}
.sync-act.danger{color:#c0392b;background:transparent}
.sync-act[hidden]{display:none}

/* List */
.list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:13px 14px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;   /* 꾹 눌러도 복사·번역 메뉴 안 뜨게(롱프레스=연기·삭제 전용) */
  transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s}
/* 꾹 눌러 삭제: 행 가운데에 휴지통이 떠서 빨강이 아래→위로 차오름(손가락 밖으로 보임) */
.item.arm > :not(.del-center){opacity:.28;transition:opacity .15s}
.del-center{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;place-items:center;z-index:5;pointer-events:none}
.bin-liquid{fill:var(--A);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .18s ease}
.del-center.go .bin-liquid{transform:scaleY(1);transition:transform 1.9s linear}
.bin-outline{fill:none;stroke:var(--A);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* 손맛 애니메이션 */
.item.fx-add{animation:fxAdd .48s cubic-bezier(.34,1.5,.5,1)}
@keyframes fxAdd{from{opacity:0;transform:translateY(26px) scale(.85)}to{opacity:1;transform:none}}
/* 토글 직후 이동한 자리에서 0.8초 강조 — 연녹 채움 + 파랑 4px 테두리(위젯과 동일색) */
.item.fx-hold{animation:fxHold .8s ease}
@keyframes fxHold{0%,80%{background:#d6f0dd;box-shadow:inset 0 0 0 4px #2f6fe0}100%{background:var(--surface-2);box-shadow:none}}
/* 진입 — 할일들이 의욕적으로 올라오며 등장(배지 팝) */
/* backwards만 — forwards로 끝의 transform:none을 붙들면 .pre-hold scale이 씹힘 */
.item.fx-enter{animation:fxEnter .58s cubic-bezier(.16,1.28,.3,1) backwards}
.item.fx-enter .pbadge{animation:badgePop .58s cubic-bezier(.2,1.9,.4,1) both;animation-delay:inherit}
@keyframes fxEnter{0%{opacity:0;transform:translateY(34px) scale(.88)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes badgePop{0%{transform:scale(0) rotate(-14deg)}65%{transform:scale(1.3) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.state.fx-pop{animation:fxPop .5s ease}
@keyframes fxPop{0%{transform:scale(1)}26%{transform:scale(1.55)}55%{transform:scale(.88)}100%{transform:scale(1)}}
.state.fx-pop::after{content:'';position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border-radius:50%;border:2.5px solid var(--accent);
  animation:fxRing .62s ease-out forwards;pointer-events:none}
@keyframes fxRing{from{transform:scale(1);opacity:.7}to{transform:scale(3.4);opacity:0}}
@keyframes ringPulse{0%,100%{transform:scale(1)}40%{transform:scale(1.16)}}
.ring.celebrate{animation:ringPulse .7s ease}
/* 완료 축하 컨페티 */
.confetti{position:fixed;border-radius:2px;pointer-events:none;z-index:60;
  transform:translate(-50%,-50%);animation:confettiFly 1.05s cubic-bezier(.2,.5,.3,1) forwards}
@keyframes confettiFly{
  0%{transform:translate(-50%,-50%) scale(.7) rotate(0);opacity:1}
  18%{transform:translate(calc(-50% + var(--tx) * .55),calc(-50% + var(--ty))) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty) + var(--fall))) scale(.7) rotate(var(--rot));opacity:0}
}
/* 전체완료 토스트 */
.toast{position:fixed;left:50%;top:36%;z-index:70;pointer-events:none;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 44px rgba(0,0,0,.22);
  padding:14px 24px;border-radius:18px;font-size:16px;font-weight:700;white-space:nowrap;
  animation:toastPop 2s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes toastPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  82%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.96)}
}
/* 실행취소 토스트(클릭 가능, 하단) */
.toast.undo{top:auto;bottom:calc(22px + env(safe-area-inset-bottom));pointer-events:auto;white-space:nowrap;
  display:flex;align-items:center;gap:16px;padding:12px 14px 12px 20px;font-size:15px;
  animation:undoPop .22s ease forwards}
.toast.undo .undo-btn{border:0;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:14px;
  padding:8px 15px;border-radius:11px;cursor:pointer;font-family:inherit}
.toast.undo .undo-btn:active{transform:scale(.95)}
@keyframes undoPop{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
.item.done{background:var(--surface-2);box-shadow:none;border-color:transparent}
.state{width:24px;height:24px;flex:0 0 auto;border-radius:50%;border:2px solid var(--line-strong);
  cursor:pointer;position:relative;transition:.2s;display:grid;place-items:center}
.state .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .2s}
.state .chk{position:absolute;color:#fff;font-size:13px;opacity:0;transform:scale(.5);transition:.2s}
.item.doing .state{border-color:var(--accent)}
.item.doing .state .dot{transform:scale(1)}
.item.done .state{background:var(--accent);border-color:var(--accent)}
.item.done .state .chk{opacity:1;transform:scale(1)}
.pbadge{min-width:21px;height:21px;flex:0 0 auto;border-radius:7px;font-size:11px;font-weight:800;color:#fff;display:grid;place-items:center;padding:0 4px}
.pbadge.A{background:var(--A)} .pbadge.B{background:var(--B)} .pbadge.C{background:var(--C)}
/* 일정 시간 — 행 오른쪽(액션 옆) 카드 묶음. 제목 아래(.text)엔 안 둠 */
.t-times{flex:0 0 auto;display:flex;flex-direction:row;gap:4px;align-items:center}   /* 가로 — 세로로 쌓으면 구간 일정만 행 높이가 커짐 */
.t-badge{font-size:11px;font-weight:700;line-height:1.3;color:var(--accent);background:var(--accent-soft);border:1.5px solid transparent;border-radius:7px;padding:2px 6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.t-badge .ap{font-size:9px;font-weight:700;opacity:.82;margin-right:2px}   /* 오전/오후 작게 — 칩 폭 절약 */
.t-badge.allday{color:#2e9e6b;background:#e7f5ee}
.item.done .t-badge,.item.carried .t-badge{color:var(--faint);background:var(--surface-2);border-color:var(--line-strong)}   /* 완료 = 흐린 채움 + 흐린 박스 */
/* 일정 신호색 — 위젯과 동일(채움+흰 글자). 먼미래=녹 / 30분전·진행중=주황 / 지남=빨강 */
.t-badge.s-future{color:#fff;background:#2e9e6b}
.t-badge.s-soon{color:#fff;background:#e8821e}
.t-badge.s-passed{color:#fff;background:#e23b3b}
/* 종료 칩 = 같은 hue 외곽선(채움 없음) → 시작(채움)과 구분 */
.t-badge.end{background:transparent;border-color:currentColor}
.t-badge.end.s-future{color:#2e9e6b;background:transparent;border-color:#2e9e6b}
.t-badge.end.s-soon{color:#e8821e;background:transparent;border-color:#e8821e}
.t-badge.end.s-passed{color:#e23b3b;background:transparent;border-color:#e23b3b}
/* 미완료·당일 일정 카드 테두리 — 위젯 cardStateRes와 동일 신호색(2px). 완료/이월/타날짜/종일·무시각은 ts 클래스 없음 → 일반 테두리 */
.item.ts-future,.item.ts-soon,.item.ts-passed{border-width:2px}
.item.ts-future{border-color:#2e9e6b}
.item.ts-soon{border-color:#e8821e}
.item.ts-passed{border-color:#e23b3b}
.text{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.t-title{font-size:16px;font-weight:450;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 1줄 접기 — 행 높이 균일. 전체는 ⌄ 펼침으로 */
.t-notes{font-size:13px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.done .t-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.item.done .t-notes{color:var(--faint)}
/* 행 동작: 연기·삭제 아이콘 칩. 삭제는 꾹 누르면 가운데 휴지통이 차올라 삭제(즉시삭제 X) */
.row-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.more{flex:0 0 auto;width:38px;height:38px;border:0;background:var(--surface-2);color:var(--muted);cursor:pointer;border-radius:11px;
  display:grid;place-items:center;transition:color .15s,background .15s,transform .1s;touch-action:none;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}
.item:hover .more{background:var(--line)}
.more svg{width:20px;height:20px}
.more:active{color:var(--accent);background:var(--line);transform:scale(.94)}

/* 행 동작 팝업: 연기 + 삭제 */
.snz-pop{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 30px rgba(43,39,34,.22);padding:5px;display:flex;flex-direction:column;gap:1px;width:max-content;min-width:0}
.snz-pop[hidden]{display:none}
.snz-item{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;
  text-align:left;padding:9px 12px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:transform .08s}
.snz-item svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
/* 꾹 끌어올릴 때: 아이콘=손가락 바로 위, 글씨는 손 반대쪽으로 벌어져 안 가림. 손 오른쪽이면 아이콘 오른쪽·글씨 왼쪽으로 뒤집음 */
.snz-pop.gutter-left .snz-item,.snz-pop.gutter-right .snz-item{gap:20px}
.snz-pop.gutter-right .snz-item{flex-direction:row-reverse}
.snz-item:hover,.snz-item:active{background:var(--surface-2)}
.snz-sep{height:1px;background:var(--line);margin:3px 6px}
.snz-item.del{position:relative;overflow:hidden;color:#c0392b}
.snz-item.del svg,.snz-item.del span{position:relative;z-index:1}
.snz-item.del:hover,.snz-item.del:active{background:#fbeae8}
/* 연기 항목: 손가락 밑이면 하이라이트(살짝 커짐). 삭제는 제외(아래 차오름으로) */
.snz-item.hot:not(.del){background:var(--accent);color:#fff;transform:scale(1.03)}
.snz-item.hot:not(.del) svg{opacity:1}
/* 삭제: 손가락 올린 채 유지하면 휴지통이 아래→위로 차오르고, 다 차면 삭제(떼면 취소) */
.snz-item.del::after{content:'';position:absolute;left:0;right:0;bottom:0;height:0;background:#c0392b;z-index:0}
.snz-item.del.confirming{color:#fff}
.snz-item.del.confirming::after{animation:delFill 1.2s linear forwards}
@keyframes delFill{from{height:0}to{height:100%}}

/* Empty */
.empty{display:none;text-align:center;padding:48px 20px;color:var(--muted)}
.empty-mark{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-size:24px}
.empty p{margin:0;font-size:15px} .empty b{color:var(--accent)}
.foot{color:var(--faint);font-size:12px;text-align:center;padding:24px 0}

/* FAB */
.fab-stack{position:fixed;z-index:20;right:max(20px,calc(50% - 300px + 20px));bottom:calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:12px}
.fab{width:58px;height:58px;border-radius:19px;border:0;background:var(--fab-bg);color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.2);transition:transform .15s, box-shadow .15s}
.fab[hidden]{display:none}
.fab:hover{transform:translateY(-1px)}
.fab:active{transform:scale(.92)}

/* Bottom sheet */
/* 중앙 모달 — 기존 음성(듣기) 창처럼 화면 중앙에 뜸. 플렉스 중앙정렬 + 좁은 폭 */
.sheet-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:flex-start;justify-content:center;padding:18vh 16px 16px;
  visibility:hidden;opacity:0;transition:opacity .22s, visibility .22s}
.sheet-wrap.is-open{visibility:visible;opacity:1}
.sheet-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(20,16,12,.34);backdrop-filter:blur(2px)}
.sheet{position:relative;width:min(90vw,432px);max-height:100%;overflow:hidden;margin:0;background:var(--surface);
  border-radius:20px;box-shadow:var(--shadow-lg);padding:16px 16px 18px;display:flex;flex-direction:column;
  transform:translateY(14px) scale(.98);opacity:0;transition:transform .24s cubic-bezier(.32,.72,0,1),opacity .2s}
.sheet-wrap.is-open .sheet{transform:none;opacity:1}
/* 내용은 스크롤, 추가 버튼은 카드 하단 고정 — 키보드+패널이어도 입력하면서 추가가 항상 보이게 */
.sheet #sheetFlip{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.sheet-form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}   /* overflow-x:hidden — 축소된 opt(설계폭 420)의 zoom 전 레이아웃 폭이 만드는 유령 가로 스크롤바 차단(내용은 폭 안에 들어감) */
.sheet-handle{display:none}   /* 중앙 모달 — 바텀시트 드래그 핸들 불필요 */
.sheet-input{width:100%;border:0;background:transparent;color:var(--ink);font-size:18px;font-weight:500;
  line-height:1.5;padding:10px 2px 14px;outline:none;font-family:inherit;resize:none;display:block;
  min-height:104px;max-height:220px;overflow-y:auto}
.sheet-input::placeholder{color:var(--faint);font-weight:400}
.sheet-prio{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding:14px 0}
.prio-label{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.prio-pick{display:flex;align-items:center;gap:8px}
.pdot{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;
  font-size:13px;font-weight:800;color:var(--faint);cursor:pointer;transition:.18s;display:grid;place-items:center}
.pdot.A.is-on{background:var(--A);border-color:var(--A);color:#fff}
.pdot.B.is-on{background:var(--B);border-color:var(--B);color:#fff}
.pdot.C.is-on{background:var(--C);border-color:var(--C);color:#fff}
/* + 선택: 글자를 누른 채 위로 올리면 위쪽 버블이 떠서 A→A+ */
/* touch-action:none — WebView에서 세로 드래그가 시트 스크롤로 가로채지지 않게(필수) */
.pdot{position:relative;touch-action:none}
.pdot.is-on.plus::after{content:'+';position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 2px;
  border-radius:8px;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:800;
  display:grid;place-items:center;border:1.5px solid var(--surface)}
/* A+ 버블 — 왼쪽 dot에 고정(A+는 그대로, 급함만 오른쪽에 붙음). 색은 중요도별(--pc: A빨강/B주황/C초록) */
.prio-bubble{--pc:var(--accent);position:fixed;z-index:90;transform:translateY(-100%);pointer-events:none;white-space:nowrap;
  height:36px;padding:0 12px;border-radius:11px;display:flex;align-items:center;font-size:14px;font-weight:800;
  background:var(--surface);border:1.5px solid var(--pc);color:var(--pc);box-shadow:var(--shadow);
  transition:background .12s,color .12s,border-color .12s}
.prio-bubble[data-p=A]{--pc:var(--A)}
.prio-bubble[data-p=B]{--pc:var(--B)}
.prio-bubble[data-p=C]{--pc:var(--C)}
.prio-bubble[hidden]{display:none}
.prio-bubble.armed{background:var(--pc);color:#fff}
.prio-hint{font-size:13px;color:var(--accent);font-weight:500;margin-left:2px;white-space:nowrap}
.sheet-add{border:0;background:var(--accent);color:#fff;font-size:16px;font-weight:600;
  padding:13px 22px;border-radius:13px;cursor:pointer;transition:.15s;font-family:inherit}
/* 시트 하단 푸터 = 듣기(1/5) + 추가(5/5) 한 줄 — 스크롤돼도 항상 보임. (.foot은 메인 화면 힌트 푸터라 이름 분리) */
.sheet-foot{display:flex;align-items:stretch;gap:8px;margin-top:8px;flex:0 0 auto}
.sheet-foot .mic{flex:1 1 0;width:auto;height:auto;border-radius:13px}
.sheet-add.full{flex:5 1 0;width:auto;margin-top:0}   /* 듣기 = 추가의 1/5 */
.sheet-add:active{transform:scale(.97)}

/* ── 한 화면 통합 입력(목업) — 입력칸 글로우 · 옵션행 · 시간칩 · 접이식 패널 ── */
.input-wrap{position:relative;border:1.5px solid var(--line-strong);border-radius:13px;background:var(--surface)}
.input-wrap .sheet-input{min-height:96px;padding:12px 13px}
/* 듣기 모드 — 카드는 고정, "글로우(빛)"만 일정 템포로 두근두근(빛이 커졌다 작아짐). 크기 변화 없음 */
.sheet.hearing{border:1.5px solid var(--accent);animation:glowBeat 1.7s ease-in-out infinite}
@keyframes glowBeat{
  0%,100%{box-shadow:var(--shadow-lg), 0 0 10px 0 var(--accent)}
  50%    {box-shadow:var(--shadow-lg), 0 0 46px 14px var(--accent)}}

.opt{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;border-top:1px solid var(--line);padding:11px 0 0;margin-top:12px}
.opt #dateChip{margin-left:auto}   /* 날짜·일정은 우측 묶음 — 주제 칩과 시각 분리 */
.opt .prio-pick{gap:8px}
.opt .pdot{flex:0 0 auto}
.mic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;border:1.5px solid var(--line-strong);
  background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;font-family:inherit}
.mic svg{width:19px;height:19px}
.mic.rec{background:var(--accent);border-color:var(--accent);color:#fff}

.time-chip{white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font-size:15px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1.5px solid transparent;
  border-radius:99px;padding:5px 9px;cursor:pointer;font-family:inherit}
.time-chip.empty{}   /* 빈 '일정'도 붉은 칩 그대로(외곽선 회색 스타일 제거) */
.time-chip svg{width:13px;height:13px}
.time-chip .cv{display:inline-flex;align-items:center;margin-left:3px;opacity:.85}
.time-chip .cv svg{width:14px;height:14px;transition:transform .2s}
.time-chip .hg{font-size:14px}   /* 칩 안 한글((수)·익일 등)만 -1px — 한글이 숫자보다 커 보이는 광학 보정 */
.time-chip .cv.up svg{transform:rotate(180deg)}

/* ── 날짜·시간 두 칩 한 줄 + 반복 배지(녹색) — 음성 파싱 정보 다 보이게 ── */
/* 옵션행 한 줄 유지 = fitOpt가 실제 내용 폭 기준 동적 zoom — 평소엔 원본 크기(1.0), 내용이 넘칠 때만 축소.
   패널은 축소 밖 — miniwheel 스크롤 계산 보호 */
.opt{gap:6px}
#dateChip{margin-left:auto}                 /* 날짜+일정 칩 = 우측 정렬 */
#timeChip{margin-left:0}                    /* 날짜칩 바로 옆(gap만) */
.rep-badge{display:inline-block;height:20px;line-height:20px;padding:0 8px;text-align:center;
  font-size:11px;font-weight:700;letter-spacing:.2px;color:#fff;
  background:#2f9e60;border-radius:99px;white-space:nowrap;pointer-events:none}
  /* 세로 중앙 = line-height 방식: 라인박스 높이=박스 높이면 baseline이 중앙에 놓여 잉크 위/아래 대칭. 칩(flex center)이 배지 박스를 세로 중앙에 둠 */   /* 시간칩 안 왼쪽 인라인 알약(위로 안 뜸). line-height:1서 잉크가 라인박스 꽉 참=대칭 패딩 정중앙 */

.time-panel{display:none;margin-top:8px;padding:8px 7px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg)}
.time-panel.open{display:block}
/* 패널 맨 위 날짜 선택 행 — 전폭, 네이티브 date input(스누즈와 동일)을 투명 오버레이로 */
.date-row{position:relative;display:flex;align-items:center;gap:6px;width:100%;border:1.5px solid var(--line-strong);border-radius:12px;
  background:var(--bg);padding:8px 11px;margin-bottom:8px;cursor:pointer;font-family:inherit}
.date-row .dv{margin-left:auto;font-size:13px;font-weight:800;color:var(--ink)}   /* 날짜 텍스트 우측 정렬(시작/종료 값 정렬과 동일 패턴) */
.date-row .cal{margin-left:0;color:var(--accent);display:flex}
.date-row .cal svg{width:16px;height:16px}
.date-row .dnative{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;cursor:pointer;font-size:16px}
.tp-rep{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;align-items:center}
.tp-rep .k{font-size:12px;color:var(--muted);font-weight:600;margin-right:2px}
.rep-b{font-size:11px;font-weight:600;color:var(--muted);background:var(--surface);border:1.5px solid var(--line-strong);
  border-radius:99px;padding:4px 10px;cursor:pointer;font-family:inherit}
.rep-b.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── 일정(시간) 설정 ── */
/* 중요도 줄 오른쪽 칩. 설정되면 시작·종료를 각각 카드(.tc)로 세로로. 중요도 nowrap이라 안 밀림 */
.timebtn{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:7px;border:1.5px solid var(--line-strong);background:var(--surface);
  border-radius:11px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;white-space:nowrap}
.timebtn.set{border-color:transparent;background:transparent;padding:4px 0;color:var(--accent)}
.timebtn #schedBtnLabel{display:inline-flex;flex-direction:column;gap:4px;align-items:flex-start}
.timebtn .tc{background:var(--accent-soft);color:var(--accent);border:1px solid #e8c9bd;border-radius:7px;padding:2px 9px;font-size:13px;font-weight:800;white-space:nowrap;line-height:1.4}
.timebtn .tc.end{background:#e8eef6;color:#45628f;border-color:#cdd9ea}
.timebtn svg{width:15px;height:15px;flex:0 0 auto}
/* 3D 플립 — 일정(뒷면)↔할일(앞면). 높이는 JS(syncFlipHeight)가 활성 면 높이로 맞춰 부드럽게 전환 */
.sheet-flip{position:relative;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.45,.05,.25,1),height .42s cubic-bezier(.45,.05,.25,1)}
.sheet-flip.scheduling{transform:rotateY(180deg)}
.sheet-face{position:absolute;top:0;left:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* 뒷면(일정)은 앞면 높이를 채우고 적용을 하단에 고정 → 앞·뒤 같은 크기 */
.sheet-back{transform:rotateY(180deg);height:100%;display:flex;flex-direction:column}
/* 자연어 입력칸 + 음성 (일정 폼) */
.nl-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.nl-input{flex:1;min-width:0;border:1.5px solid var(--line-strong);border-radius:12px;padding:11px 13px;font-size:14px;font-family:inherit;background:var(--bg);color:var(--ink);outline:none}
.nl-input:focus{border-color:var(--accent)}
.nl-input::placeholder{color:var(--faint)}
.nl-mic{flex:0 0 auto;width:44px;height:44px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s}
.nl-mic.rec{background:var(--accent);border-color:var(--accent);color:#fff}
.nl-mic svg{width:20px;height:20px}
@keyframes schedIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.sched-head{display:flex;align-items:center;gap:9px;padding:4px 0 12px}
.sched-nav{width:33px;height:33px;border:1.5px solid var(--line-strong);background:var(--surface);border-radius:11px;display:grid;place-items:center;color:var(--ink);cursor:pointer;flex:0 0 auto}
.sched-nav svg{width:16px;height:16px}
.sched-title{font-size:15px;font-weight:700;color:var(--ink)}
.bmodes{display:flex;gap:6px}
.mchip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap}
.mchip.ev{background:#eaf1ff;border-color:#cfe0ff;color:#2f6fe0}
.mchip.rg{background:var(--accent-soft);border-color:#e8c9bd;color:var(--accent)}
.mchip.ov{background:#efe9fb;border-color:#ddd0f5;color:#7a5cc7}
.mchip.ad{background:#e7f5ee;border-color:#bfe0cd;color:#2e9e6b}
.sched-allday{margin-left:auto;padding:5px 7px;border-radius:9px;border:1.5px solid var(--line-strong);background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}   /* 드래그 선택 — 스크롤 가로채기·길게 눌러 복사 메뉴 차단 */
.sched-allday.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* 시간 행 끝의 모드 버튼(종일/시각/기간) — 가운데 정렬, 우측 밀착. 좁으면 줄바꿈돼도 우측 정렬 */
.trow2>.sched-allday{align-self:center;flex:0 0 auto;margin-left:auto;white-space:nowrap}
/* 날짜 줄 = 날짜 칸 + 반복 버튼(별도 칸) 나란히 */
.drow{display:flex;align-items:stretch;gap:5px;margin-bottom:6px}
.drow .date-row{flex:1;min-width:0;margin-bottom:0}
.drow>.sched-allday{flex:0 0 auto;white-space:nowrap}
/* 반복 선택 스택 — 반복 버튼(sched-allday) 위로 동일 규격 선택지가 떠오름(중요도 드래그와 같은 조작) */
.rep-stack{position:fixed;z-index:70;display:flex;flex-direction:column;gap:6px}
.rep-opt{position:relative;padding:6px 8px;border-radius:9px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--muted);
  font-size:12px;font-weight:700;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.14);cursor:pointer;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.rep-opt.cur{border-color:var(--accent);color:var(--accent)}
.rep-opt.ap{padding:2px 3px;font-size:11px;border-radius:6px}   /* 오전/오후 스택 옵션 — apcard와 동일 규격 */
.rep-opt.md{padding:5px 7px;font-size:11px}   /* 모드(종일/시각/기간) 스택 옵션 — 모드 버튼과 동일 규격 */
.rep-opt.armed{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* 누르는 자리는 그대로 두고 글씨만 손 반대쪽으로 밀어 안 가리게 함.
   기본은 오른손 엄지 기준 — 손가락은 오른쪽, 글씨는 왼쪽. 화면 왼쪽에서 눌렀을 때만 뒤집음. */
.rep-stack.gutter-left .rep-opt{padding-left:34px;text-align:right}
.rep-stack.gutter-right .rep-opt{padding-right:34px;text-align:left}
/* 손가락 자리를 알려주는 핸들 — 거터 안 세로 막대. 어느 줄에 있는지 눈으로 잡힘. */
.rep-stack.gutter-left .rep-opt::before,.rep-stack.gutter-right .rep-opt::before{
  content:'';position:absolute;top:50%;transform:translateY(-50%);width:3px;height:12px;border-radius:2px;
  background:var(--line-strong)}
.rep-stack.gutter-left .rep-opt::before{left:13px}
.rep-stack.gutter-right .rep-opt::before{right:13px}
.rep-stack.gutter-left .rep-opt.armed::before,.rep-stack.gutter-right .rep-opt.armed::before{background:var(--on-accent)}
.mchip.rep{background:#edf5ec;color:#3f7a4a;border:1px solid #cfe5d2}
[data-theme="dark"] .mchip.rep{background:#2c352b;color:#a7d4ad;border-color:#3d4a3c}
.trow2{display:flex;flex-wrap:wrap;align-items:stretch;gap:4px;margin-top:2px;position:relative;z-index:5}   /* 안 들어가면 줄바꿈 — 칼럼 내부 잘림(라벨·휠 겹침) 방지 */
.tcol{flex:1 1 auto;min-width:max-content;display:flex;align-items:center;gap:2px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--bg);padding:1px 3px}   /* 선 진하게 + 높이 = 날짜 칸과 동일(~35px) */
/* 플립 토글 버튼 (앞=일정 / 뒤=할일) — 같은 모양 44×44 세로 */
.flip-toggle{flex:0 0 auto;align-self:center;margin-left:auto;width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--muted);font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;padding:0}
.flip-toggle svg{width:17px;height:17px}
.flip-toggle:active{transform:scale(.95)}
.flip-toggle.set{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.tcol.dim{opacity:.4;pointer-events:none}
.tl-in{font-size:10px;font-weight:700;color:var(--muted);flex:0 0 auto}
.mw{display:flex;align-items:center;gap:1px;margin-left:auto}
.apcard{font-size:11px;font-weight:800;color:var(--accent);background:var(--accent-soft);border:1px solid #e8c9bd;border-radius:6px;padding:2px;flex:0 0 auto;
  cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}   /* 누르면 반대값 스택(반복 버튼과 같은 조작) */
.miniwheel{width:20px;height:30px;overflow-y:auto;scroll-snap-type:y mandatory;text-align:center;scrollbar-width:none;position:relative;overscroll-behavior:contain;touch-action:pan-y}
.miniwheel::-webkit-scrollbar{display:none}
.miniwheel .pad{height:30px}
.miniwheel .it{height:30px;line-height:30px;scroll-snap-align:center;font-size:14px;font-weight:800;color:var(--ink)}   /* 숫자는 한글보다 작게 보여 +1px(날짜 13px와 시각적 동일). 높이 30px은 스크롤 스냅 계산과 묶여 있어 불변 */
.miniwheel.editing{height:90px;margin:-30px 0;z-index:50;background:var(--bg);border:1.5px solid var(--accent);border-radius:9px;box-shadow:0 3px 14px rgba(43,39,34,.2)}
.miniwheel.editing .it{color:var(--faint)}
.miniwheel.editing .it.sel{color:var(--ink);font-weight:800}
.mc{font-size:12px;font-weight:800;color:var(--faint)}
/* 할일로 돌아가는 버튼 — 휠 아래 우측(앞면 ⏰ 일정과 같은 위치). 적용은 그 아래 하단 고정 */
#schedApply{margin-top:auto;position:relative;z-index:1}

/* 데스크탑: 바텀시트를 중앙 카드로 */
@media (min-width:640px) and (min-height:560px){
  .sheet{bottom:auto;top:50%;border-radius:22px;transform:translateY(-46%) scale(.96);opacity:0;
    transition:transform .22s, opacity .22s}
  .sheet-wrap.is-open .sheet{transform:translateY(-50%) scale(1);opacity:1}
  .sheet-handle{display:none}
  .sheet{padding-top:22px}
}

/* 날짜 이동 바 */
.datebar{display:flex;align-items:center;gap:7px;margin-top:11px}
.dbtn{height:30px;min-width:30px;padding:0 9px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);border-radius:9px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:.15s;line-height:1}
.dbtn[hidden]{display:none}
.dbtn:active{transform:scale(.94)}
.dbtn.cal{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft);width:34px;padding:0}
.dbtn.today{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* 스와이프 영역(좌우로 날짜 이동) */
.swipe-area{touch-action:pan-y;will-change:transform,opacity}

/* 이월/복제 태그 */
.carry-tag{display:inline-block;margin-left:7px;font-size:11.5px;font-weight:700;color:var(--faint);vertical-align:1px}
.from-tag{display:inline-block;margin-left:7px;font-size:11px;font-weight:700;color:var(--accent);
  background:var(--accent-soft);border-radius:6px;padding:1px 6px;vertical-align:1px}
/* 반복 칩 — from-tag와 같은 형태, 중립색(테마 공통 변수) */
/* 긴 제목 펼침 — 잘린 행에만 ⌄, 탭하면 첫 줄 아래 전체 폭으로 펼침(테마색 바 구분) */
.chev{flex:0 0 auto;align-self:center;display:none;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  border:0;padding:0;margin-left:2px;color:var(--muted);background:transparent;cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent;transition:background .15s}
.chev svg{width:16px;height:16px;transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.item.expanded .chev svg{transform:rotate(180deg)}   /* 펼치면 화살표 위로 부드럽게 */
.chev:active{background:var(--surface-2)}
.item.overflowing .chev,.item.expanded .chev{display:flex}
/* 꾹 누르는 동안 눌려 들어감(0.42초에 걸쳐 = 발동까지 진행 표시) — 손 떼면 즉시 원복(=탭) */
.item.pre-hold{transform:scale(.95);box-shadow:none;filter:brightness(.97);
  transition:transform .4s cubic-bezier(.4,0,.6,1) .05s,box-shadow .4s ease .05s,filter .4s ease .05s}
.item.expanded{flex-wrap:wrap}
/* 펼치면 제목 줄의 1줄 자르기를 푼다 — 펼침 영역에 제목을 되풀이하지 않기 위해(제자리에서 전체가 보임) */
.item.expanded .t-title{white-space:normal;overflow:visible;text-overflow:clip}
.item .full{flex-basis:100%;font-size:16px;font-weight:450;line-height:1.45;color:var(--ink);word-break:break-word;
  margin-top:-2px;padding-top:3px;border-top:2px solid var(--accent-soft)}
.item .full .n{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:4px;word-break:break-word}
.item.done .full,.item.carried .full{color:var(--muted)}
/* 펼침 조작 줄 — 왼쪽=쉼, 오른쪽=루틴에·집중. flex gap 금지(구형 엔진)라 margin으로 띄운다 */
.fx-acts{display:flex;align-items:center;margin-top:9px}
.fx-right{margin-left:auto;display:flex;align-items:center}
.fx-btn{border:1px solid var(--line);background:transparent;color:var(--ink);font-family:inherit;font-size:13px;font-weight:700;
  padding:0 12px;height:30px;border-radius:9px;cursor:pointer;white-space:nowrap;margin-left:7px}
.fx-acts > .fx-btn:first-child{margin-left:0}
.fx-btn:hover,.fx-btn:active{background:var(--surface-2)}

/* 반복 하루 상태 칩 — 시간 칩과 같은 규격·같은 자리(슬롯 1칩 규칙: 상태가 시간을 대체). 색은 기존 신호색 재사용 */
.st-chip{font-size:11px;font-weight:700;line-height:1.3;border-radius:7px;padding:2px 6px;white-space:nowrap;flex:0 0 auto}
.st-chip.done{color:#fff;background:#2e9e6b}
.st-chip.miss{color:#fff;background:#e23b3b}
.st-chip.rest{color:var(--muted);background:var(--surface-2)}
.st-chip.plan{color:var(--muted);background:transparent;border:1.5px solid var(--line-strong);padding:1px 5px}
.st-chip.carried{color:var(--accent);background:var(--accent-soft)}   /* 이월됨 — 사본의 "N/M부터" 태그와 같은 accent 계열 */
.st-chip.drop{color:var(--faint);background:var(--surface-2)}          /* 안 함 — 주제를 끝내며 정리한 할일(닫힌 주제 상세에서만) */
/* 원 글리프 — ✕ 놓침 / – 쉼 */
.state .gx{font-weight:900;font-size:13px;color:var(--muted);line-height:1}
.state .gx.mx{color:#e23b3b}
.state .gx.dx{color:var(--faint)}
/* '안 함' 행 — 끝낸 주제의 기록. 놓침(빨강)과 달리 담백하게 가라앉힌다 */
.item.dropped{opacity:.62;box-shadow:none;border-color:transparent;background:var(--surface-2)}
.item.dropped .state{border-style:dashed;cursor:default}
.item.dropped .t-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
/* 반복 기록·고스트 행 */
.item.miss .t-title,.item.rest .t-title{color:var(--muted)}
.item.ghost{opacity:.55}
.item.ghost .state{border-style:dashed;cursor:pointer}
/* ⋯ 메뉴 — 반복 기록 행은 연기 숨김(그 날짜의 기록이라 미룰 수 없음) */
.snz-pop.for-rec .snz-item[data-snz="date"]{display:none}
/* 이월됨 행 — 연기 자리에 「연기 취소」(이미 이월된 걸 또 미루는 건 뜻이 안 맞음). 메뉴는 3줄 유지 */
.snz-item.unc{display:none}
.snz-pop.for-carried .snz-item[data-snz="date"]{display:none}
.snz-pop.for-carried .snz-item.unc{display:flex}
/* 반복 본체 삭제 홀드 — 누르고 있는 동안 전체삭제 안내 */
.snz-pop.for-rep .snz-item.del.confirming::after{content:'반복 전체가 삭제돼요';display:block;font-size:11px;font-weight:700;color:#e23b3b;margin-left:6px;white-space:nowrap}

/* 반복 배지 — 카드 좌상단 끝 코너 태그(위젯과 동일 배치). 보라 = 신호색 녹/주황/빨강·이벤트 파랑과 안 겹침 */
.rep-chip{position:absolute;top:0;left:0;font-size:11px;font-weight:700;line-height:1;color:#fff;background:#7a63d8;
  text-shadow:0 1px 1.5px rgba(0,0,0,.6);
  border-radius:13px 0 9px 0;padding:1px 8px;white-space:nowrap}   /* 높이 13px — 더 높으면 체크 원(카드 위 14px)을 덮는다 */
.item.done .rep-chip,.item.carried .rep-chip{color:var(--faint);background:var(--surface-2)}
.item.carried{opacity:.6}
.item.carried .state{border-style:dashed;cursor:default}
.item.carried .t-title{text-decoration:line-through;text-decoration-color:var(--faint);color:var(--muted)}

/* 모달 공통 (달력 · 이월) */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:40;visibility:hidden;opacity:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,16,12,.4);backdrop-filter:blur(2px);transition:opacity .2s, visibility .2s;padding:18px}
.modal.is-open{visibility:visible;opacity:1}
.modal-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:16px;transform:scale(.96);transition:transform .2s}
.modal.is-open .modal-card{transform:scale(1)}
.modal-card.narrow{max-width:320px;padding:22px 20px}

/* 달력 — 안드로이드 기본 날짜 선택기와 같은 모양. 실기기(밀도 560, DPR 3.5)에서 잰 값이다.
   폭 288 / 머리 103.7 / 전체 503.7 / 안여백 20.2 / 칸 35.5x40 / 선택 원 40.
   숫자를 바꾸면 모양이 어긋난다. 색만 앱 테마를 따른다. */
.dp-modal{padding:0}
.dp{width:288px;max-width:calc(100vw - 32px);background:var(--surface);border-radius:4px;
  overflow:hidden;box-shadow:0 11px 32px rgba(20,16,12,.34);transform:scale(.96);transition:transform .2s}
.dp-modal.is-open .dp{transform:scale(1)}
.dp-head{background:var(--accent);color:var(--on-accent);padding:19px 24px 25px}
.dp-y{font-size:13px;font-weight:800;opacity:.72;line-height:1.2}
.dp-d{font-size:27px;font-weight:800;line-height:1.15;margin-top:6px;letter-spacing:-.5px}
.dp-body{padding:0 20.2px}
.dp-nav{display:flex;align-items:center;height:48px;margin-top:9.7px}
.dp-title{flex:1;text-align:center;font-size:14px;font-weight:700;color:var(--ink)}
.dp-nav-b{width:34px;height:34px;flex:0 0 auto;border:0;background:transparent;color:var(--ink);
  font-size:19px;line-height:1;cursor:pointer;font-family:inherit;border-radius:50%}
.dp-nav-b:active{background:var(--surface-2)}
.dp-acts{display:flex;align-items:center;height:63.4px}
.dp-sp{flex:1}
.dp-b{border:0;background:transparent;color:var(--accent);font-family:inherit;font-size:13px;
  font-weight:500;padding:9px 10px;cursor:pointer;border-radius:6px}
.dp-b[hidden]{display:none}
.dp-b:active{background:var(--accent-soft)}

/* 달 넘김 — 옆 달을 고스트로 깔고 손가락을 따라 같이 민다. 넘치는 부분은 잘라 냄.
   격자가 늘 6줄이라 달마다 높이가 같아 고스트가 어긋나지 않는다. */
.cal-view{position:relative;overflow:hidden;touch-action:pan-y}
/* 요일 줄은 밀리는 격자 밖에 둔다 — 기존 달력도 요일은 고정이고 날짜만 밀린다 */
.cal-dows{display:grid;grid-template-columns:repeat(7,35.5px);justify-content:center;margin-top:4px}
.cal-grid.gh{position:absolute;top:0;left:0;right:0}

/* 날짜 격자 — 7열 고정. gap 을 쓰지 않는다(구형 폴백 대상 회피 + 실측 간격 유지) */
.cal-grid{display:grid;grid-template-columns:repeat(7,35.5px);justify-content:center;touch-action:pan-y}
.cal-dow{height:36px;line-height:36px;text-align:center;font-size:10.5px;font-weight:400;color:var(--muted)}
.cal-dow.dk-sat{color:var(--sat)} .cal-dow.dk-sun{color:var(--hol)}
.cal-cell{position:relative;height:40px;border:0;background:transparent;color:var(--ink);
  font-family:inherit;font-size:14px;font-weight:400;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center}
.cal-cell.empty{pointer-events:none;padding:0}   /* 전역 .empty(빈 상태 padding 48px)와 이름이 겹침 */
.cal-cell.dk-sat{color:var(--sat)} .cal-cell.dk-hol{color:var(--hol)}
.cal-cell.today{font-weight:500}
.cal-cell.today::after{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;
  margin:-20px 0 0 -20px;border:1.5px solid var(--accent);border-radius:50%}
.cal-cell.sel{color:var(--on-accent);font-weight:400}
.cal-cell.sel::before{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;
  margin:-20px 0 0 -20px;background:var(--accent);border-radius:50%;z-index:0}
.cal-cell.sel::after{display:none}
.cal-cell .dn{position:relative;z-index:1}   /* 숫자만. > span 이면 점(.cal-dot)까지 걸려 absolute 가 덮임 */
/* 할일 점 — 숫자 아래. 색 규칙은 그대로(있음=포인트색, 모두 완료=초록) */
.cal-cell .cal-dot{position:absolute;left:50%;bottom:4px;width:4.5px;height:4.5px;margin-left:-2.25px;
  border-radius:50%;background:var(--accent);z-index:1}
.cal-dot.all{background:var(--C)}
.cal-cell.sel .cal-dot{background:var(--on-accent)}

/* 이월 모달 — 선택(네모) + ⋯ → 완료/삭제/연기 팝업 */
.carry-card{max-width:380px;padding:0;overflow:visible}
.carry-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--accent-soft);border-radius:19px 19px 0 0}
.carry-icon{width:38px;height:38px;flex:0 0 auto;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.16)}
.carry-head-tx{flex:1;min-width:0}
.carry-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.carry-sub{font-size:12px;color:var(--accent);margin-top:2px;opacity:.9}
.carry-count{flex:0 0 auto;background:var(--accent);color:#fff;font-size:12.5px;font-weight:800;min-width:25px;height:25px;border-radius:999px;display:grid;place-items:center;padding:0 7px}
.carry-list{max-height:300px;overflow-y:auto;padding:2px 13px}
.carry-row{position:relative;padding:11px 3px}
.carry-row + .carry-row{border-top:1px solid var(--line)}
.row-main{display:flex;align-items:center;gap:9px}
.carry-check{width:22px;height:22px;flex:0 0 auto;border-radius:6px;background:var(--accent);border:2px solid var(--accent);display:grid;place-items:center;cursor:pointer;padding:0;transition:.15s}
.carry-check svg{width:14px;height:14px;color:#fff}
.carry-check.off{background:transparent;border-color:var(--line-strong)}
.carry-check.off svg{opacity:0}
.carry-name{flex:1;min-width:0;font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carry-date{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--faint)}
.row-more{width:30px;height:30px;flex:0 0 auto;border:0;background:transparent;color:var(--faint);border-radius:9px;display:grid;place-items:center;cursor:pointer}
.row-more svg{width:20px;height:20px}
.carry-row.open .row-more{color:var(--accent);background:var(--surface-2)}
.carry-pop{position:fixed;z-index:60;width:max-content;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 12px 32px rgba(0,0,0,.24);padding:5px;display:none;flex-direction:column;gap:1px}
.carry-row.open .carry-pop{display:flex}
.pop-item{display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--ink);font-size:13.5px;font-weight:600;font-family:inherit;padding:9px 11px;border-radius:9px;cursor:pointer;white-space:nowrap}
.pop-item:active,.pop-item:hover{background:var(--surface-2)}
.pop-item svg{width:15px;height:15px;color:var(--muted);flex:0 0 auto}
.pop-item.pdel{color:var(--A)} .pop-item.pdel svg{color:var(--A)}
.carry-actions{display:flex;gap:9px;padding:13px 16px 16px;border-top:1px solid var(--line)}
.carry-btn{border:0;padding:13px;border-radius:13px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.carry-btn:active{transform:scale(.97)}
.carry-btn.ghost{flex:0 0 auto;padding:13px 20px;background:var(--surface-2);color:var(--ink)}
.carry-btn.primary{flex:1;background:var(--accent);color:#fff}
.carry-btn.primary:disabled{opacity:.4;cursor:default}

/* ══ 탭바 앱 구조(메인·오늘·주제) + 메모·주제 화면 — memo-spec v0.5 §2-0 ══ */
/* 뷰 표시 제어 — body[data-view]가 라우터. today=기존 main.app, 나머지는 .view 섹션 */
body[data-view]:not([data-view="today"]) main.app{display:none}
body[data-view]:not([data-view="today"]) .fab-stack{display:none}
.view{display:none;max-width:600px;margin:0 auto;min-height:100%;padding:0 18px calc(86px + env(safe-area-inset-bottom,0px))}
body[data-view="main"] #view-main{display:block}
body[data-view="topic"] #view-topics{display:block}
body[data-view="topicview"] #view-topic{display:block}
body[data-view="closed"] #view-closed{display:block}
body[data-view="inboxdone"] #view-inboxdone{display:block}
body[data-view="memo"] #view-memo{display:block}
body[data-view="map"] #view-map{display:block}
body[data-view="editor"] #view-editor{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-bottom:12px}   /* vh 선행 = dvh(108+) 없는 구형 폴백 */
body[data-view="editor"] .tabbar{display:none}   /* 작성 중엔 몰입 — 탭바 숨김 */

/* 하단 탭바 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;justify-content:center;gap:4px;
  background:var(--surface);border-top:1.5px solid var(--line);box-shadow:var(--shadow-lg);
  padding:7px 14px calc(9px + env(safe-area-inset-bottom,0px))}
.tab{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;
  font-size:10.5px;font-weight:700;color:var(--faint);padding:4px 0;border-radius:12px;cursor:pointer;font-family:inherit}
.tab svg{width:21px;height:21px}
.tab.on{color:var(--accent)}
body[data-view="today"] main.app{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}   /* FAB+탭바 겹침 방지 */
.fab-stack{bottom:calc(76px + env(safe-area-inset-bottom,0px))}   /* FAB를 탭바 위로 */

/* 공용 뷰 헤더 */
.vhead{display:flex;align-items:center;gap:9px;padding:26px 2px 14px}   /* 헤더 공통 규격 */
.vhead .vtitle{font-size:23px;font-weight:800}   /* 제목 규격 = .mdate와 동일 */
.vback{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--muted);font-size:19px;line-height:1;cursor:pointer;font-family:inherit}
.vbtn{border:1.5px solid var(--line-strong);background:var(--surface);color:var(--accent);font-size:12.5px;font-weight:700;border-radius:10px;padding:8px 12px;cursor:pointer;font-family:inherit;margin-left:auto}
.vicon{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;font-family:inherit}
.vchip{border:0;background:#dcefed;color:#20756e;font-size:11.5px;font-weight:800;border-radius:99px;padding:5px 11px;cursor:pointer;font-family:inherit}
.vdone{border:0;background:var(--accent);color:#fff;font-size:13.5px;font-weight:700;border-radius:11px;padding:9px 16px;cursor:pointer;font-family:inherit}
.spacer{flex:1}
.sec-label{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.3px;margin:16px 2px 8px;display:flex;align-items:center}
.sec-label .more{margin-left:auto;font-weight:600;color:var(--faint);font-size:11.5px;cursor:pointer}

/* 메인 대시보드 */
.mhead{padding:26px 2px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.webchip{flex:0 0 auto;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--accent);border-radius:10px;padding:8px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center}
.webchip svg{width:16px;height:16px}
.webchip:active{transform:scale(.93)}
.mhead .brand{color:var(--accent);font-size:12.5px;font-weight:800;letter-spacing:.3px;margin-bottom:5px}   /* 윗줄 규격 = .eyebrow와 동일 */
.mhead .mdate{font-size:23px;font-weight:800}
.mhead .mgreet{font-size:12.5px;color:var(--muted);margin-top:4px}
.mcard{background:var(--surface);border-radius:16px;padding:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:13px;cursor:pointer}
.mring{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mring b{width:43px;height:43px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:12.5px}
.mcard .l1{font-size:15px;font-weight:800}
.mcard .l2{font-size:12.5px;color:var(--muted);margin-top:2px}
.mcard .nxt{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;color:var(--accent);font-weight:700}
.mcard .go{margin-left:auto;color:var(--faint);font-size:18px}
.tbdg{background:var(--C);color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:2px 8px}
.tp-card{background:var(--surface);border-radius:14px;padding:12px 13px;margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer}
.tp-card .r1{display:flex;align-items:center;gap:8px}
.tchip{background:#2e8f87;color:#fff;font-size:11px;font-weight:800;border-radius:99px;padding:3px 10px;
  text-shadow:0 1px 1.5px rgba(0,0,0,.55)}   /* 배경 = 주제 색(renderMain이 인라인 지정) — 밝은 색에서도 흰 글자가 읽히게 */
/* .tchip.soft 폐기 — 주제 칩은 전부 주제 색 채움(2026-08-06). 규칙이 갈리면 같은 주제가 화면마다 달라 보인다 */
.tp-card .cnt{font-size:11px;color:var(--faint);margin-left:auto}
.tp-card .next{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:13px}
.tp-card .next .c{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-strong);flex:0 0 auto}
.tp-card .next .d{font-size:11px;color:var(--faint);margin-left:auto}
.tp-card .next.quiet{color:var(--muted);font-size:12px}
.memo-row{background:var(--surface);border-radius:13px;padding:11px 13px;margin-bottom:7px;box-shadow:var(--shadow);cursor:pointer}
.memo-row .t{font-size:13.5px;font-weight:700}
.memo-row .p{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memo-row .meta{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:10.5px;color:var(--faint)}
.mt-empty{color:var(--faint);font-size:12.5px;padding:10px 4px}

/* 주제 선반 */
.vsearch input{width:100%;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);padding:10px 13px;font-size:14px;font-family:inherit;color:var(--ink);outline:none;margin-bottom:12px}
/* 주제 선반 = 2열 타일. 주제는 목록 '항목'이 아니라 담는 그릇이라 한 줄짜리 행이면 할일처럼 보인다(2026-08-07) */
#topicShelf{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
#topicShelf > .tv-sum,#topicShelf > button,#topicShelf > .topic-new,#topicShelf > .mt-empty,#topicShelf > .memo-row{grid-column:1/-1}
.shelf-row{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);cursor:pointer;overflow:hidden;display:block}
.sh-bar{display:block;height:5px}                       /* 상단 색 띠 = 주제 식별 */
.sh-body{padding:11px 13px 12px}
.sh-nm{font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.32;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.64em}   /* 두 줄까지, 넘치면 말줄임 — 타일 높이 균일 */
.sh-act{margin-top:7px;font-size:11.5px;color:var(--faint)}
.sh-pb{margin-top:9px;height:4px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.sh-pb i{display:block;height:100%;border-radius:99px;transition:width .3s}
.sh-next{margin-top:9px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-mt{display:none}                                     /* 목록 모드에서만 보이는 우측 진행 수치 */
/* 정렬 칩 — 요약 카드 오른쪽 끝(탭하면 다음 정렬). 별도 줄을 잡으면 왼쪽이 빈 칸으로 남는다 */
.tv-sum .shelf-sort{margin-left:auto;flex:0 0 auto;align-self:flex-end;border:0;background:transparent;color:var(--faint);
  font-family:inherit;font-size:11.5px;font-weight:700;padding:2px 0 0;white-space:nowrap;cursor:pointer}
/* 미분류 = 주제가 아니라 보관함 — 점선으로 낮추고 전체 폭 */
.shelf-row.unfiled{grid-column:1/-1;display:flex;align-items:center;gap:9px;background:transparent;box-shadow:none;
  border:1.5px dashed var(--line-strong);padding:11px 14px;opacity:.75}
.shelf-row.unfiled .nm{font-size:14px;font-weight:700;color:var(--muted)}
.shelf-row.unfiled .cnt{margin-left:auto;font-size:11px;color:var(--faint)}
/* 목록 모드 — 주제를 한 줄로 압축(헤더 아이콘 토글, localStorage 유지). 마크업은 카드와 동일하고 CSS만 갈아탄다.
   미분류 행은 모드와 무관하게 위 규칙 그대로(:not(.unfiled)) — 보관함은 항상 같은 자리·같은 모양 */
#topicShelf.listmode{grid-template-columns:1fr}
#topicShelf.listmode .shelf-row:not(.unfiled){display:flex;align-items:center}
#topicShelf.listmode .sh-bar{align-self:stretch;height:auto;width:5px;flex:0 0 5px}
#topicShelf.listmode .sh-body{flex:1;min-width:0;padding:10px 12px}
/* 목록 행 = 2줄(이름 / 다음 할일 · 마지막 활동) + 오른쪽 진행 링. 가로 진행바는 링과 중복이라 뺀다 */
#topicShelf.listmode .sh-body{display:flex;flex-wrap:wrap;align-items:baseline}
#topicShelf.listmode .sh-nm{flex:0 0 100%;font-size:14px;-webkit-line-clamp:1;min-height:0}
#topicShelf.listmode .sh-pb{display:none}
/* flex-basis 0 — auto면 다음 할일이 길 때 '마지막 활동'이 셋째 줄로 밀린다(줄이 아니라 글자를 줄여야 한다).
   min-width가 없으면 폭 0으로 이름 줄 끝(남은 공간 0)에 그대로 얹혀 글자가 사라진다 */
#topicShelf.listmode .sh-next{order:1;flex:1 1 0%;min-width:5em;margin-top:3px;font-size:11.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topicShelf.listmode .sh-act{order:2;flex:0 0 auto;margin:3px 0 0 5px;font-size:11.5px}
#topicShelf.listmode .sh-act::before{content:'· '}
#topicShelf.listmode .sh-mt{display:flex;align-items:center;flex:0 0 auto;padding-right:12px;font-size:11.5px;font-weight:700;color:var(--faint)}
/* 미분류 인박스 — 줄마다 「＋주제」 칩(할일 행·메모 행·보관함 공용), 하단 「완료한 것 N개」 진입 줄 */
.tv-file{flex:0 0 auto;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--muted);
  font-family:inherit;font-size:11px;font-weight:700;border-radius:9px;padding:4px 8px;cursor:pointer;white-space:nowrap}
.tv-file:active{border-color:var(--accent);color:var(--accent)}
.inbox-done{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--surface);border:0;border-radius:16px;
  margin-top:14px;padding:13px 15px;box-shadow:var(--shadow);font-family:inherit;cursor:pointer}
.inbox-done .ring{width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--nc-green)}                              /* 다 끝난 것들이라 링은 꽉 참 — 숫자는 총 개수 */
.inbox-done .ring b{width:33px;height:33px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;color:var(--ink)}
.inbox-done .tx{flex:1;min-width:0}
.inbox-done .t1{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.inbox-done .t2{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-done .ch{color:var(--faint);font-size:15px;flex:0 0 auto}
/* 완료 보관함 — 맨 위 성과 요약 / 월 머리(개수 + 접힘) / 완료 체크 행. 회색 막대(주제색 자리)는 여기선 뜻이 없어 체크로 바꿨다 */
.idsum{display:flex;align-items:center;gap:13px;background:var(--surface);border-radius:16px;padding:13px 15px;box-shadow:var(--shadow);margin-bottom:6px}
.idsum .ring{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--nc-green)}
.idsum .ring b{width:39px;height:39px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--ink)}
.idsum .tx{flex:1;min-width:0}
.idsum .l1{display:block;font-size:14.5px;font-weight:800}
.idsum .l2{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 한 달 = 상자 하나 — 머리(탭 영역 48px)와 그 달 할일이 한 테두리 안에 들어간다(사용자 지시 2026-08-12).
   --line-strong만으론 종이 테마의 흰 카드에서 테두리가 안 보여 --ink를 20% 섞는다 */
.idgrp{background:var(--surface);border:1.5px solid var(--line-strong);border-color:color-mix(in srgb,var(--ink) 20%,var(--line-strong));
  border-radius:16px;margin:14px 0;overflow:hidden;box-shadow:var(--shadow)}   /* border 선언과 분리 — color-mix(111+) 없는 구형은 --line-strong으로 폴백(합치면 테두리 통째 소실) */
.idgrp.on{border-color:color-mix(in srgb,var(--nc-green) 45%,var(--line-strong))}
.idmon{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-radius:0;
  padding:13px 15px;cursor:pointer;font-family:inherit}
.idmon .mn{font-size:14px;font-weight:800;color:var(--ink)}
.idmon .n{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--muted);background:var(--surface-2);border-radius:99px;padding:3px 10px}
.idmon .ch{width:14px;text-align:center;font-size:11px;color:var(--faint)}
.idgrp.on .idmon{background:color-mix(in srgb,var(--nc-green) 11%,var(--surface))}
.idgrp.on .mn,.idgrp.on .ch{color:var(--nc-green)}
.idgrp.on .n{background:var(--surface);color:var(--nc-green)}
/* 상자 안 행 = 오늘 목록과 같은 공용 행. 상자 안에 또 카드를 두면 이중 카드라 카드 옷만 벗긴다 */
.idgrp .idrows{margin:0;gap:0}
.idgrp .idrows > *{margin-bottom:0}   /* 구형 엔진 — .list gap 폴백(margin-bottom)이 상자 안 행을 벌리지 않게 */
.idgrp .idrows .item{background:transparent;box-shadow:none;border-radius:0;border-top:1px solid var(--line)}
.iddt{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--faint)}
.mring.rsm{width:38px;height:38px}
.mring.rsm b{width:29px;height:29px;font-size:10.5px;font-weight:800}
#topicViewBtn .ic-card{display:none}
#topicMapBtn{margin-left:-5px}   /* 아이콘 둘은 한 묶음 — 헤더 gap 9px 그대로면 ＋주제와 똑같이 떨어져 따로 놀아 보인다 */
#topicViewBtn.listmode .ic-list{display:none}
#topicViewBtn.listmode .ic-card{display:block}
.topic-new{display:flex;gap:7px;margin-bottom:10px}
.topic-new input{flex:1;border:1.5px solid var(--accent);border-radius:11px;background:var(--surface);padding:9px 12px;font-size:14px;font-family:inherit;color:var(--ink);outline:none}
.topic-new button{border:0;background:var(--accent);color:#fff;border-radius:11px;padding:0 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}

/* 주제 뷰 목록 */
.tv-item{display:flex;align-items:center;gap:9px;background:var(--surface);border-radius:13px;padding:12px 13px;margin-bottom:7px;box-shadow:var(--shadow);cursor:pointer;font-size:14px}
.tv-item .c{width:19px;height:19px;border-radius:50%;border:2px solid var(--line-strong);flex:0 0 auto}
.tv-item .c.done{background:var(--accent);border-color:var(--accent);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.tv-item.done .tx{color:var(--muted);text-decoration:line-through}
.tv-item .tag{margin-left:auto;font-size:10px;font-weight:800;border-radius:6px;padding:2px 6px;flex:0 0 auto}
.tv-item .tag.task{background:var(--accent-soft);color:var(--accent)}
.tv-item .tag.memo{background:var(--surface-2);color:var(--muted)}

/* 메모 상세·편집기(줄노트) */
.ruledbg,textarea.ruled{background-image:repeating-linear-gradient(to bottom, transparent 0 30px, var(--line) 30px 31px)}
.memo-body{background-color:var(--surface);border-radius:14px;padding:4px 14px;box-shadow:var(--shadow);min-height:130px;background-attachment:local;background-origin:content-box;display:flex;flex-direction:column}
.memo-body .mline{line-height:31px;min-height:31px;font-size:14.5px;white-space:pre-wrap;word-break:break-word;position:relative}
.memo-body .mline:first-child{font-weight:800;font-size:15.5px}
.memo-body .mline .l2t{position:absolute;right:0;top:4px;font-size:9px;font-weight:800;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:2px 6px}
.memo-body .mline.pre-hold{background:var(--accent-soft);border-radius:6px}
textarea.ruled{flex:1;width:100%;border:1.5px solid var(--line-strong);border-radius:14px;background-color:var(--surface);padding:4px 14px;
  font-family:inherit;font-size:15px;line-height:31px;color:var(--ink);outline:none;resize:none;background-attachment:local;background-origin:content-box}
#view-editor.listening textarea.ruled{border-color:var(--accent)}

/* 메모 상세 — marked 블록 렌더 */
.memo-body .mblock{position:relative;font-size:14.5px;line-height:32px;padding:0 34px 0 0;word-break:break-word;min-width:0}   /* 32px 행 그리드 — 가로줄과 정렬. min-width:0 = flex 자식이라 표(overflow-x)가 카드 밖으로 안 삐져나가게 */
.memo-body .mblock:first-child{font-weight:800;font-size:15.5px}
.memo-body .mblock .l2t{position:absolute;right:0;top:4px;font-size:9px;font-weight:800;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:2px 6px}
.memo-body .l2t.done{background:color-mix(in srgb,var(--nc-green) 14%,var(--surface));color:var(--nc-green)}   /* 완료가 메모로 되돌아옴(양방향) */
.memo-body .mblock.lk-done{color:var(--faint);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--nc-green) 45%,transparent)}
.msel-bar{position:fixed;z-index:60;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,.14);padding:5px 6px}   /* 여러 줄 선택 → 일괄 변환 바 */
.msel-bar .b{font-family:inherit;font-size:12px;font-weight:700;color:var(--accent);border:0;border-radius:7px;padding:6px 10px;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));cursor:pointer}
.msel-bar .b:hover{background:color-mix(in srgb,var(--accent) 15%,var(--surface))}
.msel-bar .q{font-size:11px;color:var(--faint);padding-right:6px}
.memo-body .mblock.pre-hold{background:var(--accent-soft);border-radius:6px}
.memo-body .mblock h1,.memo-body .mblock h2,.memo-body .mblock h3{font-size:16px;font-weight:800;line-height:32px;margin:0}
.memo-body .mblock p{margin:0;line-height:32px}
.memo-body .mblock ul,.memo-body .mblock ol{margin:0;padding-left:20px}
.memo-body .mblock li{margin:0;line-height:32px}
.memo-body .mblock blockquote{border-left:3px solid var(--line-strong);margin:0;padding-left:10px;color:var(--muted)}
.memo-body .mblock code{background:var(--surface-2);border-radius:4px;padding:1px 4px;font-size:13px}
.memo-body .mblock pre{background:var(--surface-2);border-radius:8px;padding:8px 10px;overflow-x:auto}
.memo-body .mblock pre code{background:none;padding:0}
.memo-body .mblock a{color:var(--accent)}
.memo-body .mblock img{max-width:100%;border-radius:8px}
/* 표 — 코드블록과 동일 취급(그리드 정렬 무시). 넓으면 블록이 가로 스크롤 */
.memo-body .mblock:has(table){overflow-x:auto}   /* lint-ok:has — 메모 표시 개선용, 구형(105↓)에선 저하 허용 */
.memo-body .mblock table{border-collapse:collapse;font-size:13.5px;margin:2px 0}
.memo-body .mblock th,.memo-body .mblock td{border:1px solid var(--line-strong);padding:4px 9px;text-align:left;white-space:nowrap}
.memo-body .mblock th{background:var(--surface-2);font-weight:700}

/* Crepe 편집기 — 앱 테마 배경에 녹이기(최소 오버라이드) */
#edCrepe{flex:1;min-height:0;overflow:auto;scrollbar-width:none;padding:6px 0 0 84px;margin-left:-84px}   /* 스크롤바 숨김(마운트 깜빡임 제거). padding-left+음수 margin = 블록 핸들(⊕⋮⋮, milkdown 왼쪽 -80px 돌출) 거터 — 없으면 overflow 클리핑으로 핸들이 안 보이고 클릭 불가 */
#edCrepe::-webkit-scrollbar{display:none}
#edCrepe .ed-root{height:100%}
/* Crepe 색·폰트 변수를 앱 테마 변수에 매핑 — var() 간접참조라 html[data-theme] 전환 시 편집기·툴바·슬래시메뉴가 자동 반영(다크 전용 시트 폐기) */
#edCrepe .milkdown{
  --crepe-color-background:transparent;                                   /* 편집 표면 = 앱 배경에 융합 */
  --crepe-color-on-background:var(--ink);
  --crepe-color-surface:var(--surface);                                   /* 슬래시메뉴·팝오버 = 카드 */
  --crepe-color-surface-low:var(--surface-2);
  --crepe-color-on-surface:var(--ink);
  --crepe-color-on-surface-variant:var(--muted);
  --crepe-color-outline:var(--line-strong);
  --crepe-color-primary:var(--accent);
  --crepe-color-secondary:var(--accent-soft);
  --crepe-color-on-secondary:var(--accent);
  --crepe-color-inverse:var(--ink);
  --crepe-color-on-inverse:var(--bg);
  --crepe-color-inline-code:var(--accent);
  --crepe-color-error:var(--A);
  --crepe-color-hover:color-mix(in srgb, var(--ink) 6%, transparent);
  --crepe-color-selected:color-mix(in srgb, var(--accent) 18%, transparent);
  --crepe-color-inline-area:var(--surface-2);
  --crepe-font-default:'Inter',-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  --crepe-font-title:var(--crepe-font-default);
  --crepe-font-code:var(--crepe-font-default);
  --crepe-shadow-1:var(--shadow);
  --crepe-shadow-2:var(--shadow-lg);
  background:transparent;color:var(--ink);height:100%}
#edCrepe .milkdown .ProseMirror{padding:0 2px;min-height:100%;outline:none;font-size:15px;line-height:32px}
/* 문서 끝 아래 빈 영역 — ::after가 마지막 블록 바로 뒤에서 시작해 클릭 여백(과 ruled 줄)을 제공. padding-bottom 방식은 줄 시작점을 못 잡아 폐기 */
#edCrepe .milkdown .ProseMirror::after{content:'';display:block;height:60vh;pointer-events:none}
#edCrepe .milkdown .ProseMirror:focus{outline:none}
/* 가상 캐럿 색 — Crepe 기본은 var(--crepe-color-outline)(=line-strong)라 어느 테마서든 흐려 안 보임 → 글자색으로. 3변형(main/left/right border) 모두 이 변수를 씀 */
#edCrepe .milkdown .ProseMirror-focused{--prosemirror-virtual-cursor-color:var(--ink)}
/* 32px 행 그리드 — 텍스트와 가로줄이 어긋나지 않게 모든 블록을 32px 배수로(줄바꿈된 줄도 각 32px). 헤딩은 폰트만 키우고 한 행 유지 */
#edCrepe .milkdown .ProseMirror p,
#edCrepe .milkdown .ProseMirror li,
#edCrepe .milkdown .ProseMirror blockquote,
#edCrepe .milkdown .ProseMirror h1,#edCrepe .milkdown .ProseMirror h2,#edCrepe .milkdown .ProseMirror h3,
#edCrepe .milkdown .ProseMirror h4,#edCrepe .milkdown .ProseMirror h5,#edCrepe .milkdown .ProseMirror h6{
  line-height:32px;margin:0;padding:0}
#edCrepe .milkdown .ProseMirror h1{font-size:26px;font-weight:800}
#edCrepe .milkdown .ProseMirror h2{font-size:22px;font-weight:800}
#edCrepe .milkdown .ProseMirror h3{font-size:19px;font-weight:800}
#edCrepe .milkdown .ProseMirror h4,#edCrepe .milkdown .ProseMirror h5,#edCrepe .milkdown .ProseMirror h6{font-size:16px;font-weight:800}
#edCrepe .milkdown img{max-width:100%;height:auto}   /* data URI 이미지가 편집기 폭을 넘지 않게 */
/* 플레이스홀더는 빈 문서에서만 — 커서 따라 빈 블록마다 뜨지 않게(이 번들엔 mode:'doc' 옵션 없음).
   빈 문서 = ProseMirror-widget(항상 첫 자식) + 빈 문단 1개 → 플레이스홀더가 '두 번째이자 마지막' 또는 유일 자식일 때만 노출 */
#edCrepe .milkdown .ProseMirror > .crepe-placeholder:not(:only-child):not(:nth-child(2):last-child)::before{content:none}

/* 줄노트 가로선(body.ruled) — 줄은 블록마다 자기 배경으로 그림. 전체 한 장 그라디언트는 이미지·표·코드처럼
   높이가 32px 배수가 아닌 블록이 끼면 그 아래 전부가 어긋나서 폐기. 블록 단위면 어떤 높이의 블록이 섞여도
   각 텍스트 블록은 자기 기준으로 정렬되고, 비정형 블록(이미지·표·코드)에는 줄을 긋지 않는다. */
body.ruled #edCrepe .milkdown .ProseMirror > p:not(.callout),
body.ruled #edCrepe .milkdown .ProseMirror > blockquote,
body.ruled #edCrepe .milkdown .ProseMirror > h1,body.ruled #edCrepe .milkdown .ProseMirror > h2,
body.ruled #edCrepe .milkdown .ProseMirror > h3,body.ruled #edCrepe .milkdown .ProseMirror > h4,
body.ruled #edCrepe .milkdown .ProseMirror > h5,body.ruled #edCrepe .milkdown .ProseMirror > h6,
body.ruled #edCrepe .milkdown .ProseMirror li{
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px)}
/* 빈 영역 줄 — ::after가 콘텐츠 끝에서 시작하므로 마지막 블록과 리듬이 구조적으로 이어짐 */
body.ruled #edCrepe .milkdown .ProseMirror::after{
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px)}
/* 메모 상세: 동일 원칙 — 텍스트 블록에만 줄, 표·이미지·코드 블록 제외, 빈 꼬리는 ::after */
/* lint-ok:has */ body.ruled .memo-body .mblock:not(:has(table)):not(:has(img)):not(:has(pre)):not(.callout){
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px)}
.memo-body::after{content:'';display:block;height:96px}
body.ruled .memo-body::after{background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px)}
.vicon.on{color:var(--accent);border-color:var(--accent)}
#edEmoji{font-size:15px;line-height:1}

/* 이미지 정렬(blockMeta.align) — 편집기: 래퍼 margin(기본 중앙 auto), 상세: text-align */
#edCrepe .milkdown-image-block.align-left>.image-wrapper{margin:0 auto 0 0}
#edCrepe .milkdown-image-block.align-right>.image-wrapper{margin:0 0 0 auto}
.memo-body .mblock:has(img){text-align:center}   /* lint-ok:has */
.memo-body .mblock.align-left{text-align:left}
.memo-body .mblock.align-right{text-align:right}
.memo-body .mblock img{max-width:100%;border-radius:8px}
.memo-body .mblock .imgcap{font-size:12px;color:var(--muted);line-height:32px}

/* 이미지 블록 — 노션식: 하단 크기바·말풍선 숨기고, 좌우 가장자리 세로 필 핸들(호버 시)로 가로폭 조절(tabs.js 포인터 드래그, blockMeta.w 저장) */
#edCrepe .milkdown-image-block .image-resize-handle{display:none}
#edCrepe .milkdown-image-block .image-wrapper .operation{display:none}   /* 캡션 토글은 블록 메뉴로 이동(요소는 남겨 JS로 클릭) */
#edCrepe .milkdown-image-block .image-wrapper{width:var(--imgw, fit-content)}
#edCrepe .milkdown-image-block .image-wrapper img{width:100%;height:auto !important;object-fit:contain;min-height:0}
#edCrepe .milkdown-image-block .image-wrapper::before,
#edCrepe .milkdown-image-block .image-wrapper::after{content:'';position:absolute;top:50%;transform:translateY(-50%);
  width:6px;height:48px;max-height:45%;border-radius:3px;background:rgba(20,20,20,.55);border:1px solid rgba(255,255,255,.85);
  opacity:0;transition:opacity .15s;pointer-events:none;z-index:2}
#edCrepe .milkdown-image-block .image-wrapper::before{left:7px}
#edCrepe .milkdown-image-block .image-wrapper::after{right:7px}
#edCrepe .milkdown-image-block .image-wrapper:hover::before,
#edCrepe .milkdown-image-block .image-wrapper:hover::after{opacity:1}
.memo-body .mblock img{width:var(--imgw, auto)}

/* 블록 색 — 구성(글자 9색·배경 9색)은 노션과 동일하되, 값은 테마 변수와 혼합해 파생:
   글자색 = 색상 76% + 테마 잉크 24%, 배경색 = 색상 15% + 테마 배경 85% → 5개 테마 모두 자동으로 톤이 맞음(다크 오버라이드 불필요) */
:root{
  --nc-gray:color-mix(in srgb,#8a8a8a 76%,var(--ink) 24%);
  --nc-brown:color-mix(in srgb,#9a6b4f 76%,var(--ink) 24%);
  --nc-orange:color-mix(in srgb,#dd7622 76%,var(--ink) 24%);
  --nc-yellow:color-mix(in srgb,#c9992d 76%,var(--ink) 24%);
  --nc-green:color-mix(in srgb,#3f8f5e 76%,var(--ink) 24%);
  --nc-blue:color-mix(in srgb,#3a83b8 76%,var(--ink) 24%);
  --nc-purple:color-mix(in srgb,#8f63c0 76%,var(--ink) 24%);
  --nc-pink:color-mix(in srgb,#c65490 76%,var(--ink) 24%);
  --nc-red:color-mix(in srgb,#d4544c 76%,var(--ink) 24%);
  --nb-gray:color-mix(in srgb,#8a8a8a 15%,var(--bg) 85%);
  --nb-brown:color-mix(in srgb,#9a6b4f 15%,var(--bg) 85%);
  --nb-orange:color-mix(in srgb,#dd7622 15%,var(--bg) 85%);
  --nb-yellow:color-mix(in srgb,#c9992d 15%,var(--bg) 85%);
  --nb-green:color-mix(in srgb,#3f8f5e 15%,var(--bg) 85%);
  --nb-blue:color-mix(in srgb,#3a83b8 15%,var(--bg) 85%);
  --nb-purple:color-mix(in srgb,#8f63c0 15%,var(--bg) 85%);
  --nb-pink:color-mix(in srgb,#c65490 15%,var(--bg) 85%);
  --nb-red:color-mix(in srgb,#d4544c 15%,var(--bg) 85%)}
#edCrepe .milkdown .ProseMirror > .c-gray,.memo-body .mblock.c-gray{color:var(--nc-gray)}
#edCrepe .milkdown .ProseMirror > .c-brown,.memo-body .mblock.c-brown{color:var(--nc-brown)}
#edCrepe .milkdown .ProseMirror > .c-orange,.memo-body .mblock.c-orange{color:var(--nc-orange)}
#edCrepe .milkdown .ProseMirror > .c-yellow,.memo-body .mblock.c-yellow{color:var(--nc-yellow)}
#edCrepe .milkdown .ProseMirror > .c-green,.memo-body .mblock.c-green{color:var(--nc-green)}
#edCrepe .milkdown .ProseMirror > .c-blue,.memo-body .mblock.c-blue{color:var(--nc-blue)}
#edCrepe .milkdown .ProseMirror > .c-purple,.memo-body .mblock.c-purple{color:var(--nc-purple)}
#edCrepe .milkdown .ProseMirror > .c-pink,.memo-body .mblock.c-pink{color:var(--nc-pink)}
#edCrepe .milkdown .ProseMirror > .c-red,.memo-body .mblock.c-red{color:var(--nc-red)}
#edCrepe .milkdown .ProseMirror > .bg-gray,.memo-body .mblock.bg-gray{background-color:var(--nb-gray)}
#edCrepe .milkdown .ProseMirror > .bg-brown,.memo-body .mblock.bg-brown{background-color:var(--nb-brown)}
#edCrepe .milkdown .ProseMirror > .bg-orange,.memo-body .mblock.bg-orange{background-color:var(--nb-orange)}
#edCrepe .milkdown .ProseMirror > .bg-yellow,.memo-body .mblock.bg-yellow{background-color:var(--nb-yellow)}
#edCrepe .milkdown .ProseMirror > .bg-green,.memo-body .mblock.bg-green{background-color:var(--nb-green)}
#edCrepe .milkdown .ProseMirror > .bg-blue,.memo-body .mblock.bg-blue{background-color:var(--nb-blue)}
#edCrepe .milkdown .ProseMirror > .bg-purple,.memo-body .mblock.bg-purple{background-color:var(--nb-purple)}
#edCrepe .milkdown .ProseMirror > .bg-pink,.memo-body .mblock.bg-pink{background-color:var(--nb-pink)}
#edCrepe .milkdown .ProseMirror > .bg-red,.memo-body .mblock.bg-red{background-color:var(--nb-red)}

/* 콜아웃·토글(문단+blockMeta 플래그) — 편집기·상세 공통 */
#edCrepe .milkdown .ProseMirror > .callout,.memo-body .mblock.callout{
  border-radius:8px;padding:10px 12px 10px 40px;position:relative;line-height:28px;min-height:28px;margin:4px 0}
#edCrepe .milkdown .ProseMirror > .callout::before,.memo-body .mblock.callout::before{
  content:attr(data-co);position:absolute;left:12px;top:10px;font-size:16px;line-height:28px}
#edCrepe .milkdown .ProseMirror > .tg,.memo-body .mblock.tg{padding-left:22px;position:relative}
#edCrepe .milkdown .ProseMirror > .tg::before,.memo-body .mblock.tg::before{
  content:'▾';position:absolute;left:2px;color:var(--muted);font-size:13px;cursor:pointer}
.memo-body .mblock.tg{cursor:pointer}
.memo-body .mblock.tg.closed::before,#edCrepe .milkdown .ProseMirror > .tg.closed::before{content:'▸'}
#edCrepe .milkdown .ProseMirror > .fold-hidden{display:none}   /* 편집기 토글 접힘 */

/* 이미지 호버 ⋯ 버튼(노션식) */
.img-dots{position:fixed;z-index:45;display:none;width:28px;height:24px;border-radius:7px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--muted);font-size:14px;font-weight:800;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.img-dots:hover{background:var(--surface-2)}

/* 블록 메뉴(노션 동일 — ⋮⋮ 클릭: 전환▸/색▸ 플라이아웃 + 캡션/복제/삭제) */
.blk-menu{position:fixed;z-index:47;display:none;min-width:186px;max-height:70vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:11px;padding:5px;box-shadow:var(--shadow-lg);
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}   /* 노션식 가는 스크롤바 */
.blk-menu::-webkit-scrollbar{width:6px}
.blk-menu::-webkit-scrollbar-track{background:transparent}
.blk-menu::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.blk-menu::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.blk-menu.show{display:block}
.blk-sub{min-width:196px}
/* 모바일 하단 시트 모드(터치 롱프레스) — 노션 모바일 액션 시트 */
.blk-menu.bm-sheet{left:0 !important;right:0;top:auto !important;bottom:0;width:100%;min-width:0;max-height:62vh;
  border-radius:16px 16px 0 0;border-bottom:0;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));z-index:48;box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.blk-menu.bm-sheet .bm-row{padding:12px 8px;font-size:14.5px}
.blk-sub.bm-sheet{z-index:49}
.bm-title{font-size:10.5px;font-weight:800;color:var(--faint);margin:6px 8px 3px}
.bm-hr{height:1px;background:var(--line);margin:5px 4px}
.bm-row{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:var(--ink);
  font-size:13px;font-weight:500;padding:6px 8px;border-radius:7px;cursor:pointer;font-family:inherit;text-align:left}
.bm-row:hover{background:var(--surface-2)}
.bm-row.danger{color:var(--nc-red)}
.bm-ic{flex:0 0 24px;display:flex;justify-content:center;font-size:13px;color:var(--muted)}
.bm-row.danger .bm-ic{color:var(--nc-red)}
.bm-lb{flex:1;min-width:0;white-space:nowrap}
.bm-rt{flex:0 0 auto;color:var(--faint);font-size:11px}
.bm-A{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:6px;
  border:1px solid var(--line-strong);font-weight:700;font-size:13px;color:var(--ink)}   /* 노션식 박스 A 스와치 */

/* 계층형 주제 — 경로 칩(조상 이동) + 소주제 칩(녹색+흰글씨, 사용자 지정) */
.tv-crumbs{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 2px 10px}
.tv-crumb{background:var(--nc-green);color:#fff;border:0;font-family:inherit;font-size:11.5px;font-weight:700;padding:3.5px 11px;border-radius:999px;cursor:pointer;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-crumb.cur{background:var(--surface-2);color:var(--ink);cursor:default}   /* 현재 위치 = 중립(클릭 대상 아님) */
.tv-sep{color:var(--faint);font-size:11px}
/* 소주제 = 행(가지색 링% + n/m + ›) — 칩 폐기(사용자 확정). 링 진입 애니메이션 = @property 각도 보간 + 숫자 카운트업(tvCountUp) */
@property --p{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes ringfill{from{--p:0%}}
.mring.anim{background:conic-gradient(var(--accent) 0 var(--p), var(--surface-2) var(--p) 100%);animation:ringfill .9s cubic-bezier(.25,.8,.3,1) .05s backwards}
.sechead{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--faint);letter-spacing:.06em;margin:14px 2px 7px;cursor:pointer;user-select:none}
.sechead .fc{flex:0 0 auto;display:flex;align-items:center;color:var(--faint);transition:transform .22s}
.sechead.folded .fc{transform:rotate(-90deg)}
.secbody{display:grid;grid-template-rows:1fr;transition:grid-template-rows .26s cubic-bezier(.25,.8,.3,1)}
.secbody.folded{grid-template-rows:0fr}
.secbody>.secin{overflow:hidden;min-height:0;padding:2px 8px 3px;margin:-2px -8px -3px;
  transition:padding .26s cubic-bezier(.25,.8,.3,1),margin .26s cubic-bezier(.25,.8,.3,1)}   /* hidden이 카드 그림자를 안 자르게 패딩 여유 — 접힘 땐 0으로 같이 접힘(찌꺼기 방지) */
.secbody.folded>.secin{padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}
.sechead .sp{flex:1}
.shplus{height:22px;min-width:22px;padding:0 6px;border-radius:7px;border:1.5px dashed var(--line-strong);background:transparent;color:var(--muted);
  font-size:12px;font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;letter-spacing:0}
.sub-row{display:flex;align-items:center;gap:11px;background:var(--surface);border-radius:13px;padding:11px 13px;margin-bottom:7px;box-shadow:var(--shadow);cursor:pointer;font-size:14.5px;font-weight:700}
.sub-row .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub-row .ct{font-size:12px;font-weight:700;color:var(--muted);flex:0 0 auto}
.sub-row .chev{color:var(--faint);font-size:15px;font-weight:600;flex:0 0 auto;margin-left:-2px}
.sring{width:36px;height:36px;border-radius:50%;padding:4px;flex:0 0 auto;background:conic-gradient(var(--c,var(--accent)) 0 var(--p), var(--surface-2) var(--p) 100%);
  animation:ringfill .9s cubic-bezier(.25,.8,.3,1) .05s backwards}   /* 링 두께 = padding 4px 고정 — flex 정렬의 소수 여백은 비대칭 AA */
.sring b{width:100%;height:100%;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--ink)}
.memoglyph{font-size:15px;flex:0 0 auto;line-height:1}
.lgd{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:0}
.lgd i{width:8px;height:8px;border-radius:2.5px}
/* 하단 통계 — 주간 바(Frappe) 2/3 + 이번 달 링 1/3 */
.tv-charts{display:flex;gap:7px;align-items:stretch}
.fcard{background:var(--surface);border-radius:13px;box-shadow:var(--shadow)}
.fcard.bar{flex:2;min-width:0;padding:2px 0 0;overflow:hidden}
.fcard.bar #tvBar{width:calc(100% + 68px);margin-left:-44px}   /* 좌 y축 구역·우 거터를 카드 밖으로(크롭) — y 숫자는 숨김 */
.fcard.bar .frappe-chart{font-family:inherit}
.fcard.bar .chart-legend{display:none}   /* 기본 범례(100px 고정폭)가 어긋나 보여 헤더 색점(.lgd)으로 대체 */
.fcard.bar .y.axis text{display:none}
.fcard.bar .dataset-0 .data-point-value{opacity:.35}   /* 지난주 숫자 흐리게 — 인라인은 Frappe 재렌더가 지우니 반드시 CSS */
.fcard.grass{padding:10px 12px;overflow:hidden;margin-bottom:12px}   /* 잔디 = 달별 캐러셀(달력형 히트맵 — 요일 7열이 카드 폭을 채움) */
#mainGrass,.gwrap .gnb{width:100%}
.gcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;user-select:none;-webkit-user-select:none}
.gc-h{font-size:10.5px;color:var(--muted);text-align:center;padding-bottom:2px}
.gc-e,.gc-c{height:28px;border-radius:7px}
.gc-c[data-gd]{cursor:pointer}
.gc-c[data-gd]:hover{outline:2px solid color-mix(in srgb,var(--nc-green) 55%,transparent);outline-offset:-1px}   /* 셀 클릭 = 그날로 이동 */
.gc-c{position:relative;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.gc-c .d{position:absolute;top:2.5px;left:5px;font-size:9px;opacity:.7}   /* 날짜 = 좌상단 구석(E안) */
.gc-c .n{font-size:11.5px;font-weight:800}   /* 완료 수 = 중앙 */
.gc-c.l0{background:color-mix(in srgb,var(--nc-green) 9%,var(--surface))}
.gc-c.l1{background:color-mix(in srgb,var(--nc-green) 30%,var(--surface))}
.gc-c.l2{background:color-mix(in srgb,var(--nc-green) 55%,var(--surface))}
.gc-c.l3{background:color-mix(in srgb,var(--nc-green) 80%,var(--surface));color:#fff}
.gc-c.l4{background:var(--nc-green);color:#fff}
.gc-c.td{box-shadow:inset 0 0 0 1.6px var(--nc-green);font-weight:800;color:var(--ink)}   /* 오늘 = 링 */
.gc-c.l3.td,.gc-c.l4.td{color:#fff;box-shadow:inset 0 0 0 1.6px #fff6}
.grass-nav{margin-left:auto;display:inline-flex;align-items:center}
.grass-nav b{font-size:12px;color:var(--ink)}
.fcard.grass{touch-action:pan-y}   /* 가로 제스처는 스와이프(달 넘김), 세로는 페이지 스크롤 유지 */
.gwrap{position:relative;width:100%;display:flex;justify-content:center;will-change:transform}   /* 캐러셀 트랙 — 현재+이웃 달이 함께 움직임 */
.gwrap .gnb{position:absolute;top:0}
/* Frappe 고정색(#555 텍스트·#dadada 격자)이 다크에서 안 보임 — 테마 변수로 덮어씀 */
.fcard.bar .frappe-chart text{fill:var(--muted)}
.fcard.bar .frappe-chart .data-point-value{fill:var(--ink)}
.fcard.bar .frappe-chart line{stroke:var(--line)}
.fcard.month{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 6px}
.fcard.month .sring{width:44px;height:44px;padding:5px}
.fcard.month .sring b{font-size:10.5px}
.fcard.month .ml1{font-size:11.5px;font-weight:800}
.fcard.month .ml2{font-size:10.5px;color:var(--muted)}

/* 마인드맵 — 모바일(≤960px)=기존 렌더러 그대로 / 데스크톱(961px+)=JointJS 노드-그래프(자유 배치·드롭 재부모화·팬/줌) */
#mapWrap{position:relative;overflow:auto;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);
  height:calc(100vh - 168px);height:calc(100dvh - 168px);scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
  background-image:radial-gradient(var(--line) 1.1px, transparent 1.1px);background-size:22px 22px}   /* 캔버스 도트 그리드 */
#mapCanvas{position:relative}
#mapLinks{position:absolute;left:0;top:0;pointer-events:none}
#mapLinks path{fill:none;stroke:color-mix(in srgb,#3f8f5e 42%,var(--line-strong));stroke-width:2.4;stroke-linecap:round}
.mm-node{position:absolute;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;max-width:200px}
.mm-node[data-nav]{touch-action:none}   /* (모바일) 가지 드래그가 스크롤에 안 먹히게 */
@media (min-width: 768px) and (min-height: 600px), (min-width: 961px){   /* 데스크톱 = JointJS 캔버스 */
  #mapWrap{overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background-image:none}   /* 무지 배경(SimpleMind) — 색은 배경 버튼으로 사용자 지정 */
  #mapCanvas{width:100%;height:100%}
  #mapCanvas>svg{display:block}
  #mapLinks{display:none}
}
.mm-fo{width:100%;height:100%;display:block;overflow:visible}
.mm-fo .mm-node{position:static;width:100%;height:100%;box-sizing:border-box;max-width:none;cursor:pointer}   /* fo 안에선 absolute 해제. SimpleMind처럼 손가락(grab 손바닥 금지) */
/* 데스크톱(fo 스코프) 확대 타이포 + 둥근 사각형(SimpleMind 캡처 기준 — 타원 아님) — 모바일 .mm-* 원본은 불변. 측정기(.mm-measure.mm-fo)도 같은 스코프라 크기 일치 */
.mm-desk .mm-topic{font-size:13.5px;padding:8px 15px;border-radius:999px}   /* 주제 = 알약 실루엣 — 할일(네모 카드)과 모양부터 구분 */
.mm-desk .mm-topic.mm-root{font-size:16px;padding:12px 19px;border-radius:14px}
.mm-desk .mm-topic .ct{font-size:11.5px}
.mm-desk .mm-leaf{font-size:12.5px;padding:6px 12px;border-radius:10px}
.mm-desk .mm-leaf .c{width:15px;height:15px;flex-basis:15px}
/* 데스크톱 완료 표현 = 불투명 + 색 바램 — 반투명이면 중심앵커 선이 노드를 투과해 보임(사용자 리포트) */
.mm-desk .mm-leaf.done{opacity:1;color:var(--faint);border-color:var(--line);background:var(--surface)}
.mm-desk .mm-leaf.done .c.ok{background:color-mix(in srgb,var(--accent) 50%,var(--surface));border-color:transparent}
.mm-desk .mm-topic.alldone{opacity:1}
/* 4종 구분(데스크톱) — 하위 주제는 1차보다 작게, 할일 체크=사각, 메모=노란 메모지+접힌 모서리 */
.mm-desk .mm-topic.mm-sub{font-size:12.5px;padding:6.5px 13px;border-radius:999px}
.mm-desk .mm-leaf .c{border-radius:4.5px}   /* 할일 = 사각 체크박스(메모·주제와 즉시 구분) */
.mm-desk .mm-leaf.memo{background:color-mix(in srgb,#e2b93b 20%,var(--surface));border:1px solid color-mix(in srgb,#c9a53e 42%,var(--line));
  position:relative;overflow:hidden;padding-right:18px}
.mm-desk .mm-leaf.memo::after{content:'';position:absolute;top:0;right:0;width:0;height:0;
  border-style:solid;border-width:0 13px 13px 0;
  border-color:var(--surface) var(--surface) color-mix(in srgb,#c9a53e 55%,var(--surface)) transparent}   /* 접힌 모서리 = 메모지 기호 */
.mm-node.sel{box-shadow:0 0 0 2.5px color-mix(in srgb,var(--accent) 60%, transparent) !important}   /* 선택 = 링 */
.mm-node.droptgt{box-shadow:0 0 0 3px #4a90e2, 0 0 16px 5px rgba(74,144,226,.45) !important}   /* 드롭(재부모화) 대상 = 파란 글로우+링(SimpleMind) */
.mm-node.mm-branch{box-shadow:0 0 0 3px color-mix(in srgb, var(--ink) 38%, transparent) !important}   /* Shift 가지 이동 피드백 = 굵은 테두리(SimpleMind) */
.mm-wells{position:absolute;z-index:6;width:0;height:0}   /* 종류별 노드웰 — 노드 윤곽 우측 부채꼴, 버튼은 중심 기준 절대배치 */
.mm-wells button{position:absolute;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;border:1px solid color-mix(in srgb, currentColor 45%, transparent);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.10);padding:0}
.mm-wells button svg{width:10px;height:10px}
.mm-wells .wk-sub{color:var(--nc-green)}
.mm-wells .wk-task{color:#5b8bd0}   /* 할일 고정색 — 선·색띠와 한 세트(액센트는 가지 빨강과 혼동) */
.mm-wells .wk-memo{color:#c9a53e}
.mm-wells button:hover{transform:translate(-50%,-50%) scale(1.12);background:color-mix(in srgb, currentColor 16%, var(--surface))}
#mapWrap.mm-far .mm-wells{display:none !important}   /* 줌아웃 1단계 — 핸들 숨김(SimpleMind 방식) */
#mapWrap.mm-lock .mm-fo .mm-node{cursor:default}    /* 줌아웃 2단계 — 읽기 전용(이동 차단, 탐색만) */
.mm-desk .mm-node input.mm-edit{border:0;outline:0;background:transparent;font:inherit;color:inherit;padding:0;margin:0;width:100%;min-width:56px;caret-color:currentColor}   /* in-place 생성 — 노드 안에서 커서만 깜빡임(SimpleMind) */
.bm-ic svg{width:14px;height:14px;display:block}   /* 메뉴 아이콘 = SVG 심볼(노드웰과 동일 아이콘) */
.bm-sep{height:1px;background:var(--line);margin:5px 10px}
.mk-today .bm-ic{color:var(--accent)}
.mk-sub .bm-ic{color:var(--nc-green)}
.mk-task .bm-ic{color:#5b8bd0}
.mk-memo .bm-ic{color:#c9a53e}
.map-dim{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(30,25,20,.34);z-index:70;display:grid;place-items:center}   /* 삭제 확인 다이얼로그 */
.map-cfm{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px;max-width:340px;font-size:14px;line-height:1.55;color:var(--ink)}
.map-cfm .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.map-cfm button{font-family:inherit;font-size:13px;font-weight:700;border-radius:10px;padding:8px 14px;cursor:pointer}
.map-cfm .cfm-no{border:1.5px solid var(--line-strong);background:var(--surface);color:var(--muted)}
.map-cfm .cfm-yes{border:0;background:#e0533f;color:#fff}
.mapbg-pop{display:flex;gap:8px;padding:10px 12px}
.mapbg-sw{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-strong);cursor:pointer;padding:0}
.mapbg-sw.on{box-shadow:0 0 0 2.5px var(--accent)}
@media (max-width: 960px){#mapBgBtn{display:none}}   /* 배경색 선택은 데스크톱 캔버스 전용 */
#mapBgBtn{width:30px;height:30px;border-radius:50%;padding:0}   /* 버튼 = 현재 배경색 스와치 — 정리 옆에 붙음 */
@media (min-width: 768px) and (min-height: 600px), (min-width: 961px){#mapModeBtn{margin-left:0}}   /* 스와치가 auto 마진을 갖고 정리가 그 옆에 */
.mm-measure{position:absolute;left:-9999px;top:0;visibility:hidden}
.mm-measure .mm-node{position:static}
.mm-loading,.mm-empty{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:12.5px;color:var(--faint);pointer-events:none;z-index:5}
.mm-node .lb{min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  white-space:normal;word-break:keep-all;overflow-wrap:anywhere;line-height:1.25}   /* 최대 2줄 — 잘림 최소화 */
.mm-topic{background:linear-gradient(180deg,color-mix(in srgb,var(--nc-green) 86%,#fff 14%),var(--nc-green));
  color:#fff;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;box-shadow:0 2px 7px rgba(40,70,50,.22)}
.mm-topic.mm-root{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff 12%),var(--accent));   /* 중심 = 테마 강조색(소주제 녹색과 구분) */
  border-radius:16px;padding:12px 17px;font-size:15.5px;font-weight:800;box-shadow:0 5px 16px rgba(0,0,0,.2)}
.mm-topic .ct{font-size:11px;font-weight:600;opacity:.9;flex:0 0 auto}
.mm-topic.alldone{opacity:.5}
.mm-plus{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.32);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;line-height:1;cursor:pointer}
.mm-plus.big{flex-basis:27px;width:27px;height:27px;font-size:16px}   /* 빈 주제 = 터치 타깃 확대 */
.mm-node.dragging{opacity:.88;filter:drop-shadow(0 6px 10px rgba(0,0,0,.22))}
.mm-leaf{background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:5px 11px;font-size:12px;color:var(--ink);box-shadow:var(--shadow)}
.mm-leaf.done{opacity:.5}
.mm-leaf.done .lb{text-decoration:line-through}
.mm-leaf.memo{background:color-mix(in srgb,#3f8f5e 12%,var(--surface) 88%);border-color:transparent}
.mm-leaf .c{width:14px;height:14px;flex:0 0 14px;border-radius:50%;border:1.6px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;font-size:8px}
.mm-leaf .c.ok{background:var(--accent);border-color:var(--accent);color:#fff}
.mm-hint{font-size:12px;color:var(--faint);cursor:default}
.mm-newbox{padding:8px}
.mm-newbox input{border:1.5px solid var(--accent);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;
  background:var(--surface);color:var(--ink);outline:none;width:180px}

/* 주제 뷰 요약 카드(대시보드) — 메인의 오늘 카드와 같은 시각 언어(mring 재사용) */
.tv-sum{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:12px}
.tv-sum .l1{font-size:15px;font-weight:800}
.tv-sum .l2{font-size:12px;color:var(--muted);margin-top:3px}
.tv-sum .nxt{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:5px;cursor:pointer}
.tv-sum .nxt .d{color:var(--faint);font-size:11px;flex:0 0 auto}

/* ── 주제 완료 / 접기 ─────────────────────────────────────────
   A1 진입점 = 진행률 링이 버튼. 100%일 때만 후광 + 캐럿으로 은은히 권하고, 평소엔 평범한 링(탭은 계속 됨) */
.mring.tapable{position:relative;cursor:pointer}
.mring.hot{box-shadow:0 0 0 5px var(--accent-soft)}
.mring.hot::after{content:'⌄';position:absolute;right:-2px;bottom:-4px;width:17px;height:17px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:800;display:flex;align-items:center;
  justify-content:center;line-height:1;padding-bottom:3px;box-shadow:0 0 0 2px var(--surface)}
.mring.quiet{filter:grayscale(.55);opacity:.8}   /* 끝낸 주제 = 진행률이 더는 '살아 있는 수치'가 아님 */
/* 완료/접기 팝오버·메뉴 행의 한 줄 보조 설명 */
.bm-lb .s{display:block;font-size:11px;font-weight:600;color:var(--faint);margin-top:1px;white-space:normal}
.bm-row.ok .bm-ic{color:var(--nc-green)}
.cl-pop{min-width:214px}
.cl-pop .bm-lb{white-space:normal}

/* B — 정리 다이얼로그(남은 할일 3택) */
.tc-card{max-width:340px}
.tc-t{font-size:16.5px;font-weight:800;letter-spacing:-.2px}
.tc-d{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.tc-left{margin:13px 0 4px;background:var(--bg);border-radius:12px;padding:9px 11px;max-height:132px;overflow-y:auto}
.tc-left .r{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:3px 0}
.tc-left .r i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);flex:0 0 auto}
.tc-left .r.more{color:var(--faint);font-size:12px}
.tc-opt{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;border:1.5px solid var(--line-strong);
  background:var(--surface);border-radius:13px;padding:11px 13px;margin-top:9px;font-family:inherit;color:var(--ink);cursor:pointer}
.tc-opt .ic{flex:0 0 22px;font-size:14px;line-height:22px;text-align:center;color:var(--muted);font-style:normal}
.tc-opt .bd{flex:1;min-width:0}
.tc-opt b{display:block;font-size:14px;font-weight:800}
.tc-opt em{display:block;font-size:11.5px;color:var(--faint);margin-top:2px;line-height:1.45;font-style:normal}
.tc-opt.primary{border-color:var(--accent);background:var(--accent-soft)}
.tc-opt.primary .ic{color:var(--accent)}
.tc-cancel{width:100%;border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:700;
  font-family:inherit;padding:12px 0 2px;cursor:pointer}

/* E — 완료 요약 카드(컨페티는 confettiRain) */
.sum-modal{z-index:60}
.sum-card{width:100%;max-width:320px;background:var(--surface);border-radius:20px;overflow:hidden;
  box-shadow:0 18px 50px rgba(43,39,34,.3);transform:scale(.94);transition:transform .22s cubic-bezier(.25,.8,.3,1)}
.modal.is-open .sum-card{transform:scale(1)}
.sc-bar{display:block;height:7px}
.sc-in{padding:20px 20px 18px;text-align:center}
.sc-em{font-size:34px;line-height:1}
.sc-kicker{font-size:11px;font-weight:800;color:var(--accent);letter-spacing:.08em;margin-top:10px}
.sc-nm{font-size:21px;font-weight:800;letter-spacing:-.3px;margin-top:4px}
.sc-line{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.5}
.sc-line b{color:var(--ink);font-weight:800}
.sc-ok{width:100%;border:0;background:var(--accent);color:var(--on-accent,#fff);font-size:15px;font-weight:800;
  font-family:inherit;border-radius:13px;padding:13px;margin-top:16px;cursor:pointer}

/* C — 주제 탭 하단 「완료된 주제 N개」 접힘 섹션 */
#topicShelf > .done-list{grid-column:1/-1}
.done-fold{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;border-top:1px solid var(--line);
  padding:13px 4px 11px;margin-top:8px;font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.done-fold .ic{width:18px;height:18px;border-radius:50%;background:var(--surface-2);color:var(--faint);font-size:10px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.done-fold .ch{margin-left:auto;color:var(--faint);font-size:12px}
.done-row{display:flex;align-items:center;gap:9px;background:var(--surface);border-radius:12px;padding:10px 12px;
  margin-bottom:6px;box-shadow:var(--shadow);cursor:pointer}
.done-row .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--line-strong)}
.done-row .nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-row .mt{font-size:11px;color:var(--faint);flex:0 0 auto}
.done-row.rest .nm{color:var(--faint)}
.lbl-rest{font-size:9.5px;font-weight:800;color:var(--faint);background:var(--surface-2);border-radius:5px;padding:1.5px 5px;flex:0 0 auto}
.done-all{width:100%;border:0;background:transparent;color:var(--accent);font-size:12.5px;font-weight:800;
  font-family:inherit;padding:6px 0 2px;text-align:center;cursor:pointer}

/* D — 완료된 주제 전체 목록(완료일 역순 + 월별 그룹) */
.dl-sub{font-size:12.5px;color:var(--muted);margin:-2px 2px 12px}
.dl-mon{font-size:11px;font-weight:800;color:var(--faint);letter-spacing:.06em;margin:14px 2px 7px}
.dl-row{display:flex;align-items:center;gap:11px;background:var(--surface);border-radius:13px;padding:11px 13px;
  margin-bottom:7px;box-shadow:var(--shadow);cursor:pointer}
.dl-row .bar{width:4px;height:34px;border-radius:99px;flex:0 0 auto;background:var(--line-strong)}
.dl-row .bd{flex:1;min-width:0}
.dl-row .nm{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-row .mt{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.dl-row .dt{font-size:11.5px;color:var(--faint);flex:0 0 auto;font-weight:700}
.dl-row.rest{background:var(--surface-2);box-shadow:none}
.dl-row.rest .nm{color:var(--muted);font-weight:700}
.dl-row.rest .mt{color:var(--faint)}

/* F — 끝낸 주제 상세: 상단 완료 배너 + 「다시 열기」 1탭 */
.closed-banner{display:flex;align-items:center;gap:9px;background:var(--surface-2);border-radius:13px;
  padding:11px 13px;font-size:12.5px;color:var(--muted);margin-bottom:12px}
.closed-banner .cb-ic{flex:0 0 auto;font-weight:800;color:var(--nc-green)}
.closed-banner.drop .cb-ic{color:var(--faint)}
.closed-banner .cb-tx{flex:1;min-width:0}
.closed-banner .cb-tx b{color:var(--ink);font-weight:800}
.cb-reopen{flex:0 0 auto;border:0;background:var(--nc-green);color:var(--on-accent);font-size:12px;font-weight:800;
  font-family:inherit;border-radius:10px;padding:8px 12px;cursor:pointer}   /* 글자색은 #fff 고정 금지 — 다크는 --nc-green이 밝아져 흰 글씨가 2.85:1로 깨진다(--on-accent = 라이트 #fff / 다크 잉크) */
.tv-closed .shplus,.tv-closed .tvd-add{opacity:.6}   /* 읽기 위주 — 추가 버튼은 살려 두되 톤을 낮춘다(새 할일 = 자동 재개) */

/* 이모지 팔레트 */
.ed-emoji{position:fixed;z-index:46;display:none;grid-template-columns:repeat(8,1fr);gap:2px;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:8px;box-shadow:var(--shadow-lg);max-width:320px}
.ed-emoji.show{display:grid}
.ed-emoji button{border:0;background:transparent;font-size:20px;padding:4px;border-radius:8px;cursor:pointer}
.ed-emoji button:hover{background:var(--surface-2)}

/* 음성 듣기줄(하단 오버레이 칩) */
.ed-listen{display:none;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  max-width:88%;background:var(--accent);color:#fff;font-size:13px;font-weight:600;border-radius:999px;padding:9px 16px;
  box-shadow:var(--shadow-lg);z-index:40;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-editor.listening .ed-listen{display:block}

/* 연결 목록 */
.link-row{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:12px;padding:10px 12px;margin-bottom:7px;box-shadow:var(--shadow);font-size:13.5px}
.link-row .kind{font-size:10px;font-weight:800;border-radius:6px;padding:2px 6px;flex:0 0 auto}
.link-row .kind.task{background:var(--accent-soft);color:var(--accent)}
.link-row .kind.memo{background:var(--surface-2);color:var(--muted)}
.link-row .kind.topic{background:#dcefed;color:#20756e}
.link-row .lt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.link-row.ai{border:1.5px dashed var(--line-strong);box-shadow:none}
.link-row .aitag{font-size:9px;font-weight:800;color:#fff;background:#7a63d8;border-radius:99px;padding:2px 6px;flex:0 0 auto}
.link-row .x{border:0;background:transparent;color:var(--faint);font-size:16px;cursor:pointer;padding:2px 6px;font-family:inherit}
.addlink{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px dashed var(--line-strong);border-radius:12px;padding:11px;
  color:var(--muted);font-size:13px;font-weight:600;width:100%;background:transparent;cursor:pointer;font-family:inherit;margin-top:4px}

/* 피커(주제 선택·연결 추가 공용) */
/* 상단 붙임 — 가운데 정렬이면 폰에서 키보드가 올라올 때 카드가 가린다(검색 입력이 있는 시트) */
.pick-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;background:rgba(20,16,12,.34);display:flex;align-items:flex-start;justify-content:center;padding:14px 20px 20px}
.pick-wrap[hidden]{display:none}   /* hidden 속성이 author display:flex에 지지 않게 */
.pick-card{width:min(92vw,420px);max-height:72vh;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);padding:16px;display:flex;flex-direction:column;gap:10px}
.pick-title{font-size:15px;font-weight:800}
.pick-card input{border:1.5px solid var(--line-strong);border-radius:11px;background:var(--bg);padding:9px 12px;font-size:14px;font-family:inherit;color:var(--ink);outline:none}
.pick-list{flex:1;overflow-y:auto;min-height:120px}
.pick-item{display:flex;align-items:center;gap:8px;padding:11px 9px;border-radius:10px;font-size:14px;cursor:pointer}
.pick-item:hover{background:var(--surface-2)}
.pick-item .kind{font-size:10px;font-weight:800;border-radius:6px;padding:2px 6px}
.pick-close{border:1.5px solid var(--line-strong);background:transparent;border-radius:11px;padding:10px;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}

/* 할일 시트 — 주제 행 */
.topicrow{display:flex;align-items:center;gap:7px;margin-top:10px}
.tp-chip{border:1.5px dashed var(--line-strong);background:transparent;color:var(--muted);font-size:12px;font-weight:700;border-radius:99px;padding:6px 10px;cursor:pointer;font-family:inherit;max-width:110px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}   /* 옵션 줄 통합 — 공간 부족 시 주제 칩이 먼저 줄어들며 말줄임(min-width:0 — 날짜·반복·시간 최장 조합과 안 겹치게) */
.tp-chip.on{border-style:solid;border-color:#2e8f87;background:#dcefed;color:#20756e}
.memo-link-chip{border:1.5px solid var(--line-strong);background:var(--surface-2);color:var(--muted);font-size:11.5px;font-weight:700;border-radius:99px;padding:6px 11px;cursor:pointer;font-family:inherit}

/* ── 다이얼 타이머·할일 집중(timer.js) — v176. 시안: doc/mockups/timer-final.html, 결정: doc/mockups/context-notes-timer.md ── */
:root{--tm-pie:#37b5a8;--tm-dot:#d84b36}
.tm-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:120;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
.tm-top{align-self:stretch;display:flex;align-items:center;gap:7px}
.tm-title{font-size:15px;font-weight:800}
.tm-sp{flex:1}
.tm-chip{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 11px;font-family:inherit;cursor:pointer}
.tm-chip.on{color:var(--accent)}
.tm-x{width:34px;justify-content:center;padding:7px 0}
.tm-taskhead{align-self:stretch;display:flex;flex-direction:column;margin-top:4px}
.tm-tag{font-size:12.5px;font-weight:700;color:#2e7d5b}
.tm-tname{font-size:20px;font-weight:800;margin-top:2px}
.tm-dialbox{width:min(300px,78vw);height:min(300px,78vw);margin-top:10px;filter:drop-shadow(0 6px 16px rgba(43,39,34,.13));flex:0 0 auto}
.tm-svg{width:100%;height:100%;touch-action:none;font-family:inherit}
.tm-presets{display:flex;width:min(300px,78vw);margin-top:14px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;overflow:hidden;flex:0 0 auto}
.tm-seg{flex:1;text-align:center;padding:12px 0;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.tm-seg+.tm-seg{border-left:1px solid var(--line)}
.tm-seg.on{background:var(--accent);color:var(--on-accent,#fff)}
.tm-seg.off{opacity:.35;pointer-events:none}
.tm-acts{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:14px;flex:0 0 auto}
.tm-b{border:1.5px solid var(--line-strong);border-radius:999px;padding:12px 16px;font-size:13.5px;font-weight:700;color:var(--muted);background:var(--surface);font-family:inherit;cursor:pointer}
.tm-b.main{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff);padding:12px 26px;font-size:14.5px}
.tm-b:disabled{opacity:.35}
.tm-b.big{width:min(300px,78vw);border-radius:18px;padding:15px 0;font-size:16.5px}
.tm-b.tm-stop.confirming{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.tm-nt{align-self:stretch;margin-top:12px;background:var(--surface);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.06);padding:11px 13px;display:flex;flex-direction:column;gap:9px}
.tm-nt .ck{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer}
.tm-nt .ck i{width:20px;height:20px;border-radius:7px;border:2px solid var(--line-strong);flex:0 0 auto;display:grid;place-items:center;color:#fff;font-size:11px}
.tm-nt .ck.on i{background:#3f8f5e;border-color:#3f8f5e}
.tm-nt .ck.on span{color:var(--muted);text-decoration:line-through}
.tm-cm{align-self:stretch;margin-top:10px;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;font-size:13px;color:var(--ink);background:var(--surface);font-family:inherit}
.tm-cm::placeholder{color:var(--faint)}
.tm-list{align-self:stretch;margin-top:auto;padding-top:14px}
.tm-list .lb{font-size:11.5px;font-weight:800;color:var(--faint);margin:0 2px 7px}
.tm-list .row{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:13px;padding:11px 13px;margin-bottom:7px;box-shadow:0 1px 2px rgba(0,0,0,.06);font-size:14px;font-weight:600;cursor:pointer}
.tm-list .c{width:19px;height:19px;border-radius:50%;border:2px solid var(--line-strong);flex:0 0 auto}
.tm-list .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-list .go{width:28px;height:28px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px;flex:0 0 auto}
.tm-facts{align-self:stretch;display:flex;gap:8px;margin-top:12px;flex:0 0 auto}
.tm-fb{flex:1;height:50px;border-radius:14px;background:var(--surface);border:1.5px solid var(--line);font-size:14px;font-weight:700;color:var(--muted);font-family:inherit;cursor:pointer}
.tm-fb.done{flex:1.5;background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.tm-hud{position:fixed;left:max(20px,calc(50% - 300px + 20px));bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:19;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 14px;box-shadow:0 6px 24px rgba(0,0,0,.16);font-size:13.5px;font-weight:700;cursor:pointer;max-width:calc(100% - 110px)}   /* FAB(우측)와 같은 줄 세로 중심, 왼쪽 배치 — 겹침 방지 */
.tm-hud b{font-variant-numeric:tabular-nums}
.tm-hud .lb{color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-hud .hb{width:30px;height:30px;border-radius:10px;border:0;background:var(--accent-soft);color:var(--accent);font-size:13px;cursor:pointer}
.tm-hud.endst{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent)}
.tm-hud.endst .lb,.tm-hud.endst b{color:var(--on-accent,#fff)}

/* ── 모바일 루틴 면(routine.js) — 헤더 칩·면 카드·만들기 시트·담기 선택 ── */
.app{position:relative}   /* 슬라이드 중 절대배치 면의 기준 */
.head{position:relative}
.rt-chip{position:absolute;right:0;bottom:15px;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:12px;font-weight:800;
  box-shadow:0 1px 3px rgba(0,0,0,.06);cursor:pointer}
@media (min-width: 768px) and (min-height: 600px), (min-width: 961px){ .rt-chip{display:none} }   /* 데스크톱 레이어 = rt-sec가 담당 */
.rt-dim{position:relative}
.rt-dim::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(20,16,12,.16);border-radius:12px;pointer-events:none;animation:rtDim .38s both}
@keyframes rtDim{from{opacity:0}to{opacity:1}}
.rt-face .rtm-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px 12px;margin:2px 0 14px;box-shadow:var(--shadow)}
.rtm-card .r1{display:flex;align-items:baseline;gap:8px;min-width:0}
.rtm-card .nm{font-size:16px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtm-card .sub{font-size:12px;color:var(--muted);flex:0 0 auto}
.rtm-card .r2{display:flex;align-items:center;gap:8px;margin:10px 0 6px}
.rtm-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.rtm-seg button{border:0;background:transparent;padding:4px 10px;font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.rtm-seg button.on{background:var(--ink);color:var(--surface)}
.rtm-go{margin-left:auto;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:13px;font-weight:800;padding:7px 16px;cursor:pointer}
.rtm-go:disabled{background:var(--surface-2);color:var(--muted)}
.rtm-card .it{display:flex;align-items:center;gap:9px;padding:5px 2px;font-size:14px}
.rtm-card .it.dim{opacity:.42}
.rtm-card .pd{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pd.A{background:var(--A)} .pd.B{background:var(--B)} .pd.C{background:var(--C)}
.rtm-card .last{border-top:1px dashed var(--line);margin-top:8px;padding-top:8px;font-size:12px;color:var(--muted)}
.rtm-ln{border:0;background:transparent;cursor:pointer;font-size:12px;color:var(--muted);padding:0 4px}
.rtm-lni{width:100%;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:13px;padding:6px 8px;outline:none}
.rtm-new{display:block;width:100%;border:1.5px dashed var(--line-strong);border-radius:14px;background:transparent;color:var(--muted);
  font:inherit;font-size:14px;font-weight:700;padding:16px;cursor:pointer;margin:2px 0 14px}
.rtm-new small{display:block;font-weight:500;font-size:12px;color:var(--faint);margin-top:4px}
.rtm-new.sm{padding:11px}
/* 만들기/편집 시트 — 이름 1행 + 행 연속 입력 */
.rt-sheet .rts-nm{width:100%;border:0;border-bottom:2px solid var(--line);background:transparent;color:var(--ink);
  font:inherit;font-size:18px;font-weight:800;padding:8px 2px 12px;outline:none;box-sizing:border-box}
.rt-sheet .rts-nm::placeholder{color:var(--faint);font-weight:500}
.rts-rows{max-height:44vh;overflow-y:auto;overscroll-behavior:contain;margin-top:4px}
.rtr{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.rtr .prio-pick{gap:5px;flex:0 0 auto;touch-action:none}
.rtr .pdot{width:24px;height:24px;font-size:11px}
.rtr .rtr-in{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;outline:none;padding:4px 0}
.rtr .rtr-in::placeholder{color:var(--faint)}
.rtr.dragging{background:var(--surface-2);border-radius:10px;box-shadow:var(--shadow);position:relative;z-index:2}
.rts-hint{font-size:11.5px;color:var(--muted);margin:8px 0 12px}
.rts-foot{display:flex;gap:8px}
.rts-save{flex:1;border:0;border-radius:13px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:16px;font-weight:800;padding:13px;cursor:pointer}
.rts-del{border:1px solid var(--line);border-radius:13px;background:transparent;color:var(--A);font:inherit;font-size:14px;font-weight:700;padding:13px 16px;cursor:pointer}
/* 「루틴에」 담기 선택 시트 (진입은 펼침 조작 줄) */
.rt-pick .rtp-t{font-size:15px;font-weight:800;margin:2px 0 10px}
.rtp-list{display:flex;flex-direction:column;gap:8px}
.rtp-list button{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:12px;
  background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:700;padding:12px 14px;cursor:pointer;text-align:left}
.rtp-list button small{font-size:12px;font-weight:600;color:var(--muted)}
.app.rt-anim{overflow-x:clip}   /* 루틴 슬라이드 중에만 — 대기 면의 가로 오버플로로 페이지가 밀리는 것 차단(스크롤 컨테이너는 안 만듦) */
.head-top>div:first-child{min-width:0}   /* 비오늘 날짜의 '오늘로' 버튼으로 날짜 줄이 길어져도 헤더가 화면 폭을 안 넘게 — flex 최소폭(auto)이 헤더를 57px 밀어내 스와이프 고스트가 옆 화면 위로 삐져나오던 겹침의 뿌리 */

/* ── 완료 코멘트 💬 모바일 패리티(v186) — 행 아래 표시 + 펼침 인라인 편집 ── */
.item .dnote{flex-basis:100%;font-size:12px;color:var(--muted);padding:2px 2px 0 46px;cursor:pointer}
.item.has-dnote{flex-wrap:wrap}   /* 클래스는 app.js가 부여 — has 선택자(105+)는 구형에서 규칙째 증발 */
.dn-edit{display:flex;align-items:center;gap:7px;margin-top:9px;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.dn-edit i{font-style:normal;font-size:13px;flex:0 0 auto}
.dn-in{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;outline:none}
.dn-in::placeholder{color:var(--faint)}

/* ── 할일 면 루틴 접이식 묶음(v187) — 체크 원 없음, 탭=펼침, 전 항목 완료=자동 done ── */
.item.rt-bundle{cursor:pointer}
.item.rt-bundle .rtb-badge{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:13px;font-weight:800;flex:0 0 auto}
.item.rt-bundle.done .rtb-badge{background:var(--surface-2);color:var(--muted)}
.item.rt-bundle .rtb-name{flex:1;min-width:0;font-size:16px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item.rt-bundle.done .rtb-name{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.item.rt-bundle .rtb-chip{border-radius:999px;border:1.5px solid var(--line-strong);color:var(--muted);font-size:12px;font-weight:800;padding:3px 9px;flex:0 0 auto}
.item.rt-bundle .rtb-chip.fin{border:0;background:color-mix(in srgb,var(--C) 16%,var(--surface));color:var(--C)}
.item.rt-bundle .chev{display:flex}
.item.rt-bundle.open{border-bottom-left-radius:0;border-bottom-right-radius:0}
.item.rt-bundle.open .chev svg{transform:rotate(180deg)}
.item.rt-sub{margin-left:26px;min-height:46px;border-top-left-radius:6px;border-top-right-radius:6px;border-top:1px dashed var(--line)}
.item.rt-sub .t-title{font-size:15px}
.item.rt-sub .state{transform:scale(.9)}

/* ── 루틴홈·상세·요일 제안·프리셋(v188) ── */
.rtm-sum{background:color-mix(in srgb,var(--accent) 6%,var(--surface));border:1px solid var(--line);border-radius:16px;padding:13px 16px;margin:2px 0 14px}
.rtm-sum .s1{font-size:14px}
.rtm-sum .s1 span{font-size:12px;color:var(--muted);font-weight:600}
.rtm-sum .s2{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:11.5px;color:var(--muted)}
.rtm-sum .s2 .rt{margin-left:auto}
.rtd-hm{display:inline-flex;gap:4px}
.rtd-hm i{border-radius:4px;border:1px solid var(--line);background:var(--surface-2)}
.rtm-card .r1{cursor:pointer}
.rtm-card .r1 .more{margin-left:auto;color:var(--faint);font-size:14px;flex:0 0 auto}
.rtm-card .r2 .sp{margin-left:auto}
.rtm-play{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font-size:12px;display:grid;place-items:center;padding:0;cursor:pointer;flex:0 0 auto}
.rtm-prog{border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);font-size:13px;font-weight:800;padding:6px 12px;flex:0 0 auto}
.rtm-fin{border-radius:999px;background:color-mix(in srgb,var(--C) 16%,var(--surface));color:var(--C);font-size:13px;font-weight:800;padding:7px 12px;flex:0 0 auto}
.rtm-card .it.fin{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line-strong)}
/* 상세 */
.rtd-head{display:flex;align-items:center;gap:9px;margin:2px 0 12px}
.rtd-head b{font-size:18px}
.rtd-head .sub{font-size:12px;color:var(--muted)}
.rtd-back{border:0;background:transparent;font-size:22px;color:var(--muted);padding:0 4px;cursor:pointer}
.rtd-edit{margin-left:auto;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:12px;font-weight:700;padding:5px 12px;cursor:pointer}
.rtd-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 16px;margin-bottom:12px}
.rtd-card .t{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rtd-card .t b{font-size:13px}
.rtd-card .t span{font-size:11.5px;color:var(--muted)}
.rtd-card .t.bd{margin:11px 0 0;padding-top:10px;border-top:1px dashed var(--line)}
.rtd-card .stats{display:flex;gap:14px;margin-top:10px;font-size:12px;color:var(--muted)}
.rtd-card .stats b{color:var(--ink)}
.rtsw{margin-left:auto;width:38px;height:22px;border-radius:999px;background:var(--surface-2);border:0;position:relative;cursor:pointer;flex:0 0 auto;padding:0}
.rtsw i{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.rtsw.on{background:var(--accent)}
.rtsw.on i{left:18px}
.rtd-days{display:flex;gap:6px;margin-top:4px}
.rtd-days button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:inherit;font-size:12px;font-weight:800;border:1.5px solid var(--line-strong);background:transparent;color:var(--muted);cursor:pointer;padding:0}
.rtd-days button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.rtd-hist .row{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px;cursor:pointer}
.rtd-hist .row:last-child{border-bottom:0}
.rtd-hist .row .d{color:var(--muted);flex:0 0 44px}
.rtd-hist .row .ing{color:var(--accent)}
.rtd-hist .row .n{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtd-del{margin:2px 0 14px;text-align:center}
.rts-del2{border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--A);font:inherit;font-size:13px;font-weight:700;padding:10px 18px;cursor:pointer}
/* 프리셋 칩(첫 사용자) */
.rts-pre{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 2px}
.rts-pre .pt{font-size:11.5px;color:var(--muted);width:100%}
.rts-pre button{border:1px dashed var(--line-strong);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;font-weight:700;padding:6px 12px;cursor:pointer}
/* 요일 제안 줄(할일 면 맨 위) */
.rt-suggest .row{display:flex;align-items:center;gap:9px;padding:10px 13px;margin:2px 0 9px;border:1.5px dashed var(--accent);border-radius:14px;background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.rt-suggest .tx{font-size:13px;font-weight:700;color:var(--ink);min-width:0}
.rt-suggest .go{margin-left:auto;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:12px;font-weight:800;padding:6px 13px;cursor:pointer;flex:0 0 auto}
.rt-suggest .x{border:0;background:transparent;color:var(--faint);font-size:14px;padding:2px;cursor:pointer;flex:0 0 auto}
/* 타이머 루틴 릴레이 진행 줄 */
.tm-rt{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 4px}
.tm-rt .chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12px;font-weight:800;color:var(--ink)}
.tm-rt .chip b{color:var(--accent)}
.tm-rt .nx{font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 라이선스 잠금 (002) ── 화면을 덮되 데이터는 건드리지 않는다. 구형 WebView: inset·:has 금지, gap 미사용. */
.lock-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.lock-screen[hidden]{display:none}
.lock-card{position:relative;width:100%;max-width:340px;text-align:center;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:30px 24px 24px}
.lock-x{position:absolute;top:8px;right:10px;border:0;background:transparent;color:var(--faint);font-size:21px;line-height:1;padding:6px;cursor:pointer}
/* 자물쇠 그림 대신 2px 선 하나 — 장식을 빼는 쪽이 기본안이다. */
.lock-mark{width:34px;height:2px;border-radius:2px;background:var(--accent);margin:0 auto 22px}
.lock-title{margin:0 0 10px;font-size:19px;font-weight:800;color:var(--ink);line-height:1.35}
.lock-safe{margin:0 0 26px;font-size:14px;line-height:1.6;color:var(--muted)}
.lock-buy{display:block;width:100%;padding:13px 16px;border:0;border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.lock-buy:active{opacity:.85}
.lock-hint{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--faint)}
.lock-hint[hidden]{display:none}

/* 라이선스 상태 — 체험판인지 정식 버전인지 항상 보인다. 재촉이 아니라 정보다(FR-004).
   막바지(3일 이하)만 색을 올린다. */
/* ── 알림(일정 패널) ── 시각이 있는 할일에만. 칩 나열 + ＋로 추가. */
.nrow{display:flex;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.nrow[hidden]{display:none}
.nrow .tl-in{flex:0 0 auto;margin-right:10px}
.nchips{display:flex;flex-wrap:wrap;min-width:0;flex:1}
.nchip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:var(--accent);
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:999px;padding:4px 6px 4px 10px;
  margin:2px 6px 2px 0;white-space:nowrap}
.nchip .x{margin-left:5px;padding:0 3px;color:var(--faint);font-size:13px;line-height:1;cursor:pointer}
/* touch-action:none — 없으면 세로 드래그가 시트 스크롤로 가로채져 스택 선택이 안 됨(반복 버튼과 같은 처리). */
.nadd{flex:0 0 auto;border:1.5px dashed var(--line-strong);background:transparent;color:var(--accent);
  font:inherit;font-size:13px;font-weight:800;border-radius:999px;width:28px;height:28px;cursor:pointer;padding:0;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* 알림 직접 입력 — 흐름 안 행. 숫자 키보드를 띄우면 시트가 밀려 입력칸이 화면 밖으로 나가므로
   키보드를 안 쓰고 −/＋ 스테퍼와 단위 토글로 받는다. */
/* 맞춤 알림 — 굴리는 휠 둘. 가운데 한 줄이 고른 값이고, 그 자리에만 옅은 띠를 깐다.
   행 높이 44px 는 스크롤 스냅 계산(nc-w .pad 55px)과 묶여 있어 따로 못 고침. */
.nc-title{text-align:center;font-size:15px;font-weight:800;color:var(--ink);margin:2px 0 14px}
.nc-wheels{position:relative;display:flex;height:154px;margin-bottom:16px;
  background:var(--surface-2);border-radius:14px;overflow:hidden}
.nc-band{position:absolute;left:8px;right:8px;top:55px;height:44px;border-radius:10px;
  background:var(--surface);pointer-events:none}
.nc-w{flex:1;height:154px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;
  text-align:center;position:relative;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.nc-w::-webkit-scrollbar{display:none}
.nc-w .pad{height:55px}
.nc-w .it{height:44px;line-height:44px;scroll-snap-align:center;font-size:17px;font-weight:700;color:var(--faint)}
.nc-w .it.sel{color:var(--ink);font-weight:800}
/* 숫자를 눌러 직접 치기 — 띠 위 숫자 칸에 겹쳐 띄운다. 굴리는 것과 같은 자리라 자리가 안 옮겨짐. */
.nc-in{position:absolute;left:8px;top:55px;width:calc(50% - 8px);height:44px;border:1.5px solid var(--accent);
  background:var(--surface);color:var(--ink);font:inherit;font-size:17px;font-weight:800;text-align:center;
  border-radius:10px;padding:0;-webkit-appearance:none;appearance:none}
.nc-in:focus{outline:0}
.nc-in[hidden]{display:none}
/* 키보드가 뜨면 다이얼로그를 위로 — 안 그러면 확인 버튼이 가림 */
#ncModal.kb{align-items:flex-start;padding-top:9vh}
.nc-err{font-size:12.5px;font-weight:700;color:var(--accent);text-align:center;margin:-8px 0 12px}
.nc-err[hidden]{display:none}
.nc-in.bad{border-color:var(--accent)}
.nc-acts{display:flex}
.nc-acts .carry-btn{flex:1;padding:12px;margin-left:9px}
.nc-acts .carry-btn:first-child{margin-left:0}

/* 행의 알림 표시 — 시각 뱃지 앞에 종. 개수는 안 붙임(행에서 쓸모가 없음). */
.n-bell{display:inline-flex;align-items:center;color:var(--muted);margin-right:5px;flex:0 0 auto}
.n-bell svg{width:13px;height:13px}

/* 라이선스 줄 — 탭바 바로 위에 고정. 어느 탭이든 항상 보인다. */
/* 왼쪽 정렬 — 오른쪽은 FAB(+) 자리다. 좌우 여백은 FAB의 right 식과 대칭으로 맞춘다. */
.licbar{position:absolute;left:0;right:0;bottom:100%;margin-bottom:10px;
  display:flex;justify-content:flex-start;pointer-events:none;
  padding-left:max(20px, calc(50% - 300px + 20px))}
.licbar[hidden]{display:none}
/* 크기는 앱의 기존 버튼 칩(.vbtn 12.5px)에 맞춘다 — 혼자 크지 않게.
   FAB 옆이라 배경까지 액센트로 채우면 눌러야 할 버튼처럼 읽힌다 → 배경은 낮은 톤, 글자만 액센트. */
.licbar .trial-chip{margin:0;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--surface);color:var(--accent);border:1.5px solid var(--line-strong);box-shadow:var(--shadow)}
.licbar .trial-chip.soon{color:#e23b3b;border-color:#e23b3b}   /* 3일 이하 — 경고색 */

/* 브랜드 줄에 붙는 인라인 배지 — 줄을 늘리지 않아야 우측 버튼 정렬이 안 틀어진다(.mhead는 align-items:center). */
.trial-chip{margin-left:7px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0;white-space:nowrap}
.trial-chip.soon{color:var(--accent)}
.trial-chip[hidden]{display:none}
.licrow b:empty{display:none}

/* ── 구형 WebView 폴백 (Chrome<87 — inset 미지원 엔진 = flex gap(84↓)·button grid 센터링도 대체로 깨짐. 노트8 등 Android 9 폰용) ──
   신형 엔진은 @supports가 걸러 무변화. 84~86만 gap+margin 이중 간격(ponytail: 극소수, 허용). 목록은 모바일 화면에서 눈에 띄는 flex gap만. */
@supports not (inset: 0){

/* GAP-FALLBACK-START (자동 생성 — scripts/gen-gap-fallback.py, 손대지 말 것) */
  .head-top > *{margin-right:16px}
  .head-top > *:last-child{margin-right:0}
  .subrow > *{margin-right:8px}
  .subrow > *:last-child{margin-right:0}
  .head-right > *{margin-right:6px}
  .head-right > *:last-child{margin-right:0}
  .theme-menu > *{margin-bottom:2px}
  .theme-menu > *:last-child{margin-bottom:0}
  .theme-menu button > *{margin-right:11px}
  .theme-menu button > *:last-child{margin-right:0}
  .sync-menu > *{margin-bottom:6px}
  .sync-menu > *:last-child{margin-bottom:0}
  .list > *{margin-bottom:8px}
  .list > *:last-child{margin-bottom:0}
  .item > *{margin-right:9px}
  .item > *:last-child{margin-right:0}
  .toast.undo > *{margin-right:16px}
  .toast.undo > *:last-child{margin-right:0}
  .t-times > *{margin-bottom:2px}
  .t-times > *:last-child{margin-bottom:0}
  .text > *{margin-bottom:2px}
  .text > *:last-child{margin-bottom:0}
  .row-actions > *{margin-right:8px}
  .row-actions > *:last-child{margin-right:0}
  .snz-pop > *{margin-bottom:1px}
  .snz-pop > *:last-child{margin-bottom:0}
  .snz-item > *{margin-right:8px}
  .snz-item > *:last-child{margin-right:0}
  .fab-stack > *{margin-right:12px}
  .fab-stack > *:last-child{margin-right:0}
  .sheet-prio > *{margin-right:10px}
  .sheet-prio > *:last-child{margin-right:0}
  .prio-pick > *{margin-right:8px}
  .prio-pick > *:last-child{margin-right:0}
  .sheet-foot > *{margin-right:8px}
  .sheet-foot > *:last-child{margin-right:0}
  .opt > *{margin-right:9px}
  .opt > *:last-child{margin-right:0}
  .time-chip > *{margin-right:5px}
  .time-chip > *:last-child{margin-right:0}
  .date-row > *{margin-right:6px}
  .date-row > *:last-child{margin-right:0}
  .tp-rep > *{margin-right:6px}
  .tp-rep > *:last-child{margin-right:0}
  .timebtn > *{margin-right:7px}
  .timebtn > *:last-child{margin-right:0}
  .timebtn #schedBtnLabel > *{margin-bottom:4px}
  .timebtn #schedBtnLabel > *:last-child{margin-bottom:0}
  .nl-row > *{margin-right:8px}
  .nl-row > *:last-child{margin-right:0}
  .sched-head > *{margin-right:9px}
  .sched-head > *:last-child{margin-right:0}
  .bmodes > *{margin-right:6px}
  .bmodes > *:last-child{margin-right:0}
  .drow > *{margin-right:5px}
  .drow > *:last-child{margin-right:0}
  .rep-stack > *{margin-bottom:6px}
  .rep-stack > *:last-child{margin-bottom:0}
  .trow2 > *{margin-right:4px}
  .trow2 > *:last-child{margin-right:0}
  .tcol > *{margin-right:2px}
  .tcol > *:last-child{margin-right:0}
  .mw > *{margin-right:1px}
  .mw > *:last-child{margin-right:0}
  .datebar > *{margin-right:7px}
  .datebar > *:last-child{margin-right:0}
  .dbtn > *{margin-right:5px}
  .dbtn > *:last-child{margin-right:0}
  .cal-head > *{margin-right:8px}
  .cal-head > *:last-child{margin-right:0}
  .cal-legend > *{margin-right:5px}
  .cal-legend > *:last-child{margin-right:0}
  .carry-head > *{margin-right:12px}
  .carry-head > *:last-child{margin-right:0}
  .row-main > *{margin-right:9px}
  .row-main > *:last-child{margin-right:0}
  .pop-item > *{margin-right:9px}
  .pop-item > *:last-child{margin-right:0}
  .carry-actions > *{margin-right:9px}
  .carry-actions > *:last-child{margin-right:0}
  .tabbar > *{margin-right:4px}
  .tabbar > *:last-child{margin-right:0}
  .tab > *{margin-bottom:3px}
  .tab > *:last-child{margin-bottom:0}
  .vhead > *{margin-right:9px}
  .vhead > *:last-child{margin-right:0}
  .mhead > *{margin-right:12px}
  .mhead > *:last-child{margin-right:0}
  .mcard > *{margin-right:13px}
  .mcard > *:last-child{margin-right:0}
  .mcard .nxt > *{margin-right:6px}
  .mcard .nxt > *:last-child{margin-right:0}
  .tp-card .r1 > *{margin-right:8px}
  .tp-card .r1 > *:last-child{margin-right:0}
  .tp-card .next > *{margin-right:7px}
  .tp-card .next > *:last-child{margin-right:0}
  .memo-row .meta > *{margin-right:6px}
  .memo-row .meta > *:last-child{margin-right:0}
  .shelf-row.unfiled > *{margin-right:9px}
  .shelf-row.unfiled > *:last-child{margin-right:0}
  .inbox-done > *{margin-right:13px}
  .inbox-done > *:last-child{margin-right:0}
  .idsum > *{margin-right:13px}
  .idsum > *:last-child{margin-right:0}
  .idmon > *{margin-right:10px}
  .idmon > *:last-child{margin-right:0}
  .topic-new > *{margin-right:7px}
  .topic-new > *:last-child{margin-right:0}
  .tv-item > *{margin-right:9px}
  .tv-item > *:last-child{margin-right:0}
  .msel-bar > *{margin-right:9px}
  .msel-bar > *:last-child{margin-right:0}
  .bm-row > *{margin-right:9px}
  .bm-row > *:last-child{margin-right:0}
  .tv-crumbs > *{margin-right:5px}
  .tv-crumbs > *:last-child{margin-right:0}
  .sechead > *{margin-right:7px}
  .sechead > *:last-child{margin-right:0}
  .sub-row > *{margin-right:11px}
  .sub-row > *:last-child{margin-right:0}
  .lgd > *{margin-right:4px}
  .lgd > *:last-child{margin-right:0}
  .tv-charts > *{margin-right:7px}
  .tv-charts > *:last-child{margin-right:0}
  .fcard.month > *{margin-bottom:3px}
  .fcard.month > *:last-child{margin-bottom:0}
  .mm-node > *{margin-right:7px}
  .mm-node > *:last-child{margin-right:0}
  .map-cfm .btns > *{margin-right:8px}
  .map-cfm .btns > *:last-child{margin-right:0}
  .mapbg-pop > *{margin-right:8px}
  .mapbg-pop > *:last-child{margin-right:0}
  .tv-sum > *{margin-right:14px}
  .tv-sum > *:last-child{margin-right:0}
  .tv-sum .nxt > *{margin-right:6px}
  .tv-sum .nxt > *:last-child{margin-right:0}
  .tc-left .r > *{margin-right:8px}
  .tc-left .r > *:last-child{margin-right:0}
  .tc-opt > *{margin-right:10px}
  .tc-opt > *:last-child{margin-right:0}
  .done-fold > *{margin-right:9px}
  .done-fold > *:last-child{margin-right:0}
  .done-row > *{margin-right:9px}
  .done-row > *:last-child{margin-right:0}
  .dl-row > *{margin-right:11px}
  .dl-row > *:last-child{margin-right:0}
  .closed-banner > *{margin-right:9px}
  .closed-banner > *:last-child{margin-right:0}
  .link-row > *{margin-right:8px}
  .link-row > *:last-child{margin-right:0}
  .addlink > *{margin-right:6px}
  .addlink > *:last-child{margin-right:0}
  .pick-card > *{margin-bottom:10px}
  .pick-card > *:last-child{margin-bottom:0}
  .pick-item > *{margin-right:8px}
  .pick-item > *:last-child{margin-right:0}
  .topicrow > *{margin-right:7px}
  .topicrow > *:last-child{margin-right:0}
  .tm-top > *{margin-right:7px}
  .tm-top > *:last-child{margin-right:0}
  .tm-chip > *{margin-right:4px}
  .tm-chip > *:last-child{margin-right:0}
  .tm-acts > *{margin-right:9px}
  .tm-acts > *:last-child{margin-right:0}
  .tm-nt > *{margin-bottom:9px}
  .tm-nt > *:last-child{margin-bottom:0}
  .tm-nt .ck > *{margin-right:10px}
  .tm-nt .ck > *:last-child{margin-right:0}
  .tm-list .row > *{margin-right:10px}
  .tm-list .row > *:last-child{margin-right:0}
  .tm-facts > *{margin-right:8px}
  .tm-facts > *:last-child{margin-right:0}
  .tm-hud > *{margin-right:8px}
  .tm-hud > *:last-child{margin-right:0}
  .rt-chip > *{margin-right:5px}
  .rt-chip > *:last-child{margin-right:0}
  .rtm-card .r1 > *{margin-right:8px}
  .rtm-card .r1 > *:last-child{margin-right:0}
  .rtm-card .r2 > *{margin-right:8px}
  .rtm-card .r2 > *:last-child{margin-right:0}
  .rtm-card .it > *{margin-right:9px}
  .rtm-card .it > *:last-child{margin-right:0}
  .rtr > *{margin-right:10px}
  .rtr > *:last-child{margin-right:0}
  .rts-foot > *{margin-right:8px}
  .rts-foot > *:last-child{margin-right:0}
  .rtp-list > *{margin-bottom:8px}
  .rtp-list > *:last-child{margin-bottom:0}
  .rtp-list button > *{margin-right:8px}
  .rtp-list button > *:last-child{margin-right:0}
  .dn-edit > *{margin-right:7px}
  .dn-edit > *:last-child{margin-right:0}
  .rtm-sum .s2 > *{margin-right:10px}
  .rtm-sum .s2 > *:last-child{margin-right:0}
  .rtd-hm > *{margin-right:4px}
  .rtd-hm > *:last-child{margin-right:0}
  .rtd-head > *{margin-right:9px}
  .rtd-head > *:last-child{margin-right:0}
  .rtd-card .t > *{margin-right:8px}
  .rtd-card .t > *:last-child{margin-right:0}
  .rtd-card .stats > *{margin-right:14px}
  .rtd-card .stats > *:last-child{margin-right:0}
  .rtd-days > *{margin-right:6px}
  .rtd-days > *:last-child{margin-right:0}
  .rtd-hist .row > *{margin-right:8px}
  .rtd-hist .row > *:last-child{margin-right:0}
  .rts-pre > *{margin-right:7px}
  .rts-pre > *:last-child{margin-right:0}
  .rt-suggest .row > *{margin-right:9px}
  .rt-suggest .row > *:last-child{margin-right:0}
  .tm-rt > *{margin-right:8px}
  .tm-rt > *:last-child{margin-right:0}
  .tm-rt .chip > *{margin-right:5px}
  .tm-rt .chip > *:last-child{margin-right:0}
  .pick-newrow > *{margin-right:7px}
  .pick-newrow > *:last-child{margin-right:0}
/* GAP-FALLBACK-END */
  .fab{display:block;padding:16px}   /* button+grid 센터링 버그 우회 — 58px 버튼·26px svg → 패딩 16으로 정중앙 */
  .fab svg{display:block}
  .mic,.nl-mic{display:block;position:relative}   /* 가변 크기 버튼은 절대좌표 센터링(등록창 마이크 등) */
  .mic svg,.nl-mic svg{position:absolute;top:50%;left:50%;margin:-9.5px 0 0 -9.5px}
  .theme-menu button i{margin-right:11px}   /* 색 견본 뒤는 텍스트 노드라 > * + * 마진이 안 먹음 — 견본에 직접 */
  button:focus,[tabindex]:focus,a:focus{outline:none}   /* :focus-visible(86+) 없던 시절 — 탭 후 삼성 주황 포커스 상자가 눌어붙는 것 제거(터치 기기라 키보드 포커스 표시 손실 없음) */
  :root{--nc-green:#39754e}   /* color-mix(111+) 미지원 구형 — 링·완료 카드가 투명해지지 않게 근사 고정색(#3f8f5e 76% + 종이 잉크 24%) */
  [data-theme="dark"]{--nc-green:#6aa680}   /* 다크는 잉크가 밝아 초록도 밝게 — 어두운 고정 초록은 다크 배경에서 2.8:1로 깨진다(1255줄 --on-accent 교훈) */
  @media (prefers-color-scheme: dark){ :root:not([data-theme]){--nc-green:#6aa680} }
}

/* ── 좁은 화면(≤380px CSS) 헤더 축소 — 360px급 폰(노트8·A시리즈 등)에서 날짜·아이콘 줄이 안 깨지게. 411px(S25 등)은 무변화 ── */
@media (max-width:380px){
  .head-top{gap:10px}
  .eyebrow{font-size:12px;white-space:nowrap}
  .date{font-size:31px;white-space:nowrap}
  .date .dsuffix{font-size:14px;margin-left:6px}
  .theme-btn,.home-btn,.sync-btn{width:34px;height:34px;border-radius:10px}
  .head-right{gap:4px}
  .ring{width:44px;height:44px}
  .ring svg{width:44px;height:44px}
  .ring-fg{stroke-dasharray:119.4}   /* viewBox 44 기준 r19 둘레 그대로 — 크기만 축소 */
  @supports not (inset:0){
    .head-right > * + *{margin-left:4px}
  }
}

/* ── 횟수형 할일(하루 N회) — count-task.html A-2 + count-task-form.html 확정 (2026-07-18) ── */
.state.cntst{border-color:transparent}   /* 테두리 자리는 SVG 진행 링이 대신 */
.cring{position:absolute;top:-2px;left:-2px;width:28px;height:28px}   /* 12시 시작 회전은 SVG 속성 rotate(-90 14 14) — CSS transform은 구형 엔진에서 회전 중심이 좌상단이라 링이 밀림 */
.cring .crt{fill:none;stroke:var(--line-strong);stroke-width:2.4}
.cring .crp{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:80.4;transition:stroke-dashoffset .3s}
.cnum{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:4px 0 0 4px;font-size:15px;color:var(--ink);line-height:1;pointer-events:none}   /* Inter 고정 후 실측 잉크가 링 중심보다 좌·상 2CSSpx → pl4·pt4(각 +2)로 상쇄. 폰트 고정이라 전 기종 동일 보정 */
.cnum b{font-weight:800;font-family:'Inter',sans-serif}   /* 숫자 폰트 고정 — 기종별 시스템 폰트 차이(잉크 쏠림)를 없애 보정 하나로 전 기종 정렬(기종별 튜닝 금지) */
.cnum i{font-style:normal;font-size:7.5px;font-weight:700;margin-right:.5px}
.cnum b.d2{font-size:11px}   /* 두 자리(10~99)는 축소해 원 안에 */
/* 등록창 ×N 버튼(.mic 규격 공유) + 스테퍼 팝 */
.cnt-btn{font-size:15px;font-weight:800;color:var(--muted);font-family:inherit}
.cnt-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cnt-btn:disabled{opacity:.4;cursor:default}   /* 완료한 할일 — 횟수를 바꾸면 완료 기록이 지워지므로 잠근다(바꾸려면 체크부터 푼다) */
.sheet-foot{position:relative}
.cnt-pop{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);z-index:6;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-lg);padding:5px;display:flex;align-items:center}
.cnt-pop[hidden]{display:none}
.cnt-pop button{width:40px;height:38px;border:0;background:transparent;font-size:19px;font-weight:800;color:var(--accent);cursor:pointer;font-family:inherit}
.cnt-pop .cp-v{font-size:14.5px;font-weight:800;min-width:38px;text-align:center}

/* ── 주제 색 ── 주제가 자기 색을 들고 다닌다(topic.color). 헤더 색 점 탭 = 팔레트 */
/* 주제 색 = 헤더 오른쪽 책갈피. 위 8px은 어둡게(걸쳐 접힌 면), 아래 끝은 V로 파임 */
#view-topic .vhead{position:relative}
.tv-bm{position:absolute;top:0;right:12px;width:36px;height:58px;border:0;padding:0;cursor:pointer;
  -webkit-clip-path:polygon(0 0,100% 0,100% 100%,50% 66%,0 100%);clip-path:polygon(0 0,100% 0,100% 100%,50% 66%,0 100%)}
.cpop{padding:11px}
.cgrid{display:grid;grid-template-columns:repeat(6,30px);gap:9px}
.cdot{width:30px;height:30px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;font-family:inherit;color:#fff;transition:transform .12s}
.cdot:active{transform:scale(.9)}
.cdot.on{border-color:var(--ink)}
.cpick{background:var(--surface-2);color:var(--muted);border:1.5px dashed var(--line-strong);font-size:15px;font-weight:800;line-height:1}
.clabel{font-size:11.5px;font-weight:700;color:var(--muted);margin:12px 0 7px}
.cclear{border:0;background:transparent;color:var(--accent);font-size:11.5px;font-weight:700;padding:0;cursor:pointer;font-family:inherit}
.cinput{position:absolute;left:11px;bottom:11px;width:1px;height:1px;opacity:0;border:0;padding:0}
/* 주제 태그 — 카드 우상단 코너(반복 배지의 좌상단과 대칭). 높이 13px = 체크 원(14px)·시간 칩(13px) 위를 안 침범 */
.tp-tag{position:absolute;top:0;right:0;font-size:11px;font-weight:700;line-height:1;color:#fff;
  text-shadow:0 1px 1.5px rgba(0,0,0,.6);   /* 주제 색이 밝아도 흰 글자가 읽히게 */
  border-radius:0 13px 0 9px;padding:1px 8px;white-space:nowrap;cursor:pointer}
.item.done .tp-tag,.item.carried .tp-tag{opacity:.5}
/* 주제 피커 — 「아래에 소주제로」 구역 구분줄과 행 끝 ＋ */
.pick-sep{font-size:11px;font-weight:700;color:var(--faint);padding:12px 4px 6px;border-top:1px solid var(--line);margin-top:6px}
.pick-add{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;padding:0;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-size:16px;font-weight:800;line-height:1;margin-left:8px;cursor:pointer;font-family:inherit}
.pick-item.pick-new{color:var(--accent);font-weight:700}   /* 「＋ 새 주제 만들기」 = 만드는 동작이라 강조 */
/* ＋ 누르면 그 자리에 뜨는 이름 입력 줄 */
.pick-newrow{display:flex;align-items:center;gap:7px;padding:6px 9px 10px}
.pick-newrow input{flex:1;min-width:0;border:1.5px solid var(--accent);border-radius:10px;background:var(--surface);padding:8px 11px;font-size:14px;font-family:inherit;color:var(--ink);outline:none}
.pick-newrow button{flex:0 0 auto;border:0;background:var(--accent);color:#fff;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer}
/* 날짜 칩 — 주제 화면처럼 여러 날짜가 섞이는 목록에서만(오늘 목록은 그 날짜만 보므로 없음) */
.d-chip{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--faint);white-space:nowrap;margin-left:2px}
.d-chip.today{color:var(--accent)}
.d-chip.past{color:#e23b3b}
.d-chip.none{color:var(--muted);border:1.5px solid var(--line-strong);border-radius:7px;padding:1px 6px}