/* =========================================================================
   전국콜 공용 테마 — 쇼핑몰/랭킹형 (컬러풀)
   index / region / gu / dong / dong-vehicle / matjip* / travel* / airport /
   regions/template 전체 공용. admin.php(관리자)은 별도 테마 유지, 미적용.
   ========================================================================= */

:root{
  --bg: #f5f6fb;
  --surface: #ffffff;
  --text: #191a2b;
  --muted: #6b6f8d;
  --border: #e7e8f3;
  --accent: #454b57;
  --accent2: #2e3440;
  --accent3: #9aa5b1;
  --grad-hot: linear-gradient(90deg,#454b57,#9aa5b1);
  --grad-cool: linear-gradient(90deg,#2e3440,#454b57);
  --radius: 16px;
  --shadow: 0 8px 24px rgba(30,30,60,.08);
  --shadow-hover: 0 16px 34px rgba(30,30,60,.14);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:-apple-system,"Pretendard","Noto Sans KR",sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.7;
}
a{ color: inherit; }

.container{ max-width:1080px; margin:0 auto; padding:0 20px 80px; }

/* 전역 내비게이션(.jc-global-nav) 스타일은 전부 nav.css 한 파일에서만 관리함.
   여기 있던 구버전 알약형 nav 스타일은 nav.css와 겹쳐서 깨지는 원인이라 삭제. */

/* ── 히어로 (index) ───────────────────────────────────────────────── */
.hero{ text-align:center; padding:72px 20px 56px; background:var(--surface); border-bottom:1px solid var(--border); }
.badge{
  display:inline-block; padding:9px 22px; border-radius:999px;
  background:var(--grad-hot); color:#fff;
  font-size:15px; font-weight:800; letter-spacing:1px; margin-bottom:24px;
  box-shadow:0 6px 16px rgba(255,91,58,.35);
}
h1{
  font-size:clamp(32px,6vw,56px); font-weight:900;
  background:var(--grad-cool);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:18px; line-height:1.25;
}
.hero p{ color:var(--muted); font-size:18px; max-width:680px; margin:0 auto; line-height:1.8; }

/* ── 목차 (index) ─────────────────────────────────────────────────── */
.toc{
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:36px 32px; margin:36px 0 52px; box-shadow:var(--shadow);
}
.toc h2{ font-size:25px; font-weight:800; margin-bottom:24px; display:flex; align-items:center; gap:8px; }
.toc h2::before{ content:"🛒"; font-size:22px; }
.toc-group{ margin-bottom:22px; }
.toc-group:last-child{ margin-bottom:0; }
.toc-group h3{
  font-size:12px; color:var(--accent2); letter-spacing:1px; margin-bottom:12px;
  text-transform:uppercase; font-weight:800;
}

/* ── 공용: "-grid" 로 끝나는 모든 목록/링크 그리드 ───────────────────
   (toc-grid, dong-grid, gu-grid, sido-grid, city-grid, country-grid,
   continent-grid, sibling-grid, nearby-grid, related-grid, other-grid,
   district-list 등 전 페이지 공통 패턴) */
[class$="-grid"], .district-list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.sibling-grid, .nearby-grid, .related-grid, .district-list{
  display:flex; flex-wrap:wrap; gap:8px;
}
@media (max-width:700px){ [class$="-grid"]{ grid-template-columns:repeat(2,1fr); } }

[class$="-grid"] a, .district-list a{
  display:block; padding:10px 12px; border-radius:10px;
  background:var(--surface); color:var(--text); text-decoration:none;
  font-size:14px; border:1px solid var(--border); border-left:3px solid var(--accent2);
  transition:all .18s ease;
}
[class$="-grid"] a:hover, .district-list a:hover{
  border-left-color:var(--accent); background:#fff5f2; transform:translateX(3px);
}
/* 컬러풀 포인트: 4의 배수 주기로 좌측 보더 색 순환 */
[class$="-grid"] a:nth-child(4n+1){ border-left-color:var(--accent2); }
[class$="-grid"] a:nth-child(4n+2){ border-left-color:var(--accent); }
[class$="-grid"] a:nth-child(4n+3){ border-left-color:var(--accent3); }
[class$="-grid"] a:nth-child(4n+4){ border-left-color:#22c55e; }

.sibling-grid a, .nearby-grid a, .related-grid a, .district-list a{
  font-size:13px; padding:8px 14px; border-radius:999px; border-left:1px solid var(--border);
}
[class$="-grid"] .sub{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

/* "-section" 으로 끝나는 소제목 (dong-section, city-section, gu-section 등) */
[class*="-section"] h2, .districts h2, .nearby h2, .sibling h2, .related h2, .other-sido h2{
  font-size:17px; font-weight:800; margin:34px 0 14px;
  padding-left:12px; border-left:4px solid var(--accent);
}
.nearby, .sibling, .related, .other-sido, .districts{ margin-top:38px; }
.district-note{ font-size:13px; color:var(--muted); margin-bottom:4px; }

/* ── 본문 섹션 (info) ─────────────────────────────────────────────── */
section.info{ margin-bottom:48px; scroll-margin-top:20px; }
section.info h2{
  font-size:22px; font-weight:800; margin-bottom:12px;
  border-left:4px solid var(--accent); padding-left:14px;
}
section.info p, .content p{ color:#3d3f57; font-size:15px; max-width:760px; margin-bottom:16px; }
section.info p a, .content a{ color:var(--accent2); font-weight:600; }
section.info p a:hover, .content a:hover{ color:var(--accent); }

.back-to-top{ display:inline-block; margin-top:14px; font-size:13px; color:var(--accent2); text-decoration:none; }
.back-to-top:hover{ text-decoration:underline; }

/* ── 지역/랜딩 카드 (region-card 등) ──────────────────────────────── */
.region-grid, .city-grid, .country-grid, .continent-grid, .gu-grid, .sido-grid{
  grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px;
}
@media (max-width:700px){ .region-grid,.city-grid,.country-grid,.continent-grid,.gu-grid,.sido-grid{ grid-template-columns:1fr; } }
.region-card, .city-section .card, .country-section .card{
  background:var(--surface) !important; border:1px solid var(--border) !important;
  border-left:4px solid var(--accent2) !important;
  border-radius:var(--radius); padding:22px 20px !important; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.region-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.region-card h3{ font-size:17px; font-weight:800; margin-bottom:6px; color:var(--text); }
.region-card p{ font-size:13px; color:var(--muted); }
.region-grid a:nth-child(4n+1) .region-card, .region-card:nth-child(4n+1){ border-left-color:var(--accent2); }
.region-grid a:nth-child(4n+2) .region-card, .region-card:nth-child(4n+2){ border-left-color:var(--accent); }
.region-grid a:nth-child(4n+3) .region-card, .region-card:nth-child(4n+3){ border-left-color:var(--accent3); }
.region-grid a:nth-child(4n+4) .region-card, .region-card:nth-child(4n+4){ border-left-color:#22c55e; }

/* ── 파트너 카드: 랭킹형 넘버 뱃지 ────────────────────────────────── */
.partner-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:20px;
  counter-reset:jc-rank;
}
@media (max-width:620px){ .partner-grid{ grid-template-columns:1fr; } }
.partner-grid .card{
  display:block; text-decoration:none; color:inherit; position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:26px 24px 24px 60px; text-align:left;
  box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  counter-increment:jc-rank;
}
.partner-grid .card::after{
  content:"NO." counter(jc-rank,decimal-leading-zero);
  position:absolute; left:0; top:0; bottom:0; width:44px;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed;
  background:var(--grad-hot); color:#fff; font-size:12px; font-weight:800; letter-spacing:1px;
}
.partner-grid .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--accent); }
.partner-grid .card .name{ font-size:19px; font-weight:800; margin-bottom:6px; }
.partner-grid .card .desc{ font-size:13px; color:var(--muted); }
.partner-grid .card .arrow{ position:absolute; top:22px; right:20px; font-size:17px; opacity:.4; color:var(--accent2); }

/* 파트너 카드 공용 .card 가 partner-grid 밖(구버전 마크업)에서 쓰일 때의 기본값 */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  color:inherit; text-decoration:none;
}
.card:hover{ border-color:var(--accent); }
.card .name{ font-weight:800; }
.card .desc{ color:var(--muted); }

/* ── 브레드크럼 / 광고 / 푸터 ─────────────────────────────────────── */
.crumb{ font-size:13px; color:var(--muted); margin:20px 0; }
.crumb a{ color:var(--accent2); text-decoration:none; font-weight:600; }
.crumb a:hover{ text-decoration:underline; }

.ad-slot{ max-width:1080px; margin:36px auto; padding:0 20px; text-align:center; }
.ad-slot .label{ display:block; font-size:11px; color:var(--muted); margin-bottom:6px; letter-spacing:1px; }

/* ── 좌/우 고정 레일 광고 (jc_ad_rail, jc_global_nav 안에서 자동 삽입) ─────────
   .container 가 1080px로 가운데 정렬되니, 뷰포트가 그보다 충분히 넓을 때만
   양옆 여백에 세로형 광고를 고정 배치. 여백이 없는 화면(노트북/태블릿/모바일)에서는
   컨텐츠를 가리거나 겹칠 수 있어서 아예 렌더링을 꺼버림(display:none). */
.jc-ad-rail{
  display:none;
  position:fixed; top:50%; transform:translateY(-50%);
  width:160px; z-index:20; text-align:center;
}
.jc-ad-rail .label{ display:block; font-size:11px; color:var(--muted); margin-bottom:6px; letter-spacing:1px; }
.jc-ad-rail.left{ left:16px; }
.jc-ad-rail.right{ right:16px; }
@media (min-width:1480px){
  .jc-ad-rail{ display:block; }
}

footer{ text-align:center; padding:30px 20px 50px; font-size:12px; color:var(--muted); }

/* ── 사이트맵 푸터 (전 페이지 공통, jc_footer() 단일 함수로만 생성) ──────
   클래스명은 절대 "-grid"로 끝내지 않는다 — 위쪽 [class$="-grid"] 규칙(흰
   카드 배경)이 덮어써서 어두운 푸터 위 글씨가 안 보이는 사고가 났었음.
   내부 스크롤 금지 — 링크가 많으면 줄바꿈으로 자연스럽게 늘어나게 한다. */
.site-footer{
  background:#12131f; color:#c7c9e0;
  margin-top:20px; padding:44px 20px 0; text-align:left;
}
.footer-inner{
  max-width:1080px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:32px 28px;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:600px){
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
}
.footer-col h4{
  font-size:12px; font-weight:800; letter-spacing:.5px; color:#ffffff;
  margin:0 0 14px; text-transform:uppercase;
}
.footer-links, .footer-chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.footer-links a, .footer-chip-list a{
  display:inline-block; color:#c7c9e0 !important; text-decoration:none;
  font-size:12.5px; line-height:1.4;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:6px 13px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.footer-links a:hover, .footer-chip-list a:hover{
  background:var(--accent); border-color:var(--accent); color:#fff !important;
}
.footer-bottom{
  max-width:1080px; margin:0 auto; padding:20px 0 30px;
  font-size:12px; color:#7d7f9e; text-align:center;
}

/* ── 전체 서비스 카테고리 (대표그룹 10개 x 아이템 전체) ───────────────
   클래스명은 절대 "-grid"로 끝내지 않는다 (위쪽 [class$="-grid"] 흰 카드 배경 규칙과 충돌 방지).
   items.php에 아이템을 몇 개를 추가하든 chip이 자연스럽게 줄바꿈되므로 여기 손댈 필요 없음. */
.footer-categories{
  max-width:1080px; margin:0 auto; padding:32px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-categories-title{
  font-size:12px; font-weight:800; letter-spacing:.5px; color:#fff;
  margin:0 0 20px; text-transform:uppercase;
}
.footer-cat-cols{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:26px 24px;
}
.footer-cat-block h5{
  font-size:12px; font-weight:800; letter-spacing:.4px; color:#facc15;
  text-transform:uppercase; margin:0 0 10px;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq{ margin:30px 0; }
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent3);
  border-radius:12px; padding:16px 18px; margin-bottom:10px; box-shadow:var(--shadow);
}
.faq-item h3, .faq-q{ font-size:14px; color:var(--text); margin-bottom:8px; font-weight:700; }
.faq-item h3::before, .faq-q::before{ content:"Q. "; color:var(--accent); }
.faq-item p, .faq-a{ font-size:13px; color:var(--muted); margin:0; }
.faq-a::before{ content:"A. "; color:var(--accent2); font-weight:700; }

/* ── 상세 페이지 공용 컨테이너(gu/dong/travel-*/matjip-*/airport 등) ── */
.container .crumb + h1{ margin-top:4px; }