/* ============================================================
   여운(Brew Journal) — Design System
   브랜드 톤: 딥 에버그린 & 골드 (회고·성장·프리미엄·전문)
   Crimson Pro(헤드라인) + Pretendard(본문)
   ※ 색·radius·그림자·글자 크기·간격의 유일한 소스는 design-tokens.css.
     px 값을 새로 쓰지 말고 토큰(--primary, --fs-body, --sp-4 …)을 쓴다.
   ============================================================ */
@import url("design-tokens.css");

:root {
  /* design-tokens.css에 없는, 이 파일 전용 값만 둔다. (구 espresso·cream·ink 별칭은 2026-09-28 전부 토큰으로 치환) */
  --on-dark: #F3EFE6;    /* 어두운 표면 위 텍스트 (딥그린 전용) */
  --kakao: #FEE500;
  --naver: #03C75A;
  /* 그린/골드 틴트 칩의 테두리 (chip-green / accent-soft 짝) */
  --chip-green-line: var(--eg-100);
  --chip-gold-line: #E9D9B0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: "Pretendard", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;

  /* 한글 줄바꿈 — 기본값(word-break: normal)은 한글을 '글자' 단위로 끊는다.
     그래서 "내추럴"이 "내 / 추럴"로, "있어요)"가 "있어 / 요)"로 쪼개졌다.
     keep-all은 어절(띄어쓰기) 단위로만 끊어 한국어에서 자연스럽다.
     다만 keep-all은 긴 URL·영단어를 끊지 못해 넘칠 수 있으므로
     overflow-wrap: anywhere를 함께 둬서 그 경우에만 강제 분리한다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 제목은 한 단어만 다음 줄로 떨어지는 '고아 줄'이 특히 눈에 띈다.
   balance는 줄 길이를 고르게 맞춰준다(미지원 브라우저는 무시하므로 안전). */
h1, h2, h3, .view-title, .item-title, .s-label, .login-tagline {
  text-wrap: balance;
}

.brand-serif { font-family: "Crimson Pro", "Noto Serif KR", serif; letter-spacing: 0.01em; }
.hidden { display: none !important; }
.u { text-decoration: underline; }

/* ---------- 모션 키프레임 (이징·시간은 design-tokens.css) ---------- */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes toastOut { to { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes viewIn { from { opacity: 0; } }
/* 스플래시·온보딩은 첫 진입에서만 보는 화면이라 이동을 곁들여도 좋다(delight) */
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(10px); } }
@keyframes modalOut { to { opacity: 0; transform: scale(.96) translateY(10px); } }
@keyframes fadeOut { to { opacity: 0; } }

/* Lucide 아이콘: 컨텍스트 글자 크기에 맞춰 스케일 + 현재 색 상속 */
svg.lucide { width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; }
.empty-icon { color: var(--primary-text); }

/* ---------- 스플래시 ---------- */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  background: linear-gradient(160deg, var(--eg-900) 0%, var(--eg-700) 60%, var(--eg-500) 100%);
  color: var(--on-dark);
  animation: fadeIn 0.4s ease;
}
/* 시그니처 "여운 링" — 커피잔이 남긴 자국이 그려지는 오프닝 시퀀스 */
.splash-mark { color: var(--accent); }
.splash-mark .ring-mark { width: 64px; height: 64px; display: block; }
.splash-mark circle { animation: ring-draw 0.9s var(--ease-out) both; }
.splash-mark circle:nth-child(2) { animation-delay: 0.25s; }
@keyframes ring-draw { from { stroke-dasharray: 0 100; opacity: 0; } }
.splash h1, .splash p { animation: riseIn 0.5s var(--ease-out) both 0.5s; }
.splash p { animation-delay: 0.62s; }
.splash h1 { font-size: var(--fs-display); font-weight: 600; }
.splash p { color: var(--gold-400); font-size: var(--fs-md); }

/* ---------- 로그인 ---------- */
.login-screen {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-7); padding: var(--sp-6);
  background: var(--eg-800);
  overflow-y: auto;
}
/* 배경의 여운 링 — 잔이 스치고 간 흔적 (은은하게 1쌍만) */
.login-screen::before, .login-screen::after {
  content: ""; position: fixed; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(212, 184, 121, 0.12);
}
.login-screen::before { width: 460px; height: 460px; top: -150px; right: -160px; }
.login-screen::after { width: 290px; height: 290px; top: -80px; right: -30px; border-width: 1px; }
.login-hero { width: 100%; max-width: 420px; text-align: left; color: var(--on-dark); }
.login-mark { color: var(--accent); margin-bottom: var(--sp-3); }
.login-mark .ring-mark { width: 44px; height: 44px; display: block; }
.login-hero h1 { font-size: var(--fs-display); font-weight: 600; }
.login-tagline { margin-top: var(--sp-2); color: var(--gold-300); font-size: var(--fs-md); }

.login-card {
  width: 100%; max-width: 420px;
  background: var(--surface-2);
  border-radius: var(--r-card);
  padding: var(--sp-7) var(--sp-7);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.login-card h2 { font-size: var(--fs-3xl); }
.login-sub { color: var(--text-soft); font-size: var(--fs-body); margin-bottom: var(--sp-2); }

.btn-social {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; padding: var(--sp-4);
  border: none; border-radius: var(--r-btn);
  font-size: var(--fs-md); font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
@media (hover: hover) and (pointer: fine) { .btn-social:hover { filter: brightness(1.04); } }
.btn-social:active { transform: scale(.98); }
.btn-kakao { background: var(--kakao); color: #191919; }
.btn-naver { background: var(--naver); color: #fff; }
.btn-google { background: var(--surface); color: #3c4043; border: 1px solid #dadce0; }
/* 애플 HIG가 허용하는 3가지 스타일(검정·흰색·흰색+테두리) 중 검정.
   라이트·다크 양쪽에서 같은 모습이라 테마별 분기가 필요 없다. */
.btn-apple { background: #000; color: #fff; }

.btn-guest {
  width: 100%; padding: var(--sp-3); margin-top: var(--sp-1);
  background: transparent; border: none;
  color: var(--text-soft); font-size: var(--fs-body); font-weight: 500; font-family: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.btn-guest:hover { color: var(--text); }

/* 인앱 브라우저 안내 — 로그인이 구조적으로 불가능한 환경이라 카드 안에서 먼저 눈에 띄어야 한다 */
.inapp-warning {
  padding: var(--sp-4) var(--sp-4);
  border: 1px solid var(--warn);
  border-radius: var(--r-btn);
  background: var(--warn-soft);
  text-align: left;
}
.inapp-warning-title { color: var(--warn-text); font-size: var(--fs-body); font-weight: 600; }
.inapp-warning-body { margin-top: var(--sp-1); color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.5; }
.inapp-warning-hint { margin-top: var(--sp-2); color: var(--text-soft); font-size: var(--fs-xs); line-height: 1.5; }
.btn-open-external {
  display: block; margin-top: var(--sp-3); padding: var(--sp-4);
  border-radius: var(--r-btn);
  background: var(--warn); color: #fff;
  font-size: var(--fs-body); font-weight: 600; text-align: center; text-decoration: none;
}

.login-error { color: var(--warn-text); font-size: var(--fs-sm); text-align: center; }
.login-note { margin-top: var(--sp-2); color: var(--text-soft); font-size: var(--fs-xs); text-align: center; line-height: 1.6; }
.login-note a { color: inherit; text-underline-offset: 2px; }

/* ---------- 온보딩 ---------- */
.onboarding {
  position: fixed; inset: 0; z-index: 85;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-6);
  background: var(--eg-800);
}
.onboarding-card {
  width: 100%; max-width: 460px; background: var(--surface-2);
  border-radius: var(--r-card); padding: var(--sp-8) var(--sp-7); box-shadow: var(--shadow);
}
.onboarding-card h2 { font-size: var(--fs-5xl); margin-bottom: var(--sp-2); }
.onboarding-card > p { color: var(--text-soft); margin-bottom: var(--sp-5); }
.level-options { display: flex; flex-direction: column; gap: var(--sp-3); }
.level-option {
  text-align: left; padding: var(--sp-4) var(--sp-4);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-btn);
  color: var(--text); font-size: var(--fs-md); font-family: inherit; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.level-option:hover { border-color: var(--accent); background: var(--chip-green); }
.onboarding-note { margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.6; }

/* ---------- 앱 셸 ---------- */
.app { min-height: 100%; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  background: var(--eg-900); color: var(--on-dark);
}
.topbar-brand { font-size: var(--fs-3xl); font-weight: 600; }
.topbar-user { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--eg-500); }
.btn-ghost {
  background: transparent; border: 1px solid rgba(247, 241, 230, 0.35);
  color: var(--on-dark); border-radius: var(--r-chip); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); font-family: inherit; cursor: pointer;
}
.btn-ghost:hover { background: rgba(247, 241, 230, 0.12); }
.btn-ghost-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: var(--fs-xl);
}

/* 하단 고정 탭바 (모바일 네이티브 패턴) */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 0;
  /* 간격 토큰 예외: 탭바 높이(60px)는 토스트 위치(.toast bottom)·본문 하단 여백이 기대는 기준값이라 px로 고정 */
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(20, 26, 22, 0.05);
}
.tab {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) 2px; border: none; background: transparent;
  color: var(--text-soft); font-size: var(--fs-caption); font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.tab svg.lucide { width: 21px; height: 21px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary-text); }
.tab.active svg.lucide { stroke-width: 2.4; }

.view {
  flex: 1; width: 100%; max-width: 860px; margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) calc(86px + env(safe-area-inset-bottom, 0px));
}
/* 탭 전환 시 뷰 enter (router.js가 리플로우로 재시작) */
/* 탭 전환은 하루 수십 번 — 이동을 빼고 짧은 페이드만 남긴다 */
.view.view-enter { animation: viewIn 120ms var(--ease-out); }

/* ---------- 공통 컴포넌트 ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.section-head h2 { font-size: var(--fs-4xl); font-family: "Crimson Pro", serif; }

.btn-primary {
  background: var(--primary); color: var(--on-primary);
  border: none; border-radius: var(--r-btn); padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-body); font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background 0.12s;
}
.btn-primary:hover { background: var(--primary-press); }
.btn-secondary {
  background: transparent; color: var(--brand);
  border: 1.5px solid var(--line); border-radius: var(--r-btn); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body); font-weight: 600; font-family: inherit; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--accent); }
.btn-danger { color: var(--warn-text); border-color: #e8c9b8; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-5); box-shadow: var(--shadow-soft);
}
.card + .card { margin-top: var(--sp-3); }

.empty {
  text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--text-soft);
  background: var(--surface-2); border-radius: var(--r-card); border: 1.5px dashed var(--line);
}
.empty .empty-icon { font-size: var(--fs-display); margin-bottom: var(--sp-3); }

/* 홈 대시보드 */
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
@media (max-width: 560px) { .home-grid { grid-template-columns: 1fr; } }
.home-quick-actions {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--sp-3);
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-6);
}
.home-quick-actions button { min-height: 46px; }
@media (max-width: 420px) { .home-quick-actions { grid-template-columns: 1fr; } }
.stat-card {
  background: var(--hero-bg);
  color: var(--hero-text); border-radius: var(--r-card); padding: var(--sp-5);
}
.stat-card .stat-label { font-size: var(--fs-sm); color: var(--hero-acc); margin-bottom: var(--sp-2); }
.stat-card .stat-value { font-size: var(--fs-5xl); font-weight: 700; font-family: "Crimson Pro", serif; }
.stat-card .stat-sub { font-size: var(--fs-xs); opacity: 0.75; margin-top: var(--sp-1); }

/* NEXT BREW 제안 — 핵심 하이라이트라서 골드 틴트 (강조색 10% 역할) */
.suggest-card {
  background: var(--accent-soft); border: 1px solid var(--chip-gold-line);
  border-radius: var(--r-card); padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-6);
}
.suggest-card .suggest-tag { font-size: var(--fs-xs); font-weight: 700; color: var(--primary-text); letter-spacing: 0.06em; }
.suggest-card p { margin-top: var(--sp-2); font-size: var(--fs-md); line-height: 1.6; }
.suggest-fixes { margin: var(--sp-2) 0 0; padding-left: var(--sp-1); list-style: none; }
.suggest-fixes li { font-size: var(--fs-body); line-height: 1.6; padding-left: var(--sp-4); position: relative; }
.suggest-fixes li::before { content: "↳"; position: absolute; left: 0; color: var(--primary-text); font-weight: 700; }
.suggest-brew { margin-top: var(--sp-3); }
.suggest-card.success { background: #eaf4ec; border-color: #bfe0c7; }
.suggest-card.success .suggest-tag { color: var(--success-text); }
.suggest-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.suggest-actions button { flex: 1; min-width: 140px; }

/* 원두 다이얼-인 뷰 */
.bean-open { cursor: pointer; }
.dial-chip { font-size: var(--fs-caption); font-weight: 700; color: var(--primary-text); background: var(--chip-green); padding: 2px var(--sp-2); border-radius: var(--r-pill); vertical-align: middle; }
.dial-chain { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.dial-row { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-3); border-radius: var(--r-btn); background: var(--surface-2); border: 1px solid transparent; }
.dial-row.dial-best { background: var(--surface); border-color: var(--primary-text); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.dial-n { font-size: var(--fs-sm); font-weight: 700; color: var(--text-soft); white-space: nowrap; min-width: 30px; padding-top: 2px; }
.dial-row.dial-best .dial-n { font-size: var(--fs-xl); }
.dial-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.dial-vars { font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.dial-vars .stars { font-weight: 400; margin-left: var(--sp-1); }
.dial-taste { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.dial-flat { font-size: var(--fs-xs); color: var(--success-text); }
.dial-best-box { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-btn); background: var(--accent-soft); border: 1px solid var(--chip-gold-line); }
.dial-best-label { font-size: var(--fs-body); font-weight: 600; margin-bottom: var(--sp-3); }
.dial-best-actions { display: flex; gap: var(--sp-2); }
.dial-best-actions #dial-best-brew { flex: 1; }
.dial-next { margin-top: var(--sp-4); }
.share-card-btn { width: 100%; margin-top: var(--sp-4); }

/* 공유 카드 — 장수 선택 */
.card-share { margin-top: var(--sp-4); }
.card-share .share-card-btn { margin-top: var(--sp-2); }
.card-share-seg { display: flex; gap: var(--sp-2); }
.seg-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-btn); border: 1.5px solid var(--line);
  background: var(--surface); font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-soft); cursor: pointer;
}
.seg-btn:hover { border-color: var(--accent); }
.seg-btn.on { background: var(--chip-green); border-color: var(--primary-text); color: var(--primary-text); }
.seg-sub { font-size: var(--fs-caption); font-weight: 400; opacity: .75; }

/* 의견 보내기 — 분류 칩 */
.fb-cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fb-cat { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); cursor: pointer; color: var(--text-soft); }
.fb-cat.on { background: var(--chip-green); border-color: var(--primary-text); color: var(--primary-text); font-weight: 600; }

/* 월별 인사이트 */
.insight-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-6);
}
.insight-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.insight-head .btn-secondary { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); flex-shrink: 0; }
.insight-title {
  font-family: "Crimson Pro", serif; font-weight: 700; font-size: var(--fs-xl);
}
.insight-row {
  font-size: var(--fs-body); line-height: 1.6; color: var(--text);
  padding-left: var(--sp-4); position: relative;
}
.insight-row::before { content: "·"; position: absolute; left: 2px; color: var(--primary-text); font-weight: 700; }

/* 뱃지 */
.badge-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-6);
}
.badge-card .insight-title { margin-bottom: var(--sp-3); }
.badge-count { font-size: var(--fs-sm); color: var(--text-soft); font-family: Pretendard, sans-serif; font-weight: 500; }
.badge-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--sp-2); }
/* 격자 칸 폭이 같아야 한다 — flex-wrap이면 설명 길이만큼 칸이 늘어나 줄마다 들쭉날쭉했다 */
.badge {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 0; padding: var(--sp-3) var(--sp-2); word-break: keep-all;
  background: var(--accent-soft); border: 1px solid var(--chip-gold-line); border-radius: var(--r-btn);
  text-align: center;
}
.badge.locked { background: var(--surface-2); border-color: var(--line); opacity: 0.55; filter: grayscale(0.8); }
.badge-icon { font-size: var(--fs-3xl); }
.badge-name { font-size: var(--fs-caption); font-weight: 600; }
.badge-hint { font-size: var(--fs-micro); color: var(--text-soft); }

/* 용어 사전 */
.term-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; margin-left: 2px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface-2); color: var(--text-soft);
  font-size: var(--fs-micro); font-weight: 700; font-family: inherit;
  cursor: pointer; vertical-align: 1px;
}
.term-btn:hover { background: var(--chip-green); color: var(--primary-text); border-color: var(--chip-green-line); }
#term-pop {
  position: fixed; z-index: 115; max-width: 280px;
  background: var(--eg-800); color: var(--on-dark);
  border-radius: var(--r-btn); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow); font-size: var(--fs-sm); line-height: 1.6;
  animation: fadeIn var(--dur-hover) var(--ease-out);
}
#term-pop strong { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); }
#term-pop p { margin: 0; opacity: 0.92; }

/* 유튜브 레시피 임포트 */
.import-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6);
}
.import-label { font-weight: 700; font-size: var(--fs-body); margin-bottom: var(--sp-3); }
.import-row { display: flex; gap: var(--sp-2); }
.import-row input {
  flex: 1; min-width: 0; padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--line); border-radius: var(--r-btn);
  font-size: var(--fs-body); font-family: inherit; background: var(--surface);
}
.import-row input:focus { outline: none; border-color: var(--primary-text); box-shadow: 0 0 0 3px var(--chip-green); }
.import-row .btn-primary { flex-shrink: 0; }
.sub-head {
  font-family: "Crimson Pro", serif; font-size: var(--fs-2xl); font-weight: 700;
  margin: var(--sp-6) 0 var(--sp-3);
}
/* 유튜브 임포트 레시피: 카드 상단 풀폭 썸네일 배너 (카드 가장자리까지 확장) */
.recipe-thumb-top {
  display: block; width: calc(100% + 40px); height: 180px; object-fit: cover;
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4); border-radius: var(--r-card) var(--r-card) 0 0;
}
/* 내 레시피 카드: 위(썸네일+내용) / 아래(액션) 2단 — 모바일에서 자연스럽게 */
.recipe-actions {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.recipe-actions .my-use { flex: 1; }
.recipe-actions .act-edit, .recipe-actions .act-del { flex-shrink: 0; }
.source-link { color: var(--primary-text); text-decoration: none; }
.source-link:hover { text-decoration: underline; }
.import-head { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); }
.import-head img { width: 120px; height: 68px; object-fit: cover; border-radius: var(--r-chip); flex-shrink: 0; }
.import-title { font-weight: 700; font-size: var(--fs-body); line-height: 1.4; }
.import-status {
  font-size: var(--fs-sm); color: var(--text-soft); background: var(--surface-2);
  border-radius: var(--r-chip); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4);
}
.import-status.good { background: #e7efe9; color: var(--success-text); }

/* 🤖 영상 분석 (Gemini 2단계) */
.ai-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-btn); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.ai-analyze { flex-shrink: 0; }
.ai-analyze:disabled { opacity: 0.6; cursor: progress; }
/* 분석 중 스피너 (버튼 안 인라인 표시) */
.ai-spinner {
  display: inline-block; width: 13px; height: 13px;
  margin-right: var(--sp-2); vertical-align: -2px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-quota { font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.4; }
.ai-box .login-error { flex-basis: 100%; margin: 0; }

/* 가이드 레시피 */
.view-sub { color: var(--text-soft); font-size: var(--fs-sm); margin-bottom: var(--sp-4); line-height: 1.6; }
.recipe-point {
  margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-soft);
  background: var(--surface-2); border-radius: var(--r-chip); padding: var(--sp-2) var(--sp-3);
}
.recipe-open { cursor: pointer; }
.item-main.recipe-open:hover .item-title { color: var(--primary-text); }

/* 레시피 자세히 보기 */
.detail-thumb { width: 100%; border-radius: var(--r-btn); margin-bottom: var(--sp-3); object-fit: cover; }
.detail-source { margin-bottom: var(--sp-3); }
.recipe-detail {
  display: grid; grid-template-columns: auto 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden;
}
.detail-row { display: contents; }
.detail-k, .detail-v {
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); border-top: 1px solid var(--line);
}
.detail-row:first-child .detail-k, .detail-row:first-child .detail-v { border-top: none; }
.detail-k { color: var(--text-soft); background: var(--surface-2); white-space: nowrap; }
.detail-v { font-weight: 600; }

/* 추출 단계 — 편집기 */
.steps-editor { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }
.step-row {
  border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: var(--sp-2) var(--sp-3); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--sp-2);
}
/* 번호와 버튼만 첫 줄에. 이름·물·시간·메모 칸은 그 아래에서 카드 폭을 꽉 채운다 —
   한 줄에 섞으면 버튼이 이름 칸을 밀어내 줄마다 시작·끝이 어긋난다 */
.step-head { display: flex; align-items: center; gap: var(--sp-1); }
.step-head .step-up { margin-left: auto; }
.step-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-sub { display: flex; gap: var(--sp-2); }
.step-sub .step-water { width: 96px; flex-shrink: 0; }
.step-sub .step-time { flex: 1; min-width: 0; }
.step-row input {
  padding: var(--sp-2) var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-chip);
  font-size: var(--fs-sm); background: var(--bg); font-family: inherit;
}
.step-del { flex-shrink: 0; font-size: var(--fs-sm); }
.step-up, .step-down { flex-shrink: 0; font-size: var(--fs-caption); color: var(--text-soft); }
.step-up:hover, .step-down:hover { color: var(--primary-text); }
@keyframes step-moved-flash {
  0% { background: var(--chip-green); }
  100% { background: var(--surface-2); }
}
.step-moved { animation: step-moved-flash 0.5s ease-out; }
.steps-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.btn-text {
  background: transparent; border: 1px solid transparent; color: var(--primary-text);
  border-radius: var(--r-chip); font-family: inherit; cursor: pointer; font-weight: 600;
}
.btn-text:hover { background: var(--chip-green); }
.home-more { display: block; margin: var(--sp-3) auto 0; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); }

/* 추출 단계 — 보기 (시간 · 양 · 설명 일관 테이블) */
.steps-view { margin-top: var(--sp-4); }
.steps-view-title { font-weight: 700; font-size: var(--fs-body); margin-bottom: var(--sp-2); }
.steps-table {
  border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden;
}
.step-trow {
  display: grid; grid-template-columns: 56px 64px 1fr; align-items: baseline;
  gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); line-height: 1.5;
  border-top: 1px solid var(--line);
}
.step-trow:first-child { border-top: none; }
.step-thead {
  background: var(--surface-2); color: var(--text-soft);
  font-size: var(--fs-xs); font-weight: 600;
}
.step-c-time { color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-c-amt { color: var(--primary-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.step-thead .step-c-time, .step-thead .step-c-amt { color: var(--text-soft); font-weight: 600; }
.step-c-desc { min-width: 0; }
.step-c-label { font-weight: 600; }
.step-c-note { color: var(--text-soft); }
.step-chip { font-size: var(--fs-caption); vertical-align: middle; }

/* 가이드 레시피 카드 */
.guide-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.guide-card:hover { border-color: var(--primary-text); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.card-chevron { color: var(--text-soft); font-size: var(--fs-3xl); line-height: 1; align-self: center; flex-shrink: 0; }
.guide-card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.guide-card-actions .btn-sm { flex: 1; }
.guide-desc { margin-bottom: var(--sp-3); }

/* 따라서 브루하기 — 타이머 */
.brew-timer {
  text-align: center; padding: var(--sp-5) var(--sp-3); margin: var(--sp-2) 0 var(--sp-4);
  background: var(--surface-2); border-radius: var(--r-card); border: 1px solid var(--line);
}
.brew-time {
  font-size: var(--fs-hero); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.brew-prog {
  margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-soft); font-weight: 600;
  min-height: 18px; font-variant-numeric: tabular-nums;
}
.brew-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.bdot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: transform var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out); }
.bdot.past { background: var(--primary); opacity: .45; }
.bdot.on { background: var(--primary); transform: scale(1.5); }
/* 지금 단계 — 추출 중 시선이 가장 오래 머무는 곳이라 가장 크게 */
.brew-now-card {
  background: var(--surface); border: 1px solid var(--primary-text);
  border-radius: var(--r-card); padding: var(--sp-4) var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.bn-tag {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--primary-text); margin-bottom: var(--sp-2);
}
.bn-label { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.25; }
.bn-water {
  margin-top: var(--sp-2); font-size: var(--fs-xl); font-weight: 700; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.bn-water:empty { display: none; }
.bn-note { margin-top: var(--sp-2); font-size: var(--fs-body); line-height: 1.55; color: var(--text-soft); }
.bn-note:empty { display: none; }

/* 다음 단계 미리보기 — 프리롤(.soon)에 들어오면 강조 + 카운트다운.
   현재 단계는 그대로 두므로 목표 물량이 가려지지 않는다. */
.brew-next {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-btn);
  background: var(--surface-2); border: 1px solid var(--line);
  margin-bottom: var(--sp-3);
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.brew-next.soon {
  background: var(--accent-soft); border-color: var(--accent);
}
.bx-tag {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-soft);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.brew-next.soon .bx-tag { color: var(--accent-text); font-size: var(--fs-body); }
.bx-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.bx-label { font-weight: 600; font-size: var(--fs-body); }
.bx-water { font-size: var(--fs-sm); font-weight: 600; color: var(--primary-text); font-variant-numeric: tabular-nums; }
/* 예고 배너에 반복 펄스를 두지 않는다 — 카운트다운 숫자가 매초 바뀌는 것 자체가
   주의 신호다. 그 위에 무한 진동을 얹으면 추출 내내 도는 목적 없는 모션이 된다. */

/* 자동 재개 — 수동으로 단계를 옮겼을 때만 노출 */
.brew-auto {
  display: block; margin: 0 auto var(--sp-3); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface); color: var(--primary-text);
  font-size: var(--fs-sm); font-weight: 600; font-family: inherit; cursor: pointer;
}

/* 전체 단계 — 추출 중엔 접어 둔다 */
.brew-all { margin-bottom: var(--sp-3); }
.brew-all > summary {
  cursor: pointer; font-size: var(--fs-body); font-weight: 600; color: var(--text-soft);
  padding: var(--sp-2) 0; list-style: none;
}
.brew-all > summary::-webkit-details-marker { display: none; }
.brew-all > summary::before { content: "▸ "; }
.brew-all[open] > summary::before { content: "▾ "; }
.brew-all[open] > summary { margin-bottom: var(--sp-2); }

/* 컨트롤 독 — 모달 스크롤과 무관하게 항상 손에 닿아야 한다.
   추출 중엔 손이 젖어 있고 한 손은 주전자를 들고 있으므로 타깃을 크게. */
/* 컨트롤 독 — sticky 컨테이너는 반드시 하나여야 한다.
   dock과 dock-sub를 각각 sticky bottom:0으로 두면 둘이 같은 바닥에 겹쳐 붙어
   하단 줄이 메인 버튼 위로 올라타 잘린다(실기기 확인). 하나로 감싼다. */
.brew-footer {
  position: sticky; bottom: 0; z-index: 2;
  margin: 0 calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6));
  padding: var(--sp-3) var(--sp-6) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--bg) 18%, var(--bg) 100%);
}
.brew-dock { display: flex; gap: var(--sp-2); align-items: stretch; }
.brew-dock .bg-main { flex: 1; min-height: 58px; font-size: var(--fs-xl); font-weight: 700; }
.brew-dock .bg-side { flex: 0 0 60px; min-height: 58px; font-size: var(--fs-xl); padding: 0; }
.brew-dock-sub {
  display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3);
}
.brew-dock-sub .btn-text { font-size: var(--fs-sm); }

/* 모달 안 '돌아가기' — 상세에서 들어왔을 때만 노출 */
.modal-back {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: none; border: 0; padding: 0 0 var(--sp-2); cursor: pointer;
  font-family: inherit; font-size: var(--fs-body); font-weight: 600; color: var(--text-soft);
}
@media (hover: hover) and (pointer: fine) {
  .modal-back:hover { color: var(--primary-text); }
}

/* 긴 제목은 한 줄로 줄이고 …로 축약 (유튜브 임포트 제목이 6줄까지 번지던 문제) */
.title-1line {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; max-width: 100%;
}

/* 설정 선택 리스트 (라디오형) */
.pick-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; }
.pick-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-btn);
  background: var(--surface-2); border: 1px solid transparent;
  font-family: inherit; font-size: var(--fs-md); color: var(--text); text-align: left; cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.pick-row.on { background: var(--surface); border-color: var(--primary-text); font-weight: 700; }
.pick-check { color: var(--primary-text); font-weight: 700; }
.pick-row-2 { align-items: flex-start; }
.pick-main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.pick-sub { font-size: var(--fs-sm); font-weight: 400; color: var(--text-soft); line-height: 1.45; }

.brew-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.brew-step {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: var(--r-btn);
  background: var(--surface-2); border: 1px solid transparent;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}
.brew-step.active {
  background: var(--surface); border-color: var(--primary-text);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.brew-step.done { opacity: .5; }
.bs-time {
  font-variant-numeric: tabular-nums; color: var(--text-soft);
  font-size: var(--fs-sm); white-space: nowrap; padding-top: 1px; min-width: 38px;
}
.brew-step.active .bs-time { color: var(--primary-text); font-weight: 700; }
.bs-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-label { font-weight: 700; font-size: var(--fs-body); }
.bs-water { color: var(--primary-text); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.bs-note { color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.5; }
.guide-run-title { margin-bottom: var(--sp-1); }

/* 사진 — 입력 위젯 + 카드 썸네일 */
.photo-pick { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-1); }
.photo-preview {
  width: 76px; height: 76px; flex-shrink: 0; border-radius: var(--r-btn); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-4xl);
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-actions { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.photo-btn { cursor: pointer; display: inline-block; }
/* 네이티브 래핑에서는 [촬영][앨범] 두 개가 뜬다 — 세로로 쌓으면 폼이 길어져 가로로 붙인다 */
.photo-btns { display: flex; gap: var(--sp-2); }
.record-thumb {
  width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-btn);
  flex-shrink: 0; background: var(--surface-2);
}

/* 리스트 아이템 */
.item-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.item-main { flex: 1; min-width: 0; }
.item-title { font-weight: 700; font-size: var(--fs-lg); }
/* 추출 변수 나열(핸드드립 · V60 · 20g : 300g · 92°C …)은 길어서 두 줄로 넘치고,
   끝줄에 "중간 (설탕 입자)" 같은 조각만 남아 어색했다.
   한 줄로 고정하고 넘치면 말줄임 — 카드 목록의 세로 리듬도 함께 맞아진다.
   전체 값은 상세 화면에서 확인할 수 있다. */
.item-meta {
  color: var(--text-soft); font-size: var(--fs-sm); margin-top: var(--sp-1); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-note { margin-top: var(--sp-2); font-size: var(--fs-body); line-height: 1.6; color: var(--text); }
.item-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.icon-btn {
  background: transparent; border: none; cursor: pointer; font-size: var(--fs-md);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-chip); color: var(--text-soft);
}
.icon-btn:hover { background: var(--line); }

.stars { color: var(--accent-text); font-size: var(--fs-body); letter-spacing: 1px; white-space: nowrap; flex: none; }
.chip {
  display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--brand); margin: 2px var(--sp-1) 0 0;
}
.chip.warn { background: #fbeae0; border-color: #eccab2; color: var(--warn-text); }
.chip.good { background: #e7f0ea; border-color: #c5d9cc; color: var(--success-text); }

/* 내 레시피 필터 칩 */
.filter-chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3);
}
.fchip {
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--brand); font-family: inherit;
}
.fchip:hover { background: var(--line); }
.fchip.on {
  background: var(--primary); border-color: var(--primary-text);
  color: #fff; font-weight: 600;
}
.filter-empty { margin: var(--sp-1) 0 var(--sp-3); }

.bean-bar { height: 6px; border-radius: var(--r-xs); background: var(--line); margin-top: var(--sp-3); overflow: hidden; }
.bean-bar > div { height: 100%; border-radius: var(--r-xs); background: var(--accent); }
.bean-manual-note { opacity: .75; }

/* 브루 기록 없이 잔여량만 줄이는 빠른 차감 */
.bean-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.bean-foot-tip { font-size: var(--fs-xs); color: var(--text-soft); margin-left: auto; }
/* 좁은 화면에선 안내문을 버튼 아래 줄로 내려 왼쪽 정렬 */
@media (max-width: 480px) { .bean-foot-tip { flex: 1 1 100%; margin-left: 0; } }
.bean-quick-use[disabled] { opacity: .45; cursor: default; }
.bean-use-status {
  margin: var(--sp-3) 0 var(--sp-1); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-btn);
  background: var(--surface-2); font-size: var(--fs-md);
}
.bean-use-status .bean-use-sub {
  display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.use-presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.use-preset {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-body); color: var(--brand); font-family: inherit;
}
.use-preset:hover { background: var(--line); }
.use-preset.on { background: var(--primary); border-color: var(--primary-text); color: #fff; font-weight: 600; }
.bean-use-log { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.bean-use-log-head { font-size: var(--fs-sm); font-weight: 700; color: var(--text-soft); margin-bottom: var(--sp-2); }
.bean-use-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.bean-use-g { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 48px; }
.bean-use-meta { font-size: var(--fs-sm); color: var(--text-soft); flex: 1; min-width: 0; }
.bean-use-row .bean-use-undo { margin-left: auto; }

/* ---------- 폼 / 모달 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(13, 36, 28, 0.55);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  animation: fadeIn var(--dur-enter) var(--ease-out);
}
.modal-open { overflow: hidden; }
.modal {
  position: relative;
  width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-radius: var(--r-card); padding: var(--sp-6) var(--sp-6);
  box-shadow: var(--shadow);
  animation: modalIn var(--dur-enter) var(--ease-out);
}
/* 닫힘: enter보다 짧게, ease-in (ui.js가 .closing을 붙인 뒤 hidden 처리) */
.modal-backdrop.closing { animation: fadeOut var(--dur-exit) var(--ease-in) forwards; }
.modal-backdrop.closing .modal { animation: modalOut var(--dur-exit) var(--ease-in) forwards; }
.modal h3 { font-size: var(--fs-3xl); font-family: "Crimson Pro", serif; margin-bottom: var(--sp-4); padding-right: var(--sp-8); }
.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(20, 26, 22, 0.06); color: var(--brand);
  font-size: var(--fs-4xl); line-height: 1; cursor: pointer; z-index: 3;
}
.modal-close:hover { background: rgba(20, 26, 22, 0.12); }

button:disabled, [aria-disabled="true"] { opacity: 0.58; cursor: not-allowed; }

@media (min-width: 900px) {
  .tabs {
    left: 50%; right: auto; bottom: 16px;
    width: min(calc(100% - 32px), 640px);
    transform: translateX(-50%);
    padding: var(--sp-2);
    border: 1px solid var(--line); border-radius: var(--r-card);
    box-shadow: var(--shadow);
  }
  .view { padding-bottom: var(--sp-9); }
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } }

.field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); margin-bottom: var(--sp-1); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: var(--sp-3) var(--sp-3);
  border: 1.5px solid var(--line); border-radius: var(--r-btn);
  font-size: var(--fs-body); font-family: inherit; background: var(--surface); color: var(--text);
}
/* 날짜 입력은 네이티브 위젯의 최소 너비(min-width:auto) 때문에 그리드 칸을 넘쳐
   정렬이 틀어지므로, 위의 min-width:0 로 칸 너비에 맞춰 줄어들게 한다. */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary-text); box-shadow: 0 0 0 3px var(--chip-green);
}
.field textarea { resize: vertical; min-height: 70px; }
/* iOS Safari는 글자가 16px 미만인 입력칸을 누르면 화면을 확대해 버린다(뷰포트가 흔들리고 돌아오지 않음).
   터치 기기에서만 16px로 올린다 — 데스크톱의 촘촘한 폼은 그대로. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(var(--fs-lg), 1em); }
}
.mood-note-input { margin-top: var(--sp-2); }

.rating-input { display: flex; gap: var(--sp-1); }
.rating-input button {
  background: none; border: none; font-size: var(--fs-4xl); cursor: pointer;
  color: var(--text-soft); transition: color 0.1s; padding: 0 2px;
}
.rating-input button.on { color: var(--accent-text); }

.tag-select { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-select button {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--surface); font-size: var(--fs-sm); font-family: inherit; cursor: pointer; color: var(--text-soft);
}
.tag-select button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary-text); }
.tag-add { display: inline-flex; align-items: center; gap: var(--sp-1); }
.tag-add-input {
  width: 84px; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: 1.5px dashed var(--line);
  background: var(--surface); font-size: var(--fs-sm); font-family: inherit; color: var(--text);
}
.tag-add-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--text-soft); font-size: var(--fs-md); line-height: 1; cursor: pointer;
}

/* 맛 피드백 4축 */
.taste-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.taste-row { display: flex; align-items: center; gap: var(--sp-3); }
.taste-label { width: 78px; flex-shrink: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.taste-opts { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.taste-opts button {
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--surface); font-size: var(--fs-xs); font-family: inherit; cursor: pointer; color: var(--text-soft);
}
.taste-opts button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary-text); }
.label-sub { font-weight: 400; font-size: var(--fs-xs); color: var(--text-soft); }
.chip.taste { background: #ece4f5; border-color: #d4c3e8; color: #6b4d96; }

/* ---------- SCA 센서리 · 플레이버 휠 ---------- */
.sca-details { border: 1.5px solid var(--line); border-radius: var(--r-btn); background: var(--bg); padding: 0 var(--sp-4); }
.sca-details > summary {
  cursor: pointer; list-style: none; padding: var(--sp-3) 2px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand);
}
.sca-details > summary::-webkit-details-marker { display: none; }
.sca-details > summary::before { content: "▸"; margin-right: var(--sp-2); color: var(--accent); }
.sca-details[open] > summary::before { content: "▾"; }
.sca-details[open] { padding-bottom: var(--sp-4); }
.sca-details .field { margin-top: var(--sp-2); }

.sca-sensory { display: flex; flex-direction: column; gap: var(--sp-4); }
.sca-rows { display: flex; flex-direction: column; gap: var(--sp-1); }
.sca-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; }
.sca-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.sca-en { font-size: var(--fs-caption); font-weight: 400; color: var(--text-soft); margin-left: var(--sp-1); }
.sca-stepper { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.sca-stepper button {
  width: 30px; height: 30px; border-radius: var(--r-chip); border: 1.5px solid var(--line);
  background: var(--surface); font-size: var(--fs-xl); line-height: 1; cursor: pointer; color: var(--brand);
}
.sca-stepper button:hover { border-color: var(--accent); }
.sca-val { width: 46px; text-align: center; font-size: var(--fs-body); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary-text); }

.sca-summary { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); border-top: 1px dashed var(--line); padding-top: var(--sp-4); }
.sca-total { font-size: var(--fs-body); color: var(--text); align-self: flex-start; }
.sca-total strong { font-size: var(--fs-2xl); color: var(--primary-text); }
.sca-total-sub { font-size: var(--fs-xs); color: var(--text-soft); font-weight: 400; }

.chip.sca-chip { background: var(--accent-soft); border-color: var(--chip-gold-line); color: #7D6128; font-weight: 700; }
.chip.sca-chip .sca-chip-sub { font-weight: 400; opacity: .75; }

/* 육각 레이더 차트 */
.sca-radar { overflow: visible; display: block; }
.radar-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.radar-spoke { stroke: var(--line); stroke-width: 1; }
.radar-data { fill: rgba(31,77,61,.20); stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
.radar-label { fill: var(--text-soft); font-size: var(--fs-micro); font-weight: 600; dominant-baseline: middle; }
.card-radar { margin-top: var(--sp-2); }

/* 플레이버 휠 (2단계 접이식) */
.flavor-wheel { display: flex; flex-direction: column; gap: var(--sp-2); }
.fw-cat { border: 1.5px solid var(--line); border-radius: var(--r-btn); overflow: hidden; background: var(--surface); }
.fw-cat-btn {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); font-weight: 600; color: var(--brand);
}
.fw-cat-name { flex: 1; text-align: left; }
.fw-count { min-width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: var(--fs-caption); border-radius: var(--r-pill); color: transparent; }
.fw-count.on { background: var(--primary); color: #fff; padding: 0 var(--sp-2); }
.fw-caret { color: var(--text-soft); transition: transform .15s; }
.fw-cat.open .fw-caret { transform: rotate(180deg); }
.fw-subs { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-3); }
.fw-subs.hidden { display: none; }
.fw-sub {
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--bg); font-size: var(--fs-xs); font-family: inherit; cursor: pointer; color: var(--text-soft);
}
.fw-sub.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary-text); }

.modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-5); }

.help-tip { font-size: var(--fs-xs); color: var(--text-soft); margin-top: var(--sp-1); line-height: 1.5; }

/* ---------- 설정 ---------- */
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border-bottom: none; }
.settings-row > div { min-width: 0; }   /* 설명이 길어도 버튼을 밀지 않고 줄바꿈 */
.settings-row .s-label { font-weight: 600; font-size: var(--fs-md); }
.settings-row .s-desc { font-size: var(--fs-sm); color: var(--text-soft); margin-top: var(--sp-1); line-height: 1.5; }
/* 설정 버튼: 줄바꿈 방지 + 폭 통일로 우측 정렬을 가지런하게 */
.settings-row > button { flex-shrink: 0; white-space: nowrap; min-width: 86px; text-align: center; }

/* ---------- 추출 도구 관리 ---------- */
.tool-manager { margin: var(--sp-1) 0 var(--sp-4); }
.tool-group { margin-bottom: var(--sp-4); }
.tool-group-title { font-size: var(--fs-xs); font-weight: 700; color: var(--primary-text); letter-spacing: 0.02em; margin-bottom: var(--sp-2); }
.tool-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-btn); margin-bottom: var(--sp-2); background: var(--surface); }
.tool-name { font-size: var(--fs-body); }
.tool-add { border-top: 1px solid var(--line); padding-top: var(--sp-4); }

/* ---------- 토스트 ---------- */
/* 하단 탭바(60px) + 위로 20px 튀어나온 + 버튼 위에 뜬다. 예전 28px은 탭바 도입 전 값이라 버튼을 가렸다.
   left:50%만 주면 폭이 화면의 절반으로 묶여 짧은 문장도 세 줄로 접히므로 max-content로 푼다. */
.toast {
  position: fixed; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(420px, calc(100vw - 32px)); text-align: center;
  background: var(--eg-900); color: var(--on-dark);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-card); font-size: var(--fs-body); line-height: 1.45;
  box-shadow: var(--shadow); z-index: 110;
  animation: toastIn var(--dur-enter) var(--ease-out);
}
.toast.leaving { animation: toastOut var(--dur-exit) var(--ease-in) forwards; }

/* ---------- 설정 경고 ---------- */
.config-warning {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-6);
  background: var(--eg-800);
}
.config-warning-card {
  background: var(--surface-2); border-radius: var(--r-card); padding: var(--sp-8) var(--sp-7);
  max-width: 480px; text-align: center; box-shadow: var(--shadow);
}
.config-warning-card h2 { margin-bottom: var(--sp-3); font-size: var(--fs-3xl); }
.config-warning-card p { color: var(--text-soft); line-height: 1.6; }


/* ============================================================
   다크 모드 — "그린 몰입"
   색은 design-tokens.css의 다크 블록이 담당. 여기는 토큰에 없는
   레거시 별칭의 다크 보정만 남긴다.
   ============================================================ */
:root[data-theme="dark"] {
  --cream-dark: #21362B;        /* line보다 살짝 밝은 눌린 표면 */
  --caramel-light: #E6C684;
  --on-dark: #EAF1EC;
  --chip-green-line: #2C5A3D;
  --chip-gold-line: #4A3C20;
}
/* 다크에서 라이트 톤 칩/카드 보정 + 구글 버튼은 흰색 유지 */
:root[data-theme="dark"] .btn-google { background: #fff; }
:root[data-theme="dark"] .suggest-card.success { background: #15311F; border-color: #2C5A3D; }
:root[data-theme="dark"] .chip.good { background: #15311F; border-color: #2C5A3D; }
:root[data-theme="dark"] .chip.warn { background: #3A241B; border-color: #5A3A2A; }
:root[data-theme="dark"] .chip.taste { background: #2A2440; border-color: #3F3A5A; color: #C9BBE8; }
:root[data-theme="dark"] .import-status.good { background: #15311F; }
:root[data-theme="dark"] .chip.sca-chip { color: var(--accent); }


/* ============================================================
   Phase 3·4 — 타이포·간격·빈 상태·마이크로 인터랙션·접근성
   ============================================================ */

/* 타이포 위계 강화 */
.section-head h2 { font-size: var(--fs-4xl); letter-spacing: -0.01em; }
.item-title { font-size: var(--fs-lg); letter-spacing: -0.01em; }
.insight-title, .sub-head { letter-spacing: -0.01em; }

/* 빈 상태 — 점선 박스 대신 부드러운 표면 + 원형 아이콘 */
.empty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-9) var(--sp-6);
  line-height: 1.6;
}
.empty .empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--surface-2); color: var(--primary-text);
  font-size: var(--fs-5xl);
}

/* 마이크로 인터랙션 — 버튼·탭·카드 */
.btn-primary, .btn-secondary, .btn-text, .tab, .level-option,
.fb-cat, .tag-select button, .taste-opts button, .fw-sub {
  transition: transform var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}
.btn-primary:active, .btn-secondary:active, .btn-text:active, .btn-social:active { transform: scale(0.98); }
.tab:active { transform: scale(0.95); }
.card { transition: box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out); }

/* 접근성 — 포커스 링 + 터치 타깃 */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-chip);
}
.tab { min-height: 48px; }
.icon-btn { position: relative; min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn::after { content: ""; position: absolute; inset: -3px; } /* 히트 영역 44×44 */

/* 테마/상태 전환 부드럽게 */
html, body, .topbar, .tabs, .card, .stat-card, .empty, .modal { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

/* 로딩 스켈레톤 */
@keyframes bj-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.skel-wrap { padding: var(--sp-1) 0; }
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 840px 100%;
  animation: bj-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-btn);
}
.skel-card { height: 92px; border-radius: var(--r-card); margin-bottom: var(--sp-3); }
.skel-line { height: 14px; margin: var(--sp-2) 0; }
.skel-line.w40 { width: 40%; } .skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }

/* ---------- 접근성: 모션 최소화 설정 존중 ---------- */
/* 모션 최소화는 "더 부드럽게"이지 "0"이 아니다.
   이동(transform)은 없애되 색·투명도 전이는 남겨 이해를 돕고,
   누름 피드백은 지속시간만 0으로 만들어 '즉시 반응'으로 유지한다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* 이동을 동반하는 전이만 즉시 처리 — background/color/opacity 전이는 그대로 둔다 */
  .view.view-enter { animation: none; }
  .tab-fab, .sheet-opt, .segment button, .today-strip, .home-report, .card-sum {
    transition-property: background, color, box-shadow;
    transition-duration: 0.01ms;
  }
}

/* ============================================================
   2.0 — 하단바 FAB · 바텀시트 · 세그먼트
   ============================================================ */

/* 중앙 기록 버튼 — 라벨 없이 형태로 "다른 종류"임을 말한다(§1.3.1).
   화면 글자는 없지만 aria-label은 index.html에 있다. */
.tab-fab {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 52px; height: 52px; margin: calc(-1 * var(--sp-5)) var(--sp-1) 0;
  border: none; border-radius: 50%;
  background: var(--primary); color: #fff; cursor: pointer;
  box-shadow: 0 6px 16px rgba(31, 77, 61, .34);
  /* 누르는 즉시 반응 — 손이 닿은 순간 피드백 (Response) */
  transition: transform 140ms var(--ease-out);
}
.tab-fab:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .tab-fab:hover { box-shadow: 0 8px 20px rgba(31, 77, 61, .4); }
}

/* 바텀시트 — 아래에서 올라오고 아래로 내려간다(경로 대칭).
   중앙 모달과 달리 화면 하단에 고정되므로 backdrop 정렬을 바꾼다. */
.modal-backdrop.as-sheet { align-items: flex-end; padding: 0; }
.modal-backdrop.as-sheet .modal {
  width: 100%; max-width: 560px; max-height: 88vh;
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: var(--sp-6) var(--sp-6) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  animation: sheetIn var(--dur-enter) var(--ease-drawer);
}
/* 가역 전환은 커브를 미러링해야 경로가 대칭으로 읽힌다 (--ease-drawer의 역커브) */
.modal-backdrop.as-sheet.closing .modal { animation: sheetOut var(--dur-exit) var(--ease-drawer-out) forwards; }
@keyframes sheetIn { from { transform: translateY(100%); } }
@keyframes sheetOut { to { transform: translateY(100%); } }
/* 손잡이 — 이 표면이 아래에서 왔고 아래로 간다는 시각 단서 */
.sheet-grip {
  width: 36px; height: 4px; border-radius: var(--r-xs); background: var(--line);
  margin: calc(-1 * var(--sp-2)) auto var(--sp-4);
}

/* 시트 안 선택지 */
/* 첫 진입 "왜" 3장 — 읽는 화면이라 중앙 정렬. 도트 외에 새 색은 쓰지 않는다(P5) */
.intro {
  text-align: center; padding: var(--sp-2) var(--sp-1) 0;
  /* 가로는 스와이프가 쓰고 세로는 브라우저에 넘긴다 — 스크롤을 가로채지 않는다 */
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.intro-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: var(--sp-4);
  border-radius: 50%; background: var(--surface-2); color: var(--primary-text);
}
.intro h3 { font-size: var(--fs-3xl); letter-spacing: -0.01em; }
.intro-body { margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--text-soft); line-height: 1.65; }
.intro-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }
.intro-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); transition: background 160ms var(--ease-out);
}
.intro-dots i.on { background: var(--primary); }
/* 읽는 화면이라 액션은 좌우 끝이 아니라 가운데에 모은다 */
.intro .modal-actions { justify-content: center; margin-top: var(--sp-5); }

.sheet-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.sheet-opt {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-4); border-radius: var(--r-btn);
  background: var(--surface-2); border: 1px solid transparent;
  font-family: inherit; text-align: left; color: var(--text); cursor: pointer;
  transition: transform 140ms var(--ease-out), background 140ms var(--ease-out);
}
.sheet-opt:active { transform: scale(0.985); background: var(--surface); }
.sheet-opt .so-ic {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-chip); display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); color: var(--primary-text);
}
.sheet-opt .so-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-opt .so-t { font-size: var(--fs-md); font-weight: 700; }
.sheet-opt .so-d { font-size: var(--fs-sm); color: var(--text-soft); }

/* 세그먼트 토글 (보관함 원두/카페, 기록 리스트/달력) */
.segment {
  display: flex; gap: var(--sp-1); padding: var(--sp-1); margin-bottom: var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.segment button {
  flex: 1; padding: var(--sp-2) var(--sp-3); border: none; border-radius: var(--r-pill);
  background: transparent; color: var(--text-soft);
  font-family: inherit; font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.segment button[aria-selected="true"] {
  background: var(--surface); color: var(--primary-text); font-weight: 700;
  box-shadow: 0 1px 3px rgba(20, 26, 22, .1);
}
.segment button:active { transform: scale(0.98); }

/* 보관함: 세그먼트 아래 액션 줄 (h2 없이 버튼만) */
.storage-actions { display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }


/* ---------- 홈 2.0 ---------- */
/* 오늘 스트립 — 스탯 카드 2장을 한 줄로 압축하고 달력 진입점을 겸한다 */
/* 오늘 스트립 = 달력의 한 조각.
   1.0의 진한 스탯 카드 2장을 조용한 흰 줄로 압축했더니 달력 진입점이
   라벨 없는 고스트 아이콘이 되어 아무도 누르지 않았다(실사용 피드백).
   최근 7일을 실제로 그려 정보이자 어포던스가 되게 하고, 줄 전체를 버튼으로 만든다. */
.today-strip {
  display: flex; flex-direction: column; gap: var(--sp-2); width: 100%;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-soft); font-size: var(--fs-body); font-family: inherit; color: var(--text);
  cursor: pointer;
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.today-strip:active { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) {
  .today-strip:hover { border-color: var(--primary-text); }
}
.today-strip:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.ts-top { display: flex; align-items: center; gap: var(--sp-2); }
.ts-go { margin-left: auto; color: var(--primary-text); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }

/* 최근 7일 — 달력과 같은 색 규칙(그린=브루, 골드=카페)이라 읽는 법을 새로 배우지 않는다 */
.ts-week { display: flex; gap: var(--sp-1); }
.ts-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.ts-dow { font-size: var(--fs-micro); color: var(--text-soft); line-height: 1; }
.ts-day.today .ts-dow { color: var(--accent-text); font-weight: 700; }
.ts-dot { width: 100%; height: 6px; border-radius: var(--r-xs); background: var(--line); display: block; }
.ts-dot.brew { background: var(--primary); }
.ts-dot.cafe { background: var(--accent); }
.ts-day.today .ts-dot.none { box-shadow: inset 0 0 0 1px var(--accent); }
.ts-flame { color: var(--accent-text); display: inline-flex; }
.ts-main { white-space: nowrap; }
.ts-main b { font-variant-numeric: tabular-nums; font-weight: 700; }
.ts-sep { color: var(--ink-mute, var(--text-soft)); opacity: .5; }

.section-head-sm { margin-top: var(--sp-5); }
.section-head-sm h2 { font-size: var(--fs-xl); }

.home-report {
  display: block; width: 100%; margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  color: var(--primary-text); font-family: inherit; font-size: var(--fs-body); font-weight: 700;
  cursor: pointer;
  transition: background 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.home-report:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .home-report:hover { background: var(--surface-2); } }

.empty-cta { padding: var(--sp-8) var(--sp-5); }
/* 첫 잔 진입로 — 세로 스택. "지금"과 "어제"는 위계가 달라 primary/secondary로 나눈다 */
/* 첫 도달 팁 캡션 — 가리키는 대상 바로 아래 붙는 한 줄. 칩도 배지도 아니다(P5) */
.tip-caption {
  margin: var(--sp-2) 2px 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.5;
}
.ec-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text); }
.ec-sub { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--text-soft); }
.ec-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ---------- 리포트 ---------- */
.report-title { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.report-share-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.report-share-row > button { flex: 1; min-width: 0; }
.score-row { padding: var(--sp-2) 0; }
.score-row + .score-row { border-top: 1px solid var(--line); }
.score-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.score-name { font-size: var(--fs-body); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-val { font-size: var(--fs-sm); font-weight: 700; color: var(--accent-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.score-n { color: var(--text-soft); font-weight: 500; }
.score-bar { height: 6px; border-radius: var(--r-xs); background: var(--surface-2); overflow: hidden; }
.score-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-xs); }


/* ---------- 요약 카드 (3줄 규칙) ---------- */
.card-sum { cursor: pointer; }
.card-sum .item-row { align-items: center; }
.card-sum .item-title { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.card-sum .item-meta {
  margin-top: var(--sp-1); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.card-chips .chip.more { background: transparent; color: var(--text-soft); border: 1px dashed var(--line); }
.card-todo { margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: var(--accent-text); }
.card-chevron { color: var(--text-soft); font-size: var(--fs-2xl); flex: none; opacity: .55; }
/* 큰 카드에 scale은 어색하고 0.995는 지각 역치 아래다 — 눌림은 배경으로 */
.card-sum:active { background: var(--line); }
.card-sum { transition: transform 140ms var(--ease-out), background 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card-sum:hover { background: var(--surface-2); } }
.card-sum:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }

/* ---------- 상세 시트 ---------- */
.detail-photo { width: 100%; border-radius: var(--r-btn); margin-bottom: var(--sp-4); display: block; }
.detail-dl {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3); font-size: var(--fs-body);
}
.detail-dl dt { color: var(--text-soft); white-space: nowrap; }
.detail-dl dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.detail-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.detail-note {
  margin: var(--sp-3) 0; padding: var(--sp-3); border-radius: var(--r-btn);
  background: var(--surface-2); font-size: var(--fs-body); line-height: 1.6; white-space: pre-wrap;
}
.detail-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.detail-actions button { flex: 1; }

/* ---------- 달력 (§3.4) ---------- */
.seg-ico { vertical-align: -2px; margin-right: var(--sp-1); }

.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.cal-title { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-arrow {
  width: 36px; height: 36px; border-radius: var(--r-btn);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-soft); font-size: var(--fs-2xl); line-height: 1; cursor: pointer;
  transition: background 140ms var(--ease-out);
}
.cal-arrow:active { background: var(--line); }
@media (hover: hover) and (pointer: fine) { .cal-arrow:hover { background: var(--surface-2); } }
.cal-summary {
  margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.cal-dow { text-align: center; font-size: var(--fs-caption); color: var(--text-soft); padding-bottom: var(--sp-1); }
.cal-pad { aspect-ratio: 1; }
.cal-cell {
  aspect-ratio: 1; border-radius: var(--r-chip); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-soft); font-family: inherit; font-size: var(--fs-caption);
}
.cal-cell.has { cursor: pointer; color: var(--text); border-color: var(--line); background: var(--surface); }
/* 만족도 틴트 — 연속 기록이 띠로 읽힌다 */
.cal-cell.has.l1 { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.cal-cell.has.l2 { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.cal-cell.has.l3 { background: color-mix(in srgb, var(--primary) 26%, var(--surface)); border-color: var(--primary); }
.cal-cell.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-d { font-variant-numeric: tabular-nums; line-height: 1; }
.cal-mark {
  font-size: var(--fs-micro); font-weight: 700; color: var(--primary-text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-dots { display: flex; align-items: center; gap: 2px; min-height: 5px; }
.cal-dots i { width: 4px; height: 4px; border-radius: 50%; display: block; }
.cal-dots em { font-style: normal; font-size: var(--fs-micro); color: var(--text-soft); }
.dot-brew { background: var(--primary); }
.dot-cafe { background: var(--accent); }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3);
  font-size: var(--fs-caption); color: var(--text-soft);
}
.cal-legend span { display: flex; align-items: center; gap: var(--sp-1); }
.cal-legend i { width: 6px; height: 6px; border-radius: 50%; display: block; }

/* 지표 차트 — 한 계열이라 범례 없이 제목이 이름. 축·격자는 물러서고 선과 점만 앞으로 */
.cal-chart { margin-top: var(--sp-4); }
.mc-title { font-size: var(--fs-caption); color: var(--text-soft); margin-bottom: var(--sp-1); }
.mc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mc-grid { stroke: var(--line); stroke-width: 1; }
.mc-axis { font-size: 10px; fill: var(--text-soft); font-variant-numeric: tabular-nums; }
.mc-line { fill: none; stroke: var(--primary-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mc-dot { fill: var(--primary-text); stroke: var(--bg); stroke-width: 2; }
.mc-hit { fill: transparent; }
.mc-pt { cursor: pointer; outline: none; }
.mc-pt:focus-visible .mc-dot { stroke: var(--primary-text); stroke-width: 3; }

/* 종류가 다른 컨트롤은 줄을 나눈다. 셀 표시는 6개 중 하나를 고르는 라디오고,
   배경은 켜고 끄는 토글이다. 한 줄에 같은 모양으로 두면 진한 필이 둘로 보여
   "한 그룹에서 두 개를 골랐나?" 하는 혼동이 생긴다. */
.cal-prefs { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.cal-pref-row { display: flex; align-items: flex-start; gap: var(--sp-2); }
.cal-pref-l { font-size: var(--fs-caption); color: var(--text-soft); flex-shrink: 0; padding-top: var(--sp-2); }
.cal-pill-group { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.cal-pill {
  font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--text-soft);
  font-family: inherit; cursor: pointer;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.cal-pill.on { background: var(--primary); color: #fff; border-color: transparent; font-weight: 700; }
/* 배경 토글은 선택된 마크 필과 같은 '채움' 스타일을 쓰지 않는다 —
   앞의 네모가 차오르는 것으로 켜짐을 말해, 체크박스처럼 읽히게 한다. */
.cal-pill.tint, .cal-pill.tint.on {
  background: var(--surface); border-style: solid; font-weight: 400;
  color: var(--text-soft); border-color: var(--line);
}
.cal-pill.tint.on { color: var(--primary-text); border-color: var(--primary-text); }
.cal-pill.tint::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: var(--sp-1);
  vertical-align: -1px; border: 1.5px solid currentColor; border-radius: var(--r-xs);
}
.cal-pill.tint.on::before { background: currentColor; }

.day-list { display: flex; flex-direction: column; gap: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  .cal-arrow, .cal-pill { transition-duration: 0.01ms; }
}

/* ============================================================
   행사 모드 (EVENT_MODE_PLAN.md)
   ------------------------------------------------------------
   행사는 1년에 서너 번이라 상시 UI를 늘리지 않는다. 아래 요소는 전부
   행사가 진행 중일 때만 DOM에 존재하고, 끝나면 스스로 사라진다.
   색은 골드(성취/진행 중) 하나만 쓴다 — 그린은 액션에 예약돼 있다(P5).
   ============================================================ */

/* 홈 배너 — 진행 중일 때만 today-strip 아래에 뜬다 */
/* 바로 아래 제안 카드가 이미 골드 틴트다. 배너까지 틴트면 두 블록이 한 덩어리로
   읽혀 "진행 중"이라는 신호가 죽는다 — 틴트 대신 골드 좌측 보더로 구분한다(P5). */
.event-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card); box-shadow: var(--shadow-soft);
}
.eb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eb-main b {
  font-size: var(--fs-body); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eb-sub { font-size: var(--fs-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* 폼 상단 — 지금 어느 행사의 몇 잔째인지 */
.event-head {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); padding-right: var(--sp-7);
}
.event-badge {
  flex: 1; min-width: 0;
  font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-count {
  flex-shrink: 0; font-size: var(--fs-xs); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* 방금 저장한 것 — 연속 기록에서 "내가 뭘 저장했는지" 확인 없이 다음으로 못 넘어간다 */
.event-saved {
  margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border-radius: var(--r-btn);
  font-size: var(--fs-sm); color: var(--text-soft);
}
.event-saved b { color: var(--text); font-weight: 600; }

/* 사진 2칸을 세로로 쌓으면 폼이 한 화면을 넘겨 "저장하고 다음 잔"까지 스크롤해야 한다.
   부스마다 반복되는 동작이라 40번이면 그 스크롤이 비용이 된다 — 가로로 붙인다. */
.event-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
/* .full 은 form-grid에서 grid-column:1/-1 이라 그대로 두면 2열이 무시된다 */
.event-photos .photo-field { margin-bottom: var(--sp-1); grid-column: auto; min-width: 0; }
.event-photos .photo-pick { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.event-photos .photo-preview { width: 100%; height: 84px; }
.event-photos .photo-actions { align-items: stretch; }
.event-photos .photo-btn { text-align: center; }

/* 다시 찾을 곳 — 행사 회고의 유일한 필수 신호라 접힌 영역 밖에 둔다 */
.event-revisit {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3); margin-bottom: var(--sp-1);
  background: var(--surface-2); border-radius: var(--r-btn);
  font-size: var(--fs-body); cursor: pointer;
}
.event-revisit input { width: 18px; height: 18px; accent-color: var(--accent); }

/* 평소 폼에서 행사 모드로 들어가는 유일한 입구 — 접혀 있어 평소엔 안 보인다 */
.event-start { margin-top: var(--sp-1); }
.event-start > summary {
  cursor: pointer; font-size: var(--fs-sm); color: var(--text-soft); padding: var(--sp-2) 0;
  list-style: none;
}
.event-start > summary::-webkit-details-marker { display: none; }
.event-start > summary::before { content: "＋ "; }
.event-start > summary:hover { color: var(--text); }

/* 동기화 대기 — 행사장에서 "저장은 됐는데 올라갔나?"에 답한다 */
.event-pending {
  margin-left: var(--sp-2); padding: 1px var(--sp-2); border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* 영속화가 없는 브라우저 — 앱을 닫으면 대기 중인 쓰기가 사라진다는 사실을 숨기지 않는다 */
.event-warn {
  margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-btn);
  background: var(--warn-soft); color: var(--warn-text);
  font-size: var(--fs-xs); line-height: 1.5;
}

/* ---------- 기록 폼 2스텝 (§4.5) ---------- */
/* 커피를 내리는 순간과 마시고 평가하는 순간은 다른 시점이다.
   한 폼에 몰아넣어 길어졌던 것을 시점대로 쪼갠다. 끝이 보이면 중도 이탈이 준다. */
.step-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); font-size: var(--fs-sm);
}
.step-n {
  font-weight: 700; color: var(--primary-text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.step-t { color: var(--text-soft); white-space: nowrap; }
.step-bar {
  flex: 1; height: 3px; border-radius: var(--r-xs); background: var(--line); overflow: hidden;
}
.step-bar i {
  display: block; height: 100%; background: var(--primary); border-radius: var(--r-xs);
  transition: width 220ms var(--ease-out);
}

/* ---------- TDS · 추출수율 (§5) ---------- */
.tds-details { margin-top: var(--sp-1); }
.tds-details > summary {
  cursor: pointer; font-size: var(--fs-body); font-weight: 600; color: var(--text-soft);
  padding: var(--sp-2) 0; list-style: none;
}
.tds-details > summary::-webkit-details-marker { display: none; }
.tds-details > summary::before { content: "▸ "; }
.tds-details[open] > summary::before { content: "▾ "; }
.tds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ey-out {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: var(--r-btn);
  background: var(--surface-2); font-size: var(--fs-body);
}
.ey-empty { color: var(--text-soft); font-size: var(--fs-sm); }
.ey-val b { font-variant-numeric: tabular-nums; font-size: var(--fs-lg); }
.ey-tag {
  font-size: var(--fs-xs); font-weight: 700; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill);
}
.ey-tag.ok { background: var(--good-soft, var(--chip-green, #E4F0E7)); color: var(--primary-text); }
.ey-tag.under, .ey-tag.over { background: var(--warn-soft); color: var(--warn-text); }

@media (prefers-reduced-motion: reduce) { .step-bar i { transition-duration: 0.01ms; } }

/* ---------- 보정 제안 3층: 진단 → 처방 하나 → 왜 (§8.2) ---------- */
.rx-label {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-soft); margin: var(--sp-4) 0 var(--sp-1);
}
.rx { font-size: var(--fs-xl); font-weight: 700; color: var(--primary-text); line-height: 1.35; }
/* 이유는 처방에 매달린 것이라 좌측 보더로 종속 관계를 보인다 */
.rx-why {
  margin-top: var(--sp-1); padding-left: var(--sp-3); border-left: 2px solid var(--line);
  font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55;
}
.rx-more { margin-top: var(--sp-3); }
.rx-more > summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft);
  padding: var(--sp-2) 0; list-style: none;
}
.rx-more > summary::-webkit-details-marker { display: none; }
.rx-more > summary::before { content: "▸ "; }
.rx-more[open] > summary::before { content: "▾ "; }
.rx-next { margin: var(--sp-2) 0; }
.rx-next-t { font-size: var(--fs-body); font-weight: 600; }
.rx-note {
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.5;
}

/* ---------- 레시피 성적표 (§7.3) ---------- */
/* 레시피가 늘지 않는 이유는 저장된 레시피가 죽은 문서이기 때문이다.
   몇 번 썼고 평균 몇 점인지가 보이면 문서가 아니라 지표가 된다. */
.rc-score {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.rc-n { font-weight: 700; color: var(--text); }
.rc-avg { font-weight: 700; color: var(--accent-text); }
.rc-ago { margin-left: auto; }
/* 한 번도 안 써본 레시피 — 되살릴 후보라 조용히 눈에 띄게 */
.rc-never {
  display: block; color: var(--text-soft); font-style: normal;
  border-top-style: dashed;
}

/* 정렬은 <select> 하나, 필터 칩은 그 옆에서 가로로 흐른다 —
   칩 줄이 쌓이면 화면 위쪽을 다 먹고 정작 레시피가 밀려난다 */
.list-controls { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.list-controls select {
  flex-shrink: 0; font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: inherit;
}
.list-controls .filter-chips {
  flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto;
  margin: 0; padding-bottom: 2px; scrollbar-width: none;
}
.list-controls .filter-chips::-webkit-scrollbar { display: none; }
.fchip { white-space: nowrap; }
.never-note { margin-bottom: var(--sp-3); }


/* ---------- 레시피 화면 재구성 (§7.0.1) ---------- */
/* 가이드 레시피는 입문자에겐 필요하지만 내 레시피가 쌓인 사람에겐
   매번 스크롤할 짐이다. 접어 두고, 내 레시피가 0개일 때만 펼친다. */
.guide-fold { margin-top: var(--sp-5); }
.guide-fold > summary {
  cursor: pointer; list-style: none; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
  font-size: var(--fs-md); font-weight: 700;
  display: flex; align-items: center; gap: var(--sp-2);
}
.guide-fold > summary::-webkit-details-marker { display: none; }
.guide-fold > summary::after { content: "›"; margin-left: auto; color: var(--text-soft); font-size: var(--fs-2xl); }
.guide-fold[open] > summary { margin-bottom: var(--sp-3); }
.guide-fold[open] > summary::after { content: "⌄"; }
.gf-n {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-soft);
  background: var(--surface-2); border-radius: var(--r-pill); padding: 2px var(--sp-2);
}

/* 유튜브 링크 입력은 추가 시트 안에서 이어진다 */
.yt-inline { margin-top: var(--sp-1); }

/* 핀 · 태그 */
.pin-head { display: flex; align-items: center; gap: var(--sp-2); }
.icon-btn.act-pin.on { color: var(--accent-text); background: var(--accent-soft); }
.rc-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.tag-chip { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line); }

/* ---------- 설정 재구성 (§9.2) ---------- */
/* 조작 가능한 행과 안내문이 같은 모양이면 무엇을 누를 수 있는지 알 수 없다.
   컨트롤이 있는 것만 행으로 두고, 안내문은 섹션 하단 캡션으로 내린다. */
.set-sec { margin-bottom: var(--sp-6); }
.set-sec-t {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-soft); margin: 0 var(--sp-1) var(--sp-2);
}
.set-note {
  margin: var(--sp-2) var(--sp-1) 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55;
}
/* 위험 구역은 시각적으로 격리한다 — 로그아웃과 계정 삭제가
   설정 항목과 같은 무게로 나열되면 안 된다 */
.set-danger { margin-top: var(--sp-7); }
.set-danger .set-sec-t { color: var(--warn-text); }
.set-danger .card { border-color: var(--warn); }

/* ---------- SCA 커피 가치 평가 (CVA) ---------- */
/* 강도(파트1)와 호감(파트2)을 시각적으로도 섞지 않는다 —
   강도는 가로 막대, 호감은 1~9 알약. 형태가 다르면 헷갈리지 않는다. */
.cva-details { border: 1.5px solid var(--line); border-radius: var(--r-btn); background: var(--bg); padding: 0 var(--sp-4); }
.cva-details > summary {
  cursor: pointer; padding: var(--sp-3) 0; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); list-style: none;
}
.cva-details > summary::-webkit-details-marker { display: none; }
.cva-details > summary::before { content: "▸"; margin-right: var(--sp-2); color: var(--accent); }
.cva-details[open] > summary::before { content: "▾"; }
.cva-details[open] { padding-bottom: var(--sp-4); }

.cva-part {
  margin: var(--sp-4) 0 var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line);
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand);
}
.cva-part:first-of-type { border-top: none; padding-top: 0; margin-top: var(--sp-1); }
.cva-part-sub { font-size: var(--fs-caption); font-weight: 400; color: var(--text-soft); margin-left: var(--sp-1); }
.cva-legend { font-size: var(--fs-caption); color: var(--text-soft); margin-bottom: var(--sp-2); }
.cva-sub-l { font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); margin: var(--sp-3) 0 var(--sp-2); }

/* 강도 0~15 */
.cva-int { margin-bottom: var(--sp-3); }
.cva-int-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.cva-int-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.cva-en { font-size: var(--fs-micro); font-weight: 400; color: var(--text-soft); margin-left: var(--sp-1); }
.cva-int-val {
  font-size: var(--fs-md); font-weight: 700; color: var(--primary-text);
  font-variant-numeric: tabular-nums; min-width: 26px; text-align: right;
}
.cva-range { width: 100%; margin: var(--sp-1) 0 2px; accent-color: var(--primary); }
.cva-scale { display: flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--text-soft); }

/* 기술어 칩 — .tag-select와 같은 생김새를 쓴다 */
.cva-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cva-tags button {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--surface); font-size: var(--fs-xs); font-family: inherit; cursor: pointer; color: var(--text-soft);
}
.cva-tags button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary-text); }

/* 호감 1~9 */
.cva-affs { display: flex; flex-direction: column; gap: var(--sp-3); }
/* 라벨을 버튼 위로 올린다. 한 줄에 두면 라벨 길이만큼 버튼이 밀려 375px에서
   9점이 화면 밖으로 잘렸다 — 척도의 꼭대기를 못 누르는 건 치명적이다.
   폭을 고정하지 않고 flex로 나눠 가지므로 라벨 길이와 무관하게 9칸이 늘 들어온다. */
.cva-aff { display: flex; flex-direction: column; gap: var(--sp-1); }
.cva-aff-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text); }
.cva-aff-btns { display: flex; gap: var(--sp-1); }
/* 폭은 9칸으로 나뉘어 360px에서 23px까지 내려간다. 원형(aspect-ratio:1)을 고수하면
   탭 영역이 23×23이라 권장치의 절반도 안 된다. 폭은 못 늘리니 높이로 벌어
   세로로 넉넉한 버튼을 만든다 — 숫자를 누르는 데 동그라미일 필요는 없다. */
.cva-aff-btns button {
  flex: 1 1 0; min-width: 0; min-height: 40px; border-radius: var(--r-chip); border: 1.5px solid var(--line);
  background: var(--surface); font-size: var(--fs-sm); font-family: inherit; cursor: pointer;
  color: var(--text-soft); padding: 0;
}
.cva-aff-btns button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary-text); font-weight: 700; }


.cva-summary {
  display: flex; flex-direction: column; gap: var(--sp-1);
  border-top: 1px dashed var(--line); margin-top: var(--sp-4); padding-top: var(--sp-3);
}
.cva-total { font-size: var(--fs-body); color: var(--text); }
.cva-total strong { font-size: var(--fs-2xl); color: var(--primary-text); font-variant-numeric: tabular-nums; }
.cva-total-sub { font-size: var(--fs-xs); color: var(--text-soft); }

.chip.cva-chip { background: var(--accent-soft); border-color: var(--chip-gold-line); color: #7D6128; font-weight: 700; }
:root[data-theme="dark"] .chip.cva-chip { color: var(--accent); }

/* 상세 시트 — 다시 볼 때가 본체다 */
.cva-detail { margin-top: var(--sp-3); }
.cva-d-score { font-size: var(--fs-body); color: var(--text); margin-bottom: var(--sp-3); }
.cva-d-score strong { font-size: var(--fs-4xl); color: var(--primary-text); font-variant-numeric: tabular-nums; }
.cva-d-score span { font-size: var(--fs-xs); color: var(--text-soft); margin-left: 2px; }
.cva-d-sec {
  font-size: var(--fs-xs); font-weight: 700; color: var(--brand);
  margin: var(--sp-3) 0 var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--line);
}
.cva-d-sec span { font-size: var(--fs-micro); font-weight: 400; color: var(--text-soft); margin-left: var(--sp-1); }
.cva-d-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; }
.cva-d-desc { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1) 0; }
.cva-d-desc .detail-chips { margin: 0; }
.cva-d-l { font-size: var(--fs-xs); color: var(--text-soft); width: 72px; flex-shrink: 0; }
.cva-d-bar { flex: 1; height: 6px; border-radius: var(--r-xs); background: var(--line); overflow: hidden; }
.cva-d-bar i { display: block; height: 100%; background: var(--primary); border-radius: var(--r-xs); }
.cva-d-v { font-size: var(--fs-xs); font-weight: 700; color: var(--primary-text); width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.cva-d-aff { font-size: var(--fs-sm); font-weight: 700; color: var(--primary-text); }
.cva-d-aff-sub { font-size: var(--fs-caption); font-weight: 400; color: var(--text-soft); margin-left: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  .cva-tags button, .cva-aff-btns button, }

/* ---------- 노트 향미 자동완성 (@) ---------- */
.fn-wrap { position: relative; }
.fn-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  margin: var(--sp-1) 0 0; padding: var(--sp-1); list-style: none;
  max-height: 208px; overflow-y: auto;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-btn); box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.fn-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-btn); cursor: pointer;
}
.fn-list li.on { background: var(--primary); }
.fn-term { font-size: var(--fs-body); color: var(--text); }
.fn-cat { font-size: var(--fs-caption); color: var(--text-soft); }
.fn-list li.on .fn-term, .fn-list li.on .fn-cat { color: var(--on-primary); }
.fn-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.fn-head label { margin-bottom: 0; }
.fn-btn {
  flex-shrink: 0; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  border: 1.5px dashed var(--line); background: var(--surface);
  font-size: var(--fs-caption); font-family: inherit; color: var(--text-soft); cursor: pointer;
}
.fn-btn:hover { border-style: solid; border-color: var(--accent); color: var(--text); }

/* ============================================================
   행사 회고 (EVENT_MODE_PLAN.md §7)
   ------------------------------------------------------------
   그룹 카드는 기록 카드(.card-sum)와 같은 구조를 쓴다 — 같은 리스트에 섞여
   있으므로 다른 규격을 쓰면 "다른 종류의 물건"으로 읽힌다. 차이는 왼쪽 아이콘과
   골드 좌측 보더뿐이고, 그 색은 행사 배너와 같은 신호다(P5).
   ============================================================ */
.card-event { border-left: 3px solid var(--accent); }
.egc-ic {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-btn);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.egc-ic svg { width: 18px; height: 18px; }
.egc-date {
  margin-top: 2px; font-size: var(--fs-xs); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- 행사 상세 ---- */
.event-detail-head { margin-bottom: var(--sp-3); }
/* 뒤로가기는 제목 위 독립된 줄에 둔다 — 제목 옆에 붙이면 행사 이름이 길 때
   버튼이 밀려 사라진다(행사명은 사용자가 직접 쓰는 자유 문자열이다). */
.ed-title {
  font-size: var(--fs-2xl); font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere;
}
.ed-summary {
  margin-top: var(--sp-1); font-size: var(--fs-body); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.ed-todo {
  margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-btn);
  background: var(--accent-soft); color: var(--accent-text);
  font-size: var(--fs-sm); font-weight: 700;
}

.ed-controls { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
/* 정렬 세그먼트는 2개뿐이라 가로를 다 먹을 이유가 없다 — 남는 자리는 필터 칩이 쓴다 */
.ed-controls .segment { flex: 0 1 auto; margin-bottom: 0; }
.ed-controls .segment button { flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.chip-toggle {
  flex: none; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--text-soft);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out),
              border-color 160ms var(--ease-out);
}
.chip-toggle[aria-pressed="true"] {
  background: var(--accent-soft); border-color: var(--chip-gold-line);
  color: var(--accent-text);
}
.chip-toggle:active { transform: scale(0.98); }

/* 상세 시트에서 뻗어 나가는 행동 하나 (행사 기록 → 원두 등록, §7.3).
   수정·삭제 줄과 분리한다 — 그쪽은 이 기록을 관리하는 일이고 이건 다른 걸 만드는 일이다. */
.detail-extra {
  display: block; width: 100%; margin-top: var(--sp-4);
  border-color: var(--chip-gold-line); color: var(--accent-text);
}
.detail-extra:disabled {
  opacity: 1;                      /* "이미 했다"는 상태 표시지 비활성 회색이 아니다 */
  border-color: var(--line); color: var(--text-soft);
  background: var(--surface-2); cursor: default;
}
/* 위 버튼이 이미 16px을 벌어 놨으므로 액션 줄은 붙여 놓는다 */
.detail-extra + .detail-actions { margin-top: var(--sp-2); }

/* ============================================================
   레이아웃 정렬 규칙
   콘텐츠 길이에 따라 flex 항목의 폭이 흔들리지 않도록, 열 맞춤이 필요한
   컴포넌트는 명시적인 grid 열을 사용한다.
   ============================================================ */

/* 빈 상태: 아이콘 뒤의 텍스트가 같은 줄에 붙지 않도록 각 요소를 한 행으로 고정 */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.empty .empty-icon {
  display: flex;
  margin: 0;
}
.empty-title, .empty-description {
  width: 100%;
  margin: 0;
}
.empty-description { color: var(--text-soft); }

/* 가이드 카드: 본문과 화살표가 카드마다 같은 열에서 끝난다 */
.guide-card .item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  column-gap: var(--sp-3);
}
.guide-card .card-chevron {
  width: 24px;
  display: grid;
  place-items: center;
  justify-self: end;
}

/* 동일한 선택지/행동은 콘텐츠 길이가 아니라 사용 가능한 폭을 똑같이 나눈다 */
.guide-card-actions,
.card-share-seg,
.modal-actions.equal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.guide-card-actions > button,
.card-share-seg > button,
.modal-actions.equal-actions > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

/* 맛 피드백: 라벨 열과 3개 선택지 열을 모든 행에서 동일하게 유지 */
.taste-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
}
.taste-label { width: auto; }
.taste-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  min-width: 0;
}
.taste-opts button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding-inline: var(--sp-2);
  white-space: nowrap;
}

/* 작은 중앙 모달에서는 라벨을 위로 올려 버튼 문구가 찌그러지지 않게 한다 */
@media (max-width: 380px) {
  .taste-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .modal-actions.equal-actions { grid-template-columns: 1fr; }
}

/* 기술어 접기 — 네이티브 <details>를 쓴다. summary가 aria-expanded와 키보드
   동작(Enter/Space)을 브라우저에서 이미 제공하므로 직접 구현할 이유가 없다. */
.cva-fold { margin: var(--sp-3) 0 var(--sp-2); }
.cva-fold > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) 0;
}
.cva-fold > summary::-webkit-details-marker { display: none; }
.cva-fold > summary::before { content: "▸"; color: var(--accent); font-size: var(--fs-caption); }
.cva-fold[open] > summary::before { content: "▾"; }
.cva-fold-l { font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); }
.cva-fold-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1); min-width: 0; }
.cva-fold-sel { font-size: var(--fs-xs); font-weight: 600; color: var(--primary-text); }
.cva-fold-more { font-size: var(--fs-caption); color: var(--text-soft); }
.cva-fold-none { font-size: var(--fs-xs); color: var(--text-soft); }
.cva-fold[open] > summary { margin-bottom: var(--sp-1); }

/* 기술어 2단 — 대분류 줄, 그 아래 고른 대분류의 세부 줄 */
.cva-cats { display: flex; flex-direction: column; gap: var(--sp-2); }
.cva-cat-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.cva-leaf-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-btn);
  background: var(--bg); border: 1px dashed var(--line);
}
.cva-leaf-row.hidden { display: none; }
/* 지금 펼친 대분류 — 세부 줄이 이 버튼 것임을 밑줄로 잇는다 */
.cva-cat-row button.open { box-shadow: inset 0 -2px 0 var(--gold-400); }
.cva-cat-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.cva-leaf-l { font-size: var(--fs-caption); font-weight: 600; color: var(--text-soft); width: 100%; }
.cva-leaf-row button { font-size: var(--fs-caption); padding: var(--sp-1) var(--sp-3); }
.cva-fold-count { font-size: var(--fs-caption); color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* 원두 카드는 오른쪽 편집·삭제 아이콘 때문에 글자 칸이 좁다(375px에서 199px).
   한 줄 말줄임이면 로스팅 정보가 잘리므로 원두 카드에서만 줄바꿈을 허용한다.
   마지막 브루·남은 양 전문은 상세(다이얼-인)에서 본다. */
.bean-open .item-meta { white-space: normal; }

/* 분쇄도 — [그라인더 ▾] [눈금 ▾] 단위, 한 줄. 둘 다 <select>라 폰에서 스크롤 휠로 고른다 */
.grind-row { display: flex; align-items: center; gap: var(--sp-2); }
.grind-row select, .grind-row .grind-text { flex: 1; min-width: 0; }
.grind-row [hidden] { display: none; }

/* 레시피 계산기 — 단계 편집기 아래 접이식 */
.step-calc { margin-top: var(--sp-3); border: 1.5px dashed var(--line); border-radius: var(--r-btn); padding: 0 var(--sp-3); }
.step-calc > summary { cursor: pointer; padding: var(--sp-3) 0; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); }
.step-calc[open] { padding-bottom: var(--sp-3); }
.step-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.step-calc-grid label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--text-soft); }
.step-calc-grid select, .step-calc-grid input {
  width: 100%; min-width: 0; padding: var(--sp-2) var(--sp-3); border: 1.5px solid var(--line); border-radius: var(--r-btn);
  font-size: var(--fs-body); font-family: inherit; background: var(--surface); color: var(--text);
}
.calc-remain { font-size: var(--fs-sm); font-weight: 600; color: var(--primary-text); margin: 2px 0 var(--sp-3); font-variant-numeric: tabular-nums; }
.grind-unit { font-size: var(--fs-body); color: var(--text-soft); min-width: 2em; }