/*
 * Focus 대시보드
 *
 * site-bookshelf 의 규칙을 따른다.
 *   1. 선을 쓰지 않는다. 계층은 표면 밝기와 여백으로만 만든다.
 *   2. 만지는 것에만 표면을 준다. 읽기만 하는 것은 바닥 위에 놓인다.
 *      (차트는 예외 — 값이 놓일 '자리'라서 경계가 있어야 읽힌다.)
 *   3. 색은 장식이 아니다. 강조색은 주 버튼과 상태 표시에만 쓴다.
 *   4. 조작은 아래에 둔다. 폰을 한 손으로 들면 엄지가 닿는 곳은 화면
 *      아래 3분의 1이고, 위쪽 끝은 손을 고쳐 쥐어야 닿는다. 그중에서도
 *      되돌릴 수 없는 것은 오른쪽 끝에 하나만, 강조색을 달고 놓는다.
 *
 * 팔레트는 bookshelf(따뜻한 갈색·금색)와 구분되게 잡았다. 같은 손이
 * 만든 티는 규칙에서 나지 색에서 날 필요가 없고, 두 사이트가 나란히
 * 열려 있을 때 어느 쪽인지 바로 알아야 한다.
 */

:root {
  /* 브라우저 기본 UI(스크롤바·선택 강조)까지 다크로 끌어온다 */
  color-scheme: dark;

  --bg: #101211;
  --surface: #1a1d1b;    /* 만지는 것: 카드·입력·버튼 */
  --raised: #232725;     /* 떠 있는 것: 차트 바닥 */

  --text: #e7e9e6;
  --text-dim: #868b84;

  /* 집중을 뜻하는 차분한 초록. 주 버튼과 '집중' 지표에만 */
  --accent: #7fae7a;
  --danger: #c07c6c;     /* 채도를 낮춰 경고음이 되지 않게 한다 */

  /* 상태 색 — 여기서 색은 장식이 아니라 '무엇이었나' 라는 정보다 */
  --st-focus: #7fae7a;
  --st-rest: #6f8fa8;
  --st-pause: #4a4f4b;

  /* 바디배터리 — 남은 기운. 초록(스트레스)·파랑(휴식 구간) 어디와도
     겹치지 않아야 세 선이 한 화면에서 갈린다 */
  --bb: #c9a26a;

  --radius: 14px;
  --pill: 999px;
  --app: 560px;          /* 읽는 폭. 본문 0.94rem 에서 약 35자 */
  --tap: 46px;
  --ease: 170ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

* { box-sizing: border-box; }

/* hidden 은 UA 스타일이라 작성자가 선언한 display 에 진다.
   개별 규칙마다 막지 말고 여기서 한 번에 이긴다. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo',
               'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body { padding: 0 18px; }

a { color: var(--accent); text-decoration: none; }
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }

/* 키보드로 옮겨 다닐 때만 윤곽이 나온다 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

section { width: 100%; max-width: var(--app); margin: 0 auto; }

/* ── 글자 ───────────────────────────────────────────────── */

h1 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; margin: 56px 0 24px; }
h3 {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-dim); margin: 36px 0 12px;
}

.dim { color: var(--text-dim); font-size: 0.82rem; }
.empty { color: var(--text-dim); font-size: 0.88rem; padding: 8px 0; }

/* ── 폼 ─────────────────────────────────────────────────── */

input[type=password], textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: background var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); opacity: 1; }
textarea { resize: vertical; line-height: 1.55; }

.btn {
  min-height: var(--tap);
  padding: 0 20px;
  border-radius: var(--pill);
  background: var(--accent);
  color: #0e1410;
  font-weight: 600;
  transition: opacity var(--ease);
}
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-quiet { background: var(--surface); color: var(--text-dim); font-weight: 400; }

/* ── 잠금 ───────────────────────────────────────────────── */

/*
 * 잠금 화면은 스크롤이 없다 — 떠 있는 바 대신 내용을 바닥으로 민다.
 * h1 의 위쪽 auto 여백이 남는 높이를 전부 먹어서, 제목·입력칸·안내가
 * 한 덩어리로 엄지 범위에 앉는다.
 */
#lock {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}
#lock h1 { margin: auto 0 20px; }
#lock-form { display: flex; gap: 8px; }
#status { margin-top: 14px; font-size: 0.82rem; color: var(--text-dim); }
#status.error { color: var(--danger); }
#status a { display: inline-block; margin-top: 6px; word-break: break-all; }

/* ── 하단 바 ────────────────────────────────────────────── */

/*
 * 목록과 상세는 스크롤하는 화면이다. 조작을 문서 끝에 두면 긴 목록에서는
 * 바닥까지 내려야 닿으므로, 엄지가 쉬는 자리에 고정해 늘 띄워둔다.
 *
 * 가로 위치는 화면이 바뀌어도 움직이지 않는다 — 옮길 때마다 버튼이 튀면
 * 손이 자리를 다시 찾아야 한다.
 *
 * 배경을 깐다. 글이 바 뒤로 비쳐 흐르면 둘 다 못 읽는다.
 */
.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  width: 100%; max-width: var(--app);
  margin: 0 auto;
  padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
}
/* 잠그기는 바 안에서도 오른쪽 끝 — 월 선택과 손가락 하나만큼 떨어뜨린다.
   자주 쓰지 않는데 잘못 누르면 12시간 캐시가 날아가고 다시 입력해야 한다. */
.dock .btn-quiet { padding: 0 16px; }

/*
 * 잠그기는 엄지에서 가장 먼 모서리. 규칙 4 의 뒷면이다 — 자주 쓰는 것을
 * 아래에 두는 만큼, 잘못 누르면 번거로운 것은 손이 닿기 어려운 데 둔다.
 *
 * 가로 위치를 읽는 폭에 맞춰 세운다. 화면이 넓어져도 글 옆에 붙어 있어야
 * 눈이 따로 찾아가지 않는다.
 */
.corner {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: max(18px, calc(50vw - var(--app) / 2 + 18px));
  z-index: 30;
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.82rem;
}

/* 하단 바 뒤로 마지막 항목이 숨지 않도록. 목록에는 바가 없다. */
#detail {
  padding-top: 30px;
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
}
.stats-top { margin-top: 26px; }
#main { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }

/*
 * 불러오는 중·오류만 바닥에 잠깐 뜬다. 세션 개수 같은 건 굳이 말하지
 * 않는다 — 목록을 보면 이미 아는 것이고, 늘 떠 있는 글은 곧 안 읽힌다.
 *
 * :empty 로 사라지는 게 핵심이다. 빈 채로 남으면 배경색이 같아 보이지는
 * 않으면서 마지막 카드 위에 겹쳐 탭을 가로챈다.
 */
#status-main {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  margin: 0;
  max-width: calc(100vw - 36px);
  padding: 9px 16px;
  background: var(--raised);
  border-radius: var(--pill);
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#status-main:empty { display: none; }
#status-main.error { color: var(--danger); }

/* ── 세션 목록 ──────────────────────────────────────────── */

/*
 * 브라우저의 스크롤 앵커링을 끈다. 위에 내용을 끼워 넣을 때 브라우저도
 * 나름대로 보정하는데, app.js 가 이미 scrollHeight 차이만큼 되밀고 있어
 * 둘이 겹치면 두 번 보정돼 화면이 튄다.
 */
#list {
  display: flex; flex-direction: column; gap: 10px;
  overflow-anchor: none;
  padding-top: 62px;   /* 우상단 잠그기 아래로 내용이 숨지 않게 */
}

/* 목록 맨 위. 카드와 같은 폭이라 '목록의 연장'으로 읽히고, 강조색을
   쓰지 않는다 — 더 보는 것은 확정 행동이 아니다. */
.older { width: 100%; margin-bottom: 4px; }

/*
 * 날짜 구분. 선을 긋지 않는다(규칙 1) — 날짜 자체가 경계라서, 선은
 * 같은 말을 한 번 더 하는 것이다. 위로 띄운 여백이 그 일을 한다.
 */
.daymark {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-dim);
  margin: 20px 0 -2px; padding-left: 2px;
}
#list > .daymark:first-child { margin-top: 0; }

.card {
  display: block; width: 100%; text-align: left;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 15px 17px;
  transition: background var(--ease);
}
.card:hover { background: var(--raised); }

/*
 * 시각 · 무엇 · 얼마나. 한 줄로 읽힌다.
 *
 * 자리 순서와 강조 순서는 다르다. 눈은 왼쪽부터 훑지만 무게는
 * 제목 > 시작시각 > 공부시간 순으로 준다 — 먼저 '무엇이었나'를 잡고,
 * 그다음 '언제', 마지막이 '얼마나'다.
 */
.card-line {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 11px;
}
/*
 * 무게 세 단계: 제목 > 시작시각 > 경과시간·종료시각.
 *
 * 뒤의 둘은 같은 층이다. 종료시각은 시작과 경과에서 따라 나오고,
 * 경과는 막대가 이미 모양으로 말하고 있다 — 둘 다 찾아 읽는 값이다.
 */
.card-line .t {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* '23:11 ~ 00:41' 이 반으로 접히지 않게 */
}
.card-line .t0 { font-size: 0.92rem; font-weight: 500; color: var(--text); }
.card-line .t1 { font-size: 0.84rem; color: var(--text-dim); margin-left: 5px; }

.card-line .what {
  font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em;
}
.card-line .dur {
  margin-left: auto;
  font-size: 0.84rem; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}


/*
 * 세션의 결을 시간 순서대로. 조각 사이 1px 틈이 전환을 표시한다 —
 * 같은 색이 이어지는 일은 없으므로 틈은 늘 '여기서 바뀌었다'는 뜻이다.
 *
 * 조각이 아무리 짧아도 1px 은 남긴다. 2분짜리 휴식이 두 시간 세션에서
 * 사라지면 '끊긴 적 없는 세션'으로 잘못 읽힌다.
 */
.bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; gap: 1px; }
.bar i { display: block; min-width: 1px; flex-shrink: 0; }
.bar .f { background: var(--st-focus); }
.bar .r { background: var(--st-rest); }
.bar .p { background: var(--st-pause); }



/* ── 상세 ───────────────────────────────────────────────── */

/*
 * 날짜와 제목이 한 줄에 나란히 선다. 크기가 같고 색만 다르다 —
 * 날짜는 '어느 날인가'를 잡아주는 자리지 제목과 겨루는 자리가 아니다.
 *
 * 사이 간격은 입력칸의 왼쪽 padding 이 만든다. gap 을 크게 주면
 * 제목을 눌렀을 때 뜨는 표면이 날짜에서 멀리 떨어져 어색해진다.
 */
.detail-head {
  display: flex; align-items: baseline; gap: 2px;
  margin-bottom: 5px;
}
.detail-date {
  font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-dim);
  white-space: nowrap;
}

/*
 * 입력칸처럼 보이지 않게 둔다. 대부분의 세션은 이름이 없고, 빈 칸이
 * 테두리를 두르고 있으면 '채워야 할 것'처럼 보인다. 만졌을 때만
 * 표면이 뜬다(규칙 2).
 */
.detail-title {
  flex: 1; min-width: 0;
  margin: 0;
  padding: 3px 8px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em;
  transition: background var(--ease);
}
.detail-title::placeholder { color: var(--text-dim); opacity: 1; }
.detail-title:hover { background: var(--surface); }
.detail-title:focus { outline: none; background: var(--surface); }
.detail-title:disabled { opacity: 0.5; }

/* 언제 · 얼마나. 카드와 같은 무게 관계를 쓴다 */
.detail-when {
  display: flex; align-items: baseline; gap: 12px;
  font-variant-numeric: tabular-nums;
}
.detail-when .t { font-size: 0.86rem; color: var(--text); }
.detail-when .t1 { color: var(--text-dim); margin-left: 5px; }
.detail-when .dur { margin-left: auto; font-size: 0.86rem; color: var(--text-dim); }

.stats { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 14px; }
.stats div { display: flex; flex-direction: column; gap: 1px; }
.stats b {
  font-size: 1.25rem; font-weight: 600;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.stats span { font-size: 0.72rem; color: var(--text-dim); }
.sub-stats b { font-size: 1rem; font-weight: 500; }

/*
 * 축은 SVG 밖 HTML 이다. 차트는 viewBox 로 늘고 주는데 눈금 글자까지
 * 같이 줄면 폰에서 절반 크기로 찍힌다. 왼쪽은 스트레스, 오른쪽은
 * 바디배터리 — 자는 같은 0~100 이지만 색이 어느 선의 눈금인지 말한다.
 */
.chart-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 7px;
  margin: 22px 0 6px;
}
.ax {
  position: relative; grid-row: 1;
  font-size: 0.64rem; font-variant-numeric: tabular-nums;
}
.ax span { position: absolute; transform: translateY(-50%); }
.ax-s { grid-column: 1; color: var(--accent); }
.ax-s span { right: 0; }
.ax-bb { grid-column: 3; color: var(--bb); }
.ax-bb span { left: 0; }

.ax-x {
  position: relative; grid-column: 2; grid-row: 2; height: 15px;
  font-size: 0.64rem; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.ax-x span { position: absolute; top: 1px; transform: translateX(-50%); white-space: nowrap; }

/* 차트는 값이 놓일 '자리' — 규칙 2의 예외 */
.chart {
  width: 100%; height: auto; display: block;
  background: var(--raised);
  border-radius: var(--radius);
}
/* 격자는 읽는 걸 돕되 데이터를 이기면 안 된다 — 데이터 선의 1/3 굵기 */
.chart .grid { stroke: var(--text-dim); stroke-width: 0.6; opacity: 0.22; }

/* 짚은 자리. 격자보다는 진하고 데이터보다는 옅다 */
.chart .cross { stroke: var(--text); stroke-width: 0.8; opacity: 0.45; }
.chart .dot { stroke: var(--raised); stroke-width: 1.2; }
.chart .dot-s { fill: var(--accent); }
.chart .dot-bb { fill: var(--bb); }
.chart .dot-hr { fill: var(--text-dim); }

.chart-wrap { position: relative; grid-column: 2; grid-row: 1; }

/*
 * 툴팁은 차트 위에 떠 있고 포인터를 통과시킨다 — 그러지 않으면 자기
 * 아래의 자리를 못 짚게 막아서, 커서를 옮길수록 달아나는 꼴이 된다.
 */
.chart-tip {
  position: absolute; top: 10px;
  z-index: 5;
  pointer-events: none;
  transform: translateX(9px);
  display: flex; gap: 9px;
  padding: 6px 10px;
  background: var(--raised);
  border-radius: 8px;
  font-size: 0.72rem; color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chart-tip b { color: var(--text); font-weight: 600; }
.chart-tip .v-s { color: var(--accent); }
.chart-tip .v-bb { color: var(--bb); }
.chart-tip .v-hr { opacity: 0.65; }
/* 오른쪽 절반에서는 왼쪽으로 — 안 그러면 차트 밖으로 넘친다 */
.chart-tip.flip { transform: translateX(calc(-100% - 9px)); }
/*
 * 굵기와 진하기가 곧 무게다: 스트레스 > 바디배터리 > HR.
 * HR 은 거의 안 보여도 되지만, 스트레스가 튄 자리에서 심박도 같이
 * 튀었는지 곁눈질할 수 있을 만큼은 남긴다.
 */
.chart path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-s { stroke: var(--accent); stroke-width: 2.1; }
.chart .line-bb { stroke: var(--bb); stroke-width: 1.5; }
.chart .line-hr { stroke: var(--text-dim); stroke-width: 0.9; opacity: 0.5; }

.legend {
  display: flex; gap: 16px; font-size: 0.72rem;
  color: var(--text-dim); margin-bottom: 4px;
}
.legend .grid-note { color: var(--text-dim); opacity: 0.75; }
.legend i {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 5px; vertical-align: -1px;
}

/* ── 메모 ───────────────────────────────────────────────── */

.note { padding: 0 0 18px; }
.note-time {
  font-size: 0.7rem; color: var(--text-dim);
  font-variant-numeric: tabular-nums; margin-bottom: 3px;
}
.note-text { white-space: pre-wrap; font-size: 0.94rem; }

#note-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* 되돌릴 수 없는 것 하나를 오른쪽 끝에. 남긴 메모는 대시보드에서 지울
   수 없으므로, 여기가 이 화면에서 유일하게 강조색을 다는 자리다. */
#note-form .btn { align-self: flex-end; }