/* ============================================================
   체크인 디렉토리 — 에디토리얼 × 소프트 에어리
   디자인 토큰: 라이트 기본 + html[data-theme="dark"] 오버라이드
   ============================================================ */
:root{
  --bg:#faf7f1; --card:#fffdf9; --ink:#3a3a34; --muted:#6f6a5f;
  --line:#e7e0d4; --soft:#f1ece0;
  --accent:#8a9a7b; --accent-ink:#fff; --badge-ink:#241e16;
  --c-food:#b5754f; --c-cafe:#8a9a7b; --c-spot:#c8a87c;
  /* 작은 텍스트 전용(AA 대비) — fill용 accent/c-food와 분리 */
  --accent-text:#586841; --food-text:#92512e;
  --hero-ovl:rgba(40,36,28,.34);
  --radius:16px; --maxw:1120px; --read:760px;
}
html[data-theme="dark"]{
  --bg:#201d17; --card:#2a261f; --ink:#ece7db; --muted:#9b9488;
  --line:#39342b; --soft:#322d24;
  --accent:#a7b690; --accent-ink:#20251a;
  --c-food:#cf8a5f; --c-cafe:#a7b690; --c-spot:#d4b78c;
  --accent-text:#a7b690; --food-text:#cf8a5f;
  --hero-ovl:rgba(0,0,0,.5);
}

*{margin:0;padding:0;box-sizing:border-box}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
body{background:var(--bg);color:var(--ink);font-family:'Pretendard',-apple-system,system-ui,sans-serif;
  font-size:17px;line-height:1.78;-webkit-font-smoothing:antialiased;
  transition:background .2s ease,color .2s ease}
h1,h2,h3,h4,h5,h6{letter-spacing:-.01em;line-height:1.2}

/* 인덱스 전용 상단(히어로+pills)·하단(인기/태그)은 글 상세에서만 숨김 (기본=표시, fail-safe) */
body#tt-body-page #home-top,body#tt-body-page #home-bottom,body#tt-body-page .paging{display:none}
/* 티스토리 반복 래퍼는 레이아웃 투명 처리(라이브=엔진 제거, 프리뷰=그리드 통과) */
s_article_rep,s_index_article_rep,s_permalink_article_rep,
s_sidebar,s_sidebar_element,s_search,s_paging,s_paging_rep,
s_rctps_popular_rep,s_rctps_rep_thumbnail,s_random_tags{display:contents}
/* 접근성용 라벨 숨김 */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 키보드 포커스 링 — 브랜드 색으로 통일(마우스 클릭 시엔 안 뜸) */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.eyebrow{color:var(--accent-text);font-weight:800;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase}
.eyebrow.light{color:#fff;opacity:.92}

/* ===== 크림 placeholder (썸네일 없을 때, 업로드 의존 0) ===== */
.thumb,.lead{background:var(--soft) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202C8.1%202%205%205.1%205%209c0%205.2%207%2013%207%2013s7-7.8%207-13c0-3.9-3.1-7-7-7zm0%209.5A2.5%202.5%200%201112%206.5a2.5%202.5%200%20010%205z'%20fill='none'%20stroke='%23cdbfa6'%20stroke-width='1.5'/%3E%3C/svg%3E") center/52px no-repeat}

/* 스킵 링크 (키보드 접근성) */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}

/* ============ 헤더 ============ */
header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand .pin{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-size:14px}
nav.main ul{display:flex;gap:20px;font-size:14.5px;font-weight:600;color:var(--muted)}
nav.main a:hover{color:var(--ink)}
.search{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);font-size:17px}
.search:hover{color:var(--accent);border-color:var(--accent)}
.theme-tg{margin-left:auto;width:40px;height:40px;border:1px solid var(--line);background:var(--card);border-radius:50%;
  font-size:16px;cursor:pointer;color:var(--ink);display:grid;place-items:center;line-height:1}
.theme-tg:hover{border-color:var(--accent)}

/* ============ 홈 — 히어로 ============ */
.hero{position:relative;display:block;max-width:var(--maxw);margin:34px auto 14px;border-radius:var(--radius);
  overflow:hidden;aspect-ratio:16/7;min-height:300px;
  /* 썸네일 없을 때도 흰 캡션이 읽히도록 브랜드 그라데이션 폴백 */
  background:linear-gradient(135deg,var(--accent),#3a3a34)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,var(--hero-ovl) 100%);z-index:1}
.hero .cap{position:absolute;left:34px;right:34px;bottom:30px;z-index:2;color:#fff}
.hero h1{font-size:46px;line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:8px 0 8px}
.hero h1 a{color:#fff}
.hero p{font-size:16px;opacity:.92;max-width:560px;line-height:1.6}
@media(min-width:1168px){.hero{margin-left:auto;margin-right:auto}}

/* ============ 홈 — 섹션 + pills ============ */
.sec{max-width:var(--maxw);margin:0 auto;padding:30px 24px 6px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.sec-h h2{font-size:24px;font-weight:800}
.sec-h .more{font-size:13.5px;color:var(--muted);font-weight:600}
.sec-h .more:hover{color:var(--accent)}
.pills{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
/* [##_category_list_##]의 ul/li 투명화 → 각 카테고리 <a>가 pill 칩 */
.pills ul,.pills li{display:contents}
.pills a,.pill{font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);color:var(--muted);white-space:nowrap;line-height:1.4}
.pills a:hover,.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* 자동 카테고리 목록 첫 항목 '분류 전체보기' 라벨만 숨김(중첩 카테고리는 유지) — 직접 넣은 '전체' pill과 중복 제거 */
.pills > ul > li:first-child > a{display:none}

/* ============ 글 영역 컨테이너 ============ */
.article-area{max-width:var(--maxw);margin:0 auto;padding:24px 24px 52px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px}
/* 글 상세: 그리드 해제, 읽기 컬럼 */
body#tt-body-page .article-area{display:block;max-width:var(--read);padding-top:8px}
/* 게이팅 2차 fail-safe — body id가 예상과 달라도 .detail(=permalink 전용) 존재 시 동일 처리 */
body:has(.detail) #home-top,body:has(.detail) #home-bottom,body:has(.detail) .paging{display:none}
body:has(.detail) .article-area{display:block;max-width:var(--read)}

/* ===== 가이드 카드 (index) ===== */
.card{display:block;background:transparent;transition:.18s}
.card:hover{transform:translateY(-3px)}
.thumb{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;margin-bottom:12px}
.thumb img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:999px;
  background:var(--accent);color:var(--badge-ink)}
.cbody h3{font-size:18.5px;font-weight:800;line-height:1.32;margin-bottom:5px}
.cbody .sub{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:9px}
.cbody .info{display:flex;gap:14px;font-size:12.5px;color:var(--muted)}
.cbody .info span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--accent);margin-right:6px;vertical-align:middle;opacity:.7}
.cbody .info span:first-child::before{display:none}

/* ============ 상세 — 에디토리얼 헤더부 ============ */
.detail{max-width:var(--read);margin:0 auto}
.arthd{padding:38px 0 6px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:var(--accent)}
.crumb .sep{margin:0 7px;opacity:.5}
.detail h1{font-size:42px;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:10px 0 14px}
.byline{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.byline .dot{opacity:.4}
.rate-note{font-size:12.5px;color:var(--muted);margin-top:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rate-note::before{content:"ⓘ";color:var(--accent);font-weight:800}
.rate-note b{color:var(--ink)}
.lead{margin:26px 0 8px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.lead img{width:100%;height:100%;object-fit:cover}
.body-txt{font-size:17px;line-height:1.85;padding-top:8px}
.body-txt p{margin:20px 0}
.body-txt h2,.body-txt h3{margin:32px 0 12px}
.body-txt img{border-radius:12px;margin:18px 0}
.react{display:flex;gap:10px;justify-content:center;margin:36px 0 8px}
.react .rbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  border-radius:999px;padding:11px 22px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;color:inherit}
.react .rbtn.like{color:var(--c-food)}
.react .rbtn:hover{border-color:var(--accent)}
.area-reply{max-width:var(--read);margin:42px auto 0}

/* ============================================================
   place-body 컴포넌트 (장소글 본문 템플릿 — templates/place-body.html)
   본문([##_article_rep_desc_##]) 안에 렌더되므로 .body-txt 하위에서도 동작
   ============================================================ */
/* 카카오맵 반응형 래퍼 — iframe '공유 › HTML 태그 복사' */
.map-responsive{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/10;margin:10px 0 6px;background:#eef0ea}
.map-responsive iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* 카카오 '지도 퍼가기'(daum roughmap, script형)를 박스에 꽉 차게 + 반응형 */
.map-responsive .root_daum_roughmap{position:absolute!important;inset:0;width:100%!important;height:100%!important;margin:0!important}
.map-responsive .root_daum_roughmap .wrap_map{width:100%!important;height:100%!important}
.mapsec{margin:34px 0 10px}
.mapsec h2{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
/* 데모용 지도 자리(프리뷰/목업) — 실제 글에선 iframe로 교체 */
.map-responsive .road{position:absolute;background:#fffdf9;box-shadow:0 0 0 1px #e3e6e3}
.map-responsive .r1{top:38%;left:0;right:0;height:13px}.map-responsive .r2{top:0;bottom:0;left:44%;width:13px}.map-responsive .r3{top:70%;left:0;right:0;height:9px}
.map-responsive .pin{position:absolute;transform:translate(-50%,-100%);display:grid;place-items:center;
  width:30px;height:30px;border-radius:50% 50% 50% 0;rotate:-45deg;color:var(--badge-ink);font-weight:800;font-size:13px;box-shadow:0 4px 9px rgba(0,0,0,.22)}
.map-responsive .pin span{rotate:45deg}
.map-responsive .pin.food{background:var(--c-food)}.map-responsive .pin.cafe{background:var(--c-cafe)}.map-responsive .pin.spot{background:var(--c-spot)}
.map-responsive .note{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:#fffdf9cc;
  border:1px dashed var(--muted);border-radius:8px;padding:5px 12px;font-size:11.5px;color:#3a3a34;white-space:nowrap}

/* 번호 위치카드 */
.places{margin:30px 0 10px;border-top:2px solid var(--ink);padding-top:6px}
.place{display:grid;grid-template-columns:260px 1fr;gap:22px;padding:26px 0;border-bottom:1px solid var(--line)}
.place .pic{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.place .pic img{width:100%;height:100%;object-fit:cover}
.place .num{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:14px;color:var(--badge-ink);box-shadow:0 2px 6px rgba(0,0,0,.25);background:var(--accent)}
.place .num.food{background:var(--c-food)}.place .num.cafe{background:var(--c-cafe)}.place .num.spot{background:var(--c-spot)}
.place .top{display:flex;align-items:center;gap:9px;margin-bottom:4px;flex-wrap:wrap}
.place h3{font-size:23px;font-weight:800;letter-spacing:-.01em}
.place .badge{position:static;background:var(--accent)}
.place .badge.food{background:var(--c-food)}.place .badge.cafe{background:var(--c-cafe)}.place .badge.spot{background:var(--c-spot)}
.place .stars{color:var(--food-text);font-weight:800;font-size:14px}
.place .stars::before{content:"에디터 ";font-size:.8em;font-weight:700;color:var(--muted);letter-spacing:.02em}
.place .pinfo{font-size:13.5px;color:var(--muted);margin:6px 0 10px;display:flex;flex-wrap:wrap;gap:4px 14px}
.place .pinfo span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--muted);margin-right:7px;vertical-align:middle;opacity:.6}
.place .pinfo span:first-child::before{display:none}
.place .review{font-size:15.5px;line-height:1.7;margin-bottom:12px}
.place .tip{font-size:13.5px;background:color-mix(in srgb,var(--accent) 12%,var(--bg));border-left:3px solid var(--accent);
  padding:9px 13px;border-radius:0 8px 8px 0}

/* 메이슨리 갤러리 */
.gallery{margin:42px 0}
.gallery h2{font-size:22px;font-weight:800;margin-bottom:16px}
.photo-grid{columns:3 220px;column-gap:10px}
.photo-grid img,.photo-grid .pic{border-radius:12px;margin-bottom:10px;break-inside:avoid;width:100%}

/* ============================================================
   홈 추가 모듈 — 검색 · 페이징 · 인기 체크인 · 태그 칩
   전부 "비면 사라진다"가 원칙: 공개 글/태그가 0개일 때 빈 헤더만 남는 걸 막는다
   ============================================================ */

/* ===== 검색 (히어로 바로 아래) ===== */
.searchsec{padding-top:20px;padding-bottom:0}
.sbox{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:9px 10px 9px 18px;transition:border-color .15s ease,box-shadow .15s ease}
.sbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.sbox .sic{font-size:16px;opacity:.7;line-height:1}
.sinput{flex:1;min-width:0;border:0;background:transparent;font-family:inherit;font-size:15.5px;color:var(--ink);
  padding:6px 0;outline:none}
.sinput::placeholder{color:var(--muted);opacity:.85}
/* 세이지 배경 위 글자는 --accent-ink(라이트=흰색)로는 3.0:1밖에 안 나온다 →
   .badge와 같은 규칙으로 짙은 잉크를 쓴다(라이트 7.9:1 / 다크 7.3:1) */
.sbtn{flex:none;border:0;border-radius:999px;background:var(--accent);color:var(--badge-ink);
  font-family:inherit;font-weight:800;font-size:14.5px;padding:10px 22px;cursor:pointer;line-height:1.2}
.sbtn:hover{filter:brightness(.94)}

/* ===== 페이징 ===== */
.paging{max-width:var(--maxw);margin:0 auto;padding:0 24px 44px;display:flex;align-items:center;
  justify-content:center;gap:8px;flex-wrap:wrap}
.pgnums{display:flex;gap:6px;flex-wrap:wrap}
.pg{min-width:40px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center}
.pg:hover{border-color:var(--accent);color:var(--accent)}
/* 현재 페이지 — 티스토리 실제 출력이 확정적이지 않아 2중으로 잡는다.
   ① 공식 테마 ray의 CSS가 `.link_page span.selected`를 스타일링 → 번호가 <span>으로 감싸지고
      현재 페이지에만 class="selected"가 붙는다
   ② 그게 아닌 스킨/버전 대비: 현재 페이지 <a>에 링크 속성이 안 붙는 경우 */
.pg.num:has(.selected),.pg.num:not([href]){background:var(--ink);color:var(--bg);border-color:var(--ink);pointer-events:none}
/* [##_no_more_prev_##]/[##_no_more_next_##]가 뱉는 클래스 = 더 갈 곳 없음.
   ⚠️ ray의 style.css는 하이픈(`no-more-prev`)을 쓴다 — 언더스코어 추정은 틀림. 둘 다 잡아둔다 */
.pg.no-more-prev,.pg.no-more-next,.pg.no_more_prev,.pg.no_more_next{opacity:.35;pointer-events:none}
/* 페이지가 1개뿐이면 숫자 하나만 덩그러니 남으므로 통째로 숨김 */
.paging:not(:has(.num + .num)){display:none}

/* ===== 인기 체크인 ===== */
.popsec{padding-top:8px}
/* 전역 리셋은 ul만 커버 → ol 기본 마커를 꺼야 counter와 이중 표기되지 않는다 */
.poplist{list-style:none;counter-reset:pop;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.pop{counter-increment:pop;border-top:1px solid var(--line)}
.pop > a{display:grid;grid-template-columns:26px 78px 1fr;align-items:center;gap:14px;padding:12px 4px}
.pop > a::before{content:counter(pop);font-size:17px;font-weight:800;color:var(--accent-text);text-align:center}
/* 썸네일 없는 인기글은 .thumb과 같은 크림 placeholder(핀 아이콘)를 축소해서 재사용 */
.pop .pthumb{width:78px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;display:block;
  background:var(--soft) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='80'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202C8.1%202%205%205.1%205%209c0%205.2%207%2013%207%2013s7-7.8%207-13c0-3.9-3.1-7-7-7zm0%209.5A2.5%202.5%200%201112%206.5a2.5%202.5%200%20010%205z'%20fill='none'%20stroke='%23cdbfa6'%20stroke-width='1.5'/%3E%3C/svg%3E") center/26px no-repeat}
.pop .pthumb img{width:100%;height:100%;object-fit:cover}
.pop .ptxt{min-width:0;display:block}
.pop .ptxt strong{display:block;font-size:15.5px;font-weight:700;line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pop .pmeta{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.pop > a:hover .ptxt strong{color:var(--accent-text)}
/* 인기글 모듈이 비면(공개 글 0개 등) 섹션 자체를 숨김 */
.popsec:not(:has(.pop)){display:none}

/* ===== 태그 칩 ===== */
.tagsec{padding-bottom:46px}
.tagchips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;
  padding:7px 15px;font-weight:600;line-height:1.4;white-space:nowrap}
.chip::before{content:"#";opacity:.55;margin-right:2px}
.chip:hover{border-color:var(--accent);color:var(--accent-text)}
/* cloud1(최다 사용) → cloud5(최소). 크기·무게로 빈도 표현 */
.chip.cloud1{font-size:17px;font-weight:800;color:var(--ink)}
.chip.cloud2{font-size:15.5px;font-weight:700}
.chip.cloud3{font-size:14.5px}
.chip.cloud4{font-size:13.5px}
.chip.cloud5{font-size:13px;opacity:.85}
.tagsec:not(:has(.chip)){display:none}

/* ============ 푸터 ============ */
footer{background:var(--card);border-top:1px solid var(--line);margin-top:30px}
.foot{max-width:var(--maxw);margin:0 auto;padding:44px 24px 8px;display:flex;gap:48px;flex-wrap:wrap;
  color:var(--muted);font-size:14px}
.fcol.about{max-width:300px}
.foot .brand{font-size:18px;margin-bottom:10px}
.foot .about p{line-height:1.7}
.foot h4{color:var(--ink);font-size:15px;font-weight:800;margin-bottom:12px}
.foot a{display:block;padding:5px 0}
.foot a:hover{color:var(--accent)}
.cat-index ul,.cat-index li,.foot-menu ul,.foot-menu li{display:contents}
.cat-index a,.foot-menu a{display:block;padding:5px 0}
.copy{max-width:var(--maxw);margin:0 auto;padding:24px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:24px}

/* ============ 반응형 ============ */
@media(max-width:880px){
  nav.main ul{gap:14px}
  .hero h1{font-size:32px} .hero{aspect-ratio:4/3}
  .article-area{grid-template-columns:repeat(2,1fr)}
  .detail h1{font-size:30px}
  .place{grid-template-columns:1fr;gap:14px}
  .photo-grid{columns:2 150px}
  .poplist{grid-template-columns:1fr;gap:0}
}
@media(max-width:560px){
  .topbar{gap:12px;padding:0 16px}
  /* ⚠️ 메뉴가 6개면 390px에서 각 항목이 18px로 눌려 "서/울"처럼 한 글자씩 세로로 쪼개졌다.
     브랜드·토글은 고정폭으로 지키고, 메뉴만 가로 스크롤 되게 한다(스크롤바는 숨김) */
  .brand{flex:none;white-space:nowrap}
  nav.main{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
  nav.main ul{flex-wrap:nowrap}
  nav.main li{flex:none}
  nav.main a{white-space:nowrap}
  .theme-tg{flex:none}
  .article-area{grid-template-columns:1fr}
  .hero .cap{left:20px;right:20px;bottom:20px}
  /* ⚠️ min-height:300px + aspect-ratio:4/3 은 폭을 400px로 역산해 고정한다 → 390/375/360 기기에서
     히어로가 뷰포트를 밀어내 가로 스크롤이 생겼다. 좁은 화면에선 최소 높이를 풀어 비율만 따르게 한다 */
  .hero{min-height:0}
  .foot{gap:28px}
  /* 좁은 화면: 돋보기 아이콘을 빼서 입력 폭을 벌린다(검색 버튼이 이미 어포던스) */
  .sbox{padding-left:18px;gap:8px}
  .sbox .sic{display:none}
  .sinput{font-size:15px}
  .pop > a{grid-template-columns:22px 64px 1fr;gap:11px}
  .pop .pthumb{width:64px}
  /* 터치 타깃 44px 확보 (모바일 최소 권장치) */
  .sbtn{min-height:44px;padding:0 18px;font-size:14px}
  .chip{padding:9px 16px}
  .pg{min-width:44px;height:44px}
}