/* =====================================================
   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;
    }
}