@charset "utf-8";
/* DAIHANMUSIC mobile.css  VERSION: v1.3  (2026-08-25) */ /* ==========================================================================대한음악사 모바일 전용 최적화 CSS (모바일 뷰포트 완벽 대응)========================================================================== */

@media screen and (max-width: 991px) { /* STREAMING_CHUNK:Configuring global layout and box sizing... */
    /* ----------------------------------------------------------------------레이아웃 & 기본 컨테이너 초기화 (가로 스크롤 방지 및 너비 자동화)---------------------------------------------------------------------- */

    /* PC 전용 요소들에 곳곳에 박혀있던 min-width:1400px (div.visual, div.sec03, div.s-top div.img 등)가
       width:100%보다 우선 적용되어 페이지 전체가 데스크탑 폭(1400px)으로 강제로 넓어지고,
       그 위에 얹힌 제목(h3 등)이 헤더 쪽으로 겹쳐 보이던 근본 원인. 모바일에서는 min-width 자체를 전부 무력화. */
    * {
        min-width: 0 !important;
    }

    /* 배포 확인용 버전 마커.
       브라우저 개발자도구 콘솔에서 아래를 실행하면 "v1.3" 이 나와야 최신 CSS가 적용된 것:
       getComputedStyle(document.documentElement).getPropertyValue('--dhmusic-mobile-css')  */
    html {
        --dhmusic-mobile-css: "v1.9" !important;
    }

    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        background-color: #fff;
        -webkit-text-size-adjust: 100%;
    }

    #wrap, header, .container, div.contents, div.contents.width, div.sec, div.sec01, div.sec02 ul.best, div.sec03 div.sitemap, div.login-wrap, div.policy-wrap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* STREAMING_CHUNK:Fixing mobile popups and blocking backdrop overlays... */
    /* ----------------------------------------------------------------------2. 공지사항 팝업 모달 (#Notice1, #Notice2) 모바일 정렬 & 화면 블로킹 방지---------------------------------------------------------------------- */
    /* Bootstrap 모달 백드롭 및 모달 위치 강제 원복 */

    .modal-backdrop {
        z-index: 1040 !important;
        opacity: 0.5 !important;
    }

    .modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1050 !important;
        overflow-y: auto !important;
        padding: 0 !important;
    }
    /* calc(5% + 470px)로 모바일 화면 밖으로 벗어나 화면을 락 걸던 팝업 위치 재정의 */

    #Notice1, #Notice2 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        outline: none !important;
    }

        #Notice1 .modal-dialog, #Notice2 .modal-dialog, .modal-dialog {
            width: 90% !important;
            max-width: 360px !important;
            margin: 40px auto !important;
            position: relative !important;
            left: 0 !important;
            top: 0 !important;
        }

    .modal-content {
        width: 100% !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .modal-header {
        padding: 12px 15px !important;
        background: #f8f9fa !important;
        border-bottom: 1px solid #eee !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

        .modal-header .modal-title {
            font-size: 15px !important;
            font-weight: 700 !important;
            color: #111 !important;
            margin: 0 !important;
        }

        .modal-header .close {
            margin: 0 !important;
            padding: 0 !important;
            font-size: 24px !important;
            line-height: 1 !important;
            opacity: 0.8 !important;
            color: #000 !important;
            float: none !important;
        }

    .modal-body {
        padding: 12px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }

        .modal-body img {
            max-width: 100% !important;
            height: auto !important;
            display: block !important;
            margin: 0 auto !important;
        }

    .modal-footer {
        padding: 10px 12px !important;
        background: #fff !important;
        border-top: 1px solid #eee !important;
        display: flex !important;
        gap: 6px !important;
        justify-content: flex-end !important;
    }

        .modal-footer .btn {
            flex: 1 !important;
            height: 36px !important;
            line-height: 34px !important;
            font-size: 12px !important;
            padding: 0 !important;
            margin: 0 !important;
            border-radius: 4px !important;
        }

    /* 공지팝업 2개(#Notice1, #Notice2)가 쿠키 미설정 시 동시에 열리면 모바일에서는 두 팝업이
       완전히 같은 위치에 겹쳐 나타나면서 아래쪽 팝업은 보이지도, 눌리지도 않던 문제 ->
       Notice1이 열려있는 동안은 Notice2를 잠시 숨기고, Notice1을 닫으면 자동으로 Notice2가 나타나도록 순차 표시 처리 */
    #Notice1.in ~ #Notice2 {
        display: none !important;
    }
    /* STREAMING_CHUNK:Styling header logo and top utility menu... */
    /* ----------------------------------------------------------------------3. 모바일 헤더 & 상단 네비게이션 (메뉴 겹침 및 잘림 완벽 방지)---------------------------------------------------------------------- */

    header {
        position: relative !important;
        height: auto !important;
        background: #1a1a1a !important;
        padding: 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 1000 !important;
    }

        header::before {
            display: none !important;
        }
        /* [1단] 상단 로고 정렬 (Index.cshtml 내 margin-top:-50px 음수 여백 무효화) */

        header h1 {
            position: static !important;
            width: 100% !important;
            text-align: center !important;
            padding: 12px 0 8px !important;
            margin: 0 !important;
            background: #1a1a1a !important;
            display: block !important;
            float: none !important;
        }

            header h1 a {
                display: inline-block !important;
                margin: 0 auto !important;
            }

                header h1 a img {
                    height: 28px !important;
                    width: auto !important;
                    margin: 0 auto !important;
                    display: block !important;
                    vertical-align: middle !important;
                }
        /* [2단] 유틸 메뉴 (SEARCH | LOGIN/MYPAGE | CART) */
        header ul.top-menu {
            position: static !important;
            display: flex !important;
            width: 100% !important;
            background: #252525 !important;
            border-top: 1px solid #333 !important;
            border-bottom: 1px solid #333 !important;
            margin: 0 !important;
            padding: 0 !important;
            float: none !important;
        }

            header ul.top-menu li {
                float: none !important;
                flex: 1 1 0 !important;
                text-align: center !important;
                border-right: 1px solid #333 !important;
                margin: 0 !important;
            }

                header ul.top-menu li:last-child {
                    border-right: none !important;
                }

                header ul.top-menu li a {
                    width: 100% !important;
                    height: 38px !important;
                    line-height: 38px !important;
                    font-size: 12px !important;
                    font-weight: 600 !important;
                    color: #ccc !important;
                    display: block !important;
                    padding: 0 !important;
                    text-decoration: none !important;
                    background: transparent !important;
                    white-space: nowrap !important;
                    overflow: hidden !important;
                    text-overflow: ellipsis !important;
                }

                    header ul.top-menu li a::before {
                        display: none !important; /* PC 스프라이트 아이콘 제거 */
                    }
        /* STREAMING_CHUNK:Styling main GNB category navigation with touch scroll... */
        /* [3단] 카테고리 GNB (터치 가로 스크롤 - 메뉴 잘림 완벽 해결) */
        header nav {
            position: relative !important;
            width: 100% !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            background: #111 !important;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            display: block !important;
            float: none !important;
            flex-shrink: 0 !important;
        }

            header nav::-webkit-scrollbar {
                display: none; /* 스크롤바 숨김 */
            }
        /* 줄바꿈 방식으로 변경했으므로 가로 스크롤 자체를 해제 */
        header nav {
            overflow-x: visible !important;
        }

            /* 가로 스크롤 방식은 잘린 메뉴(Digital 등)가 있는지 사용자가 알 수 없어서,
   화면 폭에 맞춰 자동으로 줄바꿈되는 방식으로 변경 -> 모든 메뉴가 항상 한 화면에 보임 */
            header nav ul.gnb {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                white-space: normal !important;
                padding: 4px 4px !important;
                margin: 0 !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

                header nav ul.gnb li {
                    display: inline-block !important;
                    margin: 0 !important;
                    float: none !important;
                    flex: 0 0 auto !important;
                }

                    header nav ul.gnb li a {
                        display: block !important;
                        padding: 0 9px !important;
                        font-size: 12.5px !important;
                        line-height: 34px !important;
                        color: #eee !important;
                        font-weight: 500 !important;
                        text-decoration: none !important;
                        white-space: nowrap !important;
                    }

                        header nav ul.gnb li.on a, header nav ul.gnb li a:hover {
                            color: #fcc800 !important;
                            font-weight: 700 !important;
                            border-bottom: 2px solid #fcc800 !important;
                        }
    /* STREAMING_CHUNK:Adjusting sub-top banner and sub-menu tabs... */
    /* ----------------------------------------------------------------------4. 서브페이지 상단 배너 (s-top 이미지 잘림 & 상단 공백 수정)---------------------------------------------------------------------- */
    div.container div.s-top div.img {
        height: 110px !important;
        background-size: cover !important;
        background-position: center center !important;
        text-align: center !important;
    }

        div.container div.s-top div.img h3 {
            margin-top: 20px !important; /* PC용 180px 위치 오류 수정 */
            font-size: 20px !important;
            color: #fcc800 !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
        }

        div.container div.s-top div.img p {
            margin-top: 4px !important;
            font-size: 12px !important;
            color: #fcc800 !important;
        }

    div.container div.s-top div.s-menu {
        height: auto !important;
        background: #fafafa !important;
        border-bottom: 1px solid #e0e0e0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

        div.container div.s-top div.s-menu ul {
            display: flex !important;
            white-space: nowrap !important;
            padding: 0 10px !important;
            width: max-content !important;
            min-width: 100% !important;
            justify-content: space-around !important;
        }

            div.container div.s-top div.s-menu ul li {
                display: inline-block !important;
                margin: 0 6px !important;
                flex: 0 0 auto !important;
            }

                div.container div.s-top div.s-menu ul li a {
                    line-height: 38px !important;
                    font-size: 13px !important;
                }

    div.container div.s-top div.loca-wrap {
        height: auto !important;
        padding: 6px 10px !important;
        background: #fff !important;
    }

        div.container div.s-top div.loca-wrap div.loca {
            width: 100% !important;
            margin: 0 !important;
        }

        div.container div.s-top div.loca-wrap ul {
            float: none !important;
            display: flex !important;
            flex-wrap: wrap !important;
            font-size: 12px !important;
        }

            /* ItemSearch.cshtml 35행의 style 속성 닫는 따옴표 누락으로 내부 div.loca 가 파싱 단계에서
       사라지고 빈 회색 띠만 남는 문제 방어. (근본 해결은 cshtml 의 따옴표 1개 추가) */
            div.container div.s-top div.loca-wrap ul.loca:not(:has(li:not(:empty))) {
                display: none !important;
            }

        div.container div.s-top div.loca-wrap a.list-view {
            float: none !important;
            display: block !important;
            width: 100% !important;
            text-align: center !important;
            margin-top: 6px !important;
            line-height: 32px !important;
            border: 1px solid #ccc !important;
            font-size: 12px !important;
            background-position: 10px center !important;
        }
    /* STREAMING_CHUNK:Styling product detail page and tab components... */
    /* ----------------------------------------------------------------------5. 상품 상세 페이지 (ItemInfo.cshtml) 반응형 최적화---------------------------------------------------------------------- */

    div.detail-area {
        margin-top: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }

        div.detail-area div.img {
            float: none !important;
            width: 100% !important;
            max-width: 260px !important;
            height: auto !important;
            margin: 0 auto 15px !important;
            text-align: center !important;
        }

            div.detail-area div.img img {
                width: 100% !important;
                height: auto !important;
                object-fit: contain !important;
            }

        div.detail-area div.detail {
            float: none !important;
            width: 100% !important;
        }

            div.detail-area div.detail h5 {
                margin: 0 0 12px !important;
                font-size: 18px !important;
                font-weight: 700 !important;
                line-height: 1.4 !important;
                color: #111 !important;
            }

            div.detail-area div.detail table {
                width: 100% !important;
                margin-top: 10px !important;
                border-top: 2px solid #333 !important;
            }

                div.detail-area div.detail table colgroup col {
                    width: auto !important;
                }

                    div.detail-area div.detail table colgroup col:first-child {
                        width: 85px !important;
                    }

                div.detail-area div.detail table td {
                    padding: 8px 6px !important;
                    font-size: 13px !important;
                }

                    div.detail-area div.detail table td p.price {
                        font-size: 14px !important;
                    }

                        div.detail-area div.detail table td p.price span {
                            font-size: 22px !important;
                            font-weight: 800 !important;
                            color: #f27935 !important;
                        }

            div.detail-area div.detail div.btn-wrap {
                position: static !important;
                margin-top: 20px !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 8px !important;
                width: 100% !important;
                left: auto !important;
                bottom: auto !important;
            }

                div.detail-area div.detail div.btn-wrap a {
                    width: 100% !important;
                    float: none !important;
                    height: 48px !important;
                    line-height: 48px !important;
                    font-size: 16px !important;
                    font-weight: 700 !important;
                    margin: 0 !important;
                    border-radius: 6px !important;
                    box-sizing: border-box !important;
                }
    /* 상세 하단 탭 (수록곡 & 소개 / 상품정보 / 관련상품) */

    div.detail-tabs {
        margin: 20px 0 40px !important;
    }

        div.detail-tabs ul.ui-tabs-nav {
            display: flex !important;
            width: 100% !important;
            border-bottom: 2px solid #30343b !important;
        }

            div.detail-tabs ul.ui-tabs-nav li {
                float: none !important;
                flex: 1 1 0 !important;
                width: auto !important;
            }

                div.detail-tabs ul.ui-tabs-nav li::before {
                    display: none !important;
                }

                div.detail-tabs ul.ui-tabs-nav li a {
                    padding: 0 4px !important;
                    font-size: 13px !important;
                    line-height: 42px !important;
                    text-align: center !important;
                }

        div.detail-tabs > div {
            padding: 15px 5px !important;
            font-size: 14px !important;
        }

            div.detail-tabs > div .img img, div.detail-tabs > div img {
                max-width: 100% !important;
                height: auto !important;
            }
    /* STREAMING_CHUNK:Enforcing two-column grid layout for product lists... */
    /* ----------------------------------------------------------------------6. 상품 목록 & 검색 (1행 2개 2열 격자 배치로 스크롤 최적화)---------------------------------------------------------------------- */
    div.contents {
        padding: 0 10px !important;
    }

        div.contents h3.title {
            font-size: 20px !important;
            margin: 15px 0 10px !important;
        }
        /* 서브 카테고리 탭 (가로 터치 스크롤 - 글자 잘림 해결) */

        div.contents div.tabs {
            width: 100% !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
            margin-bottom: 15px !important;
            padding: 0 !important;
        }

            div.contents div.tabs ul {
                display: flex !important;
                white-space: nowrap !important;
                width: max-content !important;
                min-width: 100% !important;
                padding: 8px 6px !important;
            }

                div.contents div.tabs ul li {
                    margin: 0 2px !important;
                    display: inline-block !important;
                }

                    div.contents div.tabs ul li a {
                        padding: 0 10px !important;
                        font-size: 13px !important;
                    }
        /* 추가 검색 필터 박스 높이 고정 수정 (style="height:115px" 오버라이드) */

        div.contents div.panel-info div.panel-body {
            height: auto !important;
            padding: 10px !important;
        }

            div.contents div.panel-info div.panel-body div.row div.col-sm-11, div.contents div.panel-info div.panel-body div.row div.col-sm-1 {
                width: 100% !important;
                padding: 0 !important;
            }

            div.contents div.panel-info div.panel-body div.form-group.input-group {
                display: flex !important;
                flex-direction: column !important;
                gap: 6px !important;
                width: 100% !important;
                margin-bottom: 10px !important;
            }

                div.contents div.panel-info div.panel-body div.form-group.input-group span.input-group-addon {
                    width: 100% !important;
                    text-align: left !important;
                    background: #f0f0f0 !important;
                    font-weight: 700 !important;
                    font-size: 12px !important;
                    padding: 4px 8px !important;
                }

                div.contents div.panel-info div.panel-body div.form-group.input-group select.form-control {
                    width: 100% !important;
                    height: 36px !important;
                }
        /* 핵심: 상품 리스트 2열(가로 2개) 카드형 배치 적용 */

        /* 카드 2개의 상세정보 줄 수가 서로 달라(예: 일반상품 vs 예약결제 단일버튼 상품)
   카드 높이가 어긋나면서 그 아래 페이징이 버튼과 겹쳐 보일 수 있는 문제에 대한
   이중 방어. 그리드 행을 항상 서로 같은 높이로 명시적으로 고정한다. */
        div.sec02 ul.best, div.contents div.list-wrap ul.list {
            align-items: stretch !important;
        }

            div.sec02 ul.best > li, div.contents div.list-wrap ul.list > li {
                align-self: stretch !important;
            }

        div.sec02 ul.best, div.contents div.list-wrap ul.list {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px !important;
            margin: 10px 0 0 0 !important;
            padding: 0 !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

            div.sec02 ul.best li, div.contents div.list-wrap ul.list > li {
                float: none !important;
                width: 100% !important;
                min-width: 0 !important;
                height: auto !important;
                margin: 0 !important;
                background: #fff !important;
                padding: 8px !important;
                border-radius: 6px !important;
                border: 1px solid #e0e0e0 !important;
                box-sizing: border-box !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
                overflow: hidden !important;
            }

                div.sec02 ul.best li div.img, div.contents div.list-wrap ul.list > li a.img {
                    display: block !important;
                    width: 100% !important;
                    height: auto !important;
                    text-align: center !important;
                }

                    div.sec02 ul.best li div.img img, div.contents div.list-wrap ul.list > li a.img img {
                        width: 100% !important;
                        height: 160px !important;
                        object-fit: contain !important;
                        border: none !important;
                    }

                div.contents div.list-wrap ul.list > li div.info {
                    margin-top: 6px !important;
                    padding: 0 !important;
                }

                    div.contents div.list-wrap ul.list > li div.info p.index {
                        font-size: 11px !important;
                        color: #999 !important;
                        margin: 0 0 2px !important;
                    }

                    div.contents div.list-wrap ul.list > li div.info p.subject {
                        font-size: 12px !important;
                        height: 32px !important;
                        line-height: 16px !important;
                        font-weight: 700 !important;
                        margin-top: 2px !important;
                        overflow: hidden !important;
                        word-break: break-all !important;
                    }

                    div.contents div.list-wrap ul.list > li div.info ul.detail {
                        margin-top: 4px !important;
                        width: 100% !important;
                    }

                        div.contents div.list-wrap ul.list > li div.info ul.detail li {
                            font-size: 11px !important;
                            line-height: 15px !important;
                            color: #666 !important;
                            width: 100% !important;
                            white-space: normal !important;
                            word-break: break-all !important;
                            overflow-wrap: break-word !important;
                        }
        /* 카테고리 전체보기 (ItemCategory.cshtml) 6탭 반응형 */
        div.contents div.detail-tabs ul.ui-tabs-nav {
            flex-wrap: wrap !important; /* 부모가 flex-wrap 기본값(nowrap)이라 자식에 width:33%를
        줘도 한 줄에 욱여넣어져 6개 탭 중 뒤쪽이 안 보이던 문제의 진짜 원인 */
            border-bottom: none !important;
        }

            div.contents div.detail-tabs ul.ui-tabs-nav li {
                width: 33.333% !important; /* 6개 탭을 모바일에서 3열 2행으로 배치 */
                flex: none !important;
                box-sizing: border-box !important;
                border-bottom: 2px solid #30343b !important;
            }

    p.major {
        display: inline-block !important;
        width: 48% !important;
        margin: 4px 1% !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        font-size: 13px !important;
    }
    /* STREAMING_CHUNK:Fixing yellow item action buttons... */
    /* ----------------------------------------------------------------------7. 상품 노란색 버튼 아이콘/텍스트 겹침 완벽 수정---------------------------------------------------------------------- */
    div.sec02 ul.best li div.img p.btn,
    div.contents div.list-wrap ul.list > li div.btn-wrap {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        height: 34px !important;
        background: #fcc800 !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        margin-top: 8px !important;
        padding: 0 !important;
    }

        div.sec02 ul.best li div.img p.btn::before,
        div.sec02 ul.best li div.img p.btn a::before {
            display: none !important; /* 깨진 sprite 배경 아이콘 숨김 */
        }

        div.sec02 ul.best li div.img p.btn a, div.contents div.list-wrap ul.list > li div.btn-wrap a {
            width: 50% !important;
            height: 34px !important;
            line-height: 34px !important;
            float: none !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            font-size: 11px !important;
            color: #000 !important;
            font-weight: 700 !important;
            text-decoration: none !important;
            background: transparent !important;
            margin: 0 !important;
            border: none !important;
        }

            div.sec02 ul.best li div.img p.btn a:first-child, div.contents div.list-wrap ul.list > li div.btn-wrap a:first-child {
                border-right: 1px solid rgba(0,0,0,0.15) !important;
            }

            div.contents div.list-wrap ul.list > li div.btn-wrap a.buy {
                background: #fc5900 !important;
                color: #fff !important;
            }

            div.contents div.list-wrap ul.list > li div.btn-wrap a.cart {
                background: #fcc800 !important;
                color: #000 !important;
            }

            div.contents div.list-wrap ul.list > li div.btn-wrap a.order {
                width: 100% !important;
                background: #565656 !important;
                color: #fff !important;
            }

            div.sec02 ul.best li div.img p.btn a span {
                position: static !important;
                visibility: visible !important;
                opacity: 1 !important;
                font-size: 11px !important;
                font-weight: 700 !important;
                color: #000 !important;
                background: transparent !important;
                padding: 0 !important;
                width: auto !important;
                height: auto !important;
                line-height: normal !important;
                text-align: center !important;
                transform: none !important;
                border: none !important;
                box-shadow: none !important;
            }
    /* STREAMING_CHUNK:Styling cart page cards and total price summary... */
    /* ----------------------------------------------------------------------8. 장바구니 페이지 (CartList.cshtml) 겹침 및 총 금액 정렬 완벽 수정---------------------------------------------------------------------- */
    div.cart-title {
        margin-top: 15px !important;
        /* PC용 clearfix(overflow:hidden, sub.css)가 모바일에서는 float를 거의 안 쓰는데도
   그대로 남아있어서, 안쪽 깊이 중첩된 표(이용약관/개인정보보호정책 등)의 셀 폭이
   cellpadding 등으로 부모 폭보다 아주 조금(약 20px)만 더 커져도 텍스트가 잘려
   안 보이던 문제의 진짜 원인이었음. 모바일에서는 잘리지 않게 visible로 해제. */
        overflow: visible !important;
    }

        /* 위 table-layout:fixed 로 대부분 해결되지만, 옛날 방식 표는 워낙 다양한 형태라
   혹시 모를 경우를 대비한 이중 안전장치: 표를 담는 패널 자체를 가로 스크롤 가능하게 해서
   최악의 경우에도 내용이 "잘려서 안 보이는" 대신 "옆으로 넘겨서라도 볼 수 있게" 함 */
        div.cart-title div.panel-body {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }

        div.cart-title p.tit {
            float: none !important;
            font-size: 20px !important;
            font-weight: 700 !important;
            margin: 10px 0 !important;
        }

        div.cart-title ul.process {
            display: none !important; /* 모바일 세로 겹침 원인이 되는 프로세스 바 완전 숨김 */
        }
    /* 테이블을 모바일 전용 카드형 리스트로 직관적 전환 */
    table.cart-table {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 20px !important;
        border-top: 2px solid #333 !important;
        border-collapse: collapse !important;
    }

        table.cart-table colgroup,
        table.cart-table thead {
            display: none !important;
        }

        table.cart-table tbody {
            display: block !important;
            width: 100% !important;
        }

        table.cart-table tr.product {
            display: block !important;
            position: relative !important;
            width: 100% !important;
            padding: 12px !important;
            margin-bottom: 12px !important;
            border: 1px solid #e0e0e0 !important;
            border-radius: 6px !important;
            background: #fff !important;
            box-sizing: border-box !important;
        }
            /* td.check 는 장바구니에서는 체크박스, 주문내역/비회원주문조회에서는
   "주문일(주문번호)" 텍스트로 서로 다른 용도로 재사용되고 있음.
   실제 체크박스(input)가 있을 때만 왼쪽 절대좌표 배치를 적용하고,
   텍스트만 있을 때는 일반 블록으로 표시해서 잘리지 않게 한다. */
            table.cart-table tr.product:has(td.check input) {
                padding-left: 42px !important;
            }

            table.cart-table tr.product td {
                display: block !important;
                width: 100% !important;
                padding: 3px 0 !important;
                text-align: left !important;
                border: none !important;
                box-sizing: border-box !important;
            }
                /* 체크박스 정렬 (장바구니: input 이 실제로 있을 때만) */
                table.cart-table tr.product td.check:has(input) {
                    position: absolute !important;
                    left: 10px !important;
                    top: 12px !important;
                    width: 28px !important;
                    z-index: 2 !important;
                }
                /* 주문내역/비회원주문조회: 체크박스가 아니라 "주문일(주문번호)" 텍스트인 경우 */
                table.cart-table tr.product td.check:not(:has(input)) {
                    position: static !important;
                    width: 100% !important;
                    font-size: 12px !important;
                    color: #777 !important;
                    margin-bottom: 6px !important;
                    padding-bottom: 6px !important;
                    border-bottom: 1px dashed #eee !important;
                }
                /* 상품 이미지 & 제목 정렬 */
                table.cart-table tr.product td.subject {
                    display: flex !important;
                    flex-direction: row !important;
                    align-items: flex-start !important;
                    gap: 12px !important;
                    margin-bottom: 8px !important;
                }

                    table.cart-table tr.product td.subject p.img {
                        display: block !important;
                        width: 70px !important;
                        min-width: 70px !important;
                        height: auto !important;
                        margin: 0 !important;
                        flex-shrink: 0 !important;
                    }

                        table.cart-table tr.product td.subject p.img img {
                            width: 100% !important;
                            height: auto !important;
                            object-fit: contain !important;
                        }

                    table.cart-table tr.product td.subject p.tit {
                        display: block !important;
                        padding: 0 !important;
                        font-size: 14px !important;
                        font-weight: 600 !important;
                        color: #222 !important;
                        line-height: 1.4 !important;
                    }
                /* 수량 입력 박스 */
                table.cart-table tr.product td.number {
                    display: flex !important;
                    align-items: center !important;
                    gap: 8px !important;
                    margin: 6px 0 !important;
                }

                    table.cart-table tr.product td.number input {
                        display: inline-block !important;
                        width: 60px !important;
                        height: 32px !important;
                        margin: 0 !important;
                        text-align: center !important;
                        font-size: 14px !important;
                        border: 1px solid #ccc !important;
                        border-radius: 4px !important;
                    }

                    table.cart-table tr.product td.number button {
                        display: inline-block !important;
                        width: auto !important;
                        height: 32px !important;
                        padding: 0 12px !important;
                        line-height: 30px !important;
                        font-size: 12px !important;
                        background: #f5f5f5 !important;
                        border: 1px solid #ccc !important;
                        border-radius: 4px !important;
                    }
                /* 금액 및 삭제 버튼 */

                table.cart-table tr.product td span.price {
                    font-size: 18px !important;
                    font-weight: 800 !important;
                    color: #f27935 !important;
                }

            table.cart-table tr.product a.list-btn.del {
                display: inline-block !important;
                width: 60px !important;
                height: 28px !important;
                line-height: 26px !important;
                margin: 6px 0 0 !important;
                font-size: 12px !important;
                border-radius: 4px !important;
                text-align: center !important;
                border: 1px solid #ccc !important;
            }
        /* 장바구니 하단 총 금액 및 버튼 그룹 (글자 찌그러짐 및 좁은 폭 원천 해결) */

        table.cart-table td.pr-check {
            display: block !important;
            padding: 12px !important;
            background: #f9f9f9 !important;
            border: 1px solid #e0e0e0 !important;
            border-radius: 6px !important;
            margin-bottom: 10px !important;
            box-sizing: border-box !important;
        }

            table.cart-table td.pr-check p.left, table.cart-table td.pr-check p.right {
                float: none !important;
                width: 100% !important;
                text-align: left !important;
                margin: 4px 0 !important;
                font-size: 12px !important;
            }

        table.cart-table td.total, table.cart-table td.total2 {
            display: block !important;
            width: 100% !important;
            box-sizing: border-box !important;
            padding: 14px 12px !important;
            border-radius: 6px !important;
            margin-bottom: 10px !important;
        }

        table.cart-table td.total {
            background: #f8f9fa !important;
            border: 1px solid #e0e0e0 !important;
        }

            table.cart-table td.total p.title {
                float: none !important;
                font-size: 15px !important;
                font-weight: 700 !important;
                color: #111 !important;
                margin: 0 0 10px 0 !important;
                padding: 0 0 6px 0 !important;
                text-align: left !important;
                border-bottom: 1px solid #ddd !important;
            }

            table.cart-table td.total div {
                float: none !important;
                width: 100% !important;
                min-width: 0 !important;
            }

                table.cart-table td.total div p {
                    display: flex !important;
                    justify-content: space-between !important;
                    align-items: center !important;
                    font-size: 13px !important;
                    line-height: 28px !important;
                    margin: 0 !important;
                    color: #555 !important;
                }

                    table.cart-table td.total div p span {
                        float: none !important;
                        font-weight: 700 !important;
                        color: #111 !important;
                    }

        table.cart-table td.total2 {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            background: #fff3ec !important;
            border: 1px solid #ffd3bd !important;
        }

            table.cart-table td.total2 p.left, table.cart-table td.total2 p.right {
                float: none !important;
                margin: 0 !important;
                font-size: 15px !important;
                font-weight: 700 !important;
                color: #f27935 !important;
                white-space: nowrap !important;
            }

                table.cart-table td.total2 p.right span.price {
                    font-size: 20px !important;
                    font-weight: 800 !important;
                }

    div.btn-wrap.marb200 {
        margin-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    div.btn-wrap a {
        display: block !important;
        width: 100% !important;
        height: 46px !important;
        line-height: 46px !important;
        margin: 0 !important;
        font-size: 15px !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }

    /* 장바구니 표(tr.product가 아닌 일반 행: 전체선택/총금액 행)가 display:block 상속을 못 받아
   테이블 셀 레이아웃으로 남아있으면서 우측에 빈 공백이 생기던 문제 -> 모든 행/셀을 명시적으로 block 처리 */
    table.cart-table tr {
        display: block !important;
        width: 100% !important;
    }

    table.cart-table td.pr-check {
        width: 100% !important;
    }

    table.cart-table td.check:empty {
        display: none !important;
    }

    /* STREAMING_CHUNK:Formatting board and user profile pages... */
    /* ----------------------------------------------------------------------11-2. 페이징 (twbsPagination) 모바일 대응
   - 상품 목록 마지막 줄의 구매/장바구니 버튼과 페이징이 겹쳐 보이던 문제 방지 (여백 확보 + float 해제)
   - 좌측에 몰려있고 "Last"만 다음 줄로 떨어지던 문제 -> 가운데 정렬 + 자연스러운 줄바꿈
   - 손가락으로 누르기 좋게 터치 영역 확보---------------------------------------------------------------------- */

    div.contents div.list-wrap {
        margin-bottom: 10px !important;
    }

    /* 페이징을 감싸는 wrapper/container/row 가 PC 고정폭을 물고 오지 않도록 초기화 */
    div.wrapper {
        width: 100% !important;
        clear: both !important;
        box-sizing: border-box !important;
    }

        div.wrapper > div.container {
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }

            div.wrapper > div.container > div.row {
                margin: 0 !important;
            }

                div.wrapper > div.container > div.row > div[class^="col-"] {
                    width: 100% !important;
                    padding: 0 !important;
                }

    ul#pagination {
        display: flex !important;
        flex-wrap: nowrap !important; /* First~Last 가 한 줄에서 벗어나 "Last" 혼자 다음 줄로
                                      떨어지던 문제 -> 아예 한 줄에 다 들어가도록 강제 */
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
        width: 100% !important;
        clear: both !important;
        float: none !important;
        position: relative !important;
        z-index: 2 !important;
        margin: 34px 0 30px !important; /* 바로 위 상품 버튼과 너무 붙어 보이던 문제 -> 여백 확대 */
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow-x: auto !important; /* 페이지 수가 아주 많아 그래도 안 들어가는 극단적인 경우의 안전장치 */
        -webkit-overflow-scrolling: touch !important;
    }

        ul#pagination::-webkit-scrollbar {
            display: none;
        }

        ul#pagination > li {
            display: inline-block !important;
            float: none !important;
            margin: 0 !important;
            flex: 0 0 auto !important;
        }

            /* 부트스트랩 pagination 의 좌우 붙은 라운드 처리 해제 (칩 형태로 분리).
           box-sizing 을 border-box 로 명시하지 않으면 min-width 에 padding/border 가
           추가로 더해져서(30+14+2=46px) 실제로는 훨씬 넓게 렌더링되어 320px 화면에서
           9개 버튼이 한 줄에 다 안 들어가던 문제가 있었음. */
            ul#pagination > li > a, ul#pagination > li > span {
                display: block !important;
                box-sizing: border-box !important;
                min-width: 28px !important;
                height: 30px !important;
                padding: 0 5px !important;
                line-height: 28px !important;
                font-size: 12px !important;
                text-align: center !important;
                border: 1px solid #ddd !important;
                border-radius: 4px !important;
                margin: 0 !important;
                float: none !important;
            }

            /* First/Previous/Next/Last 는 글자 대신 화살표 기호로 압축해서
           한 줄에 다 들어가게 함 (Previous 8글자가 가장 폭을 많이 차지했었음) */
            ul#pagination > li.first > a,
            ul#pagination > li.prev > a,
            ul#pagination > li.next > a,
            ul#pagination > li.last > a {
                font-size: 0 !important;
                min-width: 24px !important;
                padding: 0 3px !important;
            }

                ul#pagination > li.first > a::before {
                    content: '\00AB';
                    font-size: 14px !important;
                }

                ul#pagination > li.prev > a::before {
                    content: '\2039';
                    font-size: 17px !important;
                }

                ul#pagination > li.next > a::before {
                    content: '\203A';
                    font-size: 17px !important;
                }

                ul#pagination > li.last > a::before {
                    content: '\00BB';
                    font-size: 14px !important;
                }

            ul#pagination > li.active > a, ul#pagination > li.active > span {
                background: #337ab7 !important;
                border-color: #337ab7 !important;
                color: #fff !important;
            }

            ul#pagination > li.disabled > a, ul#pagination > li.disabled > span {
                color: #bbb !important;
                background: #f8f8f8 !important;
            }

    /* ----------------------------------------------------------------------12. 주문/결제 페이지 (Payment.cshtml, PaymentPortOne.cshtml, Confirm.cshtml)
   PC 전용 절대좌표(position:absolute, width:800px 등) 레이아웃이 모바일에 전혀 대응되지 않아
   가격/글자가 화면 밖으로 잘리던 문제 전체 수정---------------------------------------------------------------------- */

    .order.marb200, fieldset.order.marb200 {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 주문 상품 요약 (번호 + 이미지 + 상품명/금액) : PC에서 position:absolute; width:800px 로 되어있어
   모바일에서는 무조건 화면 밖으로 넘쳐 금액이 잘렸던 부분 */
    .order div.product {
        position: relative !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 8px 0 !important;
        padding: 10px 0 !important;
        border-top: 1px solid #ddd !important;
        border-bottom: 1px solid #eee !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

        .order div.product p.rn {
            position: static !important;
            width: auto !important;
            left: auto !important;
            top: auto !important;
            transform: none !important;
            flex: 0 0 auto !important;
            font-size: 12px !important;
            color: #999 !important;
        }

        .order div.product p.img {
            position: static !important;
            float: none !important;
            width: 60px !important;
            min-width: 60px !important;
            margin: 0 !important;
            flex: 0 0 auto !important;
        }

            .order div.product p.img img {
                width: 100% !important;
                height: auto !important;
            }

        .order div.product p.txt {
            position: static !important;
            width: auto !important;
            left: auto !important;
            top: auto !important;
            transform: none !important;
            flex: 1 1 0 !important;
            min-width: 0 !important;
            font-size: 13px !important;
            line-height: 1.5 !important;
            color: #555 !important;
            word-break: break-all !important;
        }

            .order div.product p.txt span {
                display: block !important;
                font-size: 14px !important;
                font-weight: 700 !important;
                color: #f27935 !important;
                margin-bottom: 4px !important;
            }

        .order div.product p.text {
            margin: 30px 0 !important;
            font-size: 15px !important;
            text-align: center !important;
            line-height: 1.6 !important;
        }

    /* 주문자정보 / 배송지 / 포인트 / 결제방법 박스 공통 */
    div.order-box {
        margin-bottom: 25px !important;
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

        div.order-box p.title {
            font-size: 16px !important;
            font-weight: 700 !important;
            margin-bottom: 10px !important;
            padding-bottom: 8px !important;
            border-bottom: 2px solid #30343b !important;
            color: #111 !important;
        }

        div.order-box div.w50 {
            float: none !important;
            width: 100% !important;
        }

    /* 주문자정보/포인트/결제방법 표: PC의 180px+920px 고정폭 표를 모바일 카드형으로 전환 */
    table.tab-order {
        display: block !important;
        width: 100% !important;
        border-top: 2px solid #333 !important;
        box-sizing: border-box !important;
    }

        table.tab-order colgroup {
            display: none !important;
        }

        table.tab-order tbody {
            display: block !important;
            width: 100% !important;
        }

        table.tab-order tr {
            display: block !important;
            width: 100% !important;
            padding: 8px 0 !important;
            border-bottom: 1px solid #eee !important;
            height: auto !important;
            box-sizing: border-box !important;
        }

        table.tab-order th, table.tab-order td {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            padding: 4px 0 !important;
            border-bottom: none !important;
            box-sizing: border-box !important;
            text-align: left !important;
        }

        table.tab-order th {
            background: transparent !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #333 !important;
        }

        table.tab-order td {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 6px !important;
            font-size: 13px !important;
            color: #555 !important;
        }

            table.tab-order td input, table.tab-order td select {
                flex: 1 1 auto !important;
                min-width: 0 !important;
                width: auto !important;
                max-width: 100% !important;
                height: 38px !important;
                box-sizing: border-box !important;
                font-size: 13px !important;
                margin: 0 !important;
            }

                table.tab-order td input.width, table.tab-order td input.numbersOnly, table.tab-order td input#depositor {
                    flex-basis: 100% !important;
                }

                /* 010 - 1234 - 5678 형태의 전화번호 3분할 입력만 좁게 유지 */
                table.tab-order td select[id$="tel1"] {
                    flex: 1 1 84px !important;
                }

                table.tab-order td input[id$="tel2"], table.tab-order td input[id$="tel3"] {
                    flex: 1 1 60px !important;
                }

            table.tab-order td span.pay {
                display: inline-flex !important;
                align-items: center !important;
                margin-right: 14px !important;
                font-size: 13px !important;
            }

            table.tab-order td a.find-add {
                flex: 0 0 auto !important;
                font-size: 12px !important;
                padding: 0 8px !important;
                height: 38px !important;
                line-height: 36px !important;
            }

        table.tab-order span.point b {
            font-size: 18px !important;
        }

    /* 배송지 탭(최근 배송지 / 새로운 배송지) */
    div.order-box div#tabs ul.tab-list {
        display: flex !important;
        width: 100% !important;
    }

        div.order-box div#tabs ul.tab-list li {
            flex: 1 1 0 !important;
            text-align: center !important;
        }

            div.order-box div#tabs ul.tab-list li a {
                display: block !important;
                font-size: 13px !important;
                padding: 10px 0 !important;
            }

    ul#resAddr.select-add li {
        padding: 8px !important;
        border-bottom: 1px solid #eee !important;
    }

        ul#resAddr.select-add li span {
            display: flex !important;
            gap: 8px !important;
            flex-wrap: wrap !important;
        }

            ul#resAddr.select-add li span button {
                font-size: 12px !important;
                padding: 6px 10px !important;
            }

    div.order-box div.info {
        padding: 8px 0 !important;
        font-size: 13px !important;
    }

        div.order-box div.info p {
            margin: 2px 0 !important;
            word-break: break-all !important;
        }

    /* 배송 요청사항 선택 */
    .order div.delivery {
        width: 100% !important;
        margin-top: 12px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

        .order div.delivery select {
            width: 100% !important;
            max-width: 100% !important;
            height: 40px !important;
            margin-bottom: 6px !important;
            box-sizing: border-box !important;
        }

        .order div.delivery.user-write input, .order div.delivery input {
            width: 100% !important;
            max-width: 100% !important;
            height: 40px !important;
            box-sizing: border-box !important;
        }

    /* 새 배송지 입력 폼 */
    .order div.new-add {
        margin-left: 0 !important;
        width: 100% !important;
    }

        .order div.new-add dl {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            padding: 6px 0 !important;
            overflow: visible !important;
        }

            .order div.new-add dl dt {
                float: none !important;
                width: 100% !important;
                font-size: 12px !important;
                font-weight: 700 !important;
                margin-bottom: 4px !important;
            }

            .order div.new-add dl dd {
                float: none !important;
                width: 100% !important;
            }

        .order div.new-add dd.name input,
        .order div.new-add dd.add input,
        .order div.new-add dd.add input.post {
            width: 100% !important;
            max-width: 100% !important;
            height: 40px !important;
            margin: 0 0 6px !important;
            box-sizing: border-box !important;
        }

        .order div.new-add dd.add p {
            display: flex !important;
            gap: 6px !important;
            align-items: center !important;
        }

        .order div.new-add dd.add a.find-add {
            flex: 0 0 auto !important;
            font-size: 12px !important;
            padding: 0 10px !important;
            height: 40px !important;
            line-height: 38px !important;
        }

        .order div.new-add dd.tel {
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 6px !important;
        }

            .order div.new-add dd.tel select {
                flex: 1 1 84px !important;
                height: 40px !important;
            }

            .order div.new-add dd.tel input {
                flex: 1 1 60px !important;
                min-width: 0 !important;
                height: 40px !important;
                box-sizing: border-box !important;
            }

    /* 약관동의 + 최종 결제금액 */
    .order div.last div.policy {
        width: 100% !important;
        float: none !important;
    }

        .order div.last div.policy p.tit {
            font-size: 14px !important;
            padding: 10px 0 !important;
        }

        .order div.last div.policy p {
            font-size: 12px !important;
            padding-left: 0 !important;
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 8px !important;
        }

            .order div.last div.policy p a.showa {
                margin-left: 0 !important;
            }

    .order div.last div.total {
        width: 100% !important;
        min-height: 0 !important;
        padding: 15px !important;
        float: none !important;
        margin-top: 15px !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* 내부 float 자식이 부모 테두리 밖으로 빠져나가지 않도록 BFC 생성 */
    }

        .order div.last div.total ul {
            margin: 0 0 12px !important;
        }

            .order div.last div.total ul li {
                display: flex !important;
                justify-content: space-between !important;
                align-items: baseline !important;
                font-size: 13px !important;
                line-height: 30px !important;
                margin-bottom: 4px !important;
            }

                .order div.last div.total ul li span {
                    float: none !important;
                }

                    .order div.last div.total ul li span b {
                        font-size: 16px !important;
                    }

        /* p.price1(결제예정액 라벨)과 p.price2(금액)를 한 줄 양끝 정렬로 묶음.
       PC의 float:right 때문에 금액이 부모 박스 테두리 밖 아래로 튀어나오던 문제 해결 */
        .order div.last div.total p.price1 {
            float: left !important;
            font-size: 14px !important;
            margin: 0 !important;
            line-height: 32px !important;
        }

        .order div.last div.total p.price2 {
            float: right !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            color: #f27935 !important;
            margin: 0 !important;
            line-height: 32px !important;
        }

            .order div.last div.total p.price2 b {
                font-size: 20px !important;
                font-weight: 800 !important;
            }

    /* ----------------------------------------------------------------------9. 게시판 반응형---------------------------------------------------------------------- */

    table.board, table.write {
        display: block !important;
        width: 100% !important;
        margin: 15px 0 25px !important;
        overflow-x: auto !important;
    }

        table.board thead {
            display: none !important;
        }

        /* thead 는 숨겼지만 tbody 자체는 display 를 지정하지 않아서 기본값인
       display:table-row-group 그대로 남아있었음. table 은 이미 block 인데
       tbody 만 테이블 표시 방식으로 남으면 브라우저가 tbody 를 감싸는
       "익명 테이블 박스"를 새로 만들어 버리고, 그 박스는 부모 폭(370px 등)이
       아니라 내용물 글자 수에 맞춰 아주 좁게(약 40~60px) 축소돼 버림.
       -> 게시판 목록/내용이 화면 왼쪽 좁은 칸에 몰리고 오른쪽이 텅 비어
       보이던 문제의 진짜 원인. tbody 도 명시적으로 block 처리해서 해결. */
        table.board tbody, table.write tbody {
            display: block !important;
            width: 100% !important;
        }

            table.board tbody tr {
                display: block !important;
                padding: 10px !important;
                border-bottom: 1px solid #e0e0e0 !important;
                background: #fff !important;
            }

                table.board tbody tr td {
                    display: block !important;
                    width: 100% !important;
                    text-align: left !important;
                    padding: 3px 0 !important;
                    border: none !important;
                }

                    table.board tbody tr td a {
                        width: 100% !important;
                        font-size: 14px !important;
                        font-weight: 600 !important;
                        white-space: normal !important;
                        line-height: 1.4 !important;
                    }

    div.board-view div.board-top h3 {
        font-size: 16px !important;
        padding: 12px 10px !important;
        line-height: 1.4 !important;
    }

    div.board-view div.board-top div.info {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    div.board-view div.board-con {
        padding: 20px 10px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        overflow-x: auto !important; /* 관리자가 작성한 본문에 폭 넓은 이미지/표가 들어있어도
                                     페이지 전체가 밀리지 않고 이 영역 안에서만 스크롤되게 함 */
        word-break: break-word !important;
    }

        div.board-view div.board-con img {
            max-width: 100% !important;
            height: auto !important;
        }

        div.board-view div.board-con table {
            max-width: 100% !important;
        }

    /* 게시글 하단 목록/답글/수정/삭제 버튼 - PC 고정폭(100px)이 그대로 남아
   한 줄에 다 못 들어가고 3+1로 줄바꿈되던 문제 -> 균등폭으로 한 줄 배치 */
    div.write-btn {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 20px 0 !important;
        box-sizing: border-box !important;
    }

        div.write-btn a.btn-list {
            display: block !important;
            flex: 1 1 0 !important;
            width: auto !important;
            height: 38px !important;
            margin: 0 !important;
            padding: 0 !important;
            font-size: 13px !important;
            line-height: 36px !important;
            text-align: center !important;
            box-sizing: border-box !important;
        }

    /* 주문내역(MemberOrderList) / 비회원 주문조회(GuestOrderList) 상단 "주문 기간" 검색창.
   PC에서 inline style="width:500px" 로 고정돼 있어 모바일에서 종료일자가
   화면 밖으로 밀려나던 문제. */
    div.input-group.input-daterange {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 5px !important;
        margin: 12px 0 !important;
    }

        div.input-group.input-daterange .input-group-addon {
            flex: 0 0 auto !important;
            width: auto !important; /* 부트스트랩 .input-group-addon 의 기본 width:1% (테이블 셀 방식 잔재)를
                                    명시적으로 무력화하지 않으면 flex-basis:auto 가 그 1%를 그대로 물려받아
                                    "주문 기간" 라벨이 실제로는 폭이 거의 0에 가깝게 찌그러지고, 넘치는
                                    글자는 조상 요소의 overflow-x:hidden 에 의해 잘려 보이던 문제 */
            white-space: nowrap !important;
            display: flex !important;
            align-items: center !important;
            padding: 0 6px !important;
            font-size: 11.5px !important;
            border-radius: 4px !important;
        }

        /* 달력 입력창 폭을 줄여서 "조회" 버튼까지 전부 한 줄에 들어오게 함
       (기존 flex-basis 110px 는 "주문기간+시작일+~+종료일+조회"가 한 줄에
       못 들어가 조회 버튼만 다음 줄로 떨어지던 원인) */
        div.input-group.input-daterange input.form-control {
            flex: 1 1 82px !important;
            min-width: 0 !important;
            width: auto !important;
            height: 34px !important;
            padding: 0 4px !important;
            font-size: 12px !important;
            box-sizing: border-box !important;
            margin: 0 !important;
        }

        /* "조회" 버튼(마지막 input-group-addon 안의 링크)만 따로 강조 */
        div.input-group.input-daterange .input-group-addon:last-child {
            background: #333 !important;
            color: #fff !important;
            font-weight: 600 !important;
        }

            div.input-group.input-daterange .input-group-addon:last-child a {
                color: #fff !important;
                text-decoration: none !important;
            }

    /* Company/Membership 정보성 페이지 (회사소개/오시는길/매장소개/협력사/이용약관/
   개인정보보호정책/이용안내) - 전부 옛날 방식의 고정폭 테이블(width="738" 등)과
   inline style="width:1100px" 이미지로 짜여있어 모바일에서 그대로 가로로
   넘치던 문제. 표/이미지를 전부 컨테이너 폭에 맞게 강제 축소. */
    /* 이용약관/개인정보보호정책 등에 쓰인 가느다란 장식용 구분선 이미지(height=6 등)는
   PC 폭(738px)에 맞춰 만들어진 얇은 반복 패턴이라, width:100%로 늘리면
   이미지가 뿌옇게 깨지거나 깨진 아이콘처럼 보임 -> 모바일에서는 아예 숨김 */
    div.cart-title img[height="6"], div.cart-title img[height="4"] {
        display: none !important;
    }

    div.cart-title img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }

    /* td 의 background="..." 배경 타일 이미지도 PC 폭 기준 반복 패턴이라
   모바일 좁은 화면에서는 불필요하게 깨져 보이므로 제거 */
    div.cart-title table td[background] {
        background: none !important;
    }

    div.cart-title table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important; /* PC용 cellpadding/border 계산이 누적되면서
        가장 안쪽 표의 셀 오른쪽 끝이 부모보다 약 20px 더 넓게 계산되던 문제 방지.
        table-layout:fixed 는 셀 폭을 콘텐츠 크기와 무관하게 표 폭(100%) 기준으로
        엄격히 나눠서, 중첩된 표라도 항상 부모 폭 안에 들어오게 강제한다. */
        border-collapse: collapse !important;
    }

        div.cart-title table td, div.cart-title table th {
            width: auto !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            word-break: break-all !important;
            overflow-wrap: break-word !important;
        }

    div.cart-title h1 {
        font-size: 18px !important;
        padding: 10px 0 !important;
    }

    /* 게시판(Board) 상단 제목 + "글쓰기" 버튼이 float:right 절대 마진으로
   겹쳐 보이던 문제 */
    div.cart-title p.tit.left {
        display: block !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        padding: 12px 0 4px !important;
    }

    div.cart-title span#request {
        display: block !important;
        float: none !important;
        margin: 0 0 10px !important;
        text-align: right !important;
    }

    /* ----------------------------------------------------------------------10. 회원 페이지 / 로그인 / 주문내역---------------------------------------------------------------------- */

    div.login-wrap {
        display: flex !important;
        flex-direction: column !important;
        margin-top: 15px !important;
        width: 100% !important;
    }

        div.login-wrap div.login {
            float: none !important;
            width: 100% !important;
            padding: 0 !important;
        }

            div.login-wrap div.login::after {
                display: none !important;
            }

        div.login-wrap div.link {
            float: none !important;
            width: 100% !important;
            padding: 20px 0 0 0 !important;
            margin-top: 20px !important;
            border-top: 1px solid #eee !important;
        }

            div.login-wrap div.link div a.btn {
                width: 100% !important;
                border-radius: 6px !important;
            }

        div.login-wrap div.login div.form input.text, input.text {
            width: 100% !important;
            height: 44px !important;
            font-size: 14px !important;
            box-sizing: border-box !important;
        }

        div.login-wrap div.login div.form a.login {
            height: 48px !important;
            line-height: 48px !important;
            font-size: 16px !important;
            border-radius: 6px !important;
        }
    /* STREAMING_CHUNK:Styling sitemap 2x2 grid and footer... */
    /* ----------------------------------------------------------------------11. 하단 사이트맵 (2x2 격자 카드 배치로 세로 나열 원천 해결) & 푸터---------------------------------------------------------------------- */

    div.sec03 {
        background: #f4f4f4 !important;
        padding: 15px 10px !important;
    }

        div.sec03 div.sitemap {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
        }

            div.sec03 div.sitemap ul {
                float: none !important;
                margin: 0 !important;
                padding: 12px 10px !important;
                background: #fff !important;
                border-radius: 6px !important;
                border: 1px solid #e0e0e0 !important;
                box-sizing: border-box !important;
            }

                div.sec03 div.sitemap ul li {
                    margin-bottom: 6px !important;
                }

                    div.sec03 div.sitemap ul li.tit {
                        font-size: 14px !important;
                        font-weight: 700 !important;
                        color: #111 !important;
                        margin-bottom: 8px !important;
                        padding-bottom: 4px !important;
                        border-bottom: 2px solid #fcc800 !important;
                    }

                    div.sec03 div.sitemap ul li a {
                        font-size: 12px !important;
                        color: #555 !important;
                    }

    footer {
        height: auto !important;
        padding: 18px 12px !important;
        background: #1a1a1a !important;
        text-align: center !important;
    }

        footer p {
            font-size: 11px !important;
            line-height: 16px !important;
            color: #999 !important;
            margin-bottom: 3px !important;
        }
}