/* ── 공통 ─────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Pretendard Variable', 'Segoe UI', 'Malgun Gothic', sans-serif;
  background: #1c1a17;
  color: #e8e0d2;
  -webkit-font-smoothing: antialiased;
}

/* 화면과 배경 일치 — 웜 화면 밖으로 검은 body가 비쳐 '이중 화면'처럼 보이는 문제 방지 */
body.bg-warm { background: #fbfaf6; }

/* 부팅 중 홈 숨김 → JS 첫 렌더 후 한 번에 표시 (이중 페인트 방지) */
#screen-start .start-inner { transition: opacity 0.18s ease; }
body.booting #screen-start .start-inner { opacity: 0; }
body.theme-dark.bg-warm { background: #1b1814; }

/* 헤딩: 두꺼운 산세리프 = 신뢰감 (레퍼런스 톤) */
.start-title, .calib-title, .label-title, .harvest-line {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.offscreen {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 2px;
  height: 2px;
}

.progress-track {
  height: 6px;
  background: #33302a;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-track.wide { width: min(420px, 80vw); margin: 24px auto 12px; }
.progress-fill {
  height: 100%;
  width: 0;
  background: #c9a86a;
  transition: width 0.2s;
}

/* ── 앱 화면 전환 ─────────────────────────────────── */
.app-body { overflow-x: hidden; } /* 세로 스크롤 허용 (작은 창 대응) */

.screen {
  display: none;
  min-height: 100vh;
  text-align: center;
  padding: 28px 0;
  box-sizing: border-box;
}
.screen.active { display: flex; }
/* flex 중앙정렬은 내용이 넘칠 때 위가 잘리므로 margin:auto 방식으로 중앙 배치 */
.screen.active > * { margin: auto; }

/* 톤 B: 밝은 아이보리 + 신뢰감 (시작·캘리브레이션·리포트) */
.screen-warm {
  background: #fbfaf6;
  color: #2a2620;
}

/* 톤 A: 세션 화면 — 라이트 모드에선 아이보리 유지 (홈과 같은 결) */
.screen-dark {
  background: #fbfaf6;
  color: #4a4438;
}
/* 다크 모드에서만 잉크 배경 (고요한 다크) */
body.theme-dark .screen-dark {
  background: radial-gradient(ellipse at 50% 40%, #23211b 0%, #16140f 60%, #0f0e0b 100%);
  color: #d9d4c6;
}
body.theme-dark #hourglass { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55)); }

/* 모래시계 뒤 은은한 온기 */
.session-inner {
  position: relative;
}
.session-inner::before {
  content: '';
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 229, 115, 0.07) 0%, transparent 65%);
  pointer-events: none;
}

.start-inner { max-width: 480px; padding: 32px; }

.start-title {
  font-size: 2.2rem;
  line-height: 1.25;
  margin-bottom: 14px;
  color: #14120d;
}
.start-sub { color: #8a8272; line-height: 1.75; margin: 0 0 32px; font-size: 1.02rem; }

/* 하루 15분의 효과 (숫자가 주어) */
.facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 34px;
}
.fact {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
.fact-num {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #14120d;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fact-label {
  font-size: 0.9rem;
  color: #8a8272;
  width: 64px;
  text-align: right;
}
.fact .fact-num { text-align: left; width: 130px; }
.fact-use {
  margin: 0 0 28px;
  font-size: 0.92rem;
  color: #8a8272;
}

/* 회귀 노출: 직전 세션 기록 1줄 (1.5초 후 페이드, 탭하면 유지) */
.prev-note {
  margin: -4px 0 16px;
  font-size: 0.92rem;
  color: #8a8272;
  opacity: 1;
  transition: opacity 0.9s ease;
  cursor: default;
}
.prev-note.faded { opacity: 0; }

/* 미니 잔고 한 줄 */
.balance { margin-top: 22px; }
.balance.balance-top { margin: 0 0 24px; }

/* 주간 모래 게이지 */
/* 핵심 4스탯 (사이드 메뉴 활동량) */
.stats4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 10px;
  text-align: center;
  padding: 4px 0 2px;
}
.s4-num {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 800;
  color: #2a2620;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.s4-num.g { color: #567c1e; }
.s4-lab { margin: 3px 0 0; font-size: 0.78rem; color: #9a917f; }
body.theme-dark .s4-num { color: #e8e0d2; }
body.theme-dark .s4-num.g { color: #a8cc66; }
body.theme-dark .s4-lab { color: #7d7460; }

.week-gauge {
  width: min(300px, 78vw);
  height: 8px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #e8e4d8;
  overflow: hidden;
}
.week-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #c4e573, #7cab31);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.week-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-top: 9px;
}
.wd {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ddd8ca;
}
.wd.on { background: #7cab31; }
body.theme-dark .week-gauge { background: #35312a; }
body.theme-dark .wd { background: #3a352c; }

/* 홈 = 기록: 노트 카드 목록 */
.home-cards {
  width: 100%;
  max-width: 440px;
  margin: 26px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── 다시 읽기: 과거의 내가 남긴 글 한 편 (탭 = 다른 기록) ── */
.reread {
  margin: 4px 0 18px;
  padding: 16px 18px 14px;
  background: #f5f2e8;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.reread:hover { background: #f0ecdf; }
.reread-label {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #9a917f;
}
.reread-text {
  margin: 0;
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', Batang, serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #2a2620;
  word-break: keep-all;
  white-space: pre-wrap; /* 길게 쓴 사람의 글도 그대로 (자르지 않는다) */
}
.reread-meta {
  margin: 9px 0 0;
  font-size: 0.72rem;
  color: #9a917f;
  font-variant-numeric: tabular-nums;
}
body.theme-dark .reread { background: #221f19; }
body.theme-dark .reread:hover { background: #262218; }
body.theme-dark .reread-text { color: #d9cdb4; }

/* ── 노트: 날짜별 일지 ── */
.journal { text-align: left; }
.jr-day { margin-bottom: 20px; }
.jr-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid #e7e2d5;
  margin-bottom: 2px;
}
.jr-day-label { font-size: 0.82rem; font-weight: 800; color: #14120d; }
.jr-day-sand {
  font-size: 0.74rem;
  font-weight: 700;
  color: #567c1e;
  font-variant-numeric: tabular-nums;
}
.jr-entry {
  padding: 10px 2px 9px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s;
}
.jr-entry:hover { background: rgba(20, 18, 13, 0.03); }
.jr-entry + .jr-entry { border-top: 1px dashed #eeeade; }
/* 글이 본문 — 노트답게 명조 계열, 넉넉한 행간 */
.jr-note {
  margin: 0 0 5px;
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', Batang, serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #2a2620;
  word-break: keep-all;
  white-space: pre-wrap;
}
.jr-meta {
  margin: 0;
  font-size: 0.72rem;
  color: #9a917f;
  font-variant-numeric: tabular-nums;
}
.jr-add { color: #b8b2a0; }
.jr-entry:hover .jr-add { color: #6f6350; }

/* 활동량은 접어둔다 — 이 서랍의 주인공은 글 */
.side-stats { margin-top: 8px; border-top: 1px solid #e7e2d5; padding-top: 12px; }
.side-stats > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: #9a917f;
  list-style: none;
  padding: 4px 0;
}
.side-stats > summary::-webkit-details-marker { display: none; }
.side-stats > summary::after { content: ' ›'; }
.side-stats[open] > summary::after { content: ' ⌄'; }
.side-stats > summary:hover { color: #2a2620; }
body.theme-dark .side-stats { border-color: #35312a; }
body.theme-dark .side-stats > summary { color: #7d7460; }
body.theme-dark .side-stats > summary:hover { color: #d9d4c6; }
.journal-empty {
  margin: 26px 0;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #b8b2a0;
}
body.theme-dark .jr-day-head { border-color: #35312a; }
body.theme-dark .jr-day-label { color: #e8dcbe; }
body.theme-dark .jr-day-sand { color: #a8cc66; }
body.theme-dark .jr-entry:hover { background: rgba(247, 244, 236, 0.04); }
body.theme-dark .jr-entry + .jr-entry { border-color: #2c2822; }
body.theme-dark .jr-note { color: #d9cdb4; }
.home-card {
  background: #ffffff;
  border: 1px solid #ebe8e0;
  border-radius: 16px;
  padding: 14px 16px 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 18, 13, 0.04);
  transition: box-shadow 0.15s;
}
.home-card:hover { box-shadow: 0 4px 14px rgba(20, 18, 13, 0.1); }
.hist-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.hist-chip {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef5dc;
  color: #567c1e;
  font-size: 0.74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.theme-dark .hist-chip { background: #2c3220; color: #a8cc66; }
.hist-note.empty { color: #b8b2a0; font-size: 0.85rem; }
.hist-gauge {
  margin-top: 10px;
  height: 3px;
  border-radius: 2px;
  background: #efece2;
  overflow: hidden;
}
.hist-gauge div {
  height: 100%;
  background: linear-gradient(90deg, #c4e573, #7cab31);
  border-radius: 2px;
}
body.theme-dark .hist-gauge { background: #35312a; }
.card-edit { margin-top: 8px; }
body.theme-dark .home-card { background: #241f19; border-color: #3a352c; }
.balance-line { margin: 0; font-size: 0.92rem; color: #8a8272; }
.balance-num { font-weight: 800; color: #14120d; font-variant-numeric: tabular-nums; }
.balance-sep { margin: 0 4px; }
body.theme-dark .balance-num { color: #e8dcbe; }

/* 세션 기록 입력 (리포트 하단) */
.note-sec {
  width: 100%;
  border-top: 1px solid #ddd2b8;
  padding-top: 16px;
  text-align: left;
}
.note-sec .label-title { margin: 0 0 8px; }
.note-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #ddd8ca;
  border-radius: 12px;
  background: #ffffff;
  color: #2a2620;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}
.note-input:focus { border-color: #16140f; }
body.theme-dark .note-input { background: #241f19; border-color: #4a4234; color: #d9cdb4; }
body.theme-dark .note-sec { border-color: #3a352c; }

/* 노트 스탬프 (날짜·시각·집중 시간만) */
.note-stamp {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6f6350;
  font-variant-numeric: tabular-nums;
}
body.theme-dark .note-stamp { color: #b9ad8f; }

/* 지난 세션 목록: 스탬프 + 자유 텍스트 */
.hist-card { margin: 10px 0; text-align: left; }
.hist-stamp {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #6f6350;
  font-variant-numeric: tabular-nums;
}
.hist-note { margin: 3px 0 0; font-size: 0.9rem; color: #2a2620; line-height: 1.55; }
body.theme-dark .hist-stamp { color: #b9ad8f; }
body.theme-dark .hist-note { color: #d9cdb4; }

/* ── 시작 화면: 모래시계 + 뒤집기가 시각 위계 1순위 ── */
.flip-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 6px 0 26px;
}
.start-hg {
  width: min(52vw, 210px); /* 홈의 시각 위계 1순위 — 크게 */
  aspect-ratio: 300 / 460; /* 세션 모래시계(hourglass.js)와 동일 비율 */
  cursor: pointer;
  touch-action: manipulation;
}
/* 뒤집기: 15분치 모래시계는 회전한다. 모래가 아래에 있는 상태에서 돌면 위로 올라간다 */
.start-hg.flipping {
  animation: hgflip 0.82s cubic-bezier(0.58, 0, 0.32, 1) forwards;
}
@keyframes hgflip {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .start-hg.flipping { animation: none; }
}
.flip-btn { padding: 15px 44px; font-size: 1.05rem; }

/* ── 별명: 첫 화면 인라인. 저장 전까지만 보인다 ── */
.nick-inline { margin: 2px auto 0; width: min(200px, 60vw); }

/* ── 자세 준비: 전용 화면 (톤 A 다크) — 10초 동안 편히 준비, 끝나면 15분 시작 ── */
#screen-session { position: relative; }
.calib-overlay {
  position: absolute;
  inset: 0;
  margin: 0 !important; /* .screen.active > * 의 margin:auto 무효화 */
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px calc(28px + env(safe-area-inset-bottom, 0px));
  background: #151310; /* 세션과 같은 톤 — 화면이 이어지는 느낌 */
  animation: calibIn 0.45s ease;
}
@keyframes calibIn { from { opacity: 0; } to { opacity: 1; } }
.calib-overlay.hidden { display: none; }
/* 준비 완료 → 조용히 걷히며 그 아래 15분이 드러난다 */
.calib-overlay.leaving { animation: calibOut 0.42s ease forwards; }
@keyframes calibOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .calib-overlay, .calib-overlay.leaving { animation: none; }
}

.calib-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(340px, 90vw);
}
.calib-kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #a3cc52;
}
.calib-head {
  margin: 0 0 6px;
  font-size: 1.45rem;
  font-weight: 800;
  color: #f7f4ec;
  letter-spacing: -0.02em;
}
.calib-lead {
  margin: 0 0 22px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #b5ad98;
  word-break: keep-all;
}
.calib-lead b { color: #a3cc52; font-weight: 700; }

/* 기기별 고정 방법: 자기 상황 한 줄만 읽으면 된다 */
.calib-devices {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.calib-dev {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.5;
  word-break: keep-all;
}
.calib-dev b {
  flex: 0 0 76px;
  color: #e8e4d8;
  font-weight: 700;
  font-size: 0.8rem;
}
.calib-dev span { color: #b5ad98; }

/* 준비 단계 목록: 처음 온 사람도 따라 하면 되게 */
.calib-steps {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.calib-steps li {
  counter-increment: step;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 0.87rem;
  line-height: 1.55;
  color: #b5ad98;
  word-break: keep-all;
}
.calib-steps li::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(163, 204, 82, 0.16);
  color: #a3cc52;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(2px);
}
.calib-steps b { color: #e8e4d8; font-weight: 700; }

/* 다시 하기: 자세를 고쳐 잡고 처음부터 (엄지 기준 44px 탭 타깃).
   준비 화면은 항상 다크 — btn-ghost의 라이트용 호버색(잉크)을 쓰면 글자가 사라진다 */
/* .btn-ghost가 파일 뒤쪽에 선언되므로 클래스를 겹쳐 특이도를 올린다 */
.btn-ghost.calib-redo {
  margin-top: 10px;
  padding: 11px 26px;
  min-height: 44px;
  font-size: 0.88rem;
  border-color: rgba(247, 244, 236, 0.28);
  color: #b5ad98;
  transition: color 0.15s, border-color 0.15s, transform 0.1s;
}
.btn-ghost.calib-redo:hover { color: #f7f4ec; border-color: rgba(247, 244, 236, 0.55); }
.btn-ghost.calib-redo:active { transform: scale(0.96); }
.btn-ghost.calib-redo:disabled { opacity: 0.35; pointer-events: none; }

/* 미리보기: 원형 + 진행 링 — 10초가 얼굴 둘레를 한 바퀴 돈다 */
.calib-preview {
  position: relative;
  flex: 0 0 auto;
  width: min(56vw, 220px);
  aspect-ratio: 1 / 1;
}
/* ID 선택자(#preview-video)를 이기려면 같은 특이도가 필요하다 */
.calib-preview #preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: none;
  margin: 0;
  transform: scaleX(-1); /* 거울 */
  background: #241f19;
  display: block;
}
.calib-ring {
  position: absolute;
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  transform: rotate(-90deg); /* 12시 방향부터 시작 */
  pointer-events: none;
}
.calib-ring-bg {
  fill: none;
  stroke: rgba(247, 244, 236, 0.1);
  stroke-width: 2.6;
}
.calib-ring-fill {
  fill: none;
  stroke: #a3cc52;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 289.03; /* 2π×46 */
  stroke-dashoffset: 289.03; /* JS가 진행률만큼 줄인다 */
}

/* 남은 초: 링과 짝을 이루는 큰 숫자 */
.calib-count {
  margin: 18px 0 0;
  font-size: 2.1rem;
  font-weight: 800;
  color: #f7f4ec;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.calib-hint {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #8f8772;
}
.calib-hint:empty { display: none; }
/* 가로 막대는 링과 중복 — 자리만 유지하고 숨긴다 (JS 참조 보존) */
.calib-track { display: none; }
.calib-fill { display: none; }
.calib-status { margin: 10px 0 0; font-size: 0.85rem; color: #8f8772; }
.calib-status:empty { display: none; }

.posture-box { width: min(280px, 76vw); text-align: center; }
.posture-label {
  margin: 0 0 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #5d5240;
}
.posture-track {
  height: 5px;
  background: #e7e2d5;
  border-radius: 3px;
  overflow: hidden;
}
.posture-fill {
  height: 100%;
  width: 0;
  background: #94c53f;
  border-radius: 3px;
}
body.theme-dark .posture-label { color: #b9ad8f; }
body.theme-dark .posture-track { background: #35312a; }

.posture-hint {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: #8a8272;
}
.posture-hint:empty { display: none; }
body.theme-dark .posture-hint { color: #948a72; }

.posture-preview { margin: 0 0 14px; }

/* 첫 세션 1회 안내: 카메라 고정 (기기 중립) */
.setup-guide {
  position: fixed;
  z-index: 42;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 86vw);
  background: #fbfaf6;
  border-radius: 20px;
  padding: 24px 22px 20px;
  box-shadow: 0 20px 50px rgba(20, 18, 13, 0.22);
  text-align: center;
}
body.theme-dark .setup-guide { background: #1b1814; }
.setup-title {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #14120d;
  letter-spacing: -0.01em;
}
body.theme-dark .setup-title { color: #e8dcbe; }
.setup-rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
/* 다시 보지 않기: 매 세션 안내가 기본, 원하면 끌 수 있다 */
.setup-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  color: #8a8272;
  cursor: pointer;
  user-select: none;
}
.setup-skip input { width: 15px; height: 15px; accent-color: #7cab31; cursor: pointer; }
body.theme-dark .setup-skip { color: #85816f; }
.setup-row {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  color: #6f6350;
}
body.theme-dark .setup-row { color: #948a72; }
.setup-icon { width: 34px; height: 34px; flex-shrink: 0; }
.setup-mode {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: #2a2620;
}
body.theme-dark .setup-mode { color: #d9cdb4; }
.setup-desc { margin: 2px 0 0; font-size: 0.82rem; color: #8a8272; }

.tag-small { width: min(180px, 52vw); padding: 9px 16px; font-size: 0.85rem; }

/* ── 사이드 메뉴: 기록 카드 목록 ── */
/* ── 하루 모래시계 (홈의 심장): 캔버스 입자 시뮬레이션 — 그리기는 js/dayglass.js ── */
.dg-count { font-variant-numeric: tabular-nums; font-weight: 700; }

/* 남은 하루 시계: 초가 바뀌는 순간과 모래 한 알이 떨어지는 순간이 맞물린다 */
.dg-clock { margin: 10px 0 0; text-align: center; }
.dg-clock-label {
  margin: 0 0 2px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: #9a9179;
}
.dg-clock-time {
  margin: 0;
  font-size: clamp(2.2rem, 9vw, 3.1rem);
  font-weight: 800;
  line-height: 1.05;
  color: #16140f;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dg-colon { opacity: 0.28; margin: 0 0.02em; font-weight: 500; }
/* 초 = 모래알 한 알. 알갱이가 떨어지는 그 순간에 맞춰 뛴다 (js에서 .drop 부여) */
.dg-ss {
  display: inline-block;
  color: #7cab31;
}
.dg-ss.drop { animation: dgBeat 0.42s cubic-bezier(0.3, 0, 0.2, 1); }
@keyframes dgBeat {
  0% { transform: translateY(-3px); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}
body.theme-dark .dg-clock-label { color: #7d7460; }
body.theme-dark .dg-clock-time { color: #f2eee2; }
body.theme-dark .dg-ss { color: #a3cc52; }
@media (prefers-reduced-motion: reduce) { .dg-ss.drop { animation: none; } }

.wc-cap {
  margin: 6px 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: #6f6350;
  font-variant-numeric: tabular-nums;
}
.wc-cap:empty { margin: 0; } /* 받는 중이 아니면 자리도 차지하지 않는다 */
.wc-cap b { font-size: 1.15rem; font-weight: 800; color: #16140f; }
body.theme-dark .wc-cap { color: #948a72; }
body.theme-dark .wc-cap b { color: #e8dcbe; }

/* 이번 주 요약 (메뉴): 횟수와 시간으로 — 168시간 대비 비율은 의미가 없다 */
.my-glass { margin-top: 14px; }
.mg-line {
  margin: 0;
  font-size: 0.88rem;
  color: #6f6350;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}
.mg-line b { color: #567c1e; font-weight: 800; }
.mg-sub { font-size: 0.8rem; color: #9a917f; }
body.theme-dark .mg-line { color: #948a72; }
body.theme-dark .mg-line b { color: #a8cc66; }
body.theme-dark .mg-sub { color: #7d7460; }

/* "기록" 버튼: 라벨 + 개수 배지 (햄버거보다 한눈에 읽힘) */
/* 작업 중 기능 배지 */
.wip-badge {
  font-size: 0.66rem;
  font-weight: 800;
  color: #b07a14;
  background: rgba(217, 154, 38, 0.14);
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* 떠 있는 의견 버튼 + 미니 시트 */
.fb-fab {
  position: fixed;
  bottom: 18px;
  right: 16px;
  z-index: 30;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #ddd8ca;
  border-radius: 999px;
  background: rgba(251, 250, 246, 0.92);
  color: #6f6350;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 18, 13, 0.1);
  backdrop-filter: blur(6px);
}
.fb-fab.hidden { display: none; }
body.theme-dark .fb-fab { background: rgba(33, 30, 24, 0.9); color: #b5ad98; border-color: #3a352c; }
.fb-sheet {
  position: fixed;
  bottom: 66px;
  right: 16px;
  z-index: 31;
  width: min(320px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #e7e2d5;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 18px 44px rgba(20, 18, 13, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.fb-sheet.hidden { display: none; }
.fb-sheet-title { margin: 0; font-size: 0.95rem; font-weight: 800; color: #14120d; }
.fb-sheet-row { display: flex; align-items: center; gap: 10px; }
body.theme-dark .fb-sheet { background: #221f19; border-color: #3a352c; }
body.theme-dark .fb-sheet-title { color: #e8dcbe; }

.menu-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #ddd8ca;
  border-radius: 999px;
  background: #ffffff;
  color: #2a2620;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 18, 13, 0.08);
  transition: box-shadow 0.15s, transform 0.15s;
}
.menu-btn:hover { box-shadow: 0 6px 18px rgba(20, 18, 13, 0.14); transform: translateY(-1px); }
body.theme-dark .menu-btn { background: #241f19; border-color: #4a4234; color: #d9cdb4; }
.menu-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #94c53f;
  color: #16140f;
  font-size: 0.74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.menu-count.hidden { display: none; }

/* 스크림·메뉴: 부드러운 슬라이드 인/아웃 */
.side-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20, 18, 13, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.side-scrim.open { opacity: 1; pointer-events: auto; }
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  width: min(340px, 88vw);
  background: #fbfaf6;
  box-shadow: -12px 0 40px rgba(20, 18, 13, 0.16);
  padding: 18px 18px 32px;
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.side-menu.open { transform: none; }
body.theme-dark .side-menu { background: #1b1814; }
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.side-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: #14120d; }
body.theme-dark .side-title { color: #e8dcbe; }
.side-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: #9a917f;
  cursor: pointer;
}
.side-menu .home-cards { margin: 14px 0 0; }
.side-title.small { font-size: 0.9rem; margin: 0 0 8px; }

/* 함께: 그룹 현황판 */
.menu-group {
  margin-top: 24px;
  border-top: 1px solid #e7e2d5;
  padding-top: 18px;
}
body.theme-dark .menu-group { border-color: #3a352c; }
.group-input { flex: 1; }
.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
#group-name { font-weight: 800; color: #14120d; font-size: 0.95rem; }
body.theme-dark #group-name { color: #e8dcbe; }
.group-leave {
  border: none;
  background: transparent;
  color: #9a917f;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}
.gb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.gb-row.me { background: #eef5dc; }
body.theme-dark .gb-row.me { background: #2c3220; }
.gb-rank { width: 16px; font-weight: 800; color: #9a917f; }
.gb-row.me .gb-rank { color: #567c1e; }
.gb-tag { flex: 1; font-weight: 700; color: #2a2620; }
body.theme-dark .gb-tag { color: #d9cdb4; }
.gb-meta { color: #6f6350; font-size: 0.82rem; }
.menu-feedback {
  margin-top: 24px;
  border-top: 1px solid #e7e2d5;
  padding-top: 18px;
}
body.theme-dark .menu-feedback { border-color: #3a352c; }
.menu-fb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.menu-fb-row .graph-caption { margin: 0; }
.side-menu .balance { margin: 0; }

/* 작업 선택 칩 */
.mode-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
body.theme-dark .fact-num { color: #e8dcbe; }
body.theme-dark .fact-label { color: #948a72; }
.start-sub.dim { font-size: 0.85rem; opacity: 0.7; }

.calib-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 6px; }

/* 자리 확인 화면 */
.preview-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
}
/* 미리보기 크기: 사용자가 조절 (부담스러울 수 있음 — 숨김도 가능) */
.preview-sizes {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: -8px 0 16px;
}
.preview-wrap.size-sm #preview-video { width: min(46vw, 200px); }
.preview-wrap.size-off #preview-video { display: none; }
.preview-wrap.size-off {
  width: min(46vw, 200px);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ddd8ca;
  border-radius: 14px;
}
.preview-wrap.size-off .preview-badge { position: static; transform: none; }
body.theme-dark .preview-wrap.size-off { border-color: #4a4234; }

#preview-video {
  width: min(78vw, 380px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid #fdfaf1;
  background: #241f18;
  transform: scaleX(-1); /* 거울 모드 */
  box-shadow: 0 12px 34px rgba(90, 74, 45, 0.28);
}
.preview-badge {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(36, 31, 24, 0.82);
  color: #d9cdb4;
  font-size: 0.66rem;
  white-space: nowrap;
}
.preview-badge.ok { color: #e9d9a8; background: rgba(96, 78, 42, 0.78); }

.mode-pick { margin-bottom: 28px; }
.mode-card {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 44px;
  border: 1.5px solid #d3b781;
  border-radius: 16px;
  background: linear-gradient(180deg, #fdfaf1, #f7f0df);
  color: #3d3629;
  cursor: default;
  box-shadow: 0 3px 12px rgba(120, 100, 60, 0.1);
}
.mode-name { font-size: 1.05rem; font-weight: 600; }
.mode-desc { font-size: 0.8rem; color: #9a8d6f; }

.tag-input {
  display: block;
  margin: 0 auto 14px;
  padding: 12px 20px;
  width: min(260px, 70vw);
  border: 1.5px solid #ddd8ca;
  border-radius: 999px;
  background: #ffffff;
  color: #2a2620;
  font-size: 0.95rem;
  text-align: center;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tag-input:focus { border-color: #16140f; }
.tag-input.nudge { border-color: #16140f; box-shadow: 0 0 0 3px rgba(20, 18, 13, 0.1); }
.tag-input.wide { width: 100%; border-radius: 12px; text-align: left; }
/* 첫 화면 인라인 별명: 저장 전까지만 모래시계와 버튼 사이에 놓인다 */
.tag-input.nick-inline { margin: 0 auto 12px; }

/* 설정 칩 */
.settings-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}
.setting-chip {
  padding: 7px 16px;
  border: 1px solid #d8cbab;
  border-radius: 999px;
  background: transparent;
  color: #9a8d6f;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.setting-chip.on {
  background: #6f6350;
  border-color: #6f6350;
  color: #f7f1e3;
}

/* 세션 셀프뷰 (옵트인) */
/* 셀프뷰: 타이머 옆 고정 자리, 크기 고정 (조절 기능 없음 — 선택지가 부담이다) */
.self-view {
  /* 타이머 옆 절대배치 — 켜고 꺼도 타이머·모래시계가 밀리지 않는다 */
  position: absolute;
  left: calc(50% + 78px);
  top: 50%;
  width: min(30vw, 132px);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #3a352c;
  transform: translateY(-50%) scaleX(-1); /* 거울상 — 내 움직임과 화면이 일치해야 한다 */
  opacity: 0.8; /* 주인공은 모래시계 — 셀프뷰는 곁에 물러나 있다 */
}
.self-view.hidden { display: none; }
/* 세션 중 꺼짐: 스트림은 유지한 채 보이지만 않게 — 다시 켤 때 지연 0 */
.self-view.off { visibility: hidden; }
/* 큰 화면: 타이머 아래 중앙 — 아래 요소들은 여백으로 밀려 겹치지 않는다 */
.self-view.lg {
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) scaleX(-1);
  width: min(48vw, 184px);
}
.time-row { transition: margin-bottom 0.25s ease; }
.time-row.self-lg { margin-bottom: calc(min(48vw, 184px) + 14px); }

/* 타이머 + 셀프뷰 한 행. 셀프뷰가 켜져도 타이머가 밀리지 않게 가운데 고정 */
.time-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}

/* 피드백 칩 */
/* ── 홈 주간 블록: 블록 하나 = 15분 한 세션 ── */
.wk { width: 100%; max-width: 240px; margin: 14px auto 4px; }
.wk-dow, .wk-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wk-dow { margin-bottom: 4px; }
.wk-dow span { font-size: 0.56rem; color: #c0b8a6; text-align: center; }
.wk-dow span.on { color: #7cab31; font-weight: 700; }
.wk-bars { align-items: end; min-height: 40px; }
.wk-col { display: flex; flex-direction: column-reverse; gap: 2px; align-items: center; }
.wk-u {
  width: 100%; height: 6px; border-radius: 2px; background: #b3d977;
  animation: wkin 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.wk-u.now { background: #7cab31; }         /* 오늘 = 진하게 */
.wk-u.more { box-shadow: 0 -2px 0 #d8e9ae; } /* 6개 넘김 = 더 있음 */
@keyframes wkin { from { opacity: 0; transform: scaleY(0.2); } }
.wk-base { height: 1px; background: #e7e2d5; margin-top: 4px; }
.wk-cap { margin: 7px 0 0; font-size: 0.7rem; color: #9a917f; text-align: center; }
.wk-cap b { color: #6f6350; font-weight: 700; }
body.theme-dark .wk-dow span { color: #6a6353; }
body.theme-dark .wk-base { background: #35312a; }
body.theme-dark .wk-cap { color: #7d7460; }
body.theme-dark .wk-cap b { color: #b9ae95; }
@media (prefers-reduced-motion: reduce) { .wk-u { animation: none; } }

/* ── 리포트 3단계: 결과 → 기록 → 돌아보기 ── */
.rp-steps { display: flex; gap: 5px; width: 100%; margin-bottom: 20px; }
.rp-dot { flex: 1; height: 3px; border-radius: 2px; background: #e2ddd0; transition: background 0.25s; }
.rp-dot.on { background: #7cab31; }
body.theme-dark .rp-dot { background: #35312a; }
.rp-step { width: 100%; animation: rpIn 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes rpIn { from { opacity: 0; transform: translateY(9px); } }
.rp-devnote {
  margin: 10px 0 0;
  font-size: 0.76rem;
  color: #9a917f;
  text-align: center;
}
body.theme-dark .rp-devnote { color: #7d7460; }

/* 섹션 소형 라벨 — 큰 제목 연발이 만들던 시각 소음 제거 */
.rp-label {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #9a917f;
}
body.theme-dark .rp-label { color: #7d7460; }
/* 접힘 섹션: 요약 한 줄, 원할 때만 펼침 */
.label-sec.fold > summary {
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  color: #6f6350;
  list-style-position: inside;
}
body.theme-dark .label-sec.fold > summary { color: #948a72; }

.rp-h {
  margin: 0 0 4px;
  font-size: 1.2rem;
  font-weight: 800;
  color: #14120d;
  letter-spacing: -0.02em;
}
.rp-sub { margin: 0 0 20px; font-size: 0.8rem; color: #9a917f; }
/* 부제를 걷어낸 단계(2·3)는 제목이 아래 여백을 대신 진다. 1단계는 원래대로 카드가 바로 붙는다 */
.rp-step[data-step="1"] .rp-h,
.rp-step[data-step="2"] .rp-h { margin-bottom: 20px; }
body.theme-dark .rp-h { color: #e8dcbe; }
body.theme-dark .rp-sub { color: #7d7460; }
.rp-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.rp-nav .btn-primary { flex: 1; }
/* 뒤로 가는 버튼은 왼쪽 끝에 (좁은 화면이라 자리로만 구분되지 않으니 화살표를 함께 둔다) */
#rp-prev { margin-right: auto; padding-left: 4px; }
#rp-prev::before { content: '‹'; margin-right: 3px; font-size: 1.05em; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .rp-step { animation: none; } }

.fb-chips { display: flex; gap: 8px; justify-content: center; margin: 8px 0 4px; }
/* 피드백은 강요하지 않는다 — 답하지 않아도 됨을 명시 */
.fb-hint { margin: 8px 0 0; font-size: 0.72rem; color: #b8b2a0; }
body.theme-dark .fb-hint { color: #6f6a5c; }
.fb-chip {
  padding: 8px 18px;
  border: 1px solid #d8cbab;
  border-radius: 999px;
  background: #fbf7ec;
  color: #6f6350;
  font-size: 0.86rem;
  cursor: pointer;
}
.fb-chip.on { background: #16140f; border-color: #16140f; color: #f7f4ec; }

/* ── 다크 모드 (시작·리포트 화면용 — 세션은 원래 다크) ── */
body.theme-dark .screen-warm {
  background: radial-gradient(ellipse at 50% 20%, #26221b 0%, #1b1814 60%, #141210 100%);
  color: #d9cdb4;
}
body.theme-dark .start-title,
body.theme-dark .calib-title,
body.theme-dark .label-title,
body.theme-dark .harvest-line { color: #e8dcbe; }
body.theme-dark .start-sub { color: #948a72; }
body.theme-dark .mode-card {
  background: linear-gradient(180deg, #2a261f, #241f19);
  border-color: #4a4234;
  color: #d9cdb4;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}
body.theme-dark .mode-desc { color: #8a7f66; }
body.theme-dark .tag-input,
body.theme-dark .fb-chip {
  background: #241f19;
  border-color: #4a4234;
  color: #d9cdb4;
}
body.theme-dark .consent-note { color: #7a7260; }
body.theme-dark .setting-chip { border-color: #4a4234; color: #948a72; }
body.theme-dark .setting-chip.on { background: #c9a86a; border-color: #c9a86a; color: #241f19; }
body.theme-dark .timeline { background: linear-gradient(180deg, #353026, #3d372c); box-shadow: none; }
body.theme-dark .seg-breach {
  background: repeating-linear-gradient(-55deg, #574f3e, #574f3e 3px, #494235 3px, #494235 6px);
}
body.theme-dark .moment-card,
body.theme-dark .label-chip {
  background: #241f19;
  border-color: #3a352c;
}
body.theme-dark .chip-reason { color: #d9cdb4; }
body.theme-dark .chip-snap.empty { background: #2e2921; }
body.theme-dark .report-details { border-color: #3a352c; color: #948a72; }
body.theme-dark .label-sec { border-color: #3a352c; }
body.theme-dark .preview-badge { background: rgba(20, 17, 13, 0.8); }
body.theme-dark #preview-video { border-color: #3a352c; }

.btn-primary {
  padding: 15px 42px;
  border: none;
  border-radius: 999px;
  background: #16140f;
  color: #f7f4ec;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(20, 18, 13, 0.18);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-primary:hover {
  background: #2a2620;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(20, 18, 13, 0.24);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
  background: #cdc8bb;
  box-shadow: none;
  transform: none;
  cursor: default;
}

.consent-note {
  margin-top: 18px;
  font-size: 0.78rem;
  color: #a2977d;
  line-height: 1.5;
}
.start-status { min-height: 1.3em; color: #b98d4f; font-size: 0.9rem; }

/* ── 세션 화면 ────────────────────────────────────── */
.session-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px; /* 모래시계-타이머 간격 최소화: 카메라 화면까지 한 화면에 */
}
.session-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 모래시계 크기 고정 — 드래그 조절 제거 (2026-08-01, 조절류 기능 정리) */
#hourglass {
  width: min(50vw, 260px);
  flex: 0 0 auto; /* 셀프뷰가 켜져도 모래시계 크기는 그대로 */
  aspect-ratio: 300 / 460;
  /* 캔버스의 유리 위·아래 빈 공간(각 15%)을 걷어내 타이머와 시각적으로 붙인다 */
  margin-top: calc(min(50vw, 260px) * -0.16);
  margin-bottom: calc(min(50vw, 260px) * -0.23);
  filter: drop-shadow(0 14px 30px rgba(20, 18, 13, 0.12));
  touch-action: manipulation;
}

.time-left {
  font-size: 2.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #14120d;
  margin: 6px 0 0;
}
body.theme-dark .time-left {
  color: #f7f4ec;
  text-shadow: 0 0 24px rgba(247, 244, 236, 0.12);
}

.camera-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #8a8272;
  margin: 0;
}
body.theme-dark .camera-note { color: #85816f; }
/* 종료 후: 점 소등 = 자유 시간 신호 */
.camera-note.off .breathing-dot {
  animation: none;
  opacity: 0.15;
  background: #5c564a;
}
.camera-note.off { color: #4a443a; }

/* 종료 후: 화면 밝기 미세 변화 (조용한 신호) */
.screen-dark { transition: filter 2.5s ease; }
.screen-dark.session-ended { filter: brightness(1.16); }

.calib-bowl { width: 130px; margin: 4px auto 10px; display: block; }

/* 개발자 모드 (?dev=1): 스크립트 세션 타이밍 대조용 */
.dev-clock {
  position: fixed;
  top: 10px;
  left: 12px;
  margin: 0;
  font-family: Consolas, monospace;
  font-size: 12px;
  color: #8a8172;
  transition: color 0.15s;
}
.dev-clock.marked { color: #94c53f; } /* 대본 기록 순간 표시 */

/* 종료 후 빈 모래시계 = 탭 가능한 사물 (어포던스만, 문구 없음) */
.session-ended #hourglass { cursor: pointer; }

/* 종료 후 힌트: 몇 초 뒤 아주 옅게 떠오름 (첫 사용자 길잡이) */
.after-hint {
  margin: 14px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: #6f6753;
  opacity: 0;
  transition: opacity 2s ease;
}
.after-hint.visible { opacity: 0.7; }
.breathing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94c53f; /* 모래 연두 — 브랜드 포인트 */
  animation: breathe 3s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1); }
}

.session-btns {
  display: flex;
  gap: 10px;
  margin-top: 26px;
}
.session-btns .btn-ghost { margin-top: 0; }

/* ── 종료 직후: 담은 시간이 먼저, 선택은 그다음 ── */
.after-done { margin: 22px 0 0; text-align: center; }
.after-done.show { animation: adRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes adRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.ad-label {
  margin: 0 0 2px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: #8a8272;
}
.ad-value {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.05;
  color: #567c1e;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ad-value .ad-unit { font-size: 1.1rem; font-weight: 700; margin: 0 4px 0 1px; }
.ad-note { margin: 6px 0 0; font-size: 0.84rem; color: #6f6350; }
body.theme-dark .ad-label { color: #7d7460; }
body.theme-dark .ad-value { color: #a3cc52; }
body.theme-dark .ad-note { color: #948a72; }
@media (prefers-reduced-motion: reduce) { .after-done.show { animation: none; } }

/* 선택: 기록 보기가 주(主), 15분 더가 부(副) */
.after-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.after-choice .btn-ghost { margin-top: 0; }

.btn-ghost {
  margin-top: 26px;
  padding: 8px 20px;
  border: 1px solid #ddd8ca;
  border-radius: 999px;
  background: transparent;
  color: #8a8272;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-ghost:hover { color: #2a2620; border-color: #8a8272; }
body.theme-dark .btn-ghost { border-color: #3a382f; color: #8a867a; }
body.theme-dark .btn-ghost:hover { color: #d9d4c6; border-color: #8a867a; }

/* ── 리포트 화면 ──────────────────────────────────── */
.report-inner {
  max-width: 460px;
  padding: 44px 24px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* 잉크 카드: 아이보리 위의 신뢰 오브젝트 (레퍼런스의 데이터 카드) */
.stat-card {
  width: 100%;
  background: linear-gradient(160deg, #23201a 0%, #16140f 100%);
  border-radius: 24px;
  padding: 22px 20px 20px;
  box-shadow: 0 18px 44px rgba(20, 18, 13, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pill {
  display: inline-block;
  margin: 0;
  padding: 5px 14px;
  border: 1px solid rgba(247, 244, 236, 0.35);
  border-radius: 999px;
  color: #d9d3c4;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pill:empty { display: none; }

/* 집중 링 게이지 (Oura식 — 원형 진행 + 중앙 큰 숫자) */
/* ── 결과 모래시계: 홈 화면과 같은 오브제 (연결성) ── */
.harvest-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.rep-glass { width: 62px; height: 100px; flex-shrink: 0; }
.rg-cap { fill: #f7f4ec; }
.rg-rest { fill: #6f6753; }   /* 위 구에 남은 시간 = 중립색 */
.rg-wall { fill: none; stroke: rgba(247, 244, 236, 0.32); stroke-width: 2; stroke-linecap: round; }
.harvest-nums { text-align: left; }
.harvest-of { margin: 5px 0 0; font-size: 0.78rem; color: #8f8772; }

/* 오늘 누적 블록: 홈 주간 블록과 중복이라 숨김 (요소는 JS 참조 때문에 유지) */
.harvest-today { display: none; }

/* 핵심 지표 3타일: 밀도 · 몰입까지 · 끊김 — 세로 구분선 한 줄 */
.stat-tiles {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px 0 0;
}
.stat-tile { text-align: center; }
.stat-tile + .stat-tile { border-left: 1px solid #2c2820; }
.stat-tile b {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  color: #f7f4ec;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-tile span {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  color: #8f8772;
}

/* 15분의 결: 리듬 곡선 + 타임라인 = 같은 폭, 같은 시간축 */
.flow-wrap { width: 100%; }
.flow-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8f8772;
  letter-spacing: 0.04em;
}
#rhythm-box { margin: 0 0 6px; }

/* 오늘 누적: 이 세션이 오늘 더미의 어디에 더해졌는지 = 홈으로 이어지는 다리 */
.harvest-today {
  /* 오늘 누적: 홈 주간 블록과 중복 — 리포트에서 제외 (요소는 JS 참조로 유지) */
  display: none;
}
.ht-left { font-size: 0.76rem; color: #8f8772; text-align: left; }
.ht-left b { display: block; font-size: 1.05rem; color: #f7f4ec; font-weight: 800; margin-top: 3px; }
.ht-post { margin: 0; font-size: 0.76rem; color: #8f8772; font-variant-numeric: tabular-nums; }
.ht-post:empty { display: none; }
.ring-time {
  margin: 0;
  font-size: 2.3rem;
  font-weight: 800;
  color: #a3cc52; /* 홈의 초록 더미와 같은 색 — 같은 것을 말한다 */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.stat-card .tl-caption { color: #8f8772; }
.stat-card .timeline { background: #353127; box-shadow: none; }
.stat-card .seg-breach {
  background: repeating-linear-gradient(-55deg, #57503f, #57503f 3px, #494335 3px, #494335 6px);
}
/* 마찰 = 흐린 결 (끊김보다 한층 옅게 — 시각 위계: 하이라이트 > 끊김 > 마찰) */
.seg-friction {
  position: absolute;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(
    -55deg,
    rgba(247, 244, 236, 0.1),
    rgba(247, 244, 236, 0.1) 2px,
    transparent 2px,
    transparent 5px
  );
}
.stat-card .tl-times { color: #6f6a5c; }
.stat-card .playhead { background: #f7f4ec; }

.timeline-wrap { width: 100%; }
.timeline {
  position: relative;
  height: 18px;
  border-radius: 9px;
  background: linear-gradient(180deg, #e2d7bc, #eae0c9);
  box-shadow: inset 0 1px 3px rgba(120, 100, 60, 0.15);
  overflow: hidden;
}
.seg-breach {
  position: absolute;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(
    -55deg, #c4b596, #c4b596 3px, #b5a687 3px, #b5a687 6px
  );
  opacity: 0.8;
}
.seg-highlight {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(180deg, #ead28a, #d9b95f);
  box-shadow: 0 0 14px rgba(217, 185, 95, 0.75);
  border-radius: 8px;
}
.tl-caption {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #8a7c5c;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tl-caption:empty { display: none; }

.report-details {
  width: 100%;
  font-size: 0.88rem;
  color: #6f6350;
  border-top: 1px solid #e7e2d5;
  padding-top: 16px;
}
/* 그래프 (차트 라이브러리 없음 · 격자선 없음 · 모래톤 단색) */
.graph-box { margin: 4px 0 14px; }
.graph-label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #8a8272;
  letter-spacing: 0.02em;
}
.graph-svg {
  width: 100%;
  display: block;
  overflow: visible;
}
.graph-caption {
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: #9a917f;
  font-variant-numeric: tabular-nums;
}
.ring-base {
  margin: 1px 0 0;
  font-size: 0.7rem;
  color: #6f6a5c;
  font-variant-numeric: tabular-nums;
}
.ring-base:empty { display: none; }
body.theme-dark .graph-label { color: #948a72; }

/* 상세 지표: 라벨-값 한 줄씩 (데이터 중심 톤) */
.detail-rows { display: flex; flex-direction: column; gap: 7px; }
.detail-rows p { margin: 0; font-variant-numeric: tabular-nums; }
.detail-rows p:empty { display: none; }
body.theme-dark .report-details { border-color: #3a352c; }
.report-details summary {
  cursor: pointer;
  color: #9a8d6f;
  margin-bottom: 8px;
  transition: color 0.15s;
}
.report-details summary:hover { color: #6f6350; }
.moment-card { transition: box-shadow 0.15s; }
.moment-card:hover { box-shadow: 0 4px 14px rgba(120, 100, 60, 0.12); }

/* 의심 순간 카드 (예/아니오) */
.micro-title { font-size: 0.98rem; margin-top: 10px; }
.moment-card.micro { border-style: dotted; }
.moment-card.micro.answered { opacity: 0.65; }
.micro-btns { display: flex; flex-direction: column; gap: 6px; }
.micro-btn {
  padding: 6px 12px;
  border: 1px solid #d8cbab;
  border-radius: 999px;
  background: #fbf7ec;
  color: #6f6350;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.micro-btn.on { background: #16140f; border-color: #16140f; color: #f7f4ec; }
.micro-note {
  margin-top: 8px;
  width: 100%;
  padding: 7px 12px;
  border: 1px solid #ddd8ca;
  border-radius: 10px;
  font-size: 0.8rem;
  background: #fbfaf6;
  color: #2a2620;
  outline: none;
  box-sizing: border-box;
}
.micro-note:focus { border-color: #16140f; }
body.theme-dark .micro-note { background: #241f19; border-color: #4a4234; color: #d9cdb4; }
body.theme-dark .micro-btn { background: #241f19; border-color: #4a4234; color: #d9cdb4; }
body.theme-dark .micro-btn.on { background: #c9a86a; border-color: #c9a86a; color: #241f19; }
.report-details p { margin: 6px 0; line-height: 1.5; }

.early-line { font-size: 0.88rem; color: #9a8d6f; margin: 0; }

/* 자가 라벨링 */
.hidden { display: none !important; }

.label-sec {
  width: 100%;
  border-top: 1px solid #e7e2d5;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.label-title {
  font-size: 1rem;
  font-weight: 800;
  color: #14120d;
  margin: 0;
  letter-spacing: -0.01em;
}
.label-hint { font-size: 0.82rem; color: #9a917f; margin: 0; line-height: 1.5; }
body.theme-dark .label-hint { color: #8a8272; }

/* 드래그 추가 제거(2026-07-31): 십자 커서·터치 잠금 해제 —
   끊김 구간 탭만 남으므로 모바일에서 세로 스크롤이 정상 동작해야 한다 */
.label-timeline { cursor: default; }
/* 타임랩스 */
.lapse-sec { width: 100%; }
.lapse-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid #e7e2d5;
  background: #16140f;
  transform: scaleX(-1); /* 거울 모드 일치 */
  box-shadow: 0 8px 24px rgba(20, 18, 13, 0.12);
}
body.theme-dark .lapse-img { border-color: #3a352c; }
.lapse-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}
.lapse-row .tl-caption { margin: 0; }
body.theme-dark .lapse-img { border-color: #3a352c; }

/* 타임랩스 재생 헤드 (타임라인 위를 달림) */
.playhead {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2.5px;
  background: #7a5a28;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(122, 90, 40, 0.6);
}
body.theme-dark .playhead { background: #e8dcbe; }

.tl-times {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #b0a385;
  margin-top: 4px;
}

/* 끊긴 순간 카드 */
.moments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.moment-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #ebe8e0;
  border-radius: 16px;
  padding: 12px 16px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(20, 18, 13, 0.04);
}
.moment-card.denied { opacity: 0.45; }
.moment-card.denied .chip-reason { text-decoration: line-through; }
.moment-card .chip-body { flex: 1; }
.chip-snap.empty {
  width: 84px;
  height: 62px;
  background: #efe7d2;
  border-radius: 8px;
  flex-shrink: 0;
}
.label-timeline .seg-breach.tappable { cursor: pointer; }
.label-timeline .seg-breach.tappable:hover { opacity: 1; filter: brightness(0.92); }
.seg-breach.denied {
  opacity: 0.35;
  background: repeating-linear-gradient(
    -55deg, #cfc2a4, #cfc2a4 3px, #e6dcc4 3px, #e6dcc4 6px
  );
}
.label-chip {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e7e2d5;
  border-radius: 16px;
  padding: 10px 14px;
}
.chip-snap {
  width: 84px;
  border-radius: 8px;
  transform: scaleX(-1); /* 거울 모드 일치 */
}
.chip-body { text-align: left; }
.chip-time { font-size: 0.78rem; color: #9a8d6f; margin: 0 0 2px; }
/* 카드 상태 한 줄 — AI 판정 기본값. 사용자는 틀린 것만 탭 */
.chip-state { font-size: 0.9rem; font-weight: 700; color: #3d3629; margin: 0; }
body.theme-dark .chip-state { color: #d9d4c6; }
.chip-reason { font-size: 0.9rem; color: #3d3629; margin: 0 0 8px; }
.chip-toggle {
  padding: 7px 15px;
  border: 1.5px solid #16140f;
  border-radius: 999px;
  background: transparent;
  color: #16140f;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip-toggle:hover { background: #16140f; color: #f7f4ec; }
.chip-toggle.undo { border-color: #9a917f; color: #9a917f; }

.label-actions { display: flex; gap: 10px; justify-content: center; }
.btn-primary.small { padding: 10px 24px; font-size: 0.92rem; }
.btn-skip {
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: #9a8d6f;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
}

/* ── 모바일 (세로 기준 설계 — SPEC 4의2) ───────────── */
.mount-svg { width: 210px; margin: 6px auto 14px; display: block; }

/* 준비 화면 한 줄 안내: 모바일에서만 (데스크톱은 기기 안내·단계 목록이 보인다) */
.calib-oneline { display: none; }

@media (max-width: 640px) {
  /* 준비 화면: 10초 안에 읽을 양만 — 기기 안내·단계 목록은 미리보기 화면이 대신 말한다 */
  .calib-devices, .calib-steps { display: none; }
  .calib-oneline {
    display: block;
    margin: 0 0 16px;
    font-size: 0.92rem;
    color: #b5ad98;
  }
  .calib-head { font-size: 1.26rem; margin-bottom: 6px; }
  .calib-preview { width: min(64vw, 252px); }
}

@media (max-width: 480px) {
  .start-title { font-size: 1.72rem; }
  .start-inner { padding: 26px 20px; }
  .report-inner { padding: 30px 14px; gap: 18px; }
  .stat-card { padding: 20px 14px 18px; border-radius: 20px; }
  .harvest svg { width: 140px; }
  .harvest-line span { font-size: 1.65rem; }
  #hourglass {
    width: min(50vw, 188px);
    margin-top: calc(min(50vw, 188px) * -0.16);
    margin-bottom: calc(min(50vw, 188px) * -0.23);
  }
  .time-left { font-size: 2rem; }
  .moment-card { flex-wrap: wrap; }
  .micro-btns { flex-direction: row; width: 100%; }
  .micro-btn { flex: 1; }
}

/* 가로모드 (폰 눕힘·낮은 창): 모래시계 왼쪽 + 정보 오른쪽 */
@media (orientation: landscape) and (max-height: 540px) {
  .session-inner {
    flex-direction: row;
    gap: 34px;
    justify-content: center;
  }
  #hourglass {
    width: auto;
    height: 68vh;
    max-height: 380px;
  }
  .session-side { gap: 12px; }
  .time-left { font-size: 1.9rem; margin: 0; }
  .session-btns { margin-top: 10px; flex-direction: column; gap: 8px; }
  /* 준비 화면 가로: 세로 공간이 없다 — 전체를 컴팩트하게.
     단계 목록은 접는다 (핵심은 제목 한 줄 + 화면 속 얼굴) */
  .calib-head { font-size: 1.15rem; margin-bottom: 8px; }
  .calib-lead { margin-bottom: 12px; font-size: 0.82rem; }
  .calib-steps { display: none; }
  .calib-devices { display: none; }
  .calib-preview { width: min(38vh, 160px); }
  .calib-count { margin-top: 8px; font-size: 1.6rem; }
  .btn-ghost.calib-redo { margin-top: 6px; padding: 6px 16px; min-height: 38px; }
  .calib-bowl { width: 100px; margin: 2px auto 8px; }
  .screen { padding: 16px 0; }
  .start-inner { padding: 18px 24px; }
  .mount-svg { width: 170px; margin: 2px auto 8px; }
}

/* ── 디버그 화면 (debug.html) ─────────────────────── */
.debug-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px;
}

.debug-page h1 { font-size: 1.3rem; }
.note { color: #9a917f; font-size: 0.85rem; }

.controls { display: flex; gap: 8px; margin: 16px 0; }

.debug-page button {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: #c9a86a;
  color: #241f18;
  font-size: 0.95rem;
  cursor: pointer;
}
.debug-page button:disabled { background: #4a443a; color: #8a8172; cursor: default; }

#status { color: #c9a86a; min-height: 1.2em; }

.layout { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; }

#debug-video {
  width: 360px;
  max-width: 100%;
  border-radius: 12px;
  background: #000;
  transform: scaleX(-1); /* 거울 모드 */
}

.readout { border-collapse: collapse; font-size: 0.95rem; align-self: flex-start; }
.readout th, .readout td { padding: 6px 14px; text-align: left; }
.readout th { color: #9a917f; font-weight: 500; }
.readout td { font-variant-numeric: tabular-nums; min-width: 90px; }
.readout tr.sep th, .readout tr.sep td { border-top: 1px solid #3a362e; padding-top: 12px; }