/* tour_info_list_style.css
   - 행사/쇼핑/음식점 목록 공통 스타일
   - 반응형 그리드(모바일 1열→2~3열, 데스크탑 4열)
   - 현대적 카드, 검색툴바, 카테고리 탭, 페이지네이션, 빈 상태 포함
*/

/* ========= Design Tokens ========= */ 
:root {
  --ui-surface: #ffffff;
  --ui-border: #e5e7eb;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-primary: #2563eb;         /* 기본 포커스/버튼 */
  --ui-primary-600: #1e40af;     /* hover */
  --ui-accent: #eef2ff;          /* 보조 배경(칩/탭 활성) */
  --ui-shadow: 0 10px 30px rgba(2,6,23,0.08);
}
/* ========= Page Layout ========= */
.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px 40px;
  background: var(--ui-bg);
  min-height: 100vh;
}

.page-head {
  margin-bottom: 18px;
  text-align: center;
}
.page-title {
  display: block;
  font-weight: 800;
  font-size: 28px;
  color: var(--ui-text);
}
.page-sub {
  margin-top: 6px;
  color: var(--ui-muted);
}

/* ========= Category Tabs ========= */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 10px;
}
.category-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: #334155;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.category-tab:hover {
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow);
}
.category-tab.is-active {
  background: var(--ui-accent);
  border-color: #c7d2fe;
  color: #3730a3;
}
.category-tab .emoji {
  font-size: 16px;
  line-height: 1;
}

/* ========= Toolbar (Search + Sort) ========= */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--ui-shadow);
  margin-bottom: 14px;
}
.searchbar {
  flex: 1;
  min-width: 220px;
  display: flex;
  gap: 8px;
}
.searchbar input[type="text"],
.searchbar input[type="search"] {
  flex: 1;
  min-width: 140px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
}
.searchbar input:focus {
  border-color: #bfd0ff;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
}

.btn {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  background: var(--ui-primary);
  color: #fff;
  transition: background .15s ease, transform .05s ease;
}
.btn:hover { background: var(--ui-primary-600); }
.btn:active { transform: translateY(1px); }

.select {
  min-width: 160px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--ui-surface);
}

/* ========= Result Meta ========= */
.result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 2px 12px;
}
.result-count { font-weight: 800; color: var(--ui-text); }
.result-hint { color: var(--ui-muted); }

/* ========= Grid & Card ========= */
.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 520px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px){ .card-grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow); }

.card-thumb {
  aspect-ratio: 16 / 10;
  background: #f1f5f9;
  overflow: hidden;
}
.card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.card-noimg {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: #94a3b8; font-size: 14px;
}

.card-body { padding: 14px 14px 12px; }
.card-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  font-size: 13px;
  color: var(--ui-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ui-accent);
  border: 1px solid #e0e7ff;
  font-weight: 700;
  color: #3730a3;
  font-size: 12px;
}

/* 카테고리별 포인트 색 (선택) */
.card[data-source="festival"] .chip { background: #fff7ed; border-color: #fed7aa; color:#9a3412; }
.card[data-source="shopping"] .chip { background: #ecfeff; border-color: #a5f3fc; color:#164e63; }
.card[data-source="restaurant"] .chip { background: #fef2f2; border-color: #fecaca; color:#7f1d1d; }

/* ========= Pagination ========= */
.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 18px 0 6px;
}
.page-btn {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  border-radius: 10px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--ui-text);
  transition: background .15s ease, border-color .15s ease;
}
.page-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.page-btn.is-current {
  background: var(--ui-accent);
  border-color: #c7d2fe;
  color: #3730a3;
  font-weight: 800;
}
.page-btn.is-disabled { pointer-events: none; opacity: .5; }

/* ========= Empty State ========= */
.empty {
  padding: 36px 14px;
  text-align: center;
  color: var(--ui-muted);
}

/* ========= Helpers ========= */
.mt-6 { margin-top: 24px; }

/* 페이지네이션 컨테이너 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
  gap: 10px;
  flex-wrap: wrap;
}

/* 페이지 번호 기본 스타일 */
/* 🔹 페이지네이션 (라이트 톤) */
.pager{
  display:flex; gap:8px; justify-content:center; margin:18px 0 6px;
}
.page{
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  padding:8px 14px;
  text-decoration:none;
  color:#111;
}
.page.is-current{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#3730a3;
  font-weight:800;
}
..page.is-disabled{
  pointer-events:none;
  opacity:.5;
}




/* tour_info_list_style.css
   - 행사/쇼핑/음식점 목록 공통 스타일
   - 반응형 그리드(모바일 1열→2~3열, 데스크탑 4열)
   - 현대적 카드, 검색툴바, 카테고리 탭, 페이지네이션, 빈 상태 포함
*/

/* ========= Design Tokens ========= */ 
:root {
  --ui-surface: #ffffff;
  --ui-border: #e5e7eb;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-primary: #2563eb;         /* 기본 포커스/버튼 */
  --ui-primary-600: #1e40af;     /* hover */
  --ui-accent: #eef2ff;          /* 보조 배경(칩/탭 활성) */
  --ui-shadow: 0 10px 30px rgba(2,6,23,0.08);
}
/* ========= Page Layout ========= */
.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px 40px;
  background: var(--ui-bg);
  min-height: 100vh;
}

.page-head {
  margin-bottom: 18px;
  text-align: center;
}
.page-title {
  display: block;
  font-weight: 800;
  font-size: 28px;
  color: var(--ui-text);
}
.page-sub {
  margin-top: 6px;
  color: var(--ui-muted);
}

/* ========= Category Tabs ========= */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 10px;
}
.category-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: #334155;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.category-tab:hover {
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow);
}
.category-tab.is-active {
  background: var(--ui-accent);
  border-color: #c7d2fe;
  color: #3730a3;
}
.category-tab .emoji {
  font-size: 16px;
  line-height: 1;
}

/* ========= Toolbar (Search + Sort) ========= */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--ui-shadow);
  margin-bottom: 14px;
}
.searchbar {
  flex: 1;
  min-width: 220px;
  display: flex;
  gap: 8px;
}
.searchbar input[type="text"],
.searchbar input[type="search"] {
  flex: 1;
  min-width: 140px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
}
.searchbar input:focus {
  border-color: #bfd0ff;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
}

.btn {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  background: var(--ui-primary);
  color: #fff;
  transition: background .15s ease, transform .05s ease;
}
.btn:hover { background: var(--ui-primary-600); }
.btn:active { transform: translateY(1px); }

.select {
  min-width: 160px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--ui-surface);
}

/* ========= Result Meta ========= */
.result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 2px 12px;
}
.result-count { font-weight: 800; color: var(--ui-text); }
.result-hint { color: var(--ui-muted); }

/* ========= Grid & Card ========= */
.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 520px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px){ .card-grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow); }

.card-thumb {
  aspect-ratio: 16 / 10;
  background: #f1f5f9;
  overflow: hidden;
}
.card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.card-noimg {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: #94a3b8; font-size: 14px;
}

.card-body { padding: 14px 14px 12px; }
.card-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  font-size: 13px;
  color: var(--ui-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ui-accent);
  border: 1px solid #e0e7ff;
  font-weight: 700;
  color: #3730a3;
  font-size: 12px;
}

/* 카테고리별 포인트 색 (선택) */
.card[data-source="festival"] .chip { background: #fff7ed; border-color: #fed7aa; color:#9a3412; }
.card[data-source="shopping"] .chip { background: #ecfeff; border-color: #a5f3fc; color:#164e63; }
.card[data-source="restaurant"] .chip { background: #fef2f2; border-color: #fecaca; color:#7f1d1d; }

/* ========= Pagination ========= */
.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 18px 0 6px;
}
.page-btn {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  border-radius: 10px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--ui-text);
  transition: background .15s ease, border-color .15s ease;
}
.page-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.page-btn.is-current {
  background: var(--ui-accent);
  border-color: #c7d2fe;
  color: #3730a3;
  font-weight: 800;
}
.page-btn.is-disabled { pointer-events: none; opacity: .5; }

/* ========= Empty State ========= */
.empty {
  padding: 36px 14px;
  text-align: center;
  color: var(--ui-muted);
}

/* ========= Helpers ========= */
.mt-6 { margin-top: 24px; }

/* 페이지네이션 컨테이너 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
  gap: 10px;
  flex-wrap: wrap;
}

/* 페이지 번호 기본 스타일 */
/* 🔹 페이지네이션 (라이트 톤) */
.pager{
  display:flex; gap:8px; justify-content:center; margin:18px 0 6px;
}
.page{
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  padding:8px 14px;
  text-decoration:none;
  color:#111;
}
.page.is-current{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#3730a3;
  font-weight:800;
}
..page.is-disabled{
  pointer-events:none;
  opacity:.5;
}

/* 상세페이지의 상세페이지 */
/* ============================
   Tour Info — Detail (ti-*)
   Mobile-first, clean, responsive
   ============================ */
:root{
  --bg:#0b1020; --paper:#0f172a; --text:#e5e7eb; --muted:#9aa3b2;
  --primary:#7c9cff; --accent:#f59e0b; --chip:#1e293b;
  --line:rgba(148,163,184,.18); --ring:rgba(124,156,255,.25);
  --shadow:0 10px 30px rgba(2,6,23,.45);
  --r-lg:18px; --r-md:14px; --r-sm:10px; --star:#fbbf24;
}

/* Layout helpers */
.ti-container{ width:100%; max-width:1180px; margin:0 auto; padding:0 16px; }

/* Root */
.ti-root{ color:var(--text); background:linear-gradient(180deg,#060a14 0%,#0b1020 35%,#0b1020 100%); min-height:100dvh; }

/* Hero */
.ti-hero{ position:relative; overflow:hidden; }
.ti-hero__media{ position:relative; min-height:240px; height:clamp(240px,42vh,560px); }
.ti-hero__media img,.ti-hero__placeholder{
  width:100%; height:100%; object-fit:cover; object-position:center center;
  display:flex; align-items:center; justify-content:center; background:#121829; color:#7c88a0;
}
.ti-hero__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,23,0) 0%,rgba(2,6,23,.45) 55%,rgba(2,6,23,.9) 100%),
             linear-gradient(90deg,rgba(2,6,23,.25),rgba(2,6,23,0) 30%,rgba(2,6,23,.25) 100%);
}
.ti-hero__content{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:clamp(16px,5vw,36px) 0; }
.ti-hero .ti-eyebrow,.ti-hero .ti-title,.ti-hero .ti-meta,.ti-hero .ti-actions{ padding-left:16px; padding-right:16px; }
@media (min-width:640px){ .ti-hero .ti-eyebrow,.ti-hero .ti-title,.ti-hero .ti-meta,.ti-hero .ti-actions{ padding:0; } }

/* Breadcrumbs */
.ti-breadcrumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.ti-crumb{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:6px 10px; border-radius:999px; font-size:12px; color:#d7def0; }
.ti-crumb.is-accent{ background:rgba(124,156,255,.16); border-color:var(--ring); color:#e6ecff; }

/* Title/Meta */
.ti-title{ font-size:clamp(22px,6vw,44px); line-height:1.15; margin:0; font-weight:800; letter-spacing:-0.02em; text-shadow:0 10px 30px rgba(0,0,0,.35); }
.ti-meta{ display:flex; flex-wrap:wrap; gap:6px; row-gap:8px; align-items:center; }
.ti-chip{ font-size:12.5px; padding:6px 10px; border-radius:999px; background:var(--chip); border:1px solid var(--line); color:#d2d9e5; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ti-chip--soft{ background:rgba(124,156,255,.16); border-color:var(--ring); color:#dfe7ff; }

/* rating */
.ti-rating{ display:inline-flex; align-items:center; gap:6px; background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.25); padding:6px 10px; border-radius:999px; font-weight:800; }
.ti-star{ width:16px; height:16px; fill:var(--star); display:block; }
.ti-rhint{ color:#c9d2e5; font-size:12px; }

/* actions */
.ti-actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.ti-btn{ appearance:none; border:none; cursor:pointer; text-decoration:none; background:var(--primary); color:#0b1020; font-weight:700; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.ti-btn:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.ti-btn--ghost{ background:rgba(255,255,255,.05); color:#dbe3ff; border:1px solid var(--ring); box-shadow:none; }
.ti-ico{ width:16px; height:16px; display:inline-block; }
.ti-ico svg{ width:100%; height:100%; fill:currentColor; }

/* 모바일 버튼 전체폭 */
@media (max-width:520px){ .ti-actions .ti-btn{ flex:1 1 100%; justify-content:center; } }

/* Section & Grid */
.ti-section{ padding:clamp(16px,4vw,40px) 0; }
.ti-grid{ 	position: relative; left : -2%;display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
@media (min-width:980px){ .ti-grid{ gap:18px; grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr); align-items:start; } }

/* Card */
.ti-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(12px,3.2vw,20px); box-shadow:var(--shadow); }
.ti-card-head{ margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.ti-h2,.ti-h3{ margin:0; font-weight:800; letter-spacing:-.02em; }
.ti-h2{ font-size:clamp(16px,2.6vw,22px); }
.ti-h3{ font-size:clamp(15px,2.2vw,20px); color:#dbe3ff; }

/* Prose */
.ti-prose p{ margin:0; line-height:1.75; color:#dbe3ff; font-size:clamp(14px,1.3vw,16px); }
.ti-prose p + p{ margin-top:12px; }

/* Stats */
.ti-stats{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.ti-stat{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:#0b1326; border:1px solid var(--line); border-radius:12px; }
.ti-sico{ width:16px; height:16px; color:#cbd5e1; }
.ti-sico svg{ width:100%; height:100%; stroke:currentColor; stroke-width:1.8; fill:none; }
.ti-skv b{ display:block; font-size:12px; color:#cbd5e1; }
.ti-skv em{ font-style:normal; color:#e7ecf7; }

/* Key/Value list */
.ti-dl{ display:grid; gap:10px; margin:0; }
.ti-dl > div{ display:grid; grid-template-columns:minmax(72px,100px) 1fr; gap:10px; padding:10px 12px; background:#0b1326; border:1px solid var(--line); border-radius:12px; }
.ti-dl dt{ color:#b9c3d6; font-weight:600; }
.ti-dl dd{ margin:0; color:#e7ecf7; }
@media (max-width:520px){ .ti-dl > div{ grid-template-columns:minmax(64px,90px) 1fr; } }

/* Gallery */
.ti-gallery{ display:grid; gap:10px; }
.ti-gallery--quad{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:640px){ .ti-gallery--quad{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:980px){ .ti-gallery--quad{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.ti-gallery__item{ display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0b1326; }
.ti-gallery__item img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }

/* Map */
.ti-mapbox{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0b1326; }
.ti-mapframe{ width:100%; height:clamp(240px,42vh,360px); display:block; }

/* Empty */
.ti-empty{ display:flex; align-items:center; justify-content:center; min-height:120px; color:var(--muted); border:1px dashed var(--line); border-radius:14px; }

/* Small taps */
@media (max-width:420px){ .ti-chip{ font-size:12px; padding:6px 9px; } .ti-rating{ padding:6px 9px; } }

/* ===== Mobile hero & text wrapping adjustments ===== */
@media (max-width:520px){
  .ti-hero__media{ height:clamp(200px,36vh,420px); }
  .ti-dl dd{ word-break:break-word; overflow-wrap:anywhere; }
  .ti-meta{ row-gap:6px; }
}
@media (max-width:360px){
  .ti-hero__media{ height:auto; min-height:unset; }
  .ti-hero__media img{ height:auto; width:100%; aspect-ratio:auto; object-fit:contain; background:#121829; }
  .ti-hero__overlay{
    background:linear-gradient(180deg,rgba(2,6,23,0) 0%,rgba(2,6,23,.35) 55%,rgba(2,6,23,.75) 100%),
               linear-gradient(90deg,rgba(2,6,23,.2),rgba(2,6,23,0) 30%,rgba(2,6,23,.2) 100%);
  }
  .ti-actions .ti-btn{ flex:1 1 100%; justify-content:center; }
}
.ti-chip{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@supports (overflow:clip){ .ti-chip{ overflow:clip; text-overflow:ellipsis; } }
@media (max-width:520px){ .ti-mapframe{ height:clamp(200px,38vh,300px); } }
.ti-hero__content{ padding-bottom:calc(clamp(16px,5vw,36px) + env(safe-area-inset-bottom,0px)); }
@media (max-width:520px){ .ti-hero__media img{ object-position:center 30%; } }

/* ===== Mobile-first override (≤480px): 요청하신 타일형 배치 ===== */

/* 카드별 영역명 */
.ti-card--intro{   grid-area:intro; }
.ti-card--basic{   grid-area:basic; }
.ti-card--gallery{ grid-area:gallery; }
.ti-card--map{     grid-area:map; }

/* 0~399px: 1열 */
@media (max-width:399px){
  .ti-grid{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "intro"
      "basic"
      "gallery"
      "map";
    gap:12px;
  }
  .ti-gallery{ gap:8px; }
  .ti-gallery--quad{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ti-mapframe{ height:240px; }
}

/* 400~640px: 2열 타일 (소개|기본정보 / 사진|위치) */
@media (min-width:400px) and (max-width:640px){
  .ti-hero{ overflow:visible; }
  .ti-hero__overlay{ display:none; }
  .ti-hero__content{ position:static; padding:12px 0 0; }
  .ti-hero__media{ min-height:0; height:auto; }
  .ti-hero__media img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#121829; }

  .ti-title{ font-size:clamp(20px,6.2vw,28px); line-height:1.25; }
  .ti-chip{ white-space:normal; }
  .ti-dl dd{ word-break:break-word; overflow-wrap:anywhere; }

  .ti-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    grid-auto-rows:minmax(0,auto);
    grid-template-areas:
      "intro  basic"
      "gallery map";
    gap:12px; align-items:start;
  }
  .ti-card{ padding:14px; border-radius:14px; }
  .ti-h2{ font-size:18px; } .ti-h3{ font-size:17px; }
  .ti-gallery{ gap:8px; }
  .ti-gallery--quad{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ti-mapframe{ height:260px; }
}

/* 481~640px(태블릿 작은폭)에서 cover 유지하며 높이만 낮춤 */
@media (min-width:481px) and (max-width:640px){
  .ti-hero__media{ height:clamp(220px,34vh,380px); }
  .ti-hero__media img{ object-position:center 30%; }
}

/* === Map: 완전 반응형 (overflow 방지) ====================== */
/* 1) 비율 상자: 부모가 폭을 결정, 높이는 비율로 결정 */
.ti-mapbox{
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;               /* 삐져나오는 것 차단 */
  border: 1px solid var(--line);
  background: #0b1326;
}

/* 기본 비율(가로형 지도) — 데스크톱/태블릿 */
.ti-mapbox::before{
  content: "";
  display: block;
  padding-top: 56.25%;            /* 16:9 */
}

/* 2) iframe을 비율 상자에 꽉 채우기 */
.ti-mapframe{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* 3) 작은 모바일에선 조금 더 세로로 */
@media (max-width: 480px){
  .ti-mapbox::before{ padding-top: 72%; }  /* 4:3 보다 약간 세로 */
}

/* 4) 혹시 모를 전체 가로 스크롤 방지 */
.ti-root, .ti-container{ overflow-x: hidden; }

/* 맵 카드: 테두리/라운드 중복 제거 + 가장자리까지 꽉 채우기 */
*, *::before, *::after { box-sizing: border-box; } /* (권장) 전체 박스계산 표준화 */

.ti-card--map{              /* 지도 전용 카드 */
  padding: 0;               /* 내부 여백 제거 → 좌우 완전 대칭 */
  overflow: hidden;         /* 라운드에 맞춰 깔끔히 클립 */
  border-radius: var(--r-lg);
}

.ti-card--map .ti-card-head{
  padding: 14px 16px 10px;  /* 헤더만 살짝 여백 주기 */
  margin: 0;
}

.ti-card--map .ti-mapbox{
  border: 0;                /* 카드 테두리만 사용 */
  border-radius: 0;         /* 라운드는 카드가 담당 */
}

/* 비율 상자(이미 있으시면 이 값만 덮어쓰기) */
.ti-mapbox{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: #0b1326;
}
.ti-mapbox::before{
  content: "";
  display: block;
  /* 모바일에선 너무 길지 않게 약간 낮춤 */
  padding-top: 62%;         /* ← 62%가 16:9(56.25%)보다 조금 더 세로 */
}
@media (min-width: 640px){
  .ti-mapbox::before{ padding-top: 56.25%; } /* 태블릿↑은 16:9 */
}

/* iframe을 상자에 꽉 채우기(이미 있으시면 그대로) */
.ti-mapframe{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* 혹시 모를 가로 스크롤 방지(이미 있으시면 생략 가능) */
.ti-root, .ti-container{ overflow-x: hidden; }