/* travel.ayo.pe.kr — 숙박·관광지 독자 스킨 (2026-09-27, 사이트 고유 디자인 규칙).
 *
 * 콘셉트: **여행 가이드북 × 수하물 태그**. 숙박·관광지 페이지는 "어디서 묵고 어디를 둘러보나" 를 답하는
 * 곳이라 해 질 녘 바다 하늘·여행 잡지 제목·가방에 매단 이름표·그림엽서 말투로 화면을 짠다.
 * site.css(디자인 A) 위에 덮어쓰고 전부 body.site-travel 아래로 가둔다 — 다른 사이트에 새지 않는다.
 *
 *   헤더   : 노을 하늘 → 바다 그러데이션 + 수평선 위 해 · 제목 Hahmlet
 *   탭     : 수하물 이름표(구멍 뚫린 작은 태그)
 *   요약표 : 체크인 카드(양옆 반원 홈 + 절취 점선)
 *   질답   : 가이드북 팁 — 01·02 번호 원(산호색)과 페이지 색인 탭
 *   목록   : 수하물 태그 카드(왼쪽 끈 구멍 + 끈)
 *   지역   : 지도 핀 칩
 *   메뉴   : 그림엽서(바다·산·도시 노을 풍경 그러데이션)
 *   글꼴   : 제목 Hahmlet · 본문 Noto Sans KR
 *
 * ⚠️ 광고 유닛(<ins>·.ad-top·.ad-row 안쪽)에는 배경·테두리·라벨을 씌우지 않는다(site.css 애드센스 절).
 * ⚠️ 질문(h2)과 답(p) 사이에 요소를 끼우지 않는다 — 장식은 ::before/::after 로만.
 * ⚠️ 숙박 평가어·별점처럼 보이는 표식을 쓰지 않는다(인허가 사실만 싣는다).
 */

body.site-travel {
  --fg: #16233a;
  --fg-soft: #3e4d66;
  --muted: #6d7a90;
  --line: #e2d8c6;
  --line-soft: #efe8da;
  --bg: #fffdf9;
  --bg-soft: #f7f0e3;
  --accent: #0f6e7a;          /* 바다 청록 */
  --accent-strong: #0a4f58;
  --accent-soft: #dff1f1;
  --accent-wash: #f0f8f7;
  --accent-line: #a9d6d6;
  --coral: #ee6a4d;           /* 노을 산호 */
  --sun: #f7b548;
  --navy: #1d2b45;
  --sand: #f7efe1;
  --kraft: #e9d3ab;           /* 이름표 판지 */
  --title: "Hahmlet", "Nanum Myeongjo", serif;
  --radius: 12px;
  --wrap: 900px;
  background: var(--sand);
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

body.site-travel main,
body.site-travel .site-foot,
body.site-travel .ad-top,
body.site-travel .top-search { max-width: var(--wrap); }

body.site-travel h1,
body.site-travel .brand,
body.site-travel .qa-head,
body.site-travel section.list > h2,
body.site-travel section.children > h2,
body.site-travel section.other-sites > h2,
body.site-travel .near h2,
body.site-travel .mapsec-head,
body.site-travel .source h2,
body.site-travel .menu-cards li > a {
  font-family: var(--title);
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* ── 헤더: 노을 바다 ─────────────────────────────────────────────────── */
body.site-travel .site-head {
  position: relative;
  max-width: none;
  margin: 0 0 6px;
  padding: 34px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 20px;
  border-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 64%, #ffe1a1 0 26px, rgba(255, 214, 140, .55) 27px 44px, transparent 45px),
    linear-gradient(180deg, #f59a6b 0%, #f7b67c 38%, #f5c98f 58%, #2b8c96 58.5%, #0f6e7a 78%, #0a4f58 100%);
}
/* 수면 위 반짝이는 물결 */
body.site-travel .site-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(255, 236, 200, .18) 7px 8px);
  pointer-events: none;
}
body.site-travel .brand {
  position: relative;
  z-index: 1;
  font-size: 32px;
  line-height: 1.1;
}
body.site-travel .brand a { color: #fff; text-shadow: 0 2px 0 rgba(122, 45, 20, .35); }
body.site-travel .brand a:hover { color: #fff; text-decoration: none; }
body.site-travel .site-head nav { position: relative; z-index: 1; gap: 8px 8px; }
/* 수하물 이름표 */
body.site-travel .site-head nav a {
  position: relative;
  padding: 5px 12px 5px 24px;
  border-radius: 4px 10px 10px 4px;
  background: var(--kraft);
  color: #4a3515;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
body.site-travel .site-head nav a::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #f5c98f;
  box-shadow: inset 0 0 0 2px #b88a45;
}
body.site-travel .site-head nav a:hover { background: #fff3dc; color: #3a2a10; text-decoration: none; }
body.site-travel .site-head nav a.on { background: var(--coral); color: #fff; }
body.site-travel .site-head nav a.on::before { background: #fff; box-shadow: inset 0 0 0 2px #b8432b; }

/* 검색창 */
body.site-travel .site-search input[type="search"] {
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: #fff;
}
body.site-travel .site-search button {
  border-radius: 12px;
  background: var(--coral);
  font-weight: 700;
}
body.site-travel .site-search button:hover { background: #d4543a; }

/* ── 제목·경로 ───────────────────────────────────────────────────────── */
body.site-travel .crumb { font-size: 12.5px; }
body.site-travel .crumb a { color: var(--accent); }
body.site-travel .crumb a::after { content: " ⟶ "; color: var(--coral); }
body.site-travel .crumb span { color: var(--fg-soft); }

body.site-travel h1 {
  position: relative;
  font-size: 36px;
  line-height: 1.25;
  color: var(--navy);
  margin: 12px 0 22px;
  padding-left: 18px;
}
body.site-travel h1::before {
  content: "";
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--coral), var(--sun));
}
body.site-travel .lead { margin: 0 0 22px; color: var(--fg-soft); font-size: 16.5px; }
body.site-travel .data-date {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--accent-strong);
  letter-spacing: .2px;
}

/* ── 요약표: 체크인 카드 ─────────────────────────────────────────────── */
body.site-travel .summary {
  border: 0;
  border-radius: 14px;
  margin: 4px 0 26px;
  background:
    radial-gradient(circle at 0 50%, var(--sand) 11px, transparent 12px),
    radial-gradient(circle at 100% 50%, var(--sand) 11px, transparent 12px),
    #fff;
  box-shadow: 0 10px 24px -12px rgba(29, 43, 69, .35);
}
body.site-travel .summary caption { font-family: var(--title); }
body.site-travel .summary th {
  width: 116px;
  background: transparent;
  color: var(--coral);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  border-right: 2px dashed var(--line);
}
body.site-travel .summary td { color: var(--navy); font-weight: 500; }
body.site-travel .summary tr + tr th,
body.site-travel .summary tr + tr td { border-top: 1px solid var(--line-soft); }
body.site-travel .summary tr:first-child td { font-family: var(--title); font-size: 18px; font-weight: 800; }

body.site-travel .btn { border-radius: 999px; }
body.site-travel .btn-phone { border: 2px solid var(--accent); color: var(--accent-strong); background: #fff; }
body.site-travel .btn-phone:hover { background: var(--accent-soft); }

/* ── 질답: 가이드북 팁 ───────────────────────────────────────────────── */
body.site-travel .qa-head { font-size: 23px; color: var(--navy); }
body.site-travel .qa-head::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 58%, var(--sun) 0 6px, transparent 7px), linear-gradient(180deg, #f59a6b 55%, var(--accent) 56%);
}
body.site-travel .qa-list {
  counter-reset: tv;
  position: relative;
  padding: 8px 24px 8px 24px;
  border: 1px solid var(--line);
  border-radius: 4px 18px 18px 4px;
  background: #fff;
  box-shadow: -6px 0 0 var(--accent), 0 8px 20px -14px rgba(29, 43, 69, .4);
}
body.site-travel .qa-item {
  counter-increment: tv;
  position: relative;
  padding: 18px 0 18px 48px;
  border-bottom: 1px dotted var(--line);
}
body.site-travel .qa-item h2 { font-size: 17.5px; color: var(--navy); }
body.site-travel .qa-item h2::before {
  content: counter(tv, decimal-leading-zero);
  position: absolute;
  left: 0; top: 16px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-family: var(--title);
  font-size: 14px;
  font-weight: 800;
}
body.site-travel .qa-item:nth-child(even) h2::before { background: var(--accent); }
body.site-travel .qa-item p { padding-left: 0; color: var(--fg-soft); line-height: 1.85; }

/* ── 지도·주변 ───────────────────────────────────────────────────────── */
body.site-travel .mapsec-head { color: var(--navy); font-size: 20px; }
body.site-travel .map-box { border-radius: 14px; overflow: hidden; }
body.site-travel .near { border-top: 0; margin-top: 44px; }
body.site-travel .near h2 {
  padding-left: 0;
  border-left: 0;
  font-size: 19px;
  color: var(--navy);
}
body.site-travel .near h2::before {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 10px;
  vertical-align: 1px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--coral);
  box-shadow: inset 0 0 0 3px #fff;
  border: 2px solid var(--coral);
}
body.site-travel .near-block {
  padding: 2px 20px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
}
body.site-travel .near > .near-block > p,
body.site-travel .near ul,
body.site-travel .near .more { padding-left: 0; }
body.site-travel .near ul li { padding: 6px 0; border-bottom: 1px dotted var(--line); }
body.site-travel .dist { background: var(--accent-soft); color: var(--accent-strong); }

/* ── 목록: 수하물 태그 ──────────────────────────────────────────────── */
body.site-travel section.list > h2,
body.site-travel section.children > h2,
body.site-travel section.other-sites > h2 {
  font-size: 21px;
  color: var(--navy);
  border-bottom: 0;
  padding-bottom: 0;
}
body.site-travel .place-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
body.site-travel .place-list li {
  position: relative;
  padding: 14px 16px 14px 46px;
  border: 0;
  border-radius: 6px 16px 16px 6px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 4px 0 var(--line-soft);
  align-content: start;
}
/* 끈 구멍 — 판지 띠 위 동그란 쇠고리 */
body.site-travel .place-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 32px;
  border-radius: 6px 0 0 6px;
  background:
    radial-gradient(circle at 16px 22px, var(--sand) 0 5px, #b88a45 5.5px 7.5px, transparent 8px),
    var(--kraft);
  border-right: 2px dashed #c9a86d;
}
body.site-travel .place-list li:nth-child(3n+2)::before { background: radial-gradient(circle at 16px 22px, var(--sand) 0 5px, #b8432b 5.5px 7.5px, transparent 8px), #f6b7a6; border-right-color: #e08d77; }
body.site-travel .place-list li:nth-child(3n)::before { background: radial-gradient(circle at 16px 22px, var(--sand) 0 5px, #0a4f58 5.5px 7.5px, transparent 8px), #bfe3e2; border-right-color: #86c6c4; }
body.site-travel .place-list li:hover { box-shadow: 0 0 0 2px var(--coral), 0 4px 0 var(--line-soft); }
body.site-travel .place-list li > a { color: var(--navy); font-size: 16px; font-weight: 700; }
body.site-travel .place-list li.ad-row {
  grid-column: 1 / -1;
  padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0;
}
body.site-travel .place-list li.ad-row::before { content: none; }
body.site-travel .cat { background: var(--bg-soft); color: #8a5a1c; border-radius: 4px; font-weight: 700; }

/* ── 지역: 지도 핀 칩 ────────────────────────────────────────────────── */
body.site-travel .region-links {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
body.site-travel .region-links li {
  padding: 9px 14px 9px 34px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
body.site-travel .region-links li::before {
  content: "";
  position: absolute;
  left: 13px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--coral);
  box-shadow: inset 0 0 0 3px #fff;
  border: 1.5px solid var(--coral);
}
body.site-travel .region-links li:nth-child(even)::before { background: var(--accent); border-color: var(--accent); }
body.site-travel .region-links li:hover { border-color: var(--coral); background: #fff4ef; }
body.site-travel .region-links li > a { color: var(--navy); }
body.site-travel .count { color: var(--accent); font-weight: 700; }

/* 첫 화면 메뉴: 그림엽서 */
body.site-travel .menu-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
body.site-travel .menu-cards li {
  --scene: linear-gradient(180deg, #f59a6b 0 45%, #f5c98f 45% 55%, #2b8c96 55%);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  min-height: 132px;
  padding: 14px 16px;
  border: 6px solid #fff;
  border-radius: 6px;
  background: var(--scene);
  box-shadow: 0 6px 14px -6px rgba(29, 43, 69, .45);
}
body.site-travel .menu-cards li:nth-child(4n+2) { --scene: radial-gradient(ellipse at 30% 100%, #3f7a4d 0 40%, transparent 41%), radial-gradient(ellipse at 80% 100%, #2f5f3b 0 45%, transparent 46%), linear-gradient(180deg, #8ec5e0, #d8eef2); }
body.site-travel .menu-cards li:nth-child(4n+3) { --scene: linear-gradient(0deg, #1d2b45 0 22%, transparent 22%), repeating-linear-gradient(90deg, transparent 0 14px, rgba(29, 43, 69, .85) 14px 30px, transparent 30px 38px) 0 100% / 100% 48% no-repeat, linear-gradient(180deg, #6e4a8e, #f08a6b); }
body.site-travel .menu-cards li:nth-child(4n) { --scene: radial-gradient(circle at 70% 40%, #fff3c4 0 16px, transparent 17px), linear-gradient(180deg, #0f6e7a 0 60%, #e9d3ab 60%); }
body.site-travel .menu-cards li:hover { transform: rotate(-1deg); }
body.site-travel .menu-cards li > a {
  color: #fff;
  font-size: 20px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
body.site-travel .menu-cards .count { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

/* ── 출처·삭제요청·바닥 ───────────────────────────────────────────────── */
body.site-travel .source h2 { color: var(--navy); font-size: 18px; }
body.site-travel .removal {
  border: 2px dashed var(--accent-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}
body.site-travel .removal::before { background: var(--bg-soft); }
body.site-travel .removal-icon { border-radius: 50%; background: var(--coral); color: #fff; }
body.site-travel .btn-removal { background: var(--navy); box-shadow: 0 6px 14px rgba(29, 43, 69, .25); }
body.site-travel .btn-removal:hover { background: var(--accent-strong); }

body.site-travel .site-foot {
  position: relative;
  max-width: none;
  margin-top: 64px;
  padding: 30px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 44px;
  border-top: 0;
  background: var(--navy);
  color: #c7d2e4;
}
body.site-travel .site-foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 15px;
  background: radial-gradient(circle at 20px 0, transparent 14px, var(--navy) 15px) 0 0 / 40px 15px repeat-x;
}
body.site-travel .site-foot a { color: var(--sun); }

body.site-travel main.not-found .lead {
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  border-left: 6px solid var(--coral);
}

@media (max-width: 600px) {
  body.site-travel .site-head { padding: 26px 16px 16px; }
  body.site-travel .brand { font-size: 25px; }
  body.site-travel .site-head nav { gap: 6px; }
  body.site-travel .site-head nav a { font-size: 12.5px; padding: 4px 9px 4px 20px; }
  body.site-travel .site-head nav a::before { left: 6px; width: 7px; height: 7px; margin-top: -3.5px; }
  body.site-travel h1 { font-size: 27px; padding-left: 14px; }
  body.site-travel .place-list { grid-template-columns: 1fr; }
  body.site-travel .qa-list { padding: 4px 14px; }
  body.site-travel .qa-item { padding-left: 42px; }
  body.site-travel .qa-item h2::before { width: 30px; height: 30px; font-size: 13px; }
  body.site-travel .summary th { width: 84px; }
  body.site-travel .menu-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.site-travel .menu-cards li { min-height: 110px; border-width: 5px; }
  body.site-travel .menu-cards li > a { font-size: 17px; }
}

/* ── 다크 모드: 밤바다 ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body.site-travel {
    --fg: #e8edf5;
    --fg-soft: #bac4d4;
    --muted: #8b96a8;
    --line: #2e3a4f;
    --line-soft: #243044;
    --bg: #131b29;
    --bg-soft: #1b2436;
    --accent: #5cc3c9;
    --accent-strong: #8adbe0;
    --accent-soft: #173238;
    --accent-wash: #122529;
    --accent-line: #2b5b60;
    --navy: #e8edf5;
    --sand: #0e1522;
    --kraft: #c9ab77;
  }
  body.site-travel .site-head {
    background:
      radial-gradient(circle at 84% 40%, #f3ecd0 0 18px, rgba(243, 236, 208, .2) 19px 34px, transparent 35px),
      linear-gradient(180deg, #1b2442 0%, #2c2f5a 55%, #123a4a 55.5%, #0b2530 100%);
  }
  body.site-travel .summary,
  body.site-travel .qa-list,
  body.site-travel .near-block,
  body.site-travel .place-list li,
  body.site-travel .region-links li,
  body.site-travel .removal,
  body.site-travel main.not-found .lead,
  body.site-travel .site-search input[type="search"],
  body.site-travel .btn-phone { background-color: #172133; }
  body.site-travel .summary {
    background:
      radial-gradient(circle at 0 50%, var(--sand) 11px, transparent 12px),
      radial-gradient(circle at 100% 50%, var(--sand) 11px, transparent 12px),
      #172133;
  }
  body.site-travel .site-search input[type="search"] { color: var(--fg); border-color: var(--accent-line); }
  body.site-travel .region-links li::before { box-shadow: inset 0 0 0 3px #172133; }
  body.site-travel .region-links li:hover { background: #24222c; }
  body.site-travel .btn-removal { background: #2b5b60; }
  body.site-travel .site-foot { background: #0a101b; }
  body.site-travel .site-foot::before { background: radial-gradient(circle at 20px 0, transparent 14px, #0a101b 15px) 0 0 / 40px 15px repeat-x; }
  body.site-travel .cat { background: #2a2418; color: #e6c48a; }
}