:root {
            /* 텍스트 */
            --text-900: #191F28;
            --text-700: #333D4B;
            --text-500: #4E5968;
            --text-400: #6B7684;
            --text-300: #8B95A1;
            --text-200: #B0B8C1;

            /* 배경 */
            --bg-white: #FFFFFF;
            --bg-gray-50: #F9FAFB;
            --bg-gray-100: #F2F4F6;
            --bg-gray-200: #E5E8EB;

            /* 메인 컬러 (모니모 블루) */
            --primary-50: #EFF6FF;
            --primary-100: #DBEAFE;
            --primary-500: #3182F6;
            --primary-600: #1B64DA;

            /* 파스텔 마커 4색 */
/*             --marker-blue: #BFE0FF;
            --marker-pink: #FFD1DC;
            --marker-mint: #C3F0DD;
            --marker-peach: #FFD9BA; */
    --marker-blue: #2F8FFF;
    --marker-pink: #F04F86;
    --marker-mint: #18B98F;
    --marker-peach: #FF8A3D;


/*  
			--marker-blue: #3B9DFF;
			--marker-pink: #FF5F8F;
			--marker-mint: #20C997;
			--marker-peach: #FF9A3D;*/


            /* 그림자 */
            --shadow-sm: 0 1px 3px rgba(0, 27, 55, 0.04), 0 1px 2px rgba(0, 27, 55, 0.06);
            --shadow-md: 0 4px 12px rgba(0, 27, 55, 0.06), 0 2px 4px rgba(0, 27, 55, 0.04);
            --shadow-lg: 0 12px 28px rgba(0, 27, 55, 0.1), 0 4px 8px rgba(0, 27, 55, 0.05);
        }

        * { margin: 0; padding: 0; box-sizing: border-box;              font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;             color: var(--text-900);}

        html, body {
            background: var(--bg-gray-50);
            -webkit-font-smoothing: antialiased;
            height: 100%;
        }

        /* 데스크톱 기본 - 전체 페이지 스크롤 없음 */
        body {
            overflow: hidden;
        }

        /* ===== 헤더 ===== */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height:86px;
            background:#ffce0f  url('/img/logo22.png') no-repeat left 30px bottom -26px;
			 background-size: auto 106px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px 0px 246px;
            z-index: 1000;
        }

        .header .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .header .logo img {height:57px; margin-top:-16px;  padding-right:15px; vertical-align:middle; }



@font-face {
    font-family: 'HsSummerWaterLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/HSSummer.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'BinggraeMelona';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BinggraeMelona.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BinggraeMelona';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BinggraeMelona-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
        .header h1 {
            font-size:clamp(17px, 2.5vw, 27px);
		  font-family: 'BinggraeMelona';
            color: var(--text-900);
			font-weight:700;
            letter-spacing: -0.04em;
        }
        .header h1 strong {   letter-spacing: -0.09em;  font-weight:700; font-size:clamp(20px, 2.5vw, 36px);  font-family: 'BinggraeMelona';}
        .header h1 strong:nth-child(1) {color:#000;}
        .header h1 strong:nth-child(2) ,
        .header h1 strong:nth-child(3){color:#FF6B3E;}
        .header h1 span {font-weight:400; padding-left:17px; color:#333; font-size:clamp(15px, 2.5vw, 17px);}

        .header .count {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-500);
            background: var(--primary-50);
            padding: 7px 14px;
            border-radius: 999px;
			display:none;
        }

        /* ===== 메인 컨테이너 ===== */
        .container {
		position:relative; z-index:1;
            margin-top: 64px;
            height: calc(100vh - 64px);
            display: flex;
            overflow: hidden;
        }

        /* ===== 지도 영역 (데스크톱: 고정) ===== */
        .map-area {
            flex: 2.5;
            position: relative;
            height: 100%;
            background: var(--bg-gray-100);
        }

        #map {
            width: 100%; position:relative; z-index:3;
            height: 100%;
        }

        /* Leaflet 톤 다운 - CartoDB Voyager는 이미 부드러우므로 필터 약화 */
        .leaflet-tile-pane {
            filter: saturate(0.95) brightness(1.02);
        }

        /* ===== 커스텀 마커 (뾰족한 핀 + 아이콘 + 4색 파스텔) ===== */
        .custom-marker {
            padding: 6px 14px 6px 6px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-900);
            box-shadow: 0 4px 12px rgba(0, 27, 55, 0.18), 0 1px 3px rgba(0, 27, 55, 0.1);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            gap: 7px;
            letter-spacing: -0.01em;
            position: relative;
			color:rgba(255,255,255,1);
        }

        /* 뾰족한 꼬리 */
        .custom-marker::after {
            content: '';
            position: absolute;
            bottom: -7px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 9px solid;
            border-top-color: inherit;
            filter: drop-shadow(0 2px 1px rgba(0, 27, 55, 0.08));
        }

        /* 4색 컬러 클래스 */
        .marker-c1 { background: var(--marker-blue); border-top-color: var(--marker-blue); }
        .marker-c1::after { border-top-color: var(--marker-blue); }

        .marker-c2 { background: var(--marker-pink); border-top-color: var(--marker-pink); }
        .marker-c2::after { border-top-color: var(--marker-pink); }

        .marker-c3 { background: var(--marker-mint); border-top-color: var(--marker-mint); }
        .marker-c3::after { border-top-color: var(--marker-mint); }

        .marker-c4 { background: var(--marker-peach); border-top-color: var(--marker-peach); }
        .marker-c4::after { border-top-color: var(--marker-peach); }

        /* 마커 안 흰색 원 아이콘 */
        .marker-icon {
            width: 27px;
            height: 27px;
            background: #fff;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
            box-shadow: 0 1px 2px rgba(0, 27, 55, 0.08);
        }

.popup-head  .marker-icon  {background:#eee;}
.custom-div-icon {
    background: transparent;
    border: 0;
}

.marker-anchor {
    position: relative;
    width: 0;
    height: 0;
}

.marker-anchor .custom-marker {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -100%);
    transform-origin: bottom center;
    white-space: nowrap;
}
        .marker-icon img {
            display: block;
            width: 20px;
            height: 20px;
            object-fit: contain;
        }

        .custom-marker:hover {
               transform: translate(2px, 2px);
            box-shadow: 0 10px 22px rgba(0, 27, 55, 0.22), 0 2px 4px rgba(0, 27, 55, 0.12);
        }

        /* ===== Leaflet 팝업 ===== */
        .leaflet-popup-content-wrapper {
            border-radius: 20px;
            padding: 0;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }

        .leaflet-popup-content { margin: 0; }

        .popup-content {
            padding: 20px;
            min-width: 240px;
            background: var(--bg-white);
        }

        .popup-content h3 {
            font-size:clamp(17px, 2.5vw, 20px);
            font-weight: 700;
            color: var(--text-900);
            margin-bottom: 6px;
            letter-spacing: -0.02em;
        }

        .popup-head {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 12px;
            padding-right: 18px;
        }

        .popup-head h3 {
            margin-bottom: 0;
        }

        .popup-info {
            margin-bottom: 16px;
        }

        .popup-info p {
            display: flex;
            gap: 8px;
            margin-bottom: 7px;
            line-height: 1.45;
        }

        .popup-info p:last-child {
            margin-bottom: 0;
        }

        .popup-info b {
            flex: 0 0 34px;
            font-size: 13px;
            color: var(--text-700);
        }

        .popup-info span {
            font-size: 13.5px;
            color: var(--text-500);
            word-break: keep-all;
        }

        .popup-content p {
            font-size: 13.5px;
            color: var(--text-500);
			margin-top:0;
            margin-bottom: 16px;
            line-height: 1.5;
        }

        .popup-content a {
display:flex;flex-wrap:wrap;
align-items: center;
justify-content: space-between;
            gap: 4px;
            background-color: #32d143;
			background-image:url('/img/smartplace.png');
			background-position: 14px  center;
			background-repeat:no-repeat;
			background-size:auto 23px;
            color: white;
            padding: 11px 12px 11px 40px;
			width:100%;
            border-radius: 12px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
            letter-spacing: -0.01em;


        }

        .popup-content a:hover {
            background-color:#10be23;
            transform: translateY(-1px);
        }

.leaflet-container a.leaflet-popup-close-button {top:10px; font-size:20px; right:10px;}


        /* 지도 힌트 */
        .map-hint {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: var(--bg-white);
            padding: 12px 18px;
            border-radius: 14px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-500);
            box-shadow: var(--shadow-md);
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* ===== 영상 영역 (데스크톱: 내부 스크롤) ===== */
        .video-area {
            flex:1.2; position:relative; z-index:2;
            background: #fff;
			border-left:1px solid #eee;
            display: flex;
            flex-direction: column;
            min-height: 100%;
			overflow-y:auto;
			overflow-x:hidden;
        }

        .video-header { position:relative; z-index:2;
            padding: 42px 40px 30px;
       /*      position: sticky;
            top: 0;
            z-index: 5; */
            flex-shrink: 0;
        }

        .video-header h2 {
            font-size: clamp(21px, 2.5vw, 30px);
            font-weight: 700;
			font-family: 'BinggraeMelona';
            color: var(--text-900);
            margin-bottom: 6px;
            letter-spacing: -0.07em;
        }

        .video-header p {
            font-size: clamp(15px, 1.5vw, 20px);
            color: var(--text-400); padding-top:clamp(0px, 1.5vw, 10px);
            font-weight: 500;
        }

        .video-list { position:relative; z-index:3;
            padding: 10px 30px 40px;
            display: flex;
            flex-wrap: wrap;
            gap: 17px;
            align-content: flex-start;
           /*  flex: 1;
            overflow-y: auto; */
        }

        /* ===== 영상 카드 (단일 화이트 컬러) ===== */
        .video-card {
            /* width: calc(50% - 20px); */
			width:100%;
            border-radius: 20px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: var(--shadow-sm);
			border:1px solid #eee;
        }

        .video-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .video-thumb {
            width: 100%;
            aspect-ratio: 6/9; overflow:hidden;
            position: relative;
            overflow: hidden;
            background: var(--bg-gray-100);
        }


        .video-thumb video,
        .video-thumb img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .video-card:hover .video-thumb img {
            transform: scale(1.06);
        }


        /* iframe (재생 중) */

        .video-thumb iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* 재생 중인 카드 hover 비활성화 */
        .video-card.playing { cursor: default; }
        .video-card.playing:hover {
            transform: none;
            box-shadow: var(--shadow-md);
        }

        .play-btn { border:2px solid rgba(255,255,255,0.6);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 52px;
            height: 52px;
            color: var(--primary-500);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px rgba(0, 27, 55, 0.15);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
background-color:Rgba(0,0,0,0.5);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'rgba(255%2C255%2C255%2C0.8)'%20class%3D'size-6'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M4.5%205.653c0-1.427%201.529-2.33%202.779-1.643l11.54%206.347c1.295.712%201.295%202.573%200%203.286L7.28%2019.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z'%20clip-rule%3D'evenodd'%20%2F%3E%3C%2Fsvg%3E");
background-size: auto 23px;
background-repeat: no-repeat;
background-position: center center;



        }

        .video-card:hover .play-btn {
            transform: translate(-50%, -50%) scale(1.1);
        }
/* 
        .play-btn::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 13px solid currentColor;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            margin-left: 3px;
        } */

        .video-info {
            padding:20px 20px;
        }

        .video-info h3 {
            font-size: clamp(15px, 2.5vw, 20px);
            font-weight: 700;
            color: var(--text-900);
            margin-bottom:14px;
            letter-spacing: -0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }

        .video-info p {
            font-size: clamp(13px, 2.5vw, 16px);
            color: var(--text-400);
            font-weight: 500;
            line-height: 1.4; 
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
			display:none;
        }

        /* 카드 번호 뱃지 */
        .card-num {
            position: absolute;
            top: 10px;
            left: 10px;
            min-width: 24px;
            height: 24px;
            padding: 0 8px;
            color: white;
            background: var(--primary-500);
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            z-index: 2;
            box-shadow: 0 2px 6px rgba(0, 27, 55, 0.18);
						display:none;
        }

.Character {position:absolute; }
.Character.ch01 {z-index:40; left:-30px; bottom:-70px; transform:rotate(20deg)}
.Character.ch01 img {width:410px;}

.Character.ch02 {z-index:2; right:-40px; top:-60px;}
.Character.ch02 img {width:290px;}

.logoimg {display:flex; align-items: center; flex-wrap:wrap; gap:0px clamp(7px, 2.5vw, 20px);}
.logoimg img:nth-child(1) {height:22px;}
.logoimg img:nth-child(2) {height:20px;}

.leaflet-top {margin-top:40px;}



@media (min-width: 1023px) and (max-width: 1450px) {
    .logoimg {width:170px;}
    .logoimg img {margin:3px;}
.Character.ch01 { 
  left: -50px;
  bottom: -20px; }

	.Character.ch01 img {width: 320px;}
	.Character.ch02 img {width: 210px;}
	.video-area {flex: 1 0 270px;}
	.btn-map-view {padding-inline:3px !important;}
	.video-info{padding-inline:15px !important;}
}



        /* ===== 모바일 반응형 ===== */
        @media (max-width: 1023px) {

        .header {height:65px; padding-left:180px;
		background-position:left 20px bottom -16px;
		background-size:auto 74px;
		}



		 .header h1 span,
		.Character {display:none;}
		.logoimg img:nth-child(1) {height:14px;}
		.logoimg img:nth-child(2) {height:11px;}

            /* 모바일은 페이지 자체가 스크롤됨 */
            html, body {
                height: auto;
            }
            body {
                overflow: auto;
                overflow-x: hidden;
            }



            .header h1 {
                font-size: 17px;
            }

            .container {
                flex-direction: column;
                height: auto;
                min-height: calc(100vh - 64px);
                overflow: visible;
            }

            /* 모바일: 지도 sticky, 카드는 페이지 스크롤로 늘어남 */
            .map-area {
                flex: none;
                width: 100%;
                height: 45vh;
                position: sticky;
                z-index: 5;
				
                border-bottom: 1px solid var(--bg-gray-100);
            }

            .video-area {
                flex: none;
                width: 100%;
                height: auto;
                overflow: visible;
                border-radius: 24px 24px 0 0;
                margin-top: -16px;
                position: relative;
                z-index: 6;
            }

            .video-header {
                padding: 24px 20px 16px;
                position: relative;
                top: auto;
            }

            .video-header::before {
                content: '';
                position: absolute;
                top: 8px;
                left: 50%;
                transform: translateX(-50%);
                width: 36px;
                height: 4px;
                background: var(--bg-gray-200);
                border-radius: 999px;
            }

            .video-header h2 {
                margin-top: 8px;
            }

            .video-list {
                padding: 4px 26px 24px;
                gap: 12px;
                flex: none;
                overflow-y: visible;
            }


            .video-thumb {
            }

            .map-hint {
                font-size: 12px;
                padding: 10px 14px;
                bottom: 14px;
                left: 14px;
            }

.best4-btn-group button,
.btn-map-view {width:clac(50% - 12px);}

            .custom-marker {
                font-size: 12px;
                padding: 5px 12px 5px 5px;
                gap: 6px;
            }

            .marker-icon {
                width: 22px;
                height: 22px;
                font-size: 12px;
            }
        }




        @media (max-width: 680px) {

.header {        background-position: left 5px bottom -5px; padding-left:119px;
        background-size: auto 56px;}


.logoimg {justify-content: right;width: 100px;}
			.header .logo img {
			  height:22px; margin-top:0px;
			}
			    .header h1 strong {font-size:19px !important;letter-spacing:-2px;}
		.logoimg {display:none}


        .video-area {
            background: var(--bg-gray-50);
        }

        .video-header p {padding-top:0;}
            .map-area { height: 52vh; }
        }

        /* ===== 스크롤바 ===== */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--bg-gray-200);
            border-radius: 999px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-200);
        }


.map-area { position: relative;  z-index:2;}

.map-reset-btn {
    position: absolute;
    top: 50px;
    right: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 18px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}


.map-reset-btn svg {width:20px; height:20px;}


.map-reset-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
    box-shadow: 0 3px 12px rgba(0,0,0,.2);
}

        @media (max-width: 1023px) {
		.leaflet-top {margin-top:10px;}
		.map-reset-btn {
			top: 15px;
			right: 20px;
			padding: 5px 10px;
			font-size: 14px;
		}

}



/* ─── 지도보기 버튼 (리스트 공통) ─── */
.btn-map-view {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 14px 6px 10px;
    color: var(--marker-blue);
    background: #E1EFFF;
    border:1px solid  var(--marker-blue);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
	max-width:159px;
    font-family: inherit;
    letter-spacing: -0.02em;
    transition: background .18s, transform .12s;
    line-height: 1;
    white-space: nowrap;
}
.btn-map-view:hover {
    background: #cde2fb;
    transform: translateY(-1px);
}
.btn-map-view:active {
    transform: scale(0.97);
}

/* ─── 비영상 업체 카드 ─── */
.video-card.no-video .video-thumb {
    background: #f0f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}
.video-card.no-video .thumb-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #888;
    font-size: 12px;
}
.video-card.no-video .thumb-placeholder svg { opacity: .4; }






        /* ─── 베스트4 카드 업체 버튼 (업체명 포함) ─── */
        .best4-btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 10px;
        }

	.best4-btn-group button {display:flex; width:calc(50% - 6px);}
  .btn-map-view svg {width:13px !important; height:13px !important; }
        .btn-map-view.btn-named {
            font-size: 11px;
            padding: 5px 11px;
            background: #f0f4ff;
            color: #1a73e8;
            border: 1.5px solid #c5d8ff;
            border-radius: 20px;
            margin-top: 0;
        }
        .btn-map-view.btn-named:hover {
            background: #1a73e8;
            color: #fff;
            border-color: #1a73e8;
        }

        /* ─── 베스트4 배지 ─── */
        .card-num.best4-badge {
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            font-size: 10px;
            letter-spacing: 0.5px;
            padding: 3px 8px;
            border-radius: 4px;
            width: auto;
            white-space: nowrap;
        }

        /* ─── 비영상 업체 카드 썸네일 영역 ─── */
        .video-card.no-video .video-thumb {
            background: #f0f4ff;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 80px;
        }
        .video-card.no-video .thumb-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            color: #888;
            font-size: 12px;
        }








        /* ── 로컬 영상 라이트박스 ── */
        #videoLightbox {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
        }
        #videoLightbox.open {
            display: flex;
        }
		#videoLightbox .lb-inner {
			position: relative;
			max-width: 92vw;
			max-height: 85vh;
			width: auto;
			height: auto;
			background: #000;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 8px 40px rgba(0,0,0,.6);
		}
		#videoLightbox video {
			display: block;
			max-width: 1000px;
			width:92vw;
			max-height: 85vh;
			width: auto;
			height: auto;
		}
        #videoLightbox .lb-close {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 36px;
            height: 36px;
            border: none;
            background: rgba(0,0,0,.55);
            color: #fff;
            font-size: 22px;
            line-height: 36px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            z-index: 1;
        }
        /* ── h3 링크 스타일 ── */
        .video-info h3 a {
            color: inherit;
            text-decoration: none;
        }
        .video-info h3 a:hover {
            text-decoration: underline;
        }
        .video-info h3.is-local {
            cursor: pointer;
        }
        .video-info h3.is-local:hover {
            text-decoration: underline;
        }
        /* ── 로컬 썸네일 ── */
        .video-thumb .local-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }


        .best-pair {
            display: flex;
            gap: 12px;flex-wrap:wrap;
        }
        .best-pair .video-card {
		width:calc(50% - 12px);
        }

        .best-pair .video-card:nth-child(2){
		width:100%;
		}

      .best-pair .video-card:nth-child(2) .video-thumb {
			  width: 100%;
			  aspect-ratio: 4/2.6
			}




span.break {display:block;}
        @media (max-width: 890px) {
			span.break {display:inline-block;;}
			span.break:before{content:''; padding-right:3px;}

        }
        @media (max-width: 540px) {
            .best-pair { flex-direction: column; }
        .best-pair .video-card {
		width:100%;
        }

        }



        /* ── QR 헤더 ── */
        .qr-header {
		position:relative; z-index:3;
            display: flex;
            align-items: center;
            gap: 20px 4%;
			color: #F24F86;
			 background: #FFE8F0;
			 border: 1px solid #FD92B6;
            border-radius: 16px;
            padding: 15px clamp(3px, 4.5vw, 20px);
            margin-left:auto;
            margin-right:auto;
			margin-bottom:30px;
			width:calc(100% - 60px);
        }
        .qr-header .qr-img-wrap {
            flex-shrink: 0; padding:clamp(3px, 4.5vw, 10px);
            width:clamp(60px, 5.5vw, 90px);
			height: clamp(60px, 5.5vw, 90px);
            border-radius: 10px;
            overflow: hidden;
            background: #fff;
            border: 1px solid #eee;
            display: flex; align-items: center; justify-content: center;
        }
        .qr-header .qr-img-wrap img {
            width: 100%; height: 100%; object-fit: cover;
        }
        .qr-header .qr-text { flex: 1; }
        .qr-header .qr-text h2 {
			font-family: 'BinggraeMelona';
            font-size:clamp(17px, 1.5vw, 21px);
            font-weight: 700;
           	color: #F24F86;
			letter-spacing:-0.04rem;
            line-height: 1.4;
        }
        .qr-header .qr-text p {
		margin-top:10px;
            font-size:clamp(13px, 1.5vw, 15px);
            color:rgba(0,0,0,0.6);
            line-height: 1.3;
        }
        .qr-header .qr-icon {
            font-size: 28px;
            flex-shrink: 0; display:none
        }