/* 업종 갤러리 공용 스타일 — 히어로 파일 자체는 독립이며 이 파일은 갤러리 페이지만 쓴다 */
:root{--bg:#FAFAF8;--surface:#fff;--ink:#141414;--sub:#6B6B6B;--line:#E7E7E7;--accent:#ff6b35}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d0d0f;--surface:#17171a;--ink:#f2f2f2;--sub:rgba(255,255,255,.6);--line:rgba(255,255,255,.13)}}
:root[data-theme="dark"]{--bg:#0d0d0f;--surface:#17171a;--ink:#f2f2f2;--sub:rgba(255,255,255,.6);--line:rgba(255,255,255,.13)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;line-height:1.6;padding:0 0 70px}
a{color:inherit;text-decoration:none}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.top .home{font-weight:800;font-size:13.5px;flex:none;white-space:nowrap}
.top .home b{color:var(--accent)}
/* 긴 업종명("여행·호텔·항공" 등)이 좁은 화면에서 flex 압박을 받으면 white-space 기본값(normal) 탓에
   글자 하나씩 줄바꿈되어 세로로 쌓여 보인다(2026-09-29 모바일 버그 리포트) — nowrap+ellipsis로 한 줄 유지.
   ⚠ crumb에 flex:1(basis:0%)을 주면 더 심한 버그가 난다 — gallery.js가 .cnt 앞에 기기토글(.seg)을
   런타임에 끼워 넣어 실제로는 형제가 5개(home·crumb·sp·seg·cnt)인데, 좁은 화면(shrink 모드)에서는
   basis:0%인 항목의 shrink 가중치가 0이라 "줄어드는 게 아니라 아예 0px로 붕괴"해버린다.
   그래서 crumb는 flex 기본값(0 1 auto = shrink 가능·basis는 글자 실제 폭)을 유지해야
   seg와 사이좋게 비율껏 줄어들다 min-width:0+ellipsis로 넘치는 만큼만 "…"로 줄인다.
   남는 공간을 밀어내는 역할은 원래대로 .sp(flex:1, 내용 없어 basis 0이라 좁을 땐 그냥 0으로 사라짐)가 맡는다. */
.top .crumb{font-size:13px;color:var(--sub);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sp{flex:1}
.top .cnt{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
/* 좁은 화면에서는 (홈+업종명)과 (기기토글+개수)가 한 줄에 다 안 들어간다 — ellipsis로 줄이는 대신
   두 줄로 자연스럽게 감싸서 업종명이 아예 안 보이는 상황을 막는다. */
@media (max-width:560px){
  .top{flex-wrap:wrap; row-gap:6px}
  .top .sp{display:none}
  .top .crumb{flex:1 1 auto}
}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{border:0;background:transparent;color:var(--sub);font-size:12px;font-weight:700;padding:6px 11px;border-radius:7px;cursor:pointer;font-family:inherit;white-space:nowrap}
.seg button.on{background:var(--accent);color:#fff}
.head{max-width:1560px;margin:0 auto;padding:30px 20px 6px}
.head .kick{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.head h1{font-size:clamp(21px,3vw,28px);font-weight:850;letter-spacing:-.02em;margin-top:6px}
.cards{max-width:1560px;margin:18px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:16px}
@media (max-width:480px){.cards{grid-template-columns:1fr}}
.hcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.hcard .ph{position:relative;height:300px;background:#111;overflow:hidden}
.hcard iframe{border:0;position:absolute;left:50%;top:50%;transform-origin:50% 50%;pointer-events:none;background:#fff}
/* 데스크탑/태블릿/모바일/앱 폭은 gallery.js 가 인라인 width/height/transform 으로 계산해 넣는다(가짜 뷰포트 폭을 실제로 줘야 히어로 파일의 @media 반응형이 진짜로 걸린다) */
body[data-device="mobile"] .cards,body[data-device="app"] .cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.hcard .bar{display:flex;align-items:center;gap:10px;padding:10px 14px}
.hcard .num{font:800 11px/1 Consolas,monospace;color:var(--accent)}
.hcard .nm{font-size:13px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard .open{font-size:11.5px;font-weight:700;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}
.hcard .open:hover{color:var(--accent);border-color:var(--accent)}