/* =====================================================================
   common.css : 모든 화면 공통 스타일 (부산한바퀴)
   위치: src/main/resources/static/css/common.css → 주소 /css/common.css

   ★ 고치기 쉽게 만든 규칙
     1. 색은 맨 위 :root 에 이름을 붙여 한 번만 적었다.
        → 색을 바꾸고 싶으면 여기 한 줄만 고치면 모든 곳이 바뀐다.
        → 쓸 때는 var(--이름)  예) color: var(--navy);
     2. 순서: 0 색 → 1 기본 → 2 틀 → 3 헤더 → 4 버튼 → 5 첫 화면 → 6 투어 3단
              → 7 예약 모달 → 8 푸터 · 오류 → 9 휴대폰
     3. 클래스 이름은 "어디-무엇" 모양 (tour-head, modal-title …)

   ★ 개발 중 CSS를 고쳤는데 안 바뀌면
     인텔리제이 Build → Build Project (Ctrl+F9) 후 브라우저 새로고침 (Ctrl+F5: 캐시 무시)
   ===================================================================== */


/* ---------- 0. 색과 크기 이름 붙이기 ---------- */
:root {
  --navy: #0B3D5C;        /* 남색: 로고 버스, 제목, 기본 글자 */
  --teal: #1E8C93;        /* 청록: 로고 원형 경로, 강조, 버튼 */
  --teal-dark: #166A70;   /* 진한 청록: 버튼에 마우스를 올렸을 때 */
  --gray: #4A6272;        /* 회색 글자: 설명 문장 */
  --line: #D5E0E6;        /* 연한 선: 테두리, 구분선 */
  --bg-soft: #F3F8FA;     /* 아주 연한 배경: 첫 화면, 푸터 */
  --disabled: #9AA8B2;    /* 누를 수 없는 버튼 글자 */
  --white: #FFFFFF;

  /* ★ 투어 칸 색 3개 (TourService 가 칸 순서대로 theme-1, theme-2, theme-3 을 붙임) */
  --theme-1: #0B3D5C;     /* 1번째 칸: 남색 (야경) */
  --theme-2: #1E7F86;     /* 2번째 칸: 청록 (바다) */
  --theme-3: #8A4B2A;     /* 3번째 칸: 갈색 (원도심) */

  --width: 1180px;        /* 내용 최대 폭 (3칸이 들어가게 조금 넓힘) */
  --radius: 10px;         /* 모서리 둥글기 */
}

/* 칸마다 "--tour-color" 라는 이름에 그 칸의 색을 넣어 둠
   → 칸 안의 머리 상자 · 번호 · 시간 버튼은 모두 var(--tour-color) 를 쓰므로 칸마다 색이 달라짐
   → 모달도 같은 class(theme-2 …)를 받아서 같은 색이 됨 */
.theme-1 { --tour-color: var(--theme-1); }
.theme-2 { --tour-color: var(--theme-2); }
.theme-3 { --tour-color: var(--theme-3); }


/* ---------- 1. 기본 ---------- */
/* box-sizing: border-box → width에 padding과 테두리를 포함해서 계산 (크기 계산이 쉬워짐) */
* {
  box-sizing: border-box;
}

body {
  margin: 0;                                   /* 브라우저 기본 여백 없애기 */
  font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;  /* 앞의 글꼴이 없으면 다음 글꼴 */
  font-size: 16px;
  line-height: 1.6;                            /* 줄 간격 */
  color: var(--navy);
  background: var(--white);

  /* 내용이 적어도 푸터가 화면 맨 아래에 붙게:
     body를 세로 줄(flex column)로 만들고, main이 남는 높이를 다 차지하게 함 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;                           /* 100vh = 화면 높이 전체 */
}

main {
  flex: 1;                                     /* 헤더 · 푸터를 뺀 남는 높이를 전부 차지 */
}

a {
  color: var(--teal);
  text-decoration: none;                       /* 밑줄 없애기 */
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  margin: 0 0 12px 0;                          /* 위 0, 오른쪽 0, 아래 12px, 왼쪽 0 */
  line-height: 1.3;
}

p {
  margin: 0 0 8px 0;
}

/* 목록이 비었을 때 안내 문장 */
.empty {
  padding: 24px;
  text-align: center;
  color: var(--gray);
  border: 1px dashed var(--line);              /* dashed = 점선 */
  border-radius: var(--radius);
}

.page-title {
  font-size: 30px;
}

.page-desc {
  color: var(--gray);
  margin-bottom: 20px;
}


/* ---------- 2. 틀: 가운데 정렬 상자 ---------- */
.container {
  max-width: var(--width);
  margin: 0 auto;                              /* 좌우 auto = 가운데 정렬 */
  padding: 0 20px;
}

.section {
  padding-top: 32px;
  padding-bottom: 32px;
}

.text-accent {
  color: var(--teal);
}


/* ---------- 3. 헤더 (top) ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

/* 로고는 왼쪽, 메뉴는 오른쪽: flex + space-between */
.header-inner {
  display: flex;
  align-items: center;                         /* 세로 가운데 맞춤 */
  justify-content: space-between;              /* 양 끝으로 벌리기 */
  height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;                                    /* 아이콘과 글자 사이 */
  color: var(--navy);
}

.logo:hover {
  text-decoration: none;
}

.logo-icon {
  display: block;                              /* 이미지 아래 생기는 작은 틈 없애기 */
}

.logo-text {
  font-family: "Black Han Sans", "Malgun Gothic", sans-serif;
  font-size: 26px;
  letter-spacing: -0.5px;
}

.logo-accent {
  color: var(--teal);                          /* "한바퀴"만 청록 */
}

.menu {
  display: flex;
  align-items: center;
  gap: 24px;
  font-weight: 700;
}

.menu a {
  color: var(--navy);
}

.menu a:hover {
  color: var(--teal);
}

.menu-auth {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-dot {
  color: var(--gray);
}

.menu-user {
  font-weight: 400;
}

/* 로그아웃: POST 폼이지만 다른 메뉴처럼 글자 링크로 보이게 */
.inline-form {
  display: inline;
  margin: 0;
}

.menu-link-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;                               /* 글꼴 · 굵기 · 크기를 메뉴와 같게 */
  color: var(--navy);
  cursor: pointer;
}

.menu-link-btn:hover {
  color: var(--teal);
}


/* ---------- 4. 버튼 ---------- */
/* <a class="btn btn-primary"> 처럼 btn(모양) + 색 클래스를 같이 붙여 씀 */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;                        /* button 태그는 글꼴을 물려받지 않아서 직접 지정 */
  cursor: pointer;                             /* 마우스를 올리면 손가락 모양 */
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--teal);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--teal-dark);
}

/* 흰 바탕 + 테두리 버튼 (취소 등) */
.btn-outline {
  background: var(--white);
  color: var(--navy);
  border-color: var(--navy);
}

.btn-outline:hover {
  background: var(--bg-soft);
}

/* disabled(누를 수 없음) 버튼은 흐리게 */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;                         /* 금지 모양 마우스 */
}


/* ---------- 5. 첫 화면 (작게: 제목 + 한 줄 안내) ---------- */
.hero {
  background: var(--bg-soft);
  padding: 32px 0 26px 0;
  text-align: center;
}

.hero-title {
  font-size: 34px;
  margin-bottom: 14px;
}

/* 한 줄 안내 ① → ② → ③ */
.steps {
  list-style: none;                            /* ol 기본 번호 숨김 */
  margin: 0 0 10px 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;                             /* 좁으면 다음 줄로 */
  gap: 8px 0;                                  /* 줄 사이 8px, 칸 사이 0 (화살표가 간격 역할) */
  font-weight: 700;
}

.steps li {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 마지막을 뺀 항목 뒤에 화살표 붙이기 (::after = 글자 뒤에 CSS로 내용 추가) */
.steps li:not(:last-child)::after {
  content: "→";
  margin: 0 14px;
  color: var(--gray);
}

.step-no {
  width: 26px;
  height: 26px;
  line-height: 26px;                           /* 높이와 같게 → 숫자가 세로 가운데 */
  border-radius: 50%;                          /* 50% = 원 */
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  text-align: center;
}

.hero-note {
  font-size: 14px;
  color: var(--gray);
  margin: 0;
}


/* ---------- 6. 투어 3단 ---------- */
/* 칸 폭 최소 320px: PC 3칸 → 태블릿 2칸 → 휴대폰 1칸으로 "알아서" 줄바꿈
   auto-fill : 들어갈 수 있는 만큼 칸을 만듦 / minmax(320px, 1fr) : 최소 320px, 남으면 같은 비율로
   align-items: start : 칸마다 높이가 달라도 억지로 늘리지 않음 */
.tour-columns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}

/* 투어 한 칸 = 카드 하나 (테두리를 그 투어 색으로) */
.tour-col {
  border: 2px solid var(--tour-color);
  border-radius: var(--radius);
  overflow: hidden;                            /* 머리 상자가 둥근 모서리 밖으로 안 나가게 */
  background: var(--white);
  scroll-margin-top: 16px;                     /* /#tour-1 로 스크롤될 때 위에 살짝 여백 */
}

/* 머리 상자: 투어 이름을 크게 (13단계에서 S3 사진이 깔릴 자리) */
.tour-head {
  background: var(--tour-color);
  color: var(--white);
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
}

.tour-name {
  margin: 0;
  font-family: "Black Han Sans", "Malgun Gothic", sans-serif;
  font-weight: 400;                            /* Black Han Sans 는 원래 굵은 글꼴이라 bold 불필요 */
  font-size: 26px;
  letter-spacing: -0.5px;
}

.tour-body {
  padding: 16px 18px 18px 18px;
}

.tour-meta {
  font-size: 17px;
  margin-bottom: 4px;
}

.dot {
  color: var(--gray);
  margin: 0 6px;
}

/* 소개는 2줄까지만 보이고 … 으로 줄임
   min-height: 소개가 1줄뿐이어도 2줄 높이를 차지 → 3칸의 아래 내용이 같은 줄에서 시작
   (14px × 줄 간격 1.6 × 2줄 = 44.8px) */
.tour-desc {
  color: var(--gray);
  font-size: 14px;
  min-height: 44.8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}

/* 칸 안의 작은 제목 (코스, 출발 시간) */
.sub-title {
  font-size: 15px;
  margin: 14px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

/* 코스: 번호 동그라미 + 장소 이름, 번호 사이를 세로선으로 연결
   ★ 3칸의 "출발 시간"을 같은 줄에 맞추기
     --course-rows : 가장 긴 코스의 정류장 수 (index.html 의 th:style 이 넣어 줌, 예: 7)
     min-height    : 정류장 수 × 한 줄 높이(32px) → 정류장이 5개인 칸도 7개 높이를 차지 (아래가 빈칸)
     var(--course-rows, 0) : 값이 없으면 0 (= 맞추지 않음) */
.course {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: calc(var(--course-rows, 0) * 32px);
}

/* 정류장 한 줄 = 높이 32px 고정 (동그라미 24px + 아래 여백 8px)
   장소 이름이 길면 한 줄로 자르고 … (줄이 늘어나면 높이 계산이 틀어지므로) */
.course-stop {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;                          /* 아래 ::before 세로선의 기준 */
  height: 32px;
  padding-bottom: 8px;
  font-size: 14px;
}

.course-name {
  white-space: nowrap;                         /* 줄바꿈 안 함 */
  overflow: hidden;
  text-overflow: ellipsis;                     /* 넘치는 글자는 … */
}

.course-stop::before {
  content: "";
  position: absolute;
  left: 11px;                                  /* 동그라미(24px) 가운데 */
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.course-stop:last-child::before {
  display: none;                               /* 마지막 정류장 아래는 선 없음 */
}

.course-seq {
  flex-shrink: 0;                              /* 이름이 길어도 동그라미가 찌그러지지 않게 */
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  background: var(--tour-color);
  color: var(--white);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

/* 출발 시간: 하루 = 한 줄 (왼쪽 날짜, 오른쪽 시간 버튼들) */
.day {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
}

.day-label {
  width: 78px;                                 /* 날짜 칸 폭을 고정 → 시간 버튼이 세로로 줄 맞춤 */
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
}


.day-times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 시간 버튼: 위에 시각, 아래에 남은 자리 */
.time-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 76px;
  padding: 4px 10px;
  border: 2px solid var(--tour-color);
  border-radius: 8px;
  background: var(--white);
  color: var(--tour-color);
  font-family: inherit;
  cursor: pointer;
}

.time-btn:hover {
  background: var(--tour-color);               /* 마우스를 올리면 색이 채워짐 */
  color: var(--white);
}

.time-btn .time {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.time-btn .seat {
  font-size: 12px;
  line-height: 1.3;
}

/* 매진 · 운영 중지 = disabled → 회색, 마우스 반응 없음 */
.time-btn:disabled,
.time-btn:disabled:hover {
  border-color: var(--line);
  background: var(--bg-soft);
  color: var(--disabled);
  cursor: not-allowed;
}

/* 날짜 더 보기 (<details>) */
.more-days summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--tour-color);
}


/* ---------- 7. 예약 모달 (<dialog>) ---------- */
.modal {
  width: min(420px, 92vw);                     /* 420px, 단 화면이 좁으면 화면 폭의 92% */
  padding: 0;
  border: none;
  border-radius: var(--radius);
  color: var(--navy);
}

/* 모달이 열렸을 때 뒤 배경 (::backdrop = dialog 전용) */
.modal::backdrop {
  background: rgba(0, 0, 0, 0.45);             /* 검정 45% 투명도 */
}

.modal-box {
  margin: 0;
}

/* 모달 윗부분: 그 투어 색 (모달도 theme-○ class 를 받음 → --tour-color) */
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--tour-color, var(--navy));  /* 색이 없으면 남색 */
  color: var(--white);
}

.modal-title {
  margin: 0;
  font-size: 18px;
}

.modal-x {
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.modal-body {
  padding: 18px;
}

.modal-tour {
  font-size: 18px;
  font-weight: 700;
}

.modal-muted {
  color: var(--gray);
  font-size: 14px;
}

.modal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}

.modal-row label {
  font-weight: 700;
}

.modal-row select {
  padding: 6px 10px;
  font-size: 16px;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.modal-total {
  font-size: 18px;
}

.modal-total strong {
  color: var(--tour-color, var(--navy));
}

.modal-note {
  font-size: 13px;
  color: var(--gray);
  margin: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;                   /* 버튼을 오른쪽으로 */
  gap: 8px;
  padding: 0 18px 18px 18px;
}


.modal-login-note {
  margin: 10px 0 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--theme-3);
}

/* hidden 속성이 있으면 무조건 숨김 (.btn 의 display 가 hidden 을 덮어쓰지 않게) */
[hidden] {
  display: none !important;
}


/* ---------- 7-1. 로그인 · 회원가입 폼 (4단계) ---------- */
/* 가운데 좁은 상자 */
.form-box {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form-title {
  font-size: 26px;
  text-align: center;
  margin-bottom: 20px;
}

.form-row {
  margin-bottom: 16px;
}

.form-row label {
  display: block;                              /* 라벨을 한 줄 차지 → 입력칸이 아래로 */
  font-weight: 700;
  margin-bottom: 6px;
}

.form-hint {
  font-weight: 400;
  font-size: 13px;
  color: var(--gray);
  margin-left: 6px;
}

/* 입력칸 (text, password) */
.form-row input {
  width: 100%;
  padding: 11px 12px;
  font-size: 16px;                             /* 16px 미만이면 아이폰에서 누를 때 화면이 확대됨 */
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* 입력칸을 누르면(포커스) 테두리 색 */
.form-row input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(30, 140, 147, 0.18);
}

/* 서버 검사에 실패한 칸 (th:errorclass="input-error") */
.form-row .input-error {
  border-color: #C0392B;
}

.field-error {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #C0392B;                              /* 빨강 */
}

/* 버튼을 상자 폭에 꽉 차게 */
.btn-block {
  display: block;
  width: 100%;
  margin-top: 8px;
}

.form-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--gray);
}

/* 안내 문장 상자 (가입 완료 / 로그인 실패) */
.alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}

.alert-ok {
  background: #E1F3F4;
  color: var(--teal-dark);
}

.alert-error {
  background: #FBE9E7;
  color: #A93226;
}


/* ---------- 7-2. 모달: 오류 · 결과 화면 (6단계) ---------- */
/* 서버가 돌려준 오류 문장 (매진, 이미 예약 있음 …) */
.modal-error {
  margin: 12px 0 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FBE9E7;
  color: #A93226;
  font-size: 14px;
  font-weight: 700;
}

.modal-error a {
  color: #A93226;
  text-decoration: underline;
}

.modal-done-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--tour-color, var(--navy));
}


/* ---------- 7-3. 표 · 상태 표시 · 작은 버튼 (내 예약) ---------- */
/* 표가 화면보다 넓으면 이 상자 안에서만 옆으로 스크롤 */
.table-box {
  overflow-x: auto;
}

.my-table {
  width: 100%;
  min-width: 720px;                            /* 이보다 좁아지면 옆으로 스크롤 */
  border-collapse: collapse;                   /* 칸 테두리를 한 줄로 합침 */
}

.my-table th,
.my-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.my-table th {
  font-size: 14px;
  color: var(--gray);
  border-bottom: 2px solid var(--navy);
}

/* 예약번호: 투어 이름 아래 작은 글씨 */
.my-no {
  display: block;
  font-size: 12px;
  color: var(--gray);
}

.cell-right {
  text-align: right !important;
}

.my-actions {
  display: inline-flex;
  gap: 6px;
}

.my-note {
  margin-top: 14px;
}

/* 상태 표시 (알약 모양) */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;                        /* 아주 크게 = 양 끝이 반원 */
  font-size: 13px;
  font-weight: 700;
}

.badge-ok {                                    /* 예약 확정 */
  background: #E1F3F4;
  color: var(--teal-dark);
}

.badge-wait {                                  /* 결제 대기 */
  background: #FFF1DC;
  color: #9A5B00;
}

.badge-no {                                    /* 만료 · 취소 · 시간 지남 */
  background: #ECEFF2;
  color: var(--gray);
}

/* 남은 결제 시간 08:54 (숫자 폭이 같은 글꼴 → 숫자가 바뀌어도 글자가 흔들리지 않음) */
.countdown {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #9A5B00;
}

/* 작은 버튼 (표 안) */
.btn-small {
  padding: 6px 12px;
  font-size: 14px;
}


/* ---------- 7-4. 결제 화면 (7단계) ---------- */
/* 가운데 상자 (로그인 상자보다 조금 넓게) */
.pay-box {
  max-width: 520px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* 주문 내용: 왼쪽 이름(dt) · 오른쪽 값(dd) 두 칸 */
.pay-summary {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px 12px;
  margin: 0 0 18px 0;
}

.pay-summary dt {
  color: var(--gray);
  font-size: 14px;
}

.pay-summary dd {
  margin: 0;                                   /* dd 의 기본 왼쪽 여백 없애기 */
  font-weight: 700;
}

.pay-amount {
  font-size: 20px;
  color: var(--navy);
}

.pay-remain {
  margin: 0 0 12px 0;
}

/* 가짜 결제창: 점선 테두리로 "진짜가 아님"을 눈에 띄게 */
.fake-pg {
  padding: 16px;
  border: 2px dashed #9A5B00;
  border-radius: 10px;
  margin-bottom: 12px;
}

.fake-pg-title {
  margin: 0 0 12px 0;
  font-weight: 700;
}

.fake-pg-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #FFF1DC;
  color: #9A5B00;
  font-size: 12px;
}

.fake-pg-actions {
  display: flex;
  flex-wrap: wrap;                             /* 좁으면 다음 줄로 */
  gap: 8px;
}

.fake-pg .alert {
  margin: 12px 0 0 0;
}

/* 토스 결제 버튼 상자 (pgType = toss) */
.toss-pay {
  margin-bottom: 12px;
}

.toss-pay .alert {
  margin: 12px 0 0 0;
}


/* ---------- 7-5. 부산 날씨 7일 (8단계 A안) ---------- */
.wx-section {
  padding-top: 18px;
}

/* 제목 행: 한 줄 전체, 아래 굵은 선 (테두리 상자 없음) */
.wx-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--navy);
}

.wx-title b {
  font-size: 18px;
  color: var(--navy);
}

.wx-title span {
  font-size: 12px;
  color: var(--gray);
}

/* 7칸 가로. 좁은 화면에서는 이 줄 안에서만 옆으로 밀어서 보기 */
.wx-band {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  overflow-x: auto;
  padding-top: 8px;
}

.wx-day {
  text-align: center;
  padding: 4px 2px;
}

.wx-date {
  font-size: 13px;
  font-weight: 700;
}

.wx-icon {
  width: 44px;
  height: 44px;
  margin: 4px 0;
}

.wx-sky {
  font-size: 13px;
}

.wx-temp {
  font-size: 15px;
  font-weight: 700;
}

.wx-pop {
  font-size: 12px;
  color: #2A6FB0;
}

.wx-mid {
  font-size: 10px;
  color: #9AA6B2;
}


/* ---------- 8. 푸터 (bottom) · 오류 화면 ---------- */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  margin-top: 32px;
}

.footer-inner {
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 14px;
  color: var(--gray);
}

.footer-name {
  font-family: "Black Han Sans", "Malgun Gothic", sans-serif;
  font-size: 20px;
  color: var(--navy);
}

.footer-copy {
  margin-top: 8px;
}

.error-box {
  text-align: center;
}

.error-code {
  font-family: "Black Han Sans", "Malgun Gothic", sans-serif;
  font-size: 72px;
  color: var(--teal);
  margin-bottom: 0;
}


/* ---------- 9. 휴대폰 (화면 폭 768px 이하일 때만 적용) ---------- */
@media (max-width: 768px) {
  /* 헤더: 로고 위, 메뉴 아래로 쌓기 */
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 8px;
  }

  .menu {
    flex-wrap: wrap;
    gap: 16px;
  }

  .hero-title {
    font-size: 26px;
  }

  .page-title {
    font-size: 24px;
  }

  /* 휴대폰은 1칸이라 줄 맞출 필요 없음 → 짧은 코스 아래 빈칸 없애기 */
  .course {
    min-height: 0;
  }

  .tour-desc {
    min-height: 0;
  }
}