/* 색 규칙: 파랑=미래·빨강=과거(의미색). 그래서 중립 UI(배경·강조)는 녹색 계열로. */
:root {
  color-scheme: dark; /* 네이티브 폼 컨트롤(숫자입력 스피너 등)을 테마에 맞춤 */
  --bg: #0e1512;     /* 다크 배경: 남색 대신 녹색-중립 */
  --card: #17211c;
  --card-2: #0b120f;
  --fg: #e8efe9;
  --muted: #8ea59a;
  --line: #2a3a32;
  --accent: #16a34a; /* 중립 강조 = 녹색(기본) */
  --future: #7ea8ff; /* 남은(미래)=파랑 HSL 240°. 등 WCAG 7.0(기본) */
  --past: #ff8675;   /* 지난(과거)=빨강 HSL 0°. 등 WCAG 7.0 */
  --ok: #16a34a;
  --err: #f87171;
  --track: #2a3a32;  /* 과거 빈 영역/rail(은은한 회색) */
  --remain: #0014ff; /* 미래 '남은시간 잔량'(파랑·도넛 남은부분) WCAG 2.0 */
  /* 컬러코딩(gen-palette.mjs+src/oklch.mjs): 고정 hue=HSL 0/120/240, 자유색 6개=HSL 전역 maximin[40,80,160,200,280,320] — 9색 40° 균등. 등 WCAG 7.0(기본). */
  --node-origin: #e69900;  /* 등록 HSL 40°(골드) WCAG 7.0 */
  --node-lap: #7bba00;     /* 랩(기록) HSL 80°(라임) WCAG 7.0 */
  --node-updated: #00c07f; /* 수정 HSL 160°(청록-초록) WCAG 7.0 */
  --node-end: #37b1ff;     /* 끝 HSL 200°(하늘) WCAG 7.0 */
  --node-start: #ff7cc0;   /* 시작 HSL 320°(핑크) WCAG 7.0 */
  --node-target: #ca90ff;  /* 기준 HSL 280°(보라) WCAG 7.0 */
  --node-now: #00c300;     /* 현재 HSL 120°(초록) WCAG 7.0 */
  --glow: #1a2b22;   /* 상단 은은한 글로우(녹색-중립, 남색 아님) */
  --fab2: #2b3036;   /* 보조 FAB: 무채색·불투명 */
  --fab2-fg: #d7dde2;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.28);
  --elev: rgba(255, 255, 255, 0.06); /* hover 등 미세 밝힘 */
  /* 편집 가능 어포던스용 연필 아이콘(mask로 색만 입힘) */
  --pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

/* 라이트 테마: 녹색-중립 밝은 팔레트(미래/과거 의미색만 유지, 강조색은 사용자 인라인 우선) */
[data-theme='light'] {
  color-scheme: light; /* 라이트 테마: 네이티브 컨트롤도 라이트 */
  --bg: #eef4f0;
  --card: #ffffff;
  --card-2: #e6eee9;
  --fg: #16201b;
  --muted: #56685e;
  --line: #d2ded6;
  --accent: #16a34a;
  --future: #0038ff; /* 미래=파랑 HSL 240°. 등 WCAG 7.0(기본) */
  --past: #b60000;   /* 과거=빨강 HSL 0°. 등 WCAG 7.0 */
  --ok: #16a34a;
  --err: #dc4446;
  --track: #d8e3dc;  /* 과거 빈 영역/rail(은은) */
  --remain: #95b7ff; /* 미래 '남은시간 잔량'(파랑·도넛 남은부분) WCAG 2.0 */
  /* 컬러코딩(라이트): 고정 hue=HSL 0/120/240, 자유색 6개=HSL 전역 maximin[40,80,160,200,280,320] — 9색 40° 균등. 등 WCAG 7.0(기본). */
  --node-origin: #7c5000;  /* 등록 HSL 40°(골드) WCAG 7.0 */
  --node-lap: #3f6300;     /* 랩(기록) HSL 80°(라임) WCAG 7.0 */
  --node-updated: #006741; /* 수정 HSL 160°(청록-초록) WCAG 7.0 */
  --node-end: #005d90;     /* 끝 HSL 200°(하늘) WCAG 7.0 */
  --node-start: #ac0071;   /* 시작 HSL 320°(핑크) WCAG 7.0 */
  --node-target: #8a00d0;  /* 기준 HSL 280°(보라) WCAG 7.0 */
  --node-now: #006900;     /* 현재 HSL 120°(초록) WCAG 7.0 */
  --glow: #ffffff;
  --fab2: #eceef2;
  --fab2-fg: #3a414a;
  --card-shadow: 0 1px 2px rgba(16, 26, 22, 0.08), 0 8px 24px rgba(16, 26, 22, 0.08);
  --elev: rgba(16, 26, 22, 0.05);
}

* { box-sizing: border-box; }

/* 스크롤바: 다크/라이트 테마 모두 중립(테마 변수로 자동 적응) */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: transparent; }

/* 스크린리더 전용(시각적으로 숨김) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 1.25rem 1.25rem 5.5rem; /* 하단 여백: FAB가 마지막 카드를 가리지 않도록 */
  background: radial-gradient(1200px 600px at 50% -10%, var(--glow) 0%, var(--bg) 60%);
  color: var(--fg);
  font-family: system-ui, "Segoe UI", "Malgun Gothic", sans-serif;
}

.app {
  width: min(100%, 32rem); /* 모바일 우선: 단일 컬럼(PC 다열 그리드는 보류) */
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* ── 추가 영역 ───────────────────────────── */
.add { display: flex; flex-direction: column; gap: 0.7rem; }

.add__label {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  font-size: 1rem;
}
.add__label:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 추가 패널: 텍스트입력 · 제목입력 · 선택기 — 3영역을 카드로 분리(현대 iOS 톤) */
.addzone {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.addzone__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.addzone__title {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.9rem; font-weight: 700; color: var(--fg);
}
.addzone__icon { width: 1.05rem; height: 1.05rem; color: var(--accent); flex: none; }
.addzone__opt { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.addzone__tools { display: inline-flex; align-items: center; gap: 0.35rem; }
/* '지원 형식' 펼침 버튼: 평소 숨긴 형식 도움말을 따로 펼침 */
.addzone__help {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.addzone__help:hover { color: var(--accent); border-color: var(--accent); }
.addzone__help[aria-expanded='true'] { color: var(--accent); border-color: var(--accent); }

/* '지금' 버튼: 현재시각을 기준일시에 채움(모바일 키보드 Enter 한계 보완) */
.zone__now {
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.zone__now:hover { color: var(--accent); border-color: var(--accent); }
.add__form { display: flex; flex-direction: column; gap: 0.7rem; }

.zone__input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  font-size: 1rem;
}
.zone__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.zone__preview { margin: 0; font-size: 0.85rem; min-height: 1.2em; font-variant-numeric: tabular-nums; }
.preview--idle { color: var(--muted); }
.preview--ok { color: var(--ok); }
.preview--err { color: var(--err); }

.zone__apply {
  align-self: flex-start;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--accent);
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.zone__apply:hover { filter: brightness(1.08); }

/* 지원 형식 도움말: '지원 형식' 버튼 옆에 뜨는 팝오버(평소 hidden, body로 옮겨 fixed 배치). */
.add__formats {
  position: fixed;
  z-index: 70;
  max-height: min(60vh, 22rem);
  overflow: auto;
  font-size: 0.78rem; color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: 0.7rem 0.85rem;
}
.add__formats[hidden] { display: none; }
.add__formats ul { margin: 0; padding-left: 1.1rem; line-height: 1.7; }
.add__formats code {
  background: var(--card-2);
  padding: 0.05rem 0.3rem;
  border-radius: 0.3rem;
  color: var(--fg);
}

/* 달력 선택기: 한 행 3열 — 연도(10칩 십년뷰+입력) | 월(2열 칩) | 일(달력). Apple/Google 톤 */
.pick { display: flex; flex-direction: column; gap: 0.5rem; }
.pick__cols { display: flex; gap: 0.4rem; align-items: stretch; }
.pick__sect { display: flex; flex-direction: column; gap: 0.28rem; }
.pick__sect:nth-child(1) { flex: none; width: 5.6rem; }
.pick__sect:nth-child(2) { flex: none; width: 4.7rem; }
.pick__sect--day { flex: 1; min-width: 0; }
/* 열 헤더(연도/월/일): 둥근 사각형으로 각 열의 가로 시작~끝을 분명히 */
.pick__collabel {
  text-align: center; font-size: 0.62rem; font-weight: 700; color: var(--muted); letter-spacing: 0.08em;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.16rem 0;
}
.pick__yrnav { display: flex; align-items: center; gap: 0.15rem; }
.pick__yinput {
  flex: 1; min-width: 0;
  padding: 0.2rem 0.1rem; border-radius: 0.35rem;
  border: 1px solid var(--line); background: var(--card-2); color: var(--fg);
  font-size: 0.72rem; text-align: center; font-variant-numeric: tabular-nums; font-family: inherit;
}
.pick__yinput:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 연/월 칩 그리드: 일(6주 고정) 높이에 맞춰 늘어나 정렬(빈 공간 최소·버튼 위치 고정) */
.pick__years,
.pick__months { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; flex: 1; grid-auto-rows: 1fr; }
.pick__opt {
  display: flex; align-items: center; justify-content: center;
  min-height: 1.4rem;
  padding: 0.1rem 0; border: 1px solid var(--line); border-radius: 0.35rem;
  background: var(--card-2); color: var(--fg); font-size: 0.72rem;
  text-align: center; font-variant-numeric: tabular-nums; font-family: inherit; cursor: pointer;
}
.pick__opt:hover { border-color: var(--accent); }
.pick__opt--now { box-shadow: inset 0 0 0 1.5px var(--accent); } /* 오늘 연/월: 은은한 링 */
.pick__opt--sel { background: var(--accent); color: #fff; font-weight: 700; border-color: var(--accent); box-shadow: none; }
/* 일 열: 헤더(« ‹ [연/월] › ») — 버튼이 빈 공간을 채워 넓게(터치 쉽게)·라벨에 밀착 */
.pick__mnav { display: flex; align-items: stretch; gap: 2px; }
.pick__mnav .pick__navbtn { flex: 1; min-width: 0; } /* 양쪽 버튼이 남는 폭을 균등하게 채움 */
.pick__mlabel {
  flex: 0 1 auto; align-self: center; text-align: center;
  padding: 0 0.25rem;
  font-weight: 700; font-size: 0.7rem; color: var(--fg);
  white-space: nowrap; overflow: hidden;
}
.pick__navbtn {
  flex: none; background: var(--card-2); border: 1px solid var(--line); color: var(--fg);
  border-radius: 0.35rem; padding: 0.18rem 0.22rem; cursor: pointer; font-size: 0.8rem; line-height: 1.2;
}
.pick__navbtn:hover { border-color: var(--accent); color: var(--accent); }
.pick__navbtn:active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.pick__grid .cal__wd { text-align: center; font-size: 0.54rem; color: var(--muted); }
.pick__day {
  min-height: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid transparent; border-radius: 0.3rem;
  color: var(--fg); font-size: 0.68rem; font-variant-numeric: tabular-nums; cursor: pointer;
}
.pick__day:hover { border-color: var(--accent); }
.pick__day--out { opacity: 0.32; }
.pick__day--today { box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 700; }
.pick__day--sun { color: var(--past); }
.pick__day--sat { color: var(--future); }
.pick__day--sel { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.pick__day--sel.pick__day--sun, .pick__day--sel.pick__day--sat { color: #fff; }
.pick__timerow { display: flex; align-items: center; gap: 0.5rem; }
.pick__timelabel { font-size: 0.78rem; color: var(--muted); flex: none; }
.pick__time {
  flex: 1; min-width: 0;
  padding: 0.3rem 0.5rem; border-radius: 0.45rem;
  border: 1px solid var(--line); background: var(--card-2); color: var(--fg); font-size: 0.85rem;
}
.pick__time:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pick__sel { margin: 0; font-size: 0.76rem; color: var(--accent); }
.pick__sel[data-ok='no'] { color: var(--past); }

/* 단축키 표기용 키캡 */
kbd {
  display: inline-block;
  font-family: inherit;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  box-shadow: 0 1px 0 var(--line);
}
.drawer__kbd { font-size: 0.75rem; padding: 0.05rem 0.4rem; color: var(--muted); vertical-align: middle; }

/* ── 카운트다운 목록 ──────────────────────── */
.list { display: flex; flex-direction: column; gap: var(--list-gap, 0.6rem); }

/* 카드: 중립 얇은 테두리 + 부드러운 그림자(현대적). 방향색은 좌측 얇은 액센트 바로만. */
/* 카드 = 4열 가로 구성: [좌 레일] [본문] [우 레일].
   좌/우 레일은 상하 2등분(좌: 핸들/숨기기, 우: ✕/예비). 본문은 가운데 가변폭. */
.card {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: var(--card-shadow);
  overflow: hidden; /* 레일 호버 배경이 카드 라운드 밖으로 새지 않게 */
}

/* 좌/우 레일: 세로로 2등분된 액션 칸. 추후 버튼을 더 쌓을 수 있는 영역. */
.card__rail {
  flex: none;
  width: 2.05rem;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.card__rail--left { border-right: 1px solid var(--line); }
.card__rail--right { border-left: 1px solid var(--line); }
/* 레일 칸(버튼·예비 슬롯) 공통: 상하 2등분, 가운데 정렬 */
.card__rail > * {
  flex: 1 1 0;
  min-height: 1.85rem;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--muted);
}
/* 위/아래 칸 사이 옅은 구분선(2등분이 보이게) */
.card__rail > * + * { border-top: 1px solid var(--line); }
.card__railicon { width: 1.15rem; height: 1.15rem; }
.card__railspare { cursor: default; } /* 추후 기능용 빈 슬롯 */

/* 본문: 상단 히어로(도넛+시간+타임라인) → 구분선 → 2열(제목 / 랩) + 인라인 에디터 */
.card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.4rem 0.55rem;
}

/* 상단 히어로: 도넛+큰시간 묶음 → 바로 아래 타임라인. 타임라인이 카드 주역. */
.card__hero { display: flex; flex-direction: column; }
/* 히어로 줄: 위치 컨텍스트(높이만 확보). heroFront를 채움 영역 중앙 위로 절대배치.
   상단 크기 배율(--hero-scale, 설정)에 따라 예약 높이도 함께 커짐. */
.card__heroline { position: relative; min-height: calc(2.1rem * var(--hero-scale, 1)); }
/* 도넛(진행률)+큰시간(+방향칩) 묶음 — renderViz가 left(채움 중앙%)를 인라인으로 지정, 화면 밖 안 나가게 클램프 */
.card__herofront {
  position: absolute;
  top: 50%;
  left: 50%; /* JS가 채움 중앙 %로 덮어씀(기본=가운데) */
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  white-space: nowrap;
}

/* 2열 구성: 좌(제목·일시·태그) / 우(랩 기록). 둘 다 상단 정렬. 위 히어로와 구분선으로 분리.
   grid + minmax(0,1fr): 콘텐츠가 트랙을 넘쳐 카드를 늘리지 못하게(blowout 방지). */
.card__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 좌·우 가로폭 동일 */
  align-items: stretch; /* 두 열 높이를 같게 → 중앙 구분선이 카드 전체 높이를 채움(내용은 상단 정렬 유지) */
  gap: 0;
  border-top: 1px solid var(--line); /* 히어로와 2열 사이 구분선 */
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* 숨긴 카드(숨김 보기 모드에서만 표시): 흐리게 + 점선 테두리로 구분 */
.card--hidden { opacity: 0.55; border-style: dashed; }
.card--hidden:hover { opacity: 0.8; }
.card__col { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
/* 좌측 열 오른쪽에 중앙 구분선. 진행률 바도 이 선을 넘지 않음. */
.card__col--left { gap: 0.16rem; border-right: 1px solid var(--line); padding-right: 0.7rem; }
.card__col--right { gap: 0.28rem; padding-left: 0.7rem; }
.card.display--future { border-left-color: var(--future); }
.card.display--past { border-left-color: var(--past); }

/* 제목: 클릭하면 바로 수정되는 버튼(평소엔 텍스트처럼). 우측에 [제목] 칩. 클릭 영역=글자 폭. */
.card__label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0.05rem 0;
  border: none;
  background: none;
  border-radius: 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--fg); /* 제목을 또렷하게 → 큰 시간(우)과 균형 */
  text-align: left;
  cursor: pointer;
}
.card__label:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.card__label:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.card__label--empty { font-weight: 500; font-style: italic; opacity: 0.7; }
.card__labeltext { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__label .chip { flex: none; } /* [제목] 칩은 항상 보이고 제목 텍스트만 잘림 */

/* 클릭=편집 어포던스: 연필 아이콘(평시 muted, 호버 시 accent). 점선보다 또렷·세련.
   ※ 도넛(.card__progress)은 연필 없이 클릭만으로 편집(사용자 요청) → 목록에서 제외. */
.card__label::after,
.card__meta::after {
  content: '';
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--muted);
  -webkit-mask: var(--pencil) center / contain no-repeat;
  mask: var(--pencil) center / contain no-repeat;
  opacity: 0.45;
  transition: opacity 0.12s, background 0.12s;
}
.card__label:hover::after,
.card__meta:hover::after { background: var(--accent); opacity: 1; }
.card__label--empty::after { display: none; } /* '＋ 제목'이면 ＋가 이미 안내 */

.card__time {
  display: block;
  min-width: 0; /* 히어로 줄에서 축소 가능 → fitTime이 오버플로우 감지·축소 */
  max-width: 100%;
  text-align: center; /* 히어로 중앙 스택 */
  overflow: hidden;
  white-space: nowrap; /* 한 줄 유지 → 넘치면 fitTime이 폰트 축소 */
  font-size: calc(var(--card-time-size, 1.3rem) * var(--hero-scale, 1)); /* 상단 크기 배율(설정) */
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.card__num { white-space: nowrap; }
/* 방향 칩은 시간 폰트에 비례(em) → 축소 시 함께 줄어 오버플로우 방지 */
.card__time .chip { font-size: 0.42em; padding: 0.05em 0.45em; vertical-align: middle; }
.card.display--future .card__time { color: var(--future); }
.card.display--past .card__time { color: var(--past); }

.display__sign { font-weight: 800; margin-right: 0.12em; }

/* 남은 시간 진행률(미래 카드만): 바·파이. data-style로 표시 제어 */
.card__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0; /* 히어로 줄 안에서 큰시간과 나란히 */
  cursor: pointer;
}
.card__progress[hidden] { display: none; }
/* 도넛 파이: 원 테두리=진행, 가운데 구멍에 % 표시(파이+퍼센트 합침). 클릭=진행 시작점 편집(연필 없음). */
.card__pie {
  position: relative;
  flex: none;
  width: calc(2rem * var(--hero-scale, 1)); /* 상단 크기 배율(설정) */
  height: calc(2rem * var(--hero-scale, 1));
  border-radius: 50%;
  background: conic-gradient(var(--future) 0%, var(--remain) 0);
  display: grid;
  place-items: center;
}
.card__pie::before {
  content: '';
  position: absolute;
  inset: 13%; /* 구멍 키워 링을 얇게 + 가운데 % 공간 확보 */
  border-radius: 50%;
  background: var(--card);
}
.card__pielabel {
  position: relative; /* 구멍 위에 % */
  font-size: calc(0.62rem * var(--hero-scale, 1)); /* 상단 크기 배율(설정) */
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--future);
  line-height: 1;
}
/* 독립 퍼센트 텍스트(도넛과 별개 토글, 기본 off) */
.card__pct {
  font-size: calc(0.82rem * var(--hero-scale, 1)); /* 상단 크기 배율(도넛·시간과 함께) */
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--future);
  line-height: 1.1;
}
.card__pct[hidden], .card__pie[hidden] { display: none; }

/* 전체폭 시각화 밴드(히어로 안, 큰시간 아래): 트랙(+미래 채움) + ▲마커 + 충돌회피 라벨.
   미래=진행바+시작/현재/기준, 과거=등록/수정/기준/현재 타임라인. */
.card__viz { margin-top: 0.35rem; }
.card__viz[hidden] { display: none; }
.card__viz--editable, .card__viz--past { cursor: pointer; } /* 미래=시작점 편집 / 과거=끝 지정 */
.card__viz-bar { position: relative; height: 0.95rem; }
.card__viz-track {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0.15rem;
  height: 6px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}
/* 채움: 미래=청색(시작→현재), 과거=적색(기준→현재). left/width는 renderViz가 인라인. */
.card__viz-fill { position: absolute; top: 0; height: 100%; background: var(--future); border-radius: 999px; }
.card__viz--past .card__viz-fill { background: var(--past); }
/* 미래 '남은 시간'(현재→기준): 도넛 남은부분과 동일한 --remain(파랑). 과거 빈 영역(--track)과 구분 */
.card__viz-fill--rest { background: var(--remain); }
/* ▲ 마커: 트랙 아래에서 위(트랙)를 가리키는 삼각형, 점 위치(left%)에 */
.card__vizmark {
  position: absolute;
  top: 0.5rem;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--muted);
}
/* 라벨(이름 + 컴팩트 일시): 가로로 길게. 이름은 마커 옆, 시간은 기본 우측(우측이 좁으면 좌측).
   겹치면 renderViz가 top으로 단을 내린다. */
.card__viz-labels { position: relative; margin-top: 0.15rem; }
.card__vizlabel {
  position: absolute;
  transform: translateX(-50%); /* ▲ 마커 바로 아래 중앙 정렬 */
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
  cursor: pointer; /* 클릭 → 해당 일시를 제목 아래에 표시(토글) */
}
.card__vizlabel b { font-size: 0.56rem; font-weight: 800; } /* 이름(색). 타임스탬프·툴팁 없음(클릭 시 제목 아래 표시) */
/* 색(이름): 고정 빨/초/파 + 자유 HSL maximin. 등록=노랑·수정=청록·기준=보라·시작=핑크·현재=초록 */
.tl--created.card__vizmark { border-bottom-color: var(--node-origin); }
.tl--created.card__vizlabel b { color: var(--node-origin); }
.tl--start.card__vizmark { border-bottom-color: var(--node-start); }
.tl--start.card__vizlabel b { color: var(--node-start); }
.tl--updated.card__vizmark { border-bottom-color: var(--node-updated); }
.tl--updated.card__vizlabel b { color: var(--node-updated); }
.tl--target.card__vizmark { border-bottom-color: var(--node-target); }
.tl--target.card__vizlabel b { color: var(--node-target); }
.tl--now.card__vizmark { border-bottom-color: var(--node-now); }
.tl--now.card__vizlabel b { color: var(--node-now); }
.tl--lap.card__vizmark { border-bottom-color: var(--node-lap); }
.tl--lap.card__vizlabel b { color: var(--node-lap); }
.tl--end.card__vizmark { border-bottom-color: var(--node-end); }
.tl--end.card__vizlabel b { color: var(--node-end); }

/* ── 타임라인 카드: 멤버마다 자기 타임라인 바(시작~끝)를 같은 x축 위에 쌓기(간트식) ──
   라벨·채움 = 의미 고정색(미래=파랑·잔량 흐린 파랑 / 과거=빨강), 초록 세로선 = 공유 현재. */
.card__tlboard { position: relative; padding-top: 0.75rem; padding-bottom: 0.7rem; } /* 상단='현재' 라벨, 하단=축 경계 날짜 자리 */
/* 축 경계(첫·마지막 timestamp) 수직선 + 하단 날짜 라벨(안쪽으로 붙여 잘림 방지) */
.tlboard__edge { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tlboard__edge i {
  position: absolute;
  bottom: 0;
  font-style: normal;
  font-size: 0.5rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
}
.tlboard__edge--min i { left: 4px; }
.tlboard__edge--max i { right: 4px; }
/* 타임라인 카드/보드 = 일반 카드와 '다른 종류': ①다른 표면색(--card-2) ②상단 전체폭
   헤더 스트립(아이콘+종류명) ③점선 테두리 — 세 겹의 시각 문법으로 확실히 분리. */
.card--timeline { border-style: dashed; background: var(--card-2); }
.card__kind {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  align-self: stretch; /* 본문 전체폭 헤더 스트립 */
  margin: -0.5rem -0.4rem 0.4rem; /* 본문 패딩 상쇄 → 카드 상단·좌우 끝까지 */
  padding: 0.3rem 0.6rem;
  border-bottom: 1px dashed var(--line);
  background: var(--elev);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.card--board .card__kind { margin: -0.5rem -0.7rem 0.4rem; } /* 보드 본문 패딩(0.7rem)에 맞춤 */
.card__kindicon { width: 0.7rem; height: 0.7rem; flex: none; }
/* 현재 세로선: 하단 축 날짜 라벨 영역(padding-bottom) 위에서 멈춰 텍스트와 겹치지 않게 */
.tlboard__now { position: absolute; top: 0; bottom: 0.7rem; width: 1px; background: var(--node-now); opacity: 0.85; }
.tlboard__now i {
  position: absolute;
  top: 0;
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap; /* 1px 세로선 안에서 '현재'가 세로로 줄바꿈되지 않게 */
  color: var(--node-now);
}
/* 현재 라벨은 세로선과 겹치지 않게 옆으로: 선이 우측(>50%)이면 왼쪽에, 아니면 오른쪽에 */
.tlboard__now--l i { right: 4px; }
.tlboard__now--r i { left: 4px; }

/* 붙박이 보드(목록 첫 카드): 레일 없는 슬림 카드 + 행별 눈 버튼 + 숨김 토글 */
.card--board .card__body { padding: 0.5rem 0.7rem 0.4rem; }
.tlrow--dim { opacity: 0.45; }
.tlrow__eye {
  position: absolute;
  right: 0;
  top: 0.75rem;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0 0.05rem;
  color: var(--muted);
  cursor: pointer;
}
.tlrow__eye .card__railicon { width: 0.7rem; height: 0.7rem; }
.tlrow__eye:hover { color: var(--fg); }
.tlrow__eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tlboard__hiddenbtn {
  display: block;
  margin: 0.15rem auto 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.6rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tlboard__hiddenbtn:hover { color: var(--fg); }

/* 파일 동기화(설정 드로어): 내보내기/가져오기 버튼 칩 + 상태줄 */
.syncrow { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.syncrow + .syncrow { margin-top: 0.3rem; }
.sync-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.06rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--card-2);
  color: var(--fg);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  text-align: left;
}
.sync-btn small { font-size: 0.55rem; color: var(--muted); font-weight: 400; }
.sync-btn:hover { border-color: var(--muted); }
.sync-btn--danger { border-color: var(--past); color: var(--past); }
.sync-btn--danger small { color: var(--past); opacity: 0.75; }
.sync-status { margin: 0.25rem 0 0; font-size: 0.62rem; color: var(--muted); min-height: 0.8rem; }

/* 선택 모드 툴바의 '설정 포함' 토글(내보내기 선택 모드 전용) */
.select-bar__opt {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.select-bar__opt[aria-pressed='true'] { color: var(--accent); border-color: var(--accent); }
.tlrow { position: relative; height: 1.7rem; cursor: pointer; }
.tlrow__label {
  position: absolute;
  top: 0.1rem;
  transform: translateX(-50%);
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.56rem;
  font-weight: 800;
}
.tlrow__label--future { color: var(--future); }
.tlrow__label--past { color: var(--past); }
.tlrow__track, .tlrow__seg { position: absolute; top: 1rem; height: 0.4rem; border-radius: 999px; }
.tlrow__track { background: var(--track); }
.tlrow__seg--f { background: var(--future); } /* 미래 경과(진행 시작→현재) */
.tlrow__seg--r { background: var(--remain); } /* 미래 잔량(현재→기준) */
.tlrow__seg--p { background: var(--past); }   /* 과거 지난시간(기준→현재/끝) */
.tlrow:hover .tlrow__label { text-decoration: underline; }
.card--timeline .card__cols { grid-template-columns: minmax(0, 1fr); } /* 랩 열 없음 → 한 열 */
.card--timeline .card__col--left { border-right: none; padding-right: 0; }
.tlcard__empty { margin: 0.2rem 0; font-size: 0.7rem; color: var(--muted); }
/* 멤버 선택 버튼: 점선 칩(태그 추가 칩과 같은 어포던스 계열) */
.card__members {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.08rem 0.5rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.6rem;
  cursor: pointer;
}
.card__members:hover { color: var(--fg); border-color: var(--muted); }
.card__members:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 기준일시: 값(자르기) + [기준일시] 칩(고정). 칩이 항상 보이도록 날짜만 줄어든다. */
.card__meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0.05rem 0;
  border: none;
  background: none;
  border-radius: 0.35rem;
  font-size: var(--card-meta-size, 0.64rem);
  font-family: inherit;
  color: var(--muted);
  text-align: left;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.card__meta[hidden] { display: none; } /* display:flex가 UA [hidden]을 덮으므로 명시(기준일시 기본 숨김) */
.card__metadate { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__meta .chip { flex: none; } /* 칩은 안 줄어듦 → 항상 표시 */
.card__meta:hover { color: var(--fg); }
.card__meta:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 카드 내 행(요소 + 칩) */
.card__row { display: flex; align-items: center; gap: 0.5rem; }
/* 등록/수정일시: 좌측 열에서 한 줄 자르기 */
.card__row--date { gap: 0.3rem; overflow: hidden; white-space: nowrap; }
.card__row--date[hidden] { display: none; }
.card__row--date .chip { flex: none; } /* 칩 고정 → 항상 표시 */
.card__datemeta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--card-meta-size, 0.64rem); color: var(--muted); font-variant-numeric: tabular-nums; }

/* 제목 아래 일시 행(타임라인 노드 클릭으로 카드별 토글): [값 + 색칩] [숨기기(눈)] [연필(편집·현재 제외)]. */
.card__daterow { display: flex; align-items: center; gap: 0.25rem; }
.card__daterow .chip { flex: none; } /* 색칩 고정 → 값만 줄어듦 */
/* 아이콘 버튼 공통(눈·연필): 작은 무채색, 호버 시 또렷. 순서는 DOM(숨기기→연필). */
.card__datehide,
.card__dateedit {
  flex: none;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 0.3rem;
}
.card__datehide .card__railicon { width: 0.85rem; height: 0.85rem; }
.card__pencilicon { /* 연필(mask로 색 입힘, 테마 대응) */
  width: 0.8rem;
  height: 0.8rem;
  background: currentColor;
  -webkit-mask: var(--pencil) center / contain no-repeat;
  mask: var(--pencil) center / contain no-repeat;
}
.card__datehide:hover,
.card__dateedit:hover { color: var(--fg); background: var(--elev); }
.card__datehide:focus-visible,
.card__dateedit:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 작은 라벨 칩(pill) */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.04rem 0.4rem;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--card-2);
  color: var(--muted);
  border: 1px solid var(--line);
  vertical-align: middle;
}
.chip--future { color: var(--future); border-color: var(--future); }
.chip--past { color: var(--past); border-color: var(--past); }
/* 일시 칩 색상코드(타임라인 노드 팔레트): 시작=핑크·등록=노랑·수정=청록·기준=보라·현재=초록 */
.chip--target { color: var(--node-target); border-color: var(--node-target); }
.chip--origin { color: var(--node-origin); border-color: var(--node-origin); }
.chip--updated { color: var(--node-updated); border-color: var(--node-updated); }
.chip--start { color: var(--node-start); border-color: var(--node-start); }
.chip--now { color: var(--node-now); border-color: var(--node-now); }
.chip--lap { color: var(--node-lap); border-color: var(--node-lap); }
.chip--end { color: var(--node-end); border-color: var(--node-end); }

/* 우측 레일 상단: 삭제(✕) */
.card__del {
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.card__del:hover { color: var(--past); background: rgba(248, 113, 113, 0.14); }

/* 좌측 레일 하단: 숨기기/보이기 */
.card__hide { cursor: pointer; }
.card__hide:hover { color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.card--hidden .card__hide { color: var(--accent); }

/* 우측 레일 하단: 기록(랩) 버튼 — 다른 레일 아이콘(≡·눈·✕)과 동일한 무채색(강조색 제거). */
.card__lap { cursor: pointer; }
.card__lap:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.card__lap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* 기록(랩) 목록: 우측 열에서 좁으면 줄바꿈. 2개 이상이면 최근 1개만 + 더보기. */
/* 기록(랩) 목록: 우측 열(zone3) 하단. 좁은 열에 맞춰 컴팩트·무채색. */
.card__laps {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 단일 열이 0까지 줄어들 수 있게 → 칩이 열 밖으로 안 밀림 */
  gap: 0.25rem;
}
.card__laps[hidden] { display: none; }
.lap {
  display: flex;
  align-items: stretch; /* 본문과 삭제 열 높이를 맞춰 삭제 ✕를 세로 중앙에 */
  gap: 0.1rem;
  min-width: 0; /* 좁은 열에서 내용이 넘쳐 칩이 잘리지 않도록 */
  font-size: var(--card-lap-size, 0.64rem);
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding: 0.1rem 0 0.1rem 0.4rem;
}
/* 편집 가능한 두 값(상대시간·기준일시): 세로로 쌓고 각 줄에 연필 어포던스. */
.lap__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.08rem; }
/* 랩 번호 + 타임라인 눈 토글 줄: [랩N 칩] ─ [눈] (타임라인 노드와 목록 행을 잇는 식별자) */
.lap__head { display: flex; align-items: center; justify-content: space-between; gap: 0.2rem; }
.lap__head .chip { flex: none; font-size: 0.4rem; padding: 0.02rem 0.24rem; }
.lap__tl {
  flex: none;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0 0.1rem;
  color: var(--muted);
  cursor: pointer;
}
.lap__tl .card__railicon { width: 0.7rem; height: 0.7rem; }
.lap__tl:hover { color: var(--fg); }
.lap__tl[aria-pressed='true'] { color: var(--node-lap); } /* 타임라인 표시 중 = 랩 색 */
.lap__tl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lap__edit {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
/* 상대시간 줄: 무채색·굵게 + 방향 칩(우측). 색 대신 부호·칩 텍스트로 방향 표시. */
.lap__val {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.lap__val .display__sign { font-weight: 700; margin-right: 0.04em; }
.lap__edit--rel .chip,
.lap__edit--target .chip { flex: none; font-size: 0.4rem; padding: 0.02rem 0.24rem; }
/* 기준일시 줄: 값(자르기) + [기준일시] 칩(우측 고정) */
.lap__edit--target .lap__edittext { flex: 1 1 auto; }
.lap__edittext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 연필 어포던스(작게): 값은 자르고 칩·연필은 고정. */
.lap__edit::after {
  content: '';
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--muted);
  -webkit-mask: var(--pencil) center / contain no-repeat;
  mask: var(--pencil) center / contain no-repeat;
  opacity: 0.45;
  transition: opacity 0.12s, background 0.12s;
}
.lap__edit:hover { color: var(--fg); }
.lap__edit:hover::after { background: var(--accent); opacity: 1; }
.lap--more { border-left-color: transparent; padding-left: 0.5rem; }
.lap__more {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.74rem;
  padding: 0.05rem 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lap__more:hover { color: var(--fg); }
/* 삭제(✕): 독립 열로 분리 — 구분선 + 세로 중앙 정렬 */
.lap__del {
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-left: 1px solid var(--line);
  margin-left: 0.1rem;
  padding: 0 0.2rem;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
}
.lap__del:hover { color: var(--past); }
.lap__del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 제목/기준일시 인라인 에디터 (카드 밀도에 맞춰 컴팩트) */
.card__editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
/* 무엇을 수정하는지 알려주는 라벨(전체폭 첫 줄, accent로 또렷) */
.card__editlabel { flex-basis: 100%; margin: 0; font-size: 0.7rem; font-weight: 700; color: var(--accent); }
/* 수정 중인 원본 필드를 강조해 에디터와 시각적으로 연결(inset → overflow에 안 잘림) */
.card[data-editing='title'] .card__label,
.card[data-editing='date'] .card__meta,
.card[data-editing='start'] .card__progress {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  border-radius: 0.35rem;
}
.card__editinput {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 0.3rem 0.45rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  font-size: 0.76rem;
}
/* 기준일시 자유입력 해석 결과 라이브 미리보기(에디터 줄바꿈 위치) */
.card__editpreview { flex-basis: 100%; margin: 0; font-size: 0.68rem; color: var(--muted); }
.card__editpreview[data-ok='yes'] { color: var(--future); }
.card__editpreview[data-ok='no'] { color: var(--past); }
.card__editinput[aria-invalid='true'] { border-color: var(--err); }
.card__save,
.card__cancel {
  padding: 0.3rem 0.6rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line);
  font-size: 0.74rem;
  cursor: pointer;
}
.card__save { background: var(--accent); color: #fff; border-color: transparent; }
.card__cancel { background: var(--card-2); color: var(--muted); }

.hint { margin: 0; text-align: center; color: var(--muted); font-size: 0.85rem; }
/* 빈 상태: 충분한 여백으로 의도된 화면처럼 보이게 */
#empty-hint { padding: 2.75rem 1rem; font-size: 0.9rem; line-height: 1.6; }
#empty-hint[hidden] { display: none; }

/* ── 드래그 핸들 / 드래그 중 카드 ─────────────── */

/* 카드 왼쪽 전체 높이를 잡는 그립 → 터치 타깃 충분 */
/* 좌측 레일 상단: 드래그 핸들 */
.card__handle {
  line-height: 1;
  cursor: grab;
  touch-action: none; /* 터치 드래그가 페이지 스크롤로 새지 않도록 */
}
.card__handle:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.card__handle:active { cursor: grabbing; }
.card__handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* 포인터를 따라다니는 '들린' 클론 */
.card--drag-clone {
  position: fixed;
  margin: 0;
  z-index: 60;
  pointer-events: none;
  transform: scale(1.03) rotate(-0.4deg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  opacity: 0.97;
  cursor: grabbing;
}
/* 원본이 남긴 빈 자리: 높이는 유지하고 내용은 감춰 점선 슬롯으로 보여줌 */
.card--placeholder {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.03);
}
.card--placeholder > * { visibility: hidden; }
/* 드래그 중 페이지 전체: 커서·선택 방지 */
body.dragging-active { cursor: grabbing; user-select: none; }

/* ── 플로팅 추가 버튼(FAB) ────────────────────── */
.fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 3.5rem;
  height: 3.5rem;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  z-index: 30;
}
.fab:hover { filter: brightness(1.08); }
.fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* FAB 아이콘(인라인 SVG): currentColor 상속 → 보조는 무채색(--fab2-fg), 대표(추가)는 흰색 */
.fab__icon { width: 1.5rem; height: 1.5rem; display: block; }
.fab__icon--add { width: 1.7rem; height: 1.7rem; }

/* FAB 우상단 단축키 키캡(항상 보이게 표기) */
.fab__key {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.2rem;
  font-size: 0.68rem;
  line-height: calc(1.05rem - 2px);
  text-align: center;
  color: var(--fg);
  background: var(--card-2);
  box-shadow: none;
}

/* 보조 FAB(설정·조합·캘린더): 추가 ＋ 버튼 위로 쌓임, 살짝 작고 차분한 색 */
.fab--settings,
.fab--groups,
.fab--calendar {
  width: 3rem;
  height: 3rem;
  font-size: 1.35rem;
  background: var(--fab2); /* 무채색·불투명 */
  color: var(--fab2-fg);
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  right: calc(max(1rem, env(safe-area-inset-right)) + 0.25rem);
}
.fab--settings { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem); }
/* 태그 기능은 현재 거의 안 써서 숨김(M78). 코드·데이터는 유지 — 복원은 display 한 줄. */
.fab--groups { display: none; }
.fab--calendar {
  font-size: 1.2rem;
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 7.75rem); /* 태그 숨김 → 캘린더가 그 자리로 */
}

/* ── 캘린더 ─────────────────────────────────── */
.drawer__panel--cal { width: min(100%, 44rem); }
.cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.4rem 0 0.6rem;
}
.cal__month { font-weight: 700; font-size: 1.05rem; }
.cal__navbtn {
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: 0.5rem;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.cal__navbtn:hover { border-color: var(--accent); color: var(--accent); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__wd { text-align: center; font-size: 0.75rem; color: var(--muted); font-weight: 700; padding: 0.3rem 0; }
.cal__wd--sun { color: var(--past); }
.cal__wd--sat { color: var(--future); }
.cal__day {
  min-height: 4.4rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--card);
  padding: 0.2rem;
  overflow: hidden;
}
.cal__day--out { opacity: 0.4; }
.cal__day--today { border-color: var(--accent); }
.cal__daynum { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.cal__day--today .cal__daynum { color: var(--accent); }
.cal__items { list-style: none; margin: 0.15rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.cal__item {
  font-size: 0.66rem;
  background: var(--card-2);
  border-radius: 0.25rem;
  padding: 0.05rem 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg);
}
.cal__more { font-size: 0.62rem; color: var(--muted); padding: 0 0.25rem; }
.cal__opts { display: flex; align-items: center; gap: 0.75rem 1.25rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.cal__opt { display: flex; align-items: center; gap: 0.5rem; }
.cal__opt-label { font-size: 0.82rem; color: var(--muted); }
.cal__day--has { cursor: pointer; }
.cal__day--has:hover { border-color: var(--accent); }
.cal__item { cursor: pointer; }
.cal__item:hover { background: var(--accent); color: #fff; }

/* 항목 클릭 팝업 메뉴(단독/관련조합/날짜) */
.item-menu {
  position: fixed;
  z-index: 70;
  min-width: 9rem;
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.item-menu__btn {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--fg);
  padding: 0.45rem 0.6rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.item-menu__btn:hover { background: var(--card-2); color: var(--accent); }

/* ── 카드↔조합 칩 + 재생목록식 선택기 ───────────── */
/* 태그 줄: 현재 거의 안 써서 숨김(M78). 복원은 이 display만 flex로. */
.card__groups { display: none; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-top: 0.2rem; }
/* 태그 접기/펼치기 토글(+N / 접기) */
.card__tagmore {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem; font-weight: 700;
  cursor: pointer;
}
.card__tagmore:hover { color: var(--fg); border-color: var(--muted); }
/* 태그 칩: '#' 접두 + 무채색(기록의 녹색 점 액션과 시각적으로 구분) */
.card__group {
  display: inline-flex; align-items: center; gap: 0.15em;
  padding: 0.12rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--muted);
  font-size: 0.72rem; font-weight: 600;
  cursor: pointer;
}
.card__group::before { content: '#'; font-weight: 700; opacity: 0.65; }
.card__group:hover { color: var(--fg); border-color: var(--muted); }
.card__groupbtn {
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem; font-weight: 600;
  cursor: pointer;
}
.card__groupbtn:hover { color: var(--accent); border-color: var(--accent); }

/* 조합 선택기(카드 팝오버 + 추가 드로어 공용) */
.combo-pop {
  position: fixed; z-index: 70;
  width: 210px; max-height: 60vh; overflow: auto;
  padding: 0.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.combo-chooser { margin-top: 0.4rem; }
.combo__list { display: flex; flex-direction: column; gap: 0.2rem; }
.combo__empty { margin: 0.15rem 0 0.3rem; font-size: 0.68rem; color: var(--muted); }
.combo__opt {
  display: flex; align-items: center; gap: 0.4rem;
  text-align: left;
  padding: 0.3rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  background: var(--card-2);
  color: var(--fg);
  font-size: 0.74rem;
  cursor: pointer;
}
.combo__opt:hover { border-color: var(--line); }
.combo__check {
  width: 0.95rem; height: 0.95rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.28rem;
  border: 1.5px solid var(--line);
  color: transparent;
  font-size: 0.62rem; font-weight: 800;
}
.combo__opt[aria-pressed='true'] .combo__check { background: var(--accent); border-color: var(--accent); color: #fff; }
.combo__optname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__new { display: flex; gap: 0.3rem; margin-top: 0.4rem; }
.combo__newname {
  flex: 1; min-width: 0;
  padding: 0.3rem 0.45rem;
  border-radius: 0.4rem;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  font-size: 0.74rem;
}
.combo__newname:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.combo__add {
  flex: none;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  font-size: 0.72rem; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.combo__add:hover { color: var(--accent); border-color: var(--accent); }

/* ── 조합(그룹) 패널 ─────────────────────────── */
.groups { display: flex; flex-direction: column; gap: 0.6rem; }
.groups__new {
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
  border: 1px dashed var(--line);
  background: var(--card-2);
  color: var(--fg);
  cursor: pointer;
  font-size: 0.9rem;
}
.groups__new:hover { border-color: var(--accent); color: var(--accent); }
.groups__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--card);
}
/* 태그 이름: 클릭하면 인라인 이름 변경(연필 어포던스) */
.group__name {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin: -0.15rem -0.25rem; padding: 0.15rem 0.25rem;
  border: none; background: none; border-radius: 0.4rem;
  font-family: inherit; font-weight: 600; font-size: 0.9rem;
  color: var(--fg); text-align: left; cursor: pointer;
  overflow: hidden;
}
.group__nametext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group__name::after {
  content: ''; flex: none; width: 0.75rem; height: 0.75rem;
  background: var(--muted);
  -webkit-mask: var(--pencil) center / contain no-repeat;
  mask: var(--pencil) center / contain no-repeat;
  opacity: 0.45; transition: opacity 0.12s, background 0.12s;
}
.group__name:hover { background: var(--elev); }
.group__name:hover::after { background: var(--accent); opacity: 1; }
.group__rename {
  flex: 1; min-width: 0;
  padding: 0.3rem 0.45rem;
  border-radius: 0.4rem;
  border: 1px solid var(--accent);
  background: var(--card-2);
  color: var(--fg);
  font-size: 0.85rem; font-family: inherit;
}
.group__rename:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.group__count { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.group__view {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.82rem;
}
.group__view:hover { background: var(--accent); color: #fff; }
.group__del {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.2rem 0.35rem;
}
.group__del:hover { color: var(--past); }

/* ── 조합 필터 보기 배너 ─────────────────────── */
.group-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 0.6rem;
  background: var(--card-2);
}
.group-banner[hidden] { display: none; }
.group-banner__name { font-weight: 700; }
.group-banner__clear {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.group-banner__clear:hover { color: var(--fg); border-color: var(--muted); }

/* 숨긴 타임카드 안내/토글 바(목록 아래). 평소엔 중립, 보기 모드면 강조. */
.hidden-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.6rem;
  border: 1px dashed var(--line);
  border-radius: 0.6rem;
  background: var(--card-2);
  color: var(--muted);
}
.hidden-bar[hidden] { display: none; }
.hidden-bar--on { border-style: solid; border-color: var(--accent); }
.hidden-bar__name { font-size: 0.85rem; font-weight: 600; }
.hidden-bar__toggle {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.hidden-bar__toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ── 조합 만들기: 다중 선택 모드 ─────────────── */
.select-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.6rem 0.9rem;
  border-radius: 0.9rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  max-width: calc(100vw - 2rem);
}
.select-bar[hidden] { display: none; }
.select-bar__count { font-weight: 700; color: var(--accent); white-space: nowrap; }
.select-bar__name {
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  min-width: 8rem;
}
.select-bar__save {
  padding: 0.45rem 0.9rem;
  border-radius: 0.5rem;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.select-bar__save:disabled { opacity: 0.45; cursor: not-allowed; }
.select-bar__cancel {
  padding: 0.45rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--muted);
  cursor: pointer;
}

/* 선택 모드: 카드 전체가 선택 토글, 우상단 체크 표시 */
body.select-mode .card { cursor: pointer; }
body.select-mode .card__del { visibility: hidden; }
body.select-mode .card__lap,
body.select-mode .card__handle,
body.select-mode .card__hide,
body.select-mode .card__label,
body.select-mode .card__meta,
body.select-mode .card__progress,
body.select-mode .card__laps { pointer-events: none; }
body.select-mode .card::after {
  content: '';
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: var(--card-2);
}
body.select-mode .card.card--selected { border-color: var(--accent); }
body.select-mode .card.card--selected::after { background: var(--accent); border-color: var(--accent); }

/* ── 디자인 설정 패널 ─────────────────────────── */
.settings { display: flex; flex-direction: column; gap: 0.2rem; }
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid var(--line);
}
.set-row__name { font-size: 0.92rem; color: var(--fg); }
.set-row__hint { display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); margin-top: 0.1rem; }
/* 세로 배치 행(이름 위, 컨트롤 아래) — 진행률 파트처럼 넓은 컨트롤용 */
.set-row--col { flex-direction: column; align-items: stretch; gap: 0.5rem; }

/* 색 미리보기 = 슬라이더 + 숫자입력(▲▼ 스테퍼) */
.ctprev { display: flex; align-items: center; gap: 0.6rem; }
.ctprev__range { flex: 1; min-width: 0; accent-color: var(--accent); } /* 남은시간 잔량(기본 슬라이더) */
.ctprev__readout { display: flex; align-items: center; gap: 0.2rem; }
.ctprev__num {
  width: 4.2rem; padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: 0.4rem;
  background: var(--card-2); color: var(--fg); font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.ctprev__num:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ctprev__unit { font-size: 0.8rem; color: var(--muted); }
/* 잔량: 라벨 붙은 슬라이더 2줄(불투명도·명암비) + 결과색 미리보기 바 */
.ctprev--labeled { gap: 0.5rem; }
.ctprev__lbl { flex: none; width: 3.6rem; font-size: 0.74rem; color: var(--muted); }
.remain-swatch { height: 1.5rem; border-radius: 0.4rem; border: 1px solid var(--line); background: var(--remain); }

/* ── 노드색 구분력: WCAG 슬라이더 + Range A 밴드 + ▲ 축 눈금(슬라이더끝·Min A·Max A·슬라이더끝) ── */
.ctslider { position: relative; flex: 1; min-width: 0; height: 3.1rem; --minA: 16%; --maxA: 20%; --cur: 20%; }
/* rail = thumb 이동 구간(좌우 8px=thumb 반지름 안쪽). 밴드·눈금은 이 안에서 % 배치 → thumb와 정렬 */
.ctslider__rail { position: absolute; left: 0.5rem; right: 0.5rem; top: 0; bottom: 0; pointer-events: none; }
.ctslider__track, .ctslider__fill { position: absolute; top: 0.85rem; height: 6px; border-radius: 999px; }
.ctslider__track { left: 0; right: 0; background: var(--track); }
.ctslider__fill { left: 0; width: var(--cur); background: rgba(22, 163, 74, 0.45); } /* 좌→thumb 채움 */
.ctslider__band {
  position: absolute; top: 0.7rem; height: 10px; left: var(--minA);
  width: max(4px, calc(var(--maxA) - var(--minA))); border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.5), 0 0 10px 1px rgba(22, 163, 74, 0.5);
}
/* 좁은 Range A 밴드 위에 'Range A' 떠있는 라벨(가운데 정렬, 넘쳐도 클리핑 안 됨) */
.ctslider__band-lbl {
  position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 0.6rem; line-height: 1; color: var(--accent); font-weight: 600;
}
/* ▲ 축 눈금(트랙 아래): 슬라이더끝(옅게)·Min A/Max A(강조=Range A 경계) + 숫자 라벨 */
.ctslider__axis { position: absolute; left: 0; right: 0; top: 1.5rem; height: 1.5rem; }
.ctaxis-tick { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ctaxis-tick__mark {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 6px solid var(--muted); margin-bottom: 3px;
}
.ctaxis-tick__num { font-size: 0.62rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctaxis-tick--edge .ctaxis-tick__mark { border-bottom-color: var(--accent); }
.ctaxis-tick--edge .ctaxis-tick__num { color: var(--accent); }
/* 네이티브 range를 트랙 위에 투명하게 올림(thumb만 보이게) */
.ctslider__input {
  position: absolute; left: 0; top: 0.55rem; width: 100%; height: 1rem; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.ctslider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.ctslider__input::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.ctslider__input:focus { outline: none; }
.ctslider__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Range A 밖이면 밴드·Min/Max 눈금을 무채색으로(조건 6 양보 신호) */
.ctslider[data-in-range="false"] .ctslider__band { background: var(--muted); box-shadow: none; }
.ctslider[data-in-range="false"] .ctslider__band-lbl { color: var(--muted); }
.ctslider[data-in-range="false"] .ctslider__fill { background: rgba(142, 165, 154, 0.4); }
.ctslider[data-in-range="false"] .ctaxis-tick--edge .ctaxis-tick__mark { border-bottom-color: var(--muted); }
.ctslider[data-in-range="false"] .ctaxis-tick--edge .ctaxis-tick__num { color: var(--muted); }

.set-row__ctrl { flex: 0 0 auto; }
input[type='range'].set-row__ctrl { width: 11rem; max-width: 55%; accent-color: var(--accent); }
input[type='checkbox'].set-row__ctrl { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
select.set-row__ctrl {
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--fg);
  font-size: 0.9rem;
}
.set-row__ctrl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 세그먼트 컨트롤(드롭다운 대체): 한 번 클릭으로 선택, 펼침 없음 */
.segmented {
  display: inline-flex;
  flex: 0 1 auto;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--card-2);
}
.seg {
  border: none;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.seg:first-child { border-left: none; }
.seg:hover:not([aria-pressed='true']) { color: var(--fg); background: rgba(127, 127, 127, 0.12); }
.seg[aria-pressed='true'] { background: var(--accent); color: #fff; }
.seg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.set-reset {
  align-self: flex-start;
  margin-top: 0.8rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--card-2);
  color: var(--muted);
  font-size: 0.88rem;
  cursor: pointer;
}
.set-reset:hover { color: var(--fg); border-color: var(--muted); }

/* 설정 패널 하단 확정 영역(✕ 대신 취소/확인) */
.settings__footer {
  position: sticky;
  bottom: calc(-1rem - env(safe-area-inset-bottom));
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0.8rem -1rem calc(-1rem - env(safe-area-inset-bottom));
  padding: 0.7rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.set-cancel,
.set-ok {
  padding: 0.5rem 1.2rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.set-cancel { background: var(--card-2); border: 1px solid var(--line); color: var(--muted); }
.set-cancel:hover { color: var(--fg); border-color: var(--muted); }
.set-ok { background: var(--accent); border: 1px solid transparent; color: #fff; font-weight: 700; }
.set-ok:hover { filter: brightness(1.08); }

/* ── 추가 패널 드로어(오버레이) ───────────────── */
.drawer[hidden] { display: none; }
.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.drawer__panel {
  position: relative;
  width: min(100%, 32rem);
  margin: 0 auto;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 1rem 1rem 0 0;
  padding: 0.9rem 1rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  animation: drawer-up 0.22s ease-out;
}
@keyframes drawer-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.drawer__title { margin: 0; font-size: 1.05rem; font-weight: 700; }
/* 드로어 제목 아이콘: FAB와 동일한 무채색 Filled SVG, 텍스트 높이에 맞춰 인라인 */
.drawer__title-icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; color: var(--muted); }
.drawer__close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  cursor: pointer;
}
.drawer__close:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.drawer__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 드로어 안의 추가 영역은 카드 배경 위가 아니므로 상단 여백만 정리 */
.drawer .add { gap: 0.7rem; }

@media (prefers-reduced-motion: reduce) {
  .drawer__panel { animation: none; }
}

/* 좁은 화면: 캘린더 셀·글자 축소, 드로어 패딩 축소 */
@media (max-width: 560px) {
  .cal__day { min-height: 3.1rem; padding: 0.15rem; }
  .cal__item { font-size: 0.6rem; }
  .cal__daynum { font-size: 0.66rem; }
  .drawer__panel { padding: 0.7rem 0.7rem calc(0.8rem + env(safe-area-inset-bottom)); }
}