:root {
  /* 플랫 · 소프트 주황 팔레트
     — 입체 효과와 굵은 테두리를 쓰지 않는다. 면과 여백으로만 구분한다.
     — 배경은 크림색이 아니라 밝은 회색이다. (크림+코랄 조합은 피한다)
     — 글씨 대비는 전부 4.5:1 이상으로 맞췄다. */
  --orange: #FF9A5A;         /* 연한 주황 — 칩·강조 채우기 (위에는 진한 글씨) */
  --orange-deep: #B25211;    /* 진한 주황 — 버튼 바탕·강조 글씨 (흰 글씨와 5.1:1) */
  --orange-soft: #FFF1E6;    /* 아주 연한 주황 면 */
  --orange-line: #FFD9BF;    /* 주황 계열 옅은 선 */
  --header-bg: #FFDCC4;      /* 헤더 파스텔 주황 */
  --header-label: #8F4210;   /* 헤더 위 작은 라벨 (5.5:1) */
  --header-sub: #5A4A3E;     /* 헤더 위 부제 (6.6:1) */

  --bg: #F6F6F7;             /* 페이지 배경 — 밝은 회색 */
  --surface: #FFFFFF;        /* 카드 */
  --ink: #33302E;            /* 본문 */
  --gray: #726C68;           /* 보조 글씨 */
  --line: #E8E7E6;           /* 아주 옅은 구분선 */

  --warn: #8A5A12;
  --warn-soft: #FDF6E7;
  --danger: #B93B37;
  --danger-soft: #FCEEEE;
  --green: #1F7A4C;

  --accent: var(--warn);   /* 별점 등 */

  /* 플랫이므로 그림자 없음 */
  /* 글꼴 세 가지 역할
     display — 제목. 둥근 고딕이라 미요의 둥근 실루엣과 맞는다.
     body    — 그 외 전부. 읽기 쉬운 게 최우선이다.
     미요의 목소리는 글씨체가 아니라 연주황 말풍선으로 구분한다.
     인터넷이 안 되면 자동으로 시스템 글꼴로 떨어진다. */
  --font-display: "Jua", "Pretendard", "Apple SD Gothic Neo", sans-serif;
  --font-body: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --pop: none;
  --pop-sm: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 140px;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

/* ── 헤더 ───────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--orange);
  border-bottom: 1px solid var(--line);
}
.header-miyo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  
}
.header-text h1 {
  margin: 0;
  font-size: 19px;
  color: #fff;
  letter-spacing: -.6px;
  line-height: 1.15;
}
.header-text h1 small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  opacity: .9;
  letter-spacing: 0;
  margin-bottom: 1px;
}

/* 파일을 못 불러왔을 때 뜨는 경고 띠 */
.boot-error {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--danger);
  color: #fff;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.boot-error.hidden { display: none; }
.boot-error button {
  border: none;
  background: #fff;
  color: var(--danger);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.speech {
  margin: 3px 0 0;
  font-size: 13px;
  color: #fff;
  opacity: .95;
  line-height: 1.35;
}

/* ── 화면 전환 ──────────────────── */
.screen { display: none; padding: 16px; }
.screen.active { display: block; }
.screen-title { margin: 4px 0 14px; font-size: 18px; }

/* ── 선택한 재료 바 ─────────────── */
.selected-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
}
.selected-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}
.text-btn {
  border: none;
  background: none;
  color: var(--gray);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.empty-hint { font-size: 13px; color: var(--gray); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.chip .x { font-weight: 700; opacity: .8; }
.pantry-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--gray);
  line-height: 1.4;
}

/* ── 자주 쓰는 재료 ─────────────── */
.popular-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
  margin-bottom: 18px;
}
.popular-title { margin: 0 0 10px; font-size: 15px; }
.tag.big { padding: 11px 16px; font-size: 15.5px; font-weight: 600; }

/* ── 요리 용어 도움말 ───────────── */
.term {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-bottom: 2px dotted var(--orange);
}
.term:active { background: var(--orange-soft); }
.term-box { text-align: left; }
.term-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.term-head img { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.term-head h2 { margin: 2px 0 0; font-size: 21px; }
.term-group { font-size: 11.5px; color: var(--orange-deep); font-weight: 700; }
.term-desc { font-size: 15.5px; line-height: 1.6; color: var(--ink); margin: 0 0 10px; }
.term-tip {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--orange-soft);
  border-radius: 10px;
  padding: 11px 12px;
  margin: 0 0 18px;
}
.term-tip:empty { display: none; }
.term-box .primary-btn { width: 100%; }

/* ── 이어서 요리하기 ────────────── */
.resume-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 13.5px;
  color: var(--green);
  margin-top: 14px;
}

/* ── 검색 ───────────────────────── */
.search-box { display: flex; gap: 8px; margin-bottom: 10px; }
.search-box input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  background: #fff;
  color: var(--ink);
}
.search-box input:focus { outline: 2px solid var(--orange); outline-offset: -1px; }
.add-btn {
  border: none;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.search-results { margin-bottom: 14px; }

/* ── 재료 카테고리 ──────────────── */
.category { margin-bottom: 18px; }
.category h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--ink);
}
.tag {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 14px;
  cursor: pointer;
  transition: .12s;
}
.tag:active { transform: scale(.95); }
.tag.on {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  font-weight: 600;
}

/* ── 미요의 처방 ────────────────── */
.prescription-box { margin-bottom: 16px; }
.rx-title { margin: 4px 0 10px; font-size: 16px; }
.rx-title span { font-size: 12.5px; font-weight: 400; color: var(--gray); margin-left: 4px; }
.rx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rx-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.rx-card:active { transform: scale(.98); border-color: var(--orange); }
.rx-emoji { font-size: 25px; line-height: 1.1; }
.rx-name { font-size: 14.5px; font-weight: 700; margin-top: 3px; }
.rx-desc { font-size: 11.5px; color: var(--gray); line-height: 1.4; word-break: keep-all; }
.rx-n { font-size: 11px; color: var(--orange-deep); font-weight: 700; margin-top: 4px; }

.rx-active {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--orange-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.rx-active img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.rx-active-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rx-active-text strong { font-size: 15px; }
.rx-speech { font-size: 12.5px; color: var(--ink); line-height: 1.4; word-break: keep-all; }
.rx-count { font-size: 11px; color: var(--orange-deep); font-weight: 700; }
.rx-clear {
  flex-shrink: 0;
  align-self: flex-start;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 11.5px;
  cursor: pointer;
  font-family: inherit;
  color: var(--gray);
}

/* ── 필터 ───────────────────────── */
.filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
}
.switch { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.switch input { width: 17px; height: 17px; accent-color: var(--orange); }
#cuisineFilter {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: var(--ink);
}

/* ── 레시피 카드 ────────────────── */
.recipe-list { display: flex; flex-direction: column; gap: 10px; }
.recipe-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}
.recipe-card:active { transform: scale(.99); }
.recipe-emoji { font-size: 32px; flex-shrink: 0; width: 62px; text-align: center; }
.recipe-thumb {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--line);
}
.recipe-info { flex: 1; min-width: 0; }
.recipe-name { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.recipe-meta { font-size: 12px; color: var(--gray); }
.missing { font-size: 12px; color: var(--danger); margin-top: 4px; }
.missing.ok { color: var(--green); }

/* 카카오맵 마커를 눌렀을 때 뜨는 말풍선(InfoWindow) 안 내용 */
.kakao-infowindow {
  padding: 7px 10px;
  font-size: 13px;
  font-family: sans-serif;
  white-space: nowrap;
}

/* ── 난이도 별 ──────────────────── */
.stars { letter-spacing: -1px; white-space: nowrap; }
.stars-on { color: var(--accent); }
.stars-off { color: var(--line); }
.detail-stars { margin-top: 5px; font-size: 15px; }
.detail-stars .level-word {
  font-size: 12.5px;
  color: var(--gray);
  margin-left: 6px;
  vertical-align: 1px;
}
.match-badge {
  flex-shrink: 0;
  width: 50px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--orange-deep);
}
.match-badge.full { color: var(--green); }
.match-badge small { display: block; font-size: 10px; font-weight: 500; color: var(--gray); }

/* ── 빈 상태 ────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state img { width: 130px; opacity: .9; }
.empty-state p { color: var(--gray); font-size: 14px; line-height: 1.6; margin-top: 8px; }

/* ── 상세 ───────────────────────── */
.back-btn {
  border: none;
  background: none;
  color: var(--gray);
  font-size: 14px;
  padding: 4px 0 12px;
  cursor: pointer;
  font-family: inherit;
}
.detail-hero { margin: 0 0 14px; }
.detail-hero img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--line);
  display: block;
}
.detail-hero figcaption {
  font-size: 10.5px;
  color: var(--gray);
  line-height: 1.5;
  margin-top: 6px;
  padding: 0 2px;
}
.detail-hero figcaption a { color: var(--gray); }
.hero-note { color: var(--gray); }

.detail-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.detail-head .recipe-emoji { font-size: 44px; }
.detail-head h2 { margin: 0 0 4px; font-size: 22px; }
.fav-btn {
  border: none;
  background: none;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin-left: auto;
}
/* ── 인분 선택 ──────────────────── */
.servings-row {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 4px;
}
.servings-label { font-size: 14.5px; font-weight: 700; }
.stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.stepper button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--orange-deep);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
}
.stepper button:active { background: var(--orange); color: #fff; }
.stepper button:disabled { border-color: var(--line); color: var(--line); cursor: default; }
.stepper b { font-size: 19px; min-width: 66px; text-align: center; }
.servings-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--gray);
  line-height: 1.45;
}
.servings-note b { color: var(--orange-deep); }

.serv-tag {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 5px;
  vertical-align: 1px;
}
.ing-amount.scaled { color: var(--orange-deep); font-weight: 700; }

.section-title { font-size: 15px; font-weight: 700; margin: 20px 0 10px; }
.ing-list { list-style: none; padding: 0; margin: 0; }
.ing-list li {
  display: flex;
  justify-content: space-between;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 14.5px;
}
.ing-list li.have { border-color: var(--green); }
.ing-list li.have .ing-name::before { content: "✅ "; }
.ing-list li.lack .ing-name::before { content: "⬜ "; }
.ing-list li.pantry .ing-name::before { content: "🧂 "; }
.ing-amount { color: var(--gray); font-size: 13px; }

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}
.step.done { opacity: .5; }
.step-top { display: flex; gap: 10px; align-items: flex-start; }
.step-no {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step.done .step-no { background: var(--green); }
.step-text { flex: 1; font-size: 15px; line-height: 1.55; }
.step-tip {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 9px 11px;
  background: var(--orange-soft);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
}
.step-tip img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.step-actions { display: flex; gap: 8px; margin-top: 11px; }
.timer-btn, .done-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 8px 13px;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}
.timer-btn { border-color: var(--orange); color: var(--orange-deep); font-weight: 600; }
.done-btn.on { background: var(--green); color: #fff; border-color: var(--green); }

.step-hint { font-size: 12px; font-weight: 400; color: var(--gray); }

/* ── 둘러보기 ───────────────────── */
.chip-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}
.filter-chip.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.browse-count { font-size: 12.5px; color: var(--gray); margin: 0 0 10px; }

/* ── 맛집 찾기 ──────────────────── */
.loc-bar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
}
.loc-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.loc-status { font-size: 13px; color: var(--gray); line-height: 1.4; }
.loc-status.ok { color: var(--green); font-weight: 600; }
.loc-status.warn { color: var(--danger); }
.loc-manual { margin: 10px 0 0; }

.opt-label {
  font-size: 12.5px;
  color: var(--gray);
  margin: 0 0 8px;
}
.opt-label span { color: var(--gray); }

.keyword-switch {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 14px;
  width: 100%;
}
.keyword-switch small {
  display: block;
  font-size: 12px;
  color: var(--orange-deep);
  font-weight: 700;
  margin-top: 3px;
}
.keyword-switch .mj-hint { color: var(--gray); font-weight: 400; }
.keyword-switch .mj-hint:empty { display: none; }
.keyword-switch.locked { opacity: .75; cursor: default; }
.keyword-switch.locked input { cursor: default; }

.map-links { margin-bottom: 16px; }
.map-links-help { font-size: 12.5px; color: var(--gray); margin: 0 0 8px; line-height: 1.45; }
.map-link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.map-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border-radius: 13px;
  padding: 14px 13px;
  text-decoration: none;
  color: #fff;
  word-break: keep-all;
}
.map-link:active { transform: scale(.98); }
.map-link b {
  font-size: 19px;
  line-height: 1.1;
  margin-bottom: 4px;
  font-weight: 800;
}
.ml-name { font-size: 14.5px; font-weight: 700; }
.ml-desc { font-size: 11.5px; opacity: .85; line-height: 1.35; }
.map-link.naver { background: #03c75a; }
.map-link.kakao { background: #fee500; color: #3c1e1e; }
.map-link.google { background: #4285f4; }
.map-link.bluer { background: #1a3a6b; }

.food-note {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding: 12px 13px;
  background: var(--orange-soft);
  border-radius: 14px;
}
.food-note img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.food-note p { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.5; word-break: keep-all; }

/* 키 발급 안내 패널 */
.key-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.key-panel.hidden { display: none; }
.key-help { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; color: var(--ink); }
.key-steps { margin: 0 0 12px; padding-left: 20px; font-size: 13.5px; line-height: 1.75; color: var(--ink); }
.key-steps a { color: var(--orange-deep); font-weight: 600; }
.key-warn {
  font-size: 11.5px;
  color: var(--gray);
  margin: 10px 0 0;
  line-height: 1.6;
  background: var(--orange-soft);
  border-radius: 9px;
  padding: 9px 11px;
}

/* ── 훈수미요에게 물어보기 ──────── */
.chat-head { display: flex; align-items: center; justify-content: space-between; }
.chat-head .screen-title { margin-bottom: 10px; }
.chat-head .text-btn { font-size: 19px; }

.chat-log {
  min-height: 42vh;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px 2px 8px;
  margin-bottom: 10px;
}
.chat-intro { text-align: center; padding: 26px 16px; }
.chat-intro img { width: 110px; }
.chat-intro p { font-size: 14px; color: var(--gray); line-height: 1.65; margin-top: 6px; word-break: keep-all; }

.msg { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-end; }
.msg.me { justify-content: flex-end; }
.msg.miyo img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.bubble {
  max-width: 78%;
  padding: 11px 13px;
  border-radius: 15px;
  font-size: 14.5px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.msg.me .bubble { background: var(--orange); color: #fff; border-bottom-right-radius: 4px; }
.msg.miyo .bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.typing span { animation: dots 1.2s infinite; }
.bubble.typing span:nth-child(2) { animation-delay: .2s; }
.bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes dots { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.chat-quick { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; }
.quick-chip {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.quick-chip:active { background: var(--orange-soft); border-color: var(--orange); }

.chat-input-bar { display: flex; gap: 8px; }
.chat-input-bar input {
  flex: 1;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  background: #fff;
  color: var(--ink);
}
.chat-input-bar input:focus { outline: 2px solid var(--orange); outline-offset: -1px; }
.chat-send {
  border: none;
  background: var(--orange);
  color: #fff;
  border-radius: 999px;
  padding: 0 20px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

/* ── 장보기 ─────────────────────── */
.shop-help {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.5;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  margin: 0 0 14px;
}
.shop-list { list-style: none; padding: 0; margin: 0 0 12px; }
.shop-item {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 7px;
  overflow: hidden;
}
.shop-item.done .shop-check { text-decoration: line-through; color: var(--gray); }
.shop-check {
  flex: 1;
  text-align: left;
  border: none;
  background: none;
  padding: 15px 14px;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
}
.shop-del {
  border: none;
  background: none;
  color: var(--line);
  font-size: 22px;
  padding: 0 16px;
  cursor: pointer;
  align-self: stretch;
}
.shop-done-title { font-size: 12.5px; color: var(--gray); margin: 16px 0 8px; }
.shop-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 20px; }
.shop-actions .primary-btn { width: 100%; }

.shop-add-btn {
  width: 100%;
  border: 1px dashed var(--orange);
  background: var(--orange-soft);
  color: var(--orange-deep);
  border-radius: 12px;
  padding: 13px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: 10px;
}
.shop-add-btn:disabled { border-style: solid; border-color: var(--green); color: var(--green); background: var(--orange-soft); }

/* ── 요리 시작 버튼 ─────────────── */
.cook-start-btn {
  width: 100%;
  border: none;
  background: var(--orange);
  color: #fff;
  border-radius: 14px;
  padding: 16px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 14px;
}
.cook-start-btn small { display: block; font-size: 12px; font-weight: 400; opacity: .9; margin-top: 4px; }

/* ── 요리 모드 (전체 화면) ──────── */
body.cooking { overflow: hidden; }
.cook-mode {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
.cook-mode.hidden { display: none; }
.cook-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  background: var(--orange);
  color: #fff;
}
.cook-title { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cook-exit {
  border: none;
  background: rgba(255,255,255,.25);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.cook-progress { height: 5px; background: var(--line); }
.cook-progress > div { height: 100%; background: var(--green); transition: width .25s; }

.cook-body {
  flex: 1;
  overflow-y: auto;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.cook-step-no { font-size: 14px; color: var(--gray); font-weight: 700; letter-spacing: 1px; }
.cook-text {
  font-size: 26px;
  line-height: 1.5;
  font-weight: 600;
  margin: 16px 0 0;
  word-break: keep-all;
}
.cook-tip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  margin-top: 22px;
  padding: 14px 15px;
  background: var(--orange-soft);
  border-radius: 14px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  max-width: 460px;
}
.cook-tip.hidden { display: none; }
.cook-tip img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }

.cook-timer-btn {
  margin-top: 24px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--orange-deep);
  border-radius: 999px;
  padding: 15px 28px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.cook-timer-btn.hidden { display: none; }
.cook-countdown {
  font-size: 46px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--orange-deep);
  margin-top: 12px;
  min-height: 10px;
}
.cook-countdown.ringing { color: #d1402c; animation: blink .7s infinite; font-size: 30px; }

.cook-nav { display: flex; gap: 10px; padding: 12px 16px; }
.cook-nav-btn {
  flex: 1;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 14px;
  padding: 20px 10px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.cook-nav-btn:disabled { color: var(--line); }
.cook-nav-btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; flex: 2; }
.cook-awake {
  text-align: center;
  font-size: 11.5px;
  color: var(--gray);
  margin: 0;
  padding: 0 16px 10px;
  min-height: 14px;
}

/* ── 타이머 트레이 ──────────────── */
.timer-tray {
  position: fixed;
  left: 0; right: 0;
  bottom: 62px;
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  background: rgba(47,42,38,.95);
  backdrop-filter: blur(6px);
}
.timer-tray.hidden { display: none; }
/* 요리 모드에서도 다른 단계의 타이머(밥솥 등)가 울리면 보여야 한다 */
body.cooking .timer-tray { z-index: 70; bottom: auto; top: 0; }
.timer-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 999px;
  padding: 7px 8px 7px 13px;
  font-size: 13px;
}
.timer-pill.ringing { background: var(--accent); animation: blink .7s infinite; }
@keyframes blink { 50% { opacity: .55; } }
.timer-pill .tname { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gray); }
.timer-pill .tleft { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.timer-pill button {
  border: none;
  background: var(--line);
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
  color: var(--ink);
}

/* ── 탭바 ───────────────────────── */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 8px 0 10px;
  font-size: 9.8px;
  letter-spacing: -.6px;
  color: var(--gray);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.tab-icon {
  display: block;
  width: 23px;
  height: 23px;
  margin: 0 auto 3px;
  stroke-width: 1.6;
}
.tab.active .tab-icon { stroke-width: 2; }
.tab b { font-size: 9.5px; }
.tab.active { color: var(--orange-deep); font-weight: 700; }
.tab b { color: var(--orange-deep); }

/* ── 모달 ───────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  /* 요리 모드(.cook-mode, 60)보다 낮으면(예전엔 50) 요리 중 용어를 눌러도
     설명 창이 요리 모드 뒤에 깔려서 안 보인다 — 열리긴 열렸는데 화면에
     안 보이는 상태. 요리 중 타이머 띠(body.cooking .timer-tray, 70)보다도
     위에 둬야 모달이 열렸을 때 확실히 맨 위로 온다. */
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  padding: 24px;
}
.modal.hidden { display: none; }
.modal-box {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  max-width: 320px;
  width: 100%;
}
.modal-box img { width: 140px; }
.modal-box h2 { margin: 6px 0; font-size: 20px; }
.modal-box p { color: var(--gray); font-size: 14px; margin: 0 0 18px; line-height: 1.5; }
.primary-btn {
  border: none;
  background: var(--orange);
  color: #fff;
  border-radius: 12px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ═══════════════════════════════════════
   화면 크기별 배치
   휴대폰은 한 줄로 쭉, 큰 화면은 가로를 넓게 써서
   세로 스크롤을 줄인다.
   ═══════════════════════════════════════ */

/* ── 태블릿·작은 노트북 (700px~) ── */
@media (min-width: 700px) {
  body { padding-bottom: 110px; }

  main { max-width: 1180px; margin: 0 auto; }
  .app-header { justify-content: center; }
  .screen { padding: 20px 22px; }

  /* 레시피 카드를 두 줄로 */
  .recipe-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .recipe-card { height: 100%; }
  /* "결과 없음" 안내는 칸 하나에 끼지 말고 전체 폭을 쓴다 */
  .recipe-list .empty-state { grid-column: 1 / -1; }

  /* 처방 카드도 한 줄에 더 많이 */
  .rx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 맛집 버튼 4개를 한 줄에 */
  .map-link-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 재료 카테고리를 두 칸으로 — 여기가 제일 길었다 */
  #categoryList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    /* 칸을 늘리지 않는다. 이게 없으면 격자는 같은 줄의 카드를
       제일 높은 카드에 맞춰 늘려서, 채소를 펼치면 옆의 육류·계란까지
       덩달아 길어지고 아래가 흰 빈칸이 된다. */
    align-items: start;
  }

  /* 탭바를 가운데 모으고 글씨를 키운다 (7개가 빽빽하지 않게) */
  .tabbar {
    max-width: 1180px;
    margin: 0 auto;
    border-radius: 14px 14px 0 0;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
  .tab { font-size: 12.5px; letter-spacing: -.2px; padding: 11px 0 13px; }
  .tab-icon { width: 25px; height: 25px; }
  .tab b { font-size: 11px; }

  .timer-tray { max-width: 1180px; margin: 0 auto; border-radius: 12px 12px 0 0; }

  .chat-log { max-height: 46vh; }
  .bubble { max-width: 62%; }
}

/* ── 데스크톱 (1000px~) ── */
@media (min-width: 1000px) {
  .screen { padding: 24px 26px; }

  /* 레시피 카드 세 줄 */
  .recipe-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* 레시피 상세: 왼쪽 사진·재료 / 오른쪽 조리 순서 */
  .detail-cols {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
  }
  /* 왼쪽은 스크롤해도 따라오게 — 조리 순서를 보면서 재료를 확인할 수 있다 */
  .detail-left { position: sticky; top: 96px; }
  .detail-right .section-title { margin-top: 0; }

  .detail-hero img { height: 240px; }

  /* 조리 단계도 두 줄로 놓아 한눈에 흐름이 보이게 */
  .detail-right .step { break-inside: avoid; }

  .cook-text { font-size: 32px; }
  .cook-tip { font-size: 16px; }
}

/* ── 넓은 데스크톱 (1400px~) ── */
@media (min-width: 1400px) {
  main, .tabbar, .timer-tray { max-width: 1320px; }
  .recipe-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detail-cols { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
}

/* ── 가로로 누운 휴대폰 ── */
@media (max-height: 500px) and (orientation: landscape) {
  .cook-text { font-size: 20px; margin-top: 8px; }
  .cook-body { padding: 12px 20px; }
  .cook-tip { margin-top: 10px; padding: 8px 10px; font-size: 13px; }
  .cook-countdown { font-size: 30px; }
  .cook-nav-btn { padding: 12px 10px; font-size: 15px; }
}

/* ═══════════════════════════════════════
   플랫 마무리
   — 입체 효과·굵은 테두리를 쓰지 않는다.
   — 구분은 여백과 옅은 면(연민트/연회색)으로만 한다.
   ═══════════════════════════════════════ */

body { background: var(--bg); }

/* 헤더 — 흰 면에 옅은 선 하나 */
.app-header { background: var(--header-bg); border-bottom: none; }
.header-text h1, .speech { color: var(--ink); }
.header-text h1 small { color: var(--header-label); opacity: 1; font-weight: 600; }
.speech { opacity: 1; color: var(--header-sub); }
.header-miyo { cursor: pointer; }

/* 주요 버튼 — 진한 민트 채우기 + 흰 글씨, 그림자 없음 */
.primary-btn,
.cook-start-btn,
.chat-send,
.add-btn {
  background: var(--orange-deep);
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 12px;
}
.primary-btn:active,
.cook-start-btn:active,
.chat-send:active,
.add-btn:active { opacity: .82; }
.cook-start-btn { border-radius: 14px; }
.cook-start-btn small { opacity: .85; }

/* 선택 상태 — 연민트 면 + 진한 민트 글씨 */
.tag.on, .filter-chip.on {
  background: var(--orange-soft);
  color: var(--orange-deep);
  border: 1px solid var(--orange-deep);
  font-weight: 600;
}
.chip {
  background: var(--orange-soft);
  color: var(--ink);
  border: 1px solid var(--orange-line);
  font-weight: 500;
}
.tag, .filter-chip, .quick-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  font-weight: 400;
}
.tag:active, .filter-chip:active, .quick-chip:active { background: var(--orange-soft); }

/* 카드 — 그림자 없이 흰 면 + 옅은 선 */
.recipe-card, .rx-card, .place-card, .shop-item, .step, .selected-bar,
.popular-box, .loc-bar, .key-panel, .ed-step, .settings-list {
  background: var(--surface);
  border: 1px solid var(--line);
}
.recipe-card:active, .rx-card:active { background: var(--orange-soft); }

/* 별점 */
.stars-on { color: var(--warn); -webkit-text-stroke: 0; }
.stars-off { color: var(--line); }
.place-rating { color: var(--orange-deep); background: none; padding: 0; font-weight: 700; }

/* 미요가 말하는 자리 — 연민트 면, 테두리 없이 */
.step-tip, .cook-tip, .term-tip, .rx-active, .food-note {
  background: var(--orange-soft);
  color: var(--ink);
  border: none;
}

/* 안내 상자 */
.key-warn, .shop-help, .pantry-note {
  background: var(--orange-soft);
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--gray);
}

/* 탭바 */
.tabbar { border-top: 1px solid var(--line); background: var(--surface); }
.tab { color: var(--gray); }
.tab.active { color: var(--orange-deep); background: none; font-weight: 600; }

/* 입력칸 */
.search-box input, .chat-input-bar input, #cuisineFilter, .ed-input {
  border: 1px solid var(--line);
  background: var(--surface);
}
.search-box input:focus, .chat-input-bar input:focus, .ed-input:focus {
  outline: 2px solid var(--orange);
  outline-offset: 0;
  border-color: var(--orange);
}

/* 대화 말풍선 */
.msg.me .bubble { background: var(--orange-deep); color: #fff; border: none; font-weight: 400; }
.msg.miyo .bubble { background: var(--surface); border: 1px solid var(--line); }

/* 요리 모드 */
.cook-progress { border-bottom: 1px solid var(--line); background: var(--line); }
.cook-progress > div { background: var(--orange-deep); }
.cook-top { border-bottom: 1px solid var(--line); background: var(--surface); }
.cook-title { color: var(--ink); }
.cook-exit { background: var(--bg); color: var(--gray); border: 1px solid var(--line); }
.cook-mode { background: var(--bg); }
.cook-nav-btn { border: 1px solid var(--line); background: var(--surface); }
.cook-nav-btn.primary { background: var(--orange-deep); color: #fff; border-color: var(--orange-deep); }
.cook-timer-btn { border: 1px solid var(--orange-deep); background: var(--surface); color: var(--orange-deep); }
.cook-countdown { color: var(--orange-deep); }

/* 타이머 표시줄 */
.timer-tray { background: var(--ink); border-top: none; }
.timer-pill { border: none; }
.timer-pill.ringing { background: var(--warn-soft); }

/* 모달 */
.modal-box { border: none; border-radius: 18px; }

/* 내 레시피 */
.mine-tag {
  background: var(--orange-soft);
  border: none;
  color: var(--orange-deep);
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 6px;
}
.edit-btn { border: 1px solid var(--line); background: var(--surface); color: var(--orange-deep); font-weight: 600; }
.ed-star.on { color: var(--warn); -webkit-text-stroke: 0; }
.ed-add { border: 1.5px dashed var(--orange-line); color: var(--orange-deep); background: var(--surface); }
.ed-del { border: 1px solid var(--line); color: var(--gray); font-weight: 500; }
.sheet-close { border: 1px solid var(--line); background: var(--surface); color: var(--gray); }
.term { border-bottom: 1.5px dotted var(--orange-deep); }
.term:active { background: var(--orange-soft); }
.map-link { border: none; }

/* ── 글씨 키우기 ────────────────────
   부엌에서 폰을 멀리 두고 보므로 작은 글씨를 올린다.
   본문 13px 이상, 보조 설명 12px 이상. */
.pantry-note, .rx-desc, .rx-n, .term-group, .hero-note,
.detail-hero figcaption, .browse-count, .key-warn, .place-addr,
.cook-awake, .servings-note, .serv-tag, .step-hint, .ml-desc,
.map-links-help, .opt-label, .shop-done-title, .mj-hint {
  font-size: 12.5px;
}
.recipe-meta, .missing, .rx-speech, .term-tip, .step-tip,
.shop-help, .quick-chip, .place-meta, .keyword-switch small {
  font-size: 13px;
}
.recipe-name { font-size: 16.5px; }
.rx-name { font-size: 15px; }
.tab { font-size: 10.5px; }

/* 아주 작은 화면(320px대 구형폰) — 탭 6개가 겨우 들어가도록 한 단계 더 줄인다 */
@media (max-width: 359px) {
  .tab { font-size: 9.5px; letter-spacing: -.8px; }
  .tab-icon { width: 21px; height: 21px; }
  .screen { padding: 14px 12px; }
}

/* 검색칸이 테두리 두께 때문에 몇 px 넘치던 것 */
.search-box { min-width: 0; }
.search-box input { min-width: 0; }

/* ── 설정 시트 (내 데이터) ──────── */
.settings-box { text-align: left; max-width: 420px; max-height: 86vh; overflow-y: auto; }
.settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.settings-head h2 { margin: 0; font-size: 19px; }
.sheet-close {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  width: 32px; height: 32px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.settings-notice {
  background: var(--orange-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.settings-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-size: 13.5px;
  border-bottom: 1.5px solid var(--line);
}
.settings-row:last-child { border-bottom: none; }
.settings-secret { margin-bottom: 12px; display: flex; align-items: flex-start; }
.settings-secret small { display: block; font-size: 12px; color: var(--gray); line-height: 1.45; margin-top: 3px; }
.settings-divider { height: 2.5px; background: var(--line); margin: 18px 0; border-radius: 2px; }
.primary-btn.wide { width: 100%; }
.file-input {
  width: 100%;
  font-size: 13px;
  padding: 10px;
  border: 1.5px dashed var(--orange-line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  margin-bottom: 10px;
}
.import-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--warn-soft);
  font-size: 13.5px;
  line-height: 1.55;
}
.import-items { color: var(--gray); font-size: 12.5px; margin: 5px 0 8px; }
.import-warn { margin: 0 0 10px; font-size: 12.5px; color: var(--danger); line-height: 1.5; }
.import-error {
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 13.5px;
  line-height: 1.5;
}
.danger-text { color: var(--danger); font-size: 13px; text-decoration: underline; }
.privacy-link { display: block; text-align: center; text-decoration: none; }

/* ── 재료 칩 ───────────────────── */
.chip { padding: 0; overflow: hidden; }
.chip-name {
  display: inline-block;
  color: inherit;
  font: inherit;
  padding: 7px 4px 7px 11px;
}
.chip-x {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 7px 11px 7px 4px;
  font-weight: 800;
}

/* ── 내 레시피 쓰기 ─────────────── */
.browse-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.browse-head .browse-count { margin: 0; }
.browse-head .add-btn { padding: 9px 13px; }

.mine-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  vertical-align: 2px;
}
.edit-btn {
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  margin-left: 6px;
  white-space: nowrap;
}

.ed-label { display: block; font-size: 13.5px; font-weight: 700; margin: 16px 0 6px; }
.ed-label small { font-weight: 400; color: var(--gray); font-size: 12px; margin-left: 4px; }
.ed-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
.ed-input:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
textarea.ed-input { resize: vertical; line-height: 1.5; }
.ed-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-row .ed-label { margin-top: 16px; }

.ed-stars { display: flex; align-items: center; gap: 4px; }
.ed-star {
  border: none;
  background: none;
  font-size: 27px;
  cursor: pointer;
  color: var(--line);
  padding: 0 1px;
  line-height: 1;
}
.ed-star.on { color: var(--accent); -webkit-text-stroke: 1px var(--ink); }
.ed-level-word { font-size: 13px; color: var(--gray); margin-left: 8px; }

.ed-item { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; margin-bottom: 7px; }
.ed-step {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  margin-bottom: 9px;
  background: #fff;
}
.ed-step-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 13.5px; }
.ed-step .ed-input { margin-bottom: 6px; }
.ed-step .ed-row { gap: 6px; }
.ed-del {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  width: 38px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  color: var(--danger);
  font-weight: 800;
}
.ed-add {
  width: 100%;
  border: 1.5px dashed var(--orange-line);
  background: #fff;
  border-radius: 12px;
  padding: 11px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  margin-top: 4px;
}
.ed-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; }


/* ── 플랫 마감 손질 ────────────────
   면과 여백으로만 구분하고, 모서리는 넉넉히 둥글게. */
.recipe-card, .rx-card, .place-card, .step, .selected-bar,
.popular-box, .loc-bar, .key-panel, .ed-step,
.settings-list, .shop-item, .map-link, .modal-box {
  border-radius: 16px;
}
.tag, .filter-chip, .quick-chip, .chip { border-radius: 999px; }
.primary-btn, .add-btn, .cook-nav-btn, .ed-add, .ed-input,
.search-box input, .chat-input-bar input { border-radius: 12px; }
.chat-input-bar input, .chat-send { border-radius: 999px; }

/* 화면 제목은 담백하게 */
.screen-title { font-weight: 700; letter-spacing: -.3px; }

/* 카드 사이 간격을 조금 넓혀 선 없이도 구분되게 */
.recipe-list { gap: 9px; }

/* 상세 사진도 둥글게 */
.detail-hero img, .recipe-thumb { border-radius: 14px; }
.recipe-thumb { border-radius: 12px; }

/* 진행 막대 */
.cook-progress { height: 4px; }

/* 스위치·체크박스도 민트로 */
.switch input { accent-color: var(--orange-deep); }


/* 안내문이 어절 중간에서 잘리지 않게 */
.pantry-note, .shop-help, .key-help, .key-warn,
.map-links-help, .servings-note, .opt-label { word-break: keep-all; }

/* 자주 쓰는 재료 태그 — 너무 두껍지 않게 (플랫 톤에 맞춤) */
.tag.big { font-weight: 500; font-size: 15px; padding: 10px 15px; }

/* 섹션 제목 — 이모지를 뺀 만큼 글씨로 위계를 만든다 */
.popular-title, .category h3, .rx-title, .section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: -.2px;
}
.category h3 { margin-bottom: 9px; }
.rx-title span { color: var(--gray); font-weight: 400; }

/* 상세 화면 제목은 크게 */
.detail-head h2 { font-size: 23px; letter-spacing: -.5px; }


/* ═══════════════════════════════════════
   글꼴 — 미요가 말하면 손글씨
   ═══════════════════════════════════════ */

body { font-family: var(--font-body); }

/* 제목류: 둥근 고딕 */
.header-text h1,
.screen-title,
.detail-head h2,
.rx-name,
.recipe-name,
.term-head h2,
.settings-head h2,
.cook-title,
.editorTitle,
#editorTitle,
.modal-box h2 {
  font-family: var(--font-display);
  font-weight: 400;      /* Jua는 한 굵기뿐이라 굵게 지정하면 가짜 볼드가 된다 */
  letter-spacing: -.2px;
}
.header-text h1 { letter-spacing: 0; }

/* 제목 크기도 Jua에 맞춰 미세 조정 */
.header-text h1 { font-size: 21px; }
.screen-title { font-size: 19px; }
.detail-head h2 { font-size: 25px; }
.rx-name { font-size: 16px; }
.recipe-name { font-size: 17px; }

/* 숫자·라벨은 본문 글꼴 유지 (손글씨로 숫자를 쓰면 읽기 어렵다) */
.match-badge, .recipe-meta, .rx-n, .cook-countdown,
.stepper b, .serv-tag, .place-meta {
  font-family: var(--font-body);
}


/* ── 점검 반영 ──────────────────────
   맛집 버튼이 화면에서 가장 시끄러웠다. 부차 기능인데 시선을 먼저 가져간다.
   각 서비스 색은 글자와 테두리에만 남기고 바탕은 흰색으로 낮춘다. */
.map-link {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}
.map-link b { font-size: 17px; }
.map-link .ml-name { font-weight: 600; }
.map-link .ml-desc { color: var(--gray); }
.map-link.naver  { background: var(--surface); border-color: #A8E5C2; }
.map-link.naver b  { color: #04A64B; }
.map-link.kakao  { background: var(--surface); border-color: #F5DF8A; color: var(--ink); }
.map-link.kakao b  { color: #7A6100; }
.map-link.google { background: var(--surface); border-color: #B9D2F8; }
.map-link.google b { color: #2B62C7; }
.map-link.bluer  { background: var(--surface); border-color: #B7C4DA; }
.map-link.bluer b  { color: #1a3a6b; }
.map-link:active { background: var(--orange-soft); }

/* "맛집 붙이기" 스위치가 버튼만큼 커서 중요도가 과장돼 보였다. 한 줄로 낮춘다. */
.keyword-switch { padding: 9px 12px; background: none; border: none; }
.keyword-switch span { font-size: 13px; color: var(--gray); }
.keyword-switch small { display: inline; margin-left: 6px; }

/* 미요챗 — 캐릭터와 대화하는 곳인데 첫 화면이 설정 폼이었다. 미요를 먼저 보여준다. */
.chat-needkey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--orange-soft);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--ink);
}
.chat-needkey button {
  flex-shrink: 0;
  border: none;
  background: var(--orange-deep);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}

/* 미요 답변을 레시피로 옮기는 버튼 */
.save-recipe-btn {
  display: block;
  margin-top: 9px;
  border: 1px solid var(--orange-line);
  background: var(--orange-soft);
  color: var(--orange-deep);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
}
.save-recipe-btn:disabled { opacity: .6; cursor: default; }

/* ── 음성으로 단계 넘기기 ───────── */
.cook-top-btns { display: flex; gap: 7px; align-items: center; flex-shrink: 0; }
.voice-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--gray);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}
.voice-btn.on {
  background: var(--orange-deep);
  color: #fff;
  border-color: var(--orange-deep);
  animation: listening 1.6s ease-in-out infinite;
}
@keyframes listening { 50% { opacity: .72; } }
.cook-awake.ok { color: var(--orange-deep); font-weight: 600; }
.cook-awake.warn { color: var(--danger); }

/* 움직임을 줄이는 설정을 켠 사람에게는 깜빡이지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .voice-btn.on, .timer-pill.ringing, .bubble.typing span,
  .cook-countdown.ringing { animation: none; }
  * { transition: none !important; }
}

/* ── 내가 찍은 사진 ─────────────── */
.detail-hero.no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--orange-soft);
  border-radius: 16px;
  padding: 34px 20px;
  margin-bottom: 14px;
}
.recipe-emoji.big { font-size: 56px; width: auto; }
.photo-btn {
  display: inline-block;
  border: 1px solid var(--orange-line);
  background: var(--surface);
  color: var(--orange-deep);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  margin-left: 6px;
}
.photo-btn input { display: none; }
.detail-hero figcaption .photo-btn { margin-left: 8px; }
.my-photo-tag {
  color: var(--orange-deep);
  background: var(--orange-soft);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11.5px;
}

/* ── 앱 안 지도 (카카오) ────────── */
.map-box { margin-bottom: 16px; }
.map-box.hidden { display: none; }
.kakao-map {
  width: 100%;
  height: 300px;
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--line);
}
.place-list { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.place-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 13px;
  cursor: pointer;
}
.place-row:active { background: var(--orange-soft); }
.place-main { flex: 1; min-width: 0; }
.place-name { font-size: 15px; font-weight: 600; }
.place-meta { font-size: 12.5px; color: var(--gray); margin-top: 2px; }
.place-addr { font-size: 12px; color: var(--gray); margin-top: 2px; }
/* 평점 보러 가는 두 버튼.
   평점 자체는 앱 안으로 못 가져오므로(카카오가 안 주고, 남의 평점 페이지를
   읽는 건 브라우저가 막는다) 그 가게 평점 화면으로 데려다주는 역할만 한다.
   아래쪽 동네 전체 바로가기(.map-link)와 같은 색 규칙을 써서 같은 성격임을 보인다. */
.place-rates {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}
.place-rate {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  text-decoration: none;
  white-space: nowrap;
}
.place-rate b { font-size: 13.5px; margin-right: 1px; }
.place-rate.kakao { border-color: #F5DF8A; }
.place-rate.kakao b { color: #7A6100; }
.place-rate.naver { border-color: #A8E5C2; }
.place-rate.naver b { color: #04A64B; }
.place-rate:active { background: var(--orange-soft); }

/* 좁은 화면에서는 가게 이름이 눌려 두 줄이 된다. 버튼을 아래로 내린다. */
@media (max-width: 420px) {
  .place-row { flex-wrap: wrap; }
  .place-main { flex: 1 1 100%; }
  .place-rates { width: 100%; }
  .place-rate { flex: 1; text-align: center; }
}
/* 키가 되는지 안 되는지 그 자리에서 알려주는 줄 */
.key-status { display: none; }
.key-status.on {
  display: block;
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--gray);
}
.key-status.ok { background: #EEF7F1; color: var(--green); }
.key-status.warn { background: var(--warn-soft); color: var(--warn); }
.key-status b { font-weight: 700; }
.key-actions { display: flex; gap: 14px; align-items: center; margin-top: 6px; }

.key-origin {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 12.5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  margin-top: 4px;
  word-break: break-all;
}

@media (min-width: 700px) {
  .kakao-map { height: 380px; }
  .place-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* ── 재료 카테고리 접기 ─────────── */
.category {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
}
.cat-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: none;
  background: none;
  padding: 14px 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  text-align: left;
}
.cat-head:active { background: var(--orange-soft); }
.cat-emoji { font-size: 17px; line-height: 1; }
.cat-name { font-size: 15px; font-weight: 600; flex: 1; }
.cat-count {
  background: var(--orange-soft);
  color: var(--orange-deep);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
}
.cat-arrow { color: var(--gray); font-size: 15px; width: 14px; text-align: center; }
.cat-body { padding: 0 14px 14px; }
.cat-picked {
  padding: 0 14px 13px;
  font-size: 12.5px;
  color: var(--orange-deep);
  line-height: 1.5;
  word-break: keep-all;
}

/* 지도 설정 — 기본 키가 있을 때의 접이식 안내 */
.key-more summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--gray);
  padding: 6px 0;
}
.key-more[open] summary { margin-bottom: 8px; }