/* 임시 디자인 — 나중에 디자인 플랫폼으로 바탕을 만든 뒤 바꿀 예정. 지금은 동작 확인용 최소 스타일만 둔다. */
:root {
  /* ── 색은 이 표에서만 정한다(9/27 사용자 요청 — 값을 곳곳에 직접 적지 말고 변수 표를 참조).
     아래 규칙들은 var(--이름)만 쓴다. 표 밖에 #색·rgb() 를 적으면 tests/app-files.test.mjs 가 실패한다.
     표 밖 예외(CSS 변수를 못 쓰는 자리): index.html theme-color = --accent, manifest theme_color = --accent · background_color = --bg
     (테스트가 같은 값인지 확인), 구글 로고 네 색(ui/dom.js — 구글 브랜딩 규정값). ── */

  /* 바탕·글자·선 */
  --bg: #faf7f3; /* 화면 바탕 */
  --card: #ffffff; /* 칸(카드)·입력칸·칩·팝업·흰색 채움 단추 */
  --text: #2a2320; /* 본문 글자 */
  /* 옅은 글자: WCAG 1.4.3 대비 4.5:1 이상 — 흰 바탕 4.99, 기본 바탕 4.68 (9/24, 전 #8a817c 는 3.57~3.81 미달) */
  --muted: #766e69;
  --line: #e6dfd8; /* 칸·목록 줄·입력칸 테두리 */

  /* 강조(주 동작)·버튼 */
  --accent: #3b2a20; /* 진한 커피색 — 주 동작 채움·선택된 칩·아래 탭 */
  --accent-text: #ffffff; /* 진한 채움 위 글자 */
  /* 누를 수 있는 보조 버튼(9/26 사용자 요청 — 흰 버튼이 흰 칸과 구분이 안 돼 거슬림): 옅은 갈색 채움 + 테두리.
     테두리 대비 흰 칸 3.67:1 · 바탕 3.44:1(WCAG 1.4.11 비텍스트 3:1), 글자 10.9:1 */
  --btn-bg: #efe4d8;
  --btn-line: #9a8169;
  /* 비활성(9/27 사용자 결정 — 회색 글자만으로는 차이가 잘 안 보여, 연한 회색 채움 + 진한 회색 글자):
     비활성 기록 줄 · [비활성화] 단추. 글자 대비 채움 위 6.36:1, 테두리 바탕 3.27:1 · 흰 칸 3.49:1. 베이지 단추와는 밝기가 비슷하고 채도로 구분된다 */
  --inactive-bg: #e9e6e3;
  --inactive-text: #57504b;
  --inactive-line: #8f8883;

  /* 상태 */
  --warn: #b3261e; /* 되돌릴 수 없는 동작(지우기) · 늦음·넘침 · 설문 대기 */
  --ok: #2e6b3a; /* 잘 됨(판정·저장 배너 글자) */

  /* 알림·배너 바탕(옅은 채움 + 테두리) — 글자는 --text */
  --tone-warn-bg: #fff4e0; /* 노랑: 주의·로그인 배너·늦게/일찍 누름 */
  --tone-warn-line: #f1d9a8;
  --tone-ok-bg: #eaf5ec; /* 초록: 계정 저장 중·제때 누름·그래프 가운데 칸 */
  --tone-ok-line: #b9dcc0;
  --tone-error-bg: #fdecea; /* 빨강: 오류 */
  --tone-error-line: #f1b8b4;
  --tone-info-bg: #eef4fb; /* 파랑: 안내 */
  --tone-info-line: #c6d8ee;
  --tone-diff-bg: #fdf1e7; /* 두 기록 비교에서 다른 칸 */
  --pour-text: #9c3d38; /* 타이머 붓는 구간(목표 g) 글자 · 깜박임 두 색 */
  --pour-bg: #fbe8e6;
  --pour-bg-strong: #f3cfcb;

  /* 그래프 */
  --chart-second: #2f6db5; /* 파랑 점선: 비교하는 두 번째 계열(지난 추출·측정 개수) */
  --chart-third: #8a5a2b; /* 갈색: 누적 비율 */
  --chart-mean: #7b4fa0; /* 보라: 분쇄 측정 평균 선·범위(9/27 — 빨강은 지우기·경고 뜻이라 뗌. 같은 그래프의 막대=커피·누적=갈색과 겹치지 않는 색. 흰 바탕 6.06:1) */

  /* 그림자·덮개 */
  --scrim: rgba(0, 0, 0, 0.35); /* 팝업 뒤 어둡게 */
  --shadow: rgba(0, 0, 0, 0.3); /* 스위치 손잡이 그림자 */
  --ripple: rgba(59, 42, 32, 0.16); /* 타이머 원 누름 물결(= --accent 16%) */

  /* 구글 로그인 버튼 — 구글 「Sign in with Google」 브랜딩 가이드 밝은 테마 값(앱 색과 섞지 않는다) */
  --google-bg: #ffffff;
  --google-text: #1f1f1f;
  --google-line: #747775;

  /* ── 글자 크기·여백은 역할로 정한다(사용자 요청 9/25 — 같은 역할인데 크기·여백이 제각각이던 것) ──
     글자 크기는 아래 여섯 단계만 쓴다. 예외(타이머의 멀리서 보는 숫자·기호 글자·그래프 눈금·구글 버튼)는
     tests/app-files.test.mjs 의 목록에 이유와 함께 적어 두고, 그 밖에 직접 적은 크기가 있으면 테스트가 실패한다. */
  --fs-title: 1.4rem; /* 화면 제목(h1) */
  --fs-card: 1.2rem; /* 칸(카드) 제목 h2 — 레시피·서버·백업 등(사용자 요청 9/25: 조금 더 크게, 왼쪽 정렬 그대로) */
  --fs-section: 1.05rem; /* 설문 항목 이름·큰 버튼·보여 주기만 하는 값 */
  --fs-body: 1rem; /* 본문·입력칸·버튼·목록 줄 */
  --fs-label: 0.9rem; /* 입력칸 이름(굵게)·칩·표·알림 상자·안내 목록 */
  --fs-help: 0.85rem; /* 옅은 설명(hint)·고른 것의 설명·스위치 설명·작은 버튼·표시 뱃지 */
  --fs-caption: 0.78rem; /* 이름 옆 옅은 부가 설명·출처·태그·범례·눈금 */
  /* 여백 세 단계 */
  --sp-1: 4px; /* 글 줄과 글 줄 사이(이름과 설명, 목록 줄) */
  --sp-2: 8px; /* 한 항목 안(이름 → 입력칸 → 설명), 칩·버튼끼리 */
  --sp-3: 12px; /* 항목과 항목 사이, 칸(카드)과 칸 사이, 칸 안쪽 여백 */
  --pad-box: 10px 12px; /* 알림 상자·배너·목록 줄의 안쪽 여백 */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; font-size: var(--fs-body); }
/* 한국어 줄바꿈(사용자 결정 9/24): 어절(띄어쓰기) 단위로 끊는다 — W3C klreq 는 「글자」·「어절」 중 작성자가 고르게 한다.
   띄어쓰기 없는 긴 덩어리(URL·긴 영문 이름)는 넘치지 않게 그 안에서 끊는다. 설명문은 마지막 줄에 글자가 조금만 남지 않게 다듬는다. */
/* 줄바꿈(9/24 → 9/27 사용자 요청 «단어 중간에서 끊겨 읽기 힘들다»): 한글은 어절(띄어쓰기) 단위로만 끊는다(W3C klreq 의 «단어 단위» 방식).
   overflow-wrap 은 break-word 만 쓴다 — anywhere 는 칸 최소 폭을 셀 때 단어 중간도 끊을 자리로 쳐서 표 칸이 좁아지면 「에티오피⏎아」가 된다(MDN).
   break-word 는 한 단어가 한 줄보다 길 때(주소·긴 영문)만 그 단어를 끊는다. 가운뎃점·연산자·짧은 괄호는 ui/dom.js typeset 이 붙여 둔다.
   text-wrap-style: pretty = 문단 마지막 줄에 한 단어만 남지 않게(지원하지 않는 브라우저는 그냥 무시). */
body { word-break: keep-all; overflow-wrap: break-word; text-wrap-style: pretty; }
h1, h2, h3, p, li, .hint, .choice-desc, .step-hint, .source, .note, .next { text-wrap: pretty; }
body { padding-bottom: 72px; }
.screen { max-width: 640px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: var(--sp-3); }
/* 제목 아래 여백은 칸의 간격(gap)이 맡는다 — 제목에 따로 margin 을 두면 칸마다 여백이 달라진다 */
h1 { font-size: var(--fs-title); margin: var(--sp-1) 0 0; }
h2 { font-size: var(--fs-card); margin: 0; }
h3 { font-size: var(--fs-section); margin: 0 0 var(--sp-2); }
a { color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
/* 입력칸 제목은 진하게(사용자 요청 9/24 — 「기본 형식」 같은 제목 성격). 옆의 보조 설명(term-sub)은 옅고 가늘게 그대로 */
.field-label { font-size: var(--fs-label); color: var(--text); font-weight: 700; }
.hint, .muted { color: var(--muted); font-size: var(--fs-help); }
/* 칸 안에서 위아래로 쌓는 묶음(이름 자동 스위치 + 이름, 날짜 + 설명 등) */
.stack { display: flex; flex-direction: column; gap: var(--sp-2); }
/* 핵심 단어 + 옅은 부가 설명(사용자 결정 9/24) — 설명은 눈에 덜 띄게. 어느 제목 옆이든 같은 크기(9/25) */
/* inline-block: 줄 끝에 안 들어가면 설명을 통째로 다음 줄로 내린다(「원두와 / 물의 비율」처럼 중간에서 끊기지 않게 — 9/24) */
.term-sub { color: var(--muted); font-size: var(--fs-caption); font-weight: 400; margin-left: var(--sp-1); display: inline-block; }
dl.kv dt .term-sub, table.compare td:first-child .term-sub { display: block; margin-left: 0; }
.center { text-align: center; }
.hidden { display: none !important; }
.row { display: flex; gap: var(--sp-2); align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.row > * { flex: 1; }
.row.between > * { flex: 0 1 auto; }
.row.between > button { flex: none; white-space: nowrap; } /* 옆 글이 길어도 버튼 글자가 두 줄로 접히지 않게(9/25 「추출 보기」) */
input[type="text"], input[type="number"], input[type="date"], select, textarea { font: inherit; padding: var(--sp-2); border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); width: 100%; }
button, .button { font: inherit; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--accent); text-decoration: none; text-align: center; display: inline-block; cursor: pointer; }
.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.big { font-size: var(--fs-section); padding: 14px; }
.wide { width: 100%; }
/* ± 칸(사용자 요청 9/25): 가운데 정렬, 칸 사이 여백 --sp-3, 입력칸을 조금 넓게 — 한쪽에 몰려 보이지 않게 */
.stepper { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
.stepper button { width: 44px; padding: 8px 0; font-size: 1.2rem; }
.stepper-input { text-align: center; flex: 0 1 140px; min-width: 0; }
.stepper .unit { flex: 0 0 2em; text-align: center; } /* 9/27: 단위(초·g·µm·℃) 글자 폭이 달라 줄마다 −·+ 위치가 어긋나던 것 — 폭 고정 */
.unit { color: var(--muted); }
.choice { display: flex; flex-direction: column; gap: var(--sp-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips-wrap { display: flex; flex-direction: column; gap: var(--sp-2); }
.chip { padding: 6px 12px; border-radius: 999px; font-size: var(--fs-label); background: var(--card); border-color: var(--line); color: var(--text); } /* 칩은 고르는 칸이라 버튼 색을 쓰지 않는다(9/26) */
.chip.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
/* 표는 두 종류(계획표·1:1 비교표) 모두 같은 크기 */
table.plan { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
table.plan th, table.plan td { text-align: left; padding: var(--sp-1) 6px; border-bottom: 1px solid var(--line); }
table.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
table.compare th, table.compare td { text-align: left; padding: var(--sp-1) 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.compare td:first-child { color: var(--muted); } /* 9/27: 항목 이름도 어절 단위로 줄을 바꾼다(한 줄 고정이면 「원두와 물의 비율(가수 포함)」 한 칸이 171px 를 먹어 표가 360px 폰에서 넘쳤다) */
table.compare tr.sec th { background: var(--bg); font-size: var(--fs-caption); color: var(--muted); }
table.compare tr.differs td:not(:first-child) { background: var(--tone-diff-bg); font-weight: 600; }
dl.kv { display: grid; grid-template-columns: 7em 1fr; gap: var(--sp-1) var(--sp-2); margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }
.note { white-space: pre-wrap; background: var(--bg); border-radius: 6px; padding: var(--sp-1) 6px; margin-top: var(--sp-1); }
.diff { font-size: var(--fs-body); }
.diff.strong { color: var(--warn); font-weight: 600; }
.total { font-weight: 600; }
.list-row { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--pad-box); background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); }
.list-row .right { text-align: right; }
/* 할 일 배지(설문 대기·거의 다 씀) — 9/27: 빨강은 지우기·경고 뜻이라 노랑(주의) 알약으로. 「거의 다 씀」 알림 상자(노랑)와 짝. 글자 14.17:1 */
.badge { color: var(--text); background: var(--tone-warn-bg); border: 1px solid var(--tone-warn-line); border-radius: 6px; padding: 1px var(--sp-2); font-size: var(--fs-help); } /* 9/28 사용자 결정: 알약 → 모서리만 둥근 상자(설문 대기·거의 다 씀·메모와 비슷 모두) */
.banner { background: var(--tone-warn-bg); border: 1px solid var(--tone-warn-line); border-radius: 10px; padding: var(--pad-box); font-size: var(--fs-label); }
.banner.ok { background: var(--tone-ok-bg); border-color: var(--tone-ok-line); }
.nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
/* 아래 탭: 아이콘만(사용자 요청 9/24). 고른 탭은 색 + 위쪽 막대 + 굵은 선 — 색만으로 구분하지 않게 */
.nav a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 52px; text-decoration: none; color: var(--muted); }
.nav a.on { color: var(--accent); } /* 위쪽 막대는 .nav-ind 가 맡는다(9/25 — 탭을 옮기면 미끄러져 간다) */
.nav-ind { position: absolute; top: 0; left: 0; height: 3px; background: var(--accent); border-radius: 0 0 2px 2px; pointer-events: none; }
.nav a.on .icon { stroke-width: 2.6; }
.nav a.on .icon-thin { stroke-width: 1.3; } /* 9/26 선이 가는 아이콘(icons.js WIDTH)은 같은 비율(×1.3)로만 굵힌다 — 2.6 을 그대로 받으면 켜졌을 때 뭉개진다 */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--accent); color: var(--accent-text); padding: var(--pad-box); border-radius: 10px; z-index: 20; }
.modal-back { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
.modal { background: var(--card); border-radius: 14px; padding: 16px; width: 100%; max-width: 360px; }
/* 팝업 제목 줄(9/27 사용자 결정): 제목 왼쪽 · ✕ 닫기 오른쪽. ✕ 는 누르는 곳 44px(Apple HIG 최소 44pt), 글자는 옅게 — 주된 단추(아래 줄)보다 눈에 덜 띄게 */
.popup-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: -10px -10px 0 0; }
.popup-head h3 { margin: 0; }
.modal:not(.sheet) > .popup-head + * { margin-top: var(--sp-1); } /* 제목 줄(✕ 44px)과 본문 사이를 시트의 칸 사이 여백과 비슷하게 */
.popup-x { flex: none; width: 44px; height: 44px; min-height: 0; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--muted); font-size: var(--fs-card); line-height: 1; }
.popup-x:active { background: var(--bg); }
/* 새 버전 알림(9/28 사용자 결정 ③): 아래 탭 바로 위에 떠 있는 알림 줄(앱의 notice-row 와 같은 모양). 타이머 화면에서는 숨긴다 */
.update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 9; max-width: 616px; margin: 0 auto; box-shadow: 0 2px 10px var(--shadow); }
body.timer-mode .update-bar { display: none; }
/* 구분선으로 나눈 묶음: 여러 칸이 든 묶음은 아래 여백 --sp-3, 한 줄짜리 목록은 위아래 --sp-2 */
.grinder-row { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--pad-box); background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: var(--sp-2); } /* 9/26: 칸 안의 상자로 통일 */
.note-row { display: flex; flex-direction: column; gap: var(--sp-1); }

/* 설문 */
.survey-item { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.item-title { border: none; background: none; padding: 0; font-weight: 700; font-size: var(--fs-section); text-align: left; }
/* 슬라이더 정렬(사용자 요청 9/25 — 눈금 단어가 칸 위치와 어긋나던 것).
   눈금 단어는 단계 수(--n)만큼 같은 폭의 칸에 가운데로 놓고, 슬라이더는 양옆을 반 칸씩 줄여 손잡이 가운데가 각 칸 가운데에 오게 한다.
   손잡이 폭(--thumb)을 직접 정해야 계산이 맞아서 슬라이더 모양은 브라우저 기본 대신 직접 그린다(손잡이 왼쪽은 앱 색으로 채움, --p). */
.scale-row { --thumb: 24px; display: flex; flex-direction: column; gap: var(--sp-1); }
input.scale { -webkit-appearance: none; appearance: none; display: block; width: auto; margin: 0 calc(50% / var(--n, 5) - var(--thumb) / 2); height: 44px; background: transparent; cursor: pointer; touch-action: pan-y; } /* pan-y(9/27): 세로 몸짓은 스크롤로 — 그때 바뀐 값은 dom.js guardScroll 이 되돌린다 */
input.scale::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p, 0.5)), var(--line) 0); }
input.scale::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p, 0.5)), var(--line) 0); }
input.scale::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc(3px - var(--thumb) / 2); border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--accent); }
input.scale::-moz-range-thumb { box-sizing: border-box; width: var(--thumb); height: var(--thumb); border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--accent); }
input.scale:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input.scale.off { opacity: 0.25; }
.ticks { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); text-align: center; font-size: var(--fs-caption); color: var(--muted); }
.scale-word { font-size: var(--fs-label); }

/* 타이머 — 폰을 세워 두고 멀리서 보는 화면이라 숫자·목표는 따로 크게 둔다(글자 크기 예외 목록에 있음).
   9/25 사용자 요청: 스크롤·확대가 되지 않게 한 화면에 모두 들어가고, 기기 크기에 맞춰 변한다.
   - 높이는 dvh(주소창을 뺀 실제 보이는 높이), 원 크기는 폭 80%·높이 38%·360px 중 가장 작은 값
   - 원 안 글자는 원 크기에 비례(cqw = 원 폭의 1%), 원 밖 글자는 화면 높이에 따라 최소~최대 사이(clamp)
   - 아래 탭용 여백(body 72px)을 빼고, 손가락 스크롤·확대를 막는다(touch-action: none, main.js 의 viewport·gesturestart) */
body.timer-mode { padding-bottom: 0; overflow: hidden; overscroll-behavior: none; }
.timer { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; justify-content: space-between; gap: clamp(6px, 1.2dvh, 12px); padding-bottom: calc(16px + env(safe-area-inset-bottom)); touch-action: none; user-select: none; -webkit-user-select: none; }
.timer-head { display: flex; justify-content: space-between; align-items: center; }
.recipe-name { font-weight: 700; font-size: var(--fs-section); }
.elapsed { font-variant-numeric: tabular-nums; font-size: 1.4rem; border: 2px solid var(--text); border-radius: 8px; padding: 2px 10px; }
.ring-wrap { position: relative; width: min(84vw, 44dvh, 400px); aspect-ratio: 1; margin: 0 auto; flex: none; container-type: inline-size; border-radius: 50%; } /* 9/25 원 크게(붓기 상자가 원 안으로 들어와 자리가 났다) */
.ring { width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 14; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 0.2s linear; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* 원 안(9/25 사용자 요청): 큰 숫자 + 옆에 작게 「초」 / 아래 「남음」 / 붓는 동안 빨간 알약 「7초 · 42g」 / 맨 아래 「100g까지」 */
.ring-num-row { display: flex; align-items: baseline; justify-content: center; gap: 1cqw; line-height: 1; }
.ring-num { font-size: 26cqw; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ring-unit { font-size: 6.5cqw; font-weight: 600; color: var(--muted); }
.ring-sub { color: var(--muted); font-size: 6cqw; margin-top: 1cqw; }
.ring-pour { display: flex; align-items: baseline; gap: 2cqw; margin-top: 2.5cqw; padding: 1cqw 5cqw; border-radius: 999px; font-size: 9cqw; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pour-text); background: var(--pour-bg); animation: pour-pulse 1.2s ease-in-out infinite alternate; }
.ring-pour-dot { opacity: 0.6; }
.ring-target { margin-top: 2.5cqw; font-size: 7cqw; font-weight: 700; }
.ring-target.done { color: var(--muted); font-weight: 500; }
/* 단계 이름은 원 밖 아래에 크게(9/25) */
.step-name { text-align: center; font-size: clamp(1.4rem, 3.6dvh, 2rem); font-weight: 700; }
.timer.over .ring-num, .timer.over .ring-sub { color: var(--warn); }
.timer.over .ring-fg { stroke: var(--warn); }
/* 붓는 구간 강조(원 안 빨간 알약) — 파스텔 빨강, 2.4초에 한 번 은은하게(W3C 2.3.1: 초당 3회 초과 깜박임·채도 높은 빨강 깜박임 회피) */
@keyframes pour-pulse { from { background: var(--pour-bg); } to { background: var(--pour-bg-strong); } }
/* 「동작 줄이기」를 켠 사람에게는 깜박임 없이 색만 */
@media (prefers-reduced-motion: reduce) { .ring-pour { animation: none; } }
.step-hint { color: var(--muted); font-size: clamp(1rem, 2.3dvh, 1.25rem); text-align: center; white-space: pre-line; min-height: 0; overflow: hidden; } /* 문장마다 줄바꿈(JS 가 \n 을 넣는다). 9/25 크게 */
.next { text-align: center; color: var(--muted); font-size: clamp(1.05rem, 2.4dvh, 1.3rem); } /* 9/25 크게 */


/* 뗄 때 실행하는 버튼: 누르는 동안 살짝 어둡게, 밖으로 밀면 「놓으면 취소」 */
.press { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.press.pressing { filter: brightness(0.85); }
.press.abort { background: var(--card); color: var(--warn); border-color: var(--warn); filter: none; }
button:disabled { opacity: 0.5; cursor: default; }

/* 누른 시각 판정 + 되돌리기 */
.press-info { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--pad-box); border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: var(--fs-label); }
.press-info.ok { background: var(--tone-ok-bg); border-color: var(--tone-ok-line); }
.press-info.early, .press-info.late { background: var(--tone-warn-bg); border-color: var(--tone-warn-line); }
.press-info .undo-btn { flex: none; padding: 6px 12px; white-space: nowrap; }
.verdict.ok { color: var(--ok); }
.verdict.early, .verdict.late { color: var(--warn); }

/* 켜고 끄는 스위치 */
.switch { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; transition: background 0.15s; }
.switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px var(--shadow); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 단계 설명 직접 쓰기 */
.hint-editor summary { cursor: pointer; color: var(--accent); }
.hint-editor .note-row { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }

/* AI 공유: 묶는 중 / 미리 보기 */
.buffering { display: flex; align-items: center; gap: var(--sp-2); justify-content: center; padding: 16px 0; }
.spinner { width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.preview { white-space: pre-wrap; font-size: var(--fs-caption); max-height: 50vh; overflow: auto; background: var(--bg); padding: var(--sp-2); border-radius: 8px; }

/* 고른 선택지의 설명(선택을 바꾸면 바뀐다) / 출처는 작게. 위 여백은 묶음(chips-wrap)의 간격이 맡는다 */
.choice-desc { color: var(--muted); font-size: var(--fs-help); }
.choice-desc:empty { display: none; }
.source { color: var(--muted); font-size: var(--fs-caption); }

/* 누름 영역 44px(사용자 결정 9/24 — 실기기에서 확인 후 조정). 근거: Apple HIG 44pt · Material 48dp · WCAG 2.5.8 최소 24px.
   문장 안의 링크(출처 등)는 WCAG 2.5.8 예외라 그대로 두고, 따로 떨어진 글자 링크만 키운다. */
button, .button, select, input[type="text"], input[type="number"], input[type="date"] { min-height: 44px; }
.chip { min-height: 44px; padding: 6px 14px; }
.stepper button { width: 44px; height: 44px; padding: 0; }
.press-info .undo-btn { min-height: 44px; }
input[type="range"] { min-height: 44px; accent-color: var(--accent); } /* 슬라이더 색도 앱 색으로(9/25 — 브라우저 기본 파랑이 튀던 것) */
/* 화면 이동·바깥 링크 버튼: 보조 버튼(.button)과 같은 모양 + 오른쪽 화살표(사용자 요청 9/24 — 밑줄 글자 링크 대신) */
.link-action { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; }
.link-action .link-arrow { color: var(--muted); font-size: 1.1em; line-height: 1; }
.switch { min-height: 44px; }
.banners { display: flex; flex-direction: column; gap: var(--sp-2); }
.banner.local-only { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.banner.local-only .term-sub { display: block; margin-left: 0; }

/* Google 로그인 버튼 — Google 브랜딩 가이드 밝은 테마(흰 바탕·테두리 #747775·글자 #1F1F1F·14/20), 누름 영역 44px */
.google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; background: var(--google-bg); color: var(--google-text); border: 1px solid var(--google-line); border-radius: 4px; font-size: 14px; line-height: 20px; font-weight: 500; }
.google-btn .g-logo { flex: none; }
.banner.pending { background: var(--card); border-color: var(--line); color: var(--muted); }
.switch .term-sub { display: block; margin-left: 0; }

/* 스위치(사용자 결정 9/24 — 백업 B안): 이름 + 아래 옅은 설명, 스위치는 오른쪽 끝 */
.switch { justify-content: space-between; }
.switch-text { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 0; }
.switch-sub { color: var(--muted); font-size: var(--fs-help); }
/* 스위치 이름(9/25): 칸 하나를 차지하는 스위치(설정 등)는 입력칸 이름과 같은 모양, 칸 안의 선택 스위치(원두 「자동으로 짓기」 등)는 같은 크기의 보통 굵기 */
.switch-label { font-size: var(--fs-label); font-weight: 700; }
.field .switch-label { font-weight: 400; }

/* 설정 「보조 설명」을 끄면 항목 이름 옆 옅은 설명을 숨긴다(배너 안의 건수 같은 것은 term 밖이라 그대로) */
body.hide-subs .term .term-sub { display: none; }

/* 화면 읽기 프로그램에만 읽히는 글 */
.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; }

/* 레시피 태그 */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag { font-size: var(--fs-caption); padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--bg); }

/* 그래프(사용자 결정 9/24 — 언스페셜티 레시피 상세 참고). 색은 흰 바탕 3:1 이상, 선 모양으로도 구분 */
figure.chart { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.c-svg { width: 100%; height: auto; display: block; }
.c-grid { stroke: var(--line); stroke-width: 1; }
.c-tick { fill: var(--muted); font-size: 10px; }
.c-plan { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.c-plan-solid { fill: none; stroke: var(--accent); stroke-width: 2; }
.c-actual { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.c-dot { fill: var(--accent); }
.c-partner { fill: none; stroke: var(--chart-second); stroke-width: 2; stroke-dasharray: 6 3; }
.c-dot-partner { fill: var(--card); stroke: var(--chart-second); stroke-width: 2; }
.c-bar-pour { fill: var(--accent); }
.c-bar-wait { fill: var(--card); stroke: var(--accent); stroke-width: 1; }
.c-ring { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.c-center { fill: var(--tone-ok-bg); stroke: var(--ok); stroke-width: 1.5; }
.c-to-center { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 3; }
.c-svg.compass { max-width: 200px; margin: 0 auto; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--muted); }
.lg::before { content: ''; display: inline-block; width: 18px; height: 0; margin-right: var(--sp-1); vertical-align: middle; border-top: 2.5px solid var(--accent); }
.lg-plan::before { border-top: 1.5px dashed var(--muted); }
.lg-partner::before { border-top: 2px dashed var(--chart-second); }
.lg-pour::before { height: 8px; border: 0; background: var(--accent); }
.lg-wait::before { height: 8px; border: 1px solid var(--accent); background: var(--card); }

/* 타이머 전체 진행 막대(사용자 결정 9/24) — 종료 목표를 넘기면 경고색 */
.total-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.total-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.2s linear; }
.total-bar.over .total-fill { background: var(--warn); }

/* 안내 한 줄: 글 + 오른쪽 버튼 */
.row-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }

/* 이름과 값을 한 덩어리로 줄바꿈 */
.nowrap { white-space: nowrap; }

/* 보여 주기만 하는 항목 값(이름 자동 조합·자동 계산한 가수 등) */
.field-value { font-size: var(--fs-section); font-weight: 700; }
.field-value .muted { font-weight: 400; } /* 값이 아직 없을 때의 안내는 값처럼 굵게 보이지 않게 */

/* 다음 추출 제안 */
ul.advice { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--sp-1); }
.inline-btn { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-help); margin-left: var(--sp-1); }
/* 눈에 띄지 않는 작은 버튼(원두 소모·복구, 날짜 비우기 — 9/25): 테두리만, 옅은 글자 */
.inline-btn.quiet { background: var(--card); color: var(--accent); border-color: var(--btn-line); } /* 9/27: 테두리가 1.24:1 로 안 보여(WCAG 1.4.11 미달) 흰색 채움 + 단추 테두리(3.44:1) */

/* 레시피 화면(9/24) */
ol.guide { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-label); }
.step-edit { border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--bg); }
.step-edit-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.import-result { display: flex; flex-direction: column; gap: var(--sp-3); }
.import-preview { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.notice { border-radius: 10px; padding: var(--pad-box); font-size: var(--fs-label); border: 1px solid var(--line); background: var(--card); }
.notice ul { margin: var(--sp-1) 0 0; padding-left: 18px; }
.notice.error { background: var(--tone-error-bg); border-color: var(--tone-error-line); }
.notice.warn { background: var(--tone-warn-bg); border-color: var(--tone-warn-line); }
.notice.info { background: var(--tone-info-bg); border-color: var(--tone-info-line); }
.recipe-row { align-items: center; } /* 9/26: 칸 안의 상자(list-row) — 전에는 밑줄로 나눔 */
.recipe-row.stacked { flex-direction: column; align-items: stretch; gap: var(--sp-3); } /* 9/28: 내가 넣은 레시피 = 이름·태그 아래에 [수정][지우기] 줄 */
.recipe-row + .recipe-row { margin-top: calc(var(--sp-3) * 0.25); } /* 9/28 사용자 요청: 레시피 상자 사이를 25% 넓게(칸 안 간격 12px → 15px) */


/* ── 9/25 사용자 요청 ─────────────────────────────────────── */
/* 로그인 안내 배너 아래 구글 로그인 버튼 */
.banner.login { display: flex; flex-direction: column; gap: var(--sp-2); }
.warn-text { color: var(--warn); }
/* 소모한 원두 · 남은 원두 알림 */
.list-row.inactive { opacity: 0.5; }
.notice-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.notice-row .term-sub, .notice.warn .term-sub { display: block; margin-left: 0; }
.notice-row button { flex: none; }
/* 구매 무게(숫자 + 단위) */
.row.amount > input { flex: 1 1 auto; min-width: 0; }
.row.amount > select, .row.amount > button { flex: 0 0 auto; width: auto; }
.sub-details > summary { color: var(--muted); font-size: var(--fs-label); cursor: pointer; }
.sub-details[open] { display: flex; flex-direction: column; gap: var(--sp-3); }
.list-row .right.badge { white-space: nowrap; align-self: center; }
/* 날짜 칸(9/25): 숫자 칸과 같은 [−] 값 [+] 모양, 가운데만 날짜가 들어가게 넓게 */
.date-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.stepper .date-input { flex: 0 1 11.5em; }
/* AI 공유 프롬프트(9/25): 코드 상자 + 오른쪽 위 복사 아이콘(AI 대화·마크다운 코드 블록의 복사 단추 방식) */
.code-box { position: relative; }
.code-box .prompt-text { font-size: var(--fs-help); line-height: 1.5; background: var(--bg); padding: var(--sp-3); padding-right: 52px; resize: vertical; }
.copy-icon { position: absolute; top: var(--sp-1); right: var(--sp-1); width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--card); }
.copy-icon .icon { width: 18px; height: 18px; }
.pre-line { white-space: pre-line; } /* 글 안의 줄바꿈(\n)을 그대로 보인다 */
dl.kv dd.changed { font-weight: 700; } /* AI 제안: 이번과 달라지는 값 */
/* 아래 탭 슬라이드 전환(9/25, ui/tabSlide.js): 탭 화면들을 옆으로 늘어놓은 그림을 탭 막대 아래에 덮고 밀어 옮긴다 */
.tab-slide { position: fixed; inset: 0; z-index: 4; overflow: hidden; background: var(--bg); pointer-events: none; }
.tab-slide-strip { display: flex; height: 100%; will-change: transform; }
.tab-slide-pane { position: relative; flex: none; width: 100vw; height: 100%; overflow: hidden; }
.tab-slide-inner { position: absolute; left: 0; right: 0; }
/* 타이머 아래 버튼(9/25): 크게, [다음 푸어]가 [취소]보다 넓게 */
.timer .row .big { min-height: clamp(60px, 9dvh, 88px); font-size: clamp(1.2rem, 2.9dvh, 1.55rem); }
.timer .row .press { flex: 2; }
/* 원 전체 누름(9/25): 누르면 살짝 눌리고, 누른 자리에서 물결이 퍼진다. 밖으로 밀면 빨간 테두리와 「놓으면 취소」 */
.press-ring { cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; overflow: hidden; transition: transform 120ms ease-out; }
.press-ring.pressing { transform: scale(0.97); }
.press-ring.abort .ring-bg { stroke: var(--warn); }
.press-ring.abort::after { content: '놓으면 취소'; position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; color: var(--warn); font-weight: 700; font-size: 6cqw; }
.press-ring:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.ring-ripple { position: absolute; width: 60cqw; height: 60cqw; margin: -30cqw 0 0 -30cqw; border-radius: 50%; background: var(--ripple); transform: scale(0); animation: ring-ripple 500ms ease-out forwards; pointer-events: none; }
@keyframes ring-ripple { to { transform: scale(2.4); opacity: 0; } }
/* 숫자 바뀜(9/25): 원 안 큰 숫자가 바뀔 때 살짝 올라오며 */
.ring-num.tick { animation: num-tick 220ms ease-out; }
@keyframes num-tick { from { transform: translateY(8%); opacity: 0.35; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ring-ripple, .ring-num.tick { animation: none; } .press-ring { transition: none; } }

/* ── 9/25 시각 요소(사용자 결정: 모두 적용) ─────────────────────────── */
/* 원두 탭 [원두 | 레시피] 전환 — 화면 제목 자리 */
.segment { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-1); padding: var(--sp-1); background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
/* 네 칸(9/26): 아이콘 위·이름 아래 — 좁은 폰(360px)에서도 「그라인더」가 한 줄에 들어가게 */
.seg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: var(--sp-1) 0; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: var(--fs-label); font-weight: 700; }
.seg .icon { width: 20px; height: 20px; }
.seg.on { background: var(--accent); color: var(--accent-text); }
/* 끌어 넘기기(ui/tabSwipe.js): 탭 첫 화면에서는 가로 끌기를 앱이 받고 세로 스크롤·확대는 브라우저에 맡긴다 */
html.tab-root, html.tab-root body { touch-action: pan-y pinch-zoom; }
.swipe-layer { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.swipe-pane { position: absolute; top: 0; left: 0; width: 100vw; height: 100%; overflow: hidden; background: var(--bg); }
/* 화면 전환(main.js transitionKind). 탭 막대는 따로 떼어 움직이지 않게 */
.nav { view-transition-name: tabbar; }
::view-transition-group(tabbar) { animation: none; }
/* 준비 → 타이머 → 결과 → 설문(shared axis Z): 앞으로 = 이전 화면이 커지며 사라지고 새 화면이 작은 데서 다가온다. 뒤로는 반대 */
:root[data-vt='z-forward']::view-transition-old(root) { animation: vt-z-out-fwd 300ms cubic-bezier(0.4, 0, 0.2, 1) both; }
:root[data-vt='z-forward']::view-transition-new(root) { animation: vt-z-in-fwd 300ms cubic-bezier(0.4, 0, 0.2, 1) both; }
:root[data-vt='z-back']::view-transition-old(root) { animation: vt-z-out-back 300ms cubic-bezier(0.4, 0, 0.2, 1) both; }
:root[data-vt='z-back']::view-transition-new(root) { animation: vt-z-in-back 300ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes vt-z-out-fwd { 0% { opacity: 1; transform: scale(1); } 35% { opacity: 0; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes vt-z-in-fwd { 0%, 35% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
@keyframes vt-z-out-back { 0% { opacity: 1; transform: scale(1); } 35% { opacity: 0; } 100% { opacity: 0; transform: scale(0.8); } }
@keyframes vt-z-in-back { 0%, 35% { opacity: 0; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
/* 목록의 한 줄 ↔ 상세(container transform): 이름이 같은 두 요소를 브라우저가 크기·자리를 이어 준다 */
::view-transition-group(brew-card) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
::view-transition-image-pair(brew-card) { overflow: hidden; border-radius: 10px; }
:root[data-vt='expand']::view-transition-old(root), :root[data-vt='expand']::view-transition-new(root),
:root[data-vt='collapse']::view-transition-old(root), :root[data-vt='collapse']::view-transition-new(root) { animation-duration: 220ms; }
/* 누름 반응: 누르는 동안 살짝 눌린다 */
button, .button, .chip, .list-row, .seg { transition: transform 90ms ease-out; }
button:active:not(:disabled), .button:active, .chip:active, .list-row:active, .seg:active { transform: scale(0.97); }
.nav a .icon { transition: transform 90ms ease-out; }
.nav a:active .icon { transform: scale(0.88); }
@media (prefers-reduced-motion: reduce) {
  button, .button, .chip, .list-row, .seg, .nav a .icon { transition: none; }
  button:active:not(:disabled), .button:active, .chip:active, .list-row:active, .seg:active, .nav a:active .icon { transform: none; }
}
/* 방치 확인 창의 버튼(9/25 — 셋까지 세로로) */
.still-actions { display: flex; flex-direction: column; gap: var(--sp-2); }



/* 분쇄 측정 그래프(9/26, ui/charts.js measureFigure) — 흰 바탕 3:1 이상, 모양으로도 구분(막대·점선·실선·띠) */
.c-bar-vol { fill: var(--accent); opacity: 0.85; }
.c-count { fill: none; stroke: var(--chart-second); stroke-width: 1.5; stroke-dasharray: 4 3; }
.c-dot-count { fill: var(--card); stroke: var(--chart-second); stroke-width: 1.5; }
.c-cum { fill: none; stroke: var(--chart-third); stroke-width: 2; }
.c-mean { stroke: var(--chart-mean); stroke-width: 2; }
.c-band { fill: var(--chart-mean); opacity: 0.1; }
.c-d50 { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 2 3; }
.lg-vol::before { height: 8px; border: 0; background: var(--accent); }
.lg-count::before { border-top: 2px dashed var(--chart-second); }
.lg-cum::before { border-top: 2px solid var(--chart-third); }
.lg-mean::before { border-top: 2px solid var(--chart-mean); }
.lg-d50::before { border-top: 2px dotted var(--muted); }
/* 분쇄 측정 확인 창(9/26): 그래프가 들어가 길어서 창 안에서 스크롤 */
.modal.sheet { max-height: 88dvh; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.modal.sheet h3 { margin: 0; }
.still-actions button .term-sub { display: block; margin-left: 0; }
/* 분쇄 측정 사진(9/26): 확인 창·기록에서 사진을 폭에 맞춰, 확인이 필요한 칸은 주황 테두리 */
.measure-photo { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.check-me { border: 2px solid var(--warn); border-radius: 10px; padding: var(--sp-1) var(--sp-2); }
.modal.sheet progress { width: 100%; }
/* 기록 목록 고르기 모드(9/26): 길게 누를 때 iOS 링크 미리보기·글자 선택이 뜨지 않게, 고른 줄은 테두리, 아래 [취소][공유] 막대는 탭 막대 위 */
.list-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.pick-row { align-items: center; cursor: pointer; }
.pick-row input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.pick-row .grow { flex: 1; }
.pick-row.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.select-bar { position: sticky; bottom: calc(53px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.3fr; gap: var(--sp-3); padding: var(--sp-2) 0; background: var(--bg); } /* 9/27 사용자 결정: 취소 · 지우기 · 비활성화 · 공유, 간격 8→12px 고르게 */
.select-bar button { padding-left: 6px; padding-right: 6px; } /* 좁은 폭에서 「다시 활성화」가 한 줄에 들도록 */
body.hide-subs .sub-hint { display: none; }
/* 숫자 슬라이더(9/26): 양 끝이 min·max — 눈금 글은 그 값의 손잡이 가운데에 */
input.scale.flat { margin: 0; }
.ticks.abs { display: block; position: relative; height: 1.4em; }
.ticks.abs span { position: absolute; left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--at, 0)); transform: translateX(-50%); white-space: nowrap; }
/* 지울 수 있는 칩(9/26 — 로스터리 표기 노트): 오른쪽 위 동그란 ×. 보이는 원은 20px, 누르는 자리는 32px(WCAG 2.5.8 최소 24px 이상) */
.chip-wrap { position: relative; display: inline-flex; }
.chip-wrap .chip { padding-right: 18px; }
.chip-x { position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.chip-x span { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--accent-text); border: 2px solid var(--card); font-size: var(--fs-caption); line-height: 1; }
.chip-x:active:not(:disabled) { transform: scale(0.9); }
.chip-x.inline { position: static; width: 32px; height: 32px; margin: -6px 0; }
.decaf-help { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--sp-1); }
/* 겹쳐 바꾸기·네 칸 전환 층(9/26): 옛 화면 그림만 — 바탕은 투명(새 화면이 아래에서 비친다), 탭 막대 아래 */
.tab-fade { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
/* 기록 줄(9/26): 제목과 날짜 사이를 띄우고, 오른쪽 시간·노트 상태는 두 줄 가운데의 작은 상자 — 줄바꿈 없이 */
.brew-row { align-items: center; }
.brew-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.row-meta { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: 8px; background: var(--bg); white-space: nowrap; }
/* 계정 배너(9/26): 굵은 제목 / 이메일 두 줄 */
.account-line { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
/* 여러 줄 입력칸(9/26 사용자 요청): 내용만큼 늘어나고 칸 안에서 스크롤하지 않는다(높이는 ui/dom.js autoGrow) */
textarea { overflow-y: hidden; resize: none; }
/* 원두 고르기 팝업(9/26 — 분쇄 측정): 목록은 팝업 안에서 스크롤 */
.pick-list { max-height: 50dvh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding: 2px; }
.pick-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--card); border-color: var(--line); color: var(--text); }
.pick-item .badge { margin-left: var(--sp-2); }
.pick-item.inactive { opacity: 0.6; }
.measure-item summary { font-size: var(--fs-label); }
/* 로스터리 설명 가져오기(9/26): 접히는 칸 — 펼치면 안내·프롬프트·붙여 넣기. 지금 값과 다른 칸은 주황 테두리(처음엔 체크 안 함) */
details.ai-bean > summary { font-weight: 700; cursor: pointer; }
.pick-row.conflict { border-color: var(--warn); }
/* 네 칸 전환(A안)에서 옆으로 밀려 들어오는 내용이 화면 폭을 넘지 않게(9/26 사용자 보고 — 폰 브라우저가 넓어진 폭에 맞춰 화면을 잡으면
   아래 탭 막대(화면 바닥 고정)가 아래로 밀려 잘려 보였다). clip 은 스크롤 칸을 만들지 않아 위아래 스크롤·sticky 는 그대로다. 탭 막대는 고정 위치라 잘리지 않는다 */
#app { overflow-x: clip; }
/* 블렌드(9/26): 구성 한 줄 = 칸 안의 상자(그라인더 줄과 같은 모양) · 준비 화면의 원두별 무게 줄 */
.blend-row { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--pad-box); background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.blend-parts { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
/* 드리퍼 지우기 경고(9/26): 함께 지울 기록 목록 — 팝업 안에서 스크롤 */
.delete-list { max-height: 30dvh; padding-left: var(--sp-4); margin: 0; }
/* 필터·붓는 방법 설명(9/26): 고른 것에 따라 바뀌는 설명 묶음 */
.guide-box { gap: var(--sp-1); }
.guide-box:empty { display: none; }
/* 원두 봉투(9/26 B안): 원두 화면의 봉투마다 상자 · 모두 소비된 봉투는 흐리게 */
/* 칸 안의 상자(원두 봉투 · 9/27 단계별 보정 시트의 단계마다 — item-box 로 같은 모양을 쓴다) */
.bag-box, .item-box { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--pad-box); background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.bag-box.consumed > :not(.chips):not(.row-line) { opacity: 0.6; }
/* 가운데 큰 값(9/27 사용자 요청 — 결과 화면 비율 칸의 비율·무게): 두 칸 나란히, 값은 가장 큰 글자 단계(--fs-title)로 굵게, 아래에 옅은 이름.
   상자는 item-box 와 같은 테두리·모서리. 원 타이머의 «큰 숫자 + 옅은 이름»과 같은 짜임 */
.main-values { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--pad-box); background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.main-value { font-size: var(--fs-title); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.main-label { color: var(--muted); font-size: var(--fs-help); margin-top: var(--sp-1); }
/* 소비된 원두 칸(9/26 사용자 요청): 칸·원두마다 상자는 그대로, 글자만 한 단계 옅게(검정 → 회색) — 누를 수는 있다 */
.consumed-list h2, .consumed-list .list-row { color: var(--muted); } /* 소비된 원두 = 9/26 사용자 결정(회색 글자) 그대로 */
.consumed-list .list-row .hint { opacity: 0.75; }
/* 비활성 칸의 입력 줄(그라인더·서버) · 비활성 템플릿 접힘 · 분쇄 측정(9/27) */
/* 분쇄 측정 줄(9/27 사용자 요청 — 다른 목록 줄과 같은 상자, 비활성은 비활성 칸과 같은 연한 회색 채움 + 진한 회색 글자) */
.measure-item { padding: var(--pad-box); border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.measure-item > summary { color: var(--text); }
.measure-item.off { background: var(--inactive-bg); }
.measure-item.off > summary, .measure-item.off .hint { color: var(--inactive-text); }
/* 추출 당시 시간대 보조 줄(9/27) — 지금 기기 시간대와 다를 때만 */
.when-sub { font-size: var(--fs-caption); }
/* 단추 성격별 모양(9/27 사용자 요청 — 기록 고르기 모드부터). 대비는 WCAG AA 4.5:1 이상:
   btn-plain 흰색 채움(취소·닫기) 13.65 · btn-muted 연한 회색 채움 + 진한 회색 글자(비활성화 — 비활성 기록 줄과 같은 조합) 6.36 ·
   btn-danger 빨간 선·글자(지우기) 6.12(배경을 비운다 — 빨강을 베이지 위에 두면 5.22). */
.btn-plain { background: var(--card); }
.btn-muted { background: var(--inactive-bg); border-color: var(--inactive-line); color: var(--inactive-text); }
.btn-danger { background: transparent; border-color: var(--warn); color: var(--warn); }
/* 비활성 칸(9/27 사용자 결정 — 기록 탭에서 정한 방식을 드리퍼·그라인더·서버·블렌드 템플릿에도): 제목은 본문 글자색,
   줄은 연한 회색 채움 + 진한 회색 글자(옅은 설명 글자도 같은 색 — 옅은 회색은 채움 위 4.02 로 미달) */
.inactive-list h2 { color: var(--text); }
.inactive-list .list-row, .sub-details.off .list-row { background: var(--inactive-bg); color: var(--inactive-text); }
.inactive-list .list-row .hint, .sub-details.off .list-row .hint { color: var(--inactive-text); }
/* 나란히 놓인 단추(9/27 사용자 요청): 글자 길이와 관계없이 폭을 똑같이 나누고(길면 단추 안에서 줄을 바꿈),
   한 단추가 두 줄이 되면 옆 단추도 같은 높이로 늘어난다. 단추 글자는 정해진 말이라 한없이 길어지지 않는다.
   (전: 브라우저가 글자보다 좁게 줄이지 않아 긴 글자 단추만 넓어지거나 다음 줄로 밀렸다) */
.row > button, .row > .button { min-width: 0; }
.row > .button { display: flex; align-items: center; justify-content: center; }
.row:has(> button, > .button):not(.between):not(.amount) { align-items: stretch; flex-wrap: nowrap; }
/* 구분선(9/27 — 기록 화면: 자주 쓰는 단추와 지우기·비활성화 사이). 화면 간격 12px + 위아래 8px = 선 앞뒤 약 20px */
.divider { width: 100%; margin: var(--sp-2) 0; border: 0; border-top: 1px solid var(--line); }
/* 지도의 AI 점(9/27 — ○ 흰 속 + 파랑 테두리: 그래프의 «두 번째 계열» 색. 앱 점 ● 은 그대로) */
.c-dot-ai { fill: var(--card); stroke: var(--chart-second); stroke-width: 2.5; }