@charset "utf-8";

/* ============================================================
   TRAVART · 여행상품(tour) 섹션 전용 CSS
   - 로드 순서: _core → sub-common.css → tour.css
   - 리스트(list.php) / 상세(detail.php) 공용
   - food.css / beauty.css 구조·네이밍 그대로 계승, 접두사만 tour로 변경
   - beauty 대비 신규 블록: 예약정보/바우처/기타 dl 3종, FAQ 아코디언,
     영상(GLightbox) 블록 — 파트너사가 관리자페이지에서 직접 입력하는
     "여행상품 관리" 폼 기준(등록양식 이메일제출 아님, beauty와 다른 데이터 출처)
   ============================================================ */

/* ============================================================
   1. LIST — 필터 칩
   ※ 관리자페이지 실제 카테고리 옵션(Luggage Service / Car Rental with
     Driver / Mobility)은 "투어 유형" 개념이 아니라 서비스 대분류라
     고객 필터로 그대로 쓰기 애매함. food/beauty와 동일 원칙으로
     디자인 자리만 잡아둠(실제 필터링 없음, 값 확정 전까지 임시 라벨).
   ============================================================ */
.tour-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.tour-filter__btn {
    height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid var(--t-line);
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    display: inline-flex;
    align-items: center;
}
.tour-filter__btn.is-active {
    background: var(--t-text);
    border-color: var(--t-text);
    color: #fff;
}

/* ============================================================
   2. LIST — 카드 그리드 (메인 .place-card 재사용, 4열)
   ============================================================ */
.tour-list-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
}
.tour-list-grid .place-card__tag {
    display: inline-flex;
    max-width: 100%;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-3);
    background: rgba(40, 89, 153, 0.08);
    padding: 3px 9px;
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}
.place-card__meta.tour-d1 { margin-bottom: 0; }

/* 여행상품 카드 이미지 비율 — 메인 4:5(295x374)와 통일 (place-card 기본 7:5 오버라이드) */
.tour-list-grid .place-card__img { aspect-ratio: 4 / 5; }

/* ============================================================
   3. DETAIL — 갤러리 (사진 전용, 최대 5장 · 가변 개수)
   ============================================================ */
.tour-detail__top { padding-top: 44px; }
.tour-gallery__main {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8;
    border-radius: var(--radius);
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}
.tour-gallery__thumbs {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(var(--tour-thumb-count, 5), 1fr);
    gap: 10px;
}
.tour-gallery__thumb {
    aspect-ratio: 7 / 5;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity .2s ease;
	background-size:cover;
	background-position:center center;
}
.tour-gallery__thumb.is-active,
.tour-gallery__thumb:hover { opacity: 1; }

/* ============================================================
   3-1. DETAIL — 영상 블록 (신규, 갤러리와 분리 · GLightbox 재생)
   ============================================================ */
.tour-video { margin-top: 28px; }
.tour-video__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--t-text);
    margin-bottom: 14px;
}
.tour-video__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.tour-video__item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: block;
    background-color: #1a1a1a;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.tour-video__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 30px;
    transition: background-color .2s ease;
}
.tour-video__item:hover .tour-video__play { background: rgba(0,0,0,0.4); }

/* ============================================================
   4. DETAIL — 정보 블록 (제목/설명/TIP)
   ============================================================ */
.tour-info {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
}
.tour-info__head { padding-bottom: 22px; border-bottom: 1px solid var(--t-line); }
.tour-info__dest {
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-3);
    background: rgba(40, 89, 153, 0.08);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.tour-info__title { font-size: 28px; font-weight: 800; color: var(--t-text); }

/* 상품설명(강조할 부분) — ⚠️ 관리자페이지 미구현 필드, 자리만 확보 */
.tour-info__desc {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

/* TIP 리스트 */
.tour-tip {
    margin-top: 20px;
    background: #f7f7f8;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
}
.tour-tip__title { font-size: 13px; font-weight: 700; color: var(--t-text); margin-bottom: 8px; }
.tour-tip__list { display: flex; flex-direction: column; gap: 6px; }
.tour-tip__list li { font-size: 13px; color: #555; line-height: 1.6; }

/* ============================================================
   4-1. DETAIL — 정보 dl 공통 (예약조건/취소환불/바우처이용안내/미팅안내/기타에서 재사용)
   ============================================================ */
.tour-block { margin-top: 32px; }
.tour-block__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--t-text);
    margin-bottom: 0px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--t-text);
}
.tour-block__table { }
.tour-block__row {
    display: flex;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--t-line);
    font-size: 14px;
    align-items: flex-start;
}
.tour-block__row dt {
    flex: 0 0 200px;
    color: var(--t-sub);
    font-weight: 600;
    line-height: 1.6;
}
.tour-block__row dd { color: #333; line-height: 1.7; white-space: pre-line; }
.tour-block__row dd a { color: var(--brand-3); text-decoration: underline; }
.tour-block__row dd .tour-none { color: var(--t-meta); }

/* ============================================================
   4-2. DETAIL — FAQ 아코디언 (신규, food/beauty엔 없던 패턴)
   ============================================================ */
.tour-faq { margin-top: 32px; }
.tour-faq__item {
    border-bottom: 1px solid var(--t-line);
}
.tour-faq__item:first-child { border-top: 1px solid var(--t-line); }
.tour-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 4px;
    background: none;
    border: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--t-text);
    cursor: pointer;
}
.tour-faq__q-mark { color: var(--brand-3); margin-right: 8px; }
.tour-faq__icon { font-size: 12px; color: var(--t-sub); transition: transform .2s ease; flex-shrink: 0; }
.tour-faq__item.is-open .tour-faq__icon { transform: rotate(180deg); }
.tour-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}
.tour-faq__item.is-open .tour-faq__a { grid-template-rows: 1fr; }
.tour-faq__a-inner { overflow: hidden; }
.tour-faq__a p {
    padding: 0 4px 18px 26px;
    font-size: 13px;
    line-height: 1.7;
    color: #555;
}

/* ---- 사이드 (예약 CTA — 가격/전화 필드 없음, food·beauty와 다름) ---- */
.tour-side {
    align-self: start;
    background: #f7f7f8;
    border-radius: var(--radius);
    padding: 24px;
}
/* 사이드 요약 (칩 삭제 후 대체 — 예약 조건 3개만 소형으로) */
.tour-side__summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--t-line);
}
.tour-side__summary > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}
.tour-side__summary dt { color: var(--t-sub); font-weight: 600; flex-shrink: 0; }
.tour-side__summary dd { color: var(--t-text); font-weight: 700; text-align: right; }
.tour-side__hint { font-size: 13px; color: var(--t-sub); margin-bottom: 18px; }

/* 예약 버튼 — 현재 booking.php 미연동 상태라 <a>가 아니라 <span>(비링크). 위 파일 상단 메모 5 참고 */
.tour-side__book {
    width: 100%;
    height: 52px;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: default;
}
.tour-side__back {
    margin-top: 12px;
    width: 100%;
    height: 44px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--t-line);
    color: var(--t-sub);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tour-gallery__thumb.is-placeholder {
    cursor: default;
    pointer-events: none; /* hover 시 opacity 변화도 같이 막힘 */
}
.w-normal{white-space:normal !important;}

.tour-side__price {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--t-line);
    margin: 0px 0 16px;
}
.tour-side__price-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-3);

}
/* ============================================================
   5. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .tour-list-grid { grid-template-columns: repeat(3, 1fr); }
    .tour-info { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .tour-list-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
    .tour-gallery__thumbs { grid-template-columns: repeat(3, 1fr) !important; }
    .tour-video__list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .tour-info__title { font-size: 22px; }
    .tour-block__row { flex-direction: column; gap: 4px; }
    .tour-block__row dt { flex: none; }
}
@media (max-width: 480px) {
    .tour-list-grid { grid-template-columns: repeat(2, 1fr); }
}