/* =====================================================
   responsive.css — www 반응형 전환
   ===================================================== */

/* ── CSS 커스텀 프로퍼티(변수) ── */
:root {
    --color-primary:      #1a4ba8;
    --color-primary-dark: #123a8a;
    --color-accent:       #42a842;
    --color-cta:          #e87e28;
    --color-danger:       #e74c3c;
    --color-text:         #333;
    --color-muted:        #666;
    --color-border:       #e0e0e0;
    --color-divider:      #e5e5e5;
    --color-bg-light:     #f7f7f7;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-pill: 25px;
    --font-xs:   11px;
    --font-sm:   12px;
    --font-base: 13px;
    --font-md:   14px;
    --font-lg:   17px;
    --font-xl:   24px;
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  36px;
}

/* 기본 리셋 */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* body 가로 넘침 방지 */
body { overflow-x: hidden; }

/* 고정폭 table HTML 속성 override */
table[width] { width: 100% !important; }
table[width="980"],
table[width="979"] {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* 메인 컨텐츠 래퍼 */ 
#mainContent {
    max-width: 980px;
    width: 100%;
    margin: 16px auto 0;
    clear: both;
}

/* 메인 배너 */
#mainBannerWrap {
    width: 100% !important;
    max-width: 980px !important;
}
#mainBannerWrap img {
    width: 100% !important;
    height: auto !important;
}

/* 하단 배너 */
#bottomBannerWrap {
    width: 100% !important;
    max-width: 980px !important;
}

/* 네비 헤더 */
#tm-header { max-width: 980px; margin: 0 auto; }

/* ─── 모바일 (768px 이하) ──────────────────────────── */
@media (max-width: 768px) {

    /* ── 햄버거 버튼 표시 ── */
    #tm-nav-toggle {
        display: block !important;
    }

    /* ── 로고 + 햄버거 한 줄 flex 레이아웃 ── */
    #tm-header > div:last-child {
        margin-top: 6px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
    /* 로고 컨테이너 */
    #tm-header > div:last-child > div:first-child {
        width: auto !important;
        margin-top: 0 !important;
        height: auto !important;
        float: none !important;
        flex-shrink: 0;
    }
    /* 로고 이미지 — 햄버거 버튼(40px)과 비율 맞게 축소 */
    #tm-header > div:last-child > div:first-child img {
        max-height: 38px !important;
        width: auto !important;
    }

    /* ── 네비 기본 숨김 (JS 토글) ── */
    #tm-nav {
        display: none;
        flex-direction: column;
        height: auto;
        border-radius: 8px;
        width: 100%;
        float: none;
        margin-top: 6px;
        clear: both;
    }
    #tm-nav.open {
        display: flex !important;
    }
    #tm-nav a {
        height: 44px;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        flex: none;
        width: 100%;
        justify-content: center;
    }
    #tm-nav a:last-child { border-bottom: none; }
    #tm-nav .tm-div { display: none; }

    /* ── 유틸바 줄바꿈 허용 ── */
    .tm-util {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* ── 하단 배너 — 한 줄에 2개 ── */
    #bottomBannerWrap {
        justify-content: flex-start !important;
        padding: 5px !important;
    }
    #bottomBannerWrap > div {
        flex: 0 0 calc(50% - 10px) !important;
        margin: 5px !important;
        min-width: 0;
    }
    #bottomBannerWrap img {
        height: auto !important;
        width: 100% !important;
        display: block !important;
    }

    /* ── 기타 ── */
    .ellipsis { width: 100%; }
    .classMainNotice { font-size: 13px; }
    #mainBannerWrap button {
        font-size: 18px !important;
        padding: 6px 10px !important;
    }
}

/* === 로그인 페이지 === */
.login-box {
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 32px 36px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.login-title-text {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 6px;
    font-family: Arial, "맑은 고딕", sans-serif;
    letter-spacing: -0.5px;
}
.login-title-text em {
    color: #1a4ba8;
    font-style: normal;
}
.login-welcome {
    font-size: 13px;
    color: #666;
    margin: 0 0 24px;
    line-height: 1.6;
}
.login-fields { display: flex; flex-direction: column; gap: 10px; }
.login-field-row { display: flex; align-items: center; gap: 12px; }
.login-label {
    width: 58px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    flex-shrink: 0;
    text-align: right;
}
.login-input {
    flex: 1;
    max-width: 240px;
    height: 34px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 13px;
    box-sizing: border-box;
}
.login-input:focus {
    outline: none;
    border-color: #1a4ba8;
    box-shadow: 0 0 0 2px rgba(26,75,168,0.25);
}
.login-btn-row { display: flex; justify-content: center; margin-top: 4px;  }
.login-divider { border: none; border-top: 1px dashed #ccc; margin: 20px 0; }
.login-extra-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    font-size: 13px;
    color: #555;
}
.login-extra-row p { margin: 0; flex: 1; line-height: 1.5; }
@media (max-width: 640px) {
    .login-box { padding: 20px 16px; margin: 12px 0; }
    .login-field-row { flex-wrap: wrap; }
    .login-label { width: auto; text-align: left; }
    .login-input { max-width: 100%; }
    .login-extra-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* === view.php 버튼 === */
.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 16px;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
    cursor: pointer;
    white-space: nowrap;
    margin-left: 4px;
    vertical-align: middle;
}
.view-btn::after {
    content: "❯";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
    flex-shrink: 0;
}
.view-btn-blue   { background: #1a4ba8; color:white;}
.view-btn-orange { background: #e87e28; }
.view-btn-green  { background: #42a842; }
.view-btn-gray   { background: #f0f0f0; color: #555; border: 1px solid #ccc; }
.view-btn-gray::after { background: rgba(0,0,0,0.08); color: #555; }

/* === view.php 섹션 타이틀 (갈색 바) === */
.view-section-title {
    display: block;
    background: #1a4ba8;
    color: #ffffff;
    border: 2px solid #2e68c8;
    border-radius: 20px;
    padding: 7px 18px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
    margin-bottom: 10px;
}
.view-section-title::before {
    content: "• ";
    color: rgba(255,255,255,0.7);
}

/* === 서브페이지 텍스트 타이틀 === */
.sub-page-title {
    display: block;
    background: linear-gradient(to right, #123a8a, #1a4ba8);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
    padding: 14px 20px;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
    box-sizing: border-box;
    border-radius: 5px;
}
@media (max-width: 768px) {
    .sub-page-title { font-size: 15px; padding: 10px 14px; }
}

/* === 좌측 사이드바 제거 & 본문 확장 === */

/* 사이드바(258px) 숨김 */
#mainContent > tbody > tr > td[width="258"],
#mainContent > tr > td[width="258"] {
    display: none !important;
}

/* 4px 여백 셀 숨김 */
#mainContent > tbody > tr > td[width="4"],
#mainContent > tr > td[width="4"] {
    display: none !important;
    padding: 0 !important;
}

/* 본문 셀 full-width 확장 */
#mainContent > tbody > tr > td:not([width="258"]):not([width="4"]),
#mainContent > tr > td:not([width="258"]):not([width="4"]) {
    width: 100% !important;
}

/* ─── 소형 모바일 (480px 이하) ────────────────────── */
@media (max-width: 480px) {
    .tm-util { font-size: 10px; flex-wrap: nowrap; overflow-x: auto; gap: 0; }
    .tm-util a { padding: 0 3px; white-space: nowrap; }
    .tm-util .tm-sep { padding: 0 1px; color: #bbb; }
    .tm-util a[href*="main.php"] { font-size: 0; }
    .tm-util a[href*="main.php"]::before { content: "⌂"; font-size: 13px; }
}

/* === 폼 라벨/데이터 테이블 모바일 스태킹 ===
   reserve2/3, reserveview, find.php 공통 패턴:
   td[width="118"] (라벨) + td[width="477"] (데이터) */
@media (max-width: 768px) {
    td[width="118"] {
        display: block !important;
        width: 100% !important;
        padding: 6px 10px !important;
        font-weight: 600;
        box-sizing: border-box;
        border-right: none !important;
    }
    td[width="477"] {
        display: block !important;
        width: 100% !important;
        padding: 8px 10px 12px !important;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e5e5 !important;
    }
    td[width="477"] input[type="text"],
    td[width="477"] input[type="email"],
    td[width="477"] select,
    td[width="477"] textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
}
@media (max-width: 480px) {
    td[width="118"] { font-size: 12px !important; }
    td[width="477"] { font-size: 13px !important; }
}

/* === reserve1.php 인라인 스타일 오버라이드 ===
   .person_block/.product3_block 1200px 고정폭 해제 */
@media (max-width: 768px) {
    .person_block,
    .product3_block,
    .btn_block {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }
    .person_list .title,
    .person_list .cnt,
    .product3_list .title,
    .product3_list .cnt {
        float: none !important;
        width: 100% !important;
        padding: 6px 10px !important;
    }
    .person_list input {
        width: 100% !important;
        max-width: 200px;
    }
    .product3_list .cnt select {
        width: 100% !important;
        max-width: 200px;
    }
    .btn_block {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 16px 0 !important;
    }
}

/* === 상태 뱃지 (icon_a0/a1/a2.gif 대체) === */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
    white-space: nowrap;
    text-decoration: none;
}
.status-paid   { background: #2da560; color: #fff; }
.status-wait   { background: #e87e28; color: #fff; }
.status-cancel { background: #999;    color: #fff; }

/* === 마이페이지 탭 (bl_tep_* 이미지 대체) === */
.mypage-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #1a4ba8;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.mypage-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 700;
    font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
    color: #555;
    background: #e8e8e8;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    text-decoration: none;
    cursor: pointer;
    min-width: 80px;
}
.mypage-tab.active,
.mypage-tab:hover {
    background: #1a4ba8;
    color: #fff;
    border-color: #1a4ba8;
}
@media (max-width: 480px) {
    .mypage-tab { padding: 6px 14px; font-size: 12px; min-width: 70px; }
}

/* === 장바구니 === */
.cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    margin-left: 2px;
    vertical-align: super;
    line-height: 1;
}

.cart-added-msg {
    background: #e8f5e9;
    border: 1px solid #4caf50;
    border-radius: 6px;
    color: #2e7d32;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
}

.cart-item-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cart-item-info { flex: 1; }
.cart-item-name {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    margin-bottom: 4px;
    font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
}
.cart-item-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}
.cart-meta-sep { margin: 0 4px; color: #ccc; }
.cart-item-date {
    font-size: 13px;
    color: #555;
    margin-bottom: 4px;
}
.cart-item-qty {
    font-size: 12px;
    color: #666;
}
.cart-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-left: 16px;
    flex-shrink: 0;
}
.cart-item-price {
    font-size: 15px;
    font-weight: 700;
    color: #e87e28;
    white-space: nowrap;
}
.cart-del-btn {
    font-size: 12px;
    color: #999;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}
.cart-del-btn:hover { color: #e74c3c; border-color: #e74c3c; }

.cart-total-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    border-top: 2px solid #333;
    padding-top: 12px;
    margin-top: 4px;
}
.cart-total-label {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}
.cart-total-price {
    font-size: 20px;
    font-weight: 700;
    color: #e87e28;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: #888;
    font-size: 14px;
}
.cart-empty p { margin-bottom: 20px; }

/* reserve1.php 장바구니 버튼 */
.btn-cart {
    background-color: #42a842;
    color: #fff;
}

@media (max-width: 600px) {
    .cart-item-card { flex-direction: column; }
    .cart-item-right { flex-direction: row; align-items: center; margin-left: 0; margin-top: 10px; }
    .cart-total-price { font-size: 16px; }
}

/* === find.php 배너 (login_top/middle/bottom 이미지 대체) === */
.find-banner {
    background: linear-gradient(135deg, #123a8a 0%, #1a4ba8 100%);
    color: #fff;
    padding: 20px 24px;
    border-radius: 8px;
    margin-bottom: 16px;
}
.find-banner-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    font-family: "Noto Sans KR", "맑은 고딕", sans-serif;
}
.find-banner-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 640px) {
    .find-banner { padding: 14px 16px; }
    .find-banner-title { font-size: 15px; }
}

/* ===== 게시판 페이지네이션 모바일 ===== */
@media (max-width: 768px) {
    #paging_table {
        width: 100% !important;
        table-layout: fixed;
    }
    #paging_table td {
        font-size: 16px !important;
        padding: 10px 8px !important;
        min-width: 40px;
        text-align: center;
    }
    #paging_table td img {
        width: 22px !important;
        height: 22px !important;
        vertical-align: middle;
    }
}

/* === SNS 공유 버튼 === */
.sns-share-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 12px 0;
}
.sns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sns-btn:hover { opacity: 0.82; }
.sns-btn svg { display: block; }
.sns-btn-instagram { background: #e1306c; }
.sns-btn-facebook  { background: #1877f2; }
.sns-btn-x         { background: #000; }
.sns-btn-kakao     { background: #fee500; color: #3c1e1e; }
.sns-btn-naver     { background: #03c75a; }
.sns-copy-toast {
    display: none;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 9999;
    white-space: nowrap;
}
.sns-copy-toast.visible { display: block; }

/* SNS 아이콘 색상 — a 태그 전역 color 오버라이드 방지 */
.sns-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 0;
}
.sns-btn-kakao span { color: #3c1e1e; }

/* === 이전글/다음글 === */
.board-prevnext {
    border-top: 1px solid #e5e5e5;
    margin-top: 8px;
}
.board-prevnext-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 13px;
}
.board-prevnext-label {
    min-width: 42px;
    font-weight: 700;
    color: #333;
    flex-shrink: 0;
}
.board-prevnext-text { color: #555; flex: 1; }
.board-prevnext-text a { color: #333; text-decoration: none; }
.board-prevnext-text a:hover { color: #1a4ba8; text-decoration: underline; }

/* === 댓글 입력 === */
.board-comment-box {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 16px;
    background: #f6f6f6;
    margin: 8px 0;
}
.board-comment-title {
    font-size: 14px;
    font-weight: 700;
    color: #e74c3c;
    margin-bottom: 8px;
}
.board-comment-guide {
    font-size: 12px;
    font-weight: 400;
    color: #666;
}
.board-comment-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.board-comment-input {
    flex: 1;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 10px;
    font-size: 13px;
    box-sizing: border-box;
}
.board-comment-del {
    font-size: 11px;
    color: #999;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 2px 6px;
    white-space: nowrap;
}
.board-comment-del:hover { color: #e74c3c; border-color: #e74c3c; }
@media (max-width: 640px) {
    .board-comment-input-row { flex-wrap: wrap; }
    .board-comment-input { width: 100%; }
}

/* === reserve/view.php 버튼 행 — 한 줄 유지 === */
.view-btn-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}
.view-btn-row .view-btn { margin-left: 0; }
@media (max-width: 480px) {
    .view-btn-row .view-btn {
        padding: 6px 8px;
        font-size: 11px;
        gap: 2px;
    }
    .view-btn-row .view-btn::after {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }
}

/* === reserve/sub01.php 상품 그리드 — 모바일 1열 === */
@media (max-width: 768px) {
    .reserve-product-table td.imageBoardListTd {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .reserve-product-table img.imageBoardListImage {
        max-width: 100%;
        height: auto;
        width: auto !important;
    }
    /* type2 이미지(318×342 인라인 스타일) 반응형 처리 */
    .reserve-product-table td.imageBoardListTd > div[style] {
        width: 100% !important;
        height: auto !important;
        min-height: 120px;
    }
}

/* === 게시판 목록 행 터치 영역 — 모바일 최소 44px === */
@media (max-width: 768px) {
    td[height="25"] { height: auto !important; }
    #mainContent table tr td { padding-top: 8px; padding-bottom: 8px; }
}

/* === 인라인 폼 에러 메시지 === */
.field-error {
    color: #e74c3c;
    font-size: 11px;
    display: block;
    margin-top: 3px;
    line-height: 1.4;
}

/* === 결제 안내 강조 박스 (reserve3.php 무통장 안내) === */
.payment-notice {
    background: #fff9f0;
    border-left: 3px solid #e87e28;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 12px;
    color: #664;
    line-height: 1.7;
    border-radius: 0 4px 4px 0;
}
.payment-notice strong { color: #c0440a; display: block; margin-bottom: 4px; }

/* === 환불계좌 반응형 레이아웃 === */
.bank-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: flex-start;
}
.bank-field { display: flex; flex-direction: column; gap: 3px; }
.bank-field-label { font-size: 11px; color: #666; font-weight: 600; }
.bank-field input { min-width: 80px; }
.bank-field-note { font-size: 11px; color: #e87e28; margin-top: 4px; display: block; }
@media (max-width: 768px) {
    .bank-field { width: 100%; }
    .bank-field input { width: 100% !important; box-sizing: border-box; }
}

/* === view.php 상품 정보 불릿 (view_bb.gif 대체) === */
.view-info-bullet {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #1a4ba8;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* === view.php 섹션 구분선 (ex2.gif 대체) === */
.view-section-hr {
    border: none;
    border-top: 2px solid #c8d8f0;
    margin: 8px 0;
}

/* === view.php 기간 탭 (period_*.png 대체) === */
.view-period-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: #eef3fb;
    border-radius: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.view-period-tab {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #d0e0f5;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #b0c8ec;
}
.view-period-tab.active {
    background: #1a4ba8;
    color: #ffffff;
    border-color: #1a4ba8;
}
.view-period-tab:hover:not(.active) { background: #bcd4f0; }

/* ─── Board General List (list.php 공용) ──────────────── */
#searchform td {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
#searchform input[type=text] { flex: 1; min-width: 100px; }
#searchform .view-btn { padding-top: 4px; padding-bottom: 4px; font-size: 10px; }
#searchform .view-btn::after { display: none; }

@media (max-width: 768px) {
    .board-col-pad,
    .board-col-views { display: none !important; }

    .board-col-no { width: 32px !important; font-size: 12px !important; }
    .board-col-date { width: 72px !important; font-size: 12px !important; }
    .board-col-author {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .board-col-author { display: none !important; }
    .board-col-date { width: 60px !important; font-size: 11px !important; }
}

/* === 회원정보 폼 반응형 (write.php) === */
@media (max-width: 640px) {
    td[width="120"],
    td.inputTitle { display: block; width: 100% !important; text-align: left; padding: 8px 0 2px 0; }
    td.inputForm { display: block; width: 100% !important; }
    td.inputForm input.login-input { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
}

/* === 소개/체험 게시판 (listintro.php) === */
.introListItem {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    align-items: flex-start;
}
.introListItem:last-of-type { border-bottom: none; }
.introListImage {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    overflow: hidden;
    background: #eaeaea;
    border-radius: 6px;
}
.introListImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.introListText { flex: 1; }
.introListTitle { font-size: 15px; font-weight: bold; margin-bottom: 6px; }
.introListContent { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 6px; }
.introListDate { font-size: 11px; }

.view-product-layout { width: 100% !important; }
@media (max-width: 768px) {
    .view-product-layout > tbody > tr { display: flex; flex-direction: column; }
    .view-product-layout > tbody > tr > td[width="224"] { width: 100% !important; text-align: center; }
    .view-product-layout > tbody > tr > td[width="15"] { display: none; }
    .view-product-layout > tbody > tr > td:last-child { width: 100% !important; }
    .view-product-layout > tbody > tr > td:last-child table { width: 100% !important; }
}

@media (max-width: 480px) {
    .introListItem { flex-direction: column; gap: 8px; }
    .introListImage { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* view.php 정보 테이블 구분선 — solid 회색 → 얇은 점선 */
td[bgcolor="e7e7e7"] {
    background: none !important;
    height: 0 !important;
    padding: 0 !important;
    border-bottom: 1px dashed #d8d8d8;
}

/* 게시판 목록 상하단 3단 장식 라인 → 1px 단일 라인으로 축소 */
td[bgcolor="96b9d7"] { display: none !important; }
td[bgcolor="4e8ac0"] { height: 1px !important; padding: 0 !important; font-size: 0 !important; }

/* ============================================================
   P1-3: sub01.php 배너블록 고정폭 700px → 반응형
   ============================================================ */
.banner_block {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 8px 0 !important;
}
.banner_block .banner { float: none !important; padding: 0 !important; }
.banner_block .banner img { max-width: 100%; height: auto !important; display: block; }
@media (max-width: 768px) {
    .banner_block .banner { flex: 0 0 calc(50% - 5px); }
    .banner_block .banner img { width: 100% !important; }
}

/* ============================================================
   P1-4: reserve/view.php 모바일 Sticky CTA
   ============================================================ */
@media (max-width: 768px) {
    .mobile-sticky-cta {
        position: fixed; bottom: 0; left: 0; right: 0;
        background: #fff; border-top: 1px solid #e0e0e0;
        padding: 10px 16px; display: flex; gap: 8px;
        z-index: 100; box-shadow: 0 -2px 8px rgba(0,0,0,0.10);
    }
    .mobile-sticky-cta .view-btn { flex: 1; justify-content: center; }
    .mobile-sticky-spacer { height: 64px; }
}
@media (min-width: 769px) {
    .mobile-sticky-cta { display: none !important; }
    .mobile-sticky-spacer { display: none !important; }
}

/* ============================================================
   P1-5: 상품 카드 hover 스타일 + text_12_red 가격 색상 fix
   ============================================================ */
.reserve-product-table td.imageBoardListTd {
    transition: box-shadow 0.15s;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px;
    overflow: hidden;
}
.reserve-product-table td.imageBoardListTd:hover {
    box-shadow: 0 2px 10px rgba(26,75,168,0.15);
    border-color: #b0c4e8;
}
/* 인라인 width:318px/height:342px 오버라이드 — 반응형 */
.reserve-product-table td.imageBoardListTd > div {
    width: 100% !important;
    height: auto !important;
}
.reserve-product-table td.imageBoardListTd img.imageBoardListImage {
    width: 100% !important;
    height: auto !important;
    display: block;
}
/* 레거시 color:f24848(# 없음) 버그 보정 + 브랜드 주황으로 통일 */
.text_12_red { color: #e87e28 !important; font-weight: 700 !important; }

/* ============================================================
   P2-1: reserve/view.php 정보 테이블 라벨/값 위계
   ============================================================ */
.text_12_board {
    font-size: 12px !important;
    color: #888 !important;
    font-weight: 600 !important;
}
.view-product-layout td:not([class]) {
    font-size: 13px;
    color: #333;
}
.view-product-layout .text_12_red {
    color: #e87e28 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* ============================================================
   P2-2: 게시판 목록 "공지" 뱃지 — 모바일 pill 스타일
   ============================================================ */
@media (max-width: 768px) {
    .board-col-no b {
        font-size: 0 !important;
        display: inline-block;
    }
    .board-col-no b::before {
        content: "공지";
        font-size: 10px;
        font-weight: 700;
        background: #1a4ba8;
        color: #fff;
        padding: 2px 5px;
        border-radius: 10px;
        display: inline-block;
    }
}

/* ============================================================
   P2-5: 메인 Quick CTA 섹션 (빠른 예약)
   ============================================================ */
.main-quick-reserve {
    max-width: 980px;
    margin: 20px auto 10px;
    padding: 0 8px;
}
.main-quick-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a4ba8;
    margin-bottom: 12px;
    padding-left: 4px;
    border-left: 4px solid #1a4ba8;
    line-height: 1.2;
}
.main-quick-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.main-quick-card {
    flex: 1 1 calc(33% - 16px);
    min-width: 200px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    transition: box-shadow 0.15s, border-color 0.15s;
    display: block;
}
.main-quick-card:hover {
    box-shadow: 0 3px 12px rgba(26,75,168,0.15);
    border-color: #b0c4e8;
}
.main-quick-img {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f0f4fb;
}
.main-quick-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.main-quick-name {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px 4px;
    line-height: 1.4;
}
.main-quick-price {
    font-size: 13px;
    color: #e87e28;
    font-weight: 700;
    padding: 0 12px 10px;
}
@media (max-width: 768px) {
    .main-quick-grid { gap: 10px; }
    .main-quick-card { flex: 1 1 calc(50% - 10px); min-width: 140px; }
}
@media (max-width: 480px) {
    .main-quick-card { flex: 0 0 100%; }
}

/* ============================================================
   P3-3: sub01.php 상품 그리드 — table display 오버라이드 → flex
   display:contents on <tr> 트릭으로 HTML 수정 없이 flex grid 구현
   ============================================================ */
.reserve-product-table { display: block !important; }
.reserve-product-table > tbody {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100%;
    justify-content: center !important;
}
.reserve-product-table > tbody > tr { display: contents; }
.reserve-product-table td.imageBoardListTd {
    flex: 0 0 calc(33.333% - 8px) !important;
    max-width: calc(33.333% - 8px) !important;
    width: auto !important;
    vertical-align: top;
}
/* 행 간격용 spacer td 숨김 */
.reserve-product-table td[height] { display: none !important; }

@media (max-width: 768px) {
    .reserve-product-table td.imageBoardListTd {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }
}
@media (max-width: 480px) {
    .reserve-product-table td.imageBoardListTd {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================ */
/* Day 1~2 가독성·접근성 묶음 (2026-06-05) — readability batch  */
/* ============================================================ */

/* 1) 회색 글자 일괄 상향 — WCAG AA 대비 4.5:1 확보 */
body, .bv-content, .intro-content, .info-doc-body,
.mp-info-card, .form-card, p, td, span {
    /* base text color 강화 */
}
/* 옅은 회색 사용처 가독성 보강 */
.gray-text, .desc-text, .small-gray { color: #555 !important; }
.muted, .text-muted { color: #555 !important; }

/* 본문 안의 옅은 회색 텍스트(흔한 인라인) — 강제 보강 */
[style*="color:#888"], [style*="color: #888"],
[style*="color:#999"], [style*="color: #999"],
[style*="color:#aaa"], [style*="color: #aaa"],
[style*="color:#ccc"], [style*="color: #ccc"] {
    color: #555 !important;
}

/* 2) 모바일 본문 폰트 17px (5060+ 가독성) */
@media (max-width: 768px) {
    body { font-size: 17px; line-height: 1.55; }
    .bv-content, .intro-content, .info-doc-body { font-size: 16.5px; line-height: 1.7; }
    table { font-size: 16px; }
    .small, small { font-size: 14px; }
}

/* 3) 본문 영역 링크 밑줄 복원 (링크 인식성) */
.bv-content a, .intro-content a, .info-doc-body a,
.notice-content a, .board-comment-input + a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bv-content a:hover, .intro-content a:hover {
    text-decoration-thickness: 2px;
}

/* 4) 버튼 box-shadow 강화 (눌리는 영역 명확) */
.view-btn {
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: box-shadow 0.12s, transform 0.06s;
}
.view-btn:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transform: translateY(1px);
}
.view-btn:focus-visible {
    outline: 3px solid #1a4ba8;
    outline-offset: 2px;
}

/* 5) 이미지 lazy loading 보조 — 로딩 중 시각적 안정 */
img[loading="lazy"] { background-color: #f5f5f5; }
img { max-width: 100%; height: auto; }

/* 5b) 폼 라벨/입력 접근성 */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
    outline: 2px solid #1a4ba8;
    outline-offset: 1px;
}

/* 5c) :focus-visible 키보드 접근성 */
a:focus-visible, button:focus-visible {
    outline: 2px solid #1a4ba8;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============================================================ */
/* Day 8~9 글씨크게 토글 + 검색로그 (2026-06-05)               */
/* ============================================================ */

/* "글씨크게" 토글 활성 시 본문 폰트 1.15배 */
body.elder { font-size: 18px !important; line-height: 1.7 !important; }
body.elder .view-btn { padding: 14px 22px !important; font-size: 17px !important; min-height: 48px !important; }
body.elder a, body.elder p, body.elder td, body.elder li, body.elder span { font-size: 1.07em; }
body.elder .bv-content, body.elder .intro-content { font-size: 19px !important; line-height: 1.85 !important; }
body.elder input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.elder select, body.elder textarea {
    font-size: 17px !important; padding: 10px 12px !important;
}

/* 토글 버튼 자체 */
.elder-toggle {
    position: fixed; top: 12px; right: 12px;
    width: 44px; height: 44px;
    background: #1a4ba8; color: #fff;
    border: none; border-radius: 50%;
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 9999;
}
.elder-toggle:hover { background: #163d8c; }
body.elder .elder-toggle { background: #42a842; }
@media (max-width: 480px) {
    .elder-toggle { top: 8px; right: 8px; }
}

/* ============================================================ */
/* Quick Wins 일괄 (2026-06-06) — 디자인 토큰 + 모션 + 인쇄 폴백 */
/* ============================================================ */

/* === 1) 타이포·스페이싱·컬러 토큰 === */
:root {
    /* 폰트 스케일 (clamp으로 화면 크기 자동 적응) */
    --fs-xs:   13px;
    --fs-sm:   15px;
    --fs-base: 17px;                     /* 모바일 본문 */
    --fs-lg:   19px;
    --fs-xl:   clamp(20px, 4vw, 24px);
    --fs-2xl:  clamp(22px, 5vw, 32px);   /* 섹션 제목 */
    --fs-3xl:  clamp(28px, 7vw, 44px);   /* 메인 hero */

    /* 행간 */
    --lh-tight: 1.3;
    --lh-base:  1.55;
    --lh-loose: 1.7;

    /* 스페이싱 (8-base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* 색상 — 브랜드 + 시맨틱 */
    --color-primary:  #1a4ba8;
    --color-primary-light: #4a7bd1;
    --color-primary-dark:  #163d8c;
    --color-brand-green: #42a842;
    --color-text:    #222;
    --color-text-mute: #555;
    --color-text-soft: #777;
    --color-border:  #d8d8d8;
    --color-bg-soft: #f6f8fc;

    /* 인쇄·이메일 흑백 폴백 */
    --ink-strong:  #000;
    --ink-text:    #222;
    --ink-muted:   #555;
    --ink-divider: #888;

    /* 모션 */
    --ease-quick:  cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 0.15s;
    --dur-base: 0.25s;
}
@media (min-width: 769px) {
    :root { --fs-base: 16px; }
}

/* 토큰 적용 — body·본문 가독성 */
body { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); }
.bv-content, .intro-content, .info-doc-body { line-height: var(--lh-loose); font-size: var(--fs-base); }

/* 숫자 정렬 (금액·예약번호·연락처) */
.price, .order-no, .booking-cnt, .amount, .phone-no,
.mp-status-paid + b, .cart-total-row b, .rs2-amount, td.price-cell {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* === 2) 감성 모션 (prefers-reduced-motion 자동 비활성) === */
@media (prefers-reduced-motion: no-preference) {
    /* hero 천천히 확대 — 모션 OK 사용자만 */
    .hero-img, .t3-hero img, .exp-hero-img, .bottom-banner-section img {
        animation: kenburns 24s ease-in-out infinite alternate;
    }
    @keyframes kenburns {
        from { transform: scale(1) translate(0, 0); }
        to   { transform: scale(1.06) translate(-1.2%, 0.8%); }
    }

    /* 체험 카드 hover lift */
    .exp-card, .t3-exp-card, .imageBoardListTd, .reserve-product-table td.imageBoardListTd,
    .bv-card, .mp-reserve-card {
        transition: transform var(--dur-fast) var(--ease-quick),
                    box-shadow var(--dur-fast) var(--ease-quick);
    }
    .exp-card:hover, .t3-exp-card:hover, .imageBoardListTd:hover,
    .bv-card:hover, .mp-reserve-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(26, 75, 168, 0.12);
    }

    /* 찜 버튼 클릭 시 튀는 애니메이션 */
    .btn-favor.active, .favor-btn.active, .rv-mcta-fav.active {
        animation: pop 0.35s var(--ease-quick);
    }
    @keyframes pop {
        0%, 100% { transform: scale(1); }
        50%      { transform: scale(1.3); }
    }

    /* 페이지 fade-in (깜빡임 방지) */
    main, #mainContent, .container {
        animation: fade-in var(--dur-base) ease-out;
    }
    @keyframes fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* === 3) Skeleton (로딩 중 placeholder) === */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
    border-radius: 4px;
    color: transparent !important;
    user-select: none;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === 4) Spinner === */
.spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: -2px;
    margin-right: 6px;
}
.spinner.spinner-dark {
    border-color: var(--color-primary);
    border-top-color: transparent;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === 5) Empty State (빈 상태 + CTA) === */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--color-text-mute);
}
.empty-state-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
    opacity: 0.5;
}
.empty-state-text {
    font-size: var(--fs-lg);
    margin-bottom: 16px;
    color: var(--color-text-mute);
}
.empty-state-cta {
    display: inline-block;
    padding: 12px 24px;
    background: var(--color-primary);
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: var(--fs-base);
    transition: background var(--dur-fast);
}
.empty-state-cta:hover { background: var(--color-primary-dark); }

/* === 6) 결제 버튼 disabled 상태 === */
.btn-pay-loading, button[disabled], .view-btn[disabled], .view-btn.is-loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* === 7) Breadcrumb === */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--color-text-mute);
    padding: 10px 0;
    margin: 0 0 12px;
}
.breadcrumb a {
    color: var(--color-text-mute);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
}
.breadcrumb a:hover {
    color: var(--color-primary);
    background: var(--color-bg-soft);
}
.breadcrumb .bc-sep {
    color: #bbb;
    font-size: 0.9em;
}
.breadcrumb [aria-current="page"] {
    color: var(--color-text);
    font-weight: 500;
}

/* === 8) 접근성 — 스크린리더 전용 === */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* === 9) 인쇄·다크모드 폴백 === */
@media print {
    body {
        background: #fff;
        color: var(--ink-text);
        font-size: 12px;
    }
    .view-btn, .breadcrumb, nav, header, footer, .hamburger,
    .elder-toggle, .rv-mobile-cta, .skeleton, .spinner {
        display: none !important;
    }
    a { color: var(--ink-text); text-decoration: none; }
    .price, .amount, .order-no {
        color: var(--ink-strong);
        font-weight: bold;
    }
    table { border-color: var(--ink-divider) !important; }
}
@media (prefers-color-scheme: dark) {
    /* 메일·외부 클라이언트 다크모드 폴백 */
    .receipt-block, .print-only {
        background: #fff !important;
        color: var(--ink-text) !important;
    }
}