/**
 * ═══════════════════════════════════════════════════
 *  shop-responsive.css
 *  클래스 기반 컴포넌트 + 페이지별 + 반응형 CSS
 *  (element/ID 전역 셀렉터는 shop.css)
 *  breakpoints: 1000px / 900px / 768px / 600px / 480px
 * ═══════════════════════════════════════════════════
 */


/* ══════════════════════════════════════════════════
   공통 유틸리티 클래스
   ══════════════════════════════════════════════════ */
.hide { display: none;}

.f-20 { font-size: 20px;}
.f-16 { font-size: 16px;}
.f-14 { font-size: 14px;}
.f-12 { font-size: 14px;}

.table {}
.table th{ padding: 5px;}
.table td { padding: 5px 5px;}

/** header components **/
h1{ margin: 0 3px;}
/* 헤더 로고(구 h1 → .logo). h1 과 동일하게 인라인 배치 유지 */
#nav .top-left .logo { display: inline; margin: 0 3px; }
.top-left { display: flex; align-items: center; flex: 1; }
.top-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
#nav .top-nav .menu-estimate { margin-left: auto !important; margin-right: 20px; background: var(--gm-estimate); color: #fff !important; padding: 6px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; }

/* 신규 메뉴(동행투어) 인지용 NEW 배지 — 로고색 작은 포인트 + 은은한 펄스.
   과하지 않게 색은 브랜드 레드, 움직임은 느린 2.4s 로 한 번씩 숨쉬듯. */
.menu-deal { position: relative; }
.menu-new {
    display: inline-block;
    margin-left: 3px;
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--gm-red, #e24d24);
    border-radius: 8px;
    vertical-align: super;
    transform-origin: center;
    animation: menuNewPulse 2.4s ease-in-out infinite;
}
@keyframes menuNewPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gm-red,#e24d24) 45%, transparent); }
    50%      { transform: scale(1.12); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gm-red,#e24d24) 0%, transparent); }
}
/* 접근성: 모션 최소화 설정한 사용자에겐 애니메이션 끔 */
@media (prefers-reduced-motion: reduce) {
    .menu-new { animation: none; }
}
.mobile-nav { display: none; }
.btn-branch { margin-left: 20px; padding-right: 17px; background:url('../images/main/arrow-down.png') 100% 50% no-repeat; background-size: 11px auto; border:0;font-size: 16px; color: #000;}
.btn-branch.on { background-image:url('../images/main/arrow-up.png'); }

.btn-search { width: 35px; border: 1px solid #DADDE0; border-right: 0; background: url("../images/main/search.png") 80% 50% no-repeat;border-radius: 5px 0 0  5px;}

.ico-cart { display: inline-block; margin-left: 5px; width: 21px; height: 29px; background: url("../images/main/cart.png") 50% 50% no-repeat; }
.cart-num { display: inline-block; margin-left: -5px; width: 20px; height: 20px; border-radius: 50%; background: #000; color: #fff;
    text-align: center; font-size: 12px; vertical-align: top; padding-top: 1px; }
.input-search {  border: 1px solid #DADDE0;border-left: 0; outline: none; border-radius: 0 5px 5px 0;}
.input-search:focus { outline: none;border: 1px solid #DADDE0;border-left: 0;box-shadow: none; transition: none;}
.input-search:focus .bth-search { border: 3px solid #000;}
.hd-user-avatar svg { display: block; }

/* ── 유저 드롭다운 버튼 ── */
.hd-user-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; background: #fff;
    border: 1.5px solid #e0e0e0; border-radius: 20px; font-size: 14px; font-weight: 700; color: #222;
    transition: box-shadow .15s, border-color .15s;
}
.hd-user-btn:hover, .hd-user-btn:focus, .hd-user-btn.show {
    border-color: var(--gm-primary); box-shadow: 0 2px 8px rgba(53,197,240,.18); background: #fff; color: #222;
}
.hd-user-avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gm-primary), var(--gm-brand)); color: #fff; font-size: 13px; font-weight: 900;
    flex-shrink: 0;
}
.hd-user-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 드롭다운 패널 ── */
.hd-dropdown {
    min-width: 180px; border-radius: 12px; overflow: hidden; border: 1px solid #d5d5d5;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12); padding: 0; margin-top: 6px !important;
    right: 0 !important; left: auto !important;
}
.hd-dropdown-header { padding: 14px 18px 10px; background: linear-gradient(135deg, #f0faff, #e8f7fe); }
.hd-dh-name { font-size: 13px; font-weight: 800; color: #1a8ab5; display: block; }
.hd-dropdown-item {
    display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 14px; color: #333;
    transition: background .12s;
}
.hd-dropdown-item:hover { background: #f5faff; color: var(--gm-primary); }
.hd-di-icon { font-size: 15px; width: 20px; text-align: center; }
.hd-logout:hover { background: #fff5f5 !important; color: var(--gm-point) !important; }

/* ── 로그인 버튼 ── */
.hd-login-btn {
    padding: 6px 18px !important; background: var(--gm-primary); color: #fff !important; border-radius: 20px; font-weight: 700;
    font-size: 14px; transition: background .15s;
}
.hd-login-btn:hover { background: #29b5de; }

/** banner - Swiper centeredSlides 구조 (Nature Republic 스타일) **/

/* 바깥 래퍼: 전체 브라우저 폭(full-bleed). 가운데 슬라이드는 1200 로 고정,
   남는 좌우 공간은 양옆 peek 으로 채움 (넓은 화면에서도 잘리지 않고 브라우저 끝까지 흐름) */
.main-banner-wrap {
    width: 100%;
    padding: 10px 0 30px;
    overflow: hidden;
    position: relative;
}

/* Swiper: 100% = 100vw, slidesPerView:1.3 → Swiper가 초기부터 양쪽 슬라이드 배치 보장 */
.main-banner {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* 각 슬라이드: width는 Swiper가 slidesPerView:1.3 으로 제어.
   높이는 원본 배너 비율(1200x430)로 고정해 폭이 줄어도 좌우가 잘리지 않게 함 */
.main-banner .swiper-slide {
    width: min(var(--gm-main-inner), 100vw);   /* 가운데 배너를 메인 섹션 콘텐츠 정렬선(--gm-main-inner)에 맞춤. 그 이상 화면에서만 양옆 peek */
    height: auto;
    aspect-ratio: 1200 / 430;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .4s, opacity .4s;
    opacity: 0.5;
    transform: scale(0.95);
}
/* 활성 슬라이드 */
.main-banner .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}
.main-banner .swiper-slide a { display: block; width: 100%; height: 100%; }
.main-banner .swiper-slide img { display: block; width:100%; height: 100%; object-fit: cover; }

/* 배너 네비게이션 바 — 이미지 위 하단 중앙 */
.main-bn-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    /* 기준을 화면이 아니라 '가운데 배너'에 맞춘다.
       .main-banner 는 full-bleed(100vw)라 left:18% 같은 화면 비율값을 쓰면
       배너 폭(최대 1200)과 무관해져, 넓은 화면에서 배너 바깥으로 밀려난다.
       50%(화면 중앙) - 배너 절반폭 = 배너 왼쪽 끝. 거기서 24px 안쪽에 붙인다. */
    left: calc(50% - min(calc(var(--gm-main-inner) / 2), 50vw) + 24px);
    transform: none;
    z-index: 10;
    gap: 0;
    user-select: none;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
}
.main-bn-nav > span,
.main-bn-nav > button {
    /* pill 묶음처럼 보이도록 */
}
/* prev + counter + next 묶음 */
.main-bn-nav .main-bn-prev,
.main-bn-nav .main-bn-counter,
.main-bn-nav .main-bn-next {
    background: rgba(255,255,255,0.75);
}
.main-bn-nav .main-bn-prev  { border-radius: 30px 0 0 30px; }
.main-bn-nav .main-bn-next  { border-radius: 0 30px 30px 0; }
.main-bn-nav .main-bn-counter { border-radius: 0; }
.main-bn-prev, .main-bn-next {
    width: 36px;
    height: 36px;
    border: none;
    color: #555;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
@media (hover:hover) {
    .main-bn-prev:hover, .main-bn-next:hover { background: #f0f0f0 !important; }
}
.main-bn-prev:active, .main-bn-next:active { background: rgba(255,255,255,0.95) !important; }
.main-bn-counter {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    letter-spacing: 1px;
    padding: 0 14px;
    height: 36px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.tab-location { margin: 0 0 10px; padding: 0; display: flex; width: 100%; text-align: left; border-bottom:1px solid #ddd; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.tab-location::-webkit-scrollbar { display: none; }
.tab-location li { padding: 12px 20px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.tab-location li.on { border-bottom: 3px solid var(--gm-primary); color: var(--gm-primary-dark); font-weight: 700; }

.branch-list { width: 100%; overflow: hidden; padding: 10px 0; position: relative; }
.branch-list .swiper-wrapper { display: flex; padding: 0; margin: 0;  }
.branch-list .swiper-slide { flex-shrink: 0; width: 200px; height: 240px; position: relative; overflow: hidden; }
.branch-list .swiper-slide:last-child { margin-right: 0 !important; }
.branch-list .thumb img { width: 100%; display: block;  transition: transform 0.3s ease, filter 0.3s ease;}
.branch-list .thumb img:hover{ transform: scale(1.05); filter: brightness(1.1);  }
.branch-list .cont { position: absolute; bottom: 5px; left: 10px; color: white; text-shadow: 1px 1px 5px rgba(0,0,0,0.7); }
.branch-list .country { display: block; font-size: 12px; font-weight: 200; height: 13px;}
.branch-list .title { display: block; font-size: 16px;}

.notice-area { display: flex; justify-content:space-between; margin-top: 50px;}
.notice-area .box { width: 580px; padding: 15px; border: 1px solid #ddd;}
.notice-area ul { padding: 0; margin: 0; font-size: 14px;}
.notice-area .box h3 { font-size: 20px;}
.box .box-head {display:flex;justify-content:space-between;align-items:center;}
.box .more-btn {font-size:14px;font-weight:500;text-decoration:none;transition:color .2s ease,transform .2s ease;}
.box .more-btn:hover {color:#0f172a;transform:translateX(2px);}
.box .more-btn::after {content:" +";font-size:14px;}

/** 지점 메인 (branch main) **/
.branch-main { width: 100%; }
.branch-top { display: flex; width: 100%; max-width: 1200px; margin: 0 auto; }
.branch-top .title { flex: 1; max-width: 700px; padding: 40px 0 30px 5px; color: #fff; }
.branch-top .thumb { padding: 20px; display: block; flex-shrink: 0; }
.branch-top .thumb img { display: block; width: 100%; max-width: 500px; height: 280px; object-fit: cover; }
/* 관심지점 별표 (h2 제목 옆) */
.btn-branch-fav {
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; margin-left: 9px; width: 1.6em; height: 1.6em; padding: 0; line-height: 1;
    background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.5); border-radius: 50%;
    color: rgba(255,255,255,.9); font-size: .66em; cursor: pointer;
    transition: transform .15s, color .2s, background .2s, border-color .2s; backdrop-filter: blur(4px);
}
.btn-branch-fav:hover { transform: scale(1.12); background: rgba(255,255,255,.22); border-color: #fff; color: #fff; }
.btn-branch-fav.active { color: #ffd54a; border-color: #f5c832; background: rgba(255,197,50,.18); }
.btn-branch-fav:active { transform: scale(.9); }

/* 관심지점 토스트 레이어 */
.fav-toast {
    position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 12px);
    background: rgba(0,0,0,.82); color: #fff; padding: 12px 22px; border-radius: 24px;
    font-size: 14px; font-weight: 600; white-space: nowrap; z-index: 9999;
    opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.fav-toast.show { opacity: 1; transform: translate(-50%, 0); }

.products { margin: 0 auto; padding: 0 0 100px; display: flex; flex-wrap: wrap; gap: 25px; max-width: 1200px; }
.product_item { display: table; margin-bottom: 0; width: calc(50% - 13px); }
.product_item .thumb { position: relative; display: table-cell; width: 260px; height: 200px; background: #f2f2f2; }
.product_item .thumb .card-badges { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; gap: 4px; }
.product_item .thumb .best-badge { display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: linear-gradient(135deg, #ff7a18, #ff3d3d); border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
/* 오픈특가(요금기간 할인) 배지 — BEST와 같은 위치/크기, 색만 구분. 둘 다 있으면 BEST를 아래로 */
.product_item .thumb .deal-badge { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: linear-gradient(135deg, #2f80ed, #1fb6c9); border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.product_item.deal-on .thumb .card-badges { top: 36px; }
.product_item .thumb .new-badge { display: inline-flex; align-items: center; padding: 4px 9px; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: linear-gradient(135deg,#4aa3ff,#1e6fe0); border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
/* 특별 혜택 — 썸네일 우측 하단. BEST(좌상단)와 자리가 겹치지 않게 반대편에 세로로 쌓는다.
   색은 브랜드 청록(--gm-brand #0b7d9e)을 80% 불투명으로.
   BEST(주황~빨강, 단색)와 계열·질감이 갈려 둘이 섞이지 않는다.
   사진이 비쳐 보이는 만큼 흰 글씨가 흐려질 수 있어 불투명도를 80% 밑으로 내리지 않는다. */
.product_item .thumb .benefit-badges { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none; }
.product_item .thumb .benefit-badge { display: inline-block; padding: 4px 8px 2px; font-size: 11px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: #fff; background: rgba(11,125,158,.8); border-radius: 4px; }
@media (max-width: 767px) {
    .product_item .thumb .benefit-badges { right: 6px; bottom: 6px; gap: 2px; }
    .product_item .thumb .benefit-badge { padding: 3px 6px 1px; font-size: 10px; }
}
.product_item .thumb img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.3s ease, filter 0.3s ease; border-radius: 5px; }
.product_item .thumb img:hover { transform: scale(1.03); filter: brightness(1.1); }
.product_item .contents { position: relative; display: table-cell; padding-left: 15px; vertical-align: top; }
.product_item .contents .name { font-size: 18px; font-weight: bold; }
.product_item .contents .intro { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product_item .contents .price { position: absolute; bottom: 5px; right: 10px; }
.product_item .contents .price .tit { font-weight: bold; font-size: 18px; color: var(--gm-primary-dark); }
.product_item .contents .price .number { font-weight: bold; font-size: 18px; }
.product_item .contents .price .price-before { display:inline-block; color:#9aa0a6; font-size:13px; font-weight:400; text-decoration:line-through; margin-right:6px; }
/* 모바일: 1인당 시작가 한 줄 표기, 폰트만 축소 (환율 없는 지점은 계약금·잔금 두 줄로 폴백) */
@media (max-width: 1000px) {
    .product_item .contents .price .tit { font-size: 13px; }
    .product_item .contents .price .number { font-size: 13px; }
}
.product-tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.product-tag { padding: 2px 10px; font-size: 12px; font-weight: 500; color: #5a6672; background: #f2f4f7; border: 1px solid #e3e7ec; border-radius: 12px; white-space: nowrap; }
.products .sub_news { padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
.products .sub_news .title { font-size: 18px; }
.products .sub_news .more-btn { margin-top: -3px; }
.products .sub_news .list_thumb { display: flex; }
.products .sub_news .list_thumb li { padding: 0 2px; }
.products .sub_news .list_thumb li a { display: block; }
.products .sub_news .list_thumb .thumb { position: relative; height: 148px; }
.products .sub_news .list_thumb .tit { position: absolute; width: 99%; bottom: 0; left: 1px; background: rgba(0,0,0,0.5); color: #fff; white-space: nowrap; overflow: hidden; font-size: 12px; border-radius: 5px; }

/* 배너 + 날씨/환율 통합 영역 */
.info-row { display: flex; align-items: stretch; max-width: 1200px; margin: 0 auto; gap: 18px; padding: 12px 0; }
.info-banner { flex: 0 0 calc(50% - 10px); border-radius: 10px; overflow: hidden;  display: flex; align-items: center; justify-content: center; max-height: 112px; }
.info-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-banner .banner-empty { color: #ccc; font-size: 13px; text-align: center; }
.info-cards { display: flex; flex-direction: row;  flex: 0 0 calc(50% - 8px); }
.info-card { display: flex; align-items: center; gap: 12px; background:rgba(0,0,0,0.4); border-radius: 8px; padding: 12px 16px; flex: 1; min-width: 0; }
.info-card .label { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 0.2px; text-transform: none; margin-bottom: 2px; }
.info-card:last-child { margin-left: 10px; }
@media (max-width: 1000px) {
    .info-card:last-child { margin-left: 0; margin-top: 0; }
    .info-row { flex-direction: column; }
    .info-banner { flex: none; width: 100%; height: auto !important;;  min-height: 50px !important;; }
    .info-banner a { display: block; width: 100%; height:auto !important; }
    .info-banner img { width: 100%; height: auto; object-fit: cover; display: block; }
    .info-cards { flex: none; width: 100%; flex-direction: row; }
    /* 모바일: 배너 네비 노출 + PC처럼 좌측하단 배치 */
    .main-bn-nav { left: 16px; transform: none; bottom: 12px; }
}
/* 날씨 카드 (PC 기본: 반투명 카드 위로 배경이미지 살짝 비침 + 흰 글씨) */
.weather-icon { font-size: 40px; line-height: 1; flex-shrink: 0; }
.weather-info { flex-shrink: 0; }
.weather-info .temp-current { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.1; }
.weather-info .temp-current span { font-size: 13px; font-weight: 400; color: #fff; }
.weather-info .temp-range { font-size: 12px; color: #eaeef2; margin-top: 2px; }
.weather-info .weather-desc { font-size: 12px; color: #dfe4ea; }
.weather-sub { display: none; }
/* 환율 카드 */
.exchange-icon { font-size: 22px; flex-shrink: 0; width: 50px; text-align: center; }
.exchange-info { flex-shrink: 0; }
.exchange-info .ex-rate { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.1; }
.exchange-info .ex-rate span { font-size: 12px; font-weight: 400; color: #fff; }
.exchange-info .ex-date { font-size: 12px; color: #dfe4ea; margin-top: 2px; }
.exchange-sub { display: none; }

/* 상품 하단으로 이동되는 날씨/환율(.info-cards-below): 흰 배경 위 → 솔리드 흰 카드 + 진한 글씨.
   컨테이너로 스코프해서 폭에 상관없이 항상 흰 카드로 렌더(히어로 오버레이와 분리) */
.info-cards-below { display: none; }
.info-cards-below .info-cards { display: flex; flex: none; width: 100%; gap: 8px; }
.info-cards-below .info-card { flex: 1; margin-left: 0; background:#fff; border:1px solid #e6eaef; box-shadow:0 1px 6px rgba(0,0,0,.05); border-radius: 12px; }
.info-cards-below .info-card:last-child { margin-left: 0; }
.info-cards-below .info-card .label { color:#8a94a0; }
.info-cards-below .weather-icon { width:46px; height:46px; border-radius:14px; background:#eef5fb; display:flex; align-items:center; justify-content:center; font-size:28px; }
.info-cards-below .exchange-icon { width:46px; height:46px; border-radius:14px; background:#eafaf1; display:flex; align-items:center; justify-content:center; }
.info-cards-below .temp-current, .info-cards-below .ex-rate { color:#1f2a37; }
.info-cards-below .temp-current span, .info-cards-below .ex-rate span, .info-cards-below .ex-date { color:#8a94a0; }
.info-cards-below .temp-range { color:#6b7280; }
.info-cards-below .weather-desc { color:#9aa3ad; }
/* 상품하단 이벤트 배너: 풀폭 + 카드 위에 배치 */
.info-cards-below .info-banner { flex: none; width: 100%; height: 140px; max-height: none; border-radius: 10px; overflow: hidden; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; }
.info-cards-below .info-banner a, .info-cards-below .info-banner img { width: 100%; height: 100%; display: block; }
.info-cards-below .info-banner img { object-fit: cover; }

/* ≤1000: 히어로 배경 확장이 끝나는 지점 → 히어로 info-row(배너+날씨+환율) 통째로 숨기고 상품 아래로 이동 */
@media (max-width: 1000px) {
    .info-row { display: none; }
    .info-cards-below { display: block; padding: 4px 12px 24px; }
}

.estimation-list {  margin-top: 50px; width: 1200px; max-width: 100%; }
.estimation-list .cont { padding-left: 20px; width: 40%;}
.estimation-list .cont .link { display: inline-block; padding: 5px; border: 1px solid #ddd; font-size: 14px; }
.estimation-list .list { width: 60%;}

.contents_basic { margin: 20px auto; width: 1100px; max-width: 100%; min-height: 500px;}
/* 본문 이미지(폭 미지정)가 원본 크기로 렌더돼 모바일에서 넘치는 것 방지 (corp 페이지 등) */
.contents_basic img { max-width: 100%; height: auto; }

/* ── 아이폰 앱 전용 하단 네비 바 (html.is-ios-app 일 때만) ── */
#app-tabbar { display: none; }
html.is-ios-app #app-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 2147483000;
    background: #fff; border-top: 1px solid #ececec;
    box-shadow: 0 -2px 10px rgba(0,0,0,.05);
    padding-bottom: env(safe-area-inset-bottom);
}
html.is-ios-app #app-tabbar .atb-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 7px 0 5px;
    font-size: 11px; font-weight: 400; color: #555;
    background: none; border: 0; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
html.is-ios-app #app-tabbar .atb-item svg { width: 22px; height: 22px; display: block; }
html.is-ios-app #app-tabbar .atb-item:active { color: var(--gm-primary, #0ea5a5); }
/* 콘텐츠가 상단 상태바/하단 탭바에 가리지 않도록 안전영역 여백 확보.
   viewport-fit=cover 로 콘텐츠가 상태바 밑까지 확장되므로, 상단도 env(top) 만큼 내려줘야 로고/헤더가 안 가린다. */
html.is-ios-app body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
}
/* 스크롤해도 sticky 헤더가 상태바 아래에 머물게 + 상태바 영역을 흰색으로 채워 콘텐츠 비침 방지 */
html.is-ios-app #nav.sticky-top { top: env(safe-area-inset-top); }
html.is-ios-app::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top); background: #fff; z-index: 2147483001; pointer-events: none;
}
/* 고정 하단 CTA 바(구매/견적/이벤트)가 앱 하단 탭바와 겹치지 않도록 탭바 위로 올림 — 아이폰 앱만.
   (셀렉터에 html.is-ios-app 이 붙어 기본/이벤트 inline 스타일보다 우선순위가 높다) */
html.is-ios-app .floating-cta-bottom {
    bottom: calc(52px + env(safe-area-inset-bottom));
    padding-bottom: 8px;
}
html.is-ios-app .mobile-bottom-bar {
    bottom: calc(52px + env(safe-area-inset-bottom));
}
html.is-ios-app .ev-cta {
    bottom: calc(52px + env(safe-area-inset-bottom));
    padding-bottom: 14px;
}

/** footer  **/
.footer { margin: 0 auto; padding:30px 0; display: flex; width: 1200px; max-width: 100%; }
.footer .support { padding-left: 90px; padding-right: 45px; border-right: 1px solid #E4E4E4;}
.footer .support .tit { padding-bottom: 12px;}
.footer .support .info { padding:15px 0; line-height: 1.8em;}
.footer .support .link { display: block; text-align: center; padding:10px; margin-bottom: 10px;  border: 1px solid #ddd; font-size: 14px;}
.footer .nav { padding:0; width: 230px;  font-size: 14px;  border-right: 1px solid #E4E4E4;}
.footer .nav .list { padding: 15px 0 0 45px; }
.footer .nav .list li  {  padding-bottom: 15px;}
.footer .corp { padding: 10px 0 0 45px; font-size: 14px;}
.footer .corp .cont { line-height: 2em;}
.footer .corp .banner { padding: 20px 0; }
.footer .corp .banner img { display: inline-block; margin-right: 10px;}
.footer .corp .crt { margin-top: 5px; max-width: 480px; color: #959595; font-size: 11px;}
.footer .corp .copyright {margin-top: 10px;color: #959595; font-size: 11px;}

/*  게시판 */
.board_container { margin: 0 auto; padding-bottom: 50px; width: 1100px; max-width: 100%; min-width: 0; min-height: 800px;display: flex; align-content: space-around;}
.board_container h2 { text-align: left; font-size: 24px; padding: 30px 0 0;}
.board_container h3 { text-align: left; font-size: 20px; }
.board_container .list { width: 100%; }
.board_container .board_nav { width: 220px;}
.board_container .contents { width: 880px;}
.board_nav .list { padding: 10px 0; width: 180px;}
.board_nav .list li { border-bottom: 1px solid #d9d9d9;}
.board_nav .list li > a { display: block; padding: 10px 5px; font-size: 18px; }
.board_nav .list li > a:hover { background-color: var(--gm-brand); color: #fff;}
.board_nav .list li a.active { background-color: var(--gm-brand); color: #fff;}

.board_container .table_list { width: 100%;}
.board_container .table_list th { padding: 15px 0 10px; text-align: center; border-bottom: 1px solid #d9d9d9;}
.board_container .table_list td { padding: 8px 0; border-bottom: 1px solid #d9d9d9;}
.board_container .board_top { display: flex; justify-content:space-between;padding: 40px 0 10px;}
.branch_filter a{ margin-bottom: 5px;}

.pagination { display: flex; justify-content: center; margin: 40px auto 40px; gap: 40px; }
.pagination li.active span { background-color: var(--gm-primary); color: #fff; border-radius: 4px; padding: 4px 8px; font-weight: 700; }
.pagination li a, .pagination li span { font-size: 20px; }
.pagination li.page-num a, .pagination li.page-num span { font-size: 20px; }
.pagination li.disabled span { color: #ccc !important; cursor: default; }
.pagination li.prev a, .pagination li.next a,
.pagination li.first a, .pagination li.last a { font-size: 20px; }

.sub-contents { margin: 10px auto; width:100%; min-height: 300px; max-width: 1100px;}



/* ══════════════════════════════════════════════════
   Shared Component: cm-tabs (커뮤니티 탭 내비)
   사용: community.blade.php, review/list.blade.php, talk/list.blade.php
   ══════════════════════════════════════════════════ */
.cm-tabs {
    display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #d5d5d5;
    flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 24px 15px 0;
    /* 스크롤 시 헤더 바로 아래에 고정 — cm-tabs 쓰는 모든 페이지 공통 */
    position: sticky; top: var(--header-h, 80px); z-index: 120; background: #fff;
}
.cm-tabs .cm-tab-title { font-size: 22px; font-weight: 900; color: #222; margin-right: 16px; padding-bottom: 10px; display: none; }
.cm-tabs a {
    font-size: 15px; font-weight: 500; color: #555; text-decoration: none; padding: 5px 12px 7px;
    border-bottom: 2px solid transparent; transition: all .15s;
}
.cm-tabs a:hover { color: #222; }
.cm-tabs a.active { color: #222; border-bottom-color: #222; font-weight: 800; }
.cm-tabs .cm-tab-right { display: none; }
/* 지점 탭: 스크롤 시 헤더(sticky) 바로 아래에 고정 */
.branch-tabs { position: sticky; top: var(--header-h, 80px); z-index: 120; background: #fff; margin-bottom: 0; }
.cm-tabs .cm-search { border: 1px solid #ddd; border-radius: 20px; padding: 6px 14px; font-size: 13px; outline: none; width: 200px; }
.cm-tabs .cm-btn-write {
    background: var(--gm-estimate); color: #fff !important; border: none; border-radius: 5px; padding: 4px 12px; font-size: 13px;
    font-weight: 700; cursor: pointer; text-decoration: none; display: none;
}
.cm-tabs .cm-btn-write:hover { background: #a90909; }

/* 글쓰기 버튼 앞 연필 아이콘 (Font Awesome 미로드 → 인라인 SVG 사용) */
.cm-btn-write::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 5px;
    vertical-align: -2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* 지점 메인 탭 */
.branch-tabs { max-width: 1200px; margin: 10px auto 0; padding: 0; }
.branch-tabs a { font-size: 16px; padding: 10px 18px 12px; }

/* 지점 카테고리 필터 */
.branch-cat-filter {
    max-width: 1200px; margin: 0 auto; padding: 12px 0 15px; display: flex; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.branch-cat-filter::-webkit-scrollbar { display: none; }
.cat-filter-btn {
    padding: 5px 11px 3px; font-size: 13px; font-weight: 600; border: 1.5px solid #ddd; border-radius: 10px;
    background: #fff; color: #666; cursor: pointer; transition: all .15s; white-space: nowrap; flex-shrink: 0;
}
.cat-filter-btn:hover { border-color: var(--gm-brand); color: var(--gm-primary-dark); }
.cat-filter-btn.active { background: var(--gm-brand); color: #fff; border-color: var(--gm-brand); }


/* ══════════════════════════════════════════════════
   Page CSS (base styles)
   ══════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────
   0. 마이페이지 사이드 네비 (sidenav)
   ────────────────────────────────────────────────── */
/* 마이페이지 공통 레이아웃 */
.my-layout { max-width: 1080px; margin: 40px auto; padding: 0 20px 60px; display: flex; gap: 28px; align-items: flex-start; }
.my-layout .my-side  { width: 220px; flex-shrink: 0; position: sticky; top: 90px; }
.my-layout .my-main  { flex: 1; min-width: 0; }

/* 태블릿 이하(768px)에서 좌측 사이드를 위로 쌓음 */
@media (max-width: 1000px) {
    .my-layout { flex-direction: column; }
    .my-layout .my-side { width: 100%; position: static; }
    /* 모바일/태블릿: 아이콘 위·라벨 아래의 4열 그리드 타일 (가지런히 정렬) */
    .my-side-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border-radius: 12px; }
    .my-side-group-label { display: none; }
    .my-side-link {
        flex-direction: column; gap: 5px; justify-content: center; align-items: center; text-align: center;
        padding: 12px 4px; font-size: 11px; line-height: 1.25; white-space: normal;
        border: none; border-radius: 8px; min-height: 66px;
    }
    .my-side-link.active { background: var(--gm-brand); color: #fff; font-weight: 700; border: none; box-shadow: 0 3px 8px rgba(32,178,214,.35); }
    .my-side-icon { width: auto; }
    .my-side-icon svg { width: 22px; height: 22px; }
}


/* 사이드 네비 */
.my-side-nav { background: #fff; border: 1px solid #d5d5d5; border-radius: 12px; overflow: hidden; margin-bottom: 8px; padding-bottom: 10px; }
.my-side-group-label { font-size: 14px; font-weight: 800; color: var(--gm-text-muted); letter-spacing: .6px; text-transform: uppercase; padding: 10px 16px 4px; }
.my-side-link {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; color: #555;
    text-decoration: none; transition: background .12s, color .12s; border-left: 4px solid transparent;
    white-space: nowrap;
}
.my-side-link:hover { background: #f5faff; color: #1194b8; text-decoration: none; }
.my-side-link.active { background: #e1f4fb; color: var(--gm-primary); font-weight: 700; border-left: 4px solid var(--gm-brand); }
.my-side-icon { width: 18px; text-align: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.my-side-icon svg { width: 17px; height: 17px; display: block; }

/* 로그아웃 */
.my-side-logout {
    display: block; text-align: center; padding: 8px; font-size: 14px; color: var(--gm-text-muted); text-decoration: none;
    border: 1px solid #d5d5d5; border-radius: 8px; transition: all .12s;
}
.my-side-logout:hover { color: var(--gm-point); border-color: #f5c0c0; background: #fff5f5; text-decoration: none; }


/* ──────────────────────────────────────────────────
   1. 마이페이지 (mypage)
   ────────────────────────────────────────────────── */
/* 프로필 카드 (메인 영역) */
.mp-profile-card {
    background: linear-gradient(135deg, var(--gm-brand) 0%, var(--gm-brand) 100%); border-radius: 16px; padding: 28px 24px; color: #fff;
    display: flex; align-items: center; gap: 20px; margin-bottom: 20px; box-shadow: 0 6px 24px rgba(53,197,240,.28);
}
.mp-avatar {
    width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex;
    align-items: center; justify-content: center; font-size: 26px; font-weight: 900; color: #fff; flex-shrink: 0;
    border: 3px solid rgba(255,255,255,.4); position: relative; cursor: pointer; overflow: hidden;
}
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mp-avatar-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 10px;
    font-weight: 700; text-align: center; padding: 4px 0; line-height: 1.2;
}
#mp-avatar-input { display: none; }
.mp-profile-info { flex: 1; }
.mp-name  { font-size: 18px; font-weight: 800; margin-bottom: 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mp-name-edit { background: rgba(255,255,255,.22); border: none; color: #fff; border-radius: 6px;
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; padding: 0; }
.mp-name-edit:hover { background: rgba(255,255,255,.4); }
#mp-name-editor { align-items: center; gap: 5px; }
#mp-name-input { border: none; border-radius: 6px; padding: 4px 8px; font-size: 14px; width: 130px; color: #222; }
#mp-name-save, #mp-name-cancel { border: none; border-radius: 6px; padding: 5px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
#mp-name-save { background: #fff; color: var(--gm-primary-dark); }
#mp-name-cancel { background: rgba(255,255,255,.22); color: #fff; }
.mp-email { font-size: 12px; opacity: .8; margin-bottom: 6px; }
.mp-badge {
    display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.2); border-radius: 12px;
    padding: 3px 10px; font-size: 11px; font-weight: 700;
}

/* 포인트: 프로필 카드에 합쳐진 컴팩트 칩 (비중 축소) */
.mp-profile-point {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    background: rgba(255,255,255,.18); border-radius: 10px; padding: 8px 14px;
    color: #fff; text-decoration: none; transition: background .15s;
}
.mp-profile-point:hover { background: rgba(255,255,255,.30); }
.mp-pp-label { font-size: 11px; opacity: .85; }
.mp-pp-val { font-size: 17px; font-weight: 800; line-height: 1.1; }

/* 통계 */
.mp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.mp-stat-box {
    background: #fff; border: 1px solid #d5d5d5; border-radius: 12px; padding: 16px 12px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.mp-stat-num  { font-size: 24px; font-weight: 900; color: #222; line-height: 1.1; }
.mp-stat-label{ font-size: 14px; color: #555; font-weight: 600; margin-top: 4px; }
.mp-stat-box.pending .mp-stat-num  { color: #f6a623; }
.mp-stat-box.paid    .mp-stat-num  { color: #3a9c5a; }
.mp-stat-box.cancelled .mp-stat-num{ color: var(--gm-point); }

/* 커뮤니티 활동 피드 */
.mp-feed { display: flex; flex-direction: column; }
.mp-feed-item {
    display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid #eee;
    text-decoration: none; color: #333; transition: background .12s;
}
.mp-feed-item:last-child { border-bottom: 0; }
.mp-feed-item:hover { background: #f7fbfd; }
.mp-feed-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.mp-feed-ico svg { display: block; }
.mp-feed-ico.is-like    { color: var(--gm-point); }
.mp-feed-ico.is-comment { color: var(--gm-primary); }
.mp-feed-text { flex: 1; font-size: 13px; line-height: 1.4; min-width: 0; }
.mp-feed-text b { font-weight: 700; color: #111; }
.mp-feed-time { flex-shrink: 0; font-size: 11px; color: var(--gm-text-muted); white-space: nowrap; }
.mp-feed-empty { padding: 24px 0; text-align: center; color: var(--gm-text-muted); font-size: 13px; }

/* 나의 견적요청 요약 */
.mp-est-item {
    display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid #eee;
    text-decoration: none; color: #333; transition: background .12s;
}
.mp-est-item:last-child { border-bottom: 0; }
.mp-est-item:hover { background: #f7fbfd; }
.mp-est-main { flex: 1; min-width: 0; }
.mp-est-loc { font-size: 14px; font-weight: 700; color: #222; display: flex; align-items: center; gap: 6px; }
.mp-est-country { font-size: 11px; font-weight: 700; color: #20789e; background: #eef6fb; border-radius: 4px; padding: 1px 6px; }
.mp-est-sub { font-size: 12px; color: var(--gm-text-sub); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-est-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mp-est-date { font-size: 11px; color: var(--gm-text-muted); white-space: nowrap; }
.mp-est-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.mp-est-badge.pending   { background: #fff4e0; color: #d98a00; }
.mp-est-badge.progress  { background: #e8f2ff; color: #2f6fd0; }
.mp-est-badge.complete  { background: #e7f6ec; color: #2e8b4f; }
.mp-est-badge.paid      { background: #e6f7fb; color: #1a8fb0; }
.mp-est-badge.cancelled { background: #fdecec; color: #d0453f; }
.mp-trip-badge { display:inline-block; font-size:10px; font-weight:700; color:#fff; background:var(--gm-primary,#20B2D6); border-radius:4px; padding:1px 5px; margin-right:4px; vertical-align:middle; }
.mp-trip-stage { display:inline-block; font-size:10px; font-weight:700; color:#0b6f8c; background:#e3f3f8; border-radius:4px; padding:1px 5px; margin-right:4px; vertical-align:middle; }
/* 나의 여행 카드 — 예약 한 건이 언제·어디·몇 명·얼마인지 한 번에 읽히게 */
.mp-trip { border-bottom:1px solid #f0f2f5; }
.mp-trip:last-child { border-bottom:0; }
.mp-trip-link { display:block; padding:13px 2px; text-decoration:none; color:inherit; }
.mp-trip-top { display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:6px; }
.mp-trip-name { font-size:14px; font-weight:600; color:#222; line-height:1.4; word-break:keep-all; }
.mp-trip-meta { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:5px; font-size:12px; color:#64748b; }
.mp-trip-meta .mp-trip-amt { color:#222; font-weight:600; }
/* 출발까지 남은 날 — 가까울수록 눈에 띄게, 지난 여행은 물러나게 */
.mp-dday { display:inline-block; font-size:11px; font-weight:700; border-radius:4px; padding:1px 6px; }
.mp-dday.is-now  { color:#fff; background:var(--gm-red,#e24d24); }
.mp-dday.is-soon { color:var(--gm-red,#e24d24); background:#fdecE8; }
.mp-dday.is-far  { color:#0b6f8c; background:#e3f3f8; }
.mp-dday.is-past { color:#64748b; background:#f1f3f5; }
.mp-trip-state { display:inline-block; font-size:10px; font-weight:700; color:#0e7c3f; background:#e6f6ec; border-radius:4px; padding:1px 5px; }
.mp-trip-todo { display:inline-block; margin:0 0 12px; padding:7px 13px; border-radius:6px; background:#e8380d; color:#fff; font-size:12px; font-weight:500; text-decoration:none; }

/* 여행후기 요약 */
.mp-rv-summary { display: flex; gap: 10px; margin-bottom: 14px; }
.mp-rv-stat {
    flex: 1; background: #f7fbfd; border: 1px solid #eaf3f8; border-radius: 10px;
    padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.mp-rv-stat b { font-size: 20px; font-weight: 800; color: #20789e; }
.mp-rv-stat span { font-size: 12px; color: var(--gm-text-sub); }
.mp-rv-list { display: flex; flex-direction: column; }
.mp-rv-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid #eee;
    text-decoration: none; color: #333; transition: background .12s;
}
.mp-rv-item:last-child { border-bottom: 0; }
.mp-rv-item:hover { background: #f7fbfd; }
.mp-rv-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f2f4f7; }
.mp-rv-thumb.is-none { display: flex; align-items: center; justify-content: center; font-size: 20px; }
.mp-rv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-rv-title { font-size: 14px; font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-rv-meta { display: flex; align-items: center; gap: 8px; }
.mp-rv-stars { font-size: 12px; color: #f5a623; letter-spacing: 1px; }
.mp-rv-branch { font-size: 11px; color: var(--gm-text-sub); }
/* 후기별 반응 수 — /my/reviews(.mr-stat-*)와 같은 색 언어, 마이페이지 요약행 크기에 맞춰 축소 */
.mp-rv-stat-like { font-size: 11px; font-weight: 500; color: var(--gm-point); }
.mp-rv-stat-cmt { font-size: 11px; font-weight: 500; color: var(--gm-primary-dark); display: inline-flex; align-items: center; gap: 3px; }
.mp-rv-stat-cmt .cmt-icon { width: 12px; height: 12px; }
.mp-rv-date { flex-shrink: 0; font-size: 11px; color: var(--gm-text-muted); white-space: nowrap; }
.mp-rv-empty { text-align: center; padding: 8px 0 4px; }
.mp-rv-empty-text { font-size: 13px; color: var(--gm-text-sub); line-height: 1.6; margin-bottom: 14px; }
.mp-rv-write-btn {
    display: inline-block; padding: 10px 24px; background: var(--gm-brand); color: #fff; font-size: 13px; font-weight: 500;
    border-radius: 8px; text-decoration: none; transition: background .15s;
}
.mp-rv-write-btn:hover { background: #1a97b7; color: #fff; text-decoration: none; }
/* 후기 목록이 있을 때는 목록 아래 전체폭 버튼 (빈 상태 버튼과 같은 모양 유지) */
.mp-rv-actions { margin-top: 14px; }
.mp-rv-write-btn.is-block { display: block; width: 100%; text-align: center; }

/* 2D 아이콘 공용: 페이지 제목 앞 아이콘 / 빈 상태 아이콘 */
.my-hd-ico { vertical-align: -4px; margin-right: 6px; }
.my-empty-ico { color: #d0d7de; }
.my-empty-ico svg { display: inline-block; }

/* 섹션 카드 */
.mp-section {
    background: #fff; border: 1px solid #d5d5d5; border-radius: 14px; margin-bottom: 16px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.mp-section-head {
    padding: 14px 20px; border-bottom: 1px solid #f0f0f0; font-size: 14px; font-weight: 800; color: #222; display: flex;
    align-items: center; gap: 8px;
}
.mp-section-body { padding: 20px; }

/* 폼 */
.mp-field { margin-bottom: 16px; }
.mp-label { font-size: 11px; font-weight: 700; color: var(--gm-text-sub); letter-spacing:.4px; text-transform:uppercase; margin-bottom: 5px; display:block; }
.mp-input {
    width: 100%; padding: 10px 13px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 14px; color: #222;
    background: #fafafa; outline: none; transition: border-color .2s; box-sizing: border-box;
}
.mp-input:focus { border-color: var(--gm-brand); background: #fff; }
.mp-input[readonly] { background: #f5f5f5; color: var(--gm-text-sub); cursor: not-allowed; }
.mp-input-hint { font-size: 11px; color: var(--gm-text-muted); margin-top: 4px; }
.mp-save-btn {
    padding: 11px 28px; background: var(--gm-brand); color: #fff; border: none; border-radius: 8px; font-size: 14px;
    font-weight: 800; cursor: pointer; transition: background .15s;
}
.mp-save-btn:hover { background: #29b5de; }

/* 알림 */
.mp-alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; display: none; }
.mp-alert.success { background: #f0fff4; color: #3a9c5a; border-left: 3px solid #3a9c5a; }
.mp-alert.error   { background: #fff0f0; color: var(--gm-point); border-left: 3px solid var(--gm-point); }

/* 뱃지 */
.mp-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; padding: 4px 0; }
.mp-badge-item {
    display: flex; flex-direction: column; align-items: center; padding: 14px 6px 10px; border-radius: 12px;
    background: #fff; border: 1.5px solid #d5d5d5; transition: all .2s;
}
.mp-badge-item.earned {
    border-color: var(--gm-brand); background: linear-gradient(135deg, #f0fbff 0%, #e6f9ff 100%);
    box-shadow: 0 2px 8px rgba(53,197,240,.15);
}
.mp-badge-item.locked { opacity: 1; filter: none; }
.mp-badge-icon { font-size: 28px; margin-bottom: 6px; line-height: 1; }
.mp-badge-name { font-size: 11px; font-weight: 700; color: #333; text-align: center; line-height: 1.3; }
.mp-badge-count { font-size: 10px; color: var(--gm-primary-dark); font-weight: 800; margin-top: 2px; }
.mp-badge-lock  { font-size: 10px; color: #ccc; margin-top: 2px; }


/* ──────────────────────────────────────────────────
   2. 장바구니 (cart)
   ────────────────────────────────────────────────── */
.cart-wrap { max-width: 960px; margin: 40px auto; padding: 0 20px; }
.cart-wrap h2 { font-size: 24px; font-weight: 800; margin-bottom: 28px; }
.cart-empty { text-align:center; padding: 80px 0; color: var(--gm-text-muted); font-size: 18px; }
.cart-empty a { display:inline-block; margin-top:20px; padding:12px 30px;
                background:var(--gm-brand); color:#fff; border-radius:6px; font-size:15px; text-decoration:none; }

/* 비로그인 안내 배너 */
.guest-banner {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; background:#fff8e1;
    border:1px solid #ffe082; border-left: 4px solid #FFC107; border-radius:8px; padding:14px 20px; margin-bottom:24px;
    font-size:14px; color:#555;
}
.guest-banner strong { color:#333; }
.guest-banner a { display:inline-block; padding:8px 20px; background:var(--gm-brand); color:#fff;
                  border-radius:6px; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.guest-banner a:hover { background:#29b5de; }

.location-group { margin-bottom: 36px; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; }
.location-header { display:flex; justify-content:space-between; align-items:center;
                   background:#f7f9fa; padding: 14px 20px; border-bottom: 1px solid #e0e0e0; }
.location-title { font-size: 17px; font-weight: 800; color: #222; }
.location-badge { font-size: 12px; background:var(--gm-brand); color:#fff; padding:3px 10px; border-radius:20px; margin-left:8px; }
.location-note  { font-size: 12px; color: var(--gm-text-sub); }

.cart-item { display:flex; gap:16px; padding: 20px; border-bottom: 1px solid #f0f0f0; }
.cart-item:last-child { border-bottom: none; }
.cart-thumb { width:120px; height:90px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.cart-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-thumb-none { width:120px; height:90px; background:#eee; border-radius:8px;
                   display:flex; align-items:center; justify-content:center; color: var(--gm-text-muted); font-size:12px; }
.cart-body { flex:1; }
.cart-name { font-size:16px; font-weight:700; margin-bottom:6px; }
.cart-name a { color:#222; text-decoration:none; }
.cart-name a:hover { color:var(--gm-primary-dark); }
.cart-pax  { font-size:13px; color:#666; margin-bottom:8px; }
.cart-price { font-size:13px; color:#222; font-weight:700; }

.cart-remove { align-self:flex-start; background:none; border:none; color:#ccc;
               font-size:20px; cursor:pointer; padding:0; line-height:1; }
.cart-remove:hover { color:#ff5555; }

/* 인원 조정 */
.cart-persons { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; padding-top:10px; border-top:1px solid #f0f0f0; }
.cart-person-item { display:flex; align-items:center; gap:6px; }
.cart-person-label { font-size:12px; color:#666; min-width:28px; }
.cp-btn { width:26px; height:26px; border:1.5px solid #ddd; background:#fff; border-radius:5px;
           font-size:15px; font-weight:700; color:#555; cursor:pointer;
           display:flex; align-items:center; justify-content:center; }
.cp-btn:hover { border-color:var(--gm-brand); color:var(--gm-primary-dark); }
.cp-count { font-size:14px; font-weight:800; color:var(--gm-primary-dark); min-width:18px; text-align:center; }

.cart-total-bar { background:#f7f9fa; border:1px solid #e0e0e0; border-radius:10px;
                  padding:20px 24px; margin-top:10px; }
.cart-total-bar .total-title { font-size:15px; font-weight:700; margin-bottom:12px; color:#222; }
.cart-total-row { display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px; }
.cart-total-row strong { color:#222; font-size:16px; }
.cart-total-note { font-size:11px; color: var(--gm-text-muted); margin-top:8px; }
.btn-checkout { display:block; width:100%; margin-top:16px; padding:14px 0; text-align:center;
                background:#ff6b35; color:#fff; font-size:16px; font-weight:700;
                border-radius:8px; text-decoration:none; }
.btn-checkout:hover { background:#e85a25; color:#fff; }


/* ──────────────────────────────────────────────────
   3. 나의 여행 / 주문내역 (orders)
   ────────────────────────────────────────────────── */
/* ── 나의 여행 메인 컨텐츠 ── */
.or-main-title { font-size: 20px; font-weight: 800; color: #222; margin-bottom: 20px; }

/* 빈 상태 */
.or-empty { text-align: center; padding: 80px 0; color: var(--gm-text-muted); }
.or-empty-icon { font-size: 56px; margin-bottom: 16px; }
.or-empty-text { margin-bottom: 20px; }
.or-empty a { display: inline-block; padding: 10px 28px; background: var(--gm-brand);
              color: #fff; border-radius: 7px; font-size: 14px; font-weight: 700;
              text-decoration: none; }

/* 주문 카드 */
.or-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
           margin-bottom: 20px; overflow: hidden; }

/* 카드 헤더 */
.or-card-head { display: flex; align-items: center; justify-content: space-between;
                padding: 16px 22px; background: #f7f9fa; border-bottom: 1px solid #d5d5d5;
                flex-wrap: wrap; gap: 8px; }
.or-order-no { font-family: monospace; font-size: 14px; font-weight: 800; color: var(--gm-primary-dark); }
.or-head-right { display: flex; align-items: center; gap: 12px; }
.or-date { font-size: 12px; color: var(--gm-text-muted); }
.or-badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.or-badge.paid     { background: #d4edda; color: #155724; }
.or-badge.pending  { background: #fff3cd; color: #856404; }
.or-badge.cancelled{ background: #f8d7da; color: #721c24; }
.or-badge.cancel-req{ background: #ffe8cc; color: #b45309; }

/* 카드 바디 */
.or-card-body { padding: 18px 22px; }

/* 상품 행 */
.or-item { display: flex; align-items: flex-start; gap: 14px;
           padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
.or-item:last-child { border-bottom: none; padding-bottom: 0; }
.or-item-info { flex: 1; }
.or-item-name { font-size: 14px; font-weight: 700; color: #222; margin-bottom: 4px; }
.or-deal-badge { display: inline-block; font-size: 11px; font-weight: 600; color: #fff; background: var(--gm-primary,#20B2D6); border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
/* 동행투어 결제 단계 — 예약금 / 잔금. 한 예약이 주문 두 줄로 남아 단계 표시가 없으면
   왜 두 번 결제됐는지 알 수가 없다. */
.or-stage { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
.or-stage.is-deposit { color: #0b6f8c; background: #e3f3f8; }
.or-stage.is-balance { color: #fff; background: var(--gm-primary-dark,#0b7d9e); }
.or-deal-pay { display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 6px; background: #e8380d; color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; }
.or-deal-status { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 4px; padding: 1px 7px; vertical-align: middle; margin-left: 2px; }
.or-deal-status.is-live   { color: #0e7c3f; background: #e6f6ec; }
.or-deal-status.is-ok     { color: #fff;    background: #0e7c3f; }
.or-deal-status.is-wait   { color: #a15c00; background: #fdf0d8; }
.or-deal-status.is-muted  { color: #6e6e6e; background: #eee; }
.or-deal-note { font-size: 12px; color: var(--gm-text-sub,#555); margin-top: 4px; }
.or-item-link { color: inherit; text-decoration: none; }
.or-item-link:hover { color: var(--gm-primary-dark,#188fb0); text-decoration: underline; }
.or-item-meta { font-size: 12px; color: var(--gm-text-sub); line-height: 1.8; }
.or-item-price { text-align: right; white-space: nowrap; }
.or-item-deposit { font-size: 14px; font-weight: 700; color: var(--gm-primary-dark); }
.or-item-charge  { font-size: 11px; color: var(--gm-text-muted); margin-top: 2px; }

/* 카드 푸터 */
.or-card-foot { display: flex; align-items: center; justify-content: space-between;
                padding: 14px 22px; border-top: 1px solid #f0f0f0;
                background: #fafafa; flex-wrap: wrap; gap: 10px; }
.or-total-area { font-size: 13px; color: #666; }
.or-total-area strong { font-size: 16px; color: #ff6b35; margin-left: 4px; }
.or-foot-right { display: flex; gap: 8px; }
.or-btn { padding: 8px 18px; border-radius: 7px; font-size: 13px; font-weight: 700;
           text-decoration: none; display: inline-block; transition: all .15s; border: none;
           cursor: pointer; }
.or-btn-detail { background: #f0f0f0; color: #555; }
.or-btn-detail:hover { background: #e0e0e0; }
.or-btn-cancel { background: #fff; color: var(--gm-point); border: 1.5px solid var(--gm-point); }
.or-btn-cancel:hover { background: #fff0f0; }

/* 무통장 계좌 안내 인라인 */
.or-bank-inline { margin-top: 10px; padding: 12px 16px; background: #fffbf0;
                  border: 1px solid #f6d860; border-radius: 8px; font-size: 12px; color: #856404; }
.or-bank-inline .row { display: flex; gap: 8px; margin-bottom: 4px; }
.or-bank-inline .row:last-child { margin-bottom: 0; }
.or-bank-inline .lbl { color: var(--gm-text-muted); min-width: 52px; }
.or-bank-inline .val { font-weight: 700; color: #333; }

/* 상세 펼치기 토글 */
.or-detail-toggle { font-size: 12px; color: var(--gm-text-muted); cursor: pointer; user-select: none; }
.or-detail-toggle:hover { color: var(--gm-primary-dark); }
.or-extra { display: none; padding-top: 12px; border-top: 1px solid #f5f5f5; margin-top: 12px; }
.or-extra-row { display: flex; gap: 8px; font-size: 13px; padding: 4px 0; }
.or-extra-lbl { color: var(--gm-text-muted); min-width: 72px; }
.or-extra-val { color: #444; }


/* ──────────────────────────────────────────────────
   4. 결제 (checkout)
   ────────────────────────────────────────────────── */
.co-wrap { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.co-wrap > h2 { font-size: 22px; font-weight: 800; margin-bottom: 24px; color: #222; }

/* 2단 그리드 */
.co-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }

/* 공통 섹션 박스 */
.co-section { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.co-section-head { padding: 14px 20px; background: #f7f9fa; border-bottom: 1px solid #e0e0e0;
                   font-size: 15px; font-weight: 800; color: #222; }
.co-section-body { padding: 20px; }

/* 날짜 선택 */
.date-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.date-sep { color: #ccc; font-size: 18px; font-weight: 700; text-align: center; }
.co-label { display: block; font-size: 11px; font-weight: 700; color: var(--gm-text-sub); margin-bottom: 5px; letter-spacing: 0.3px; }
.co-input { width: 100%; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 7px;
            font-size: 14px; color: #222; background: #fafafa; box-sizing: border-box; }
.co-input:focus { outline: none; border-color: var(--gm-brand); background: #fff; }

/* 인원 선택 */
.person-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.person-item .p-label { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 2px; }
.person-item .p-age  { font-size: 11px; color: var(--gm-text-muted); margin-bottom: 10px; }
.person-counter { display: flex; align-items: center; gap: 12px; }
.p-btn { width: 32px; height: 32px; border: 1.5px solid #ddd; background: #fff; border-radius: 6px;
          font-size: 16px; font-weight: 700; color: #555; cursor: pointer; }
.p-btn:hover { border-color: var(--gm-brand); color: var(--gm-primary-dark); }
.p-count { font-size: 17px; font-weight: 800; color: var(--gm-primary-dark); min-width: 20px; text-align: center; }

/* 내 여행 상품 카드 */
.tour-card { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; position: relative; transition: background .15s; }
.tour-card:last-child { border-bottom: none; }
.tour-card-ghost { opacity: 0.4; background: #e8f8fd; border-radius: 8px; }
.tour-card-chosen { background: #f8fdff; box-shadow: 0 2px 12px rgba(53,197,240,.15); border-radius: 8px; }

/* 드래그 핸들 */
.tour-drag-handle { flex-shrink: 0; width: 24px; display: flex; align-items: center; justify-content: center;
                    font-size: 18px; color: #ccc; cursor: grab; user-select: none; -webkit-user-select: none;
                    transition: color .15s; }
.tour-drag-handle:hover { color: var(--gm-primary-dark); }
.tour-drag-handle:active { cursor: grabbing; }

/* 스케줄 행 (날짜 뱃지 + 드롭다운) */
.tour-schedule-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tour-day-badge { display: inline-block; padding: 2px 8px; background: var(--gm-brand); color: #fff; border-radius: 10px;
                  font-size: 11px; font-weight: 700; white-space: nowrap; }
.tour-date-select { border: 1px solid #e0e0e0; border-radius: 6px; padding: 3px 8px; font-size: 12px; color: #555;
                    background: #fafafa; cursor: pointer; outline: none; }
.tour-date-select:focus { border-color: var(--gm-brand); }

.tour-thumb { width: 100px; height: 75px; border-radius: 7px; overflow: hidden; flex-shrink: 0; background: #eee; }
.tour-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tour-thumb-none { width: 100px; height: 75px; border-radius: 7px; background: #eee; flex-shrink: 0;
                   display: flex; align-items: center; justify-content: center; color: var(--gm-text-muted); font-size: 11px; }
.tour-info { flex: 1; }
.tour-name { font-size: 14px; font-weight: 700; color: #222; margin-bottom: 4px; }
.tour-meta { font-size: 12px; color: var(--gm-text-sub); margin-bottom: 6px; }
.tour-price { font-size: 12px; color: #222; font-weight: 700; margin-bottom: 8px; }
.tour-price > span { vertical-align: baseline; }

/* 상품별 인원 조정 */
.tour-persons { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; }
.tour-person-item { display: flex; align-items: center; gap: 6px; }
.tour-person-label { font-size: 12px; color: #666; min-width: 28px; }
.tp-btn { width: 24px; height: 24px; border: 1.5px solid #ddd; background: #fff; border-radius: 5px;
           font-size: 14px; font-weight: 700; color: #555; cursor: pointer; line-height: 1;
           display: flex; align-items: center; justify-content: center; }
.tp-btn:hover { border-color: var(--gm-brand); color: var(--gm-primary-dark); }
.tp-count { font-size: 14px; font-weight: 800; color: var(--gm-primary-dark); min-width: 16px; text-align: center; }

/* 예약자 정보 */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-grid.full { grid-template-columns: 1fr; }

/* 우측 sticky 패널 */
.co-panel { background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
            padding: 22px; position: sticky; top: 20px; }
.co-panel-title { font-size: 15px; font-weight: 800; color: #222; margin-bottom: 16px;
                  padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }

/* 약관 */
.agree-all { display: flex; align-items: center; gap: 8px; padding: 11px 13px;
             background: #f7f9fa; border: 1px solid #e0e0e0; border-radius: 7px; margin-bottom: 8px; }
.agree-all label { font-size: 13px; font-weight: 700; color: #222; cursor: pointer; }
.agree-sub { display: flex; align-items: center; gap: 8px; padding: 5px 2px; }
.agree-sub label { font-size: 12px; color: #666; cursor: pointer; }
.agree-all input, .agree-sub input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--gm-brand); flex-shrink: 0; vertical-align: middle; }
.agree-all label, .agree-sub label { vertical-align: middle; line-height: 1.4; }
.terms-view-link { font-size: 12px; color: var(--gm-primary-dark); text-decoration: none; margin-left: 4px; vertical-align: baseline; }
.terms-view-link:hover { color: #1aa3d0; }

/* 약관 레이어 팝업 */
.terms-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999;
                 display: flex; align-items: center; justify-content: center; }
.terms-popup { background: #fff; border-radius: 12px; width: 90%; max-width: 640px; max-height: 80vh;
               display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.terms-popup-head { display: flex; justify-content: space-between; align-items: center;
                    padding: 16px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.terms-popup-head span { font-size: 16px; font-weight: 700; color: #222; }
.terms-popup-head button { background: none; border: none; font-size: 24px; color: var(--gm-text-sub); cursor: pointer; line-height: 1; }
.terms-popup-head button:hover { color: #333; }
.terms-popup-body { padding: 20px; overflow-y: auto; font-size: 13px; line-height: 1.7; color: #444; }
.terms-popup-body h3 { font-size: 16px; font-weight: 700; color: #222; margin: 0 0 6px; }
.terms-popup-body h4 { font-size: 14px; font-weight: 700; color: #333; margin: 18px 0 6px; }
.terms-popup-body p { margin: 0 0 8px; }
.terms-popup-body ol { padding-left: 20px; margin: 0 0 8px; }
.terms-popup-body li { margin-bottom: 4px; }
.terms-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0 12px; }
.terms-table th, .terms-table td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; vertical-align: top; }
.terms-table th { background: #f5f7f9; font-weight: 700; color: #333; white-space: nowrap; }
.terms-table td { color: #555; line-height: 1.6; }

/* 금액 요약 */
.price-summary { margin: 16px 0; padding: 14px; background: #f7f9fa; border-radius: 8px; }
.price-row { display: flex; justify-content: space-between; font-size: 13px; color: #555; margin-bottom: 6px; }
.price-row:last-child { margin-bottom: 0; }
.price-row .val { font-weight: 700; color: #222; }
.price-row .val-usd { font-weight: 700; color: var(--gm-text-sub); }
.price-total { display: flex; justify-content: space-between; align-items: center;
               padding-top: 12px; border-top: 1.5px solid #ddd; margin-top: 10px; }
.price-total .t-label { font-size: 14px; font-weight: 700; color: #333; }
.price-total .t-amount { font-size: 20px; font-weight: 800; color: #ff6b35; }

/* 잔금 안내 */
.panel-charge-row { font-size: 13px; color: #333; text-align: right; margin-bottom: 4px; }
.panel-charge-row strong { color: #333; font-weight: 800; }
.panel-charge-note { display: none; font-size: 10px; color: var(--gm-text-muted); text-align: right; margin-bottom: 14px; }

/* 결제 버튼 */
.btn-pay { display: block; width: 100%; margin-top: 14px; padding: 14px 0; text-align: center;
           background: #ff6b35; color: #fff; font-size: 15px; font-weight: 800;
           border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s; }
.btn-pay:hover { background: #e85a25; }
.btn-pay:disabled { background: #ccc; cursor: not-allowed; }
.btn-back { display: block; text-align: center; margin-top: 10px; font-size: 12px; color: var(--gm-text-muted); text-decoration: none; }
.btn-back:hover { color: var(--gm-primary-dark); }

.co-empty { text-align: center; padding: 60px 0; color: var(--gm-text-muted); font-size: 16px; }
.co-empty a { display: inline-block; margin-top: 16px; padding: 10px 24px;
              background: var(--gm-brand); color: #fff; border-radius: 6px; font-size: 14px; text-decoration: none; }

/* 출발 공항 / 항공권 */
.airport-list { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.airport-list span { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #333; cursor: pointer; }
.airport-list input[type=radio] { cursor: pointer; accent-color: var(--gm-brand); }
.airport-etc-input { border: 1px solid #ccc; border-radius: 6px; padding: 5px 10px; font-size: 13px; width: 110px; margin-left: 4px; }
.airport-etc-input.disable { background: #f5f5f5; color: #ccc; }

.airline-list { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.airline-list span { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #333; cursor: pointer; }
.airline-list input[type=radio] { cursor: pointer; accent-color: var(--gm-brand); }

.schedule-wrap { margin-top: 14px; padding: 14px 16px; background: #f8f9fa; border-radius: 8px; }
.schedule-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; color: #555; }
.schedule-row:last-of-type { margin-bottom: 0; }
.schedule-label { min-width: 32px; font-weight: 700; color: #333; }
.schedule-date { padding: 7px 10px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 13px; }
.schedule-flight { flex: 1; padding: 7px 10px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 13px; }
.schedule-hint { font-size: 11px; color: #f6a623; margin-top: 8px; margin-bottom: 0; }
.schedule-flight { position: relative; cursor: pointer; }

/* 항공편 선택 드롭다운 */
.schedule-layer { display: none; position: absolute; z-index: 100; background: #fff;
                  border: 1.5px solid var(--gm-brand); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
                  max-height: 200px; overflow-y: auto; }
.schedule-layer.show { display: block; }
.schedule-layer ul { list-style: none; margin: 0; padding: 4px 0; }
.schedule-layer li { padding: 9px 14px; font-size: 13px; color: #333; cursor: pointer; white-space: nowrap; }
.schedule-layer li:hover { background: #f0fbff; color: var(--gm-primary-dark); }

/* 호텔/리조트 */
.hotel-status-list { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.hotel-status-list span { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #333; cursor: pointer; }
.hotel-status-list input[type=radio] { cursor: pointer; accent-color: var(--gm-brand); }
.hotel-grade-list { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.hotel-grade-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px;
                    border: 1.5px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: border-color .2s; }
.hotel-grade-item:hover { border-color: var(--gm-brand); }
.hotel-grade-item input[type=radio] { accent-color: var(--gm-brand); }
.hotel-grade-budget { font-size: 11px; color: var(--gm-text-muted); margin-left: 4px; }

/* 결제수단 선택 */
.pay-method-list { display: flex; gap: 10px; margin-bottom: 14px; }
.pay-method-btn {
    flex: 1; padding: 10px 0; border: 2px solid #e0e0e0; border-radius: 8px; background: #fff; font-size: 13px;
    font-weight: 700; color: var(--gm-text-sub); cursor: pointer; text-align: center; transition: all .2s;
}
.pay-method-btn.active { border-color: var(--gm-brand); color: var(--gm-primary-dark); background: #f0fbff; }
.bank-info-box {
    background: #f7f9fa; border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px;
    font-size: 13px; color: #444; display: none;
}
.bank-info-box .bank-row { display: flex; gap: 8px; margin-bottom: 6px; }
.bank-info-box .bank-row:last-child { margin-bottom: 0; }
.bank-info-box .bank-label { color: var(--gm-text-muted); min-width: 52px; }
.bank-info-box .bank-val { font-weight: 700; color: #222; }

/* ── 포인트 사용 (checkout) ────────────────────────── */
.point-use-box { margin: 14px 0; padding: 14px; background: #fffdf5; border: 1px solid #ffe8b0; border-radius: 8px; }
.point-use-title {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 13px;
    font-weight: 700; color: #333;
}
.point-balance-label { font-size: 12px; font-weight: 400; color: var(--gm-text-sub); }
.point-balance-label strong { color: #ff6b35; font-weight: 700; }
.point-input-row { display: flex; align-items: center; gap: 6px; }
.point-input { flex: 1; text-align: right; font-weight: 700; font-size: 14px; }
.point-input::-webkit-inner-spin-button,
.point-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.point-input[type=number] { -moz-appearance: textfield; }
.point-won { font-size: 13px; color: var(--gm-text-sub); font-weight: 700; flex-shrink: 0; }
.btn-use-all {
    flex-shrink: 0; padding: 7px 12px; font-size: 12px; font-weight: 700; color: #fff; background: var(--gm-brand);
    border: none; border-radius: 6px; cursor: pointer;
}
.btn-use-all:hover { background: #1a9fc0; }
.point-hint { font-size: 11px; margin-top: 6px; min-height: 16px; }
.point-row { border-top: 1px dashed #eee; padding-top: 8px; margin-top: 6px; }
.point-final-row { border-top: 1px solid #ddd; padding-top: 10px; margin-top: 6px; }

/* ──────────────────────────────────────────────────
   5. 포인트 내역 (my/points)
   ────────────────────────────────────────────────── */
/* ── 포인트 내역 ── */
.pt-title { font-size: 20px; font-weight: 800; color: #222; margin-bottom: 20px; }

/* 포인트 요약 배너 */
.pt-summary { display: flex; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.pt-summary-card {
    flex: 1; min-width: 120px; padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid #d5d5d5;
    text-align: center;
}
.pt-summary-card.main-card { background: linear-gradient(135deg, var(--gm-brand), var(--gm-brand)); border: none; color: #fff; }
.pt-summary-label { font-size: 14px; font-weight: 600; opacity: .75; margin-bottom: 6px; }
.pt-summary-value { font-size: 22px; font-weight: 900; }
.pt-summary-card.main-card .pt-summary-value { color: #FFE066; }
.pt-summary-unit { font-size: 14px; font-weight: 600; margin-left: 2px; color: var(--gm-text-muted);}

/* 내역 테이블 영역 */
.pt-log-section { background: #fff; border: 1px solid #d5d5d5; border-radius: 12px; overflow: hidden; }
.pt-log-header {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0; font-size: 16px; font-weight: 800; color: #444;
}
.pt-log-count { font-size: 14px; color: var(--gm-text-muted); font-weight: 400; }

/* 내역 행 */
.pt-log-item {
    display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #f9f9f9;
    transition: background .1s;
}
.pt-log-item:last-child { border-bottom: none; }
.pt-log-item:hover { background: #fafcff; }

.pt-log-icon {
    width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.pt-log-icon.earn   { background: #e8f8ee; }
.pt-log-icon.use    { background: #fef3e8; }
.pt-log-icon.expire { background: #f5f5f5; }
.pt-log-icon.admin  { background: #e8f4fe; }

.pt-log-info { flex: 1; min-width: 0; }
.pt-log-reason { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 3px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-log-date   { font-size: 12px; color: #ccc; }

.pt-log-amount { text-align: right; white-space: nowrap; }
.pt-log-pts    { font-size: 15px; font-weight: 900; }
.pt-log-pts.earn   { color: #2ecc71; }
.pt-log-pts.use    { color: var(--gm-point); }
.pt-log-pts.expire { color: var(--gm-text-muted); }
.pt-log-pts.admin  { color: var(--gm-primary-dark); }
.pt-log-balance { font-size: 12px; color: #ccc; margin-top: 2px; }

/* 빈 상태 */
.pt-empty { text-align: center; padding: 60px 0; color: var(--gm-text-muted); }
.pt-empty-icon { font-size: 48px; margin-bottom: 12px; }
.pt-empty-text { font-size: 16px; }

/* 페이지네이션 */
.pt-pagination { display: flex; justify-content: center; margin-top: 24px; gap: 4px; }
.pt-page-btn {
    padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; border: 1px solid #e0e0e0;
    background: #fff; color: #555; text-decoration: none; transition: all .12s;
}
.pt-page-btn:hover { background: #f0faff; border-color: var(--gm-brand); color: var(--gm-primary-dark); text-decoration: none; }
.pt-page-btn.active { background: var(--gm-brand); border-color: var(--gm-brand); color: #fff; }
.pt-page-btn.disabled { opacity: .4; pointer-events: none; }


/* ──────────────────────────────────────────────────
   6. 내가 쓴 댓글 (my/comments)
   ────────────────────────────────────────────────── */
/* ── 내가 쓴 댓글 ── */
.cm-title { font-size: 20px; font-weight: 800; color: #222; margin-bottom: 20px; }

/* 빈 상태 */
.cm-empty { text-align: center; padding: 80px 0; color: var(--gm-text-muted); }
.cm-empty-icon { font-size: 52px; margin-bottom: 14px; }
.cm-empty-text,.mr-empty-text, .or-empty-text, .est-my-empty-text{ font-size: 16px; }

/* 댓글 카드 */
.cm-card {
    background: #fff; border: 1px solid #d5d5d5; border-radius: 12px; margin-bottom: 14px; overflow: hidden;
    transition: box-shadow .15s;
}
.cm-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }

/* 상단: 게시물 출처 */
.cm-card-source {
    display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: #f9fafb;
    border-bottom: 1px solid #f0f0f0; font-size: 12px; color: var(--gm-text-sub);
}
.cm-source-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #e8f4fe; color: #1a7dc7; }
.cm-source-badge.review { background: #fef3e8; color: #d46b08; }
.cm-source-badge.talk { background: #eef2ff; color: #4f46e5; }
.cm-source-title {
    flex: 1; font-size: 13px; color: #555; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; text-decoration: none;
}
.cm-source-title:hover { color: var(--gm-primary-dark); text-decoration: none; }
.cm-source-date { font-size: 11px; color: #ccc; white-space: nowrap; }

/* 댓글 본문 */
.cm-card-body { padding: 14px 18px; }
.cm-body-text { font-size: 14px; color: #333; line-height: 1.7; word-break: break-word; }
.cm-body-text.deleted { color: #ccc; font-style: italic; }

/* 상태 표시 */
.cm-status { display: inline-block; margin-top: 6px; font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: 600; }
.cm-status.hidden  { background: #fff3cd; color: #856404; }
.cm-status.deleted { background: #f8d7da; color: #721c24; }

/* 페이지네이션 */
.cm-pagination { display: flex; justify-content: center; margin-top: 24px; gap: 4px; }
.cm-page-btn {
    padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; border: 1px solid #e0e0e0;
    background: #fff; color: #555; text-decoration: none; transition: all .12s;
}
.cm-page-btn:hover { background: #f0faff; border-color: var(--gm-brand); color: var(--gm-primary-dark); text-decoration: none; }
.cm-page-btn.active { background: var(--gm-brand); border-color: var(--gm-brand); color: #fff; }
.cm-page-btn.disabled { opacity: .4; pointer-events: none; }


/* ──────────────────────────────────────────────────
   6-1. 리뷰 글쓰기 (review/write)
   ────────────────────────────────────────────────── */
.rw-wrap { max-width: 1080px; margin: 30px auto; padding: 0 15px; }
.rw-wrap h2 { font-size: 24px; font-weight: 800; margin-bottom: 4px; color: #222; }
.rw-subtitle { color: var(--gm-text-sub); font-size: 14px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid #333; }
.rw-error-msg { padding: 12px 16px; background: #fff0f0; color: var(--gm-point); border-radius: 8px; margin-bottom: 16px; font-size: 13px; }

/* 섹션 */
.rw-section { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 28px 24px; margin-bottom: 20px; }
.rw-photo-section { background: #f8fbff; border-color: #d8e8f4; }
.rw-section-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.rw-section-num {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--gm-brand); color: #fff; font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.rw-section-title { font-size: 17px; font-weight: 800; color: #222; }
.rw-section-desc { font-size: 13px; color: var(--gm-text-sub); margin-top: 2px; }

/* 사진 업로드 영역 (블로그 스타일) */
.rw-photo-upload-area { background: #f8fbff; border: 1px solid #d8e8f4; border-radius: 10px; padding: 16px; }
.rw-photo-upload-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rw-photo-upload-title { font-size: 14px; font-weight: 700; color: #333; }
.rw-photo-add-btn {
    padding: 6px 16px; background: #fff; color: var(--gm-primary-dark); border: 1.5px solid var(--gm-brand); border-radius: 6px; font-size: 13px;
    font-weight: 700; cursor: pointer; transition: background .15s;
}
.rw-photo-add-btn:hover { background: #fff; }
.rw-photo-empty { text-align: center; color: var(--gm-text-muted); font-size: 13px; padding: 20px 0; }

/* 사진 리스트 (갤러리 썸네일 그리드) — 정사각 타일에 컨트롤을 오버레이해 공간 절약 */
.rw-photo-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    padding-bottom: 2px;
}
.rw-ph-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
    border: 1px solid #d5d5d5;
}
.rw-ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 대표 배지 / 대표 설정 — 좌상단 */
.rw-ph-main {
    position: absolute; top: 4px; left: 4px; z-index: 2;
    background: var(--gm-brand); color: #fff; font-size: 10px; font-weight: 800;
    padding: 2px 6px; border-radius: 4px;
}
.rw-ph-set-main {
    position: absolute; top: 4px; left: 4px; z-index: 2;
    background: rgba(0,0,0,0.5); color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 4px; border: none; cursor: pointer; transition: background .15s;
}
.rw-ph-set-main:hover { background: var(--gm-brand); }

/* 삭제 — 우상단 원형 */
.rw-ph-remove {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 22px; height: 22px; background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%;
    font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.rw-ph-remove:hover { background: var(--gm-point); }

/* 본문 삽입 — 하단 바 */
.rw-ph-insert {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 5px 4px; background: rgba(0,0,0,0.55); color: #fff; border: none;
    font-size: 11px; font-weight: 700; cursor: pointer; text-align: center; transition: background .15s;
}
.rw-ph-insert:hover { background: var(--gm-brand); }

/* 입력 필드 */
.rw-row { display: flex; gap: 16px; }
.rw-col-6 { flex: 1; }
.rw-col-3 { flex: 0 0 auto; width: 180px; }
.rw-field { margin-bottom: 0px; }
.rw-label { display: block; font-size: 13px; font-weight: 700; color: #333; margin: 14px 0 6px; }
.rw-required { color: var(--gm-point); margin-left: 2px; }
.rw-input,
.rw-select {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
    background: #fafafa;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}
.rw-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    padding-right: 36px;
}
.rw-input:focus,
.rw-select:focus {
    border-color: var(--gm-brand);
    background: #fff;
}
.rw-textarea {
    width: 100%; padding: 14px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 14px; color: #222;
    background: #fafafa; outline: none; resize: vertical; min-height: 250px; line-height: 1.7;
    transition: border-color .2s; box-sizing: border-box;
}
.rw-textarea:focus { border-color: var(--gm-brand); background: #fff; }

/* 별점 */
.rw-rating { display: flex; align-items: center; gap: 4px; }
.rw-star { font-size: 32px; color: #ddd; cursor: pointer; transition: color .15s, transform .15s; user-select: none; line-height: 1; }
.rw-star:hover { transform: scale(1.15); }
.rw-star.active { color: #f5a623; }
.rw-rating-text { margin-left: 10px; font-size: 14px; font-weight: 700; color: #f5a623; }

/* 버튼 */
.rw-form-footer { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; margin-bottom: 40px; }
.rw-submit-btn {
    padding: 12px 40px; background: var(--gm-brand); color: #fff; border: none; border-radius: 10px; font-size: 18px;
    font-weight: 800; cursor: pointer; transition: background .15s;
}
.rw-submit-btn:hover { background: #29b5de; }
.rw-cancel-btn {
    padding: 14px 28px; border: 1px solid #ddd; border-radius: 10px; color: var(--gm-text-sub); text-decoration: none;
    font-size: 14px; font-weight: 600; transition: all .15s;
}
.rw-cancel-btn:hover { border-color: #999; color: #555; }


/* ──────────────────────────────────────────────────
   7. 여행토크 작성 (talk/write)
   ────────────────────────────────────────────────── */
.talk-write-wrap { max-width: 860px; margin: 30px auto; padding: 0 15px; }
.talk-write-wrap h2 { font-size: 22px; font-weight: 700; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid #333; }
.talk-field { margin-bottom: 20px; }
.talk-label { display: block; font-size: 13px; font-weight: 700; color: #333; margin-bottom: 6px; }
.talk-label .required { color: var(--gm-point); margin-left: 2px; }
.talk-input,
.talk-select {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: #222;
    background: #fafafa;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}
.talk-input:focus,
.talk-select:focus {
    border-color: var(--gm-brand);
    background: #fff;
}
.talk-textarea {
    width: 100%; padding: 14px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 14px; color: #222;
    background: #fafafa; outline: none; resize: vertical; min-height: 300px; line-height: 1.7;
    transition: border-color .2s; box-sizing: border-box;
}
.talk-textarea:focus { border-color: var(--gm-brand); background: #fff; }
.talk-error { color: var(--gm-point); font-size: 12px; margin-top: 4px; }

/* 사진 업로드 */
.talk-photo-area {
    border: 2px dashed #e0e0e0; border-radius: 10px; padding: 20px; text-align: center; color: var(--gm-text-muted); cursor: pointer;
    transition: border-color .15s;
}
.talk-photo-area:hover { border-color: var(--gm-brand); }
.talk-photo-area input[type=file] { display: none; }
.talk-photo-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.talk-photo-add-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 8px 18px;
    background: #fff; border: 1px solid #ccc; border-radius: 6px; color: #555;
    font-size: 14px; cursor: pointer; transition: border-color .15s, color .15s;
}
.talk-photo-add-btn:hover { border-color: var(--gm-brand); color: var(--gm-primary-dark); }
.talk-photo-thumb { position: relative; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; }
.talk-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.talk-photo-thumb .remove-photo {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(0,0,0,.6); color: #fff;
    border: none; border-radius: 50%; font-size: 12px; cursor: pointer; display: flex; align-items: center;
    justify-content: center;
}

/* 버튼 */
.talk-form-footer { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.talk-submit-btn {
    padding: 12px 36px; background: var(--gm-brand); color: #fff; border: none; border-radius: 8px; font-size: 15px;
    font-weight: 800; cursor: pointer; transition: background .15s;
}
.talk-submit-btn:hover { background: #29b5de; }
.talk-cancel-btn {
    padding: 12px 24px; border: 1px solid #ddd; border-radius: 8px; color: var(--gm-text-sub); text-decoration: none; font-size: 14px;
    font-weight: 600; transition: all .15s;
}
.talk-cancel-btn:hover { border-color: #999; color: #555; }


/* ──────────────────────────────────────────────────
   8. 여행토크 상세 (talk/view)
   ────────────────────────────────────────────────── */
.talk-view-wrap { max-width: 860px; margin: 30px auto; padding: 0 15px; }

/* 헤더 */
.talk-view-header { border-bottom: 2px solid #333; padding-bottom: 16px; margin-bottom: 20px; }
.talk-view-header .branch-badge {
    display: inline-block; background: var(--gm-brand); color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 20px;
    margin-bottom: 10px;
}
.talk-view-header h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.talk-view-meta { display: flex; gap: 16px; font-size: 14px; color: var(--gm-text-sub); align-items: center; flex-wrap: wrap; }
.talk-view-meta .author { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #333; flex-wrap: wrap; }
.talk-view-meta .author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.talk-view-meta .author img.talk-author-badge { width: 36px; height: 36px; border-radius: 0; object-fit: contain; }
.talk-view-actions { margin-left: auto; display: flex; gap: 8px; }
.talk-view-actions a,
.talk-view-actions button {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    transition: all .15s;
}
.talk-view-actions a:hover { border-color: var(--gm-brand); color: var(--gm-primary-dark); }
.talk-view-actions .btn-del { border-color: var(--gm-point); color: var(--gm-point); }
.talk-view-actions .btn-del:hover { background: var(--gm-point); color: #fff; }

/* 본문 */
.talk-view-body { padding: 20px 0 40px; border-bottom: 1px solid #e0e0e0; font-size: 16px; line-height: 1.8; color: #333; }
.talk-view-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }

/* 사진 — 원본 비율 유지, 세로로 쌓기 */
.talk-photos { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-bottom: 1px solid #e0e0e0; }
.talk-photos a { display: block; overflow: hidden; border-radius: 8px; background: #eee; max-width: 720px; margin: 0 auto; }
.talk-photos a img { display: block; width: 100%; height: auto; transition: transform .3s; }
.talk-photos a:hover img { transform: scale(1.02); }

/* 좋아요 */
.talk-like-area { display: flex; justify-content: center; padding: 24px 0; border-bottom: 1px solid #e0e0e0; }
.btn-talk-like {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 28px; border: 2px solid #e0e0e0;
    border-radius: 30px; background: #fff; font-size: 16px; font-weight: 700; color: var(--gm-text-sub); cursor: pointer;
    transition: all .2s;
}
.btn-talk-like:hover { border-color: var(--gm-point); color: var(--gm-point); }
.btn-talk-like.liked { border-color: var(--gm-point); color: var(--gm-point); background: #fff5f5; }
.btn-talk-like .heart { font-size: 20px; transition: transform .2s; }
.btn-talk-like.liked .heart { transform: scale(1.2); }

/* 댓글 */
.talk-comments { padding: 24px 0; }
.talk-comments h4 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.comment-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.comment-avatar {
    width: 36px; height: 36px; border-radius: 50%; background: #e8e8e8; display: flex; align-items: center;
    justify-content: center; font-size: 14px; font-weight: 700; color: var(--gm-text-sub); flex-shrink: 0;
}
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.comment-nickname { font-size: 16px; font-weight: 700; color: #333; }
.comment-date { font-size: 12px; color: var(--gm-text-muted); }
.comment-delete { font-size: 11px; color: #ccc; border: none; background: none; cursor: pointer; margin-left: auto; }
.comment-delete:hover { color: var(--gm-point); }
.comment-text { font-size: 16px; color: #444; line-height: 1.5; }
.comment-empty { text-align: center; padding: 30px 0; color: var(--gm-text-muted); font-size: 14px; }

/* 댓글 작성폼 */
.comment-form { margin-top: 16px; border: 1.5px solid #e0e0e0; border-radius: 10px; overflow: hidden; }
.comment-form textarea {
    width: 100%; border: none; padding: 14px; font-size: 16px; resize: vertical; min-height: 80px; outline: none;
    box-sizing: border-box;
}
.comment-form-footer {
    display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #fafafa;
    border-top: 1px solid #f0f0f0;
}
.nickname-label { font-size: 14px; color: var(--gm-text-muted); }
.comment-submit {
    padding: 6px 20px; background: var(--gm-brand); color: #fff; border: none; border-radius: 6px; font-size: 16px;
    font-weight: 700; cursor: pointer;
}
.comment-submit:hover { background: #29b5de; }
.comment-login-msg { text-align: center; padding: 30px; color: var(--gm-text-muted); font-size: 16px; }
.comment-login-msg a { color: var(--gm-primary-dark); font-weight: 700; }

/* 하단 버튼 */
.talk-view-footer { padding: 20px 0; display: flex; justify-content: center; }
.talk-back-btn {
    padding: 10px 30px; border: 1px solid #ddd; border-radius: 8px; color: #666; text-decoration: none; font-size: 16px;
    font-weight: 600; transition: all .15s;
}
.talk-back-btn:hover { border-color: var(--gm-brand); color: var(--gm-primary-dark); }


/* ──────────────────────────────────────────────────
   9. 여행토크 목록 (talk/list)
   ────────────────────────────────────────────────── */
.talk-wrap { display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto 10px; padding: 0px; }

/* 사이드바 → tab-location과 동일한 가로 탭 */
/* 여행토크·여행후기 지점 선택 탭 (동일 구성 → 스타일 공유) */
/* 여행후기/여행토크 공용 지점 사이드바 — 한 클래스명(.cm-sidebar)으로 통일 */
.cm-sidebar { width: 100%; position: sticky; top: calc(var(--header-h, 80px) + var(--cmtabs-h, 0px)); z-index: 110; background: #fff; }
.cm-sidebar h3 { display: none; }
.cm-sidebar ul { list-style: none; margin: 0 0 14px; padding: 8px 0 8px; display: flex; width: 100%; text-align: left; border-bottom: 1px solid #ddd; justify-content: flex-start; flex-wrap: wrap; gap: 2px; }
.cm-sidebar ul::-webkit-scrollbar { display: none; }
.cm-sidebar ul li { padding: 2px 0; cursor: pointer; white-space: nowrap; }
.cm-sidebar ul li a { display: inline-block; text-decoration: none; color: inherit; font-size: 15px; padding: 5px 10px; }
.cm-sidebar ul li a.active { color: var(--gm-primary); font-weight: 700; }

/* ===========================================================
   공용 정렬(.sp-sorts) / 검색(.sp-search) / 글쓰기(.sp-write) — review/news/talk 공통
   =========================================================== */
.sp-write {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 16px;
    background: var(--gm-primary); color: #fff; border: none; border-radius: 6px;
    font-size: 13px; font-weight: 600; line-height: 1;
    text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s;
}
.sp-write:hover { background: #1db3de; color: #fff; }
.sp-write::before {
    content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 공용 섹션 헤더 (제목 + 더보기 링크) — 모든 샵 섹션 공통 */
.sp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.sp-sec-head h3 { font-size: 20px; font-weight: 800; margin: 0; color: #222; }
.sp-sec-more { font-size: 13px; color: var(--gm-text-sub); text-decoration: none; white-space: nowrap; }
.sp-sec-more:hover { color: #555; text-decoration: none; }
@media (max-width: 1000px) {
    .sp-sec-head h3 { font-size: 18px; }
}

.sp-sorts { display: flex; gap: 4px; }
.sp-sorts a, .sp-sorts button {
    padding: 7px 16px; border: none; border-radius: 20px;
    font-size: 14px; font-weight: 600; color: var(--gm-text-sub); background: #f4f4f4;
    text-decoration: none; cursor: pointer; transition: all .15s;
}
.sp-sorts a.active, .sp-sorts button.active { background: #222; color: #fff; }
.sp-sorts a:hover:not(.active), .sp-sorts button:hover:not(.active) { background: #e8e8e8; color: #555; }

.sp-search { display: flex; border: 1px solid #ddd; border-radius: 24px; overflow: hidden; height: 38px; }
.sp-search input[type="text"] {
    border: none; outline: none; padding: 0 14px; font-size: 14px; width: 200px; background: #fff;
}
.sp-search button {
    border: none; border-left: 1px solid #eee; width: 44px;
    background: #fff url("../images/main/search.png") center / 16px no-repeat;
    cursor: pointer; font-size: 0;
}
.sp-search button:hover { background-color: #f5f5f5; }

/* 공용 정렬+검색 툴바 컨테이너 — 정렬(왼쪽) / 검색·글쓰기(오른쪽). review/talk/지점리뷰 공통 */
.sp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.sp-toolbar .sp-search { margin-left: auto; }

@media (max-width: 1000px) {
    .sp-sorts a, .sp-sorts button { padding: 5px 11px; font-size: 11px; }
    .sp-write { height: 30px; padding: 0 10px; font-size: 11px; }
    /* 검색: 기본은 동그란 아이콘 버튼만 */
    .sp-search { width: auto; height: auto; border: none; overflow: visible; flex-shrink: 0; }
    .sp-search input[type="text"] { display: none; }
    .sp-search button {
        width: 33px; height: 33px; border: 1px solid #ddd; border-radius: 50%; background-size: 16px;
    }
    /* 열린 상태: 한 줄 전체로 입력창 노출 */
    .sp-search.open { width: 100%; height: 38px; border: 1px solid #ddd; border-radius: 24px; overflow: hidden; }
    .sp-search.open input[type="text"] { display: block; flex: 1; width: auto; min-width: 0; }
    .sp-search.open button { width: 44px; height: auto; border: none; border-left: 1px solid #eee; border-radius: 0; }
    /* 툴바: 정렬은 남는 공간 차지, 검색 펼치면 아랫줄로 */
    .sp-toolbar .sp-sorts { flex: 1; }
    .sp-toolbar .sp-search { margin-left: 0; }
    .sp-toolbar .sp-search.open { order: 3; }
}

/* 콘텐츠 */
.talk-content { flex: 1; min-width: 0; max-width: 780px; margin: 0 auto; padding:0 10px; }
/* 제목 줄 숨김 (글쓰기 버튼은 정렬바 우측으로 이동) */
/* 제목 줄 숨김 (정렬/검색/글쓰기는 공용 .sp-toolbar 사용) */
.talk-header { display: none; }

/* 게시글 리스트 (Reddit 스타일) */
.talk-list { display: flex; flex-direction: column; gap: 0; }
.talk-item {
    display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid #f0f0f0;
    text-decoration: none; color: inherit; transition: background .1s;
}
.talk-item:hover { background: #fafcff; }

/* 좋아요 강조 */
.main-talk-vote { width: 50px; flex-shrink: 0; text-align: center; padding-top: 4px; }
.main-talk-vote::before { content: "♥"; font-size: 16px; color: red; line-height: 1; display: block; }
.main-talk-vote-count { font-size: 18px; font-weight: 900; color: red; line-height: 1.2; }
.main-talk-vote-label { font-size: 12px; color: var(--gm-text-muted); margin-top: 2px; }

/* 페이지네이션 */
.pagination { font-size: 18px !important; }
.pagination .page-link { font-size: 18px !important; }

/* 좋아요 카운트 (좌측) */
.talk-vote { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 8px; line-height: 1; }
.talk-vote-heart { font-size: 18px !important; color: var(--gm-text-muted); line-height: 1; }
.talk-vote-count { font-size: 16px; font-weight: 400; color: var(--gm-text-muted); line-height: 1; }
.talk-vote-label { font-size: 12px; color: var(--gm-text-muted); margin-top: 2px; }
.talk-vote-like { display: flex; flex-direction: row; align-items: center; gap: 4px; }
.talk-vote-comment { display: flex; flex-direction: row; align-items: center; gap: 4px; font-size: 16px; color: var(--gm-text-muted); }

/* 메인 콘텐츠 */
.talk-item-body { flex: 1; min-width: 0; }
.talk-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.talk-location-badge {

/* ── 여행전기 출발 D-day 뱃지 (목록/상세 공용) ── */
/* 카페에서 가져온 과거 댓글 표시 (우리 회원 댓글과 구분) */
.ov-cafe-tag {
    display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 700;
    background: #eef1f3; color: var(--gm-text-sub);
}

.pt-dday {
    display: inline-block; margin-left: 4px; padding: 2px 9px; border-radius: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .2px;
    background: color-mix(in srgb, var(--gm-primary) 12%, #fff);
    color: var(--gm-primary-dark);
}
.pt-dday.is-today { background: color-mix(in srgb, var(--gm-red) 14%, #fff); color: var(--gm-red-dark); }
.pt-dday.is-past  { background: #f0f0f0; color: var(--gm-text-sub); }
    display: inline-block; font-size: 12px; font-weight: 700; color: var(--gm-primary-dark); background: #f0fbff; border-radius: 10px;
    padding: 1px 8px;
}
.talk-item-title {
    font-size: 17px; font-weight: 700; color: #222; margin: 4px 0 6px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.talk-item-desc {
    font-size: 14px; color: var(--gm-text-sub); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5;
}
.talk-item-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--gm-text-muted); }
.talk-author-group { display: inline-flex; align-items: center; gap: 6px; }
.talk-item-meta .author { display: flex; align-items: center; gap: 5px; font-weight: 600; color: #666; font-size: 14px; flex-wrap: wrap; }
.talk-author-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.talk-author-avatar-default { display: inline-flex; align-items: center; justify-content: center; }
.talk-item-thumb { width: 100px; height: 100px; border-radius: 10px; object-fit: cover; flex-shrink: 0; margin-left: auto; }

/* 빈 상태 */
.talk-empty { text-align: center; padding: 60px 0; color: var(--gm-text-muted); font-size: 15px; }


/* ──────────────────────────────────────────────────
   10. 여행후기 상세 (review/view)
   ────────────────────────────────────────────────── */
.review-view-wrap { max-width: 860px; margin: 30px auto; padding: 0 15px; }
.review-view-header { border-bottom: 2px solid #333; padding-bottom: 16px; margin-bottom: 20px; }
.review-view-header .branch-badge {
    display: inline-block; background: #2255cc; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 20px;
    margin-bottom: 10px;
}
.review-view-header h2 { font-size: 23px; font-weight: 700; margin-bottom: 10px; }
.review-view-meta { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--gm-text-sub); }
.review-meta-row1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.review-meta-row2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.review-meta-author { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #555; flex-wrap: wrap; }
.review-author-icon-fallback { display: inline-flex; align-items: center; justify-content: center; }
.review-view-stars { color: #f5a623; font-size: 17px; }
.review-view-body { padding: 20px 0; border-bottom: 1px solid #e0e0e0; font-size: 16px; line-height: 1.8; color: #333; }
.review-view-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
/* 전역 '* { margin:0 }' 리셋으로 문단 간격이 사라져 에디터와 달라지므로 복원 (에디터와 동일) */
.review-view-body p { margin: 0 0 1em; }
.review-view-body p:last-child { margin-bottom: 0; }
.review-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 20px 0; border-bottom: 1px solid #e0e0e0; }
.review-photos a { display: block; position: relative; padding-top: 75%; overflow: hidden; border-radius: 8px; background: #eee; }
.review-photos a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.review-photos a:hover img { transform: scale(1.05); }
.review-photos .main-badge {
    position: absolute; top: 6px; left: 6px; background: rgba(34,85,204,.85); color: #fff; font-size: 10px;
    padding: 1px 7px; border-radius: 20px;
}
.review-view-footer { padding: 20px 0; display: flex; justify-content: center; }
.review-view-footer .btn { font-size: 18px; }
/* 좋아요 */
.review-like-area { display: flex; justify-content: center; padding: 24px 0; border-bottom: 1px solid #e0e0e0; }
.btn-review-like {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 28px; border: 2px solid #e0e0e0;
    border-radius: 50px; background: #fff; font-size: 15px; font-weight: 700; color: var(--gm-text-sub); cursor: pointer;
    transition: all .2s; user-select: none;
}
.btn-review-like .heart { font-size: 18px; transition: transform .2s; }
.btn-review-like:hover  { border-color: var(--gm-point); color: var(--gm-point); }
.btn-review-like.liked  { border-color: var(--gm-point); color: var(--gm-point); background: #fff5f5; }
.btn-review-like.liked .heart { transform: scale(1.2); }
/* 댓글 */
.review-comments { padding: 24px 0; border-top: 1px solid #e0e0e0; }
.review-comments h4 { font-size: 20px; font-weight: 700; margin-bottom: 16px; color: #222; }
.review-comments .comment-avatar { background: #2255cc; color: #fff; }
.review-comments .comment-meta { gap: 10px; }
.review-comments .comment-text { line-height: 1.6; word-break: break-all; }
.review-comments .comment-delete {
    font-size: 12px; text-decoration: none; margin-left: auto; flex-shrink: 0; align-self: flex-start; padding: 0;
}
.review-comments .comment-delete:hover { color: #e33; }
.review-comments .comment-form { margin-top: 20px; background: #f9f9f9; border-radius: 8px; padding: 16px; border: none; }
.review-comments .comment-form textarea { border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; }
.review-comments .comment-form textarea:focus { outline: none; border-color: #2255cc; }
.review-comments .comment-form-footer { margin-top: 8px; padding: 0; background: transparent; border-top: none; }
.review-comments .comment-form-footer .nickname-label { font-size: 13px; color: var(--gm-text-sub); }
.review-comments .comment-submit { background: #2255cc; padding: 8px 20px; font-size: 14px; }
.review-comments .comment-submit:hover { background: #1a44aa; }
.review-comments .comment-login-msg {
    background: #f9f9f9; border-radius: 8px; font-size: 14px; color: var(--gm-text-sub); margin-top: 16px; padding: 16px;
}
.review-comments .comment-login-msg a { color: #2255cc; }
.review-comments .comment-empty { padding: 20px 0; font-size: 16px; }


/* ──────────────────────────────────────────────────
   11. 여행후기 목록 (review/list)
   ────────────────────────────────────────────────── */
.review-wrap { display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto 15px; padding: 0; }

/* 지점 탭 스타일은 공용 .cm-sidebar 규칙 참조 (위 통합 규칙) */
.review-filter { display: none; }

/* 갤러리 */
.review-content { flex: 1; min-width: 0; padding:0 10px; }
.review-title-row { display: flex; align-items: center; margin: 20px 0 30px; }
.review-title-row h2 { font-size: 22px; font-weight: 700; margin: 0; flex: 1; }
.pc-only { display: inline-block; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }

.review-card {
    border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .2s, box-shadow .2s; cursor: pointer; display: flex; flex-direction: column;
}
.review-card:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.review-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #eee; }
/* 사진 없는 글 후기 — 'No Image' 회색판 대신 본문 앞머리를 보여준다 */
.review-thumb.is-text {
    display: flex; align-items: center;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f1f7f9 0%, #e7f0f4 100%);
}
.review-thumb.is-text::before {
    content: 'C';
    position: absolute; left: 12px; top: 2px;
    font-size: 46px; line-height: 1; color: var(--gm-primary); opacity: .18;
}
.review-thumb-text {
    position: relative;
    font-size: 14px; line-height: 1.6; color: #33505c;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.review-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; transition: transform .3s; }
.review-card:hover .review-thumb img { transform: scale(1.05); }
/* 아래쪽은 별점·작성일이 쓰므로 사진 갯수는 위로 올린다 */
.review-photo-badge {
    position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px;
    padding: 2px 7px; border-radius: 20px;
}

/* 별점·작성일 줄 — 사진 아래에 얹는다.
   어떤 사진 위에서도 흰 글씨가 읽히도록 아래쪽만 어둡게 깔아 준다. */
.review-thumb-foot {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 12px 9px;
    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
}
/* 별점은 거의 다 5점이라 변별력이 없다 — 날짜보다 작게, 조용히 둔다 */
.review-thumb-foot .review-stars { color: #ffc94d; font-size: 11px; letter-spacing: .5px; line-height: 1; opacity: .9; }
.review-thumb-foot .review-card-date { color: rgba(255,255,255,.92); font-size: 12px; line-height: 1; }
/* 발췌 카드는 배경이 밝다 — 어두운 그라데이션 대신 글자만 진하게 */
.review-thumb.is-text .review-thumb-foot { background: none; }
.review-thumb.is-text .review-thumb-foot .review-stars { color: #e0a72e; }
.review-thumb.is-text .review-thumb-foot .review-card-date { color: #5b6b7a; }
.review-branch-badge {
    position: absolute; top: 10px; left: 10px; background: rgba(34,85,204,.85); color: #fff; font-size: 12px;
    padding: 3px 10px; border-radius: 20px;
}
.review-info { padding: 10px 12px 12px; }
.review-info .title {
    font-size: 18px; font-weight: 600; color: #222; margin: 4px 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3;
}
.review-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; color: var(--gm-text-sub); width: 100%; }
.review-meta-author-row { display: flex; align-items: center; margin-bottom: 4px; width: 100%; }
.review-stars-row { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; width: 100%; }
.review-card-stats { display: flex; align-items: center; gap: 15px; width: 100%; }
.review-card-stat-like { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #94969b; }
.review-card-stat-comment { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #94969b; }
.review-card-hit { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #94969b; }
.review-card-author { display: flex; align-items: center; gap: 10px; }
.review-card-author-name { font-size: 14px; color: #666; font-weight: 600; line-height: 1; }
/* 지점소식·블로그 카드는 별점이 없어 작성일만 얹는다 */
.review-thumb > .review-card-date {
    position: absolute; bottom: 9px; left: 12px;
    color: rgba(255,255,255,.92); font-size: 12px; line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.review-meta-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.review-meta-left { display: flex; gap: 6px; align-items: center; }
.review-meta-right { display: flex; gap: 4px; align-items: center; }
.review-stars { color: #f5a623; font-size: 16px; }
.review-empty { grid-column: 1 / -1; text-align: center; padding: 60px 0; color: var(--gm-text-muted); font-size: 15px; }
.review-hit { color: var(--gm-text-muted); font-size: 12px; }
.review-like { color: var(--gm-point); font-size: 14px; margin-left: auto; }


/* ──────────────────────────────────────────────────
   12. 커뮤니티 홈 (community)
   ────────────────────────────────────────────────── */
/* ─── 커뮤니티 전체 ─── */
.cm-wrap { max-width: 1200px; margin: 0 auto; padding: 24px 15px 60px; }

/* ─── 상단 영역: 메인 배너 + BEST 사이드바 ─── */
.cm-hero { display: flex; gap: 24px; margin-bottom: 28px; }
.cm-hero-left { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-hero-card { position: relative; display: block; border-radius: 10px; overflow: hidden; height: 262px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.08); text-decoration: none; color: inherit; }
.cm-hero-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-hero-card .cm-hero-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 16px;
    background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff;
}
.cm-hero-card .cm-hero-title { font-size: 15px; font-weight: 800; line-height: 1.3; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cm-hero-card .cm-hero-author { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .9; }
.cm-hero-card .cm-hero-author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.cm-hero-badge { display: inline-block; background: rgba(32,178,214,.85); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }
.cm-best-mark { position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, #f5a623, #e8900c); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 4px; letter-spacing: 1px; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* BEST 여행토크 사이드바 */
.cm-best { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; }
.cm-best h3 { font-size: 16px; font-weight: 900; color: #222; margin-bottom: 8px; flex-shrink: 0; }
.cm-best-item { display: flex; gap: 10px; padding: 5px 0 8px; border-bottom: 1px solid #f0f0f0; text-decoration: none; color: inherit; }
.cm-best-item:hover { background: #fafafa; }
.cm-best-item .cm-best-thumb { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.cm-best-item .cm-best-info { flex: 1; min-width: 0; }
.cm-best-tag { display: inline-block; font-size: 14px; font-weight: 700; color: var(--gm-primary-dark); margin-bottom: 2px; }
.cm-best-title {
    font-size: 16px; font-weight: 600; color: #333; line-height: 1.3; padding: 2px 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.cm-best-meta { display: flex; gap: 10px; margin-top: 2px; font-size: 12px; color: var(--gm-text-muted); }
.cm-best-meta span { display: flex; align-items: center; gap: 3px; }

/* ─── 이벤트 배너 ─── */
.cm-event-banner { margin-top: 44px; margin-bottom: 48px; border-radius: 16px; overflow: hidden; }
.cm-event-banner a { display: block; text-decoration: none; color: #fff; }
.cm-event-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 36px;
    background: linear-gradient(135deg, #062c38 0%, #0a4a5c 45%, #0e6a84 100%);
    position: relative; overflow: hidden;
}
.cm-event-inner::before {
    content: ''; position: absolute; top: -60px; right: -40px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(45,212,191,.16) 0%, transparent 70%);
}
.cm-event-inner::after {
    content: ''; position: absolute; bottom: -70px; left: 26%;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(226,77,36,.14) 0%, transparent 70%);
}
.cm-event-text { display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.cm-event-label {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 20px;
    display: inline-block; width: fit-content;
}
.cm-event-title { font-size: 22px; font-weight: 800; }
.cm-event-sub { font-size: 13px; opacity: .75; }
.cm-event-icon { z-index: 1; flex-shrink: 0; margin-left: 20px; }
@media (max-width: 1000px) {
    .cm-event-inner { padding: 20px 24px; }
    .cm-event-title { font-size: 17px; }
    .cm-event-sub { font-size: 11px; }
    .cm-event-icon { display: none; }
}

/* ─── 주제별 섹션 ─── */
.cm-topic { margin-top: 40px; margin-bottom: 36px; }
.cm-topic-title { font-size: 22px; font-weight: 900; color: #222; margin-bottom: 6px; }
.cm-topic-desc { font-size: 14px; color: var(--gm-text-sub); margin-bottom: 14px; }
/* 제목 옆에 '더보기'가 붙는 섹션(최신 후기) — 제목 아래 여백은 제목 자체가 갖고 있어 여기선 정렬만 */
.cm-topic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cm-topic-head .cm-topic-title { margin-bottom: 0; }
.cm-topic-more { font-size: 13px; font-weight: 500; color: var(--gm-primary-dark); text-decoration: none; white-space: nowrap; }
.cm-topic-more:hover { text-decoration: underline; }
.cm-topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cm-wrap .cm-card {
    background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,.12);
    transition: transform .15s, box-shadow .15s; cursor: pointer; text-decoration: none; color: inherit; border: 1px solid rgba(0,0,0,.06);
    margin-bottom: 0; display: block; min-width: 0;
}
.cm-wrap .cm-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.cm-card-thumb { position: relative; overflow: hidden; }
.cm-card-img { width: 100%; height: 180px; object-fit: cover; display: block; }
.cm-wrap .cm-card-body { padding: 12px 14px 14px; background: transparent; border-bottom: none; overflow: hidden; min-width: 0; }
.cm-card-author { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cm-card-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #e8e8e8; }
.cm-card-name { font-size: 14px; font-weight: 700; color: #333; }
.cm-card-badge { position: absolute; top: 10px; left: 10px; font-size: 12px; font-weight: 700; background: var(--gm-brand); color: #fff; border-radius: 10px; padding: 2px 8px; }
.cm-card-title {
    font-size: 16px; font-weight: 700; color: #222; line-height: 1.4; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; width: 100%; min-width: 0;
}
.cm-card-desc { display: none; }
.cm-card-stats { display: flex; gap: 10px; margin-top: 6px; font-size: 14px; color: var(--gm-text-muted); }
.cm-card-stats span { display: flex; align-items: center; gap: 3px; }


/* ──────────────────────────────────────────────────
   13. 나의여행후기 (my/reviews)
   ────────────────────────────────────────────────── */
/* 제목줄 오른쪽에 공용 글쓰기 버튼(.sp-write) 배치 */
.mr-title { display: flex; align-items: center; font-size: 20px; font-weight: 800; color: #222; margin-bottom: 20px; }
.mr-title .sp-write { margin-left: auto; flex-shrink: 0; }

/* 요약 배너 */
.mr-summary { display: flex; gap: 12px; margin-bottom: 24px; }
.mr-summary-card { flex: 1; padding: 16px; background: #fff; border: 1px solid #d5d5d5; border-radius: 12px; text-align: center; }
.mr-summary-card.main-card { background: linear-gradient(135deg, #f0faff, #e8f7fe); border-color: #cce9f6; }
.mr-summary-label { font-size: 14px; color: var(--gm-text-sub); margin-bottom: 6px; }
.mr-summary-value { font-size: 22px; font-weight: 900; color: #222; }
.mr-summary-unit { font-size: 12px; font-weight: 500; color: var(--gm-text-muted); margin-left: 2px; }

/* 빈 상태 */
.mr-empty { text-align: center; padding: 80px 0; color: var(--gm-text-muted); }
.mr-empty-icon { font-size: 52px; margin-bottom: 14px; }
.mr-empty-link {
    display: inline-block; margin-top: 16px; padding: 10px 24px; background: var(--gm-brand); color: #fff; border-radius: 8px;
    font-size: 13px; font-weight: 700; text-decoration: none;
}
.mr-empty-link:hover { background: #29b5de; text-decoration: none; color: #fff; }
.mr-empty-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* 카드 그리드 */
.mr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }

.mr-card {
    border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #d5d5d5;
    box-shadow: 0 2px 8px rgba(0,0,0,.06); text-decoration: none; color: inherit;
    transition: transform .18s, box-shadow .18s; display: block;
}
.mr-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.11); text-decoration: none; color: inherit; }

/* 썸네일 */
.mr-thumb { position: relative; padding-top: 68%; overflow: hidden; background: #f0f0f0; }
.mr-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mr-card:hover .mr-thumb img { transform: scale(1.05); }
.mr-thumb-empty {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center;
    justify-content: center; font-size: 32px; color: #ccc; background: #f5f5f5;
}
.mr-branch-badge {
    position: absolute; top: 8px; left: 8px; background: rgba(34,85,204,.82); color: #fff; font-size: 11px;
    padding: 2px 8px; border-radius: 20px;
}
.mr-status-badge {
    position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px;
    padding: 2px 8px; border-radius: 20px;
}

/* 정보 */
.mr-info { padding: 10px 12px 14px; }
.mr-info-title {
    font-size: 14px; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.mr-stars { color: #f5a623; font-size: 13px; margin-bottom: 6px; }

/* ★ 핵심: 좋아요 / 댓글 수 강조 */
.mr-stats { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.mr-stat-like { font-size: 14px; font-weight: 800; color: var(--gm-point); }
.mr-stat-comment { font-size: 14px; font-weight: 800; color: var(--gm-primary-dark); }

.mr-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--gm-text-muted); }

/* 페이지네이션 — 공통 .my-paging */
.my-paging { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; padding: 14px 0; }
.my-pg-arrow {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid #e0e0e0; background: #fff; color: var(--gm-text-sub); text-decoration: none; transition: all .15s;
}
.my-pg-arrow:hover { border-color: var(--gm-brand); color: var(--gm-primary-dark); background: #f0faff; text-decoration: none; }
.my-pg-arrow.disabled { opacity: .3; pointer-events: none; }
.my-pg-nums { display: flex; align-items: center; gap: 2px; }
.my-pg-num {
    display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 10px;
    font-size: 13px; font-weight: 600; color: var(--gm-text-sub); text-decoration: none; transition: all .15s;
}
.my-pg-num:hover { background: #f0faff; color: var(--gm-primary-dark); text-decoration: none; }
.my-pg-num.active { background: var(--gm-brand); color: #fff; font-weight: 800; box-shadow: 0 2px 8px rgba(53,197,240,.3); }
.my-pg-info { font-size: 12px; color: var(--gm-text-muted); margin-left: 8px; }


/* ──────────────────────────────────────────────────
   14. 나의여행토크 (my/talks)
   ────────────────────────────────────────────────── */
.mt-title { font-size: 20px; font-weight: 800; color: #222; margin-bottom: 20px; }

/* 요약 배너 */
.mt-summary { display: flex; gap: 12px; margin-bottom: 24px; }
.mt-summary-card { flex: 1; padding: 16px; background: #fff; border: 1px solid #d5d5d5; border-radius: 12px; text-align: center; }
.mt-summary-card.main-card { background: linear-gradient(135deg, #f0faff, #e8f7fe); border-color: #cce9f6; }
.mt-summary-label { font-size: 12px; color: var(--gm-text-sub); margin-bottom: 6px; }
.mt-summary-value { font-size: 22px; font-weight: 900; color: #222; }
.mt-summary-unit { font-size: 12px; font-weight: 500; color: var(--gm-text-muted); margin-left: 2px; }

/* 빈 상태 */
.mt-empty { text-align: center; padding: 80px 0; color: var(--gm-text-muted); }
.mt-empty-icon { font-size: 52px; margin-bottom: 14px; }
.mt-empty-link {
    display: inline-block; margin-top: 16px; padding: 10px 24px; background: var(--gm-brand); color: #fff; border-radius: 8px;
    font-size: 13px; font-weight: 700; text-decoration: none;
}
.mt-empty-link:hover { background: #29b5de; text-decoration: none; color: #fff; }

/* 토크 리스트 */
.mt-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }

.mt-item {
    display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid #d5d5d5; border-radius: 12px;
    overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s;
}
.mt-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.09); transform: translateY(-2px); text-decoration: none; color: inherit; }

/* 좌측: 좋아요 박스 */
.mt-vote {
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px;
    padding: 16px 12px; background: #fef5f5; border-right: 1px solid #f5e0e0; flex-shrink: 0;
}
.mt-vote-count { font-size: 22px; font-weight: 900; color: var(--gm-point); line-height: 1; }
.mt-vote-label { font-size: 10px; color: var(--gm-point); margin-top: 4px; font-weight: 600; }

/* 중앙: 콘텐츠 */
.mt-item-body { flex: 1; padding: 14px 16px; min-width: 0; }
.mt-item-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.mt-branch-tag { font-size: 11px; color: var(--gm-primary-dark); font-weight: 700; background: #f0faff; padding: 1px 6px; border-radius: 4px; }
.mt-status-badge { font-size: 10px; color: #fff; background: rgba(0,0,0,.5); padding: 1px 6px; border-radius: 4px; }
.mt-item-title {
    font-size: 15px; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.mt-item-desc {
    font-size: 13px; color: #777; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px;
}
.mt-item-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--gm-text-muted); }
.mt-meta-comment { font-weight: 800; color: var(--gm-primary-dark); }
.mt-meta-view { color: var(--gm-text-muted); }
.mt-meta-date { color: var(--gm-text-muted); }

/* 우측: 썸네일 */
.mt-item-thumb { width: 100px; flex-shrink: 0; overflow: hidden; }
.mt-item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mt-item:hover .mt-item-thumb img { transform: scale(1.05); }




/* ══════════════════════════════════════════════════
   16. 출석체크 (attendance)
   ══════════════════════════════════════════════════ */

/* ── 이벤트 배너 ── */
.att-banner { max-width: 780px; margin: 0 auto; padding: 0 px; }
.att-banner img { display: block; width: 100%; height: auto; object-fit: cover; }

/* ── 전체 래퍼 ── */
.att-wrap { max-width: 780px; margin: 0 auto; padding: 32px 24px 60px; }

/* ── 헤더 ── */
.att-header { text-align: center; margin-bottom: 28px; }
.att-header h2 { display: none; }
.att-header p { font-size: 18px; color: var(--gm-text-sub); margin: 0; }
.att-header p strong { color: var(--gm-primary-dark); font-weight: 800; font-size: 20px;}

/* ── 통계 카드 ── */
.att-stats { display: flex; gap: 10px; margin-bottom: 24px; }
.att-stat-card { flex: 1; text-align: center; background: #f8fafb; border: 1px solid #eef2f5; border-radius: 14px; padding: 22px 12px; }
.att-stat-card.att-stat-point { background: linear-gradient(135deg, #e8f7fe, #f0faff); border-color: #d0ecf8; }
.att-stat-num { display: block; font-size: 24px; font-weight: 900; color: #222; line-height: 1.2; }
.att-stat-point .att-stat-num { color: var(--gm-primary-dark); }
.att-stat-label { display: block; font-size: 14px; color: var(--gm-text-sub); margin-top: 6px; font-weight: 600; }

/* ── 달력 ── */
.att-calendar {
    background: #fff; border: 1px solid #eef2f5; border-radius: 16px; padding: 28px 24px; margin-bottom: 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

/* 월 네비 */
.att-cal-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 16px; }
.att-cal-arrow {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    font-size: 22px; color: var(--gm-text-sub); text-decoration: none; transition: all .15s; background: #f5f7f9;
}
.att-cal-arrow:hover { background: var(--gm-brand); color: #fff; text-decoration: none; }
.att-cal-title { font-size: 22px; font-weight: 800; color: #222; min-width: 140px; text-align: center; }

/* 요일 헤더 + 날짜 그리드 공통 */
.att-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.att-cal-weekdays { margin-bottom: 8px; }
.att-cal-weekdays span { text-align: center; font-size: 14px; font-weight: 700; color: var(--gm-text-muted); padding: 6px 0; }
.att-cal-sun { color: var(--gm-point) !important; }
.att-cal-sat { color: #4a7edd !important; }

/* 날짜 칸 */
.att-day {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 76px; border-radius: 12px; background: #fafbfc; transition: background .15s;
}
.att-day-empty { background: transparent; }
.att-day-num { font-size: 16px; font-weight: 600; color: #555; }
.att-day-future { opacity: .4; }
.att-day-future .att-day-num { color: #ccc; }

/* 오늘 */
.att-day-today { background: #fff; border: 2px solid var(--gm-brand); }
.att-day-today .att-day-num { color: var(--gm-primary-dark); font-weight: 800; }

/* 출석 완료 */
.att-day-checked { background: transparent; border: none; }
.att-day-checked .att-day-num { color: #555; font-weight: 600; }
.att-day-stamp-img {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px;
    object-fit: contain; pointer-events: none; z-index: 2;
}

/* 출석 버튼 */
.att-check-btn {
    display: inline-block; padding: 4px 14px; font-size: 13px; font-weight: 800; color: #fff; background: var(--gm-brand);
    border: none; border-radius: 10px; cursor: pointer; transition: all .15s; margin-top: 2px;
    animation: att-pulse 1.5s infinite;
}
.att-check-btn:hover { background: #29b5de; transform: scale(1.05); }
@keyframes att-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(53,197,240,.4); }
    50% { box-shadow: 0 0 0 6px rgba(53,197,240,0); }
}

/* ── 안내사항 ── */
.att-info { background: #f8fafb; border: 1px solid #eef2f5; border-radius: 12px; padding: 18px 20px; }
.att-info-title { font-size: 14px; font-weight: 800; color: #555; margin-bottom: 10px; }
.att-info ul { list-style: none; margin: 0; padding: 0; }
.att-info li { position: relative; font-size: 14px; color: var(--gm-text-sub); padding-left: 14px; margin-bottom: 6px; line-height: 1.6; }
.att-info li::before { content: "•"; position: absolute; left: 0; color: #ccc; }
.att-info li strong { color: var(--gm-primary-dark); font-weight: 700; }

/* ── 축하 팝업 ── */
.att-popup-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999; display: flex; align-items: center;
    justify-content: center;
}
.att-popup {
    background: #fff; border-radius: 20px; padding: 36px 32px 28px; text-align: center; max-width: 300px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.15); animation: att-popIn .3s ease-out;
}
@keyframes att-popIn {
    from { opacity: 0; transform: scale(.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.att-popup-icon { font-size: 48px; margin-bottom: 12px; }
.att-popup-title { font-size: 20px; font-weight: 900; color: #222; margin-bottom: 8px; }
.att-popup-msg { font-size: 15px; color: #666; margin-bottom: 24px; }
.att-popup-msg strong { color: var(--gm-primary-dark); font-weight: 800; }
.att-popup-btn {
    display: inline-block; padding: 10px 40px; font-size: 15px; font-weight: 700; color: #fff; background: var(--gm-brand);
    border: none; border-radius: 12px; cursor: pointer; transition: background .15s;
}
.att-popup-btn:hover { background: #29b5de; }


/* ──────────────────────────────────────────────────
   베스트리뷰 공개 페이지 (/best/review)
   ────────────────────────────────────────────────── */

/* 배너 */
.best-banner { max-width: 1200px; margin: 0 auto; padding: 0; }
.best-banner img { width: 100%; display: block; }

/* 월 네비게이션 */
.best-month-nav {
    max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 20px;
    padding: 32px 15px 24px;
}
.best-month-title { font-size: 24px; font-weight: 800; color: #222; margin: 0; white-space: nowrap; }
.best-nav-btn {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid #ddd; color: #333; background: #fff; text-decoration: none; transition: all .2s; cursor: pointer;
    flex-shrink: 0;
}
.best-nav-btn:hover { background: #222; color: #fff; border-color: #222; }
.best-nav-btn.disabled { color: #ccc; border-color: #eee; cursor: default; pointer-events: none; }

/* 갤러리 래퍼 */
.best-review-wrap { max-width: 1200px; margin: 0 auto; padding: 0 15px 60px; overflow: hidden; }
.best-review-wrap .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 작성자 표시 */
.review-author { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--gm-text-sub); }
.review-author-name { font-weight: 600; color: #555; }
.review-product { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gm-text-muted); font-size: 11px; }



/* 페이지네이션 — 공통 .my-paging 사용 */




/* ══════════════════════════════════════════════════
   공통 반응형 (Common Responsive)
   ══════════════════════════════════════════════════ */


/* ====================================
   반응형: 1000px 이하 (모바일 공통)
   ==================================== */
@media (max-width: 1000px) {

    /* --- 공통 --- */
    .container {padding:0 12px;}
    .contents_basic { margin: 20px auto; width:100%; min-height: 300px;}
    .grid {grid-template-columns:repeat(2,1fr);gap:12px;}
    .main-banner img {object-fit:cover;}
    .card-title {font-size:16px;}
    .event-list {grid-template-columns:repeat(2,1fr);}
    .footer {grid-template-columns:repeat(2,1fr);}
    /* 좌우만 없앤다. padding 을 통째로 0 으로 두면 다른 섹션과 맞춘 위아래 여백까지 날아간다 */
    #container { width: 100%; padding-left: 0; padding-right: 0; }
    .footer { width: 100%; padding: 30px 20px; }
    .estimation-list { width: 100%; }

    /* --- 13. 커뮤니티 홈 태블릿 --- */
    .cm-topic-grid { grid-template-columns: repeat(2, 1fr); }
    .talk-content { width: 100%;}
    .talk-header { }

        /* --- 날씨/환율 태블릿 세로 배치 --- */
    .info-row { flex-direction: column; margin: 0 auto; padding: 12px 16px; }
    .info-banner { flex: none; width: 100%; }
    .info-cards { flex: none; width: 100%; flex-direction: row; }
    .info-card:last-child { margin-left: 10px; margin-top: 0; }
    .branch-cat-filter { padding-left: 16px; padding-right: 16px; }

    /* --- 헤더: 1000px 이하에서도 PC와 동일하게 유지 --- */

    /* --- 배너: 태블릿~모바일 (peek 제거, 전체폭). aspect-ratio 는 표시 이미지에 맞춤 --- */
    /* 769~1000px: 아직 PC 이미지(1200x430)가 노출되는 구간 → PC 비율 유지 */
    .main-banner-wrap { padding: 0; }
    .main-banner { height: auto; border-radius: 0; }
    .main-banner .swiper-slide { width: 100vw; aspect-ratio: 1200 / 430; border-radius: 0; opacity: 1; transform: scale(1); }
    .main-banner .swiper-slide picture { display: block; width: 100%; height: 100%; }
    .main-banner .swiper-slide img { height: 100%; object-fit: cover; }
    .main-bn-prev, .main-bn-next { width: 30px; height: 30px; font-size: 18px; }
    .main-bn-counter { font-size: 13px; padding: 0 10px; height: 30px; }
    /* --- Destinations 헤더 모바일 --- */
    .reveal { padding: 50px 10px 0;}
    .main-theme-head { margin-bottom: 8px; padding: 0 5px; }

    /* --- 탭: 모바일 전용 스타일 --- */
    .tab-location { padding: 0; }
    .tab-location li { padding: 8px 12px; font-size: 16px; }

    /* --- 지점 카드: 모바일 Swiper 터치 스와이프 --- */
    .branch-list { padding:8px 5px; overflow: hidden; }
    .branch-list .swiper-wrapper { width: auto; }
    .branch-list .swiper-slide { width: 160px; height: 155px; border-radius: 10px; overflow: hidden; }
    .branch-list .swiper-slide:last-child { margin-right: 0 !important; }
    .branch-list .thumb img { height: 155px; object-fit: cover; }
    .branch-list .title { font-size: 15px; font-weight: 700; }
    .branch-list .country { font-size: 11px; height: auto; }

    /* --- 견적현황 섹션 --- */
    .estimation-section { padding: 20px 0 0; background: #fff; }
    .estimation-inner { flex-direction: column-reverse; gap: 0; padding: 0; }
    .estimation-table-wrap { width: 100%; padding: 16px 12px; box-shadow: none; border-radius: 0; border-top: 1px solid #eee; }
    .estimation-table th:nth-child(2),
    .estimation-table td:nth-child(2) { display: none; }
    .estimation-table th { font-size: 13px; padding: 8px 6px; }
    .estimation-table td { font-size: 13px; padding: 8px 6px; }
    .estimation-cta { flex: none; width: 100%; padding: 24px 12px; background: #f0f4f8; box-sizing: border-box; }
    .estimation-cta .cta-sub { font-size: 13px; }
    .estimation-cta .cta-title { font-size: 20px; margin-bottom: 16px; }
    .cta-select { font-size: 14px; }
    .cta-btns { gap: 8px; }
    .btn-kakao, .btn-estimate { font-size: 14px; padding: 13px 0; }

    /* --- 이벤트 / 공지사항 --- */
    .notice-area { flex-direction: column; margin: 0; padding: 12px; gap: 12px; max-width: 100%; }
    .notice-area .box { width: 100%; border-radius: 10px; padding: 16px; }
    .notice-area .box h3,
    .notice-area .box .title { font-size: 16px; }
    .notice-area ul li { font-size: 13px; }

    /* --- 푸터 --- */
    footer { padding: 0;  }
    .footer { flex-direction: column; width: 100%; padding: 30px 16px 30px; gap: 0; }
    .footer .support { padding: 0 0 16px; border-right: none; border-bottom: 1px solid #E4E4E4; }
    .footer .nav { width: 100%; border-right: none; border-bottom: 1px solid #E4E4E4; padding: 14px 0; }
    .footer .nav .list { padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
    .footer .nav .list li { padding-bottom: 8px; width: 50%; font-size: 12px; }
    .footer .corp { padding: 14px 0 0; font-size: 12px; }
    .footer .corp .cont { line-height: 1.8em; }
    .footer .corp .banner { padding: 12px 0; }
    .footer .corp .banner img { width: 72px; }

    /* --- 게시판 --- */
    .board_container { flex-direction: column; width: 100%; padding: 0 12px 40px; min-height: auto; }
    .board_container .board_nav { width: 100%; margin-bottom: 0; }
    .board_container .board_nav h2 { display: none; }
    .board_nav .list {
        display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        width: 100%; padding: 8px 0; gap: 0; border-bottom: 2px solid #eee;
    }
    .board_nav .list::-webkit-scrollbar { display: none; }
    .board_nav .list li { flex-shrink: 0; border-bottom: none; }
    .board_nav .list li > a { padding: 8px 16px; font-size: 14px; white-space: nowrap; border-radius: 20px; color: #666; }
    .board_nav .list li > a:hover { background: #f0f7ff; color: var(--gm-primary-dark); }
    .board_nav .list li a.active { background: var(--gm-brand); color: #fff; font-weight: 700; }

    .board_container .contents { width: 100%; }
    .board_container .board_top { flex-direction: column; gap: 10px; padding: 16px 0 10px; }
    .board_container .board_top h3 { font-size: 17px; }
    .board_container .board_top .search { width: 100%; }
    .board_container .board_top .search form { width: 100%; }
    .board_container .board_top .search .input-search { width: 100%; font-size: 13px; }

    /* 지점 필터: 가로 스크롤 */
    .branch_filter {
        display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        gap: 6px; padding-bottom: 4px;
    }
    .branch_filter::-webkit-scrollbar { display: none; }
    .branch_filter a { flex-shrink: 0; white-space: nowrap; font-size: 12px; padding: 5px 12px !important; }

    /* 테이블형 게시판: 카드 리스트 */
    .board_container .table_list { border-top: 2px solid #333; }
    .board_container .table_list tr:first-child { display: none; }
    .board_container .table_list tr {
        display: flex; flex-wrap: wrap; align-items: center; padding: 12px 4px; border-bottom: 1px solid #f0f0f0;
    }
    .board_container .table_list td { border-bottom: none; padding: 0; text-align: left; }
    /* 제목: 항상 첫째 줄 전체 폭 */
    .board_container .table_list td:first-child {
        width: 100%; order: 1; font-size: 14px; font-weight: 600; line-height: 1.5; padding-bottom: 6px;
    }
    .board_container .table_list td:first-child a { color: #333; }
    /* 마지막 셀 = 날짜: 오른쪽 정렬 */
    .board_container .table_list td:last-child { order: 10; font-size: 11px; color: var(--gm-text-muted); margin-left: auto; }
    /* 중간 셀들: 작은 메타 텍스트 */
    .board_container .table_list td:not(:first-child):not(:last-child) { order: 2; font-size: 12px; color: var(--gm-text-sub); margin-right: 10px; }
    .board_container .table_list td:not(:first-child):not(:last-child) a { color: var(--gm-primary-dark); font-size: 12px; }

    /* 페이지네이션 */
    .pagination { display: flex; justify-content: center; flex-wrap: nowrap; gap: 30px; overflow: visible; }
    .pagination .page-item .page-link { font-size: 11px; padding: 5px 7px; }

    /* news 검색바 */
    .news-search-bar { width: 100%; }
    .news-search-bar form { width: 100%; }
    .news-search-bar input { width: 100% !important; flex: 1; font-size: 13px; }

    /* 게시판 상세보기 */
    .board_title { padding: 20px 0 10px !important; font-size: 16px !important; }
    .board_view { padding: 16px 0; font-size: 14px; line-height: 1.8; word-break: break-word; }
    .board_view img { max-width: 100% !important; height: auto !important; }
    .board_answer { padding: 16px !important; }
    .btn_area { padding: 16px 0; }
    .btn_area .btn { font-size: 16px; padding: 11px 20px; }

    /* --- 1. 상품 상세 --- */
    .product_image { width: 100% !important; height: auto; }
    .product_image img { height: 320px; }
    .view_container {
        width: 100% !important; min-width: unset !important; flex-direction: column; padding: 0 15px;
        box-sizing: border-box;
    }
    .view_container .detail { width: 100%; }
    .view_container .detail img { max-width: 100%; }
    .view_container .price_area { width: 100%; padding-left: 0; margin-top: 24px; }
    .view_container .people { position: static; }
    .view_container .tab { position: sticky; top: 56px; z-index: 10; }
    .view_container .tab ul {
        display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap;
    }
    .view_container .tab ul::-webkit-scrollbar { display: none; }
    .view_container .tab li { display: block; flex-shrink: 0; width: auto; padding: 12px 16px; font-size: 14px; }
    .view_container .point .list { flex-direction: column; gap: 6px; }
    .view_container .point .list li { width: 100%; }
    .view_container .blog .list { flex-direction: row; flex-wrap: wrap; gap: 4%; }
    .view_container .blog .list li { width: 48%; }
    .view_container .blog .list .thumb img { height: 180px; }
    .view_container .schedule .box { height: auto; min-height: 60px; }
    .view_container .schedule .day { width: 60px; font-size: 13px; }
    .view_container .schedule .tour_name { font-size: 15px; }

    /* --- 5. 결제 --- */
    .co-grid { grid-template-columns: 1fr; }
    .co-wrap { padding: 0 12px; margin: 24px auto; }
    .co-wrap > h2 { font-size: 20px; }
    .co-panel { position: static; }
    .co-section-head { padding: 12px 14px; font-size: 14px; }
    .co-section-body { padding: 14px; }
    .tour-card { flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .tour-drag-handle { position: absolute; top: 14px; right: 8px; width: auto; font-size: 20px; }
    .tour-thumb, .tour-thumb-none { width: 100%; height: 140px; }
    .tour-schedule-row { width: 100%; }
    .schedule-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .schedule-date, .schedule-flight { width: 100%; box-sizing: border-box; }
    .hotel-grade-list { gap: 8px; }
    .hotel-grade-item { padding: 8px 12px; font-size: 13px; }
    .mr-grid { grid-template-columns: repeat(2, 1fr); }

    /* --- 여행토크·여행후기 탭 태블릿: 2줄 줄바꿈 --- */
    .cm-sidebar ul { flex-wrap: wrap !important; overflow-x: visible; }
    .cm-sidebar ul li { flex-shrink: 0; padding: 2px 0; }
    .cm-sidebar ul li a { padding: 5px 7px 0; font-size: 14px; }

    /* --- 상품 그리드 (1000px 이하 1컬럼) --- */
    .products { flex-direction: column; gap: 0; padding: 0 0 60px; max-width: 100% !important; }
    .product_item { display: block; width: 100% !important; margin-right: 0; margin-top: 0; border-bottom: 1px solid #f0f0f0; padding: 16px; }
    .product_item .thumb { display: block !important; width: 100% !important; height: 220px; }
    .product_item .thumb img { height: 220px !important; border-radius: 8px; }
    .product_item .contents { display: block !important; padding-left: 0 !important; margin-top: 10px; position: static !important; }
    .product_item .contents .name { font-size: 18px; }
    .product_item .contents .intro { font-size: 14px; margin-top: 4px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .product_item .contents .price { position: static !important; margin-top: 8px; text-align: left; }
    .product_item .contents .price .tit { font-size: 18px; }
    .product_item .contents .price .number { font-size: 18px; }
    .product-tags { margin-top: 4px; }
    .product-tag { font-size: 14px; padding: 1px 8px; }
}
@media (min-width: 700px) {
    .view_container .point .list { flex-direction: row !important; flex-wrap: wrap !important; gap: 6px; }
    .view_container .point .list li { width: calc(50% - 3px) !important; }
}
/* ====================================
   반응형: 991px 이하 (헤더 공통)
   ==================================== */
@media (max-width: 1000px) {
    #nav .container { justify-content: space-between; align-items: center; flex-wrap: nowrap; }
    #nav .top-right { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; }
    #nav .navbar-collapse { display: none !important; }
    #nav .navbar-right { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: nowrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
    #nav .navbar-right > li { display: flex; align-items: center; }
    #nav .navbar-right .nav-link { padding: 0; display: flex; align-items: center; }
    #nav .navbar-right .hd-user-btn { padding: 3px; border: none; background: none; gap: 0; }
    #nav .navbar-right .hd-user-btn::after { display: none; }
    #nav .navbar-right .hd-user-name { display: none; }
    #nav .navbar-right .hd-dropdown { right: 0; left: auto; transform: none; }
    #nav .navbar-toggler { display: none !important; }
}
@media (max-width: 530px) {
    .review-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .review-thumb.is-text { padding: 12px 13px; }
    .review-thumb.is-text::before { font-size: 34px; left: 7px; }
    .review-thumb-text { font-size: 12px; line-height: 1.5; -webkit-line-clamp: 4; }
    /* 2단 카드: 제목 작게 + 2줄까지 노출 */
    .review-info .title {
        font-size: 14px; white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        line-height: 1.3;
    }
    /* 지점 뱃지: sp-sorts 칩 정도로 */
    .review-branch-badge { font-size: 11px; padding: 2px 8px; top: 7px; left: 7px; }
    /* 별점 숨김 + 방문일 작게 오른쪽 정렬 */
    .review-stars { display: none; }
    /* 모바일도 별점을 사진 위에 그대로 둔다 — 카드가 작아 아래 줄을 또 쓸 여유가 없다 */
    .review-thumb-foot { padding: 18px 9px 7px; }
    .review-thumb-foot .review-stars { display: inline; font-size: 10px; letter-spacing: 0; }
    .review-thumb-foot .review-card-date { font-size: 10.5px; }
    /* 카드 내부 여백 축소 */
    .review-info { padding: 7px 8px 8px; }
    /* 작성자 줄: 제목보다 덜 부각되게 (아바타·이름 축소) */
    .review-card-author { gap: 6px; }
    .review-card-author img, .review-card-author svg { width: 18px !important; height: 18px !important; }
    .review-card-author-name { font-size: 12px; font-weight: 500; color: var(--gm-text-sub); }
}
/* ====================================
   반응형: 640px 이하
   ==================================== */
@media (max-width: 640px) {
    .pagination { gap: 14px !important; }
    .pagination li a, .pagination li span,
    .pagination li.page-num a, .pagination li.page-num span,
    .pagination li.prev a, .pagination li.next a,
    .pagination li.first a, .pagination li.last a { font-size: 14px; }
    /* --- 여행토크·여행후기 탭 모바일: 가로 스크롤 --- */
    .cm-sidebar ul { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; user-select: none; }
    .cm-sidebar ul li { flex-shrink: 0; }

    /* --- 헤더 2단 배열 --- */
    #nav .container { display: flex; flex-wrap: wrap; padding: 5px 12px 0; align-items: center; height: auto; }

    /* 1단: 로고 + 아이콘 */
    #nav .top-left { display: flex; align-items: center; flex-shrink: 0; width: auto; }
    #nav .top-left .logo { margin: 0; }
    #nav .top-left .logo img { width: 150px !important; }
    #nav .top-left .top-nav { display: none; }
    #nav .top-right { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; }
    #nav form.d-flex { display: none !important; }
    #nav .navbar-collapse { display: none !important; }
    #nav .navbar-right { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: nowrap; gap: 6px; list-style: none; margin: 0; padding: 0; position: relative; }
    #nav .navbar-right > li { display: flex; align-items: center; }
    #nav .navbar-right .nav-link { padding: 0; display: flex; align-items: center; }
    #nav .navbar-right .ico-cart { width: 17px; height: 23px; background-size: contain; margin-left: 2px; }
    #nav .navbar-right .cart-num { font-size: 10px; }
    #nav .navbar-right .hd-user-btn { padding: 3px; border: none; background: none; gap: 0; }
    #nav .navbar-right .hd-user-btn::after { display: none; }
    #nav .navbar-right .hd-user-avatar { width: 28px; height: 28px; font-size: 12px; }
    #nav .navbar-right .hd-user-name { display: none; }
    #nav .navbar-right .hd-login-btn { font-size: 12px; padding: 4px 12px !important; }
    #nav .navbar-right .hd-dropdown { right: 0; left: auto; transform: none; position: absolute; top: 100%; }
    #nav .navbar-toggler { display: none !important; }

    /* 2단: 네비게이션 메뉴 */
    #nav .mobile-nav { display: flex; width: 100%; align-items: center; gap: 16px; padding: 6px 0; margin-top: 5px; border-top: 1px solid #f0f0f0; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
    #nav .mobile-nav::-webkit-scrollbar { display: none; }
    #nav .mobile-nav a { font-size: 15px; font-weight: 500; color: #333; white-space: nowrap; text-decoration: none; padding: 0; }
    #nav .mobile-nav .btn-branch { font-size: 15px; font-weight: 500; color: #333; white-space: nowrap; margin-left: 0; padding-right: 16px; background: url('../images/main/arrow-down.png') 100% 50% no-repeat; background-size: 11px auto; border: none; }
    #nav .mobile-nav .menu-estimate { margin-left: auto; background: var(--gm-estimate); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; text-decoration: none; }

    .grid {grid-template-columns:1fr;}
    .event-list {grid-template-columns:1fr;}
    .footer {grid-template-columns:1fr;}
    .box-head h3 {font-size:16px;}
    .more-btn {font-size:13px;}

    /* --- 지점 메인 --- */
    #branch-all { top: 85px; }
    #branch-all .list {
        margin: 0 auto; width: 100%;
        max-height: calc(100vh - 85px); overflow-y: auto;
        padding: 2px 16px 12px;
        background: #fff;
        border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
        box-shadow: 0 14px 26px rgba(0,0,0,.14);
    }
    /* 모바일: 국가 라벨(전체폭) + 도시 2열 타일 그리드 */
    #branch-all .list .d-flex {
        display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 7px; padding: 10px 0; border-bottom: 1px solid #f0f2f5;
    }
    #branch-all .list .d-flex:last-child { border-bottom: none; }
    #branch-all .list .country {
        grid-column: 1 / -1; display: block; width: auto; margin: 0; padding: 0;
        font-size: 13px; font-weight: 700; letter-spacing: .3px; color: #4a5560;
    }
    #branch-all .list a {
        position: static; display: flex; align-items: center; justify-content: flex-start; gap: 6px;
        margin: 0; padding: 11px 12px; line-height: 1; text-align: left;
        border: 0; border-radius: 8px;
        font-size: 14px; font-weight: 500; color: #333;
        background: #fbf2ef;
        background: color-mix(in srgb, var(--gm-red) 6%, #fff);
    }
    #branch-all .list a::before {
        content: ""; width: 12px; height: 13px; flex-shrink: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23e24d24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center/contain no-repeat;
    }
    #branch-all .list a:not(:last-child)::after { content: none; }

    /* --- 관심지점 별표 --- */
    .btn-branch-fav { margin-left: 6px; }
    .fav-toast { bottom: 70px; font-size: 13px; padding: 11px 20px; }

    /* --- 지점 상단 히어로 (모바일: A안 — 세로 중앙 + 좌측 스크림 + 위계) --- */
    .branch-main { position: relative; display: flex; align-items: center; min-height: 250px; }
    .branch-main::before { content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,0) 85%); }
    .branch-top { position: relative; z-index: 1; width: 100% !important; flex-direction: column; justify-content: center; padding: 22px 18px; }
    .branch-top .title { width: 100% !important; max-width: 84%; padding: 0 !important; }
    /* 아이브로우(브레드크럼) */
    .branch-top .title > div:first-child { font-size: 11px; letter-spacing: 1px; color: rgba(255,255,255,.82); margin-bottom: 7px; }
    .branch-top .title h2 { font-size: 24px; font-weight: 500; line-height: 1.2; margin: 0 0 9px; }
    .branch-top .title .cont { font-size: 13px; line-height: 1.55; margin-top: 0; color: rgba(255,255,255,.9); }
    .branch-top .thumb { display: none; }

    /* --- 상품 그리드 --- */
    /* 모바일: 상품 2열 카드 (이미지 위 / 텍스트 아래) */
    .products { flex-direction: row; flex-wrap: wrap; gap: 12px; padding: 10px 14px 60px; max-width: 100% !important; }
    .product_item {
        display: block; /* table → block */ width: calc(50% - 6px) !important; margin-top: 0;
        border-bottom: none; padding: 0;
    }
    .product_item .thumb { display: block !important;   /* table-cell → block */ width: 100% !important; height: 140px; }
    .product_item .thumb img { height: 140px !important; border-radius: 8px; }

    .product_item .contents {
        display: block !important; /* table-cell → block */ padding-left: 0 !important; margin-top: 8px;
        position: static !important;
    }
    .product_item .contents .name { font-size: 14px; line-height: 1.3; }
    .product_item .contents .intro { font-size: 12px; margin-top: 3px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .product_item .contents .price { position: static !important; margin-top: 6px; text-align: left; }
    .product_item .contents .price .tit { font-size: 13px; }
    .product_item .contents .price .number { font-size: 13px; }
    .product-tags { margin-top: 4px; }
    .product-tag { font-size: 11px; padding: 1px 6px; }

    /* --- 알림/소식 카드 (sub_news) — 한 줄 전체 차지 --- */
    .products .sub_news { width: 100% !important; flex-basis: 100%; margin: 0; border-radius: 0 !important; border-left: none; border-right: none; }
    .products .sub_news .title { font-size: 16px; }
    .products .sub_news .list_thumb { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
    .products .sub_news .list_thumb::-webkit-scrollbar { display: none; }
    .products .sub_news .list_thumb li { flex-shrink: 0; width: 130px; padding: 0 !important; }
    .products .sub_news .list_thumb .thumb { height: 110px !important; }
    .products .sub_news .list_thumb .thumb img { width: 130px; height: 110px; object-fit: cover; }
    .products .sub_news .list_thumb .tit { font-size: 11px; padding: 2px 4px; }

    /* --- 0. 사이드 네비 (아이콘 위·라벨 아래 4열 그리드 타일) --- */
    .my-layout { flex-direction: column; }
    .my-layout .my-side { width: 100%; position: static; }
    .my-side-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; border-radius: 12px; }
    .my-side-group-label { display: none; }
    .my-side-link {
        flex-direction: column; gap: 5px; justify-content: center; align-items: center; text-align: center;
        padding: 12px 4px; font-size: 11px; line-height: 1.25; white-space: normal;
        border: none; border-radius: 8px; min-height: 66px;
    }
    .my-side-link.active { background: var(--gm-brand); color: #fff; font-weight: 700; border: none; box-shadow: 0 3px 8px rgba(32,178,214,.35); }
    .my-side-icon { width: auto; }
    .my-side-icon svg { width: 22px; height: 22px; }

    /* --- 2. 마이페이지 --- */
    /* 프로필 카드: 세로 스택(높이 커짐) 대신 가로 한 줄 컴팩트 배치 */
    .mp-profile-card { align-items: center; text-align: left; padding: 14px 16px; gap: 12px; }
    .mp-avatar { width: 52px; height: 52px; font-size: 22px; border-width: 2px; }
    .mp-profile-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
    .mp-name { font-size: 16px; margin-bottom: 1px; }
    .mp-email { font-size: 11px; margin-bottom: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mp-profile-point { align-items: flex-end; padding: 6px 12px; gap: 1px; }
    .mp-pp-label { font-size: 10px; }
    .mp-pp-val { font-size: 15px; }
    .mp-stats { gap: 8px; }
    .mp-stat-num { font-size: 20px; }
    .mp-stat-label { font-size: 10px; }
    .mp-section-head { padding: 12px 16px; font-size: 13px; }
    .mp-section-body { padding: 16px; }
    .mp-badge-grid { gap: 8px; }
    .mp-badge-item { padding: 10px 4px 8px; }
    .mp-badge-icon { font-size: 24px; }
    .mp-save-btn { width: 100%; }
    .my-layout .my-main { width: 100%; }
    .my-layout { flex-direction: column; }
    .my-layout .my-side { width: 100%; position: static; }
    /* (사이드 네비 그리드 스타일은 위 '--- 0. 사이드 네비 ---' 블록에서 일괄 정의) */

    /* 모바일: 로그아웃/회원탈퇴를 페이지 최하단으로 배치 */
    .my-layout { align-items: stretch; gap: 0; }
    .my-layout .my-side { display: contents; }
    .my-side-nav      { order: 2; }
    .my-layout .my-main { order: 3; }
    .my-side-logout   { order: 4; margin-top: 24px; }
    .my-side-withdraw { order: 5; }

    /* --- 3. 장바구니 --- */
    .cart-wrap { padding: 0 12px; margin: 24px auto; }
    .cart-wrap h2 { font-size: 20px; margin-bottom: 20px; }
    .guest-banner { flex-direction: column; text-align: center; padding: 12px 14px; font-size: 13px; }
    .location-header { flex-direction: column; gap: 4px; padding: 12px 14px; }
    .location-note { font-size: 11px; }
    .cart-item { flex-direction: column; padding: 14px; gap: 12px; }
    .cart-thumb { width: 100%; height: 160px; }
    .cart-thumb-none { width: 100%; height: 120px; }
    .cart-name { font-size: 15px; }
    .cart-persons { gap: 6px 14px; }
    .cart-remove { align-self: flex-end; margin-top: -40px; }
    .cart-total-bar { padding: 16px 14px; }

    /* --- 4. 나의 여행 --- */
    .or-main-title { font-size: 18px; }
    .or-card-head { flex-direction: column; align-items: flex-start; padding: 12px 14px; }
    .or-head-right { width: 100%; justify-content: space-between; }
    .or-card-body { padding: 14px; }
    .or-item { flex-direction: column; gap: 8px; }
    .or-item-price { text-align: left; display: flex; gap: 8px; align-items: center; }
    .or-card-foot { flex-direction: column; align-items: flex-start; padding: 12px 14px; gap: 10px; }
    .or-foot-right { width: 100%; display: flex; }
    .or-foot-right .or-btn { flex: 1; text-align: center; }
    .or-bank-inline .row { flex-direction: column; gap: 2px; }
    .or-bank-inline .lbl { min-width: unset; }
    .or-extra-row { flex-direction: column; gap: 2px; }
    .or-extra-lbl { min-width: unset; }

    /* --- 5. 결제 보완 --- */
    .person-grid { grid-template-columns: 1fr 1fr; }
    .info-grid { grid-template-columns: 1fr; }

    /* --- 6. 포인트 내역 --- */
    .pt-title { font-size: 18px; }
    .pt-summary { flex-direction: column; gap: 10px; }
    .pt-summary-card { min-width: unset; padding: 14px 16px; }
    .pt-summary-value { font-size: 18px; }
    .pt-log-header { padding: 12px 14px; }
    .pt-log-item { padding: 12px 14px; gap: 10px; }
    .pt-log-icon { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
    .pt-log-reason { font-size: 12px; }
    .pt-log-pts { font-size: 14px; }
    .pt-log-balance { font-size: 10px; }

    /* --- 7. 내가 쓴 댓글 --- */
    .cm-title { font-size: 18px; }
    .cm-card-source { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
    .cm-source-title { white-space: normal; min-width: 0; }
    .cm-card-body { padding: 12px 14px; }
    .cm-body-text { font-size: 13px; }

    /* --- 7-1. 리뷰 글쓰기 --- */
    .rw-wrap { padding: 0 12px; margin: 20px auto; }
    .rw-wrap h2 { font-size: 20px; }
    .rw-section { padding: 20px 0; }
    .rw-row { flex-direction: column; gap: 0; }
    .rw-col-3 { width: 100%; }
    .rw-star { font-size: 28px; }
    .rw-form-footer { flex-direction: column; }
    .rw-submit-btn { width: 100%; padding: 14px 0; }
    .rw-cancel-btn { width: 100%; text-align: center; padding: 12px 0; }

    /* --- 8. 여행토크 작성 --- */
    .talk-write-wrap { padding: 0 12px; margin: 20px auto; }
    .talk-write-wrap h2 { font-size: 18px; margin-bottom: 18px; }
    .talk-textarea { min-height: 200px; font-size: 14px; }
    .talk-photo-thumb { width: 80px; height: 80px; }
    .talk-form-footer { flex-direction: column; }
    .talk-submit-btn { width: 100%; padding: 14px 0; }
    .talk-cancel-btn { width: 100%; text-align: center; padding: 12px 0; }

    /* --- 9. 여행토크 상세 --- */
    .talk-view-wrap { padding: 0 12px; margin: 20px auto; }
    .talk-view-header h2 { font-size: 20px; }
    .talk-photos { gap: 8px; }
    .talk-photos a { max-width: 100%; }
    .talk-view-meta { flex-direction: row; gap: 10px; align-items: center; flex-wrap: wrap; }
    .talk-view-actions { margin-left: 0; }
    .talk-view-body { font-size: 16px; }
    .talk-photos a:hover img { transform: none; }

    /* --- 10. 여행후기 상세 --- */
    .review-view-wrap { padding: 0 12px; margin: 20px auto; }
    .review-view-header h2 { font-size: 19px; }
    .review-view-meta { flex-direction: column; gap: 8px; align-items: flex-start; }
    .review-photos { grid-template-columns: repeat(2, 1fr); }
    .review-view-body { font-size: 15px; }
    .review-photos a:hover img { transform: none; }
    .btn-review-like { padding: 8px 20px; font-size: 14px; }
    .review-title-row { margin:5px 0 15px;}

    /* 여행토크/후기 정렬·검색은 공용 .sp-toolbar 사용 (위 통합 규칙) */
    /* 지점 탭 스타일은 공용 .cm-sidebar 규칙 참조 (위 통합 규칙) */

    /* --- 13. 커뮤니티 홈 --- */
    .cm-hero { flex-direction: column; }
    .cm-hero-left { grid-template-columns: 1fr; }
    .cm-hero-card { height: 200px; }
    .cm-best { width: 100%; }
    .cm-topic-grid { grid-template-columns: repeat(2, 1fr); }
    .cm-tabs { padding: 5px 0px 0;}
    .cm-tabs .cm-tab-right { display: none; }
    .cm-tabs .cm-tab-title { font-size: 16px; }
    /* 지점 탭: 모바일에서 줄바꿈 없이 한 줄 가로 스크롤 */
    .branch-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin:0; }
    .branch-tabs::-webkit-scrollbar { display: none; }
    .branch-tabs a { white-space: nowrap; flex-shrink: 0; font-size:14px; padding:8px 12px 6px; }
    .cm-event-banner { }
    .cm-event-banner .cm-event-title { font-size: 16px; }

    /* --- 14. 나의여행후기 --- */
    .mr-summary { flex-direction: column; }
    .mr-grid { grid-template-columns: 1fr; }
    .mr-stats { font-size: 13px; }

    /* --- 15. 나의여행토크 --- */
    .mt-summary { flex-direction: column; }
    .mt-vote { min-width: 56px; padding: 12px 8px; }
    .mt-vote-count { font-size: 18px; }
    .mt-item-thumb { width: 70px; }
    .mt-item-title { font-size: 14px; }
    .mt-item-desc { -webkit-line-clamp: 1; }

    /* --- 17. 베스트리뷰 --- */
    .best-banner { padding: 0; }
    .best-month-nav { gap: 12px; padding: 20px 12px 16px; }
    .best-month-title { font-size: 18px; }
    .best-nav-btn { width: 34px; height: 34px; }
    .best-nav-btn svg { width: 16px; height: 16px; }
    .best-review-wrap { padding: 0 12px 40px; }
    .best-review-wrap .review-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ====================================
   반응형: 500px 이하 - 날씨/환율 세로 배치
   ==================================== */
@media (max-width: 1000px) {
    .review-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    /* 날씨/환율: 세로 쌓기 대신 가로 2단 + 컴팩트하게 (공간 절약) */
    .info-cards { flex-direction: row; gap: 8px; }
    .info-card { gap: 8px; padding: 8px 10px; }
    .info-card:last-child { margin-left: 0; margin-top: 0; }
    .info-card .label { font-size: 11px; letter-spacing: 0; text-transform: none; margin-bottom: 0; }
    .weather-icon { font-size: 22px; width: 40px; height: 40px; border-radius: 12px; }
    .exchange-icon { font-size: 18px; width: 40px; height: 40px; border-radius: 12px; }
    .weather-info .temp-current { font-size: 16px; }
    .weather-info .temp-current span { font-size: 11px; }
    .exchange-info .ex-rate { font-size: 16px; }
    .exchange-info .ex-rate span { font-size: 10px; }
    .weather-info .temp-range,
    .weather-info .weather-desc,
    .exchange-info .ex-date { font-size: 10px; margin-top: 1px; }

    /* 카테고리 필터 글씨/버튼 축소 */
    .cat-filter-btn { font-size: 11px; padding: 4px 9px 2px; }
    .branch-cat-filter { padding:  10px 5px 0; }
}

/* ====================================
   배너 비율은 '실제로 보이는 이미지'를 따라간다.
   <picture>의 모바일 소스 전환점이 768px 이므로 4:3(800x600) 비율도 768 이하에서만 적용.
   (예전엔 1000px 이하였는데, 769~1000 구간은 아직 PC 이미지(1200x430)라 4:3 박스에 세로로 잘렸음)
   모바일 이미지가 등록된 배너(.has-mobile)만 4:3 — 없으면 PC 이미지 그대로라 PC 비율 유지.
   ==================================== */
@media (max-width: 768px) {
    .main-banner .swiper-slide.has-mobile { aspect-ratio: 800 / 600; }
    .main-banner .swiper-slide img { height: 100%; object-fit: cover; }
}

/* ====================================
   반응형: 480px 이하 (소형 모바일) - 메인 공통
   ==================================== */
@media (max-width: 480px) {
    /* 메인 인덱스 */
    /* 배너: 모바일 이미지(800x600, 4:3) 기준 — 상위 768 규칙과 동일하게 유지 */
    .main-banner { height: auto; }
    .main-banner .swiper-slide { border-radius: 0; }
    .main-banner .swiper-slide.has-mobile { aspect-ratio: 800 / 600; }
    .branch-list .swiper-slide { height: 130px; }
    .branch-list .thumb img { height: 130px; }
    .estimation-cta .cta-title { font-size: 18px; }
    .main-banner .swiper-slide img { height: 100%; object-fit: cover; border-radius: 0; }
    /* 지점 메인 */
    .branch-top .thumb img { height: 160px !important; }
    /* 상품 2열 카드 (≤480px) — 썸네일 높이 축소 */
    .product_item .thumb { height: 130px; }
    .product_item .thumb img { height: 130px !important; }

    /* 게시판 */
    .board_nav .list li > a { font-size: 13px; padding: 7px 12px; }
    .board_container .board_top h3 { font-size: 15px; }
    .board_container .table_list td:nth-child(1) { font-size: 13px; }

    /* 1. 상품 상세 */
    .product_image img { height: 200px; }
    .view_container { padding: 0 12px; }
    .view_container .detail .tit h2 { font-size: 18px; }
    .view_container .detail .tit .intro { font-size: 14px; }
    .view_container h3 { font-size: 18px; }
    .view_container .tab li { padding: 10px 12px; font-size: 16px; }
    .pax-name { font-size: 14px; }
    .pax-counter .btn-minus,
    .pax-counter .btn-plus { width: 32px; height: 32px; font-size: 18px; }
    .view_container .blog .list .thumb img { height: 150px; }
    .view_container .schedule .tour_name { font-size: 14px; }
    .view_container .schedule .tour_name .summary { font-size: 13px; }

    /* 2. 마이페이지 */
    .mp-avatar { width: 50px; height: 50px; font-size: 22px; }
    .mp-name { font-size: 16px; }
    .mp-pp-val { font-size: 15px; }
    .mp-stat-num { font-size: 18px; }
    .mp-stat-box { padding: 12px 8px; }
    .mp-badge-grid { grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); }
    .mp-badge-name { font-size: 10px; }

    /* 3. 장바구니 */
    .cart-thumb { height: 140px; }
    .cp-btn { width: 32px; height: 32px; font-size: 16px; }
    .btn-checkout { font-size: 15px; padding: 13px 0; }
    .cart-total-row { font-size: 13px; }
    .cart-total-row strong { font-size: 15px; }

    /* 4. 나의 여행 */
    .or-order-no { font-size: 13px; }
    .or-item-name { font-size: 13px; }
    .or-item-meta { font-size: 11px; }
    .or-item-deposit { font-size: 13px; }
    .or-badge { padding: 3px 10px; font-size: 11px; }
    .or-btn { padding: 8px 14px; font-size: 12px; }

    /* 5. 결제 */
    .person-grid { grid-template-columns: 1fr; }
    .p-btn { width: 36px; height: 36px; font-size: 18px; }
    .tp-btn { width: 28px; height: 28px; }
    .airport-list, .airline-list { gap: 8px 16px; }
    .airport-list span, .airline-list span { font-size: 13px; }
    .pay-method-list { flex-direction: column; }
    .pay-method-btn { padding: 12px 0; }
    .price-total .t-amount { font-size: 18px; }
    .btn-pay { font-size: 16px; padding: 16px 0; }
    .date-row { grid-template-columns: 1fr; gap: 8px; }
    .date-sep { display: none; }
    .bank-info-box .bank-row { flex-direction: column; gap: 2px; }
    .bank-info-box .bank-label { min-width: unset; }

    /* 6. 포인트 내역 */
    .pt-summary-value { font-size: 16px; }
    .pt-log-item { gap: 8px; }
    .pt-log-reason { white-space: normal; }

    /* 7. 내가 쓴 댓글 */
    .cm-card-source { font-size: 11px; }
    .cm-source-badge { font-size: 10px; padding: 2px 6px; }

    /* 7-1. 리뷰 글쓰기 */
    .rw-section-header { gap: 10px; }
    .rw-section-num { width: 28px; height: 28px; font-size: 13px; }
    .rw-section-title { font-size: 15px; }
    .rw-star { font-size: 26px; }


    /* 8. 여행토크 작성 */
    .talk-photo-thumb { width: 70px; height: 70px; }
    .talk-photo-area { padding: 16px; }

    /* 9. 여행토크 상세 */
    .talk-view-header h2 { font-size: 20px; }
    .talk-view-body { font-size: 16px; }
    .btn-talk-like { padding: 8px 20px; font-size: 14px; }

    /* 10. 여행후기 상세 */
    .review-view-header h2 { font-size: 17px; }
    .review-view-body { font-size: 14px; }

    /* 11. 여행토크 목록 */
    .talk-item-thumb { width: 80px; height: 80px; }
    .talk-vote-heart { font-size: 18px; }
    .talk-vote-count { font-size: 18px; }
    .talk-vote-comment { font-size: 18px; }

    /* 12. 여행후기 목록 */
    .review-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* 13. 커뮤니티 홈 */
    .cm-topic-grid { grid-template-columns: 1fr; }

    /* 15. 나의여행토크 */
    .mt-item-thumb { display: none; }
    .mt-vote { min-width: 48px; }
    .mt-vote-count { font-size: 16px; }

    /* 16. 출석체크 */
    .att-banner { padding: 0px; }
    .att-banner img { border-radius: 0px; }
    .att-wrap { padding: 30px 12px 40px; }
    .att-header h2 { font-size: 22px; }
    .att-stats { gap: 6px; }
    .att-stat-card { padding: 12px 4px; border-radius: 10px; }
    .att-stat-num { font-size: 20px; }
    .att-stat-label { font-size: 11px; }
    .att-calendar { padding: 14px 10px; border-radius: 12px; }
    .att-cal-title { font-size: 18px; }
    .att-day { min-height: 44px; border-radius: 8px; }
    .att-day-num { font-size: 12px; }
    .att-day-stamp-img { width: 44px; height: 44px; }
    .att-check-btn { font-size: 10px; padding: 2px 8px; }
    .att-popup { padding: 28px 20px 22px; }
    .att-popup-icon { font-size: 40px; }
    .att-popup-title { font-size: 18px; }

    /* 17. 베스트리뷰 */
    .best-month-title { font-size: 16px; }
    .best-review-wrap .review-grid { grid-template-columns: 1fr; }
}

/* ── PC(>1000px): 지점 메인 배경을 탭·info-row까지 확장 (branch-hero) ── */
@media (min-width: 1001px) {
    .branch-hero {
        background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), var(--hero-bg) no-repeat center/cover;
    }
    /* 래퍼가 배경 담당 → branch-main 자체 배경 제거(이중 어두움 방지) */
    .branch-hero .branch-main { background: none !important; }
    /* 탭 메뉴: 글자(링크) 영역에만 어둡게 — 오른쪽 빈 공간엔 색 없음 */
    .branch-hero .branch-tabs { background: none; gap: 0; padding: 0; border-bottom: none; }
    .branch-hero .branch-tabs a { color: rgba(255,255,255,0.78); background: rgba(0,0,0,0.4); }
    .branch-hero .branch-tabs a:first-child { border-radius: 8px 0 0 0; }
    .branch-hero .branch-tabs a:last-child  { border-radius: 0 8px 0 0; }
    .branch-hero .branch-tabs a:hover { color: #fff; }
    .branch-hero .branch-tabs a.active { color: #fff; border-bottom-color: #fff; }
    /* 배경 안에서 카드가 떠 보이도록 하단 여백 */
    .branch-hero .info-row { padding-bottom: 22px; }
}

/* 메인 날씨 카드 → 날씨 페이지 링크 */
.info-card-link { text-decoration: none; color: inherit; cursor: pointer; position: relative; }
.info-card-link:hover { border-color: var(--gm-primary); }
/* 힌트는 카드 우상단에 고정 — 좁은 모바일에서도 카드를 벗어나지 않게 */
.info-card-link .wx-go { position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--gm-primary); font-weight: 600; white-space: nowrap; }

/* ====================================
   지점 날씨 페이지 (/shop/{tag}/weather)
   ==================================== */
.wx-wrap { max-width: 900px; margin: 0 auto; padding: 16px; }
.wx-wrap h3 { font-size: 1.2rem; font-weight: 700; margin: 8px 0 14px; }
.wx-wrap h4 { font-size: 1.05rem; font-weight: 700; margin: 24px 0 10px; }
.wx-today { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg,#5b9bd5,#3a78b5); color:#fff; border-radius: 14px; padding: 20px 22px; }
.wx-today .ic { font-size: 56px; line-height: 1; }
.wx-today .cur { font-size: 40px; font-weight: 800; line-height: 1; }
.wx-today .cur span { font-size: 18px; font-weight: 400; }
.wx-today .desc { font-size: 15px; opacity: .95; margin-top: 2px; }
.wx-today .meta { margin-left: auto; text-align: right; font-size: 13px; line-height: 1.6; opacity: .95; }
.wx-fc { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.wx-day { flex: 0 0 auto; width: 78px; text-align: center; background:#fff; border:1px solid #e5e5e5; border-radius: 12px; padding: 8px 5px; }
.wx-day.is-today { border-color:#3a78b5; box-shadow:0 0 0 2px rgba(58,120,181,.15); }
.wx-day .d { font-size: 11px; color: var(--gm-text-sub); }
.wx-day .ic { font-size: 22px; margin: 3px 0; }
.wx-day .desc { font-size: 11px; color:#666; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-day .hi { font-size: 13px; font-weight: 700; }
.wx-day .lo { color: var(--gm-text-sub); font-size: 11px; }
.wx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wx-table th, .wx-table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: center; white-space: nowrap; }
.wx-table th { background:#f7f7f7; color:#666; font-weight: 600; }
.wx-table td.l { text-align: left; }
.wx-empty { color: var(--gm-text-sub); text-align:center; padding: 30px 0; }

/* ── 여행 날씨 지수 ──────────────────────────────────
   숫자표만 있으면 검색으로 들어와도 바로 나간다.
   '그래서 여행하기 어떤가'를 먼저 읽히게 한다. */
.wx-lead { font-size: 15px; line-height: 1.65; color: #334155; margin: 0 0 16px; word-break: keep-all; }
.wx-index {
    display: flex; align-items: center; gap: 18px;
    border: 1px solid #e5e7eb; border-left: 5px solid #94a3b8;
    border-radius: 0 12px 12px 0; background: #fff;
    padding: 16px 20px; margin-bottom: 18px;
}
.wx-index.wx-good { border-left-color: #16a34a; }
.wx-index.wx-soso { border-left-color: #d97706; }
.wx-index.wx-bad  { border-left-color: #dc2626; }
.wx-index-score { flex: 0 0 auto; line-height: 1; }
.wx-index-score strong { font-size: 38px; font-weight: 800; color: #0f172a; }
.wx-index-score span { font-size: 14px; color: #64748b; margin-left: 2px; }
.wx-index-body { flex: 1; min-width: 0; }
.wx-index-label { font-size: 17px; font-weight: 700; color: #0f172a; }
.wx-index-tip { font-size: 14px; color: #475569; margin-top: 4px; line-height: 1.55; word-break: keep-all; }
.wx-index-good { flex: 0 0 auto; text-align: center; padding-left: 18px; border-left: 1px solid #eef2f6; }
.wx-index-good strong { font-size: 24px; font-weight: 800; color: #0f172a; }
.wx-index-good span { font-size: 13px; color: #64748b; }
.wx-index-good em { display: block; font-style: normal; font-size: 12px; color: #64748b; margin-top: 2px; }

/* 예보 카드마다 하루치 판정 */
.wx-day-idx { margin-top: 5px; font-size: 11px; font-weight: 500; border-radius: 999px; padding: 2px 0; }
.wx-day-idx.wx-good { background: #dcfce7; color: #166534; }
.wx-day-idx.wx-soso { background: #fef3c7; color: #92400e; }
.wx-day-idx.wx-bad  { background: #fee2e2; color: #991b1b; }

/* 월별 여행 적기 */
.wx-season-note { font-size: 13px; color: #64748b; margin: -4px 0 12px; }
.wx-month-scroll { overflow-x: auto; }
.wx-month { min-width: 520px; }
.wx-month td { text-align: center; }
.wx-month tr.is-now { background: #f0f9ff; }
.wx-month tr.is-now td { font-weight: 500; }
.wx-best {
    display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
    background: #dcfce7; color: #166534; font-size: 11px; font-weight: 500;
}
.wx-bar { display: inline-block; width: 110px; height: 8px; background: #eef2f6; border-radius: 999px; overflow: hidden; vertical-align: middle; }
.wx-bar i { display: block; height: 100%; border-radius: 999px; }
.wx-bar i.wx-good { background: #16a34a; }
.wx-bar i.wx-soso { background: #d97706; }
.wx-bar i.wx-bad  { background: #dc2626; }
.wx-bar-n { margin-left: 8px; font-size: 12px; color: #475569; }

/* 날씨만 보고 나가지 않도록 이어 주는 자리 */
.wx-faq { margin: 0; }
.wx-faq dt { margin-top: 14px; font-size: 15px; font-weight: 600; color: #1e293b; }
.wx-faq dt:first-child { margin-top: 0; }
.wx-faq dd { margin: 6px 0 0; padding-bottom: 14px; border-bottom: 1px solid #eef2f6; font-size: 14px; line-height: 1.7; color: #475569; }

/* ── 월별 날씨 페이지 (/shop/{tag}/weather/{월}) ── */
.wx-wrap a { color: var(--gm-primary-dark); }
.wx-months { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin: 0 0 16px; }
.wx-months a {
    flex: 0 0 auto; padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 999px;
    font-size: 13px; color: #475569; background: #fff; text-decoration: none; white-space: nowrap;
}
.wx-months a.active { background: var(--gm-primary-dark); border-color: var(--gm-primary-dark); color: #fff; }
.wx-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 10px; }
.wx-stats > div { border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 10px; text-align: center; background: #fff; }
.wx-stats span { display: block; font-size: 12px; color: #64748b; }
.wx-stats strong { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.2; }
.wx-stats small { font-size: 12px; font-weight: 500; color: #64748b; margin-left: 2px; }
.wx-stat-score.wx-good { border-color: #86efac; background: #f0fdf4; }
.wx-stat-score.wx-soso { border-color: #fcd34d; background: #fffbeb; }
.wx-stat-score.wx-bad  { border-color: #fca5a5; background: #fef2f2; }
/* 가이드 한마디 — 아이덴티티 색(로고 빨강)을 옅은 틴트와 왼쪽 선으로만 */
.wx-note {
    margin: 0 0 18px; padding: 14px 18px; border-left: 4px solid var(--gm-red);
    background: color-mix(in srgb, var(--gm-red) 6%, #fff); border-radius: 0 12px 12px 0;
}
.wx-note strong { display: block; font-size: 13px; color: var(--gm-red-dark); margin-bottom: 4px; }
.wx-note p { margin: 0; font-size: 15px; line-height: 1.7; color: #1e293b; word-break: keep-all; }
.wx-note cite { display: block; margin-top: 8px; font-size: 12px; font-style: normal; color: #64748b; }
.wx-observed { font-size: 14px; line-height: 1.75; color: #334155; margin: 0; word-break: keep-all; }
.wx-pack { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; color: #334155; }
.wx-rainplan { font-size: 14px; line-height: 1.8; color: #334155; padding: 14px 16px; background: #f8fafc; border-radius: 12px; word-break: keep-all; }
.wx-edit { margin-top: 28px; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 12px 16px; }
.wx-edit summary { cursor: pointer; font-size: 14px; color: #475569; }

/* ── 가이드 현지 리포트 (카드 목록 · 판정 칩 · 간편 작성 폼) ── */
.lr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 24px 0 10px; }
.wx-wrap .lr-head h4 { margin: 0; }
.lr-more, .lr-write { font-size: 13px; text-decoration: none; white-space: nowrap; }
.lr-write { padding: 6px 14px; border-radius: 999px; background: var(--gm-primary-dark); color: #fff !important; font-weight: 500; }
.lr-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* .lr-card 는 메인(/shop) 최신후기 카드도 쓰는 이름이라 반드시 .lr-list 안으로 한정 (전역이면 후기 카드가 가로배치로 깨진다) */
.lr-list .lr-card {
    display: flex; gap: 12px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 12px;
    background: #fff; text-decoration: none; color: inherit !important; min-width: 0;
}
.lr-thumb { flex: 0 0 96px; height: 96px; border-radius: 8px; overflow: hidden; background: #f1f5f9; }
.lr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lr-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
.lr-title { font-size: 15px; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-text {
    font-size: 13px; line-height: 1.5; color: #475569; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lr-by { margin-top: auto; font-size: 12px; color: #64748b; }
.lr-empty { font-size: 14px; color: #64748b; margin: 0; }
.lr-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 500; }
.lr-chip.wx-good { background: #dcfce7; color: #166534; }
.lr-chip.wx-soso { background: #fef3c7; color: #92400e; }
.lr-chip.wx-bad  { background: #fee2e2; color: #991b1b; }

.lr-form-wrap { max-width: 560px; margin: 0 auto; padding: 20px 16px 60px; }
.lr-form-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.lr-form-title span { font-size: 14px; font-weight: 500; color: #64748b; margin-left: 6px; }
.lr-form-desc { font-size: 14px; color: #64748b; line-height: 1.6; margin: 0 0 8px; }
.lr-form-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.lr-form-label { display: block; font-size: 14px; font-weight: 600; color: #334155; margin: 18px 0 8px; }
.lr-form-label small { font-weight: 400; color: #64748b; }
.lr-form-input { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 10px; padding: 12px 14px; font-size: 16px; line-height: 1.6; outline: none; }
.lr-form-input:focus { border-color: var(--gm-primary); }
.lr-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lr-status-item { position: relative; margin: 0; cursor: pointer; }
.lr-status-item input { position: absolute; opacity: 0; pointer-events: none; }
.lr-status-item span {
    display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 6px;
    border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
    font-size: 14px; font-weight: 500; color: #334155; text-align: center; word-break: keep-all; line-height: 1.35;
}
.lr-status-item.wx-good input:checked + span { background: #dcfce7; border-color: #16a34a; color: #166534; }
.lr-status-item.wx-soso input:checked + span { background: #fef3c7; border-color: #d97706; color: #92400e; }
.lr-status-item.wx-bad  input:checked + span { background: #fee2e2; border-color: #dc2626; color: #991b1b; }
.lr-status-item input:focus-visible + span { outline: 2px solid var(--gm-primary); outline-offset: 2px; }
.lr-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.lr-photo, .lr-photo-add { width: 84px; height: 84px; border-radius: 10px; }
.lr-photo { position: relative; overflow: hidden; border: 1px solid #e5e7eb; }
.lr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-photo-del {
    position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border: 0; border-radius: 50%;
    background: rgba(15, 23, 42, .7); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}
.lr-photo-add { border: 1px dashed #94a3b8; background: #f8fafc; color: #475569; font-size: 28px; font-weight: 400; cursor: pointer; }
.lr-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.lr-form-cancel { padding: 12px 20px; border-radius: 10px; background: #f1f5f9; color: #475569 !important; text-decoration: none; font-size: 15px; font-weight: 500; }
.lr-form-submit { flex: 1; padding: 12px 20px; border: 0; border-radius: 10px; background: var(--gm-primary-dark); color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; }
.lr-form-submit:disabled { opacity: .6; cursor: default; }
.wx-edit .lr-form-submit { flex: 0 0 auto; }

.wx-cta { margin-top: 34px; padding: 22px; background: #f8fafc; border-radius: 14px; text-align: center; }
.wx-cta p { margin: 0 0 14px; font-size: 15px; color: #334155; font-weight: 500; }
.wx-cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wx-cta-btns a {
    padding: 11px 22px; border-radius: 999px; font-size: 15px; font-weight: 500;
    border: 1px solid var(--gm-primary-dark); color: var(--gm-primary-dark);
    background: #fff; text-decoration: none;
}
.wx-cta-btns a.is-primary { background: var(--gm-primary-dark); color: #fff; }

@media (max-width:480px){
    .wx-today { gap: 12px; padding: 16px; }
    .wx-today .ic { font-size: 44px; }
    .wx-today .cur { font-size: 32px; }
    .wx-index { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
    .wx-index-good { width: 100%; padding-left: 0; border-left: 0; border-top: 1px solid #eef2f6; padding-top: 10px; text-align: left; }
    .wx-index-good em { display: inline; margin-left: 6px; }
    .wx-cta-btns a { width: 100%; }
    .wx-bar { width: 76px; }
    .wx-stats { grid-template-columns: repeat(2, 1fr); }
    .wx-stat-score { grid-column: 1 / -1; }
    .lr-list { grid-template-columns: 1fr; }
    .lr-thumb { flex-basis: 80px; height: 80px; }
}

/* ══════════════════════════════════════════════════
   공용 컴포넌트 — 버튼 · 알림박스 · 완료(결과) 페이지
   (페이지별 blade 인라인 <style> 중복 제거용. 여기 한 곳만 수정)
   ══════════════════════════════════════════════════ */

/* ── 공용 버튼 (풀폭 기준) ── */
.sp-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 14px; border: none; border-radius: 8px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    text-decoration: none; text-align: center; box-sizing: border-box;
    transition: background .2s, opacity .2s;
}
.sp-btn-primary { background: var(--gm-primary); color: #fff; }
.sp-btn-primary:hover { background: var(--gm-primary-dark); color: #fff; }
.sp-btn-outline { background: #fff; color: var(--gm-primary); border: 1.5px solid var(--gm-primary); }
.sp-btn-outline:hover { background: var(--gm-primary); color: #fff; }
.sp-btn-kakao { background: #FEE500; color: #191919; font-weight: 800; }
.sp-btn-kakao:hover { background: #f5dc00; color: #191919; }

/* ── 공용 알림박스 ── */
.sp-notice {
    border-radius: 10px; padding: 14px 18px;
    font-size: 13px; line-height: 1.6; text-align: left;
}
.sp-notice-warn    { background: #fff8e1; border: 1px solid #ffe082; color: #b57c00; }
.sp-notice-success { background: #f0fff4; border: 1px solid #b8e8c8; color: #2a7a4a; }

/* ── 공용: 가운데 정렬 풀높이 페이지 래퍼 (완료/인증 등) ── */
.sp-center-page {
    min-height: calc(100vh - 80px);
    display: flex; align-items: center; justify-content: center;
    background: #f8f9fa; padding: 40px 20px;
}

/* ── 공용 완료(결과) 페이지: 가운데 정렬 카드형 ── */
.sp-complete-box {
    background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    width: 100%; max-width: 520px; padding: 50px 40px; text-align: center;
}
.sp-complete-icon {
    width: 80px; height: 80px; background: #e8f9ee; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 24px; font-size: 40px;
}
.sp-complete-title { font-size: 24px; font-weight: 800; color: #222; margin-bottom: 10px; }
.sp-complete-sub { font-size: 14px; color: var(--gm-text-sub); line-height: 1.7; margin-bottom: 32px; }
.sp-complete-guide {
    background: linear-gradient(135deg, #fff9e6, #fffdf5);
    border: 1px solid #ffe082; border-radius: 12px;
    padding: 24px 20px; margin-bottom: 20px;
}
.sp-complete-guide-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 8px; }
.sp-complete-guide-desc { font-size: 13px; color: #777; line-height: 1.6; margin-bottom: 16px; }
.sp-complete-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.sp-complete-home {
    display: inline-block; margin-top: 16px; font-size: 13px; color: var(--gm-text-muted);
    text-decoration: none; border-bottom: 1px dashed #ccc;
}
.sp-complete-home:hover { color: #666; }
@media (max-width: 576px) {
    .sp-complete-box { padding: 36px 24px; }
    .sp-complete-title { font-size: 20px; }
}