/* ===== iOS 스타일 UI (SF Pro · 시스템 색 · Inset Grouped) ===== */
:root {
  /* iOS 시스템 색 */
  --ios-blue:   #007AFF;
  --ios-red:    #FF3B30;
  --ios-green:  #34C759;
  --ios-orange: #FF9500;
  --ios-yellow: #FFCC00;
  --ios-purple: #AF52DE;
  --ios-pink:   #FF2D55;

  --bg:       #F2F2F7;   /* systemGroupedBackground */
  --surface:  #FFFFFF;   /* secondarySystemGroupedBackground */
  --ink:      #000000;   /* label */
  --ink-soft: #6C6C70;   /* secondaryLabel */
  --ink-mute: #A1A1A6;   /* tertiaryLabel */
  --line:     #D1D1D6;   /* separator */
  --fill:     rgba(120,120,128,.12);   /* systemFill */
  --sel:      var(--ios-blue);
  --sun:      var(--ios-red);
  --sat:      var(--ios-blue);

  --r-sm: 8px;
  --r:    12px;   /* iOS 카드 */
  --r-lg: 18px;   /* 시트 */

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Pretendard", "Apple SD Gothic Neo", system-ui, "Segoe UI",
               "Malgun Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ios-blue:   #0A84FF;
    --ios-red:    #FF453A;
    --ios-green:  #30D158;
    --ios-orange: #FF9F0A;
    --ios-yellow: #FFD60A;
    --ios-purple: #BF5AF2;
    --ios-pink:   #FF375F;

    --bg:       #000000;
    --surface:  #1C1C1E;
    --ink:      #FFFFFF;
    --ink-soft: #98989F;
    --ink-mute: #6B6B70;
    --line:     #38383A;
    --fill:     rgba(120,120,128,.24);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.47;
  letter-spacing: -.01em;       /* SF Pro 특유의 타이트한 자간 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hidden { display: none !important; }
button {
  font-family: inherit; cursor: pointer; border: none; background: none; color: inherit;
  touch-action: manipulation; /* iOS 더블탭 확대 방지 → 연속 체크가 빨라짐 */
}
input, select, textarea {
  font-family: inherit; font-size: 16px; color: var(--ink);
  letter-spacing: -.01em;
}
/* iOS: 누르면 살짝 흐려지는 반응 */
button:active { opacity: .55; }

/* ===== 로그인 ===== */
.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); }
.login-card { width: 300px; text-align: center; }
.login-screen { background: var(--bg); }
.login-emoji {
  width: 72px; height: 72px; margin: 0 auto; border-radius: 17px;   /* iOS 앱 아이콘 곡률 */
  background: var(--ios-blue); color: #fff;
  font-size: 36px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ios-blue) 30%, transparent);
}
.login-card h1 { font-size: 28px; font-weight: 700; margin: 20px 0 4px; letter-spacing: -.03em; }
.login-sub { color: var(--ink-soft); font-size: 15px; margin-bottom: 24px; }
.login-card input {
  width: 100%; padding: 14px 16px; border: none; border-radius: var(--r);
  background: var(--surface); margin-bottom: 12px; outline: none; text-align: center;
  font-size: 17px;
}
.login-card button {
  width: 100%; padding: 15px; background: var(--ios-blue); color: #fff;
  border-radius: var(--r); font-weight: 600; font-size: 17px; letter-spacing: -.02em;
}
.login-err { color: var(--sun); font-size: 13px; margin-top: 12px; }

/* ===== 폰 프레임 ===== */
.app { display: flex; justify-content: center; min-height: 100vh; }
.phone {
  width: 100%; max-width: 520px; min-height: 100vh;
  min-height: 100dvh; /* iOS Safari 주소창 수축 대응 */
  background: var(--bg);
  display: flex; flex-direction: column;
  position: relative;
  padding-top: env(safe-area-inset-top); /* 노치 안전영역 */
}
.view {
  flex: 1; overflow-y: auto;
  padding: 20px 20px calc(90px + env(safe-area-inset-bottom));
}

/* ===== 달력 ===== */
.cal {
  margin-bottom: 18px; background: var(--surface);
  border-radius: var(--r); padding: 14px 12px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.cal-nav { display: flex; align-items: center; gap: 2px; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; color: var(--ios-blue); font-size: 20px; }
.icon-btn:active { background: var(--fill); opacity: 1; }
.today-btn {
  font-size: 13px; font-weight: 500; color: var(--ios-blue);
  background: var(--fill); border: none; border-radius: 100px; padding: 5px 12px;
}

.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-weekdays span { text-align: center; font-size: 11px; color: var(--ink-mute); padding: 3px 0 6px; font-weight: 600; }
.cal-weekdays .wd-sat { color: var(--sat); }
.cal-weekdays .wd-sun { color: var(--sun); }
.cal-grid { row-gap: 6px; }

.cal-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 2px 0 5px; border-radius: 10px; cursor: pointer;
}
.cal-cell.empty { cursor: default; }

.cal-cell .num {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 15px; font-weight: 500;
  transition: background .12s;
}
.cal-cell:not(.empty):hover .num { background: var(--fill); }
.cal-cell.sat .num { color: var(--sat); }
.cal-cell.sun .num { color: var(--sun); }
.cal-cell.today .num { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.cal-cell.selected .num { background: var(--sel); color: var(--surface); font-weight: 700; box-shadow: none; }

/* ===== 주간 점수판 ===== */
.week-board {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 2px 10px;
}
.wb-label { font-size: 11px; font-weight: 700; color: var(--ink-mute); margin-right: 2px; }
.wb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--bg); border-radius: 8px; padding: 3px 8px;
}
.wb-chip i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }

/* ===== 날짜 헤더 ===== */
.day-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 2px 10px; border-top: 1px solid var(--line);
}
.day-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.day-progress { font-size: 12px; color: var(--ink-soft); }

/* ===== 카테고리 그룹 — iOS Inset Grouped 리스트 ===== */
.cat-group { margin-bottom: 22px; }
.cat-group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 7px; /* 그룹 헤더는 카드 바깥 */
}
/* 할 일 묶음을 하나의 흰 카드로 */
.cat-group > .todo-list,
.sub-group > .todo-list {
  background: var(--surface); border-radius: var(--r); overflow: hidden;
}
.cat-group > .todo-list:empty, .sub-group > .todo-list:empty { display: none; }
.cat-group > .todo-list > .todo-item,
.sub-group > .todo-list > .todo-item { padding: 0 16px; }

.cat-label {
  font-size: 13px; font-weight: 600; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  padding: 3px 10px; border-radius: 100px; letter-spacing: -.01em;
  cursor: grab;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.cat-label:active { cursor: grabbing; }
.cat-group.dragging {
  opacity: .6;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.cat-plus { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; color: var(--ink-mute); font-size: 17px; font-weight: 300; }
.cat-plus:hover { background: var(--line); color: var(--ink-soft); }

.todo-list { list-style: none; }

/* 소 카테고리 섹션 */
.sub-group { margin: 2px 0 6px 14px; }
.sub-group-head { display: flex; align-items: center; gap: 7px; padding: 3px 2px; }
.sub-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.sub-label { font-size: 12px; font-weight: 800; color: var(--c); letter-spacing: -.2px; }

/* 하위 할 일 (들여쓰기) */
.todo-item.child .sw-inner { padding-left: 29px; }
.todo-item.child .todo-check { width: 19px; height: 19px; font-size: 11px; }
.todo-item.child .todo-text { font-size: 13.5px; }
.inline-add.child { margin-left: 29px; }
.todo-substat { font-size: 11px; font-weight: 700; color: var(--ink-mute); flex-shrink: 0; }
.todo-addsub {
  color: var(--ink-mute); font-size: 15px; font-weight: 300;
  opacity: 0; transition: opacity .15s; padding: 2px 4px; position: relative;
}
.todo-addsub::after { content: ""; position: absolute; inset: -9px -4px; }
.todo-addsub:hover { color: var(--ink-soft); }
.todo-item:hover .todo-addsub { opacity: 1; }

/* 스와이프 편집 공통 구조 */
.sw-inner {
  flex: 1; display: flex; align-items: center; gap: 10px;
  min-width: 0; transition: transform .18s ease;
}
.sw-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.todo-item { display: flex; align-items: center; position: relative; }
.todo-item .sw-inner { padding: 11px 0; min-height: 44px; }  /* iOS 44pt 행 */

/* ===== 드래그앤드롭 (순서 · 분류 이동) ===== */
.todo-grip {
  position: absolute; left: -15px; top: 50%; transform: translateY(-50%);
  font-size: 12px; line-height: 1; color: var(--ink-mute);
  opacity: 0; transition: opacity .15s; cursor: grab;
  padding: 4px 2px; user-select: none; -webkit-user-select: none;
}
.todo-grip::after { content: ""; position: absolute; inset: -9px -7px; }
.todo-grip:active { cursor: grabbing; }
.todo-item:hover .todo-grip { opacity: .55; }
.todo-grip:hover { opacity: 1 !important; color: var(--ink-soft); }
/* 폰: 호버가 없으니 항상 옅게 보여 주고 손가락 잡기 좋게 키운다 */
@media (hover: none) {
  .todo-grip { opacity: .3; left: -14px; font-size: 13px; }
  .todo-grip::after { inset: -12px -10px; }
}

.todo-item.dragging {
  opacity: .65; background: var(--bg); border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}
/* 끄는 동안엔 빈 분류도 드롭할 수 있게 자리를 남겨 둔다 */
body.todo-dragging .cat-group.empty { opacity: 1; }
body.todo-dragging .todo-list { min-height: 14px; }
body.todo-dragging .todo-text { pointer-events: none; }
/* iOS 원형 체크 (미리알림 앱 스타일) */
.todo-check {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  border: 1.6px solid var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
  transition: background .15s, border-color .15s, transform .12s;
  position: relative;
}
.todo-check:active { transform: scale(.88); opacity: 1; }
/* 시각 크기는 그대로, 탭 히트 영역만 확장 (애플 44pt 권장) */
.cat-plus, .icon-btn, .mood-pick button, .hdot, .todo-del, .todo-defer { position: relative; }
.todo-check::after { content: ""; position: absolute; inset: -12px -8px -12px -12px; }
.cat-plus::after, .icon-btn::after { content: ""; position: absolute; inset: -8px; }
.mood-pick button::after { content: ""; position: absolute; inset: -5px -2px; }
.hdot::after { content: ""; position: absolute; inset: -4px -2px; }
.todo-del::after, .todo-defer::after { content: ""; position: absolute; inset: -9px -4px; }
.todo-item.done .todo-check { background: var(--c); border-color: var(--c); }
.todo-text { flex: 1; outline: none; font-size: 16px; letter-spacing: -.02em; }
.todo-item.done .todo-text { color: var(--ink-mute); }
.todo-item.done .todo-check { color: #fff; }
.todo-rec-badge { font-size: 11px; color: var(--ink-mute); }
.todo-del { color: var(--ink-mute); font-size: 15px; opacity: 0; transition: opacity .15s; padding: 2px 4px; }
.todo-defer { color: var(--ink-mute); font-size: 15px; font-weight: 700; opacity: 0; transition: opacity .15s; padding: 2px 4px; }
.todo-defer:hover { color: var(--sat); }
.todo-item:hover .todo-del, .todo-item:hover .todo-defer { opacity: 1; }

/* 폰: 편집 버튼은 평소 숨김 → 꾹 누르고 옆으로 밀면 나타남 */
@media (hover: none) {
  .sw-actions {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    opacity: 0; pointer-events: none; transition: opacity .15s;
  }
  .sw-actions button { opacity: 1 !important; }
  .sw-row { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  /* 글자 수정(contenteditable)은 iOS에서 선택 가능해야 커서가 놓임 */
  .sw-row .todo-text, .sw-row .gt-text, .sw-row .rec-content {
    -webkit-user-select: text; user-select: text;
  }
  .sw-row.armed .sw-inner { opacity: .7; }
  .sw-row.open .sw-actions { opacity: 1; pointer-events: auto; }
  /* 폰에서 편집 버튼 자체도 탭하기 쉽게 */
  .sw-actions button { min-width: 34px; min-height: 34px; font-size: 17px; }
}

.defer-all {
  margin-left: auto; font-size: 11.5px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px;
}
.defer-all:hover { color: var(--sat); border-color: var(--sat); }

/* 인라인 추가 입력 */
.inline-add { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.inline-add .box { width: 19px; height: 19px; border-radius: 6px; border: 1.8px dashed var(--ink-mute); flex-shrink: 0; }
.inline-add input { flex: 1; border: none; outline: none; background: transparent; font-size: 14.5px; padding: 2px 0; }
.inline-add input::placeholder { color: var(--ink-mute); }

.empty-hint { color: var(--ink-mute); font-size: 13px; padding: 4px 2px 2px 31px; }

/* ===== 새 카테고리 ===== */
.newcat { padding: 4px 2px 14px; }
.newcat-toggle { font-size: 13px; color: var(--ink-mute); font-weight: 600; padding: 4px 2px; }
.newcat-toggle:hover { color: var(--ink-soft); }
.newcat-form { display: flex; gap: 8px; align-items: center; padding-top: 6px; flex-wrap: wrap; }
.newcat-form select {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  background: var(--surface); outline: none; font-size: 13px; color: var(--ink);
}
.newcat-form input[type=text] {
  flex: 1; border: none; border-bottom: 1.5px solid var(--line);
  background: transparent; outline: none; padding: 6px 2px; font-size: 14px;
}
.newcat-form input[type=text]:focus { border-color: var(--ink-soft); }
.newcat-form button { font-size: 13px; font-weight: 700; color: var(--surface); background: var(--ink); border-radius: 8px; padding: 6px 12px; }
input[type=color] {
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px;
  background: none; cursor: pointer; flex-shrink: 0;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 1px solid var(--line); border-radius: 8px; }

/* ===== 일기 ===== */
.diary { border-top: 1px solid var(--line); padding-top: 14px; }
.diary-head { font-size: 13px; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mood-pick { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.mood-label { font-size: 11px; font-weight: 600; color: var(--ink-mute); margin-right: 2px; }
.mood-pick button {
  width: 24px; height: 24px; border-radius: 50%; font-size: 11.5px; font-weight: 700;
  border: 1.5px solid var(--line); color: var(--ink-mute);
}
.mood-pick button.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.diary-saved { font-size: 11px; color: var(--sat); font-weight: 500; opacity: 0; transition: opacity .3s; }
.diary-saved.show { opacity: 1; }
.diary textarea {
  width: 100%; min-height: 110px; resize: vertical;
  border: none; outline: none; background: transparent;
  line-height: 1.7; font-size: 14px;
}
.diary textarea::placeholder { color: var(--ink-mute); }

/* ===== 페이지 공통 ===== */
.page-head h2 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.page-head p { font-size: 14px; color: var(--ink-soft); }
.page-head { margin-bottom: 20px; }
.page-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.page-head p { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* ===== 목표 ===== */
.goal-col { margin-bottom: 26px; }
.goal-col-head {
  font-size: 13px; font-weight: 800; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  display: inline-block; padding: 2px 9px; border-radius: 7px; margin-bottom: 6px;
}
.goal-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }

/* 목표 카드 (프로젝트) */
.goal-card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px 8px;
}
.goal-card.done { opacity: .55; }
.goal-row { display: flex; align-items: center; gap: 10px; }
.goal-row .todo-check { border-radius: 50%; border-color: var(--c); }
.goal-card.done .goal-row .todo-check { background: var(--c); border-color: var(--c); }
.goal-title { flex: 1; outline: none; font-size: 14.5px; font-weight: 700; }
.goal-card.done .goal-title { color: var(--ink-mute); }
.goal-dday {
  font-size: 11.5px; font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border-radius: 7px; padding: 3px 8px; flex-shrink: 0;
}
.goal-dday.empty { background: none; opacity: .35; font-size: 13px; }
.goal-dday.empty:hover { opacity: .8; }
.goal-date-input { font-size: 12px; border: 1px solid var(--line); border-radius: 7px; padding: 2px 6px; background: var(--surface); color: var(--ink); }
.goal-card .todo-del { opacity: 0; }
.goal-card:hover .todo-del { opacity: .5; }

/* 진행 바 */
.goal-prog-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px 2px 31px; }
.goal-prog { flex: 1; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.goal-bar { height: 100%; border-radius: 4px; background: var(--c); transition: width .25s; }
.goal-pct { font-size: 11px; font-weight: 600; color: var(--ink-soft); flex-shrink: 0; }

/* 하위 작업 */
.gt-list { list-style: none; padding: 6px 0 0 31px; }
.gt-item { display: flex; align-items: center; position: relative; }
.gt-item .sw-inner { padding: 5px 0; gap: 9px; }
.gt-item .todo-check { width: 16px; height: 16px; border-radius: 5px; font-size: 10px; border-color: var(--ink-mute); }
.gt-item.done .todo-check { background: var(--ink-soft); border-color: var(--ink-soft); }
.gt-text { flex: 1; outline: none; font-size: 13.5px; }
.gt-item.done .gt-text { color: var(--ink-mute); }
.gt-today {
  font-size: 10.5px; color: var(--ink-mute); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; opacity: 0; transition: opacity .15s;
}
.gt-item:hover .gt-today { opacity: 1; }
.gt-today:hover { color: var(--sat); border-color: var(--sat); }
.gt-item .todo-del { opacity: 0; }
.gt-item:hover .todo-del { opacity: .5; }
.gt-add input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 12.5px; padding: 6px 0 4px 31px; color: var(--ink);
}
.gt-add input::placeholder { color: var(--ink-mute); }
.goal-add input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 14px; padding: 7px 2px; color: var(--ink);
}
.goal-add input::placeholder { color: var(--ink-mute); }

/* ===== 습관 ===== */
.habit-card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 14px 11px; margin-bottom: 10px;
}
.habit-card.inactive { opacity: .55; }
.habit-row { display: flex; align-items: center; gap: 11px; }
.habit-emoji { font-size: 20px; flex-shrink: 0; }
.habit-main { flex: 1; min-width: 0; }
.habit-text { font-size: 14.5px; font-weight: 700; }
.habit-sub { display: flex; gap: 8px; font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; flex-wrap: wrap; }
.habit-weekcnt { font-weight: 700; color: var(--sat); }
.habit-today {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--ink-mute);
  color: #fff; font-size: 16px; font-weight: 800;
  transition: background .12s, border-color .12s;
}
.habit-today.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.habit-start {
  font-size: 12px; font-weight: 700; color: var(--sat);
  border: 1px solid var(--sat); border-radius: 8px; padding: 5px 10px; flex-shrink: 0;
}
.habit-menu { color: var(--ink-mute); font-size: 13px; padding: 2px 4px; flex-shrink: 0; }

.habit-grid { display: flex; gap: 4px; margin: 10px 0 0 31px; flex-wrap: wrap; }
.hdot {
  width: 14px; height: 14px; border-radius: 5px;
  background: var(--line); padding: 0;
}
.hdot.on { background: var(--ink); }
.hdot.today { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.hdot.today.on { box-shadow: none; }
.habit-warn {
  margin: 8px 0 0 31px; font-size: 12px; font-weight: 700; color: var(--sun);
}

/* ===== 목표: 모드 토글 · 에픽 배지 · 기간 ===== */
.goal-mode {
  display: inline-flex; gap: 2px; margin-bottom: 18px;
  background: var(--fill); border-radius: 9px; padding: 2px;
}
.goal-mode button {
  font-size: 13px; font-weight: 500; color: var(--ink);
  border: none; border-radius: 7px; padding: 6px 16px; letter-spacing: -.01em;
  transition: background .18s, box-shadow .18s;
}
.goal-mode button.on {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
}
.goal-mode button:active { opacity: 1; }
.epic-badge {
  font-size: 10px; font-weight: 800; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 5px; padding: 1px 5px; flex-shrink: 0; letter-spacing: .3px;
}
.goal-date-edit, .gt-date-edit {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-soft);
}
.gt-date-edit { padding: 4px 0 8px 31px; list-style: none; }
.goal-date-edit input, .gt-date-edit input {
  font-size: 12px; border: 1px solid var(--line); border-radius: 7px;
  padding: 3px 6px; background: var(--surface); color: var(--ink);
}
.goal-date-edit .ok, .gt-date-edit .ok {
  font-size: 11.5px; font-weight: 700; color: var(--surface);
  background: var(--ink); border-radius: 7px; padding: 4px 9px;
}
.gt-range { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); background: var(--bg); border-radius: 6px; padding: 1px 6px; flex-shrink: 0; }
.gt-date { font-size: 13px; opacity: 0; transition: opacity .15s; padding: 2px 4px; position: relative; }
.gt-date::after { content: ""; position: absolute; inset: -9px -4px; }
.gt-item:hover .gt-date { opacity: 1; }

/* ===== 타임라인 (간트) ===== */
.tl-filters { display: flex; gap: 6px; margin-bottom: 12px; }
.tl-chip {
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px;
}
.tl-chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tl-scroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}
.tl-canvas { position: relative; }
.tl-bg { position: absolute; top: 0; bottom: 0; z-index: 0; }
.tl-we { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ink-mute) 7%, transparent); }
.tl-today-col { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, #eda85f 13%, transparent); border-left: 2px solid #eda85f; }
.tl-row { display: flex; position: relative; z-index: 1; border-bottom: 1px solid var(--line); }
.tl-row:last-child { border-bottom: none; }
.tl-name {
  width: 136px; flex-shrink: 0; position: sticky; left: 0; z-index: 3;
  background: var(--surface); border-right: 1px solid var(--line);
  font-size: 12px; padding: 8px 8px 8px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
}
.tl-head { background: var(--surface); position: sticky; top: 0; z-index: 4; }
.tl-head .tl-cells { height: 34px; position: relative; }
.tl-day {
  position: absolute; top: 0; bottom: 0; font-size: 10px; color: var(--ink-mute);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.tl-day b { font-size: 9px; color: var(--ink-soft); }
.tl-day.today { color: #d9924a; font-weight: 800; }
.tl-term .tl-name { font-weight: 800; font-size: 11.5px; }
.tl-term { background: var(--bg); }
.tl-term .tl-name { background: var(--bg); }
.tl-epicname { cursor: pointer; font-weight: 700; }
.tl-fold { color: var(--ink-mute); font-size: 10px; }
.tl-ename.done { color: var(--ink-mute); text-decoration: line-through; }
.tl-pct { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--ink-mute); }
.tl-taskname { padding-left: 24px; color: var(--ink-soft); }
.tl-taskname.done { color: var(--ink-mute); text-decoration: line-through; }
.tl-taskname.nodate { opacity: .55; }
.tl-cells { position: relative; height: 36px; flex-shrink: 0;
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 24px);
}
.tl-bar {
  position: absolute; top: 9px; height: 18px; border-radius: 6px;
  background: color-mix(in srgb, var(--bc) 55%, transparent);
  border: 1.5px solid var(--bc);
}
.tl-bar.epic { top: 7px; height: 22px; border-radius: 8px; background: color-mix(in srgb, var(--bc) 30%, transparent); }
.tl-bar.done { background: var(--bc); }
.tl-bar.done::after { content: "✓"; color: #fff; font-size: 10px; font-weight: 800; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.tl-bar.late { border-color: var(--sun); box-shadow: 0 0 0 1px var(--sun) inset; }
.tl-mile { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; }
.tl-mile.sm { font-size: 10px; }
.tl-mile.late { color: var(--sun) !important; }
.tl-hint { font-size: 11.5px; color: var(--ink-mute); margin-top: 10px; }
.tl-bar.seg { border-width: 1px; border-radius: 4px; }
.tl-bar.seg.done { background: var(--bc) !important; }
.gt-date-edit.stacked { display: block; }
.gt-date-line { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.gt-date-line .gst { flex: 1; min-width: 0; }
.gt-date-edit .preset {
  font-size: 11px; font-weight: 700; color: var(--sat);
  border: 1px solid var(--sat); border-radius: 7px; padding: 3px 8px; flex-shrink: 0;
}
.gt-stage-hint { font-size: 10.5px; color: var(--ink-mute); }

/* ===== 반복 ===== */
.rec-add { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.rec-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rec-add select, .rec-add input[type=text] {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  background: var(--surface); outline: none;
}
.rec-add input[type=text] { flex: 1; min-width: 140px; }
.weekday-pick { display: flex; gap: 4px; }
.weekday-pick button {
  width: 30px; height: 30px; border-radius: 50%; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.weekday-pick button.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
button.primary { background: var(--ink); color: var(--surface); border-radius: 10px; padding: 8px 16px; font-weight: 700; font-size: 13.5px; margin-left: auto; }

.rec-list { list-style: none; }
.rec-item { display: flex; align-items: center; position: relative; border-bottom: 1px solid var(--line); }
.rec-item .sw-inner { padding: 10px 2px; }
.rec-item .todo-del { opacity: .5; }
.rec-when { font-size: 11.5px; color: var(--ink-soft); background: var(--bg); padding: 3px 8px; border-radius: 7px; flex-shrink: 0; }
.rec-item.paused .rec-content, .rec-item.paused .rec-when, .rec-item.paused .pill-tag { opacity: .4; }
.rec-pause { font-size: 13px; color: var(--ink-soft); padding: 2px 4px; }
.rec-content { flex: 1; font-size: 14.5px; }
.pill-tag { font-size: 12px; font-weight: 700; color: var(--c); }

/* ===== 플레이북 ===== */
.pb-group { margin-bottom: 26px; }
.pb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pb-title {
  font-size: 13px; font-weight: 800; color: var(--ink);
  background: var(--bg); padding: 2px 9px; border-radius: 7px;
}
.pb-count { font-size: 11.5px; color: var(--ink-soft); }
.pb-send { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px; }
.pb-send:hover { color: var(--sat); border-color: var(--sat); }
.pb-reset { font-size: 11.5px; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px; }
.pb-reset:hover { color: var(--ink-soft); }
.pb-list { list-style: none; }
.pb-list .todo-item.done .todo-check { background: var(--ink-soft); border-color: var(--ink-soft); }
.pb-add input {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 13.5px; padding: 6px 2px 2px 31px; color: var(--ink);
}
.pb-add input::placeholder { color: var(--ink-mute); }

/* ===== 카테고리 관리 ===== */
.cat-list { list-style: none; }
.cat-item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.cat-item .cat-name { flex: 1; outline: none; font-size: 14.5px; font-weight: 600; }
.cat-item .todo-del { opacity: .5; } /* 관리 화면은 항상 표시 */
.cat-item.sub { margin-left: 26px; }
.cat-item.sub::before { content: "└"; color: var(--ink-mute); font-size: 12px; }
.cat-manage-foot { margin-top: 30px; }
.ghost-btn {
  font-size: 15px; font-weight: 500; color: var(--ios-blue);
  background: var(--fill); border: none; border-radius: 100px; padding: 9px 18px;
}

/* ===== 탭바 ===== */
/* iOS 탭바 — 반투명 블러 + 0.5px 헤어라인 */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px;
  display: flex;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding: 5px 0 max(8px, env(safe-area-inset-bottom));
  z-index: 100;
}
.tabbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; transform: scaleY(.5); transform-origin: top;
  background: var(--line);
}
.tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 500; color: var(--ink-mute); padding: 4px 0;
  letter-spacing: 0;
}
/* SF Symbols 풍 선형 아이콘 — 선택 시 굵어지고 파랗게 */
.tab-btn .tab-ico { display: flex; align-items: center; justify-content: center; height: 26px; }
.tab-btn .tab-ico svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
  transition: stroke-width .15s;
}
.tab-btn.active { color: var(--ios-blue); font-weight: 600; }
.tab-btn.active .tab-ico svg { stroke-width: 2.4; }
.tab-btn:active { opacity: 1; }
.tab-btn:active .tab-ico svg { transform: scale(.9); }
.tab-btn { border-radius: 14px; }
.tab-btn:focus { outline: none; }
.tab-btn:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--ios-blue) 10%, transparent);
}

/* ===== 데스크톱: 2단 레이아웃 (투두메이트 웹) ===== */
@media (min-width: 900px) {
  .phone { max-width: 1320px; box-shadow: none; }
  /* 넓은 화면에선 iPadOS 처럼 아래에 떠 있는 둥근 바 (각진 네모 대신) */
  .tabbar {
    max-width: 560px;
    bottom: max(16px, env(safe-area-inset-bottom));
    border-radius: 26px;
    padding: 6px 8px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    box-shadow: 0 8px 28px rgba(0,0,0,.13), 0 1px 3px rgba(0,0,0,.07);
    border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  }
  .tabbar::before { display: none; }   /* 떠 있으면 상단 헤어라인 불필요 */
  .tab-btn { border-radius: 20px; padding: 6px 0; }
  .view { padding: 36px 48px 90px; }

  #view-daily {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 64px;
    align-items: start;
  }
  .cal-panel { position: sticky; top: 36px; }
  .cal-grid { row-gap: 8px; }
  .day-head { border-top: none; padding-top: 0; }

  /* 다른 탭은 가운데 좁게 */
  #view-goals, #view-recurring, #view-playbook, #view-categories, #view-habits, #view-stats, #view-menu {
    max-width: 640px; margin: 0 auto; width: 100%;
  }
  #view-planner { max-width: 900px; margin: 0 auto; width: 100%; }

  /* 플래너 탭: 표는 넓게 쓰되 노션처럼 좌·우·상단 여백을 두고 가운데로.
     하단 탭바는 내용(아이콘 4개) 크기에 맞춰 계속 좁게 — 넓은 화면에서
     아이콘 사이가 벌어져 보이지 않도록 이 탭에서도 원래 폭을 유지한다. */
  body.wide .phone { max-width: none; box-shadow: none; }
  body.wide .view { padding: 72px 0 96px; }
  body.wide #view-planner {
    max-width: 1760px; margin: 0 auto; width: 100%;
    padding: 64px clamp(20px, 3vw, 56px) 96px;
  }
}

/* ===== 오늘의 핵심 (★ 3개) ===== */
.mit-box {
  border: 1.5px solid #eda85f55;
  background: color-mix(in srgb, #eda85f 6%, transparent);
  border-radius: 14px; padding: 10px 12px 6px; margin-bottom: 16px;
}
.mit-head { font-size: 12px; font-weight: 800; color: #d9924a; margin-bottom: 2px; }
.star-badge { color: #eda85f; font-size: 13px; flex-shrink: 0; }
.todo-star { color: var(--ink-mute); font-size: 15px; opacity: 0; transition: opacity .15s; padding: 2px 4px; position: relative; }
.todo-star::after { content: ""; position: absolute; inset: -9px -4px; }
.todo-star:hover { color: #eda85f; }
.todo-item:hover .todo-star { opacity: 1; }
.todo-item.starred .todo-star { opacity: 1; color: #eda85f; }

/* ===== 어제 미완료 배너 ===== */
.pull-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px;
  font-size: 13px; color: var(--ink-soft);
}
.pull-banner b { color: var(--ink); }
.pull-go {
  margin-left: auto; font-size: 12px; font-weight: 700;
  color: var(--surface); background: var(--ink);
  border-radius: 8px; padding: 5px 10px; flex-shrink: 0;
}
.pull-x { color: var(--ink-mute); font-size: 13px; padding: 2px 4px; flex-shrink: 0; }

/* ===== 완료 애니메이션 ===== */
@keyframes checkpop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.pop { animation: checkpop .25s ease; }
.day-progress.all-done {
  color: #5fae6e; font-weight: 700;
  background: color-mix(in srgb, #5fae6e 10%, transparent);
  border-radius: 8px; padding: 2px 8px;
}

/* ===== 접기/펼치기 ===== */
.fold {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--ink-mute); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; position: relative;
}
.fold::after { content: ""; position: absolute; inset: -8px; }
.fold:hover { color: var(--ink-soft); background: var(--line); }
.fold-count { font-size: 11px; font-weight: 700; color: var(--ink-mute); }
.cat-group.folded > .todo-list, .cat-group.folded .sub-group { display: none; }
.sub-group.folded > .todo-list { display: none; }
.cat-group.folded { margin-bottom: 6px; }

/* ===== 컨디션 달력 점 ===== */
.cal-cell { position: relative; }
.mood-dot {
  width: 5px; height: 5px; border-radius: 50%;
  position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
}

/* ===== 검색 ===== */
.search-panel {
  position: fixed; inset: 0; z-index: 300;
  background: var(--surface);
  max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(16px + env(safe-area-inset-top)) 20px 20px;
}
@media (min-width: 900px) { .search-panel { max-width: 640px; } }
.search-head { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.search-head input {
  flex: 1; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 11px 14px; background: var(--bg); outline: none; font-size: 15px;
}
.search-head input:focus { border-color: var(--ink-soft); }
#search-close { font-size: 16px; color: var(--ink-soft); padding: 8px; }
.search-results { flex: 1; overflow-y: auto; }
.sr-section {
  font-size: 11.5px; font-weight: 800; color: var(--ink-mute);
  padding: 14px 2px 6px; text-transform: uppercase;
}
.sr-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 4px; border-bottom: 1px solid var(--line);
  font-size: 14px; cursor: pointer;
}
.sr-row:active { background: var(--bg); }
.sr-date { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); flex-shrink: 0; }
.sr-done { color: var(--ink-mute); text-decoration: line-through; }

/* ===== AI 도우미 ===== */
.ai-hint { font-size: 11.5px; color: var(--ink-mute); margin-bottom: 14px; }
.ai-log { flex: 1; overflow-y: auto; }
.ai-entry { margin-bottom: 18px; }
.ai-q {
  font-size: 13.5px; font-weight: 700;
  background: var(--bg); border-radius: 12px 12px 12px 4px;
  padding: 9px 13px; margin-bottom: 8px; display: inline-block;
}
.ai-a { font-size: 13.5px; line-height: 1.6; padding: 0 2px; }
.ai-a.thinking { color: var(--ink-mute); animation: aipulse 1.2s ease infinite; }
@keyframes aipulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.ai-a.err { color: var(--sun); }
.ai-act { font-size: 12.5px; font-weight: 600; color: #5fae6e; }

/* ===== 통계 ===== */
.st-section { margin-bottom: 28px; }
.st-title { font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.st-title.sub { color: var(--ink-mute); margin-top: 10px; font-size: 12px; }
.st-avg { font-weight: 600; color: var(--ink-soft); font-size: 12px; margin-left: 6px; }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.st-chips.dim { opacity: .55; }
.st-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.st-bar-label { font-size: 12px; color: var(--ink-soft); width: 118px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-bar { flex: 1; height: 8px; border-radius: 5px; background: var(--line); overflow: hidden; }
.st-bar-fill { height: 100%; border-radius: 5px; background: var(--ink); transition: width .3s; }
.st-bar-num { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); width: 44px; text-align: right; flex-shrink: 0; }
.mood-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 64px; padding: 4px 0;
}
.mood-chart i { flex: 1; border-radius: 2px; min-height: 3px; }
.mood-chart i.none { height: 3px; background: var(--line); }
.mood-chart-x { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-mute); }

/* ===== 항목 액션 시트 (폰) ===== */
.sheet { position: fixed; inset: 0; z-index: 400; }
.sheet-dim { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.sheet-box {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 520px; margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom));
  animation: sheetup .3s cubic-bezier(.32,.72,0,1);
}
/* iOS 시트 그래버 */
.sheet-box::before {
  content: ""; display: block; width: 36px; height: 5px; border-radius: 3px;
  background: var(--ink-mute); opacity: .4; margin: 0 auto 14px;
}
@keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
.sheet-title {
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  margin-bottom: 12px; padding: 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-btns { display: flex; flex-direction: column; }
.sheet-btn {
  display: flex; align-items: center; gap: 14px;
  min-height: 50px; padding: 0 4px;
  font-size: 17px; text-align: left; letter-spacing: -.02em;
  border-bottom: 1px solid var(--line); border-radius: 0;
}
.sheet-btn:last-child { border-bottom: none; }
.sheet-btn:active { background: var(--bg); }
.sheet-btn .sb-ico { width: 26px; text-align: center; font-size: 19px; color: var(--ios-blue); }
.sheet-btn.danger, .sheet-btn.danger .sb-ico { color: var(--sun); }
.sheet-cancel {
  width: 100%; margin-top: 10px; padding: 13px;
  font-size: 15px; font-weight: 700; color: var(--ink-soft);
  background: var(--bg); border-radius: 12px;
}

/* ===== 날짜 이동 · 당겨서 새로고침 · 빈 그룹 ===== */
.day-nav { width: 26px; height: 26px; font-size: 17px; }
#ptr {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%) translateY(-60px);
  background: var(--ink); color: var(--surface);
  font-size: 12.5px; font-weight: 700;
  padding: 8px 16px; border-radius: 20px;
  transition: transform .2s; z-index: 500; pointer-events: none;
}
#ptr.show { transform: translateX(-50%) translateY(0); }
.cat-group.empty { margin-bottom: 5px; }
.cat-group.empty .cat-group-head { opacity: .7; }

/* ===== 플래너 (월×주 매트릭스) ===== */
/* 표가 화면보다 좁으면 표 크기만큼만 차지한다 (열을 억지로 늘리지 않음).
   넓으면 max-width 가 걸려 가로 스크롤 — 오른쪽에 빈 칸이 생기지 않는다. */
.pl-scroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: 14px;
  -webkit-overflow-scrolling: touch;
  width: max-content; max-width: 100%;
  /* 왼쪽 고정: 열 폭이 바뀌어도 표 왼쪽 끝과 아웃라인 토글이 흔들리지 않는다 */
}
.pl-canvas { position: relative; width: 100%; }
.pl-row { display: flex; border-bottom: 1px solid var(--line); }
.pl-row:last-child { border-bottom: none; }
.pl-name {
  width: var(--nw, 108px); flex-shrink: 0; position: sticky; left: 0; z-index: 2;
  background: var(--surface); border-right: 1px solid var(--line);
  font-size: 12px; padding: 8px 6px 8px 10px;
  display: flex; align-items: center; gap: 5px;
  min-height: var(--rh, 44px);
}

/* ===== 셀 크기 조절 핸들 (엑셀식) ===== */
/* overflow:hidden — 마지막 핸들이 표 밖으로 삐져나와 가로 스크롤을 만들지 않게 */
.pl-rzbar { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.pl-rz {
  position: absolute; top: 0; bottom: 0; width: 11px;
  transform: translateX(-5px);
  cursor: col-resize; pointer-events: auto;
  touch-action: none;
}
.pl-rz::after {
  content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px;
  background: transparent; transition: background .12s;
}
.pl-rz:hover::after, .pl-rz.on::after { background: var(--sat); width: 2px; left: 4.5px; }
.pl-rowrz {
  position: absolute; left: 0; right: 0; bottom: -4px; height: 9px;
  cursor: row-resize; z-index: 7; touch-action: none;
}
.pl-rowrz::after {
  content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
  background: transparent; transition: background .12s;
}
.pl-rowrz:hover::after { background: var(--sat); height: 2px; }
.pl-reset-size {
  margin-left: auto; font-size: 11.5px; color: var(--ink-mute);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px;
}
.pl-reset-size:hover { color: var(--ink-soft); }
.pl-reset-size.act {
  color: var(--sat); border-color: color-mix(in srgb, var(--sat) 45%, transparent);
  background: color-mix(in srgb, var(--sat) 8%, transparent);
}
#pl-hide-empty { margin-left: auto; }
#pl-reset-size { margin-left: 6px; }
.pl-headrow { position: sticky; top: 0; z-index: 3; background: var(--surface); }
.pl-headrow .pl-name { min-height: 34px; position: sticky; }
.pl-col-h {
  flex-shrink: 0; font-size: 11px; font-weight: 800; color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
}
.pl-col-h.goal { color: var(--ink-soft); background: var(--bg); }
.pl-col-h.cur { color: #d9924a; }
.pl-arearow { background: var(--bg); }
.pl-arearow .pl-name { background: var(--bg); font-weight: 800; }
.pl-emoji { font-size: 14px; }
.pl-atext, .pl-wtext { outline: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-atext { font-weight: 800; }
.pl-arearest { flex-shrink: 0; }
.pl-del {
  color: var(--ink-mute); font-size: 11px; opacity: 0; transition: opacity .15s;
  padding: 2px; flex-shrink: 0;
}
.pl-name:hover .pl-del { opacity: .7; }
.pl-cell {
  flex-shrink: 0; border-right: 1px solid var(--line);
  padding: 6px 7px; display: flex; align-items: flex-start; gap: 5px;
  cursor: text; min-height: var(--rh, 44px);
}
.pl-cell.goal { background: color-mix(in srgb, var(--ink-mute) 5%, transparent); }
.pl-cell.cur { background: color-mix(in srgb, #eda85f 8%, transparent); }
.pl-check {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  border-radius: 5px; border: 1.6px solid var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 800; position: relative;
}
.pl-check::after { content: ""; position: absolute; inset: -8px; }
.pl-check.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.pl-text {
  flex: 1; min-width: 0; outline: none; font-size: 11.5px; line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.pl-text:focus { display: block; overflow: visible; }

/* ===== 일간 → 주간 → 월간 자동 요약 ===== */
.pl-roll {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  cursor: text;
}
.pl-rollitem {
  font-size: 11px; line-height: 1.35; color: var(--ink-soft);
  padding: 1px 5px; border-radius: 5px;
  background: color-mix(in srgb, var(--ink-mute) 9%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--sat) 45%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-rollitem.done { color: var(--ink-mute); text-decoration: line-through; opacity: .65; }
.pl-rollitem b { font-weight: 800; color: var(--sat); margin-left: 3px; font-size: 9.5px; }
/* 요약이 보이는 칸: 편집 span 은 접어 두었다가 클릭하면 펼침 */
.pl-cell.rolled .pl-text.empty {
  flex: 0 0 0; width: 0; height: 0; padding: 0; opacity: 0; overflow: hidden;
}
.pl-cell.rolled .pl-text.empty:focus {
  flex: 1; width: auto; height: auto; min-width: 60px; opacity: 1; overflow: visible;
}
.pl-cell.rolled:focus-within .pl-roll { display: none; }
.pl-unroll {
  position: absolute; top: 2px; right: 2px;
  font-size: 11px; color: var(--ink-mute); opacity: 0; transition: opacity .15s;
  padding: 2px 3px; z-index: 1;
}
.pl-cell:hover .pl-unroll { opacity: .8; }
/* ===== 플래너 보드 탭 (개인 / 업무) ===== */
.pl-boards {
  display: flex; gap: 4px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.pl-boards button {
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  padding: 9px 16px; border-radius: 10px 10px 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  letter-spacing: -.01em;
}
.pl-boards button:hover { color: var(--ink-soft); }
.pl-boards button.on {
  color: var(--ios-blue); border-bottom-color: var(--ios-blue);
  background: transparent; font-weight: 600;
}

/* ===== 개수 목표 카운터 · 배분 · 일간 뷰 ===== */
.pl-cnt {
  flex-shrink: 0; margin-top: 1px;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  color: var(--sat); background: color-mix(in srgb, var(--sat) 12%, transparent);
  border-radius: 6px; padding: 3px 5px; position: relative;
}
.pl-cnt::after { content: ""; position: absolute; inset: -6px -3px; }
.pl-cnt.full { color: var(--surface); background: #5fae6e; }
.pl-cnt.ro { opacity: .75; cursor: default; }
/* 루틴 달성도 바 */
.pl-rate {
  flex-shrink: 0; margin-top: 1px; position: relative; overflow: hidden;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--ink-soft); background: var(--line);
  border-radius: 6px; padding: 3px 6px; cursor: default;
}
.pl-rate b { font-weight: 800; color: var(--ink); position: relative; z-index: 1; }
.pl-rate i {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: color-mix(in srgb, var(--ink-mute) 30%, transparent);
}
.pl-rate.mid i { background: color-mix(in srgb, var(--sat) 32%, transparent); }
.pl-rate.hi i  { background: color-mix(in srgb, #5fae6e 38%, transparent); }
.pl-kind {
  color: var(--ink-mute); font-size: 11px;
  opacity: 0; transition: opacity .15s; padding: 1px 2px; flex-shrink: 0;
}
.pl-name:hover .pl-kind { opacity: .8; }
.pl-kind.on { opacity: 1; color: var(--sat); }
.pl-routine .pl-wtext, .pl-routine .pl-wtext-ro { color: var(--ink-soft); }
.pl-daycell.routine { cursor: pointer; }

/* 한 셀에 과업 여러 개 */
.pl-daycell { align-items: stretch; padding: 3px 4px; }
.pl-tasks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pl-task {
  display: flex; align-items: flex-start; gap: 4px;
  padding: 2px 2px; border-radius: 5px; position: relative;
}
.pl-task:hover { background: color-mix(in srgb, var(--ink-mute) 7%, transparent); }

/* 데일리 보고용 목록 복사 버튼 (날짜 헤더) */
.pl-col-h { position: relative; }
.pl-daycopy {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--ink-mute); padding: 3px 4px; border-radius: 6px;
  opacity: 0; transition: opacity .15s;
}
.pl-col-h:hover .pl-daycopy { opacity: .7; }
.pl-daycopy:hover { opacity: 1 !important; color: var(--sat); background: var(--line); }
@media (hover: none) { .pl-daycopy { opacity: .5; } }

/* ===== 아무것도 안 적은 행 — 세로로 납작하게 ===== */
.pl-row.blankrow .pl-name,
.pl-row.blankrow .pl-cell { min-height: var(--rhs, 22px); padding-top: 2px; padding-bottom: 2px; }
.pl-row.blankrow .pl-name { font-size: 11px; }
.pl-row.blankrow .pl-wtext { opacity: .6; }
.pl-row.blankrow .pl-tadd { display: none; }           /* 좁아서 ＋ 는 숨기고 */
.pl-row.blankrow:hover .pl-tadd { display: block; }    /* 올리면 다시 나온다 */
.pl-row.blankrow:hover .pl-wtext { opacity: 1; }

/* ===== 아무것도 안 적은 열 — 좁게 + 공란 색 ===== */
.pl-col-h.blank, .pl-cell.blank {
  background: color-mix(in srgb, var(--ink-mute) 4.5%, transparent);
  flex-grow: 0;   /* 남는 폭은 내용 있는 열이 가져간다 */
}
.pl-col-h.blank { color: color-mix(in srgb, var(--ink-mute) 65%, transparent); }
.pl-cell.blank.cur { background: color-mix(in srgb, #eda85f 7%, transparent); }

/* 셀 선택 (복사·붙여넣기 대상) */
.pl-daycell.sel {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sat) 55%, transparent);
  background: color-mix(in srgb, var(--sat) 6%, transparent);
}

/* ===== '주 N회' 루틴 — 매일 안 해도 되는 것 ===== */
.todo-check.loose, .pl-check.loose {
  border-style: dashed; border-width: 1.5px; border-radius: 50%;
  border-color: color-mix(in srgb, var(--ink-mute) 75%, transparent);
}
.todo-check.loose.on, .pl-check.loose.on { border-style: solid; }
.todo-item.loose.done .todo-check.loose { border-style: solid; }
.week-quota {
  flex-shrink: 0; font-size: 10px; font-weight: 800; line-height: 1;
  padding: 3px 6px; border-radius: 6px; white-space: nowrap;
  color: var(--ink-mute); background: color-mix(in srgb, var(--ink-mute) 10%, transparent);
}
.week-quota.met { color: #5fae6e; background: color-mix(in srgb, #5fae6e 14%, transparent); }
/* 이번 주 할당량을 채웠으면 오늘은 안 해도 된다는 표시 */
.todo-item.quota-met .todo-text { color: var(--ink-mute); }

/* ===== 라벨(태그) 칩 ===== */
.lbl {
  flex-shrink: 0; font-size: 9.5px; font-weight: 800; line-height: 1;
  padding: 2.5px 5px; border-radius: 5px; letter-spacing: -.2px;
  color: var(--lc); background: color-mix(in srgb, var(--lc) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--lc) 35%, transparent);
  white-space: nowrap; align-self: flex-start; margin-top: 1px;
}
.todo-item .lbl { font-size: 10px; padding: 3px 6px; align-self: center; margin-top: 0; }
.pl-rollitem .lbl { font-size: 9px; padding: 1px 4px; margin-left: 4px; }
.todo-lbl {
  font-size: 13px; color: var(--ink-mute); padding: 2px 4px; flex-shrink: 0;
  opacity: 0; transition: opacity .15s;
}
.todo-item:hover .todo-lbl { opacity: .85; }
.pl-tlbl:hover, .todo-lbl:hover { color: var(--sat); opacity: 1 !important; }

/* 라벨 고르기 팝업 */
.lbl-pop {
  position: fixed; z-index: 2000; min-width: 132px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; padding: 5px; box-shadow: 0 8px 26px rgba(0,0,0,.16);
  display: flex; flex-direction: column; gap: 1px;
}
.lbl-opt, .lbl-new {
  display: flex; align-items: center; gap: 7px; width: 100%;
  font-size: 12.5px; color: var(--ink-soft); text-align: left;
  padding: 7px 8px; border-radius: 7px;
}
.lbl-opt i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.lbl-opt.none i { display: none; }
.lbl-opt:hover, .lbl-new:hover { background: var(--bg); color: var(--ink); }
.lbl-opt.on { background: var(--bg); font-weight: 800; color: var(--ink); }
.lbl-new { border-top: 1px solid var(--line); margin-top: 3px; color: var(--ink-mute); font-size: 12px; }

/* ===== 표 밖 아웃라인 (엑셀·구글시트식 그룹 접기) ===== */
#pl-grid { position: relative; padding-left: 26px; }
.pl-outline { position: absolute; left: 0; top: 0; width: 26px; height: 100%; }
.pl-outline .pl-wfold {
  position: absolute; left: 4px;
  width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--ink-mute) 55%, transparent);
  background: var(--surface); color: var(--ink-soft);
  font-size: 11px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.pl-outline .pl-wfold:hover {
  color: var(--ink); border-color: var(--ink);
  background: var(--bg);
}
/* 묶음 범위를 나타내는 세로 괄호 */
.pl-obr {
  position: absolute; left: 11px; width: 7px;
  border-left: 1.5px solid color-mix(in srgb, var(--ink-mute) 45%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink-mute) 45%, transparent);
  border-bottom-left-radius: 2px;
}

/* 과업 드래그앤드롭 */
/* 그립 자리를 미리 비워 둬서 호버할 때 글자가 밀리지 않게 */
.pl-task { padding-left: 10px; }
.pl-tgrip {
  position: absolute; left: 1px; top: 3px;
  font-size: 10px; line-height: 1; color: var(--ink-mute);
  opacity: 0; transition: opacity .15s; cursor: grab;
  user-select: none; -webkit-user-select: none; z-index: 2;
}
.pl-tgrip::after { content: ""; position: absolute; inset: -8px -7px; }
.pl-tgrip:active { cursor: grabbing; }
.pl-task:hover .pl-tgrip { opacity: .6; }
.pl-tgrip:hover { opacity: 1 !important; color: var(--ink-soft); }
@media (hover: none) {
  .pl-tgrip { opacity: .4; font-size: 11px; }
  .pl-tgrip::after { inset: -11px -9px; }
}
.pl-task.dragging {
  opacity: .6; background: var(--bg);
  box-shadow: 0 3px 10px rgba(0,0,0,.16);
}
.pl-cell.pl-drop {
  background: color-mix(in srgb, var(--sat) 12%, transparent) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sat) 45%, transparent);
}
/* 끄는 동안엔 글자 편집이 방해하지 않게 */
.pl-dragging .pl-ttext, .pl-dragging .pl-text { pointer-events: none; }
.pl-ttext {
  flex: 1; min-width: 0; outline: none; font-size: 11.5px; line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.pl-ttext:focus { display: block; overflow: visible; }
.pl-task .pl-check { width: 14px; height: 14px; border-radius: 4px; font-size: 9px; margin-top: 1px; }
.pl-task.done .pl-ttext { color: var(--ink-mute); text-decoration: line-through; }
/* 액션 버튼은 자리를 차지하지 않게 오른쪽에 띄운다
   (안 그러면 투명한 채로 폭을 먹어서 태그 오른쪽이 휑해 보임) */
.pl-tdel, .pl-tsend, .pl-tlbl {
  position: absolute; top: 2px; z-index: 2;
  font-size: 10px; color: var(--ink-mute); padding: 0 2px;
  opacity: 0; transition: opacity .12s;
}
.pl-tlbl  { right: 34px; font-size: 10px; }
.pl-tsend { right: 18px; }
.pl-tdel  { right: 3px; }
.pl-task:hover { padding-right: 68px; }
.pl-task.pl-tsub:hover { padding-right: 24px; }
.pl-task:hover .pl-tdel,
.pl-task:hover .pl-tsend,
.pl-task:hover .pl-tlbl { opacity: .9; }
.pl-tsend:hover { color: var(--sat); }
.pl-tdel:hover { color: var(--sun); }
.pl-tadd {
  font-size: 12px; color: var(--ink-mute); text-align: left;
  padding: 1px 3px; border-radius: 5px; opacity: 0; transition: opacity .15s;
  align-self: flex-start; line-height: 1.2;
}
.pl-daycell:hover .pl-tadd { opacity: .65; }
.pl-tadd:hover { opacity: 1 !important; background: var(--line); color: var(--ink-soft); }
.pl-task.new { align-items: center; }
.pl-task.new .pl-tbox {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px dashed var(--ink-mute); flex-shrink: 0;
}
.pl-task.new input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 11.5px; padding: 1px 0;
}
@media (hover: none) {
  .pl-tadd, .pl-tdel, .pl-tsend { opacity: .55; }
}

/* 접힌 소제목 개수 배지 (접기 버튼 자체는 거터 쪽 규칙을 씀) */
.pl-foldn {
  font-size: 9px; font-weight: 800; color: var(--ink-mute);
  background: var(--bg); border-radius: 5px; padding: 1px 4px; flex-shrink: 0;
}
.pl-linkbtn {
  font-size: 11.5px; color: var(--sat); text-decoration: underline;
  padding: 0 2px; margin-left: 6px;
}

.pl-dist {
  position: absolute; right: 20px; bottom: 1px;
  font-size: 11px; color: var(--ink-mute); padding: 1px 3px;
  opacity: 0; transition: opacity .15s; border-radius: 4px;
}
.pl-cell:hover .pl-dist { opacity: 1; }
.pl-dist:hover { color: var(--sat); background: var(--surface); }
.pl-wkgoal {
  font-size: 9.5px; font-weight: 800; color: var(--ink-mute);
  background: var(--bg); border-radius: 5px; padding: 1px 4px; flex-shrink: 0;
}
/* 날짜 · 요일을 한 줄로 — "4일 (화) ♥" */
.pl-dh { gap: 3px; line-height: 1.15; }
.pl-dh b { font-size: 10px; font-weight: 700; opacity: .7; }
.pl-dh.sun { color: var(--sun); }
.pl-dh.sat { color: var(--sat); }
.pl-daycell.cur { background: color-mix(in srgb, #eda85f 8%, transparent); }
.pl-send-day {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 11px; color: var(--ink-mute); padding: 1px 3px;
  opacity: 0; transition: opacity .15s; border-radius: 4px;
}
.pl-cell:hover .pl-send-day { opacity: 1; }
.pl-send-day:hover { color: var(--sat); background: var(--surface); }

.pl-send {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 11px; color: var(--ink-mute); padding: 1px 3px;
  opacity: 0; transition: opacity .15s; border-radius: 4px;
}
.pl-cell:hover .pl-send { opacity: 1; }
.pl-send:hover { color: var(--sat); background: var(--surface); }
.pl-cell { position: relative; }
.todo-rec-badge.plan { color: var(--sat); }

/* ===== 플래너 일간 과업 연동 섹션 ===== */
.plan-group { --c: var(--sat); }
.plan-group .cat-label { cursor: default; }
.plan-group .fold-count { margin-left: 0; }
.plan-goto {
  margin-left: auto; width: 26px; height: 26px; border-radius: 8px;
  color: var(--ink-mute); font-size: 13px;
}
.plan-goto:hover { background: var(--line); color: var(--sat); }
.plan-list { background: var(--surface); border-radius: var(--r); overflow: hidden; }
.plan-list > .todo-item { padding: 0 16px; }
.plan-task .todo-text { cursor: default; }
.plan-src {
  font-size: 10.5px; font-weight: 700; color: var(--ink-mute); flex-shrink: 0;
  background: color-mix(in srgb, var(--ink-mute) 10%, transparent);
  padding: 1px 6px; border-radius: 6px; max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 아무것도 안 적은 칸: 가운데 ⊕ (비활성 색) */
.pl-cell .pl-text.empty::before {
  content: "⊕"; color: var(--ink-mute); opacity: .28; font-size: 13px;
}
.pl-cell .pl-text.empty:focus::before { content: ""; }
.pl-cell .pl-text.empty {
  display: flex; align-items: center; justify-content: center; min-height: 18px;
}
.pl-cell:hover .pl-text.empty::before { opacity: .6; }
/* 일간 셀: 과업이 없으면 ＋ 버튼을 칸 가운데에 ⊕ 로 */
.pl-daycell .pl-tasks:not(:has(.pl-task)) {
  align-items: center; justify-content: center;
}
.pl-daycell .pl-tasks:not(:has(.pl-task)) .pl-tadd {
  font-size: 14px; opacity: .28; text-align: center; width: 100%;
}
.pl-daycell:hover .pl-tasks:not(:has(.pl-task)) .pl-tadd { opacity: .6; }
.pl-addrow .pl-name { min-height: 36px; padding: 4px 6px; }
.pl-addwork {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 11.5px; color: var(--ink);
}
.pl-addwork::placeholder { color: var(--ink-mute); }

/* 월간(연간) 뷰 */
.pl-mh { cursor: pointer; }
.pl-mh:hover { color: var(--ink); }
.pl-cell { flex-wrap: wrap; }
.pl-wkbadge {
  font-size: 9.5px; font-weight: 800; color: var(--sat);
  border: 1px solid color-mix(in srgb, var(--sat) 45%, transparent);
  border-radius: 5px; padding: 0 4px; margin-top: 2px;
  flex-basis: 100%; align-self: flex-start; width: fit-content;
}
.pl-wkbadge.full { color: #5fae6e; border-color: color-mix(in srgb, #5fae6e 50%, transparent); }
.pl-wtext-ro { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 소주제 (작업 하위 레벨) */
.pl-sub .pl-name { padding-left: 16px; }
.pl-subtick { color: var(--ink-mute); font-size: 10px; flex-shrink: 0; }
.pl-sub .pl-wtext, .pl-sub .pl-wtext-ro { font-size: 11.5px; color: var(--ink-soft); }
.pl-addsub {
  color: var(--ink-mute); font-size: 12px; font-weight: 300;
  opacity: 0; transition: opacity .15s; padding: 1px 2px; flex-shrink: 0;
}
.pl-name:hover .pl-addsub { opacity: .8; }
.pl-addsubinput {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 11.5px; color: var(--ink);
}
.pl-addsubinput::placeholder { color: var(--ink-mute); }

/* 잘린 이름 슬라이드 (호버 시 전체 표시) */
.pl-slide { transition: text-indent 1.1s ease .2s; }
.pl-slide:hover:not(:focus), .pl-slide:active:not(:focus) {
  text-indent: var(--slide);
  text-overflow: clip;
}

/* 제목 행 (셀 합치기) */
.pl-headerrow .pl-name { background: color-mix(in srgb, var(--ink-mute) 7%, var(--surface)); }
.pl-headerrow .pl-wtext, .pl-headerrow .pl-wtext-ro { font-weight: 800; }

/* 합쳐진 행(영역·제목 행)은 이름이 띠 위로 끝까지 보이게 */
.pl-arearow .pl-name, .pl-headerrow .pl-name { overflow: visible; }
.pl-arearow .pl-atext,
.pl-headerrow .pl-wtext, .pl-headerrow .pl-wtext-ro {
  flex: 0 0 auto; min-width: 0; max-width: 620px;
  overflow: visible; text-overflow: clip; white-space: nowrap;
}
.pl-headerband {
  flex-shrink: 0;
  background: color-mix(in srgb, var(--ink-mute) 7%, var(--surface));
}
.pl-merge {
  color: var(--ink-mute); font-size: 12px;
  opacity: 0; transition: opacity .15s; padding: 1px 2px; flex-shrink: 0;
}
.pl-name:hover .pl-merge { opacity: .8; }

/* ===== 메뉴 ===== */
.menu-list { display: flex; flex-direction: column; }
.menu-list button {
  display: flex; align-items: center; gap: 14px;
  min-height: 54px; padding: 0 8px;
  font-size: 15.5px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.menu-list button:active { background: var(--bg); }
.menu-list button span { width: 26px; text-align: center; font-size: 17px; color: var(--ink-soft); }

/* ===== 토스트 ===== */
#toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--surface); font-size: 13px;
  padding: 11px 18px; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  z-index: 1000; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#toast .toast-undo {
  margin-left: 10px; border: 0; border-radius: 999px; padding: 4px 12px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--surface); color: var(--ios-blue);
}

/* ===== 이번 요청 보정 ===== */
/* 대제목(영역)·제목 행은 낮게 */
.pl-arearow .pl-name, .pl-arearow .pl-arearest { min-height: 30px; }
.pl-headerrow .pl-name, .pl-headerrow .pl-headerband { min-height: 28px; }
.pl-arearow .pl-name { padding-top: 4px; padding-bottom: 4px; }

/* 오늘 표시 — 날짜 옆 하트 */
.pl-heart { color: #e2615c; font-style: normal; font-size: 10px; margin-left: 3px; }

/* 아무것도 안 적은 칸 — 연한 회색으로 채움 */
.pl-cell.nofill { background: color-mix(in srgb, var(--ink-mute) 8%, transparent); }
.pl-cell.nofill.cur { background: color-mix(in srgb, #eda85f 10%, transparent); }
.pl-cell.nofill.blank { background: color-mix(in srgb, var(--ink-mute) 11%, transparent); }

/* ⊕ 를 또렷하게 */
.pl-cell .pl-text.empty::before { opacity: .5; font-size: 14px; }
.pl-cell:hover .pl-text.empty::before { opacity: .85; }
.pl-daycell .pl-tasks:not(:has(.pl-task)) .pl-tadd { opacity: .5; }
.pl-daycell:hover .pl-tasks:not(:has(.pl-task)) .pl-tadd { opacity: .9; }

/* 라벨 붙은 항목 — 그 줄 전체를 라벨 색으로 (마감이면 붉게) */
.pl-task.labeled {
  background: color-mix(in srgb, var(--lc) 15%, transparent);
  border-left: 3px solid var(--lc); padding-left: 8px;
}
.pl-task.labeled:hover { background: color-mix(in srgb, var(--lc) 24%, transparent); }
.pl-task.labeled .lbl { background: var(--lc); color: #fff; border-color: var(--lc); }
.pl-rollitem.labeled {
  background: color-mix(in srgb, var(--lc) 15%, transparent);
  border-left: 3px solid var(--lc);
}
.pl-rollitem.labeled .lbl { background: var(--lc); color: #fff; border-color: var(--lc); }
/* 라벨 행 — iOS 리스트답게 카드 좌우 끝까지 채운다 */
.todo-item.labeled .sw-inner {
  background: color-mix(in srgb, var(--lc) 13%, transparent);
  border-left: 3px solid var(--lc);
  margin: 0 -16px; padding: 11px 16px 11px 13px;
}
/* 라벨 행이 붙어 있으면 그 사이 구분선은 지운다 (색 띠가 경계 역할) */
.todo-list > li.todo-item.labeled + li.todo-item.labeled::before { display: none; }
.todo-item.labeled .lbl { background: var(--lc); color: #fff; border-color: var(--lc); }

/* ===== 화면 하단 고정 가로 스크롤바 ===== */
/* 하단 바가 떠 있는 동안엔 표 자체 스크롤바를 숨긴다 (두 개로 보이지 않게) */
.pl-scroll.has-xbar { scrollbar-width: none; }
.pl-scroll.has-xbar::-webkit-scrollbar { height: 0; width: 0; display: none; }

.pl-xbar {
  position: fixed; z-index: 95;
  height: 18px; overflow-x: scroll; overflow-y: hidden;
  scrollbar-width: auto;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 -2px 10px rgba(0,0,0,.06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  margin-bottom: 6px;
}
.pl-xbar-in { height: 1px; }
.pl-xbar::-webkit-scrollbar { height: 16px; }
.pl-xbar::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink-soft) 62%, transparent);
  border-radius: 8px; border: 3px solid transparent; background-clip: content-box;
  min-width: 44px;
}
.pl-xbar::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink-soft) 70%, transparent);
  background-clip: content-box;
}
.pl-xbar::-webkit-scrollbar-track { background: transparent; }

/* ===================== 시간표 ===================== */
/* iOS 세그먼티드 컨트롤 */
.day-modes, .pl-mode {
  display: inline-flex; gap: 2px; margin: 4px 0 16px;
  background: var(--fill); border-radius: 9px; padding: 2px;
}
.day-modes button, .pl-mode button {
  font-size: 13px; font-weight: 500; color: var(--ink);
  padding: 6px 16px; border-radius: 7px; border: none;
  letter-spacing: -.01em; transition: background .18s, box-shadow .18s;
}
.day-modes button.on, .pl-mode button.on {
  background: var(--surface); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
}
.day-modes button:active, .pl-mode button:active { opacity: 1; }

.tt-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; }
.tt-pool {
  position: sticky; top: 8px; border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; background: var(--bg);
}
.tt-pool-head { font-size: 11.5px; font-weight: 800; color: var(--ink-mute); padding: 2px 4px 8px; }
.tt-pool-head b { color: var(--ink); }
.tt-pool-list { display: flex; flex-direction: column; gap: 5px; max-height: 62vh; overflow-y: auto; }
.tt-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 7px 8px; border-radius: 9px; cursor: grab;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--bc);
  user-select: none; -webkit-user-select: none;
}
.tt-item:hover { border-color: var(--bc); }
.tt-item.done .tt-name { color: var(--ink-mute); text-decoration: line-through; }
.tt-item .tt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-tag {
  font-size: 9px; font-weight: 800; color: var(--bc); flex-shrink: 0;
  background: color-mix(in srgb, var(--bc) 14%, transparent);
  padding: 2px 5px; border-radius: 5px;
}
.tt-ghost {
  position: fixed; z-index: 3000; width: 190px; pointer-events: none;
  opacity: .9; box-shadow: 0 6px 18px rgba(0,0,0,.2); cursor: grabbing;
}
.tt-ghost.ok { border-color: var(--sat); }

.tt-grid {
  position: relative; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.tt-grid.drop { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sat) 55%, transparent); }
.tt-hour {
  position: absolute; left: 0; right: 0;
  border-top: 1px solid var(--line);
}
.tt-hour span {
  position: absolute; left: 6px; top: -8px; font-size: 10px; font-weight: 700;
  color: var(--ink-mute); background: var(--surface); padding: 0 3px;
}
.tt-hour::after {   /* 30분 보조선 */
  content: ""; position: absolute; left: 52px; right: 0; top: 50%;
  border-top: 1px dashed color-mix(in srgb, var(--line) 75%, transparent);
}
.tt-now { position: absolute; left: 52px; right: 0; height: 2px; background: #e2615c; z-index: 3; }
.tt-now::before {
  content: ""; position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: #e2615c;
}
.tt-blocks { position: absolute; left: 56px; right: 6px; top: 0; bottom: 0; }
.tt-block {
  position: absolute; overflow: hidden; cursor: grab;
  border-radius: 8px; padding: 4px 6px;
  background: color-mix(in srgb, var(--bc) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--bc) 55%, transparent);
  border-left: 3px solid var(--bc);
  display: flex; flex-direction: column; gap: 1px;
  user-select: none; -webkit-user-select: none;
}
.tt-block.dragging { opacity: .8; box-shadow: 0 6px 16px rgba(0,0,0,.18); z-index: 5; cursor: grabbing; }
.tt-block .tt-time { font-size: 9.5px; font-weight: 800; color: color-mix(in srgb, var(--bc) 80%, var(--ink)); }
.tt-block .tt-name { font-size: 11.5px; line-height: 1.3; overflow: hidden; }
.tt-block.done { opacity: .55; }
.tt-block.done .tt-name { text-decoration: line-through; }
.tt-off {
  position: absolute; top: 2px; right: 3px; font-size: 10px;
  color: var(--ink-mute); opacity: 0; transition: opacity .12s; padding: 1px 3px;
}
.tt-block:hover .tt-off { opacity: .9; }
.tt-resize {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  cursor: ns-resize; touch-action: none;
}
.tt-resize::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 22px; height: 2px;
  transform: translateX(-50%); border-radius: 2px;
  background: color-mix(in srgb, var(--bc) 60%, transparent); opacity: 0;
}
.tt-block:hover .tt-resize::after { opacity: 1; }

@media (max-width: 760px) {
  .tt-wrap { grid-template-columns: 1fr; }
  .tt-pool { position: static; }
  .tt-pool-list { max-height: 190px; }
  .tt-item { padding: 9px 10px; }
}

/* ===== 접힌 중제목 / 대제목 아웃라인 ===== */
.pl-collapsed {
  flex-shrink: 0; min-height: var(--rhs, 22px);
  display: flex; align-items: center; padding: 0 10px;
  font-size: 10.5px; font-weight: 700; color: var(--ink-mute);
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--ink-mute) 6%, transparent) 0 6px,
    transparent 6px 12px);
}
.pl-outline .pl-wfold.area {
  border-color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
  color: var(--ink); font-weight: 800;
}
.pl-obr.area {
  border-left-color: color-mix(in srgb, var(--ink-soft) 45%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink-soft) 45%, transparent);
  left: 7px; width: 5px;
}

/* ===== iOS 리스트 구분선 (0.5px, 좌측 인셋) ===== */
.todo-list > li.todo-item + li.todo-item::before {
  content: ""; position: absolute; left: 0; right: -16px; top: 0;
  height: 1px; transform: scaleY(.5); transform-origin: top;
  background: var(--line); pointer-events: none;
}
.todo-list > li.todo-item.child + li.todo-item::before { left: 29px; }

/* 세그먼티드 컨트롤은 내용 크기만큼만 (부모가 flex 여도 늘어나지 않게) */
.goal-mode, .day-modes { width: fit-content; align-self: flex-start; flex: 0 0 auto; }

/* 플래너 툴바 — 왼쪽 세그먼티드, 오른쪽 유틸 버튼 */
.pl-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.pl-toolbar .goal-mode { margin-bottom: 0; }

/* 복사 대상으로 고른 과업 */
.pl-task.sel {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ios-blue) 60%, transparent);
  border-radius: 6px;
}

/* 일간 뷰에서 앞뒤 달 날짜 (월~일 주를 채우느라 딸려온 칸) */
.pl-col-h.offmonth { opacity: .45; }
.pl-cell.offmonth { background: color-mix(in srgb, var(--ink-mute) 12%, transparent); }

/* ===== 시간표 완료 체크 (iOS 원형) ===== */
.tt-check {
  width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--bc) 70%, transparent);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
  transition: background .15s, transform .12s; position: relative;
}
.tt-check::after { content: ""; position: absolute; inset: -7px; }  /* 손가락 여유 */
.tt-check.on { background: var(--bc); border-color: var(--bc); }
.tt-check:active { transform: scale(.85); opacity: 1; }
/* 블록: 시간 아래 한 줄로 체크 + 이름 */
.tt-line { display: flex; align-items: flex-start; gap: 5px; min-width: 0; flex: 1; }
.tt-line .tt-name { flex: 1; min-width: 0; }
.tt-block.done .tt-check { border-color: var(--bc); }
/* 대기 목록: 체크가 맨 앞 */
.tt-item .tt-check { margin-right: 1px; }

/* ===== 주간 뷰: 과업을 다른 주차로 끌기 ===== */
.pl-rollitem.movable { cursor: grab; }
.pl-rollitem.movable:hover {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ios-blue) 45%, transparent);
}
.pl-rollitem.moving { opacity: .35; }
.pl-rollitem.wk-ghost {
  position: fixed; z-index: 3000; pointer-events: none;
  max-width: 260px; opacity: .95; cursor: grabbing;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
.pl-cell.wk-drop {
  background: color-mix(in srgb, var(--ios-blue) 12%, transparent) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ios-blue) 55%, transparent);
}

/* ===== AI 요약 버튼 (주·월 열 헤더) ===== */
.pl-aisum {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  font-size: 11px; padding: 3px 4px; border-radius: 6px;
  opacity: 0; transition: opacity .15s;
}
.pl-col-h:hover .pl-aisum { opacity: .8; }
.pl-aisum:hover { opacity: 1 !important; background: var(--fill); }
.pl-aisum.busy { opacity: 1 !important; }
@media (hover: none) { .pl-aisum { opacity: .5; } }

/* ===== 주간 칸에서 과업 추가 ===== */
.pl-wadd {
  position: absolute; left: 3px; bottom: 2px;
  font-size: 12px; color: var(--ink-mute); padding: 1px 5px; border-radius: 6px;
  opacity: 0; transition: opacity .15s; z-index: 2;
}
.pl-cell:hover .pl-wadd { opacity: .65; }
.pl-wadd:hover { opacity: 1 !important; color: var(--ios-blue); background: var(--fill); }
@media (hover: none) { .pl-wadd { opacity: .45; } }
.pl-waddrow { width: 100%; margin-top: 3px; }
.pl-waddrow input {
  width: 100%; font-size: 11.5px; padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--ios-blue) 45%, transparent);
  border-radius: 6px; background: var(--surface); outline: none;
}
/* 추가 버튼이 겹치지 않게 칸 아래쪽 여유 */
.pl-cell[data-week]:hover { padding-bottom: 20px; }

/* ===== 중제목·소제목 행 순서 드래그 ===== */
.pl-wgrip {
  flex-shrink: 0; width: 10px; font-size: 10px; line-height: 1;
  color: var(--ink-mute); cursor: grab; text-align: center;
  opacity: 0; transition: opacity .15s; position: relative;
  user-select: none; -webkit-user-select: none;
}
.pl-wgrip::after { content: ""; position: absolute; inset: -8px -5px; }
.pl-wgrip:active { cursor: grabbing; }
.pl-name:hover .pl-wgrip { opacity: .6; }
.pl-wgrip:hover { opacity: 1 !important; color: var(--ink-soft); }
@media (hover: none) { .pl-wgrip { opacity: .35; } }
.pl-row.rowdrag {
  opacity: .6; background: var(--fill);
  box-shadow: 0 4px 14px rgba(0,0,0,.14); position: relative; z-index: 8;
}

/* ===== 업무 플래너 아래 개인 플래너 패널 ===== */
#pl-workhead { margin-top: 2px; }
/* 두 보드를 한 페이지에 — 박스 없이 이어 붙인다 */
.pl-sub-panel { margin-top: 34px; }
.pl-subhead {
  display: flex; align-items: center; gap: 7px;
  padding: 0 0 8px 26px;      /* 아웃라인 폭만큼 왼쪽 맞춤 */
  background: none; border: none;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
  text-align: left; color: var(--ink-soft);
}
.pl-subhead:hover { color: var(--ink); opacity: 1; }
.pl-subhead:active { opacity: 1; }
.pl-subarrow { color: var(--ink-mute); font-size: 11px; width: 10px; }
.pl-subgrid { position: relative; padding-left: 26px; }

/* ===== 라벨 팝업: 이름·색상 고치기 ===== */
.lbl-row { display: flex; align-items: center; gap: 2px; }
.lbl-row .lbl-opt { flex: 1; min-width: 0; }
.lbl-row .lbl-opt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbl-edit, .lbl-del {
  flex-shrink: 0; width: 24px; height: 28px; border-radius: 7px;
  font-size: 11px; color: var(--ink-mute);
  opacity: 0; transition: opacity .12s;
}
.lbl-row:hover .lbl-edit, .lbl-row:hover .lbl-del { opacity: .75; }
.lbl-edit:hover { opacity: 1 !important; color: var(--ios-blue); background: var(--fill); }
.lbl-del:hover { opacity: 1 !important; color: var(--ios-red); background: var(--fill); }
@media (hover: none) { .lbl-edit, .lbl-del { opacity: .5; } }

.lbl-row.editing { gap: 6px; padding: 3px 4px; }
.lbl-row.editing .lbl-color {
  width: 24px; height: 24px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer;
}
.lbl-row.editing .lbl-name {
  flex: 1; min-width: 0; font-size: 13px; padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--ios-blue) 50%, transparent);
  border-radius: 7px; background: var(--surface); outline: none;
}

/* ===== 대·중·소주제 추가 행 (모양 통일) ===== */
.pl-addrow .pl-name { min-height: 30px; padding: 3px 8px; }
.pl-addinput {
  width: 100%; border: none; outline: none; background: transparent;
  font-size: 12px; color: var(--ink-soft); padding: 3px 4px; border-radius: 6px;
  opacity: .55; transition: opacity .15s, background .15s;
}
.pl-addinput:hover, .pl-addinput:focus {
  opacity: 1; background: var(--fill); color: var(--ink);
}
.pl-addinput::placeholder { color: var(--ink-mute); }
.pl-add-sub .pl-name { padding-left: 30px; }        /* 소주제는 한 단 들여쓰기 */
.pl-add-area .pl-name { padding-left: 8px; }
.pl-add-area .pl-addinput { font-size: 12.5px; }
/* 버튼으로 연 임시 입력 행 */
.pl-tmpadd .pl-addinput {
  opacity: 1; background: var(--surface); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ios-blue) 50%, transparent);
}
/* 이름 칸의 추가 버튼 */
.pl-addbtn {
  flex-shrink: 0; font-size: 13px; font-weight: 300; line-height: 1;
  color: var(--ink-mute); padding: 2px 4px; border-radius: 6px;
  opacity: 0; transition: opacity .15s; position: relative;
}
.pl-addbtn::after { content: ""; position: absolute; inset: -7px -3px; }
.pl-name:hover .pl-addbtn { opacity: .7; }
.pl-addbtn:hover { opacity: 1 !important; color: var(--ios-blue); background: var(--fill); }
@media (hover: none) { .pl-addbtn { opacity: .45; } }

/* 대주제 드래그 그립 */
.pl-agrip {
  flex-shrink: 0; width: 10px; font-size: 10px; line-height: 1;
  color: var(--ink-mute); cursor: grab; text-align: center;
  opacity: 0; transition: opacity .15s; position: relative;
  user-select: none; -webkit-user-select: none;
}
.pl-agrip::after { content: ""; position: absolute; inset: -8px -5px; }
.pl-agrip:active { cursor: grabbing; }
.pl-areaname:hover .pl-agrip { opacity: .6; }
.pl-agrip:hover { opacity: 1 !important; color: var(--ink-soft); }
@media (hover: none) { .pl-agrip { opacity: .35; } }

/* ===================== 달력 뷰 (노션식 세로 연속) ===================== */
.ncal { max-width: 1180px; }
.ncal-top {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 2px 8px;
  background: var(--bg);
}
.ncal-month { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.ncal-acts { display: flex; gap: 6px; }
.ncal-acts button {
  font-size: 12px; font-weight: 600; padding: 5px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.ncal-acts button:hover { background: var(--fill); color: var(--ink); }
.ncal-dow {
  position: sticky; top: 46px; z-index: 5;
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--bg); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; color: var(--ink-mute);
  padding: 4px 0 5px;
}
.ncal-dow span { text-align: center; }
.ncal-dow .sat { color: var(--sat); }
.ncal-dow .sun { color: var(--sun); }

.ncal-body { border-left: 1px solid var(--line); }
.ncal-w { position: relative; }
.ncal-cells {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.ncal-c {
  position: relative;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 3px 6px; cursor: pointer; min-width: 0;
  transition: background .12s;
}
.ncal-plus {
  position: absolute; top: 1px; right: 2px;
  width: 19px; height: 19px; padding: 0; border: 0; border-radius: 5px;
  background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .1s; z-index: 3;
}
.ncal-c:hover .ncal-plus { opacity: 1; }
.ncal-plus:hover { background: var(--ios-blue); color: #fff; }
.ncal-add {
  position: absolute; left: 3px; right: 3px; top: 20px; z-index: 20;
}
.ncal-add input {
  width: 100%; box-sizing: border-box;
  padding: 5px 7px; font: inherit; font-size: 11.5px;
  border: 1.5px solid var(--ios-blue); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}
.ncal-c.alt { background: color-mix(in srgb, var(--ink-mute) 4%, transparent); }
.ncal-c.off { background: color-mix(in srgb, var(--ink-mute) 9%, transparent); }
.ncal-c.off .ncal-n { opacity: .4; }
.ncal-c:hover { background: var(--fill); }
.ncal-n { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.ncal-c.sat .ncal-n { color: var(--sat); }
.ncal-c.sun .ncal-n { color: var(--sun); }
.ncal-c.today {
  background: color-mix(in srgb, var(--ios-blue) 12%, transparent);
}
.ncal-c.today .ncal-n {
  background: var(--ios-blue); color: #fff; font-weight: 700;
  border-radius: 999px; padding: 1px 7px; display: inline-block;
}

.ncal-more, .ncal-fold {
  position: absolute; left: 7px;
  border: 0; background: none; padding: 1px 4px; border-radius: 4px;
  font: inherit; font-size: 10.5px; font-weight: 700;
  color: var(--ink-mute); cursor: pointer; z-index: 2;
}
.ncal-more:hover, .ncal-fold:hover {
  background: var(--fill); color: var(--ios-blue);
}
.ncal-fold { color: var(--ios-blue); }
.ncal-bars { position: absolute; inset: 0; pointer-events: none; }
.ncal-bar {
  position: absolute; height: 20px; margin: 0 3px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 7px; border-radius: 5px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; line-height: 1;
  color: var(--ink); pointer-events: auto;
  background: color-mix(in srgb, var(--bc) 20%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 35%, transparent);
  overflow: hidden; white-space: nowrap;
  transition: filter .12s;
}
.ncal-bar > span { overflow: hidden; text-overflow: ellipsis; }
/* 마우스에서는 막대를 바로 끌 수 있게, 손가락은 스크롤을 먼저 */
@media (hover: hover) and (pointer: fine) {
  .ncal-bar { touch-action: none; cursor: grab; }
  .ncal-bar:active { cursor: grabbing; }
}
.ncal-bar.ncal-drag { opacity: .28; }
.ncal-ghost {
  position: fixed; pointer-events: none; z-index: 999;
  opacity: .92; box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}
.ncal-c.ncal-drop {
  background: color-mix(in srgb, var(--ios-blue) 22%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--ios-blue);
}
.ncal-bar:hover { filter: brightness(1.06); }
.ncal-bar .ncal-dot {
  width: 7px; height: 7px; flex: none; border-radius: 999px;
  background: var(--bc);
}
/* '일정' 은 그날 맨 위에, 눈에 띄게 */
.ncal-bar.pin {
  background: color-mix(in srgb, var(--bc) 88%, var(--surface));
  box-shadow: none; color: #fff; font-weight: 700;
}
.ncal-bar.pin .ncal-dot { background: rgba(255, 255, 255, .85); }
.ncal-bar.done { opacity: .5; }
.ncal-bar.done > span { text-decoration: line-through; }
/* 주를 넘어가는 막대는 잘린 쪽 모서리를 펴 준다 */
.ncal-bar.nohead {
  border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0;
}
.ncal-bar.nohead .ncal-dot { display: none; }
.ncal-bar.notail {
  border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0;
}

@media (max-width: 640px) {
  .ncal-bar { font-size: 10px; padding: 0 4px; gap: 3px; }
  .ncal-bar .ncal-dot { display: none; }
  .ncal-n { font-size: 11px; }
}

/* ===== 플래너 일간 상단 요약 ===== */
#pl-brief {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 2px 0 12px;
}
#pl-brief.hidden { display: none; }
.plb-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px;
}
.plb-chip b { color: var(--ink); font-weight: 700; }
.plb-dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--lc);
}
.plb-today .plb-bar {
  width: 52px; height: 5px; border-radius: 999px;
  background: var(--fill); overflow: hidden; display: inline-block;
}
.plb-today .plb-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--ios-blue);
}
.plb-od {
  border-color: color-mix(in srgb, #e2615c 45%, transparent);
  color: #c9463f;
}
.plb-pull {
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--ios-blue); border: 0; border-radius: 999px;
  padding: 5px 12px; cursor: pointer; font-family: inherit;
}
.plb-pull:hover { filter: brightness(1.08); }
.plb-x {
  border: 0; background: none; color: var(--ink-mute);
  font-size: 13px; cursor: pointer; padding: 3px 5px;
}
.sr-src { font-size: 11px; color: var(--ink-mute); margin-left: auto; }

/* ===== 백로그(미정) 열 ===== */
.pl-bk {
  border-left: 2px dashed var(--line) !important;
  background: color-mix(in srgb, var(--ink-mute) 5%, transparent);
}
.pl-col-h.pl-bk { color: var(--ink-mute); font-weight: 700; }
.pl-bkfill { pointer-events: none; }
.pl-daycell.pl-bk .pl-task { opacity: .92; }

/* ===== 중주제 메모 ===== */
.pl-note {
  border: 0; background: none; cursor: pointer;
  font-size: 11px; color: var(--ink-mute); opacity: 0;
  padding: 1px 3px; flex: none;
}
.pl-workname:hover .pl-note { opacity: .8; }
.pl-note.has { opacity: 1; color: var(--ios-blue); }
.wnote-pop {
  position: absolute; z-index: 400; width: 320px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
  padding: 10px;
}
.wnote-pop textarea {
  width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical;
  font: inherit; font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px;
  background: var(--bg); color: var(--ink);
}
.wnote-links { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.wnote-links a {
  font-size: 11.5px; color: var(--ios-blue); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wnote-links a:hover { text-decoration: underline; }
.wnote-foot {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
}
.wnote-hint { font-size: 10.5px; color: var(--ink-mute); }
.wnote-close {
  border: 0; border-radius: 999px; padding: 4px 12px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  background: var(--fill); color: var(--ink-soft);
}

/* ===== 미루기 날짜 팝업 ===== */
.defer-pop {
  position: absolute; z-index: 400; display: flex; flex-direction: column;
  gap: 2px; min-width: 150px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
  padding: 6px;
}
.defer-pop button {
  border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px;
  color: var(--ink);
}
.defer-pop button:hover { background: var(--fill); }
.defer-date {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--ink-soft); padding: 6px 10px;
  border-top: 1px solid var(--line); margin-top: 3px;
}
.defer-date input {
  border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px;
  font: inherit; font-size: 12px; background: var(--bg); color: var(--ink);
}

/* ===== 시간표 블록 메모 (1시간 이상 블록) ===== */
.tt-memo {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 1px 2px 3px 6px; padding: 2px 6px;
  font-size: 11.5px; line-height: 1.55; color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word;
  border-left: 2px solid color-mix(in srgb, var(--bc) 45%, transparent);
  border-radius: 3px; cursor: text; outline: none;
}
/* 메모가 있으면 제목 줄은 내용만큼만 — 남는 높이를 전부 메모가 쓴다 */
.tt-block:has(.tt-memo) .tt-line { flex: 0 0 auto; }
.tt-memo:focus {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
.tt-memo:empty::before {
  content: attr(data-ph);
  color: var(--ink-mute); opacity: .55;
}
.tt-block.done .tt-memo { opacity: .55; }

/* ===== 과업의 하위 단계 ===== */
.pl-task.pl-tsub {
  margin-left: 16px; opacity: .92;
}
.pl-task.pl-tsub .pl-ttext { font-size: 11px; }
.pl-task.pl-tsub .pl-subtick {
  color: var(--ink-mute); font-size: 10px; flex: none; padding-left: 2px;
}
.pl-subn {
  flex: none; font-size: 9.5px; font-weight: 800; color: var(--ink-mute);
  background: var(--fill); border-radius: 999px; padding: 1px 6px;
}
.pl-taddsub {
  position: absolute; right: 52px;
  border: 0; background: none; cursor: pointer;
  font-size: 11px; color: var(--ink-mute); padding: 1px 3px;
  opacity: 0;
}
.pl-task:hover .pl-taddsub { opacity: .85; }
.pl-taddsub:hover { color: var(--ios-blue); }
.pl-task.pl-tsub.new input {
  flex: 1; min-width: 0; font: inherit; font-size: 11px;
  border: 1px solid var(--ios-blue); border-radius: 5px; padding: 2px 6px;
  background: var(--surface); color: var(--ink); outline: none;
}

/* 터치: 블록·대기 목록 위에서도 화면 스크롤이 되도록 (드래그는 길게 눌러 시작) */
.tt-block, .tt-item { touch-action: pan-y; }
.tt-resize { touch-action: none; }
.tt-block.dragging {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  transform: scale(1.015);
}

/* ===== 시간표 확대/축소 ===== */
.tt-gridcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tt-zoom {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  font-size: 11px; font-weight: 700; color: var(--ink-mute);
}
.tt-zoom button {
  width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.tt-zoom button:hover { background: var(--fill); color: var(--ios-blue); }

/* ===== 새벽(00–06시) 구간 ===== */
.tt-dawnband {
  position: absolute; left: 0; right: 0; pointer-events: none;
  background: color-mix(in srgb, #5b86e5 6%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, #5b86e5 30%, transparent);
}
.tt-hour.dawn { border-top-color: color-mix(in srgb, #5b86e5 18%, var(--line)); }
.tt-hour.dawn span {
  color: color-mix(in srgb, #5b86e5 55%, var(--ink-mute));
  background: none;
}