/* ============================================================================
   [레이아웃 방침] 모바일 단일 레이아웃 (2026-07-20 결정)
   방문자 대부분이 스마트폰이라, 데스크탑용 별도 레이아웃을 없애고 "폰 화면 하나"로
   통일함. 데스크탑에서도 폰 화면이 가운데(폭 440px)에 놓이고 양옆은 배경 여백.
   → 수정은 한 곳만 하면 폰·데스크탑에 동시 반영됨.

   구현 방식:
   - 예전 모바일 규칙 @media (max-width: 640/767/900px) → @media all 로 바꿔 "항상 적용".
   - 앱 폭은 .topbar-inner / .main 의 max-width: 440px 하나로 조절(이 숫자만 바꾸면 폭 변경).
   - @media (hover: hover) = 마우스 올렸을 때만 나오는 잔효과(카드 살짝 뜸). 레이아웃 아님, 유지.
   - @media (min-width: 100000px) = 절대 적용 안 됨(옛 데스크탑 전용 가챠 확대를 비활성화한 흔적).
   ============================================================================ */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;   /* 터치 시 검정 음영 전역 제거(2026-07-24) — 앱은 자체 눌림 피드백 사용 */
  /* 🔴 절대 규칙(2026-07-24, 사용자 확정): 이 사이트는 어디서도 스크롤바를 보이지 않는다.
     스크롤 기능은 그대로고 막대만 안 보인다. 새 스크롤 영역을 만들 때 따로 처리할 필요 없음(전역 상속).
     ⚠️ 개별 요소에 scrollbar-width/::-webkit-scrollbar를 다시 쓰지 말 것 — 여기서 이미 끝났다. */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* 구 Edge */
}
*::-webkit-scrollbar {          /* Safari·Chrome */
  display: none;
}

/* 화면에는 안 보이지만 스크린리더·검색엔진은 읽는 텍스트 (2026-07-30 신설, SEO·접근성용).
   🔴 display:none이나 visibility:hidden을 쓰면 안 된다 — 그건 스크린리더도 못 읽어서 목적이 사라진다.
   1px 크기로 잘라내는 이 방식이 표준이다.
   ⚠️ 여기에 검색어를 잔뜩 채워 넣지 말 것. 화면 내용과 어긋나는 숨은 텍스트는 구글이 속임수로
   본다. 화면에 있는 것을 정확히 설명하는 문장만 넣는다. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 로고("하딜고고")에 쓰이는 3글자만 자체 호스팅 — 외부 CDN(fonts-archive) 의존 제거 */
@font-face {
  font-family: 'Paperlogy';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('assets/fonts/Paperlogy-5Medium.subset.111.woff2') format('woff2');
  unicode-range: U+B51C;
}
@font-face {
  font-family: 'Paperlogy';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('assets/fonts/Paperlogy-5Medium.subset.119.woff2') format('woff2');
  unicode-range: U+ACE0, U+D558;
}

/* 자주 쓰는 색 이름표(변수). 색을 바꾸려면 여기 한 곳만 고치면 전체에 반영됨 */
:root {
  --brand-red: #E0301E;        /* 메인 브랜드 빨강 (버튼·강조·아이콘) */
  --brand-red-hover: #CC2A1A;  /* 버튼 hover 시 진해지는 빨강 */
  --brand-red-active: #B42416; /* 버튼 누를 때(press) 더 진한 빨강 */
  --brand-red-dark: #A83226;   /* 진한 빨강 (푸터 제목 등) */
  --logo-red-active: #A80014;  /* 로고 hover/press 시 진한 빨강 */
  --card-hover-border: #D98476; /* 카드 hover/누름 테두리 (로즈 레드) */
  --card-border: #E6D4BA;       /* 카드 기본 테두리 (크림) */
  --bg-card: #FCF9F5;         /* 페이지·상단바·상태바 공통 배경 = 오프화이트(2026-07-20 확정). 이전=크림 #F4E9E0 */
  --bg-cream: #F5EFEC;         /* 밝은 크림 배경 */
  --text-dark: #2B120D;        /* 기본 진한 글자색 */
  --text-darkest: #241C18;     /* 가장 진한 글자색 */
  --text-muted: #9A8A83;       /* 흐린 회갈색 글자 */
}

/* iOS Safari fills the elastic overscroll/bounce area with the flat
   background-color, ignoring any background-image/gradient. Keep this
   cream so pull-to-refresh never flashes brand-red. */
html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  background-color: var(--bg-card);
  /* overflow-y는 auto여야 한다(2026-07-24). 예전엔 scroll이었는데, 그건 "스크롤바가 생겼다 사라지며
     15px씩 폭이 밀리는 것"을 막으려던 장치였다. 전역 스크롤바 숨김(맨 위 * 규칙) 이후 막대 폭이 늘 0이라
     그 목적이 사라졌고, scroll은 내용이 화면에 다 들어와도 html을 스크롤 영역으로 만들어서
     발도장·메뉴 빈 화면처럼 내릴 게 없는 탭에서도 폰이 고무줄처럼 딸려 움직였다.
     ⚠️ 가로 클리핑(overflow-x:hidden)은 body가 아니라 여기(html)에 둠 — body에 두면 body가
     중간 스크롤 컨테이너가 되어 상단바 position:sticky가 붙을 기준을 잃고 같이 밀려 올라감.
     html이 유일한 스크롤 컨테이너여야 sticky 상단바가 정상 동작함(auto로 바꿔도 sticky는 정상 확인). */
  overflow-x: hidden;
  overflow-y: auto;
}

/* 발도장 시트·기록보기 모달이 열린 동안 뒤 화면 스크롤 잠금(JS가 붙였다 뗌).
   body가 아니라 html에 거는 이유는 위 주석과 같다 — html이 유일한 스크롤 컨테이너.
   scrollbar-gutter:stable 덕에 스크롤바 트랙이 꺼져도 폭이 안 흔들린다. */
html.is-locked {
  overflow-y: hidden;
}

body {
  margin: 0;
  overscroll-behavior-y: none;
  background-color: var(--bg-card);
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--text-dark);
  /* overflow-x: hidden 은 html로 옮김(위 참고) — body를 스크롤 컨테이너로 만들면 sticky 상단바가 깨짐 */
  touch-action: manipulation;
}

/* 사이트 전 이미지 저장 방지 — 모바일 꾹 누르기(iOS 콜아웃)·드래그·선택 차단.
   로고·카드/모달 썸네일·발도장 스티커·아이콘 전부 한 곳에서 커버(새 이미지도 자동).
   데스크톱 우클릭 차단은 script.js의 contextmenu 리스너가 담당.
   ⚠️ 완벽한 보호 아님(개발자도구·네트워크로 우회 가능) — 무심코 저장하는 것만 억제. */
img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.page {
  /* 🔴 100vh 쓰지 말 것(2026-07-24). iOS Safari의 100vh는 "주소창이 숨겨진 상태"의 큰 높이라,
     주소창이 떠 있는 동안 페이지가 화면보다 ~100px 커져서 발도장·메뉴처럼 내용이 짧은 탭도
     그만큼 스크롤됐다(데스크탑에선 100vh=창높이라 재현 안 됨 → 폰에서만 보이던 버그).
     svh = 주소창이 보이는 상태 기준(가장 작은 뷰포트)이라 어떤 경우에도 넘치지 않는다.
     위 100vh 줄은 svh를 모르는 구형 브라우저용 폴백이므로 남겨둔다. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
}

/* TOP BAR */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px 0;
  background: #FCF9F5; /* 불투명 단색 = 폰 상태바(theme-color)와 정확히 일치 → 위쪽 경계선 제거. 원래=반투명 rgba(250,245,239,.92)+blur(10px)(스크롤 시 상태바와 톤 어긋나 선 보임) */
  border-bottom: 1px solid #ECE5DC; /* 은은한 회백색 구분선(오프화이트와 자연스럽게). 이전=분홍 #F7DCD3 */
}

.topbar-inner {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0 20px; /* 앱 고정폭 440 기둥 → 가로 패딩도 고정(5vw는 모니터 넓으면 40까지 커져 로고↔히어로 정렬 어긋남, 2026-07-21) */
  display: flex;
  align-items: center;
  gap: 26px;
}

.topbar-brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  /* 로고가 든 줄의 높이를 권장 터치 영역(44px)에 맞춰 고정 → 레시피(탭·검색 있음)든
     매장(제목만)이든 로고가 늘 같은 높이 줄에서 중심을 잡아, 탭 전환 시 로고가 위아래로 안 움직임.
     ⚠️ 값은 상단바에서 제일 큰 컨트롤(.tabs) 높이와 맞춰야 함 — 탭 크기 바꾸면 이 값도 같이 확인. */
  min-height: 44px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 꾹 눌러도 로고 이미지 저장·「하딜고고」 글자 선택 콜아웃 안 뜨게 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.topbar-logo-mark {
  display: block;
  width: 25px;
  height: 22px;
  object-fit: contain;
  flex: none;
  pointer-events: none;
}

.topbar-title {
  font-family: 'Paperlogy', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--brand-red);
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .15s;
}

@media (hover: hover) {
  .topbar-brand:hover .topbar-title {
    color: var(--logo-red-active);
  }
}

.topbar-brand:active .topbar-title {
  color: var(--logo-red-active);
}

.tabs-group {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
}

.topbar-spacer {
  flex: 1;
}

.tabs {
  position: relative;
  flex: none;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.tabs-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand-red);
  border-radius: 1px;
  transition: transform .25s ease, width .25s ease;
  pointer-events: none;
}

.fav-toggle-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(224, 48, 30, .08);
  color: var(--brand-red);
  border: none;
  border-radius: 12px;
  padding: 9px 16px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .fav-toggle-btn:hover:not(.active) {
    background: rgba(224, 48, 30, .16);
  }
}

/* 켜짐 = 카드 하트와 같은 문법(아이콘 안쪽을 브랜드 빨강으로 꽉 채움), 배경 박스는 없음(2026-07-25,
   대비 테두리도 넣지 않기로 확정). 배경 없음은 .fav-toggle-btn 기본값을 그대로 상속 — 활성 시에도 박스가
   안 생기게 여기서 background를 다시 선언하지 않는다. */
.fav-toggle-btn.active {
  color: var(--brand-red);
}

.fav-toggle-icon {
  flex: none;
  width: 18px;
  height: 18px;
  display: block;
  color: currentColor;
}

.fav-toggle-icon path {
  transition: fill .15s;
}

.fav-toggle-btn.active .fav-toggle-icon path {
  fill: currentColor;
}

/* 모바일 헤더 공유·설치 아이콘 — 즐겨찾기 오른쪽. 데스크톱/태블릿은 우측 topShareBtn/topInstallBtn을 씀.
   ⚠️ 박스(배경·테두리) 없이 아이콘만 — 크림 박스인 즐겨찾기 버튼과 시각적으로 구별(사용자 요청).
   누름 반응은 배경 대신 색(브랜드레드)+살짝 축소로만 준다. */
.tabs-share-btn {
  display: none;
  flex: none;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: color .15s, transform .08s ease;
  -webkit-tap-highlight-color: transparent; /* 모바일 기본 검정 음영은 끄고, 아래 :active로 눌림 반응을 줌 */
}

@media all {
  .tabs-share-btn {
    display: none; /* 공유·설치는 상단 우측 그룹(.topbar-right)으로 이동(2026-07-21) */
  }
}

@media (hover: hover) {
  .tabs-share-btn:hover {
    color: var(--brand-red);
  }
}
/* 눌림 반응(터치·클릭 공통) — 박스 없이 색만 브랜드레드로 + 살짝 축소로 "눌리는 느낌" */
.tabs-share-btn:active {
  color: var(--brand-red);
  transform: scale(.9);
}

/* 상단 우측 그룹: 즐겨찾기 + 공유 + 설치. 오른쪽 정렬(검색창은 2026-07-25부터 list-head 개수 옆으로 이동). */
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  flex: 1 1 0; /* basis 0 = 줄바꿈 유발 안 함(로고와 같은 줄 유지), 남는 폭을 채움 */
}
/* 검색창(2026-07-25 최종 확정: 크림 배경 박스, 고정폭 150px 우측정렬 — 밑줄(D)로 갔다가 박스로 재확정) —
   접기/펼침 없이 상시 노출. 돋보기는 안쪽 장식 아이콘. 고정폭이라 카테고리 탭이 바뀌어 개수 글자수가
   달라져도 흔들리지 않음. */
.search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  width: 180px; /* 150px는 애매해 보여 확대(2026-07-25) */
  height: 36px;
  padding: 0 12px;
  background: var(--bg-cream);
  border-radius: 10px;
}
.search-box-ic { flex: none; color: var(--text-muted); }

.tab-btn {
  cursor: pointer;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 2px;
  background: none;
  border: none;
  color: #8B6F68;
  transition: color .15s, font-weight .15s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.tab-btn:hover:not(.active) {
  color: #C77A6E;
}

.tab-btn.active {
  color: var(--brand-red);
  font-weight: 700;
}

@media all {
  .topbar {
    padding: 10px 0;
  }

  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .topbar-spacer {
    display: none;
  }

  .tabs-group {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
  }

  .tabs {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
    flex: none;
    white-space: nowrap;
    padding: 4px 2px;
  }

  /* 배경 제거 + 공유버튼(topShareBtn/.topbar-icon-btn)과 동일한 아이콘 색·크기로.
     아이콘 크기는 그대로 두고 터치 영역만 44px로 확보한다. */
  .fav-toggle-btn {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    background: none;
    color: #4D4139;
    border-radius: 10px;
  }

  /* 터치 기기는 탭 후 :hover가 다른 곳을 누르기 전까지 눌어붙어(2026-07-25 버그 리포트)
     즐겨찾기를 껐는데도 빨간색이 남아 보였음 → 실제 마우스 호버가 있는 기기에서만 적용 */
  @media (hover: hover) {
    .fav-toggle-btn:hover:not(.active) {
      background: none;
      color: var(--brand-red);
    }
  }

  .fav-toggle-label {
    display: none;
  }

  #topInstallBtn {
    order: 2;
    flex: none;
  }
}

@media all {
  .topbar-inner {
    gap: 8px;
    row-gap: 6px;
  }

  /* 공유(+설치) 아이콘이 탭 줄에 추가되어 폭이 늘었으므로, 간격을 줄여 '기타' 탭까지 보이게 함.
     설치 아이콘까지 보일 때 390px 기준 12px 넘치던 것 → 8px(간격 3곳 ×4px 절약)로 해소.
     375px(SE·mini)에선 설치 아이콘이 보일 때만 '기타'가 살짝 잘리지만 탭줄이 가로 스크롤이라 OK. */
  .tabs-group {
    gap: 8px;
  }

  .tabs {
    gap: 16px;
    flex: 0 1 auto; /* 폭을 다 채우지 않게(데스크탑처럼) — 즐겨찾기는 탭 옆에 붙고, 남는 공간은 아래 margin-auto가 먹음 */
  }

  /* 즐겨찾기 = 카테고리 탭과 함께 왼쪽(레시피 필터 묶음). 공유·설치 = 오른쪽으로 분리(데스크탑 레이아웃과 통일).
     공유 버튼(오른쪽 묶음의 첫 버튼)에 margin-left:auto → 공유+설치를 줄 오른쪽 끝으로 밀어냄.
     (:not(.tabs-install-btn)로 공유만 대상 — 설치까지 auto면 공유·설치 사이에도 틈이 생김) */
  .tabs-share-btn:not(.tabs-install-btn) {
    margin-left: auto;
  }

  /* #topInstallBtn 강제 숨김 제거(2026-07-21) — 상단 그룹으로 이동, JS(showInstallBtns)가 표시 제어 */
}

/* 데스크탑 공유·설치 아이콘 — 박스(원형 배경) 없이 아이콘만(즐겨찾기 알약과 구별, 사용자 요청).
   상호작용은 배경 없이 색+살짝 축소로만. */
.topbar-icon-btn {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #4D4139; /* 하단바 비활성 탭과 통일 = 앱 공통 비활성 아이콘색(2026-07-21) */
  cursor: pointer;
  overflow: hidden; /* 검색 열릴 때 폭 0으로 접히며 아이콘 잘림 */
  transition: color .15s, transform .08s ease,
              width .3s ease, opacity .2s ease, margin .3s ease;
  -webkit-tap-highlight-color: transparent; /* 기본 검정 음영은 끄고, 아래 :active로 눌림 반응 */
}

.topbar-icon-btn:hover {
  color: var(--brand-red);
}
.topbar-icon-btn:active {
  color: var(--brand-red);
  transform: scale(.9);
}

/* (2026-07-21) 상단 공유·설치를 항상 표시 — 옛 "@media all { .topbar-icon-btn { display:none } }" 제거 */

.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  color: var(--text-dark);
  padding: 0;
}

.search-input::placeholder {
  color: var(--text-muted);
}

@media all {
  .search-input {
    font-size: 16px;
  }
}

/* 채운 원 + 흰 × (iOS 검색창 스타일) — 헤더 닫기(X, 테두리만·큼)와 모양을 확실히 다르게 해
   위아래로 겹쳐 보일 때 "같은 버튼이 두 개"처럼 보이지 않게 함(2026-07-25). */
.search-clear {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--text-muted);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.search-box.has-value .search-clear {
  display: flex;
}

/* RECIPE GRID */
.main {
  flex: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 24px 20px 70px;
}

/* 2026-07-25: 뒤로가기+카테고리 탭(윗줄) / 개수(아랫줄)로 2단 구성. 개수는 왼쪽 정렬(들여쓰기 제거) */
.list-head {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 매장 지역탭↔개수 간격(.store-region-tabs margin-bottom)과 통일(2026-07-25) */
  margin: 0 0 16px;
}

.list-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 탭(왼쪽) + 닫기 버튼(오른쪽) — 2026-07-25 */
  gap: 8px;
}

/* 개수(왼쪽) + 검색창(오른쪽, 고정폭) — 2026-07-25. 검색창 폭을 고정해 카테고리 탭에 따라
   개수 글자수가 달라져도(예: '히든메뉴 8개' vs '소스 20개') 검색창 크기·위치가 흔들리지 않게 함. */
.list-head-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.count-line {
  flex: none;
  margin: 0;
  font-size: 13px;
  color: #AD8177;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

.count-num {
  color: var(--brand-red);
  font-weight: 700;
}

/* ── 이 주의 소스(주간 피처) ──
   29CM 큐레이션식: 킥커(빨간점+라벨) → 큰 이미지 → 굵은 제목 → 얇은 설명.
   이미지는 정사각(카드 원본 1:1 그대로, 크롭 없음). 매주 자동 순환은 script.js pickWeeklyFeature. */
/* ── 이 달의 레시피(월간 히어로 카레셀, 2026-07-21) ── 29CM식 큰 히어로 가로 스와이프 */
.monthly-feature { margin-bottom: 30px; }

.mf-kicker {
  font-size: 17px;               /* 로고(19px)보다 한 단계 아래 — 15는 작고 19는 로고와 동급이라 중간(2026-07-21) */
  font-weight: 500;              /* 볼드 제거 — 크기(19px)로만 존재감, 얇게(2026-07-21 사용자 요청) */
  line-height: 1.5;              /* iOS 사파리에서 line-height:normal이 한글 받침 클리핑 → 명시적으로(2026-07-21) */
  letter-spacing: -.02em;
  color: var(--brand-red);       /* "레시피" = 빨강 */
  margin: 0 0 12px;              /* <p> 기본 위 여백(15px) 제거 → 상단바와 간격 좁힘(2026-07-21) */
}
.mf-kicker-lead { color: var(--text-dark); } /* "이 달의"만 다른 색(진한 글자색) */

/* 캐러셀 = full-bleed(29CM식, 2026-07-21): 카드 본체는 로고·아이콘 라인에 정렬되고,
   옆 카드 peek은 콘텐츠 여백 바깥(화면 가장자리)에서 보임 → 카드 크기 손해 없이 넘김 인지 */
.mf-carousel {
  position: relative;
  margin: 0 -20px;         /* .main 좌우 패딩 20px 상쇄 = 화면 끝까지 */
}
/* 가로 스와이프 — 첫/끝 카드 인셋은 작게(카드 크게) */
.mf-scroll {
  display: flex;
  gap: 10px;              /* 카드 사이 간격(간격 색 = 깨끗한 배경색, 그림자 제거로 띠 안 생김) */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 20px;         /* 양쪽 대칭 인셋 — 첫 카드부터 좌우 여백, 모든 카드가 가운데 고정(2026-07-21) */
  -webkit-overflow-scrolling: touch;
}
/* 데스크탑: 끌 수 있다는 grab 커서. 드래그 중엔 스냅 끄고(부드럽게 끌림) 선택 방지 */
@media (hover: hover) and (pointer: fine) {
  .mf-scroll { cursor: grab; }
}
.mf-scroll.mf-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}
.mf-scroll.mf-dragging .mf-hero { cursor: grabbing; }

/* 히어로 카드 (1:1, 원본 이미지 안 잘림) */
.mf-hero {
  position: relative;
  flex: 0 0 100%;                /* 100% = 패딩 안쪽 폭(컨테이너-40px) — 인셋은 .mf-scroll padding이 담당, 카드 항상 가운데(2026-07-21) */
  scroll-snap-align: center;
  scroll-snap-stop: always;      /* 한 번 스와이프 = 한 장만(빠르게 튕겨도 다음 장에서 멈춤) */
  aspect-ratio: 1 / 1;
  padding: 0;
  border: none;
  background: #eadfd6;           /* 로딩 전 임시 배경 */
  border-radius: 10px;           /* 29CM식 낮은 라운드 */
  overflow: hidden;
  cursor: pointer;
  /* 그림자 없음(플랫) — 그림자가 간격으로 번져 배경과 다른 띠로 보이던 문제 해결(2026-07-21) */
  -webkit-tap-highlight-color: transparent;
}
.mf-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none; user-select: none;
}
/* 첫 배너(이달의 소스=img)도 고수·가이드(배경이미지)처럼 눌림 반응 없앰 — 사진이 안 움직이게(2026-07-23) */
/* 오버레이 — 두 겹이다.
   ① 전체 균일 5% — 배너 사진 위쪽이 밝으면(예: 흰 접시) 페이지 배경(#FCF9F5)과 밝기가 거의 같아
      위쪽 경계가 사라지던 문제 해결(2026-07-24). 흰 부분 255 → 243이 되어 배경과 9만큼 벌어진다.
      3%는 차이가 4뿐이라 화면을 어둡게 하거나 야외에서 사라져서 5%로 정함(계산·실물 확인).
      선(테두리·그림자) 대신 톤을 낮추는 방식이라 네 변 모두 걸리고, 앞으로 어떤 사진이 와도 일정하다.
   ② 하단 그라데이션 — 캡션(kicker+제목+설명) 글씨를 살리는 기존 딤드.
   ⚠️ 상단만 따로 어둡게 하지는 않는다(2026-07-23 '위쪽 밝게 유지' 결정 유지 — ①은 전체 균일이라 무관). */
.mf-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(8, 4, 2, .05), rgba(8, 4, 2, .05)),
    linear-gradient(to top,
      rgba(8, 4, 2, .88) 0%,
      rgba(8, 4, 2, .60) 20%,
      rgba(8, 4, 2, .16) 42%,
      rgba(8, 4, 2, 0) 60%,
      rgba(8, 4, 2, 0) 100%);
  pointer-events: none;
}

/* 첫 배너 제목 위 '이달의 소스' kicker(에디토리얼 라벨) — 작게, '소스'만 빨강 */
.mf-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  word-spacing: -1px;
  color: #fff;
  margin-bottom: 5px;             /* 제목과의 간격 */
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.mf-badge-em {
  color: #FF6A57;                 /* 어두운 배너 위 가독성용 밝은 빨강 */
  font-weight: 700;               /* '소스'도 볼드 통일 */
}

/* 기획 칼럼 배너 — 사진 대신 임시 배경(bannerBg) + 큰 이모지 */
.mf-colbg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.mf-colemoji {
  font-size: 92px; line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25));
  transform: translateY(-14px);   /* 캡션과 겹치지 않게 살짝 위로 */
}
.mf-hero--column .mf-badge-em { color: #fff; }  /* '기획' 라벨은 흰색 */
/* 칼럼 배너 제목의 줄 간격(제목 크기는 .mf-name 공통 30px) */
.mf-hero--column .mf-name { line-height: 1.2; }
/* 가이드 배너만 작게 — 제목이 두 줄(어서와~ / 하이디라오는 처음이지?)이라 30px이면
   좁은 폰(320px)에서 둘째 줄이 한 번 더 감겨 세 줄이 된다(2026-07-28 측정). */
.mf-hero--guide .mf-name { font-size: 26px; }
/* 준비중 배너 — 클릭 안 되니 기본 커서 */
.mf-hero--soon { cursor: default; }

/* 사진 안 캡션(좌하단): 이름(힘 줌) + 출처(힘 뺌) */
.mf-caption {
  position: absolute; left: 16px; right: 16px; bottom: 24px; /* 29CM처럼 하단에서 살짝 띄움 */
  z-index: 2;
  text-align: left;
}
.mf-name {
  /* 배너 제목 공통 30px(2026-07-28, 이달의 소스 34 → 30으로 낮춰 통일).
     배너를 넘길 때 제목 크기가 계단처럼 바뀌지 않게 — 예외는 두 줄인 가이드(26px)뿐. */
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
/* 예능 자막 밈처럼 제목 글자 사이에 끼우는 ↘ ↗ 화살표(안물안궁 칼럼).
   em 단위라 배너 30px·아티클 24px 어디서 써도 글자에 맞춰 같이 커지고 작아진다.
   stroke가 currentColor라 흰 제목·어두운 제목 양쪽에서 글자색을 따라간다. */
.ttl-arw {
  display: inline-block;
  width: .72em;
  height: .72em;
  margin: 0 .02em;
  vertical-align: -.02em;
  fill: none;
  stroke: currentColor;
  /* 제목이 800 굵기라 화살표가 가늘면 따로 논다. viewBox 24 기준 3.8이면 글자 획과 비슷해진다. */
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 이름 밑 한 줄 설명(29CM식) — 한 줄 넘으면 …로 자름 */
.mf-desc {
  margin-top: 7px;
  margin-left: 4px;               /* 제목보다 살짝 들여쓰기 */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mf-desc b { font-weight: 600; } /* desc 안 <b> 강조는 살짝만 */
.mf-source {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.mf-source .src-ic { width: 13px; height: 13px; flex: none; fill: currentColor; }

/* 인디케이터(막대형) — 캐러셀 뷰포트 우상단에 "고정"(카드와 안 움직임). 스크롤 시 활성 점만 JS가 갱신 */
.mf-dots {
  position: absolute; right: 34px; bottom: 10px; /* 우하단, 캡션 desc 아래로 충분히 띄움(딤드 위=흰 점 가독, 2026-07-23) */
  z-index: 3;
  display: flex; gap: 10px; /* 알약(16px)이 옆 점을 안 덮도록 간격을 알약 길이에 맞춰 확보(2026-07-21) */
  pointer-events: none;
}
.mf-dots[hidden] { display: none; }
.mf-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  display: block;
}
/* 스크롤에 실시간 연동해 미끄러지는 활성 막대(② 2026-07-21). 위치는 JS가 translateX로 매 프레임 지정 */
.mf-dots-pill {
  position: absolute; top: 0; left: 0;
  width: 16px; height: 6px; /* 목업(16px) 비율로 — 간격 10px와 세트(짧아 보임 피드백 반영) */
  border-radius: 3px;
  background: #fff;
  will-change: transform;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 24px;
  row-gap: 28px;
}

/* 카테고리 색 세트 — 카드(그리드·가챠)와 상세가 공유.
   프레임(밴드·테두리)은 크림 고정, 카테고리 색은 배지·본체 틴트로만 표현.
   색 조정은 여기 한 곳만 고치면 배지·본체 틴트가 전부 연동됨. */
[data-cat="소스"]   { --frame-line: #C98B7D; --badge-bg: #F6DDD5; --badge-ink: #8F4536; --card-bg: #FBF0EC; }
[data-cat="탕"]     { --frame-line: #C4A163; --badge-bg: #F6EAD0; --badge-ink: #7A5A1F; --card-bg: #FBF4E6; } /* 구 육수 골드 유지 */
[data-cat="히든메뉴"] { --frame-line: #9BA983; --badge-bg: #E9EEDD; --badge-ink: #55663D; --card-bg: #F3F6EB; } /* 구 밥·면·기타 통합 → 초록 */

/* 넓은 밴드는 크림 고정 — 메인 카드·상세 공통. 밴드와 본체 사이 얇은 선(--frame-line)은 카테고리색 */
.modal{ --frame: #E6D4BA; }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #A88F87;
  font-size: 15px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

.recipe-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg,
    transparent 50%,
    rgba(0, 0, 0, .04) 62%,
    rgba(0, 0, 0, .1) 71%,
    rgba(0, 0, 0, .2) 79%,
    rgba(0, 0, 0, .34) 86%,
    rgba(0, 0, 0, .52) 92%,
    rgba(0, 0, 0, .66) 97%,
    rgba(0, 0, 0, .75) 100%);
  pointer-events: none;
}

.recipe-thumb-source {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px 10px;
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

.recipe-thumb-source .src-ic {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  display: block;
  fill: currentColor;
}

/* 버블(PNG)은 이미지 안에 여백이 있어 SVG보다 작아 보임 → 살짝 키움 */
.recipe-thumb-source img.src-ic {
  width: 15px;
  height: 15px;
}

/* 유튜브·트위터·제미나이 로고는 여백이 많아 작아 보임 → 살짝 키움 */
.recipe-thumb-source .src-ic--yt { width: 16px; height: 16px; }
.recipe-thumb-source .src-ic--tw { width: 15px; height: 15px; }
.recipe-thumb-source .src-ic--gm { width: 15px; height: 15px; }
/* MBC는 가로 워드마크(3.4:1) → 높이 고정, 너비 자동(비율 유지). img.src-ic(15×15)보다 특이성 높게. */
.recipe-thumb-source img.src-ic.src-ic--mbc { width: auto; height: 11px; }
.recipe-thumb-source .src-ic--ig { width: 19px; height: 19px; }

.recipe-thumb-source .src-txt {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.like-count {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  min-width: 8px;
}

/* 이름 안의 작은 수식어 (예: 라젤(이 아는 동생)소스) — 카드·모달·가챠 공통 */
.name-sub {
  font-size: 0.68em;
  font-weight: 700;
}

@media all {
  .main {
    padding-top: 12px; /* 헤더~툴바 간격을 카드 간격(12px)과 맞춰 위아래 리듬 통일 */
    padding-bottom: 100px;
  }

  .list-head {
    margin-bottom: 12px; /* 툴바~그리드도 카드 간격과 동일하게 */
  }

  .recipe-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    row-gap: 22px; /* 2026-07-25: 브라우즈 카드 행 간격을 넓혀 빽빽함 해소(기존 12px) */
  }

  .recipe-thumb-source {
    font-size: 10px;
  }
}

/* FOOTER */
.footer {
  margin-top: 36px; /* 카드/주사위 섹션↔푸터 구분선 위 여백(2026-07-24 16→36으로 넓힘) */
  padding: 16px 20px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background-color: var(--bg-card);
  border-top: 1px solid #F0DCD4;
  overflow: hidden;
}

.footer-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-red-dark);
  text-align: center;
  white-space: nowrap;
}
.footer-brand { /* 푸터 문구 속 '하딜고고' = 로고와 동일하게 Paperlogy + 로고 색(2026-07-24) */
  font-family: 'Paperlogy', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-weight: 500; /* Paperlogy는 5Medium 서브셋만 있음 — 로고와 동일 굵기 */
  color: var(--brand-red);
  letter-spacing: -.01em;
}

.footer-report {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #C08A80;
  text-decoration: underline;
  text-decoration-color: #E4C0B8;
  text-underline-offset: 3px;
  text-align: center;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.footer-report:hover {
  color: var(--brand-red-dark);
  text-decoration-color: var(--brand-red-dark);
}
.footer-report-ic { /* 💌 대체 봉투 아이콘 — currentColor로 링크 색·호버 빨강 자동 추종(2026-07-24) */
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 5px;
}

.footer-break-mobile {
  display: none;
}

@media all {
  .footer {
    padding: 12px 20px;
    padding-bottom: 16px;
  }

  .footer-title {
    white-space: normal;
  }

  .footer-break-mobile {
    display: inline;
  }
}

/* MODAL */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(58, 12, 8, .55);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.modal-overlay.open {
  display: flex;
}

/* 상세 = 액자 없는 클린 레이아웃(2026-07-25 개편, 모바일·데스크톱 공통).
   .modal = 크기만 잡는 투명 래퍼 / .modal-card = 콘텐츠 + 스크롤 컨테이너(크림 배경 하나). */
.modal {
  position: relative;
  width: 560px;
  max-width: 100%;
  max-height: 92vh;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  overflow: hidden; /* 스크롤은 .modal-card가 담당 */
  display: flex;
  flex-direction: column;
}

/* 카드 본체 — 틴트·테두리 없는 투명 배경, 스크롤 컨테이너(스크롤바는 전역 규칙이 숨김 — 여기서 새로 선언 금지) */
.modal-card {
  flex: 1;
  min-height: 0;
  background: none;
  overflow-y: auto;
  overscroll-behavior-y: contain; /* 맨 위에서 당겨도 브라우저 새로고침으로 안 번지게 */
}

/* 원본 썸네일 — 프레임 안의 "아트 창"(인셋 + 라운드 + 얇은 테두리), 이름 행 아래 */
.modal-thumb {
  display: flex;
  position: relative;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 16px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.modal-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-thumb-emoji {
  font-size: 88px;
  line-height: 1;
}

/* 모달 썸네일 좌상단 배지 줄(2026-07-25) — 순위 배지(homeRankBadge, 홈 인기소스와 같은 .hp-rank
   마크업 재사용, 1~5위 전부 같은 색)와 '이달의 소스' 배지를 가로로 나란히. .hp-rank는
   원래 카드 썸네일 기준 절대 위치라, 이 줄 안에서는 flex로 흐르도록 static으로 되돌린다. */
.modal-badge-row {
  position: absolute;
  left: 11px;
  top: 9px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.modal-badge-row .hp-rank {
  position: static;
}
/* '이달의 소스' — 순위 알약(.hp-rank)과 같은 크기·모서리, 브랜드 빨강 배경 + 흰 글자.
   모달·브라우즈 그리드 카드(.hc-badge-slot) 공용 클래스(2026-07-25, 그리드 카드에도 노출 추가). */
.monthly-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--brand-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1.25;
}

/* 모바일: 상단바 아래 전체화면 (상단바는 그대로 동작 — 탭·검색 누르면 상세 자동 닫힘) */
@media all {
  .modal-overlay {
    top: var(--topbar-h, 0px); /* JS가 상단바 실제 높이를 넣어줌 */
    padding: 0; /* 액자 제거(2026-07-25) — 둘레 여백 없이 카드가 화면 꽉 채움 */
    background: var(--bg-card);
    backdrop-filter: none;
  }

  .modal {
    width: 100%;
    max-width: 440px;
    height: 100%;
    max-height: none;
    box-shadow: none;
  }
}

/* 상단 한 줄 — 카테고리(왼쪽) / 즐겨찾기·닫기(오른쪽) */
.modal-topline {
  display: flex;
  align-items: center;
  gap: 26px; /* 13+13 — 두 버튼의 44px 터치 타겟이 정확히 맞닿고 겹치지 않는 최소값(2026-07-25) */
  /* 상하 여백 확대(2026-07-25) — 즐겨찾기·닫기 터치가 너무 좁았음.
     오른쪽 24px(20+4, 2026-07-25 재조정) — 브라우즈 닫기(.browse-close, .main 패딩 20px 기준)와
     오른쪽 끝 x좌표를 맞추려면 20px이 기준이지만, 아래 .modal-close가 오른쪽(바깥쪽) 패딩을
     13→16px로 늘리며 3px 더 튀어나왔고 원래도 1px 차이가 있었음(실측) → 20+3+1=24px로 보정해
     getBoundingClientRect() 기준 두 닫기 버튼의 오른쪽 끝 x좌표를 정확히 일치시킴(367px, 2026-07-25). */
  padding: 16px 21px 14px 18px; /* 오른쪽 21px = 브라우즈(.main 20px)와 아이콘 x좌표를 맞춘 실측값 */
  color: #4D4139;
}

/* 왼쪽 = 이름·부제 묶음, 오른쪽 = 좋아요. 브라우즈 카드(.hc-card-foot)와 같은 구조.
   align-items를 flex-start로 두고 하트만 align-self:center — 부제가 없는 레시피에서도
   이름 위치가 흔들리지 않는다(.hc-card-foot와 같은 원리). */
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  /* 왼쪽만 22px(20→+2) — 별(.star-accent)이 이름 글자를 침범하지 않게 별 자리를 확보(2026-07-25).
     이름·부제 둘 다의 padding이라 별 유무와 무관하게 왼쪽 위치는 항상 같음. */
  padding: 16px 20px 0 22px;
}
.modal-header-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0; /* 긴 이름이 하트를 밀어내지 않게 */
}

.modal-ver {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

/* 닫기·즐겨찾기 — 원 배경 없는 아이콘 버튼, 터치 타겟만 padding/margin으로 확보(시각 위치는 그대로).
   아이콘 18px + padding 13px×2 = 44px(2026-07-25 아이콘 18px 통일 — 20px 시절 12px 패딩에서
   1px씩 늘려 44px 유지. 예전 6px/-6px는 33px밖에 안 됐음).
   좌우 패딩은 비대칭(2026-07-25 재조정): gap을 16→20px로 늘려도 마주보는 안쪽 패딩(13+13=26px)이
   gap(20px)보다 커서 44px 터치 타겟끼리 6px 겹쳤음(실측, getBoundingClientRect). 바깥쪽 16px·
   안쪽 10px로 나눠(합 26=기존과 동일, 터치 타겟은 여전히 44px, 아이콘 시각 위치는 그대로) 겹침을 0으로. */
.modal-close,
.modal-fav-btn {
  cursor: pointer;
  position: static;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px;
  margin: -13px;
  color: #4D4139;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
/* 🔴 좌우 패딩은 반드시 대칭(13px)으로 둘 것.
   한때 터치 타겟 겹침을 없애려고 비대칭(바깥16/안쪽10)으로 나눴는데, 그러면 44px 박스 안에서
   아이콘이 3px 치우쳐 브라우즈 닫기(.browse-close, 44px 안에 가운데 정렬)와 눈으로 어긋나 보였다.
   박스 오른쪽 끝만 맞추면 안 되고 '보이는 아이콘' 위치가 같아야 한다(2026-07-25).
   겹침은 패딩이 아니라 .modal-topline의 gap(26px = 13+13)으로 푼다. */

@media (hover: hover) {
  .modal-close:hover,
  .modal-fav-btn:hover {
    color: var(--brand-red);
  }
}

.modal-close:active,
.modal-fav-btn:active {
  color: var(--brand-red);
}

/* 손가락으로 연 모달의 자동 초점에만 iOS 파란 네모를 숨긴다.
   키보드로 연 경우엔 focus-silent가 붙지 않아 기본 초점 표시가 그대로 보인다. */
.modal-close.focus-silent:focus,
.stamp-sheet-close.focus-silent:focus,
.stamp-view-close.focus-silent:focus {
  outline: none;
}

#modalCat {
  margin-right: auto;
}

/* ===== 오늘의 소스 가챠 ===== */
.head-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gacha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 정렬 버튼과 같은 고정 높이 → 줄 높이가 이모지에 흔들리지 않게 함 */
  height: 36px;
  line-height: 1;
  border: none;
  background: var(--brand-red);
  color: #fff;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  padding: 0 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .gacha-btn:hover {
    background: var(--brand-red-hover);
  }
}

.gacha-btn:active {
  transform: scale(.95);
  background: var(--brand-red-active);
}

.gacha-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(58, 12, 8, .5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gacha-overlay.open {
  display: flex;
}

.gacha-modal {
  position: relative;
  width: 330px;
  max-width: 100%;
  background: #FBF5F1;
  border-radius: 20px;
  padding: 30px 24px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}

/* .modal-close의 position:static이 .gacha-close의 top/right를 무효화해 닫기가 모달 가운데로
   흘러가던 회귀(2026-07-25) — position:absolute로 다시 이긴다. padding/margin은 .modal-close
   상속값(13px/-13px)이 absolute 좌표 계산과 얽혀 어긋나므로 0으로 재정의하고 width/height로
   직접 44px 터치 타겟을 만든다(아이콘은 SVG 자체 크기 18px로 flex 중앙정렬, 상속). */
.gacha-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: #4D4139;
}

/* 다른 닫기 버튼(.modal-close/.browse-close)과 동일: 배경 없이 색만 브랜드 빨강으로(2026-07-25,
   눌렀을 때 생기던 #EDE4DF 음영 제거). hover는 터치기기 눌어붙음 방지를 위해 반드시 media 안에. */
@media (hover: hover) {
  .gacha-close:hover { color: var(--brand-red); }
}

.gacha-close:active {
  color: var(--brand-red);
}

.gacha-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-red);
}

.gacha-stage {
  position: relative;
  width: 210px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 소스그릇: 블러/그림자 필터 없이 SVG 그라데이션만 사용(iOS 렌더링 문제 회피).
   층 순서: 그림자(0) < 그릇 안쪽(1) < 소스(2) < 떨어지는 재료(3) < 그릇 앞면(4)
   → 재료가 그릇 "안으로" 떨어져 앞면 뒤로 잠기는 것처럼 보임 */
/* 받침 매트: 그릇과 함께 출렁이지 않게 그릇 밖(스테이지)에 둠 */
.gacha-mat {
  position: absolute;
  left: 50%;
  top: 128px;
  width: 190px;
  height: 44px;
  margin-left: -95px;
  transition: opacity .25s;
  pointer-events: none;
  z-index: 0;
}

.gacha-bowl {
  position: relative;
  width: 150px;
  height: 96px;
  transition: opacity .25s;
  z-index: 1;
}

.gacha-bowl-shadow {
  position: absolute;
  left: 0;
  bottom: -2px; /* 그릇 그림(캔버스 y82, 아래 여백 14px)의 실제 바닥에 그림자 중심이 오도록 */
  width: 150px;
  height: 30px;
  transition: opacity .3s ease;
  z-index: 0;
  pointer-events: none;
}

.gacha-bowl-back,
.gacha-sauce,
.gacha-bowl-front {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 96px;
  pointer-events: none;
}

.gacha-bowl-back { z-index: 1; }

.gacha-sauce {
  z-index: 2;
  opacity: 0;
  transform: scale(.5);
  transform-origin: 50% 32%;
  transition: opacity .25s, transform .3s cubic-bezier(.3, 1.4, .5, 1);
}

/* 베이지(땅콩소스) 레이어: 재료가 들어갈수록 옅어져 아래의 빨간 소스가 드러남 */
.gacha-sauce .sauce-beige { transition: opacity .35s ease; }

.gacha-ings {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 96px;
  z-index: 3;
  pointer-events: none;
}

.gacha-bowl-front { z-index: 4; }

/* 떨어지는 재료 한 개 */
.gacha-ing {
  position: absolute;
  top: 16px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  animation: gachaDrop .43s ease-in both;
}

.gacha-ing svg { display: block; width: 100%; height: 100%; }

.gacha-ing.sink { opacity: 0; transition: opacity .28s ease; }

@keyframes gachaDrop {
  0% { transform: translateY(-120px) rotate(-24deg); opacity: 0; }
  12% { opacity: 1; }
  70% { transform: translateY(0) rotate(8deg); }
  85% { transform: translateY(-6px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* 재료 착지 시 그릇 출렁 */
.gacha-bowl.bump {
  animation: gachaBump .24s ease-out 1;
}

@keyframes gachaBump {
  45% { transform: translateY(3px) scale(1.02, .96); }
}

.gacha-result {
  position: absolute;
  /* 🔴 .gacha-stage 안에 두고 inset:0으로 붙인다. 예전엔 모달 직속 + top:67px 하드코딩이었는데,
     제목·여백이 바뀌자 실제 스테이지(94px)와 27px 어긋나 카드가 제목을 덮었다(2026-07-25).
     스테이지에 붙여두면 위아래 어떤 요소가 바뀌어도 그릇 자리를 그대로 따라간다. */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.35);
  transition: opacity .35s, transform .4s cubic-bezier(.2, .9, .3, 1.5);
  pointer-events: none;
  z-index: 5; /* 그릇 앞면(.gacha-bowl-front, 4)보다 위 — 스테이지 안으로 들어오면서 필요해짐 */
}

/* 가챠 결과 카드 = 브라우즈 그리드 카드(.hc-card--browse)와 동일 스타일 재사용
   (2026-07-25에 옛 TCG 카드에서 교체 — buildBrowseGridCard(r, {hideLike:true})로 렌더.
   그 옛 카드 코드·CSS는 2026-07-30에 삭제했다).
   좋아요는 JS에서 아예 안 그려 넣고, 배지는 syncBrowseGridCard를 호출하지 않아 자연히 빈 채로 둔다.
   즐겨찾기(북마크)·셀럽 별은 그대로 유지. 컨테이너(.gacha-result)는 클릭 통과(pointer-events:none)라
   카드만 다시 클릭 가능하게 켠다. 폭은 실제 모바일 그리드 카드와 같은 162px —
   실측: 162(폭=썸네일 높이) + border 2px + 푸터 min-height 56px - margin-top 겹침 1px ≈ 217px,
   .gacha-stage(220px) 안에 여유 있게 들어간다(2026-07-25 확인). */
.gacha-result .hc-card--browse {
  width: 162px;
  pointer-events: auto;
}
.gacha-result .hc-card--static {
  cursor: default;
}

.gacha-pull {
  display: inline-flex;      /* 평면 주사위 아이콘 + '뽑기' 정렬(2026-07-24) */
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--brand-red);
  color: #fff;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 13px 34px;
  border-radius: 14px;       /* 알약 → 둥근 사각(홈 버튼과 통일, 2026-07-24) */
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.gacha-pull-ic { width: 24px; height: 24px; flex: none; }

.gacha-actions {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;                  /* 버튼 ↔ '내일 또 만나요' 문구: 좁게 묶어 한 덩어리로 */
  width: 100%;
  margin-top: 16px;          /* 카드 ↔ 버튼: 넓게 띄움 */
}

/* '레시피 보기'만 상세 모달을 여는 CTA. 결과 카드는 확인용으로만 두고 직접 열리지 않는다. */
.gacha-view {
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 13px 32px;        /* 폭 auto — 내용만큼만(전체폭 X) */
  border-radius: 14px;       /* 둥근 사각(뽑기 버튼과 통일) */
  cursor: pointer;
  white-space: nowrap;
  border: none;
  background: #F6E4DE;       /* 로즈 소프트필(카드 프레임 #E0A294 계열의 옅은 톤) */
  color: #C0392B;            /* 짙은 브랜드 빨강 글자 */
  box-shadow: 0 8px 18px rgba(110, 40, 30, .45); /* 깊은 브라운레드 그림자로 바닥에 앉힘(사용자 확정) */
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* 재뽑기 없음 안내(하루 한 번) — 버튼 아님, 닫기는 X·바깥클릭이 처리 */
.gacha-again-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: -.2px;
  transform: translateX(-11.5px); /* 👋(18px)+gap(5px)의 절반 — 이모지 때문에 오른쪽으로 밀린 '내일 또 만나요' 텍스트를 버튼 중앙과 정렬 */
}
.gacha-note-ic { width: 18px; height: 18px; flex: none; display: inline-block; } /* Noto 손흔들기 정지 PNG(👋) — 기기 통일(텍스트 이모지 대신), 주사위와 동일 원칙 */

@media (hover: hover) {
  .gacha-pull:hover { background: var(--brand-red-hover); }
  .gacha-view:hover { background: #F0D6CD; box-shadow: 0 11px 24px rgba(110, 40, 30, .48); } /* 살짝 진해지고 그림자 뜸 */
}

.gacha-pull:active { transform: scale(.95); background: var(--brand-red-active); }
.gacha-view:active { transform: scale(.96); background: #EAC7BD; box-shadow: 0 3px 9px rgba(110, 40, 30, .40); } /* 눌리면 진해지고 그림자 낮아져 바닥에 눌림 */

/* 데스크톱에서 가챠 팝업 크게 */
@media (min-width: 100000px) {
  .gacha-modal { width: 440px; padding: 40px 34px 32px; gap: 20px; }
  .gacha-title { font-size: 24px; }
  .gacha-stage { transform: scale(1.36); margin: 36px 0; }
  .gacha-pull { font-size: 18px; padding: 16px 50px; }
  .gacha-view { font-size: 17px; padding: 14px 36px; }
}

.modal-fav-btn.active {
  color: var(--brand-red);
}

.modal-fav-btn.active svg path {
  fill: currentColor;
}

/* 모달 제목의 연예인 별 — 이름 좌측 위 대각선으로 겹침(2026-07-25 재조정. 옛 TCG 카드의
   .recipe-name .star-accent와 같은 방식이었고, 그 카드는 2026-07-30에 삭제됐다. 지금 같은
   방식을 쓰는 살아 있는 규칙은 .hp-foot .hp-name.has-star .star-accent와
   .hc-row-name.has-star .star-accent다). .modal-name이 position:relative를 잡아준다.
   -20px/-9px는 별 오른쪽 끝~첫 글자 사이 gapX 2px는 좁았지만 gapY(별 위~글자 위) 10px로 너무 떠
   보였음(실측, Range.getBoundingClientRect 기준) → -19px/-3px로 당겨 gapX 1px·gapY 4px로 밀착
   (겹침은 없음: gapX>0 확인). 화면 왼쪽엔 안 잘리게 .modal-header 왼쪽 padding 22px 유지(위 참고). */
/* 2026-07-25 재조정: -19/-3은 별이 글자 '옆'에 나란히 서서 대각선으로 안 읽혔음(사용자 지적).
   위로 올리고 오른쪽으로 당겨 첫 글자 좌상단 모서리에 얹히게 함. */
.modal-name .star-accent {
  position: absolute;
  left: -14px;
  top: -9px;
  width: 18px;
  height: 18px;
}

/* 모달 하단 좋아요 — 레시피 다 보고 마지막에 누르는 동선(상단 혼잡 해소) */
/* 알약(테두리+흰 배경) 제거(2026-07-28) — 사이트의 다른 하트(.hp-like·.hc-row-like)는 전부
   하트+숫자만 놓는다. 상세만 알약이라 예외였고, 하단 닫기 버튼이 생기면서 흰 배경+테두리가
   둘 나란히 놓여 서로 경쟁했다. 닫기=동작, 좋아요=반응이라 생김새가 달라야 한다.
   패딩은 남기고 같은 크기의 음수 마진으로 상쇄 — 보이는 크기는 하트+숫자지만 손가락이
   닿는 영역은 그대로 유지된다(.hp-like와 같은 수법). */
.modal-like-btn {
  cursor: pointer;
  flex: none;
  align-self: center; /* 이름·부제 묶음의 세로 가운데 */
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  color: #B29288;
  padding: 12px 10px;  /* 하트 20px + 위아래 12px = 손가락 영역 44px(권장 최소치) */
  margin: -12px -10px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 700;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .modal-like-btn:hover { color: var(--brand-red); }
}

.modal-like-btn svg path {
  transition: fill .15s;
}

/* 누르면 하트가 빨갛게 채워짐 — 알약 배경이 사라진 자리를 아래 팝 애니메이션이 메운다 */
.modal-like-btn.active {
  color: var(--brand-red);
}
/* 누를 때 통통 팝 — 홈 하트와 같은 hpLikePop 공유(누른 그 순간에만, popHeart()가 .pop을 뗀다) */
.modal-like-btn.pop svg { animation: hpLikePop .32s ease; }

.modal-like-btn.active svg path {
  fill: currentColor;
}

.modal-name {
  position: relative; /* 별(.star-accent)이 좌측 위로 겹치는 기준점(2026-07-25 원복) */
  margin: 0;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-weight: 800;
  font-size: 23px;
  color: var(--text-darkest);
  letter-spacing: -.01em;
  line-height: 1.3;
}

.modal-cat {
  font-size: 16px;
  font-weight: 700;
  color: #4D4139;
  letter-spacing: .01em;
  background: none;
  border: none;
  padding: 0;
  position: static;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

.modal-desc {
  margin: 12px 20px 0;
  font-size: 14px;
  line-height: 1.65;
  color: #8B6F68;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

.modal-body {
  padding: 22px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.modal-section-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-darkest);
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

.ing-box {
  background: #FDEDE7;
  border-radius: 16px;
  padding: 8px 20px;
}

.ing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.ing-name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #3A241F;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  word-break: keep-all;
}

.ing-amt {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-red);
  min-width: 32px;
  text-align: right;
  flex: none;
}

.ing-unit {
  font-size: 14px;
  color: #AD8177;
  min-width: 40px;
  text-align: left;
  flex: none;
}

/* 상세 타이포 — 모바일·데스크톱 공통(TCG 카드 화면 통일) */
.ing-name {
  font-size: 14px;
}

.ing-amt {
  font-size: 14px;
}

.ing-unit {
  font-size: 12px;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.step-num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.step-text {
  font-size: 15px;
  line-height: 1.55;
  color: #4a4038;
  /* padding-top 1px 제거(2026-07-25) — 숫자와 line-height를 맞춘 뒤엔 이 1px이 오히려 어긋남을 만든다 */
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

.tip-box {
  background: rgba(224, 48, 30, .06);
  border: 1px solid rgba(224, 48, 30, .22);
  border-radius: 14px;
  padding: 15px 14px; /* 좌우 14px = 재료 박스(.ing-box)와 같은 좌우 여백(2026-07-25, 💡 아이콘 제거로 18px→14px) */
  font-size: 14px;
  line-height: 1.6;
  color: #7a3b33;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
}

/* (우하단 플로팅 설치 CTA 제거 — 하단 탭바와 겹쳐서 헤더 아이콘(.tabs-install-btn/topInstallBtn)으로 이동) */

/* SHARE */
.share-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .85);
  color: var(--brand-red);
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(58, 12, 8, .12);
}

.share-btn-icon {
  display: flex;
  line-height: 1;
}

.share-toast {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 250;
  background: rgba(43, 18, 13, .9);
  color: #fff;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
}

.share-toast.show {
  display: block;
}

/* IN-APP BROWSER GUIDE */
.inapp-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--text-dark);
  color: #fff;
  padding: 12px 20px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  word-break: keep-all;
}

.inapp-banner-close {
  flex: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}

.a2hs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(58, 12, 8, .55);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.a2hs-overlay.open {
  display: flex;
}

.a2hs-card {
  position: relative;
  width: 360px;
  max-width: 100%;
  background: #fff;
  border-radius: 24px;
  padding: 32px 26px 26px;
  text-align: center;
  box-shadow: 0 50px 100px -24px rgba(0, 0, 0, .5);
}

.a2hs-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 20px;
  line-height: 1;
  color: #C9A79F;
  cursor: pointer;
}

.a2hs-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 14px;
}

.a2hs-title {
  margin: 0 0 20px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.5;
}

.a2hs-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.a2hs-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 14px;
  color: #5A3F39;
  line-height: 1.5;
}

.a2hs-step-text {
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}

.a2hs-step-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-cream);
  border-radius: 8px;
  color: var(--brand-red);
  font-size: 15px;
}

.a2hs-step-icon svg {
  display: block;
}

.a2hs-steps li:last-child .a2hs-step-icon {
  font-size: 20px;
  font-weight: 700;
}

/* ══ 상세: 클린 레이아웃 내부 세부 조정 (모바일·데스크톱 공통) ══
   (파일 맨 끝에 두는 이유: 위쪽 기본 규칙들과 특이성이 같아 소스 순서로 이겨야 함)
   박스(주문·소스바·만드는 법·팁)는 흰 박스 문법으로 통일, 팁만 로즈 톤. */

/* 설명 속 고유명사 강조 — 나무위키식(색 없이 굵기만). 이름 따옴표 대신 <b>로 표시 */
.modal-desc b {
  font-weight: 700;
}

/* 인용/강조 구절 밑줄 — 큰따옴표 대신 쓸 때. 글자에 붙지 않게 오프셋 */
.modal-desc u {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 팁: "나만의 팁" 제목 없이 박스 안 문장만 (박스 자체가 이미 눈에 띄어 제목 중복).
   박스는 주문·재료·설명과 같은 흰 박스 문법으로 통일 */
#modalTipWrap .modal-section-title { display: none; }

/* 팁 박스만 로즈 톤(주문·소스바·만드는 법은 흰 박스 유지).
   💡 아이콘 이력: 2026-07-25에 "로즈 배경이 이미 팁을 뜻해 중복"이라며 텍스트 이모지를 뺐다가,
   2026-07-28 사용자 요청으로 Noto 정지 PNG로 되살림(기기별 이모지 편차 없음).
   좌우 패딩은 옛 18px로 되돌리지 않고 14px 유지 — 바로 위 재료 박스(.ing-box)와 같은 값이라
   전구와 재료 이름의 시작선이 세로로 맞는다(18px이면 4px 어긋남, 2026-07-28 확인). */
.tip-box {
  background: #FDF1EE;
  border: 1px solid #F1D5CD;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 15px 14px;
}
/* 18px 글자(line-height 1.6 = 22.4px) 첫 줄에 광학적으로 맞추는 2px 내림 */
.tip-ic { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* 긴 문장은 어절 단위로만 줄바꿈 (단어 중간에서 안 끊기게)
   — 설명(.modal-desc)은 제외: 어절 단위가 오히려 어색해지는 문장이 있어 사용자가 직접 관리 */
.tip-box,
.step-text { word-break: keep-all; }

/* 팁에 줄바꿈(\n)을 쓰면 여러 줄로 — 조건별 팁을 나열할 때 사용.
   한 줄짜리 기존 팁은 \n이 없어 영향 없음. */
.tip-box { white-space: pre-line; }

/* 만드는 법도 다른 섹션과 같은 흰 박스로 — 본체 위 요소는 전부 박스 문법 통일.
   번호마다 재료 행과 같은 은은한 구분선 */
.steps-list {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 4px 14px;
  gap: 0;
}

.step-row {
  padding: 12px 0;
  border-bottom: 1px solid #F0E2D2;
}

.step-row:last-child {
  border-bottom: none;
}

/* 만드는 법 숫자: 원 없이 빨간 숫자만 (재료 양 숫자와 같은 문법)
   🔴 line-height를 .step-text(1.55)와 같게 둘 것 — 숫자는 line-height:normal(≈18px), 본문은
   23.25px이라 두 글자의 세로 위치가 3.5px 어긋나 있었다(2026-07-25 실측). 첫 줄 기준선을 맞춘다. */
.step-num {
  background: none;
  border: none;
  color: var(--brand-red);
  font-size: 15px;
  line-height: 1.55;
  width: 18px;
  height: auto;
  border-radius: 0;
}

/* 재료표: 밝은 텍스트 박스 — 틴트 본체 위에서 TCG 효과 텍스트 박스처럼 도드라지게 */
.ing-box {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 4px 14px;
}

.ing-row {
  border-bottom: 1px solid #F0E2D2;
}

.ing-row:last-child {
  border-bottom: none;
}

/* 같은 재료의 이어지는 줄(이름 생략) — 앞줄과 한 덩어리로 보이게 구분선 제거 */
.ing-row--same {
  margin-top: -4px;
}

.ing-row:has(+ .ing-row--same) {
  border-bottom: none;
}

/* ===== 섹션(뷰) 전환 ===== */
.view[hidden] { display: none; }

/* 비어있는(준비 중) 화면 */
.view-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 52vh;   /* 폴백 */
  min-height: 52svh;  /* .page와 같은 이유로 svh — 위 .page 주석 참고 */
  padding: 40px 20px;
}
.view-empty-emoji {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 18px;
}
.view-empty-title {
  margin: 0 0 8px;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--text-darkest);
}
.view-empty-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ===== 매장(지점) 목록 ===== */
/* 매장 헤더 줄 = 레시피 툴바(.list-head)와 같은 구조: 왼쪽 개수 + 오른쪽 안내문, space-between.
   min-height 36px = 레시피 툴바(오늘의 소스·정렬 버튼) 높이와 동일 → 세로 가운데 정렬 시 개수 글자가
   레시피 개수와 같은 위치(탭 전환해도 안 튐)에 옴. margin-bottom은 레시피 list-head와 통일(데탑16/모바일12). */
/* 지역 탭 바(상단바에서 매장 뷰로 이동, 2026-07-23) — 전국 N곳 위. 밑줄 슬라이더는 하단 구분선 위를 미끄러짐 */
.store-region-tabs {
  margin: 0 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.store-region-tabs .tabs {
  flex-wrap: nowrap;
  gap: 22px;                        /* 지역 탭 간격 */
  justify-content: flex-start;      /* 왼쪽 정렬 — 전국이 콘텐츠 좌측 라인에 맞음(2026-07-23) */
}
.stores-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  margin: 0 0 16px;
}
.stores-count { margin: 0; padding: 0; flex: none; } /* 개수는 왼쪽 고정폭(줄어들지 않음) */
/* 안내문 = 박스 없이 회색 작은 글씨로 오른쪽 정렬(참고성 문구). 길면 줄어들며 왼쪽 개수를 안 밀침. */
.stores-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  text-align: right;
  flex: 0 1 auto;
}
.stores {
  display: grid;
  /* 최소폭 420px → 데스크탑(콘텐츠 ~1080px)에서 최대 2칸(길게) — 발도장 기록 카드와 결 통일.
     칼럼 간격 24px = 레시피 그리드와 통일. 좁은 화면은 자동 1칸. */
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  column-gap: 24px;
  row-gap: 14px;
  align-items: start; /* 카드 높이가 달라도 위로 정렬 */
}
@media all {
  .stores { grid-template-columns: 1fr; } /* 420 minmax는 375px에서 overflow라 명시적으로 1칸 */
}
.store-region {
  grid-column: 1 / -1; /* 지역 헤더는 한 줄 전체 차지 */
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .02em;
  margin: 14px 4px 0;
}
.store-region:first-child { margin-top: 0; }
.store {
  background: var(--bg-cream);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 16px 16px 14px;
}
/* (매장 전용 하단여백 제거) 예전엔 .main 여백이 JS 때문에 40px로 줄어 마지막 카드가 탭바에 가려서
   #view-store에 별도 패딩을 줬으나, JS 버그를 고쳐 .main이 탭바 회피를 제대로 하므로 더는 불필요. */
/* 모바일: 한 줄에 하나(주소·버튼 있는 카드라 2열은 답답함) */
@media all {
  .stores-head { margin-bottom: 12px; } /* 레시피 list-head 모바일과 동일 */
  .stores { grid-template-columns: 1fr; row-gap: 12px; }
  .store-region { margin: 8px 4px 0; }
  .store-region:first-child { margin-top: 0; }
}
.store--soon { opacity: .78; }
.store-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.store-name {
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--text-darkest);
}
.store-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--brand-red);
  background: rgba(224, 48, 30, .1);
}
.store-info {
  display: flex;
  align-items: flex-start;   /* 2줄 주소에서도 아이콘이 첫 줄에 맞게(2026-07-24) */
  gap: 7px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dark);
  margin-top: 3px;
}
.store-info--muted { color: var(--text-muted); }
/* 주소·영업시간 아이콘(이모지→SVG): 한 줄 높이(1.5em) 안에서 세로 가운데. 핀=빨강, 시계=회색 */
.store-i {
  flex: none;
  width: 16px;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.store-i--pin { color: var(--brand-red); }
.store-i--pin svg { width: 18px; height: 18px; flex: none; }  /* 핀이 시계보다 작아 보여 키움 — flex:none로 컨테이너 안에서 안 줄게(2026-07-24) */
.store-actions { display: flex; gap: 8px; margin-top: 13px; }
.store-btn {
  flex: 1;
  text-align: center;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; /* button 태그(지도)가 시스템폰트로 렌더되던 것 방지 → a(전화)와 통일 */
  font-size: 13px;
  font-weight: 700;
  padding: 9px 0;
  border-radius: 11px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, background .15s, border-color .15s;
}
/* 지도·전화 = 같은 보조 버튼(외부 앱 연결) — 중립 크림. 캐치테이블만 강조. */
.store-btn.map,
.store-btn.tel {
  color: var(--text-dark);
  background: var(--bg-card);
  border-color: var(--card-border);
}
/* 캐치테이블 버튼 — 캐치테이블 브랜드색 */
.store-btn.book {
  color: #fff;
  background: #FF3D00;
  border-color: #FF3D00;
}
/* 오픈 예정 지점의 전화 — 번호가 아직 없거나 걸어도 소용없어 누를 수 없게. 크림 보조버튼을 바래게
   (book--soon과 같은 원리: 어둡게 하면 눌린 활성처럼 보이므로 연하게) */
.store-btn.tel--soon {
  color: #c3b7ad;
  background: #f6f1ec;
  border-color: #e8ded1;
  cursor: default;
  pointer-events: none;
}
/* 오픈 예정(캐치테이블 아직 안 열린 지점) — 캐치테이블 주황을 연하게 바랜 비활성 버튼
   (어둡게 X → 눌린 활성처럼 보임. 연하게 desaturate O → 곧 캐치테이블 될 자리 힌트 + 비활성) */
.store-btn.book--soon {
  color: #c98a76;
  background: #fbe2d9;
  border-color: #f2cabb;
  cursor: default;
  pointer-events: none; /* 클릭·호버·누름 없음 */
}
@media (hover: hover) {
  .store-btn.map:hover,
  .store-btn.tel:hover { background: #ece1d7; border-color: var(--card-hover-border); }
  .store-btn.book:hover { background: #E63700; border-color: #E63700; }
}
/* 누름(press) 반응 — 살짝 눌리고 진해짐 */
.store-btn:active { transform: scale(.96); }
.store-btn.map:active,
.store-btn.tel:active { background: #e4d7ca; border-color: var(--card-hover-border); }
.store-btn.book:active { background: #CC3100; border-color: #CC3100; }

/* 주소 복사 버튼 — 주소 줄 오른쪽 끝에 아이콘만(네모칸 없이).
   margin-left:auto로 남는 공간을 왼쪽 여백이 먹어 아이콘을 항상 오른쪽 끝으로 밀어냄
   → 짧은 주소든 긴 주소든 아이콘이 오른쪽에 세로로 나란히 정렬(일관성). 2줄이면 오른쪽 위. */
.store-info--addr { align-items: flex-start; }
/* keep-all = 한글을 글자 단위가 아니라 띄어쓰기(단어) 단위로만 줄바꿈 → "2층"이 "2"/"층"으로 안 쪼개짐 */
.store-addr { flex: 0 1 auto; min-width: 0; word-break: keep-all; }
.store-copy {
  flex: none;
  margin-left: auto; /* 오른쪽 끝으로 밀착(주소 길이와 무관하게 항상 오른쪽 정렬) */
  margin-top: 2px;   /* 첫 줄 텍스트 높이에 맞춤 */
  padding: 1px;
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, color .15s;
}
.store-copy:active { transform: scale(.86); }
@media (hover: hover) {
  .store-copy:hover { color: var(--text-dark); }
}
.store-copy.copied { color: var(--brand-red); }
.store-copy .ic-check { display: none; }
.store-copy.copied .ic-copy { display: none; }
.store-copy.copied .ic-check { display: block; }

/* 지도 앱 드롭다운(지도 버튼에서 위로 펼침 — 하단 탭바에 안 가리게) */
.map-dd {
  position: relative;
  flex: 1;
  display: flex;
}
.map-dd > .store-btn.map { width: 100%; }
.map-dd-menu {
  position: absolute;
  top: calc(100% + 6px);   /* 기본: 아래로 펼침(누른 매장 이름 안 가림) */
  left: 0;
  min-width: 170px;
  background: var(--bg-cream);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(80, 30, 20, .18);
  z-index: 30;
  display: none;
}
/* 아래 공간 부족(화면 하단·탭바 근처)할 때만 위로 뒤집음 */
.map-dd--up .map-dd-menu {
  top: auto;
  bottom: calc(100% + 6px);
}
.map-dd.open .map-dd-menu { display: block; }
.map-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dark);
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
@media (hover: hover) {
  .map-dd-item:hover { background: rgba(255, 255, 255, .6); }
}
.map-dd-ic {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-drag: none;
}

/* 상단바 섹션 제목 (메뉴·스탬프 섹션일 때 탭 자리에 표시) */
.topbar-section-title {
  display: none;
  flex: none;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--text-darkest);
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* 레시피 카테고리 탭·검색: 레시피에서만 */
.page:not([data-section="recipe"]) .tabs-group--recipe,
.page:not([data-section="recipe"]) .search-box {
  display: none;
}
/* 매장 지역 탭 제거(2026-07-23 사용자 요청) — 상단바는 로고 줄만. 항상 숨김(모든 지점 노출) */
.tabs-group--store { display: none; }
/* 발도장 기록하기 버튼 — 뷰 안 '다녀온 매장 N곳' 줄 오른쪽 끝에 배치(2026-07-23) */
.stamp-write-btn { flex: none; gap: 5px; } /* 연필 SVG 아이콘 ↔ 글자 간격 */
/* 섹션 제목: 어느 섹션에도 상단바에 표시 안 함(로고만) — 메뉴 '메뉴' 글자도 제거(2026-07-24) */
.page:not([data-section="recipe"]):not([data-section="store"]):not([data-section="stamp"]):not([data-section="menu"]) .topbar-section-title {
  display: inline-block;
}

/* ===== 하단 플로팅 탭바 ===== */
/* 배민식 떠 있는 알약 탭바(2026-07-20). 반투명 블러 알약 + 활성 탭 위 "유리 렌즈 버블".
   버블은 바 위아래로 살짝 삐져나오고(overflow:visible), 드래그로 끌어서 탭 전환 가능(script.js 탭바 드래그).
   touch-action:none = 드래그 제스처를 브라우저 스크롤이 가로채지 않게. */
.tabbar {
  position: fixed;
  left: 50%;
  /* 사파리↔PWA 높이 각자 최적(2026-07-21 사용자 확정).
     사파리: 자체 하단 툴바 위 12px — "딱 좋다" 확정.
     PWA(아래 display-mode 오버라이드): 홈 인디케이터(safe-area)+26px ≈ 60px — 38px은 낮다는 피드백. */
  bottom: 12px;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 412px; /* 앱 폭 440 - 좌우 여백 28 */
  z-index: 50;
  display: flex;
  justify-content: space-around;
  gap: 2px;
  padding: 5px 10px; /* 세로 슬림(8→5) — 버블(76px)이 더 삐져나와 렌즈 느낌 강조 */
  background: rgba(252, 249, 245, .55); /* 더 투명하게(.78→.55), 블러가 가독성 담당 */
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 24px; /* 캡슐(999)→라운드 사각: 원형 버블과 형태 대비(2026-07-21). 20→24로 살짝 더 둥글게 */
  box-shadow: 0 8px 28px rgba(43, 18, 13, .16);
  /* 채도 1.6→1.15: 뒤에 빨간 버튼이 지나갈 때 바에 빨간 기운이 번지던 것 완화 */
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  overflow: visible;
  touch-action: none;
}

/* 활성 탭 뒤에서 옆으로 미끄러지는 빨간 원(하이라이트).
   블러 안에서도 뚝뚝 끊기지 않게 독립 레이어(will-change)로 띄우고 위치(transform)만 부드럽게 굴림.
   width/height는 트랜지션 없이 JS가 매 프레임 맞춤(축소/확대 시 더디게 안 쫓아오게). */
/* 인디케이터 2상태(배민식, 2026-07-21). 크기·위치는 script.js가 인라인으로 지정.
   ① 기본(정지) = 불투명 필: 활성 탭을 감싸고 바 안에 딱 맞음.
   ② 이동 중(.tabbar-indicator--glass) = 유리구슬: 원형(76px)으로 변신해 바 밖으로 삐져나오며 미끄러짐.
   도착하면 JS가 클래스를 떼고 필 지오메트리로 복귀 — 아래 transition이 변신을 부드럽게 이어줌. */
.tabbar-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border-radius: 19px; /* 바(R24) 안에 맞는 필 라운드 (16→19) */
  background: #F5D9D2; /* 정지 상태: 따뜻한 로즈 크림 필 — 위에 얹히는 빨강 아이콘과 같은 웜 계열이라 조화(배민식 쿨 회색과 차별). 이력: 웜 #EDE7DF(모래색)→중립 #EBEBED→더스티레드 #C4574B(기각)→쿨 #E4E4E7→웜 로즈 #F5D9D2(2026-07-21, 회색+빨강 온도 충돌 해결) */
  border: none;
  box-shadow: none; /* 정지 땐 그림자·투명감 없이 순수 채움 (유리 질감은 --glass에서만) */
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transition:
    transform .28s cubic-bezier(.4, 0, .2, 1),
    /* 유리구슬→필 복귀 모프를 빠릿하게(.2s→.13s ease-out, 2026-07-21).
       이동 시작 땐 JS가 transition:none이라 이 값은 "필로 복귀"에만 작동 → 이동 슬라이드는 그대로. */
    width .13s ease-out, height .13s ease-out,
    border-radius .13s ease-out, background .13s ease-out,
    box-shadow .13s ease-out, border-color .13s ease-out;
}
/* 표면 반사광 블롭 — 유리구슬 상태에서만 */
.tabbar-indicator::before {
  content: '';
  position: absolute;
  left: 16%;
  top: 9%;
  width: 40%;
  height: 26%;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  filter: blur(1px);
  opacity: 0;
  transition: opacity .2s ease;
}

/* 이동 중 유리구슬 상태 — 렌즈(backdrop)+반사광+가장자리 광택 */
.tabbar-indicator--glass {
  border-radius: 50%;
  background: radial-gradient(140% 140% at 30% 18%,
    rgba(255, 255, 255, .58) 0%,
    rgba(255, 244, 242, .12) 38%,
    rgba(245, 217, 210, .10) 60%,
    rgba(224, 48, 30, .12) 100%); /* 중심은 맑은 유리(흰 반사광) 유지, 가장자리로 갈수록 은은한 브랜드 빨강 틴트 → 로즈 필에서 굴러나올 때 색이 안 빠지고 "로즈 유리구슬"로 이어짐(2026-07-21) */
  border: 1px solid rgba(255, 255, 255, .60);
  /* 가장자리 빨강 엣지광(2026-07-21): 원래 무지개 색수차 → 브랜드 빨강 단색으로 은은하게.
     쿨한 시안이 웜 팔레트(로즈·크림·빨강)와 유일하게 어긋나 빼고, 같은 빨강 계열로 통일.
     프리즘 분광감은 줄지만 톤이 정돈됨. 세기는 alpha·blur로 조절. */
  box-shadow:
    -2px 0 5px rgba(224, 48, 30, .30),
    2px 0 5px rgba(224, 48, 30, .30),
    0 6px 16px rgba(43, 18, 13, .22),
    inset 0 1.5px 2px rgba(255, 255, 255, 1),
    inset 0 -2px 3px rgba(255, 255, 255, .55),
    inset 5px 9px 12px -6px rgba(255, 255, 255, .55),
    inset -6px -10px 16px -8px rgba(120, 70, 50, .20);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.5) brightness(1.12);
  backdrop-filter: blur(1.5px) saturate(1.5) brightness(1.12);
}
.tabbar-indicator--glass::before { opacity: 1; }

.tabbar-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 62px;
  padding: 4px 12px; /* 세로 슬림(7→4) — 바 전체 높이 축소 */
  border: none;
  border-radius: 999px;
  background: none;
  color: #4D4139; /* 비활성 = 따뜻한 진회색(흐린 회갈색 --text-muted는 반투명 바에서 안 보임). 순검정은 활성 빨강과 대비 죽어 지양 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, min-width .24s ease, padding .24s ease;
}
.tabbar-icon {
  display: block;
  width: 22px;
  height: 22px;
  transition: width .24s ease, height .24s ease;
}
/* 라벨은 모든 탭에 표시(아이콘 밑) — 스크롤 내리면 접힘 */
.tabbar-label {
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  max-width: 60px;
  max-height: 16px;
  overflow: hidden;
  transition: max-width .24s ease, max-height .24s ease, opacity .18s ease;
}
.tabbar-btn.active {
  color: var(--brand-red); /* 회색 박스 위 브랜드 빨강 글씨·아이콘 */
}
/* 드래그 중 "버블 밑 탭만 빨강"(2026-07-21):
   출발(active) 탭도 회색으로 풀고, 버블이 지나는 탭(--candidate)만 브랜드 빨강.
   .active.candidate 변형까지 명시해 버블이 출발 탭 위에 있을 때도 빨강이 이김.
   전환은 .tabbar-btn의 transition:color .15s가 부드럽게 담당. */
.tabbar--dragging .tabbar-btn.active {
  color: #4D4139; /* 드래그 중엔 출발 탭 빨강 해제 → 회색 */
}
.tabbar--dragging .tabbar-btn--candidate,
.tabbar--dragging .tabbar-btn--candidate.active {
  color: var(--brand-red); /* 버블 밑 탭만 빨강 */
}
@media (hover: hover) {
  .tabbar-btn:not(.active):hover {
    color: var(--text-dark);
  }
}

/* 스크롤 축소(compact) 시각효과 제거(2026-07-20) — 바닥 고정 바는 높이가 변하지 않는 게 표준(29CM·토스).
   script.js는 여전히 .tabbar--compact 클래스를 토글하지만(WAAPI 인디케이터 FLIP과 얽혀 있어 JS는 안 건드림),
   아래 규칙이 없으므로 화면상 아무 변화 없음. 복원하려면 git 이력(1b74a4b) 참고. */

/* 최종 위치 측정용(FLIP): 한 프레임 안에서 펼친 상태를 재보고 되돌릴 때 트랜지션 개입 금지 */
.tabbar--freeze,
.tabbar--freeze * {
  transition: none !important;
}

/* 탭바가 마지막 콘텐츠·푸터를 가리지 않도록 하단 여백 확보.
   = 탭바 bottom(max 공식, 위 .tabbar와 동일하게 관리) + 바 높이(~59px) + 여유(~20px). */
.main {
  padding-bottom: 92px; /* 탭바 bottom 12 + 바 높이 ~59 + 여유 ~20 */
}
/* 홈 화면 웹앱(PWA)에서만: 탭바를 홈 인디케이터 위로 넉넉히 */
@media (display-mode: standalone) {
  .tabbar { bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); }
  .main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 106px); }
}

/* ============================================================
   발도장 (방문 기록 일기 — 수집 아님: 진행바·총계 없음)
   - 상단바: 지역 탭(매장과 동일) + ✏️ 기록하기(오늘의 소스 스타일)
   - 본문: "다녀온 매장 N곳" + 가로 기록 카드(스티커 왼쪽, 날짜→매장명→메모)
   - 정렬: 날짜 최근순, 같은 날짜면 나중에 기록한 것이 위(addedAt)
   - 입력 시트: 점선 슬롯 → 지점 고르고 "발도장 찍기" → 스티커 탁! (stampPop)
   스티커 카드 비율 = 0.58 고정. 에셋 처리(.claude/make_stickers.py)가 모든 스티커를
   600×1034 라운드 다이컷으로 재조립 → 카드마다 크기·틀 동일. 앱은 drop-shadow만.
   ============================================================ */
.stamps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.stamps-count {
  margin: 0;
}

/* 기록 카드 그리드 — 가로 카드라 minmax를 넓게: 모바일 1칸, 데스크탑 2칸(3칸 안 나옴) */
.stamps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  column-gap: 24px;
  row-gap: 14px;
  align-items: start;
}
@media all {
  /* 모바일 = 한 줄에 2개(사용자 확정) — 컴팩트 가로 카드라 2칸이어도 날짜·매장명이 들어감 */
  .stamps {
    /* minmax(0,·)가 핵심: 그냥 1fr이면 최소값이 auto라, 긴 동행("회사 사람들이랑…") 한 줄이
       칸을 넓혀 2칸이 250px/166px로 짝짝이가 된다. 0을 최소로 박아야 칸이 반반 유지되고
       넘치는 글자는 .stamp-rec-with의 …로 넘어간다. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 10px;
  }
  .stamp-rec {
    gap: 10px;
    padding: 9px 11px;
    border-radius: 14px;
  }
  .stamp-rec .stamp-tile { width: 40px; }
  /* 특이성(.stamps 접두)을 기본 규칙보다 높여 모바일 11px가 확실히 이김 — 2칸에서 날짜 한 줄 폭 확보 */
  .stamps .stamp-rec-date { font-size: 11px; } /* 동행(.stamp-rec-with)은 13.5px 유지 — 날짜보다 크게 */
}

/* 컴팩트 가로 기록 카드 — 리스트는 색인(날짜·매장명만, 한 화면 6개 목표),
   메모·동행 등 상세는 카드 탭 → 수정 시트에서. 크림 박스는 매장 카드와 통일 */
.stamp-rec {
  display: flex;
  align-items: center;
  min-width: 0; /* 그리드 칸(minmax(0,1fr))보다 커지지 않게 — 긴 글자는 카드를 넓히지 말고 … 처리 */
  gap: 14px;
  background: var(--bg-cream);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 9px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, border-color .15s;
}
@media (hover: hover) {
  .stamp-rec:hover { border-color: var(--brand-red); }
}
.stamp-rec:active { transform: scale(.985); }
.stamp-rec .stamp-tile { width: 44px; flex: none; }
.stamp-rec-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* 스티커 기준 세로 가운데정렬(2026-07-24) — .stamp-rec align-items:center 상속 */
}
.stamp-rec-date {
  font-size: 12px;
  /* 매장명과 같은 진한 색(2026-07-24 사용자 확정 = 날짜·매장 검정 / 동행만 회색).
     크기 차이(11px vs 16px)로 위계를 주고, 색은 '기록의 사실'끼리 묶는 쪽을 택함. */
  color: var(--text-darkest);
  /* 날짜는 한 줄 유지 — 2칸 배치에서 "…21"/"일"로 CJK 줄바꿈되던 것 방지.
     모바일 폭은 아래 `.stamps .stamp-rec-date`(11px)로 맞춤(특이성 높여 확실히 적용). */
  white-space: nowrap;
}
.stamp-rec-name {
  /* 매장 탭 카드 이름(.store-name)과 같은 글씨체·굵기. 2칸 컴팩트 카드라 스티커가 주역 → 지점명은
     보조 정보로 살짝 작게(날짜 11px와 균형). 사용자가 17px도 크다고 해서 16px로. */
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--text-darkest);
}
/* 동행 — 이름 아래 회갈색. 날짜(11px)보다 크게(누구랑 갔는지가 더 눈에 들어오게). 있을 때만 렌더됨 */
.stamp-rec-with {
  font-size: 13.5px;
  color: var(--text-muted);
  white-space: nowrap;
  /* 직접 입력은 길이 제한이 없어 카드를 밀어낼 수 있다 → 넘치면 …로 자른다(전체는 카드 탭 → 보기 모달에). */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 빈 상태 — 전체(첫 기록 유도) / 지역(그 지역만 없음) 공용 */
.stamp-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 52vh;               /* 메뉴 빈화면(.view-empty)과 동일하게 세로 가운데정렬(2026-07-24). 폴백 */
  min-height: 52svh;              /* .page와 같은 이유로 svh — 위 .page 주석 참고 */
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}
.stamp-empty-text { margin: 0; }
.stamp-empty .stamp-empty-paw {
  display: block;
  font-size: 36px;
  margin-bottom: 10px;
  opacity: .45;
}
.stamp-empty .stamp-empty-pen { vertical-align: -2px; margin-right: 3px; } /* 문구 속 연필 SVG 정렬 */
/* 스티커 = 투명 배경 라운드 다이컷 PNG. 앱은 그림자만 얹음(다이컷·테두리는 에셋에 구움).
   그래서 사용자가 픽셀메이터로 만든 사각 카드도, 처리 스크립트가 흰 외곽선+라운드+투명을
   입혀 '스티커'로 만들어줌 → 앱은 drop-shadow로 떠 있는 느낌만. */
.stamp-tile {
  position: relative;
  aspect-ratio: 0.58;
}
.stamp-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* 두 겹 그림자(2026-07-24) — 한 겹이면 흐림이 내림보다 커서 위쪽으로도 번져 '떠 있는' 인상이 된다.
     닿는 면(짧고 진하게) + 확산(넓고 연하게)으로 나누면 종이가 놓인 것처럼 보인다. 세 곳 모두 같은 방식. */
  filter: drop-shadow(0 0.5px 1px rgba(80, 30, 20, 0.22)) drop-shadow(0 2px 3.5px rgba(80, 30, 20, 0.13));
}
/* 아직 그림 없는 지점의 자리표시 카드 — 스티커 톤에 맞춘 라운드 카드 */
.stamp-ph {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  border: 3px solid #fff;
  outline: 1.5px solid #E6D8C9;
  background: linear-gradient(180deg, #FBF4EC 0%, #F1E3D4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 5px rgba(80, 30, 20, 0.16);
}
.stamp-ph span {
  font-size: 44px;
  opacity: 0.4;
}
/* 지점명 밴드 — 스티커 그림의 하단 빈 띠 위에 앱이 얹는 글자.
   위치는 에셋의 밴드(안쪽 그림 하단 13.5%)에 맞춤. */
.stamp-band {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 3%;
  height: 12.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--brand-red);
  letter-spacing: 0.5px;
}
/* (구 ➕ 추가 타일·타일 밑 캡션 제거 — 기록하기는 상단바 버튼, 날짜·메모는 카드 안으로) */

/* ── 입력 시트 — 데스크탑=가운데 모달 / 모바일=레시피 상세처럼 상단바 아래 전체화면 ── */
.stamp-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 18, 13, 0.45);
  z-index: 205; /* 레시피 모달(200)과 같은 층, 토스트(210) 아래 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.stamp-sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.stamp-sheet {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior-y: contain; /* 맨 위에서 당겨도 브라우저 새로고침으로 안 번지게(레시피 모달과 동일) */
  background: var(--bg-cream);
  border-radius: 22px;
  padding: 24px 20px;
  transform: translateY(24px);
  transition: transform 0.26s cubic-bezier(.3, .9, .3, 1);
}
.stamp-sheet-overlay.open .stamp-sheet { transform: translateY(0); }
/* 모바일: 레시피 상세와 같은 문법 — 상단바 아래 전체화면(상단바는 그대로 동작),
   불투명 배경 + 둘레 8px 틈으로 카드가 화면에 얹힌 느낌 유지 */
@media all {
  .stamp-sheet-overlay {
    top: var(--topbar-h, 0px); /* JS(syncTopbarH)가 상단바 실제 높이를 넣어줌 */
    padding: 8px;
    background: var(--bg-card);
    align-items: stretch;
  }
  .stamp-sheet {
    max-width: 440px;
    height: 100%;
    max-height: none;
    box-sizing: border-box;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 발도장 보기 모달 (카드 탭 시, 읽기 전용) — 입력 시트와 같은 오버레이 문법 ── */
.stamp-view-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 18, 13, 0.45);
  z-index: 205; /* 입력 시트와 같은 층 */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.stamp-view-overlay.open { opacity: 1; pointer-events: auto; }
.stamp-view {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-cream);
  border-radius: 22px;
  padding: 20px 20px 16px;
  transform: translateY(24px);
  transition: transform 0.26s cubic-bezier(.3, .9, .3, 1);
}
.stamp-view-overlay.open .stamp-view { transform: translateY(0); }
.stamp-view-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: #4D4139;                 /* 원 배경 제거 + 상단바 아이콘색 통일 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.stamp-view-close:hover { color: var(--brand-red); }
.stamp-view-close:active { color: var(--brand-red); transform: scale(.9); }
/* 스티커+정보 = 가운데(빈 공간 자연스럽게), 버튼은 맨 아래 */
.stamp-view-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
}
/* 스티커를 아래 정보 박스와 같은 폭으로(사용자 요청) + 붙이기 시트와 같은 점선 자리를 두른다.
   점선은 ::before로 깔고 스티커에 z-index를 줘 위로 올린다(inset -12px만큼 위아래 여백도 확보). */
/* 크기 기준 = "동행 직접입력 20자 + 메모 40자(둘 다 최대)일 때도 스크롤이 안 생기는 최대"로 실측(구 168px).
   정보 박스와 같은 폭(295px)까지 키워봤으나 0.58 세로비라 높이가 508px이 되어 닫기 X를 덮고
   스크롤이 51px 생겼고, 230px도 메모 2줄이면 38px 넘쳤음 → 185px로 확정(2026-07-24).
   min()은 좁은 기기 대비 — 점선이 사방 12px 나오므로 100%에서 24px을 뺀다. */
.stamp-view-sticker { width: min(185px, 100% - 24px); margin: 54px auto 34px; position: relative; }
.stamp-view-sticker::before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 2.5px dashed #D6C6BA;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
}
.stamp-view-sticker > * { width: 100%; position: relative; z-index: 1; }
.stamp-view-sticker img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(80, 30, 20, 0.22)) drop-shadow(0 5px 9px rgba(80, 30, 20, 0.13));
}
.stamp-view-sticker .stamp-ph { aspect-ratio: 0.58; } /* 그림 없는 지점 자리표시 */
.stamp-view-info {
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stamp-view-row { display: flex; gap: 12px; font-size: 15px; line-height: 1.45; }
.stamp-view-label { color: var(--text-muted); flex: none; width: 44px; font-size: 14px; padding-top: 1px; }
.stamp-view-val { color: var(--text-dark); word-break: break-word; }
.stamp-view-btns { display: flex; gap: 10px; margin-top: 16px; }
.stamp-view-btn {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 누름 반응은 '스티커 붙이기'(.stamp-submit)와 같은 값으로 통일 — 살짝 눌리고 색이 진해진다(2026-07-24) */
  transition: background .12s, color .12s, transform .08s;
}
.stamp-view-btn:active { transform: scale(0.98); }
.stamp-view-edit { background: var(--brand-red); color: #fff; }
.stamp-view-edit:active { background: var(--brand-red-active); }
.stamp-view-delete { background: #F3EDE7; color: #B0554A; white-space: nowrap; }
.stamp-view-delete:active { background: #E7DCD3; }                         /* 크림 버튼은 한 톤 진하게 */
.stamp-view-delete.armed { background: var(--brand-red); color: #fff; }    /* 두 번 눌러 삭제 — 확인 상태 */
.stamp-view-delete.armed:active { background: var(--brand-red-active); }   /* 확인 상태는 빨강 눌림색 */
/* 확인 상태면 '수정'이 줄고 '삭제'가 넓어져 "한 번 더 누르면 삭제돼요"가 한 줄에 들어간다(2026-07-23).
   flex-basis 100px = 글자폭(0 0 auto)이면 56px까지 쪼그라들어 눌러야 할 버튼으로 안 보였던 것 보완(2026-07-24).
   삭제 문구는 패딩 포함 182px이면 한 줄에 들어가므로 319px 행에서 209px이 남아 넉넉하다.
   `0 1`(줄어들 수는 있음)이라 더 좁은 기기에선 수정이 먼저 양보해 문구 줄바꿈을 막는다. */
.stamp-view-btns:has(.stamp-view-delete.armed) .stamp-view-edit { flex: 0 1 100px; }

/* 모바일: 상단바 아래 전체화면 (레시피 상세·입력 시트와 동일) */
@media all {
  .stamp-view-overlay {
    top: var(--topbar-h, 0px);
    padding: 8px;
    background: var(--bg-card);
    align-items: stretch;
  }
  .stamp-view {
    max-width: 440px;
    max-height: none;
    flex: 1;
    border-radius: 18px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

.stamp-sheet-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: #4D4139;                 /* 원 배경 제거 + 상단바 아이콘색 통일 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.stamp-sheet-close:hover { color: var(--brand-red); }
.stamp-sheet-close:active { color: var(--brand-red); transform: scale(0.9); }

/* 점선 슬롯 — 스티커가 붙을 자리 */
.stamp-slot {
  width: 158px;
  aspect-ratio: 0.58;
  /* 점선 자리가 아래 inset:-12px로 슬롯 밖까지 나오므로 위아래 여백을 그만큼 더 준다
     (예전 4px/16px 그대로면 점선이 메모칸·붙이기 버튼에 바짝 붙는다) */
  margin: 26px auto 36px;
  position: relative;
}
.stamp-slot-empty {
  position: absolute;
  /* 스티커보다 한 겹 크게 — 스티커가 -3.5° 비스듬히 붙어도 점선이 사방에 고르게 남아 액자처럼 감싼다.
     inset:0이던 시절엔 똑바른 점선의 한쪽 모서리만 삐져나와 '그림자 낀 것처럼' 보였다(2026-07-24). */
  inset: -12px;
  border: 2.5px dashed #D6C6BA;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  text-align: center;
}
.stamp-slot-paw { font-size: 34px; opacity: 0.4; }
.stamp-slot-hint {
  font-size: 12px;
  font-weight: 600;
  color: #B7A699;
  line-height: 1.4;
}
/* 슬롯에 붙는 스티커 카드 (제출 시 JS가 생성) */
.stamp-slot-card {
  position: absolute;
  inset: 0;
}
.stamp-slot-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 1.5px rgba(80, 30, 20, 0.22)) drop-shadow(0 4px 7px rgba(80, 30, 20, 0.13));
}
.stamp-slot-card.pop {
  animation: stampPop 0.55s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes stampPop {
  0%   { transform: scale(2.1) rotate(-18deg); opacity: 0; }
  55%  { transform: scale(0.93) rotate(-2deg); opacity: 1; }
  78%  { transform: scale(1.045) rotate(-5deg); }
  100% { transform: scale(1) rotate(-3.5deg); }
}

/* 붙는 동안의 그림자 — 착지(55%)에 맞춰 그림자도 '탁' 확정시킨다.
   img에 고정 filter만 두면 그림자가 부모 scale(2.1→0.93→1.045→1)에 딸려 다녀서,
   스티커는 0.30초에 붙었는데 그림자만 0.55초까지 출렁여 한 박자 늦어 보였다(2026-07-24).
   ⚠️ 각 구간의 drop-shadow 개수를 2개로 맞춰야 브라우저가 부드럽게 보간한다(개수가 다르면 뚝 끊김). */
.stamp-slot-card.pop img {
  animation: stampShadowDrop 0.55s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes stampShadowDrop {
  /* 공중 — 아직 안 닿았으니 거의 안 보이게(부모 scale 2.1배라 값이 커 보이는 것도 감안) */
  0%, 45% { filter: drop-shadow(0 1px 1.5px rgba(80, 30, 20, 0.05)) drop-shadow(0 3px 6px rgba(80, 30, 20, 0.06)); }
  /* 닿는 순간 — 살짝 더 진하게 눌러 붙는 맛을 준다 */
  55%     { filter: drop-shadow(0 1px 1.5px rgba(80, 30, 20, 0.26)) drop-shadow(0 3px 6px rgba(80, 30, 20, 0.16)); }
  /* 최종 = 평상시 값(.stamp-slot-card img)과 동일해야 연출이 끝나도 안 튄다 */
  100%    { filter: drop-shadow(0 1px 1.5px rgba(80, 30, 20, 0.22)) drop-shadow(0 4px 7px rgba(80, 30, 20, 0.13)); }
}

.stamp-q {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}
/* 필수 항목 별표 — 날짜·매장(필수)에만. 선택 항목(누구랑·메모)은 "(선택)" 문구로 구분 */
.stamp-q-star {
  color: var(--brand-red);
  margin-left: 3px;
}
/* 시트 맨 위 범례 — 별표 뜻을 알려줌 */
.stamp-req-note {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.stamp-req-star {
  color: var(--brand-red);
  margin-right: 1px;
}
/* 매장 선택 드롭다운 — 알약 버튼+슬라이드다운 메뉴 문법, 시트 폭에 맞춘 풀와이드.
   버튼 룩은 날짜·메모 필드(.stamp-field)와 통일(흰 배경 + 1.5px 테두리 + radius 12). */
.stamp-dd {
  position: relative;
  margin-bottom: 16px;
}
.stamp-dd-btn {
  display: flex;
  align-items: center;
  gap: 10px; /* 날짜·메모 필드(.stamp-field)와 같은 라벨-값 간격 */
  width: 100%;
  height: 44px;
  border: 1.5px solid var(--card-border);
  background: #fff;
  color: var(--text-dark);
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 0 13px;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.stamp-dd-current {
  flex: 1;          /* 값이 남는 폭을 차지 → 화살표는 오른쪽 끝 고정 */
  min-width: 0;
  text-align: left;
  font-weight: 400; /* 선택값(매장·동행)은 얇게 — 라벨만 굵게 */
}
.stamp-dd-current.placeholder { color: var(--text-muted); } /* 아직 선택 전 */
.stamp-dd-chev { color: #B9ABA3; flex: none; transition: transform .15s ease; }
.stamp-dd.open .stamp-dd-btn { border-color: var(--brand-red); }
.stamp-dd.open .stamp-dd-chev { color: var(--brand-red); transform: rotate(180deg); }
.stamp-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-cream);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  z-index: 30;
  display: none;
  max-height: 264px; /* 13곳이라 길어짐 → 메뉴 안에서 스크롤 */
  overflow-y: auto;
}
.stamp-dd.open .stamp-dd-menu { display: block; }
/* 동행 메뉴 = 2열(짧은 항목 6개라 높이 절반). '직접 입력'은 맨 아래 한 줄 전체. */
.stamp-dd.open .stamp-dd-menu--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.stamp-dd-menu--grid .stamp-dd-item { margin: 0; }
.stamp-dd-menu--grid .stamp-dd-item:last-child { grid-column: 1 / -1; }
.stamp-dd-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 13.5px;
  font-weight: 400; /* 메뉴 항목도 얇게 — 선택된 값(400)과 톤 통일 */
  padding: 10px 13px;
  margin: 2px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .stamp-dd-item:not(.active):not(.done):not(.soon):hover {
    background: rgba(224, 48, 30, .08);
    color: var(--brand-red);
  }
}
.stamp-dd-item.active {
  background: #fff;
  color: var(--brand-red);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
/* 눌림(터치·클릭) 피드백 — 터치 땐 지금 반응이 없어서 브랜드 레드 옅은 틴트로 티나게 */
.stamp-dd-item:not(.done):not(.soon):active { background: rgba(224, 48, 30, .14); color: var(--brand-red); }
.stamp-dd-item.done {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}
/* 오픈 예정 매장 — 아직 방문 불가라 흐리게 + 선택 불가, 오른쪽에 "오픈 예정" 칩 */
.stamp-dd-item.soon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  opacity: 0.5;
  cursor: default;
}
.stamp-dd-soon {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0, 0, 0, .05);
  padding: 2px 8px;
  border-radius: 999px;
}
/* 날짜·메모 */
.stamp-fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}
/* hidden 속성이 display:flex에 밀리지 않게 — 동행 '직접 입력' 칸 숨김이 실제로 먹도록 */
.stamp-fields[hidden] { display: none; }
.stamp-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  min-height: 44px; /* 드롭다운 버튼(.stamp-dd-btn 44px)과 같은 높이로 통일 */
  padding: 0 13px;
  box-sizing: border-box;
}
.stamp-field-label {
  flex: 0 0 auto;
  font-size: 14px;   /* 드롭다운 플레이스홀더("매장 선택" 등)와 크기·굵기 통일 */
  font-weight: 600;
  color: var(--text-muted);
}
.stamp-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 400; /* 값(입력 글자)은 얇게 — 라벨(메모·입력)만 굵게, 날짜·드롭다운 값과 통일 */
  color: var(--text-dark);
  padding: 0;
}
.stamp-field input::placeholder {
  color: var(--text-muted); /* 브라우저 기본 차가운 회색 → 다른 칸 플레이스홀더와 같은 회갈색 */
  opacity: 1; /* 파이어폭스가 기본으로 흐리게 깔아서 명시 */
}
/* 안내문구(placeholder) 굵기 연하게 — 동행 '직접 입력' 칸, 메모 칸 공용 */
.stamp-field--light-ph input::placeholder { font-weight: 400; }
/* 날짜 필드 — 브라우저 기본 날짜 입력은 폰트·형식이 시스템 고정이라,
   입력을 투명 오버레이로 깔고(달력 기능만 씀) 보이는 글자는 앱 폰트(.stamp-date-text)로 그림 */
.stamp-field--date {
  position: relative;
  cursor: pointer;
}
.stamp-field--date input[type='date'] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 기능(탭→기기 달력)만 남기고 시스템 글자·아이콘은 숨김 */
  cursor: pointer;
}
/* 데스크탑 버그 수정(2026-07-24): 캘린더 인디케이터를 칸 전체로 확장해 어디를 눌러도 달력이 뜨게.
   (모바일은 원래 아무 데나 탭하면 떴고, 데스크탑만 오른쪽 인디케이터를 눌러야 했음) */
.stamp-field--date input[type='date']::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.stamp-date-text {
  flex: 1;
  min-width: 0;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 14px;
  font-weight: 400; /* 값은 얇게(라벨 '날짜'만 굵게) — 필드명↔값 위계 */
  color: var(--text-dark);
}
.stamp-date-ic {
  flex: none;
  color: #B9ABA3;
}
/* 발도장 찍기 버튼 */
.stamp-submit {
  /* 폭 = 바로 위 스티커 자리의 점선 바깥선과 동일(.stamp-slot 158px + 점선 inset 12px × 2 = 182px).
     입력칸처럼 꽉 채우지 않고 점선에 맞춰 세로로 정렬 → "이 자리에 붙는다"가 한 덩어리로 읽힌다(사용자 제안 2026-07-24).
     ⚠️ .stamp-slot 폭이나 점선 inset을 바꾸면 이 값도 같이 고칠 것. min()은 아주 좁은 기기 대비. */
  width: min(182px, 100%);
  margin-left: auto;
  margin-right: auto;
  display: block;
  border: none;
  border-radius: 13px;
  background: var(--brand-red);
  color: #fff;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 0;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s, opacity 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.stamp-submit:hover { background: var(--brand-red-hover); }
.stamp-submit:active { background: var(--brand-red-active); transform: scale(0.98); }
.stamp-submit:disabled {
  background: #D8CCC2;
  cursor: default;
  transform: none;
}
/* 수정 모드: 삭제 버튼 (v2: 매장 고정 라벨 제거 — 수정에서도 드롭다운으로 매장 변경 가능) */
.stamp-delete {
  width: 100%;
  margin-top: 10px;
  border: none;
  border-radius: 11px;
  background: none;
  color: var(--text-muted);
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.14s, background 0.14s, transform 0.08s;
}
.stamp-delete:active { transform: scale(0.98); }
.stamp-delete.armed {
  color: #fff;
  background: var(--brand-red);
}

/* ═══════════ 홈 7단 섹션 (2026-07-21 확정 구조) ═══════════
   홈 = #view-recipe.is-home(필터 없음): 히어로→셀럽레일→인기소스→가이드→탕→히든메뉴→랜덤뽑기.
   그리드 뷰 = is-home 해제(검색·즐겨찾기·전체보기·인물보기): 기존 list-head + recipe-grid.
   가로 패딩은 .main의 고정 20px을 따르고, 레일은 full-bleed(-20px)로 화면 끝까지 스크롤. */
#view-recipe.is-home .list-head,
#view-recipe.is-home .recipe-grid { display: none; }
#view-recipe:not(.is-home) .home-sec { display: none; }

/* 브라우즈 헤더 닫기(X) — 홈으로 복귀. 카테고리 탭이 항상(전체 포함) 떠 있어 '뒤로가기'보다
   '이 화면 닫기'가 정확함(2026-07-25, 화살표→X로 교체). 터치 타겟 44px, 시각 위치는 화면 오른쪽
   가장자리에 맞추되 탭 영역만 넉넉하게 — 음수 margin으로 상쇄(오른쪽으로 방향만 반전). */
.browse-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -12px -12px -12px 0;
  background: none;
  border: none;
  color: #4D4139; /* 아이콘 액션 버튼(공유·즐겨찾기)과 동일 색으로(2026-07-25, 탭 비활성색에서 변경) */
  cursor: pointer;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
/* 전체보기 버튼(.home-sec-more)과 동일한 인터랙션 — 호버·터치 시 브랜드 빨강 */
.browse-close:hover,
.browse-close:active {
  color: var(--brand-red);
}
/* display:inline-flex가 [hidden]의 UA display:none보다 우선순위 높아 명시적으로 재선언 필요
   (즐겨찾기 켜진 동안 닫기 숨김, 2026-07-25) */
.browse-close[hidden] {
  display: none;
}

/* ── 공통 섹션 헤더 ── */
.home-sec { margin-top: 34px; }
.home-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 2px;
}
.home-sec-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.4; /* iOS 받침 클리핑 방지 — line-height 명시 */
  color: var(--text-dark);
}
.home-sec-cnt { font-size: 14px; font-weight: 600; color: var(--text-muted); }
/* 셀럽 레시피 등 인물 섹션용 변형 — 볼드 빼고(500) '레시피'만 빨강(구 킥커 투톤, 2026-07-21) */
.home-sec-title--light { font-weight: 500; }
.home-sec-title .t-red { color: var(--brand-red); }

/* "셀럽 레시피" 제목의 별 = 범례(2026-07-25) — 카드/모달의 별이 "셀럽 소스"를 뜻한다는 걸
   여기서 학습하게 함. 제목을 침범하지 않고 '셀' 좌측 위 대각선에 붙게 실측 배치
   (카드 별 .hp-name.has-star .star-accent와 동일 비율감으로, 제목 19px에 맞춰 살짝 키움). */
.celeb-sec-title { position: relative; }
/* 실측(Range.getBoundingClientRect 기준) — 처음 값(-12/-7)은 gapX -4px로 '셀' 글자를 4px 침범했음
   → -16px/-3px로 조정해 gapX 0px·gapY 5px(침범 없이 밀착). 화면 좌측 4px 여백 남아 안 잘림 확인. */
/* 2026-07-25 재조정: -16/-3은 '셀' 옆에 나란히 서 있어 대각선 느낌이 없었음 → 위로 올리고 당김. */
.celeb-sec-title .star-accent {
  position: absolute;
  left: -12px;
  top: -8px;
  width: 16px;
  height: 16px;
  z-index: 2;
}
.home-sec-more {
  position: relative;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #4D4139;                     /* 상단바 돋보기·공유 아이콘과 통일(2026-07-22) */
  cursor: pointer;
  min-height: 44px;
  padding: 14px 0 14px 12px;
  margin: -10px 0;
  box-sizing: border-box;
  transition: color .15s;
}
.home-sec-more:hover,
.home-sec-more:active { color: var(--brand-red); }  /* 공유버튼처럼 호버·터치 시 빨강(2026-07-24) */
/* 화살표 = 선으로 그린 쉐브론 아이콘(2026-07-22, 배민식) — 폰트 › 대신 SVG라 각지고 깔끔 */
.home-sec-more-arrow {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: -3px;
}
.home-sec-sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── ② 셀럽 레일 ── */
.celeb-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  margin: 12px -20px 0; /* 부제 제거(2026-07-21) 후 제목과의 간격 확보 */
  padding: 2px 20px 4px;
  -webkit-overflow-scrolling: touch;
}
/* 데스크탑 마우스 드래그 스크롤 커서(가로 레일 공통) */
.drag-scroll { cursor: grab; }
/* 드래그 중엔 grabbing 커서 + scroll-snap 끔(스냅과 충돌해 뚝뚝 끊기는 것 방지). 놓으면 다시 스냅 */
.drag-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.celeb {
  flex: none;
  width: 84px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* 탭 시 검정 음영 안 뜨게 */
}
/* 인스타 스토리식 그라데이션 링: 바깥 .celeb-img(그라데이션+3px padding) → 흰 간격(.celeb-face 2px 테두리) → 얼굴 */
.celeb-img {
  display: flex;
  width: 84px;
  height: 84px;
  padding: 3px;
  border-radius: 50%;
  /* 대각선(225°) 노을 그라데이션 — 우상단=브랜드 빨강 → 주황 → 골드 → 좌하단=노랑 */
  background: linear-gradient(225deg, var(--brand-red) 0%, #F5642A 46%, #FFA838 72%, #FEE181 100%);
  box-shadow: 0 2px 8px rgba(80, 40, 20, .12);
  transition: transform .24s cubic-bezier(.34, 1.5, .64, 1); /* 뗄 때: 살짝 통통 튀며 복귀 */
}
/* 터치 피드백: 누를 땐 부드럽게 살짝 작아지고, 떼면 통통 복귀 */
.celeb:active .celeb-img {
  transform: scale(.9);
  transition: transform .16s ease-out; /* 누를 때: 부드럽게 쑥 */
}
/* 본(터치한) 셀럽 = 인스타식 회색 테두리(세션 한정, 새로고침하면 그라데이션 복귀) */
.celeb--seen .celeb-img { background: #D3CEC4; }
.celeb-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
}
.celeb-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: inherit;  /* 로딩 중엔 뒤 이니셜 대신 같은 색 원으로 덮음(늦게 뜰 때 글자 안 비침) */
}
/* 안쪽 원 경계용 초박(hairline) 테두리 — 밝은 아바타에서 원이 배경에 묻히지 않게 살짝만 */
.celeb-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  pointer-events: none;
}
.celeb-cnt {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--brand-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-card);
}
.celeb-name {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 셀럽 인스타 스토리 뷰어 (항상 다크. z 190 = 레시피 모달 200 아래라 CTA로 모달이 위에 겹침) ── */
/* .story-viewer = 전체화면 배경(데스크탑 양옆 여백), .story-phone = 사이트 본문과 같은 440px 폰 컬럼 */
.story-viewer {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: #1c1c1e; /* 폰 컬럼 바깥 배경(데스크탑에서만 보임) */
  display: none;
  justify-content: center;
  overscroll-behavior: contain;
}
.story-viewer.open { display: flex; }
.story-viewer { --story-dur: 7s; } /* 진행바 자동재생 1칸 시간 */
.story-phone {
  position: relative; /* 탭 존·CTA의 기준 */
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px 14px 0 0;   /* 상단만 살짝 둥글게(시트 느낌, 2026-07-23) */
}
/* 풀블리드 배경: 현재 사진을 흐리게 확대해 폰 컬럼 전체를 채움(새 이미지 없이 몰입감). 텍스트·탭존은 위(z-index 1+) */
.story-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(.5) saturate(1.15);
  transform: scale(1.3);          /* 블러로 생기는 투명 가장자리 가림 */
  pointer-events: none;
}
.story-bg--tint { filter: brightness(.72) saturate(1.05); transform: none; } /* tint 배경은 블러 불필요 */
.story-progress {
  display: flex;
  gap: 4px;
  padding: 10px 10px 0;
  flex: none;
  position: relative;             /* 배경 위로 */
  z-index: 3;
}
.story-seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
}
/* 안쪽 채움 바: 지난 칸=꽉(scaleX 1), 현재 칸=7초에 걸쳐 0→1 애니메이션(누르면 정지) */
.story-seg-fill {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.story-seg.filled .story-seg-fill { transform: scaleX(1); }
.story-seg.current .story-seg-fill { animation: storyFill var(--story-dur, 7s) linear forwards; }
.story-viewer.paused .story-seg.current .story-seg-fill { animation-play-state: paused; }
@keyframes storyFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 4px;
  flex: none;
  position: relative;
  z-index: 3; /* 탭 존 위 */
}
.story-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: #333;
}
.story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-name { color: #fff; font-weight: 400; font-size: 15px; } /* 메인 셀럽 이름처럼 볼드 해제(2026-07-23) */
.story-close {
  margin-left: auto;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;                  /* 아이콘을 정확히 가운데 정렬 → 프사와 세로 중심 일치 */
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent; /* 모바일 기본 검정 탭 음영 끄기(2026-07-23) */
}
.story-close svg { width: 30px; height: 30px; }  /* 얇은 선 × 아이콘 */
.story-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 위 기준 정렬 → 설명 길이 달라져도 이미지 위치 고정(중앙정렬은 덩어리가 밀려 이미지가 움직였음) */
  padding: 14px 0 0;              /* 상단 여백 축소(48→14), 좌우 0 — 사진 폭 꽉 채우기 */
  text-align: center;
  min-height: 0;
  position: relative;
  z-index: 1;
}
.story-img {
  width: 88%;                     /* 살짝 줄임 — 이미지 밖(좌우·아래)은 슬라이드 넘김 영역 */
  max-width: 400px;
  aspect-ratio: 1 / 1;            /* 정사각 = 정사각 원본이라 잘림 없음 */
  border-radius: 0;               /* r값 제거(2026-07-23) */
  object-fit: cover;
  background: #fff;
  cursor: pointer;
}
/* 이미지 탭 위치에 뜨는 '레시피 보기' 토글 — 인스타 상품태그식(어두운 반투명 + 흰 글자 + 화살표) */
.story-recipe-toggle {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -120%); /* 탭 지점 위에 살짝 띄움(손가락에 안 가리게) */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px 10px 15px;
  border: none;
  border-radius: 15px;             /* 라운드 사각(인스타 태그식) */
  background: rgba(44, 44, 46, .92); /* 어두운 반투명 — 블러 없이 평평하게(꼬리와 질감 완전 통일) */
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .38);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: storyToggleIn .16s ease-out;
}
.story-recipe-toggle[hidden] { display: none; }
.story-recipe-toggle svg { width: 16px; height: 16px; color: rgba(255, 255, 255, .75); flex: none; }
.story-recipe-toggle::after {   /* 아래쪽 말풍선 꼬리 — 본체와 같은 색, 위로 살짝 겹쳐 경계선 제거 */
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid rgba(44, 44, 46, .92); /* 본체와 동일 색·불투명, 겹침 없이 딱 맞닿음(bottom -8 = border 8) */
}
@keyframes storyToggleIn { from { opacity: 0; transform: translate(-50%, -108%) scale(.92); } to { opacity: 1; transform: translate(-50%, -120%) scale(1); } }
/* 제목·버전·설명 모두 이미지와 같은 폭(88%)으로 → 왼쪽 끝 정렬 일치, 전부 왼쪽 정렬 */
.story-rname, .story-rver, .story-desc {
  width: 88%;
  max-width: 400px;
  padding-left: 0; padding-right: 0;
  text-align: left;
}
.story-img--emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
}
.story-rname { color: #fff; font-size: 22px; font-weight: 800; margin-top: 20px; letter-spacing: -.02em; }
.story-rver { color: rgba(255, 255, 255, .65); font-size: 14px; margin-top: 4px; }
.story-desc {
  color: rgba(255, 255, 255, .85);
  font-size: 13.5px;
  line-height: 1.65;
  margin-top: 14px;
  width: 88%;                     /* 이미지와 같은 폭 → 왼쪽 끝 정렬 일치 */
  max-width: 400px;
  padding-left: 0; padding-right: 0;
  text-align: left;              /* 설명만 왼쪽 정렬(제목은 가운데 유지) */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-desc b { color: #fff; font-weight: 700; }
/* 좌/우 탭 존 — 헤더(위)·CTA(아래) 영역은 비워 겹침 방지 */
.story-tap {
  position: absolute;
  top: 64px;
  bottom: 28px;                   /* CTA 제거로 아래까지 넓힘 — 이미지 밖 넘김 영역 확대 */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.story-tap--prev { left: 0; width: 32%; }
.story-tap--next { right: 0; width: 68%; }
.story-cta {
  flex: none;
  margin: 0 auto 26px;
  position: relative;
  z-index: 3;
  padding: 13px 30px;
  border-radius: 999px;
  border: none;
  background: #fff;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
.story-cta:active { transform: scale(.96); }
/* 스토리 위에서 연 레시피 모달은 모바일에서도 상단바 자리까지 꽉 덮어 스토리 헤더가 안 비치게 */
@media (max-width: 640px) {
  .modal-overlay.from-story { top: 0; }
}

/* ── ③ 인기 소스 캐러셀 (클린 카드) ── */
.hp-rail {
  display: flex;
  align-items: flex-start; /* 카드가 최대높이로 늘어나 검정칸이 커지는 것 방지 */
  gap: 12px;
  overflow-x: auto;
  margin: 12px -20px 0; /* 부제 제거(2026-07-21) 후 제목과의 간격 확보 — 셀럽 레일과 동일 */
  padding: 0 20px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding: 0 20px; /* 🔴 필수: 스냅이 안쪽 패딩 무시하고 첫 카드를 화면 끝에 붙이는 것 방지 */
}
.hp-card {
  flex: none;
  /* 2장 온전 + 3번째는 순위 배지만(≈44px) 빼꼼 → 가로 스크롤 힌트. 레일 폭(=앱폭) 기준이라 기기 무관 */
  width: calc(50% - 24px);
  scroll-snap-align: start;
  background: #141414;
  border: none;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;   /* 터치 시 검정 음영 제거(2026-07-24) */
}
.hp-thumb, .hc-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #EADFD6;
}
/* 인기 카드(쿠팡이츠식): 1:1 사진(온전히 보임) + 아래 검정 푸터(.hp-foot). 코너는 카드가 클립하므로 thumb는 각지게 */
.hp-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  /* 배경을 푸터와 같은 검정으로 — 호버/클릭 scale 변형 시 사진 아래로 새던 크림색 1px 경계선 제거(2026-07-24).
     기본 .hp-thumb/.hc-thumb 배경(#EADFD6)은 크림 페이지 위의 탕·히든엔 안 보이지만, 검정 푸터 위 인기소스에선 선으로 보였음. */
  background: #141414;
}
.hp-thumb::after { /* 사진 하단→푸터 검정까지, 이징 다단계로 단차 없이 부드럽게 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to top,
    #141414 0%,
    rgba(20, 20, 20, .82) 14%,
    rgba(20, 20, 20, .48) 34%,
    rgba(20, 20, 20, .2) 56%,
    rgba(20, 20, 20, .06) 78%,
    rgba(20, 20, 20, 0) 100%);
  pointer-events: none;
}
/* 🔴 자식 선택자(>)를 반드시 유지할 것. 후손 선택자(.hp-thumb img)로 두면 썸네일 안에 있는
   순위 배지의 메달 <img>까지 잡혀서 썸네일 크기로 부풀어 오른다(2026-07-25 실제 발생).
   썸네일 위에 새 <img>를 얹을 일이 또 생겨도 이 규칙은 직속 이미지만 건드려야 한다. */
.hp-thumb > img, .hc-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hc-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}
/* 1~5위 순위 배지: 전부 같은 검정 알약(쿠팡이츠 방식, 2026-07-25 — 1위만 금색+왕관이던 처리는
   되돌림). 1~3위는 메달 아이콘(.hp-medal)이 앞에 붙어 폭만 넓어지고, 높이는 5개 전부 동일해야
   하므로 inline-flex + 고정 line-height로 img가 baseline에 영향 주지 않게 막는다. 폭은
   min-width 없이 내용에 맞게 자동(1~3위 넓고 4~5위 좁은 게 의도된 결과). */
.hp-rank {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.25;
}
/* .hp-thumb img, .hc-thumb img { width:100%; height:100% }가 (0,1,1) 특이도라 .hp-medal
   단독(0,1,0)보다 세서 메달이 썸네일 크기로 늘어남 — .hp-rank .hp-medal(0,2,0)로 이겨서 고정 */
.hp-rank .hp-medal {
  width: 13px;
  height: 13px;
  display: block;
  flex: none;
}
/* 좋아요 — 검정 푸터 안, 알약 없이 흰 하트+숫자. 푸터는 상단정렬이지만 좋아요만 세로 가운데 */
.hp-like {
  flex-shrink: 0;
  min-width: 44px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  cursor: pointer;
  padding: 12px 4px;
  margin: -12px -4px;
  -webkit-tap-highlight-color: transparent;
}
.hp-like svg { width: 20px; height: 20px; flex-shrink: 0; }
/* 안 누름 = 흰 테두리 하트 / 누름 = 브랜드 빨강 꽉 찬 하트(+숫자도 빨강) */
.hp-like svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (hover: hover) {
  .hp-like:not(.active):hover { color: var(--brand-red); } /* 호버 시 아이콘·숫자 빨강(2026-07-24, 히든 하트와 동일) */
}
.hp-like.active { color: var(--brand-red); }
.hp-like.active svg path { fill: currentColor; stroke: currentColor; }
/* 누를 때 통통 팝 */
@keyframes hpLikePop { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(1); } }
.hp-like.pop svg { animation: hpLikePop .32s ease; }
/* 인기 카드 검정 푸터: 이름/부제(왼) + 좋아요(오른) */
.hp-foot {
  display: flex;
  align-items: flex-start; /* 이름을 항상 상단 같은 위치에 → 부제 유무와 상관없이 이름 높이 일치 */
  justify-content: space-between;
  gap: 8px;
  min-height: 60px; /* 부제 2줄 높이에 맞춤 → 부제 유무와 상관없이 푸터·카드 크기 동일 */
  margin-top: -1px; /* 썸네일 바닥과 겹쳐 소수점 경계 안티앨리어싱 선을 덮음 — scale 변형 시 사진↔검정 사이 밝은 1px 선 제거(2026-07-24) */
  /* 왼쪽만 11→16px(2026-07-25) — 별(.hp-name .star-accent) 자리 확보. 전 카드 공통이라 별 유무와 무관하게
     이름 왼쪽 위치는 항상 같음(모달 .modal-header와 동일 원리). */
  padding: 10px 11px 11px 16px;
  background: #141414;
}
.hp-foot-txt { min-width: 0; }
.hp-foot .hp-name {
  display: block;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 인기소스 카드의 연예인 별(2026-07-25) — 모달 별(18px)과 같은 방식, 카드 글자가 작아 크기만 축소.
   overflow:visible로 덮어써야 별이 안 잘림(긴 이름이면 ellipsis가 사라지지만 별 카드 이름은 다 짧아 문제 없음). */
.hp-foot .hp-name.has-star {
  position: relative;
  overflow: visible;
}
.hp-foot .hp-name.has-star .star-accent {
  position: absolute;
  left: -13px;
  top: -6px;
  width: 11px;
  height: 11px;
  z-index: 2;
}
.hp-foot .hp-sub {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-weight: 400;
  /* 한 줄 고정(2026-07-29) — 부제가 감기면 그 카드만 키가 커져 인기소스 줄이 어긋난다.
     바로 위 .hp-name과 그리드·전체보기의 .card-sub가 이미 같은 처리라 여기만 빠져 있었다.
     쓸 수 있는 폭은 390px 기기에서 80px뿐이다(이름·부제 80 + 하트 44). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-name {
  display: block;
  margin-top: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--text-dark);
}
.hp-src {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-more {
  flex: none;
  width: 100px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 12px;
  background: var(--bg-cream);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  cursor: pointer;
}
.hp-more svg { width: 22px; height: 22px; }

/* ── ④ 초심자 가이드 배너 ── */
/* 하이디라오 앱 아이콘 느낌으로(2026-07-24 사용자 확정). 빨간 박스는 위→아래 세로 그라데이션,
   로고·글씨는 흰색이되 아래로 갈수록 분홍이 배어나오게(로고 png에 이미 구움 + 글씨는 아래 clip:text).
   박스 폭은 다른 섹션처럼 꽉 채우되(좌우 여백 통일), 내용(로고+글씨+화살표)만 가운데로 모음(사용자 확정). */
.home-guide {
  display: flex;
  align-items: center;
  justify-content: center;   /* 내용을 가로 가운데로 */
  gap: 16px;
  width: 100%;
  border: none;
  background: linear-gradient(#F0313A, #C4121A);
  border-radius: 14px;
  padding: 18px;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, filter .15s, box-shadow .15s;
}
/* 누름 = 살짝 들어가고 어두워짐(사이트 공통 scale .98). 데스크탑 hover = 살짝 밝아지고 그림자 뜸 */
.home-guide:active { transform: scale(.98); filter: brightness(.96); }
@media (hover: hover) {
  .home-guide:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(224, 48, 30, .28); }
}
.home-guide-ic {
  flex: none;
  width: 46px;
  height: 46px;
  display: block;   /* 로고가 이미 원형이라 별도 배경 칸 없음 — 사각형에 또 넣으면 답답함 */
}
.home-guide-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 0 1 auto;   /* 폭을 다 차지하지 않고 내용만큼만 → 가운데 모임(꽉 채우던 flex:1에서 변경) */
  text-align: center;
}
/* 제목 = 흰→분홍 세로 그라데이션. background-clip:text라 색은 배경으로 넣고 글자만 비워 통과시킴 */
.home-guide-title {
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.4;
  background: linear-gradient(#fff 20%, #FBD3CF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-guide-sub {
  font-size: 11px;   /* 로고가 커져 좁아진 폭에 한 줄로 들어가는 크기(2026-07-24 실측) */
  line-height: 1.4;
  color: rgba(255, 225, 222, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-guide-arrow {
  margin-left: 8px;   /* 내용 가운데 정렬이라 맨 오른쪽으로 밀지 않고 글씨 옆에 붙임 */
  flex: none;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, .85);
}

/* ── ⑤⑥ 탕·히든메뉴 2열 그리드 (클린 카드) ── */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 12px;
  margin-top: 17px;   /* 헤더와 간격 — 탕 리스트 간격(헤더2px+행padding15px=17px)과 동일하게(2026-07-23) */
}
.hc-card {
  display: flex;            /* 콘텐츠 상단 정렬 — 버전 유무로 카드 높이가 달라도 썸네일·이름이 같은 행에서 안 어긋나게(2026-07-24) */
  flex-direction: column;
  justify-content: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  text-align: center;   /* 그리드 카드 이름 가운데 정렬(2026-07-24) */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;   /* 터치 시 검정 음영 제거(2026-07-24) */
}
/* 컴팩트 리스트(탕·히든) — 29cm식: 큰 썸네일 + 이름 + 오른쪽 세로 하트, 박스 없이 구분선만 */
.home-list { background: none; }
.hc-row {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 15px 0;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hc-row + .hc-row { border-top: 1px solid #E2E2E2; } /* 뉴트럴 그레이(크림톤 X), 살짝 진하게 */
.hc-row:last-child { border-bottom: 1px solid #E2E2E2; } /* 마지막 행 아래도 닫는 선(2026-07-23) */
.hc-row-thumb {
  position: relative; /* 배지·즐겨찾기 오버레이(브라우즈 랭킹 행) 기준점 */
  width: 112px;
  height: 112px;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
  background: #EADFD6;
}
.hc-row-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* > 유지 — 위 3917 주석 참고 */
.hc-row-txt {   /* 리스트 행 텍스트 칼럼(이름 + 부제 세로 쌓기) */
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hc-card .hp-name { font-size: 16px; } /* 탕 그리드 이름만 15→16(2026-07-24) — 인기소스 카드(.hp-name)는 그대로 */
.hc-row-name {
  display: block; /* 기존엔 없어서(span 기본 inline) 브라우즈 카드(.hc-card-txt는 flex가 아님)에서 폭이 안 잡혀
    말줄임(text-overflow)이 동작하지 않고 긴 이름이 좋아요 버튼과 겹치는 버그가 있었음(2026-07-25 발견·수정).
    .hc-row(리스트, flex column의 직속 자식이라 자동 블록화)는 원래도 정상이었어서 이 선언은 영향 없음. */
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 연예인 별(2026-07-25 재조정) — 브라우즈 그리드(.hc-card--browse)·홈 히든메뉴 리스트(.hc-row) 공용.
   overflow:visible로 덮어써야 별이 안 잘림(별 붙는 이름은 전부 짧아 ellipsis 없어도 문제 없음).
   -13px/-6px는 gapX 2px·gapY 6px(실측, Range.getBoundingClientRect 기준)로 살짝 떠 보여
   -11px/-4px로 당김(gapX 0px·gapY 4px, 겹침 없이 밀착 — 모달 별과 같은 비율감). */
.hc-row-name.has-star {
  position: relative;
  overflow: visible;
}
/* 2026-07-25 재조정: 11px는 작아 보인다는 지적 → 13px로 키우고, 위로 올려 대각선 배치. */
.hc-row-name.has-star .star-accent {
  position: absolute;
  left: -10px;
  top: -7px;
  width: 13px;
  height: 13px;
  z-index: 2;
}
/* 부제(탕·히든 카드 공통, 선택) — 그리드는 가운데(부모 text-align 상속), 리스트는 왼쪽 */
.card-sub {
  display: block;
  margin-top: 3px;
  font-size: 13px; /* 탕·히든 부제 공통 13px(2026-07-24) */
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 하트 오른쪽에 숫자(가로 배치) — 2026-07-25 확정, 세로 쌓기에서 변경 */
.hc-row-like {
  flex: none;
  align-self: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 12px 5px;
  margin: -12px -5px;
  -webkit-tap-highlight-color: transparent;
}
.hc-row-like svg { width: 20px; height: 20px; } /* 인기소스 하트(.hp-like svg 20px)와 동일 크기(2026-07-24) */
/* 안 누름 = 회색 테두리 하트 / 누름 = 브랜드 빨강 꽉 찬 하트(+숫자도 빨강) */
.hc-row-like svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (hover: hover) {
  .hc-row-like:not(.active):hover { color: var(--brand-red); } /* 호버 시 아이콘·숫자 빨강(currentColor)로(2026-07-24) */
}
.hc-row-like.active { color: var(--brand-red); }
.hc-row-like.active svg path { fill: currentColor; stroke: currentColor; }
.hc-row-like.pop svg { animation: hpLikePop .32s ease; } /* 누를 때 통통 팝(인기소스와 공유) */
.hc-row-like-n { font-size: 14px; font-weight: 700; line-height: 1; } /* 인기소스 좋아요 숫자(.like-count)와 동일 크기(2026-07-24) */

/* ── 홈 인터랙션(2026-07-24) ──
   호버 = '안쪽 이미지(썸네일)만' 확대(프레임·글씨 고정). 컨테이너 overflow:hidden이 넘치는 부분을 잘라 줌인 효과.
   배너 캡션·카드 이름은 형제라 안 움직인다. 배너 첫장=img, 가이드/칼럼=.mf-colbg(배경이미지) 두 경우 모두 처리.
   클릭/터치 눌림 = 배너·인기소스·히든·탕(프레임 살짝 축소). 배너는 과거(2026-07-23) press를 뺐었으나 2026-07-24 사용자 요청으로 다시 넣음(준비중 배너는 제외).
   셀럽 press(0.9 바운스)는 .celeb-img에 이미 있음. */
.hc-thumb > img, .hc-row-thumb > img,
.mf-hero > img, .mf-colbg, .celeb-face img { transition: transform .2s ease; }
@media (hover: hover) {
  .mf-hero:not(.mf-hero--soon):hover > img,
  .mf-hero:not(.mf-hero--soon):hover .mf-colbg { transform: scale(1.04); }
  .celeb:hover  .celeb-face img   { transform: scale(1.08); }
  /* 좋아요·즐겨찾기 버튼 위에서 호버 중일 땐 카드 확대 효과 제외(2026-07-25) — 버튼 조작과 카드 인터랙션을 분리 */
  .hc-card:not(.hc-card--static):hover:not(:has(.browse-fav:hover, .hc-row-like:hover)) .hc-thumb > img { transform: scale(1.05); }
  .hc-row:hover:not(:has(.hc-row-like:hover)) .hc-row-thumb > img { transform: scale(1.06); }
}
/* 인기소스(검정 푸터) 카드만: transform이 아니라 '크기 변경'으로 줌.
   transform은 이미지를 별도 GPU 레이어로 승격시켜, 잘린 아래 가장자리가 검정 푸터/그라데이션과 1px 어긋나 밝은 경계선이 생김(2026-07-24).
   width/height 방식이 레이어 분리를 없애 선을 많이 줄여주지만, scale 변형(클릭 눌림 등)이 걸리면 소수점 픽셀 안티앨리어싱으로 아주 옅은 1px 선이 남는 건 여전함 — 브라우저 합성 한계라 완전 제거는 보류(사용자 확인, 2026-07-24 넘어감).
   밝은 배경의 탕·히든은 이 선이 안 보여서 그대로 transform 유지. */
.hp-thumb > img { transition: width .2s ease, height .2s ease, margin .2s ease; }
@media (hover: hover) {
  .hp-card:hover:not(:has(.hp-like:hover)) .hp-thumb > img { width: 106%; height: 106%; margin: -3%; }
}
/* 클릭/터치 눌림 = 사이트 전체가 '틀이 눌리는' 느낌으로 통일(2026-07-28 사용자 확정).
   호버는 틀 그대로 + 안의 사진만 확대 / 누름은 사진 그대로 + 틀이 살짝 작아짐 — 이 두 갈래를 지킨다.
   메인배너 .985(큰 요소라 살짝만) · 인기소스 .97 · 셀럽 · 오늘의 소스 버튼이 모두 이 형식이고,
   탕·히든만 이미지가 커지는 방식이라 혼자 달랐다 → 인기소스와 같은 .97로 맞춤.
   ※ 2026-07-24의 '탕·히든은 이미지만 줌인' 결정을 대체한다. 그때 문제는 이미지를 '축소'하면
     줄어든 자리로 컨테이너 배경이 드러나 테두리처럼 보인 것인데, 틀째로 줄이면 그 문제가 없다.
   ※ 히든메뉴(.hc-row)는 행 전체가 아니라 썸네일만 줄인다 — 행에 위아래 구분선(border)이 붙어 있어
     행을 통째로 scale하면 선까지 짧아지며 이웃 행과 어긋난다.
   좋아요·즐겨찾기 버튼을 누르는 중일 땐 카드 자체의 눌림 효과 제외(2026-07-25). */
.mf-hero, .hp-card, .hc-card, .hc-row-thumb { transition: transform .18s ease; }
.mf-hero:not(.mf-hero--soon):active { transform: scale(.985); } /* 큰 요소라 살짝만 */
.hp-card:active:not(:has(.hp-like:active)) { transform: scale(.97); }
.hc-card:not(.hc-card--static):active:not(:has(.browse-fav:active, .hc-row-like:active)) { transform: scale(.97); }
.hc-row:active:not(:has(.hc-row-like:active)) .hc-row-thumb { transform: scale(.97); }

/* ═══════════ 전체보기(브라우즈) 화면 — 전체/소스/히든메뉴/탕 카테고리 탭 (2026-07-25 이중 필터로 재구조화) ═══════════
   탭은 브라우즈 중 항상 표시(list-head 자체가 홈에서 통째로 숨음). 소스만 상위 5개에 순위 배지.
   카드 프레임·색 등 비주얼(구 TCG) 리디자인은 다음 단계 — 이번엔 구조만. */
.browse-cat-tabs {
  flex: none;
}
/* 즐겨찾기(북마크) — 브라우즈 카드 이미지 위 오버레이. 흰 아이콘+그림자로 어떤 사진 위에서도 보이게(Q2 확정).
   발도장 스티커 drop-shadow와 같은 맥락(정적 아이콘 그림자) — 가챠 애니메이션 그래픽의 필터 금지 규칙과는 별개. */
.browse-fav {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)) drop-shadow(0 0 2px rgba(0, 0, 0, .35));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s;
}
.browse-fav svg { width: 18px; height: 18px; display: block; }
.browse-fav svg path { transition: fill .15s; }
@media (hover: hover) {
  .browse-fav:hover { transform: scale(1.08); }
}
.browse-fav.active { color: var(--brand-red); }
.browse-fav.active svg path { fill: currentColor; stroke: none; }
/* 그리드 카드(hc-card) 브라우즈 변형 — 이미지+푸터가 하나의 둥근 카드로 딱 붙음
   (홈 인기소스 .hp-card/.hp-thumb/.hp-foot과 동일 구조 — 검정 대신 밝은 텍스트 영역만 다름).
   배경·테두리는 6안 실기기 비교 후 5번(연한 크림 + 얇은 테두리)으로 확정(2026-07-25). */
.hc-card--browse {
  text-align: left;
  border-radius: 12px;
  overflow: hidden; /* 안쪽 썸네일·푸터는 각지게 두고 카드 전체만 둥글게 클립 */
  border: 1px solid var(--card-border);
}
.hc-card--browse .hc-thumb { border-radius: 0; } /* 카드가 클립하므로 썸네일 자체 라운딩은 끔(hp-thumb와 동일) */
/* 브라우즈 그리드 카드 좌상단 배지 줄(2026-07-25) — 순위 배지(.hp-rank)와 '이달의 소스'(.monthly-badge)를
   가로로 나란히(모달 .modal-badge-row와 같은 방식). 순위 배지 단독일 땐 기존 위치(left7/top7)와 동일하게
   보이도록 슬롯 자체를 그 위치에 두고, 안의 .hp-rank는 absolute를 꺼서 flex 흐름을 따르게 한다. */
.hc-badge-slot {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hc-badge-slot .hp-rank { position: static; }
.hc-card-foot {
  display: flex;
  align-items: flex-start; /* 이름을 항상 같은 위치에 → 부제 유무와 무관하게 이름 위치 일치(hp-foot와 동일 원리) */
  justify-content: space-between;
  gap: 8px;
  min-height: 56px; /* 부제 유무와 무관하게 푸터·카드 높이 통일 */
  margin-top: -1px; /* 썸네일 바닥과 겹쳐 경계 안티앨리어싱 선 제거(hp-foot와 동일 트릭) */
  /* 왼쪽만 10→15px(2026-07-25) — 별(.hc-row-name .star-accent) 자리 확보. hp-foot와 동일 원리. */
  padding: 9px 10px 10px 15px;
  background: #FAF7F4;
}
.hc-card-foot .hc-row-like { align-self: center; }
.hc-card-txt { min-width: 0; }

/* ── ⑦ 랜덤 뽑기 ── */
.home-random {
  margin-top: 40px;
  background: linear-gradient(160deg, #2B120D, #4A1F15);
  border-radius: 16px;
  padding: 26px 20px;
  text-align: center;
  color: #fff;
}
.home-random-dice { font-size: 34px; line-height: 0; }
.home-random-dice img { width: 76px; height: 76px; display: inline-block; } /* Noto 주사위 정지 PNG(c48 포즈, 228px, ~20KB) — 모든 기기 동일. 애니(GIF/APNG=잔끊김·iOS설정, 비디오=iOS 알파 깜빡임) 다 시도 후 정지본으로 확정(2026-07-24) */
.home-random-title {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.4;
}
.home-random-sub {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
.home-random-btn {
  margin-top: 16px;
  display: inline-flex;      /* 평면 주사위 아이콘 + 글자 정렬(2026-07-24) */
  align-items: center;
  gap: 7px;
  background: var(--brand-red);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 14px;       /* 알약 → 둥근 사각(2026-07-24) */
  cursor: pointer;
  transition: transform .08s ease, filter .15s, box-shadow .15s, background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.home-random-btn-ic { width: 18px; height: 18px; flex: none; }
@media (hover: hover) {
  .home-random-btn:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(224, 48, 30, .32); }
}
.home-random-btn:active { background: var(--brand-red-active); transform: scale(.96); }

/* 탭 제거 후 레시피용 탭줄 그룹은 항상 숨김(내용물은 script 참조용으로만 DOM 유지) */
.tabs-group--recipe { display: none !important; }
/* 즐겨찾기 버튼(topbar-right로 이사)은 레시피 섹션에서만 표시 */
.page:not([data-section="recipe"]) .fav-toggle-btn { display: none; }

/* ── 초심자 가이드 패널(뼈대) ── */
.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 10, 6, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
/* display:flex가 hidden 속성(UA display:none)을 이기므로 명시적으로 다시 숨김 — 없으면 첫 로드부터 열려 보임 */
.guide-overlay[hidden] { display: none; }
.guide-sheet {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border-radius: 18px;
  padding: 34px 24px 30px;
  text-align: center;
}
.guide-close,
.column-close {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #4D4139;
  cursor: pointer;
  padding: 0;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .guide-close:hover,
  .column-close:hover {
    color: var(--brand-red);
  }
}
.guide-close:active,
.column-close:active {
  color: var(--brand-red);
}
.column-sheet--light-close .column-close {
  color: #fff;
}
@media (hover: hover) {
  .column-sheet--light-close .column-close:hover {
    color: #fff;
    opacity: .82;
  }
}
.column-sheet--light-close .column-close:active {
  color: #fff;
  opacity: .72;
}
.guide-sheet-ic { font-size: 34px; line-height: 1; display: block; }
.guide-sheet-title {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.4;
  color: var(--text-dark);
}
.guide-sheet-desc {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}
.guide-sheet-soon {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-red);
}

/* ── 기획 칼럼 패널(고수 빼주세요! 등) ───────────────────────── */
.column-overlay {
  /* 레시피 상세·발도장 시트와 같은 문법 — 상단바 아래에서 시작해 상단바를 가리지 않는다
     (JS syncTopbarH가 --topbar-h에 상단바 실제 높이를 넣어줌). 상단바는 그대로 동작. */
  position: fixed;
  top: var(--topbar-h, 0px);
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: rgba(20, 10, 6, .5);
  display: flex; justify-content: center; align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.column-overlay[hidden] { display: none; }
.column-sheet {
  position: relative;
  width: 100%; max-width: 440px;
  min-height: 100%;
  background: var(--bg-card);
}
@media (min-width: 641px) {
  .column-overlay { padding: 24px; align-items: flex-start; }
  .column-sheet { min-height: auto; border-radius: 18px; overflow: hidden; margin: auto; }
}
/* 상단 히어로(배너와 같은 임시 배경) */
.column-hero {
  position: relative;
  aspect-ratio: 1 / 1;            /* 사진 1:1 전체 노출(잘림 없음) */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
  text-align: left;
  color: #fff;
  background-size: cover; background-position: center;  /* 1:1 컨테이너 + 1:1 이미지 = 꽉 참 */
}
.column-hero::after {           /* 하단 어둡게 — 제목 가독(밝은 크림 사진 위) */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.18) 32%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}
.column-title {
  position: relative; z-index: 1;
  margin: 0;
  font-size: 24px; font-weight: 800; letter-spacing: -.03em;
  /* 가이드 제목이 두 줄이 되면서 줄 간격이 필요해짐(2026-07-28). 값은 기존 렌더링과 같은 1.2 —
     보이는 건 그대로고 브라우저 기본값(normal)의 기기별 편차만 없앤다.
     명시 안 하면 iOS에서 받침이 잘린다(폰트 규칙). 배너 제목 .mf-name은 1.1로 이미 명시돼 있음. */
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.column-sub {
  position: relative; z-index: 1;
  margin: 7px 0 0 4px;            /* 제목보다 살짝 들여쓰기 */
  font-size: 13px; font-weight: 500;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .3);
}
/* 본문 */
.column-body { padding: 24px 22px 8px; }
.column-body h3 {
  margin: 24px 0 8px;
  font-size: 16px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text-dark);
}
/* 큰 단계 제목(STEP 1·2·3…) — 가이드 아티클용(2026-07-28 사용자 확정).
   보통 소제목(16px)과 같은 크기로 두면 한 STEP 안의 소제목들과 평평하게 보여
   'STEP이 아래를 묶는다'는 게 안 읽힌다. 그래서 제목만 19px로 키우고
   번호는 위에 작은 빨강 라벨로 올렸다.
   맨 위 '한눈에 보는 이용 순서' 그림도 '작은 색 숫자 + 제목' 구조라 그림에서 글로 자연스럽게 넘어간다. */
.column-body h3.column-step {
  margin-top: 30px;
  font-size: 19px;
}
.column-body h3.column-step .step-no {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  letter-spacing: .1em;      /* 라벨이라 자간을 벌린다 — 제목은 -.02em로 좁은 것과 대비 */
  color: var(--brand-red);   /* 단계 번호가 없을 때의 기본값 */
}
/* STEP 번호 색 = 맨 위 '한눈에 보는 이용 순서' 그림의 01·02·03 색을 그대로 뽑아 쓴 것
   (2026-07-28 사용자 확정). 그림과 본문이 같은 색으로 짝지어져 "지금 몇 단계인지"가 잡힌다.
   🔴 크림 배경(#FCF9F5) 대비는 낮다 — 1번 1.99:1 / 2번 3.95:1 / 3번 4.07:1.
      화면 밝기를 낮추면 1번 주황이 가장 먼저 흐려진다. 어둡게 조정하는 안(#CE7A06 = 3.12:1,
      주황 느낌은 유지)을 검토했으나 그림과의 색 일치를 우선하기로 사용자가 정했다.
      나중에 "흐리다"는 얘기가 나오면 위 절충값이 출발점이다. */
.column-body h3.column-step--1 .step-no { color: #F8A018; }
.column-body h3.column-step--2 .step-no { color: #608830; }
.column-body h3.column-step--3 .step-no { color: #F02008; }
.column-body p {
  margin: 0 0 4px;
  font-size: 14px; line-height: 1.75;
  color: var(--text-dark);
}
.column-body p + p { margin-top: 10px; }
.column-body .col-lead { font-size: 15px; color: var(--text-muted); }
/* 사진 위 28px / 아래 14px. 아래가 4px이던 때는 사진 바로 밑에 글이 붙어 보였다(2026-07-28 수정).
   위보다 아래를 좁게 둔 건 의도다 — 가이드의 사진은 바로 아래 문단을 설명하므로 한 덩어리로 보여야 한다.
   ※ 사진 다음이 소제목(h3)이면 h3의 margin-top 24px이 이겨서 24px이 된다(정상).
   ※ 최종 숫자는 가이드 STEP 2~5의 사진이 다 들어온 뒤 전체를 보고 다시 판단하기로 함(사용자와 합의). */
/* 아티클용 팁 박스 — 레시피 상세의 .tip-box와 같은 로즈 톤·전구 아이콘(2026-07-28 사용자 확정).
   추천·조언은 이 박스로 빼고, 소제목(h3)에는 '태블릿에서 할 일' 같은 절차만 남긴다.
   그래야 한 STEP 안에서 소제목이 줄줄이 평평하게 늘어서지 않는다.
   .tip-box를 그대로 재사용하지 않은 이유: 거긴 white-space:pre-line이라 문단(<p>)을 넣으면
   줄바꿈이 이중으로 먹는다. 여기는 제목+문단 여러 개가 들어가므로 규칙을 따로 둔다.
   ※ word-break: keep-all은 넣지 않는다 — 칼럼 공통 줄바꿈 동작을 유지한다(인계 문서 F항). */
.column-body .col-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 20px 0 4px;
  padding: 15px 14px;
  background: #FDF1EE;
  border: 1px solid #F1D5CD;
  border-radius: 8px;
}
/* 팁 박스 바로 뒤에 본문 문단이 오는 경우에만 여백을 준다(2026-07-29).
   .col-tip의 아래 여백은 4px뿐이고 본문 <p>는 위 여백이 0이라 둘이 들러붙어 보였다.
   뒤에 소제목(24px)이나 소스 목록(14px)이 오는 경우는 각자 여백이 있어 건드리지 않는다. */
.column-body .col-tip + p { margin-top: 20px; }
/* 제목 첫 줄에 광학적으로 맞추는 3px 내림(.tip-ic의 2px과 같은 계산, 여기는 15px 제목 기준) */
.column-body .col-tip-ic { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.column-body .col-tip-body { flex: 1; min-width: 0; }
.column-body .col-tip-title {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.35;
}
.column-body .col-figure {
  margin: 28px 0 14px;
}
.column-body .col-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
/* 세로로 긴 그림용 — 폭을 줄여 화면을 덜 잡아먹게 한다(2026-07-28 사용자 확정).
   셀프소스바 카드가 폭 100%일 때 320px 폰에서 448px(화면의 55%)였다. 항목 하나 보여주는
   그림이 '한눈에 보는 이용 순서'(전체 요약, 56%)와 같은 크기라 과했다.
   60%면 269px(33%)이고 카드 제목이 13px이라 본문 14px과 비슷해 읽는 데 문제없다.
   🔴 55% 아래로는 내리지 말 것 — 제목이 12px 밑으로 내려간다(실측). */
.column-body .col-figure--narrow img {
  max-width: 60%;
  margin-inline: auto;
}
.column-body .col-figure figcaption {
  margin-top: 8px;
  color: #8B8680;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
/* `.col-figure--no-caption`은 CSS 규칙이 없다. 원래 `margin-bottom: 4px`이 있었지만 기본값과 같은
   숫자라 처음(a2c2ab8)부터 아무 일도 안 하는 규칙이었고, 남겨두면 위 14px을 4px로 덮어써서 지웠다.
   마크업의 클래스는 '캡션 없는 사진'이라는 표시로 남겨둔다 — 나중에 캡션 유무로 여백을 다르게
   줄 일이 생기면 여기에 규칙을 다시 만든다. */
.column-body .col-outro {
  margin-top: 20px;
  /* line-height는 본문 문단과 같은 1.75다(2026-07-29에 1.7에서 맞춤). 굵은 글씨(700)라
     글자가 두꺼운데 줄 간격까지 좁으면 이 문단만 답답해 보인다 — 실제로 그렇게 보였다. */
  font-weight: 700; color: var(--brand-red); line-height: 1.75;
}
/* 가이드 마무리(2026-07-29): 굵기·여백은 col-outro와 같되 줄 전체는 본문색으로 두고
   '하딜고고'만 브랜드 빨강으로 띄운다. 고수 아티클의 col-outro(줄 전체 빨강)는 그대로다. */
.column-body .col-outro--plain { color: var(--text-dark); }
/* 문구 속 '하딜고고' = 푸터(.footer-brand)와 같은 처리 — 로고체 Paperlogy + 로고 색.
   Paperlogy는 5Medium 서브셋만 있어 주변 굵은 글씨(700)보다 얇게 보이는 게 정상이다. */
.column-body .col-brand {
  font-family: 'Paperlogy', 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif;
  font-weight: 500;
  color: var(--brand-red);
  letter-spacing: -.01em;
}
/* STEP 사이·마무리 앞 구분선(2026-07-29). 색은 출처 영역 구분선(.column-notes)과 같은 값. */
.column-body .col-divider {
  height: 0;
  margin: 26px 0;
  border: 0;
  border-top: 1px solid #ECE5DC;
}
/* 가이드 마무리 CTA — 하단 '닫기'와 같은 크기·모서리를 쓰되 채운 버튼으로 구분한다.
   칼럼을 닫고 전체보기를 여는 유일한 출구라, 닫기보다 눈에 먼저 들어와야 한다. */
.column-body .col-cta {
  display: block;
  width: 100%;
  height: 48px;
  /* 위 28px: 마무리 문구와 버튼을 살짝 떼어놓는다(2026-07-29 사용자 지정, 20 → 28).
     아래 4px은 하단 '닫기'와 한 묶음으로 붙여 두려는 값이라 건드리지 않는다. */
  margin: 28px 0 4px;
  border: 0;
  border-radius: 12px;
  background: var(--brand-red);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.column-body .col-cta:active { transform: scale(.97); }
/* CTA가 있는 칼럼에서만 본문 끝과 하단 '닫기' 사이를 좁힌다(2026-07-29).
   원래 간격 34px = CTA 아래 4 + 본문 아래 패딩 8 + 푸터 위 패딩 22. 푸터의 22px은 '본문 끝과
   닫기 버튼'을 벌리려던 값인데, 그 자리에 버튼이 하나 더 오면서 버튼 둘이 멀어 보였다.
   두 버튼은 한 묶음으로 읽혀야 한다. 버튼 없는 고수·안물안궁은 지금 간격 그대로다.
   ~ 를 쓰는 이유: 사이에 .column-sauces·.column-notes가 있어(숨겨져도 DOM에는 있음) + 로는 못 닿는다. */
.column-body:has(.col-cta) { padding-bottom: 0; }
.column-body:has(.col-cta) ~ .column-footer { padding-top: 10px; }
.col-note-ref {
  margin: 0 0 0 2px; padding: 0;
  border: 0; background: none;
  color: var(--text-muted);
  font: inherit; font-size: 11px; line-height: 1;
  vertical-align: super; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.col-note-ref:active { color: var(--brand-red); }
.column-body ul { margin: 6px 0 0; padding: 0; list-style: none; }
.column-body li {
  position: relative;
  margin: 0 0 8px; padding-left: 16px;
  font-size: 14px; line-height: 1.7; color: var(--text-dark);
}
.column-body li::before {
  content: '🌿'; position: absolute; left: 0; top: 0; font-size: 11px;
}
.column-body li b { font-weight: 700; }
/* 하단: 관련 소스 목록 */
.column-sauces { padding: 8px 22px 32px; }
.column-sauces-title {
  margin: 18px 0 12px;
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text-dark);
}
.column-sauce-list { display: flex; flex-direction: column; gap: 8px; }
/* 본문 중간에 놓는 소스 목록(가이드 STEP 2). 바로 위 팁 박스에 딸린 것으로 읽혀야 하므로
   본문 문단 간격(24px)보다는 좁게, 카드 사이 간격(8px)보다는 넓게 잡는다 —
   묶음 경계가 안쪽 간격보다 좁으면 팁 박스에 들러붙어 보인다(기본값이 4px이었음). */
#columnBody .column-sauce-list { margin: 14px 0 24px; }
.col-sauce {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 8px;
  background: var(--bg-soft, #f7f4f1);
  border: 1px solid #ececec; border-radius: 12px;
  cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.col-sauce:active { background: #efeae6; }
.col-sauce-thumb {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 9px; object-fit: cover; display: block;
}
.col-sauce-thumb--emoji {
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: #efe7dd;
}
.col-sauce-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.col-sauce-name {
  font-size: 14px; font-weight: 700; color: var(--text-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-sauce-ver {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-sauce-arrow { width: 18px; height: 18px; flex: 0 0 18px; color: #c3bbb3; }
/* 관련 소스 다음에 오는 주석·출처 */
.column-notes {
  margin: 0 22px; padding: 22px 0;
  border-top: 1px solid #ECE5DC;
}
.column-notes[hidden] { display: none; }
.column-notes-title {
  margin: 0 0 12px;
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text-dark);
}
.column-notes-list {
  display: flex; flex-direction: column; gap: 9px;
  margin: 0; padding: 0; list-style: none;
}
.column-notes-list li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  font-size: 12px; line-height: 1.55;
}
.column-note-num { color: var(--text-muted); }
.column-note-link {
  display: inline;
  color: var(--text-dark); text-decoration: none;
}
.column-note-link svg {
  width: 12px; height: 12px;
  margin-left: 3px; vertical-align: -1px;
}
.column-note-link:active { color: var(--brand-red); }
.column-footer {
  padding: 22px 22px calc(34px + env(safe-area-inset-bottom));
}
/* 레시피 상세 하단 닫기도 같은 모양 — 두 패널의 '나가기'가 달라 보이면 안 된다(2026-07-28) */
.modal-footer {
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
}
.column-bottom-close,
.modal-bottom-close {
  width: 100%;
  height: 48px;
  border: 1px solid #DED6CE;
  border-radius: 12px;
  background: #fff;
  color: var(--text-dark);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .column-bottom-close:hover,
  .modal-bottom-close:hover { background: #F7F3EF; }
}
.column-bottom-close:active,
.modal-bottom-close:active { background: #F0EAE4; }