/* 서울여행 — Clarity 스타일 자체 구현 */

/* ============================================================
   테마 설정 — 여기만 바꾸면 사이트 전체에 일괄 반영됩니다
   ============================================================
   --font-main : 전체 폰트 (헤더의 웹폰트 링크와 함께 교체)
   --accent    : 포인트 색 (배지·버튼·링크)
   --ph-grad   : 이미지 없는 카드의 플레이스홀더 배경
*/
:root{
  --font-main:'Noto Sans KR',sans-serif; /* tourlife와 동일 (실측 확인) */
  --bg:#ffffff; --text:#1f2430; --muted:#6b7280; --line:#e8e8ec;
  --accent:#4f46e5; --accent-soft:#eef2ff; --card:#ffffff;
  --pill:#f3f4f6; --pill-on:#1f2430;
  --ph-grad:linear-gradient(135deg,#c7cad4,#e3e5ea);
}
*{box-sizing:border-box}
input,select,textarea,button{font-family:inherit} /* 폼 요소도 본문 폰트(Noto Sans KR) 상속 */
/* 아이콘 공통 (Lucide SVG + FontAwesome/Phosphor/Bootstrap 웹폰트) */
svg.lucide{display:inline-block;vertical-align:-.18em;stroke-width:1.8}
i.ic{display:inline-block;vertical-align:-.125em;line-height:1}
.chip svg.lucide,.chip i.ic{color:var(--muted)}
.chip.on svg.lucide,.chip.on i.ic{color:#fff}
.page-head h1 svg.lucide,.page-head h1 i.ic{color:#1f2430}
.page-head h1.sec-head svg.lucide,.page-head h1.sec-head i.ic{color:#e2231a}
.page-head h1.sec-head{margin-bottom:2px}
.page-head h1 i.ic{font-size:1em!important;vertical-align:-.1em}
.page-head h1 svg.lucide{width:1em;height:1em}
.thumb.ph svg.lucide,.thumb.ph i.ic{color:#555}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-main);font-size:1rem;line-height:1.6} /* tourlife 실측: 16px/1.6 */
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* 헤더 */
.site-header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);z-index:50}
.nav{display:flex;align-items:center;gap:26px;height:64px}
.logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:800;letter-spacing:-.02em;color:#000}
.logo-img{width:28px;height:28px;border-radius:8px;flex:none;display:block}
.logo em{color:inherit;font-style:normal}
.nav-menu{display:flex;flex-wrap:nowrap;align-items:center;gap:18px;list-style:none;margin:0;padding:0;font-size:1rem;color:var(--muted)} /* Bootstrap nav-link */
.nav-menu li{white-space:nowrap}
.nav-menu a:hover{color:#000}
.nav-menu .on a{color:#000;font-weight:700}
.nav-search{margin-left:auto}
.nav-search form{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.nav-search input{border:0;padding:8px 12px;font-size:13px;outline:none;width:170px}
.nav-search button{border:0;background:#333;color:#fff;padding:0 14px;cursor:pointer;font-size:13px}
.menu-toggle{display:none;margin-left:auto;align-items:center;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:18px;cursor:pointer;color:var(--text)}
.menu-toggle .mt-x{display:none}
.menu-toggle.open .mt-bars{display:none}
.menu-toggle.open .mt-x{display:inline-flex}

/* 히어로 */
.hero{padding:52px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}
.feature{position:relative;border-radius:18px;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;color:#fff;background:linear-gradient(135deg,#334, #556)}
.feature .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,20,.82) 12%,rgba(10,12,20,.05) 60%)}
.feature .fx{position:relative;z-index:2;padding:26px}
.feature h2{margin:8px 0 8px;font-size:2.3rem;letter-spacing:-.02em;text-wrap:balance} /* tourlife .display-5 */
.feature p{margin:0;color:#d7dae2;font-size:14px;max-width:520px}
.badge{display:inline-block;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:3px 9px;letter-spacing:.05em}
.side-list{display:flex;flex-direction:column;gap:14px}
.side-item{display:flex;gap:14px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card)}
.side-item .thumb{width:92px;height:76px;border-radius:10px;flex:none;object-fit:cover;background:var(--ph-grad)}
.side-item b{display:block;font-size:14px;line-height:1.45;margin:2px 0 4px}
.side-item small{color:var(--muted);font-size:12px}

/* 카테고리 칩 */
.cats{padding:10px 0 6px}
.cats h3{font-size:20px;margin:0 0 4px;letter-spacing:-.02em}
.cats p{color:var(--muted);font-size:13px;margin:0 0 16px}

/* 홈 검색 (시/도 + 키워드) */
.home-search{display:flex;gap:8px;max-width:660px;margin:0 0 22px}
.home-search select{border:1px solid var(--line);border-radius:10px;padding:0 12px;font-size:.95rem;background:#fff;min-width:96px;cursor:pointer;color:var(--text)}
.home-search input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-size:.95rem;outline:none}
.home-search select:focus,.home-search input:focus{border-color:#333}
.home-search button{border:0;background:#333;color:#fff;border-radius:10px;padding:0 22px;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
@media(max-width:620px){
  .home-search{flex-wrap:wrap}
  .home-search input{flex:1 1 100%;order:-1}
  .home-search select{flex:1 1 40%;padding:12px 10px}
  .home-search button{flex:1 1 40%;justify-content:center;padding:12px 0}
}
.chiprow{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #ddd;border-radius:10px;padding:9px 16px;font-size:.9rem;color:var(--text);box-shadow:1px 1px 5px #eee}
.chip:hover{transform:translateY(-2px);box-shadow:2px 3px 8px #e2e2e2}
.chip.on{background:var(--pill-on);color:#fff;border-color:var(--pill-on)}

/* 카테고리 타일 (leekduck 스타일) */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #ddd;
  border-radius:10px;padding:14px 12px 14px 15px;box-shadow:1px 1px 5px #eee;
  transition:transform .15s, box-shadow .15s}
.tile:hover{transform:translateY(-3px);box-shadow:2px 4px 12px #e2e2e2}
.tile-ic{flex:none;color:#1f2430;display:flex;align-items:center}
.tile-tx b{display:block;font-size:1.25rem;font-weight:600;line-height:1.25}
.tile-tx small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.tile.on{background:var(--pill-on);border-color:var(--pill-on)}
.tile.on .tile-ic{color:#fff}
.tile.on .tile-tx b{color:#fff}
.tile.on .tile-tx small{color:rgba(255,255,255,.72)}

/* 카드 그리드 */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:3px 0 8px}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);transition:box-shadow .15s, transform .15s}
.card:hover{box-shadow:0 10px 28px rgba(20,24,40,.10);transform:translateY(-2px)}
.card .thumb-wrap{position:relative}
.card .thumb{height:185px;width:100%;object-fit:cover;background:var(--ph-grad);display:block}
.card .thumb.ph{display:flex;align-items:center;justify-content:center;color:#9aa0ad;font-size:30px}
.card .cat-badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.05em;border-radius:6px;padding:3px 9px;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
.card .bd{padding:16px 18px 18px}
.card .cat{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.04em}
.card h4{margin:6px 0 6px;font-size:1.2rem;font-weight:600;letter-spacing:-.01em} /* tourlife card-title 19.2px/600 */
.card p{margin:0 0 10px;font-size:.9rem;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* tourlife card-text 14.4px */
.card .addr{font-size:.875rem;color:var(--muted)} /* Bootstrap small */
.card .dates{font-size:12px;color:var(--accent);margin:-2px 0 6px}
.card .dates b{color:#0e9f6e;font-weight:700}
.card .cat-badge.yeogi{background:#f2385a}
.card .hotel-rating{font-size:.92rem;font-weight:700;color:var(--text);margin:2px 0 6px}
.card .hotel-rating .star{color:#f5a623}
.card .hotel-rating .rev{color:var(--muted);font-weight:400;font-size:.82rem}
/* 숙소 상세 */
.badge.yeogi-badge{background:#f2385a}
.detail .hotel-meta{color:var(--text);font-size:.95rem;font-weight:600;margin:2px 0 20px}
.detail .hotel-meta .star{color:#f5a623}
.detail .hotel-meta .rev{color:var(--muted);font-weight:400}
.amenities{display:flex;flex-wrap:wrap;gap:8px}
.amenities span{background:#f3f4f6;border-radius:999px;padding:7px 14px;font-size:.88rem;color:var(--text)}

/* 트렌드 (지역 순위) */
.trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:3px 0 4px}
.trend-rank{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--card)}
.trend-rank h4{margin:0 0 14px;font-size:.95rem;display:flex;align-items:center;gap:5px}
.trend-rank h4 i.ic{margin-right:0}
.trend-rank:first-child h4 i.ic{color:#e2231a}
.trend-rank:last-child h4 i.ic{color:#2f7de0}
.trend-rank ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.trend-rank li{display:grid;grid-template-columns:20px 52px 1fr auto;align-items:center;gap:9px;font-size:.9rem}
.tr-rank{font-weight:800;color:var(--accent);text-align:center}
.tr-name{font-weight:600;white-space:nowrap}
.tr-bar{height:8px;background:#eef0f4;border-radius:5px;overflow:hidden}
.tr-bar i{display:block;height:100%;background:#333;border-radius:5px}
.tr-bar.foreign i{background:#e0602f}
.tr-val{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.82rem;white-space:nowrap}
.trend-region{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:16px 0 4px;
  border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fafafb}
.trend-region label{font-size:.9rem;color:var(--muted);font-weight:600}
.trend-region select{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:.9rem;background:#fff;cursor:pointer}
.trend-region-out{font-size:.95rem}
.trend-region-out .muted{color:var(--muted);font-size:.82rem;font-weight:400}
@media(max-width:620px){
  .trend-grid{grid-template-columns:1fr}
  .trend-rank li{grid-template-columns:18px 44px 1fr auto}
}

/* 목록 페이지 */
.area-filter{display:flex;align-items:center;gap:8px;margin:14px 0 2px}
.area-filter label{font-size:.9rem;color:var(--muted);font-weight:500}
.area-filter select{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:.9rem;background:#fff;cursor:pointer;color:var(--text)}
.area-filter select:focus{border-color:#333;outline:none}
.page-head{padding:40px 0 6px}
.page-head h1{font-size:2rem;margin:0 0 6px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* Bootstrap h2 */
.page-head h1 .result-count{font-size:.95rem;font-weight:500;color:var(--muted);align-self:flex-end;padding-bottom:.18em}
.page-head p{color:var(--muted);font-size:.875rem;margin:0}
.pager{display:flex;gap:8px;justify-content:center;padding:26px 0 40px}
.pager a,.pager span{border:1px solid var(--line);border-radius:8px;padding:7px 13px;font-size:13px}
.pager .cur{background:var(--pill-on);color:#fff;border-color:var(--pill-on)}

/* 상세 (Visit Seoul 스타일 — 가운데 정렬 콘텐츠 칼럼) */
.detail{max-width:880px;margin:0 auto;padding:36px 20px 56px}
.detail .badge{margin-bottom:12px}
.detail h1{font-size:2.1rem;line-height:1.3;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
.detail .mainimg{border-radius:16px;width:100%;max-height:460px;object-fit:cover;margin:0 0 28px}
.detail .overview{font-size:1rem;line-height:1.85;color:#333}
/* 듣기 — 본문(.overview) 바로 위 우측 (읽을 대상 옆이라 의미가 명확) */
.tts-bar{display:flex;justify-content:flex-end;margin:0 0 10px}
.tts-btn{display:inline-flex;align-items:center;gap:6px;background:#000;color:#fff;
  border:0;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;
  font-family:inherit;cursor:pointer;line-height:1;transition:opacity .15s}
.tts-btn:hover{opacity:.75}
.tts-btn:focus-visible{outline:2px solid #000;outline-offset:2px}
.tts-btn .ic{font-size:15px}
.tts-audio{display:block;width:100%;margin:0 0 16px}
.tts-audio[hidden]{display:none}
/* 포켓몬 출현 배지 (재미 요소) */
.poke-spot{display:flex;align-items:center;gap:14px;margin:20px 0 4px;padding:12px 18px;
  border:1px solid var(--line);border-radius:14px;background:linear-gradient(90deg,#fff8dc,#fff)}
.poke-spot img{width:60px;height:60px;image-rendering:pixelated;flex:none}
.poke-tx .poke-tag{display:block;font-size:.72rem;font-weight:800;color:#e0602f;letter-spacing:.04em;margin-bottom:2px}
.poke-tx b{font-size:1.1rem}
/* 여기어때 예약 버튼 (딥링크) */
.book-btn{display:inline-flex;align-items:center;gap:9px;margin:22px 0 4px;
  background:#f2385a;color:#fff;font-weight:700;font-size:1.05rem;
  padding:14px 24px;border-radius:12px;box-shadow:0 5px 16px rgba(242,56,90,.30)}
.book-btn:not(.outline):hover{background:#fff;color:#f2385a;box-shadow:inset 0 0 0 1.5px #f2385a, 0 5px 16px rgba(242,56,90,.20)}
.book-btn .book-sub{font-weight:500;font-size:.85rem;opacity:.9}
.book-btn.outline{background:#fff;color:#f2385a;border:1.5px solid #f2385a;box-shadow:none}
.book-btn.outline:hover{background:#f2385a;color:#fff;box-shadow:0 5px 16px rgba(242,56,90,.25)}
.book-btn.outline .book-sub{opacity:.75}
@media(max-width:620px){.book-btn{width:100%;justify-content:center;flex-wrap:wrap;gap:4px 9px}}
/* 정보 테이블 */
.info-table{margin:32px 0;border-top:2px solid #222}
.info-table .row{display:grid;grid-template-columns:140px 1fr;padding:14px 4px;border-bottom:1px solid var(--line);font-size:.95rem}
.info-table .k{color:var(--muted);font-weight:500}
.info-table .v{white-space:pre-line;color:var(--text);word-break:break-word}
.info-table .v a{color:var(--accent);font-weight:600}
/* 섹션(위치·사진) */
.detail-sec{margin:36px 0}
.detail-sec h3{font-size:1.1rem;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid #222}
#gmap{height:380px;border-radius:12px;background:#eceef2}
.gmap-link{margin-top:10px;font-size:.9rem}
.gmap-link a{color:var(--accent);font-weight:600}
.mobile-only{display:none} /* 데스크톱은 지도 전체화면 버튼이 있어 숨김 */
@media(max-width:620px){.mobile-only{display:block}}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery img{border-radius:10px;height:150px;width:100%;object-fit:cover}
.backlink{display:block;width:fit-content;margin:36px auto 0;background:#1f2430;color:#fff;
  padding:13px 34px;border-radius:10px;font-size:.95rem;font-weight:600;text-align:center}
.backlink:hover{background:#000}
@media(max-width:620px){
  .detail{padding:24px 16px 44px}
  .detail h1{font-size:1.6rem}
  #gmap{height:260px}
  .info-table .row{grid-template-columns:88px 1fr;gap:8px;font-size:.9rem;padding:12px 2px}
  .gallery{grid-template-columns:repeat(2,1fr)}
}

/* 위로가기 버튼 */
.to-top{position:fixed;right:22px;bottom:26px;width:46px;height:46px;border-radius:50%;border:0;
  background:#1f2430;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility .2s;z-index:60}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:#000}
@media(max-width:620px){.to-top{right:14px;bottom:16px;width:42px;height:42px}}

/* 데모 배너 / 푸터 */
.demo-note{background:#fff7e6;border-bottom:1px solid #f2e3bd;color:#8a6d1d;font-size:12.5px;text-align:center;padding:7px 14px}
.site-footer{border-top:1px solid var(--line);margin-top:44px;padding:26px 0;color:var(--muted);font-size:12.5px}

/* 반응형 */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .tile-grid{grid-template-columns:repeat(2,1fr)}
  /* 헤더: 메뉴가 넘치기 전에 햄버거로 전환 */
  .nav-menu,.nav-search{display:none}
  .menu-toggle{display:inline-flex}
  .nav-menu.open{display:flex;position:absolute;top:64px;left:0;right:0;background:#fff;
    flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--line);gap:16px;
    font-size:1.05rem;box-shadow:0 8px 20px rgba(0,0,0,.08)}
  .nav-menu.open li{white-space:normal}
}
@media(max-width:620px){
  .grid{grid-template-columns:1fr}
  .feature{min-height:300px}
  .feature h2{font-size:1.5rem} /* tourlife 모바일 display-5 */
  .infobox dl{grid-template-columns:1fr}
}

/* ───────── KTX/열차 조회 (상세보기 여기어때 버튼 아래) ───────── */
.ktx-box{margin:18px 0 4px;border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;background:#fbfbfd}
.ktx-h{display:flex;align-items:center;gap:7px;margin:0 0 12px;font-size:.98rem;font-weight:700;color:var(--text)}
.ktx-h .ic{color:#000}
.ktx-fields{display:grid;grid-template-columns:1fr 1fr 150px 130px auto;gap:10px;align-items:end}
.ktx-f{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0}
.ktx-f>span{font-size:.78rem;color:var(--muted);font-weight:500}
.ktx-f input,.ktx-f select{width:100%;box-sizing:border-box;height:42px;padding:0 11px;border:1px solid var(--line);
  border-radius:8px;background:#fff;font-family:var(--font-main);font-size:.92rem;color:var(--text)}
.ktx-f input:focus,.ktx-f select:focus{outline:none;border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.10)}
.ktx-btn{height:42px;padding:0 18px;border:0;border-radius:8px;background:#000;color:#fff;
  font-family:var(--font-main);font-weight:700;font-size:.92rem;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;white-space:nowrap}
.ktx-btn:hover{background:#333}
/* 역 자동완성 */
.ktx-ac{position:absolute;top:100%;left:0;right:0;z-index:30;margin:4px 0 0;padding:4px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.10);
  max-height:240px;overflow-y:auto}
.ktx-ac li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 9px;
  border-radius:6px;cursor:pointer;font-size:.9rem}
.ktx-ac li:hover,.ktx-ac li.on{background:#f2f2f3}
.ktx-ac li b{font-weight:600;color:var(--text)}
.ktx-ac li em{font-style:normal;font-size:.76rem;color:var(--muted);flex:none}
/* 결과 */
.ktx-out{margin-top:14px}
.ktx-rhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-bottom:8px;margin-bottom:6px;border-bottom:2px solid #222;font-size:.95rem}
.ktx-rhead span{font-size:.8rem;color:var(--muted)}
.ktx-list{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto}
.ktx-item{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;
  padding:11px 2px;border-bottom:1px solid var(--line)}
.ktx-grade{display:inline-block;padding:2px 7px;border-radius:5px;background:#f2f2f3;
  color:#000;font-size:.72rem;font-weight:700}
.ktx-no{margin-left:5px;font-size:.75rem;color:var(--muted)}
.ktx-time{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.ktx-time b{font-size:.98rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.ktx-time i{font-style:normal;color:var(--muted);font-size:.8rem}
.ktx-dur{font-size:.75rem;color:var(--muted)}
.ktx-fare{font-size:.92rem;font-weight:700;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.ktx-empty{margin:10px 0;padding:14px 2px;font-size:.9rem;color:var(--muted);line-height:1.6}
.ktx-note{margin:10px 0 0;font-size:.76rem;color:var(--muted);line-height:1.6}
.ktx-note b{color:var(--text);font-weight:600}
.ktx-korail{display:inline-block;margin-top:10px;font-size:.85rem;font-weight:600;color:#000}
@media(max-width:620px){
  .ktx-box{padding:14px 12px 12px}
  .ktx-fields{grid-template-columns:1fr 1fr;gap:9px}
  .ktx-f-dt{grid-column:1/2}
  .ktx-f-gr{grid-column:2/3}
  .ktx-btn{grid-column:1/-1;width:100%;justify-content:center;margin-top:2px}
  .ktx-item{grid-template-columns:86px 1fr;row-gap:4px}
  .ktx-fare{grid-column:2/3;text-align:right}
  .ktx-list{max-height:none}
}

/* ───────── 로켓맵 갤러리 (상세보기 — 포켓몬 배지 아래) ─────────
   가로형 컴팩트 박스: [작은 썸네일] + 오른쪽에 제목/본문발췌.
   썸네일은 반드시 고정 크기 — 스타일이 유실돼도 원본 크기로 튀지 않게 img[width]/height 속성도 함께 준다. */
.rm-gall{margin:18px 0 4px}
.rm-gall-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.rm-gall-hd h3{font-size:.95rem;margin:0;font-weight:800;letter-spacing:.01em;color:var(--text)}
.rm-gall-more{font-size:.82rem;font-weight:600;color:#000;flex:none}
.rm-gall-more:hover{text-decoration:underline}
.rm-gall-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.rm-gall-card{display:flex;align-items:center;gap:11px;padding:9px 11px 9px 9px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  transition:border-color .15s, box-shadow .15s, transform .15s;min-width:0;overflow:hidden}
.rm-gall-card:hover{border-color:#000;box-shadow:0 6px 16px rgba(0,0,0,.12);transform:translateY(-1px)}
.rm-gall-card img{width:64px !important;height:64px !important;flex:none;object-fit:cover;
  border-radius:9px;background:var(--ph-grad);display:block}
.rm-gall-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.rm-gall-tx b{font-size:.88rem;font-weight:700;color:var(--text);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-gall-tx span{font-size:.78rem;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
@media(max-width:620px){
  .rm-gall-grid{grid-template-columns:1fr;gap:8px}
  .rm-gall-card img{width:56px !important;height:56px !important}
  .rm-gall-tx span{-webkit-line-clamp:1}
}

/* 헤더: 로고가 검색창에 밀려 세로로 쪼개지는 문제 방지 (view.php 404 등에서 발생) */
.logo{flex:none;white-space:nowrap}
.logo-tx{white-space:nowrap}
.nav-search{min-width:0}
.nav-search input{min-width:0;max-width:170px;width:100%}