/* 5ft.mag 모바일 전용 홈 — index.html 에서 모바일이고 PC 보기 토글 꺼진 경우에만 적용.
   films Library 중심 브랜드별 가로 row + 상단 신규 글 띠. */

:root {
  --mh-pad: 18px;            /* 좌우 기본 여백 */
  --mh-section-gap: 8px;     /* row 사이 빈 줄 */
}

html.is-mobile-home body > main:not(.mh-root) { display: none; }
html.is-mobile-home .intro,
html.is-mobile-home .home-section,
html.is-mobile-home .post-row,
html.is-mobile-home .post-grid,
html.is-mobile-home .films-strip-section,
html.is-mobile-home .news-section,
html.is-mobile-home .links-section,
html.is-mobile-home .connect-section { display: none !important; }

/* 모바일은 전용 홈 안에서 글·필름·현재 호 참여를 모두 제공한다.
   PC split-layout 은 중복 노출하지 않고, PC 보기로 전환하면 다시 보인다. */
html.is-mobile-home .split-layout { display: none !important; }

.mh-root { display: none; }
html.is-mobile-home .mh-root { display: block; padding-bottom: 80px; background: var(--bg); }

/* 상단 검색·필터 */
.mh-controls { position: sticky; top: var(--header-h, 60px); z-index: 30; background: var(--bg); padding: 10px var(--mh-pad); border-bottom: 1px solid var(--border); }
.mh-controls-row { display: flex; align-items: center; gap: 8px; }

/* 보기 방식 토글 — segmented control. 좌측 flex:1 로 확보 */
.mh-view-toggle {
  display: flex; background: var(--bg-sub); border-radius: 999px;
  padding: 3px;
  flex: 1; min-width: 0;
}
.mh-view-btn {
  flex: 1; font: inherit; font-size: 13px; font-weight: var(--fw-heading);
  background: none; border: none; color: var(--text-muted);
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.mh-view-btn.is-active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* 상단 우측 icon 버튼 (검색, 필터) — 헤더 icon-btn 과 결 맞춤 */
.mh-controls-icon {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text); border-radius: 8px;
  position: relative;
  transition: background .12s;
}
.mh-controls-icon:hover { background: var(--bg-sub); }
.mh-controls-icon:active { transform: scale(0.95); }
.mh-controls-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ffd400; color: #111;
  border-radius: 8px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* 검색 오버레이 — sticky controls 아래 풀폭 input 으로 펼침 */
.mh-search-bar {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-sub);
}
.mh-search-bar[hidden] { display: none; }
.mh-search-bar svg { color: var(--text-muted); flex: 0 0 auto; }
.mh-search-bar input {
  flex: 1; border: 0; background: none; font: inherit; color: var(--text);
  outline: none; padding: 0; min-width: 0; font-size: 14px;
}
.mh-search-close {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; padding: 4px 8px;
  border-radius: 4px;
}
.mh-search-close:hover { color: var(--text); background: var(--bg); }

/* 필름 유형 필터 sheet — 기존 시트와 같은 모션 */
.mh-filter-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0);
  transition: background .22s ease-out;
  display: flex; align-items: flex-end; justify-content: center;
}
.mh-filter-backdrop[hidden] { display: none; }
.mh-filter-backdrop.is-open { background: rgba(0,0,0,.45); }
.mh-filter-sheet {
  width: 100%; max-width: 640px;
  background: var(--bg); color: var(--text);
  border-radius: 18px 18px 0 0;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.2, .8, .25, 1);
  box-shadow: 0 -12px 40px rgba(0,0,0,.18);
}
.mh-filter-backdrop.is-open .mh-filter-sheet { transform: translateY(0); }
.mh-filter-title { font-size: 16px; font-weight: var(--fw-heading); margin: 6px 0 4px; }
.mh-filter-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 16px; }
.mh-filter-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 2px; }
.mh-filter-list li { display: block; }
.mh-filter-list label {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; cursor: pointer;
  font-size: 15px; color: var(--text);
}
.mh-filter-list input[type="checkbox"] {
  width: 20px; height: 20px; flex: 0 0 auto;
  accent-color: var(--text);
}
.mh-filter-list label:active { background: var(--bg-sub); border-radius: 4px; }
.mh-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mh-filter-reset, .mh-filter-apply {
  font: inherit; font-size: 14px; font-weight: var(--fw-heading);
  padding: 12px 16px; border-radius: 999px; cursor: pointer;
}
.mh-filter-reset { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.mh-filter-reset:hover { border-color: var(--text); }
.mh-filter-apply { background: var(--text); color: var(--bg); border: none; }
.mh-filter-apply:active { transform: scale(0.98); }

/* PWA standalone 일 때 — "PC 화면으로 보기" 토글 같은 비-앱 요소 숨김 */
html.is-standalone-pwa #mhBackToMobile,
html.is-standalone-pwa .mh-pwa-toast { display: none !important; }
.mh-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-sub); }
.mh-search svg { color: var(--text-muted); flex: 0 0 auto; }
.mh-search input { flex: 1; border: 0; background: none; font: inherit; color: var(--text); outline: none; padding: 0; min-width: 0; font-size: 14px; }
.mh-filter { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mh-filter::-webkit-scrollbar { display: none; }
.mh-chip { font: inherit; font-size: 12px; font-weight: var(--fw-heading); padding: 6px 14px; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.mh-chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* 신규 글 띠 — 살짝 다른 배경으로 시각적 구분 강화 */
.mh-new { padding: 18px 0 6px; background: var(--bg-sub); }
.mh-new-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--mh-pad) 10px; }
.mh-new-title { font-size: 13px; font-weight: var(--fw-heading); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); margin: 0; }
.mh-new-more { font-size: 12px; color: var(--text-muted); text-decoration: none; }
.mh-new-strip { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--mh-pad) 18px; scroll-snap-type: x mandatory; }
.mh-new-strip::-webkit-scrollbar { display: none; }
.mh-new-card { flex: 0 0 78%; max-width: 280px; scroll-snap-align: start; text-decoration: none; color: var(--text); background: var(--bg); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.mh-new-card .mh-new-thumb { aspect-ratio: 16/10; background: var(--border); overflow: hidden; }
.mh-new-card .mh-new-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-new-card .mh-new-meta { font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 12px 12px 4px; }
.mh-new-card .mh-new-headline { font-size: 14px; font-weight: var(--fw-heading); line-height: 1.4; letter-spacing: -0.01em; margin: 0 12px 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 브랜드별 row — 간격 늘리고 구분 명확하게 */
.mh-brand { padding: 22px 0 18px; }
.mh-brand + .mh-brand { border-top: 1px solid var(--border); }
.mh-brand-head { display: flex; align-items: center; gap: 10px; padding: 0 var(--mh-pad) 12px; }
.mh-brand-name { font-size: 15px; font-weight: var(--fw-heading); letter-spacing: -0.005em; margin: 0; flex: 0 0 auto; }
.mh-brand-count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: 1; }
.mh-brand-fav { flex: 0 0 auto; background: none; border: none; padding: 6px; margin: 0 -6px 0 0; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: color .15s, transform .15s, background .15s; }
.mh-brand-fav:hover { background: var(--bg-sub); }
.mh-brand-fav.is-on { color: #e0245e; }
.mh-brand-fav.is-on:active { transform: scale(1.15); }
.mh-brand.is-fav .mh-brand-name::before { content: '★ '; color: #e0245e; font-size: 12px; vertical-align: middle; }
.mh-brand-strip { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--mh-pad) 4px; scroll-snap-type: x proximity; }
.mh-brand-strip::-webkit-scrollbar { display: none; }
.mh-card { flex: 0 0 124px; scroll-snap-align: start; text-decoration: none; color: var(--text); background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left; font: inherit; }
.mh-card-thumb { width: 124px; height: 124px; background: var(--bg-sub); border-radius: 8px; overflow: hidden; margin-bottom: 8px; position: relative; }
.mh-card-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; box-sizing: border-box; }
.mh-card-name { font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 2px; }

/* 그 외 브랜드 그리드 */
.mh-others { padding: 24px var(--mh-pad) 32px; border-top: 1px solid var(--border); background: var(--bg-sub); }
.mh-others-head { font-size: 13px; font-weight: var(--fw-heading); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 4px; color: var(--text); }
.mh-others-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }
.mh-others-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mh-others-grid .mh-card { flex: none; }
.mh-others-grid .mh-card-thumb { width: 100%; height: auto; aspect-ratio: 1; background: var(--bg); }

/* 모바일 첫 화면은 전체 카탈로그 대신 추천·최근 본 3종으로 압축한다. */
.mh-compact-section { padding: 22px var(--mh-pad); border-top: 1px solid var(--border); }
.mh-compact-section.mh-recent { background: var(--bg-sub); }
.mh-compact-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.mh-compact-head h2 { margin: 0; font-size: 18px; font-weight: var(--fw-heading); }
.mh-compact-head span { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.mh-compact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mh-compact-grid .mh-card { width: 100%; min-width: 0; flex: none; text-align: left; }
.mh-compact-grid .mh-card-thumb { width: 100%; height: auto; aspect-ratio: 1; }
.mh-compact-grid .mh-card-name { font-size: 11px; line-height: 1.3; }
.mh-all-films {
  display: flex; align-items: center; justify-content: center;
  height: 42px; margin-top: 14px; border: 1px solid var(--text); border-radius: var(--btn-radius);
  color: var(--text); background: var(--bg); text-decoration: none; font-size: 13px; font-weight: var(--fw-heading);
}

/* 현재 호 주제와 응모 안내. 큰 검정 면 대신 종이 같은 중간 surface를 사용한다. */
.mh-theme { padding: 28px var(--mh-pad) 30px; background: var(--surface-1); border-top: 1px solid var(--border); }
.mh-theme-tag { display: inline-block; padding: 5px 8px; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: var(--fw-heading); letter-spacing: .08em; }
.mh-theme h2 { margin: 14px 0 6px; font-size: 28px; line-height: 1.08; font-weight: var(--fw-heading); }
.mh-theme-sub { margin: 0 0 16px; font-size: 17px; color: var(--text); }
.mh-theme-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--text-muted); word-break: keep-all; }
.mh-theme-film { display: inline-block; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); font-size: 11px; }
.mh-theme-reward { margin: 18px 0 16px; padding-top: 14px; border-top: 1px solid var(--border-strong); font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.mh-theme-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mh-theme-actions button, .mh-theme-actions a { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px; border-radius: var(--btn-radius); font: inherit; font-size: 13px; font-weight: var(--fw-heading); cursor: pointer; text-decoration: none; }
.mh-theme-actions button { border: 1px solid #e0ca00; background: var(--accent); color: var(--accent-text); }
.mh-theme-actions a { border: 1px solid var(--border-strong); background: var(--bg); color: var(--text); }

/* "사진으로 보기" 모드 — 전체 사진 그리드 */
.mh-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; }
.mh-photo-cell {
  aspect-ratio: 1; background: var(--bg-sub); overflow: hidden;
  padding: 0; border: none; cursor: pointer; display: block;
}
.mh-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-photo-cell:active { opacity: .85; }
.mh-photo-cell-skel {
  background: linear-gradient(90deg, var(--bg-sub) 0%, var(--border) 50%, var(--bg-sub) 100%);
  background-size: 200% 100%; animation: mhSheetSkel 1.2s ease-in-out infinite;
}

/* 검색 결과 그리드 (필터 활성 시) */
.mh-search-grid { display: none; padding: 18px var(--mh-pad); grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mh-root.is-searching .mh-search-grid { display: grid; }
.mh-root.is-searching .mh-brand,
.mh-root.is-searching .mh-others,
.mh-root.is-searching .mh-compact-section,
.mh-root.is-searching .mh-theme,
.mh-root.is-searching .mh-new { display: none; }
.mh-search-grid .mh-card { flex: none; }
.mh-search-grid .mh-card-thumb { width: 100%; height: auto; aspect-ratio: 1; }
.mh-empty { padding: 60px var(--mh-pad); text-align: center; color: var(--text-muted); font-size: 13px; }

/* PWA 설치 안내 토스트 */
.mh-pwa-toast { position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 1000; background: var(--text); color: var(--bg); padding: 14px 16px; border-radius: 12px; font-size: 13px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,0.25); display: flex; align-items: center; gap: 12px; }
.mh-pwa-toast button { font: inherit; font-size: 12px; background: none; border: 1px solid currentColor; color: inherit; padding: 6px 12px; border-radius: 6px; cursor: pointer; flex: 0 0 auto; }

/* ─── 마이크로 인터랙션 ─── */
/* 하트 토글 시 짧은 bounce */
@keyframes mhHeartPulse { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.mh-brand-fav.is-pulsing svg { animation: mhHeartPulse .3s ease-out; }

/* 카드 탭 시 살짝 눌리는 피드백 */
.mh-card, .mh-new-card { transition: transform .12s ease-out; }
.mh-card.is-pressing, .mh-new-card.is-pressing { transform: scale(0.97); }

/* FAB 누를 때 일렁임 (site-common.js inline 스타일을 보강) */
#mhUploadFab:active { transform: scale(0.92) !important; transition: transform .1s !important; }

/* ─── 첫 방문 온보딩 풍선 ─── */
.mh-onboard {
  position: fixed; right: 92px; bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  z-index: 900; background: var(--text); color: var(--bg);
  padding: 9px 14px 9px 14px; border-radius: 999px;
  font-size: 13px; font-weight: var(--fw-heading);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  display: flex; align-items: center; gap: 8px;
  animation: mhOnboardIn .35s ease-out;
}
.mh-onboard::after {
  content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--text);
}
.mh-onboard button { background: none; border: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 14px; opacity: .7; }
.mh-onboard.is-leaving { animation: mhOnboardOut .2s ease-in both; }
@keyframes mhOnboardIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mhOnboardOut { to { opacity: 0; transform: translateX(8px); } }

/* ─── 빈 상태 개선 ─── */
.mh-empty { padding: 56px var(--mh-pad); text-align: center; color: var(--text-muted); font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mh-empty p { margin: 0; }
.mh-empty-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-heading); }
.mh-empty-btn { font: inherit; font-size: 13px; padding: 9px 18px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; cursor: pointer; }
.mh-empty-btn:hover { border-color: var(--text); }

/* ─── 상단 sticky 축소 (스크롤 다운 시) ─── */
.mh-controls { transition: padding .2s ease-out; }
.mh-controls .mh-search { transition: padding .2s ease-out; }
.mh-controls .mh-filter { transition: max-height .25s ease-out, margin-top .2s ease-out, opacity .2s ease-out; overflow: hidden; max-height: 60px; }
.mh-root.is-condensed .mh-controls { padding-top: 6px; padding-bottom: 6px; }
/* condense 모드 — 검색 오버레이가 열려있어도 자동으로 닫지는 않음 (사용자 의도 존중).
   상단 한 행이 이미 짧아서 추가 축소는 안 함. */

/* ─── 최근 본 row (개인화) ─── */
.mh-recent .mh-brand-name { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-heading); }

/* ─── 필름 상세 시트 (모달) ─── */
html.mh-sheet-open, html.mh-sheet-open body { overflow: hidden; }
.mh-sheet-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0);
  transition: background .22s ease-out;
  display: flex; align-items: flex-end; justify-content: center;
}
.mh-sheet-backdrop.is-open { background: rgba(0,0,0,.45); }
.mh-sheet-backdrop.is-leaving { background: rgba(0,0,0,0); }
.mh-sheet {
  width: 100%; max-width: 640px; max-height: 88vh;
  background: var(--bg); color: var(--text);
  border-radius: 18px 18px 0 0;
  padding: 12px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.2, .8, .25, 1);
  box-shadow: 0 -12px 40px rgba(0,0,0,.18);
}
.mh-sheet-backdrop.is-open .mh-sheet { transform: translateY(0); }
.mh-sheet-backdrop.is-leaving .mh-sheet { transform: translateY(100%); }
.mh-sheet-grip {
  display: block; width: 44px; height: 4px; margin: 4px auto 14px;
  border-radius: 2px; background: var(--border); border: none; cursor: pointer; padding: 0;
}
.mh-sheet-grip::before { content: ''; display: block; margin: -10px auto -2px; width: 80px; height: 24px; }   /* 터치 영역 확대 */
.mh-sheet-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.mh-sheet-thumb { flex: 0 0 auto; width: 88px; height: 88px; background: var(--bg-sub); border-radius: 8px; overflow: hidden; padding: 8px; box-sizing: border-box; }
.mh-sheet-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mh-sheet-meta { flex: 1; min-width: 0; }
.mh-sheet-brand { font-size: 11px; font-weight: var(--fw-heading); letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; }
.mh-sheet-name { font-size: 22px; font-weight: var(--fw-heading); letter-spacing: -0.01em; margin: 0 0 6px; line-height: 1.2; }
.mh-sheet-specs { font-size: 13px; color: var(--text); opacity: .75; }
.mh-sheet-desc { font-size: 14px; line-height: 1.65; color: var(--text); margin: 0 0 18px; word-break: keep-all; }
.mh-sheet-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 18px; min-height: 80px; }
.mh-sheet-photo {
  aspect-ratio: 1; background: var(--bg-sub); border-radius: 4px; overflow: hidden;
  padding: 0; border: none; cursor: pointer; display: block;
}
.mh-sheet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-sheet-photo:active { opacity: .85; }
.mh-sheet-photo-skeleton {
  background: linear-gradient(90deg, var(--bg-sub) 0%, var(--border) 50%, var(--bg-sub) 100%);
  background-size: 200% 100%; animation: mhSheetSkel 1.2s ease-in-out infinite;
}
@keyframes mhSheetSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.mh-sheet-empty {
  padding: 28px 16px; margin-bottom: 18px; text-align: center;
  color: var(--text-muted); font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: var(--bg-sub); border-radius: 8px;
}
.mh-sheet-empty p { margin: 0; }
.mh-sheet-empty-btn {
  font: inherit; font-size: 13px; font-weight: var(--fw-heading);
  padding: 10px 18px; border: none; border-radius: 999px;
  background: #ffd400; color: #111; cursor: pointer;
}

/* 하단 CTA — 두 버튼 (사진 올리기 primary + 전체 페이지 secondary) */
.mh-sheet-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mh-sheet-upload, .mh-sheet-go {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 16px; border-radius: 999px;
  font-size: 14px; font-weight: var(--fw-heading); text-decoration: none;
  cursor: pointer; font-family: inherit;
}
.mh-sheet-upload { background: #ffd400; color: #111; border: none; }
.mh-sheet-upload:active { transform: scale(0.98); }
.mh-sheet-go {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
}
.mh-sheet-go:active { background: var(--bg-sub); }

/* 시트 내 사진 라이트박스 (탭 → 크게 보기 + swipe) */
.mh-sheet-lb {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(0,0,0,.92); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s ease-out;
}
.mh-sheet-lb.is-open { opacity: 1; }
.mh-sheet-lb-stage {
  flex: 1; max-width: 100vw; max-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  /* 하단 정보 패널이 차지하는 공간 만큼 비움 (대략 + 40px 여유) */
  padding: calc(60px + env(safe-area-inset-top, 0)) 12px 220px;
}
.mh-sheet-lb-stage img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 4px;
}
.mh-sheet-lb-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0));
  right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; border: none;
  font-size: 18px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mh-sheet-lb-nav {
  position: absolute; top: 45%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 60px; border: none; background: rgba(255,255,255,.1); color: #fff;
  font-size: 28px; cursor: pointer; border-radius: 4px;
}
.mh-sheet-lb-nav:disabled { opacity: .25; cursor: default; }
.mh-sheet-lb-prev { left: 8px; }
.mh-sheet-lb-next { right: 8px; }

/* 하단 정보 패널 — 메인 라이트박스(.photo-lb-info) 와 같은 톤 */
.mh-sheet-lb-info {
  position: absolute; left: 0; right: 0;
  bottom: 0;
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0));
  background: linear-gradient(to top, rgba(0,0,0,.88) 60%, rgba(0,0,0,0));
  color: #fff; z-index: 2;
  display: flex; flex-direction: column; gap: 10px;
}
.mh-sheet-lb-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; line-height: 1.5; }
.mh-sheet-lb-author { font-weight: var(--fw-heading); color: #fff; }
.mh-sheet-lb-jump { color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.4); }
.mh-sheet-lb-jump[hidden] { display: none; }
.mh-sheet-lb-jump:active { color: #ffd400; }
.mh-sheet-lb-note { font-size: 12px; color: rgba(255,255,255,.75); margin: 4px 0 0; line-height: 1.5; flex: 1 1 100%; }
.mh-sheet-lb-counter {
  font-size: 11px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums;
  margin-left: auto; align-self: center;
}

.mh-sheet-lb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mh-sheet-lb-fav, .mh-sheet-lb-share {
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mh-sheet-lb-fav[hidden], .mh-sheet-lb-share[hidden] { display: none; }
.mh-sheet-lb-fav.is-fav { background: #e0245e; color: #fff; }
.mh-sheet-lb-fav.is-fav svg path { fill: #fff; }
.mh-sheet-lb-fav.is-busy { opacity: .6; pointer-events: none; }
.mh-sheet-lb-link {
  font-size: 12px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; text-decoration: none;
  font-weight: var(--fw-heading);
}
.mh-sheet-lb-link[hidden] { display: none; }
.mh-sheet-lb-link:active { background: rgba(255,255,255,.28); }

@media (hover: none) {
  /* 터치 환경에선 화살표 숨기고 swipe 만 */
  .mh-sheet-lb-nav { display: none; }
}

/* ─── 접근성: 색 대비 강화 ─── */
.mh-card-name { color: var(--text); }
.mh-brand-count { color: var(--text); opacity: .65; }   /* 단순 회색 → 텍스트 색 65% (대비 ↑) */
.mh-new-card .mh-new-meta { opacity: .9; }
/* 키보드 포커스 가시화 */
.mh-card:focus-visible, .mh-new-card:focus-visible, .mh-brand-fav:focus-visible, .mh-chip:focus-visible {
  outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px;
}